/* https://site.invalid/style/platform.css */
@scope (html[data-site-styles~="cca7b644b4c23886"]) {/* Per-figure display widths, generated by scripts/generate-figure-widths.py from each
 * figure's own typography so its labels render near the page's 16px body text.
 * Imported first on purpose: chapter-local #fig-<id> rules (49 chapters, 146 figures)
 * are authored by hand and must keep winning as deliberate overrides. */
/* ---- BEGIN self-hosted fonts (2026-07-26, launch blocker B4 perf fix) ----
 * Replaces the fonts.googleapis.com @import chain (page -> this stylesheet ->
 * Google's CSS -> the actual .woff2 file: 2 extra network round-trips before
 * the real font can even start downloading) with same-origin variable-font
 * files referenced directly via @font-face, subset to "latin" only (Latin-1
 * covers this site's English + accented-Latin content; the "latin-ext"
 * Google was also serving is ~1.7x heavier per family and unused here).
 * font-display: optional (was swap until 2026-08-04): the webfont either
 * makes first paint or that pageview keeps the fallback for its lifetime --
 * there is NO mid-page swap, which founder-reported as visible movement.
 * Chrome was measured IGNORING size-adjust/*-override on local() sources
 * (a 50% size-adjust test face rendered identical to plain Arial), so the
 * metric-matched fallbacks below never actually cushioned the swap there;
 * optional is the real shift eliminator. The fallback metrics are kept for
 * engines that do honor them, corrected 2026-08-04 from live rendered-width
 * measurement (the original OS/2 xAvgCharWidth basis was wrong for Inter and
 * Source Code Pro: it said Inter needed 138% when real Inter is NARROWER
 * than Arial, 93.94%); the code font now falls back to Courier New, not
 * Arial, so unswapped code blocks still read as code.
 * Previous rationale (fallback face visible immediately):
 * the paired "* Fallback" faces below use size-adjust/ascent-override/
 * descent-override computed from each font's own OS/2 + hhea tables against
 * Arial's published reference metrics (unitsPerEm 2048, hhea ascent 1854,
 * descent -434, xAvgCharWidth 904 -- the standard reference baseline for
 * this technique, e.g. next/font's automatic local-fallback generator), so
 * the fallback-to-webfont swap reflows the page by only a few px instead of
 * the ~0.14 CLS the homepage <h1> was measured contributing
 * (docs-internal/ops/performance-audit.md, cls-culprits-insight). See
 * docs-internal/ops/performance-b4.md for the exact metric derivation and
 * the measured before/after. Font files: assets/fonts/*.woff2 (repo-tracked,
 * ~97 KB combined for all 3 families vs. the 220-296 KB/page "Font" transfer
 * weight measured before this fix on chapter/guide pages).
 */
/* ---- END self-hosted fonts ---- */

/* ---- BEGIN self-hosted bootstrap-icons override (2026-07-28, launch
 * blocker B4 remainder, cause 1 of 3) ----
 * Quarto's own site_libs/bootstrap/bootstrap-icons.css (regenerated on every
 * build, not ours to edit) declares @font-face { font-family: "bootstrap-icons";
 * src: url(".../bootstrap-icons.woff") format("woff"); } with no font-display,
 * which computed as font-display: block -- 176 KB, no woff2, shipped on every
 * page. This block re-declares the SAME font-family (and the same implicit
 * normal/400 weight+style Quarto's rule uses, so the two rules' descriptors
 * match) with a self-hosted woff2 (128 KB, byte-identical glyph set and
 * cmap -- converted from Quarto's own .woff via fontTools, verified) and
 * font-display: swap. Per the CSS Fonts spec, when two @font-face rules have
 * matching descriptors the later one in document order wins entirely -- this
 * stylesheet loads after site_libs/bootstrap/bootstrap-icons.css on every
 * page class that includes this bundle (verified in rendered <head> order),
 * so the browser fetches only this woff2 and never Quarto's woff. Font file:
 * assets/fonts/bootstrap-icons.woff2 (repo-tracked). See
 * docs-internal/ops/LAUNCH-BLOCKER-REGISTER.md B4 for the full remainder and
 * measured before/after.
 */
/* ---- END self-hosted bootstrap-icons override ---- */

/* Learner feature controls: mounted outside the admin bar, with a native
   dialog for keyboard focus management and mobile-safe scrolling. */
.iot-feature-controls-trigger:where(:scope, *) {
  position: fixed;
  z-index: 1050;
  inset-inline-end: 1rem;
  inset-block-end: 1rem;
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 2px 10px rgb(15 23 42 / 22%);
  font-size: 1.25rem;
  cursor: pointer;
}

.iot-feature-controls-trigger:hover:where(:scope, *),
.iot-feature-controls-trigger:focus-visible:where(:scope, *) {
  background: var(--color-secondary);
}

/* Keep the learner settings launcher clear of the floating Tour launcher. */
@media (min-width: 861px) {
  .iot-feature-controls-trigger:where(:scope, *) { inset-block-end: 5rem; }
}

@media (max-width: 860px) {
  .platform-header .iot-feature-controls-trigger:where(:scope, *) {
    position: static;
    width: 44px;
    height: 44px;
    border-radius: 7px;
    box-shadow: none;
  }
}

.iot-feature-controls-dialog:where(:scope, *) {
  width: min(42rem, calc(100vw - 1.5rem));
  max-width: none;
  max-height: min(85vh, 52rem);
  padding: 1.25rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-xl);
  background: var(--gray-50);
  color: var(--gray-900, #17202a);
  box-shadow: 0 20px 65px rgb(15 23 42 / 30%);
}

.iot-feature-controls-dialog:where(:scope, *)::backdrop { background: rgb(15 23 42 / 55%); }
.iot-feature-controls-header:where(:scope, *) { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.iot-feature-controls-header h2:where(:scope, *) { margin: 0; font-size: 1.25rem; }
.iot-feature-controls-header p:where(:scope, *) { margin: .25rem 0 0; color: var(--gray-600); }
.iot-feature-controls-close:where(:scope, *) { min-inline-size: 2.75rem; min-block-size: 2.75rem; border: 0; background: transparent; color: inherit; font-size: 1.75rem; cursor: pointer; }
.iot-feature-controls-presets:where(:scope, *) { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1rem; }
.iot-feature-controls-presets button:where(:scope, *) { min-height: 2.75rem; padding: .45rem .8rem; border: 1px solid var(--gray-300); border-radius: var(--radius-md); background: #fff; color: var(--color-primary); font-weight: 600; cursor: pointer; }
.iot-feature-controls-presets button:hover:where(:scope, *),
.iot-feature-controls-presets button:focus-visible:where(:scope, *) { border-color: var(--color-secondary); outline: 2px solid var(--color-secondary); outline-offset: 1px; }
.iot-feature-controls-list:where(:scope, *) { max-height: 60vh; overflow-y: auto; padding-inline-end: .25rem; }
.iot-feature-controls-group:where(:scope, *) { border-top: 1px solid var(--gray-200); }
.iot-feature-controls-group > summary:where(:scope, *) { padding: .7rem .2rem; color: var(--color-primary); font-weight: 700; cursor: pointer; }
.iot-feature-controls-help:where(:scope, *) { margin: 0 .35rem .6rem; color: var(--gray-600); font-size: .875rem; }
.iot-feature-controls-item:where(:scope, *) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .5rem 1rem; padding: .55rem .35rem; border-top: 1px solid var(--gray-200); }
.iot-feature-controls-label:where(:scope, *) { overflow-wrap: anywhere; }
.iot-feature-controls-item.is-locked:where(:scope, *) { grid-template-columns: 1fr; }
.iot-feature-controls-lock-reason:where(:scope, *) { margin: -.25rem 0 0; color: var(--gray-600); font-size: .875rem; }
.iot-feature-controls-switch-label input[role="switch"]:where(:scope, *) { width: 2.75rem; height: 2.75rem; accent-color: var(--color-secondary); cursor: pointer; }
.iot-feature-controls-device-row:where(:scope, *) { padding: .7rem .35rem; border-top: 1px solid var(--gray-200); }
.iot-feature-controls-device-row h3:where(:scope, *) { margin: 0; font-size: 1rem; }
.iot-feature-controls-device-row p:where(:scope, *) { margin: .35rem 0; font-size: .875rem; }
.iot-feature-controls-device-row .access-toolkit__field:where(:scope, *) { margin: .4rem 0; }
.iot-feature-controls-device-row.access-light-route:where(:scope, *) { max-width: none; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 0; background: transparent; color: inherit; }
.iot-access-choice:where(:scope, *) { display: grid; gap: .35rem; }
.iot-access-choice label:where(:scope, *) { font-weight: 650; }
.iot-access-choice select:where(:scope, *) { width: 100%; min-height: 2.75rem; padding: .45rem .65rem; border: 1px solid var(--gray-300); border-radius: var(--radius-md); background: #fff; color: inherit; font: inherit; }
.iot-access-checkbox:where(:scope, *) { display: flex; align-items: center; gap: .6rem; min-height: 2.75rem; cursor: pointer; }
.iot-access-checkbox input:where(:scope, *) { width: 1.2rem; height: 1.2rem; accent-color: var(--color-secondary); }
.iot-access-choice :focus-visible:where(:scope, *), .iot-access-checkbox :focus-visible:where(:scope, *) { outline: 3px solid var(--color-secondary); outline-offset: 2px; }

@media (max-width: 480px) {
  .iot-feature-controls-dialog:where(:scope, *) { padding: 1rem; }
}

/* platform.css — structural half of the two-file IoTClass standard.
 *
 * AST-CSS1 (2026-08-08) removed the appended design-system.css mirror and
 * settled every same-selector/property pair by computed-style evidence.
 * This file owns page geometry, chrome structure and page-type variants.
 * Tokens, fonts, typography and component skin live only in
 * design-system.css, which loads after this file. See
 * docs-internal/CSS-ARCHITECTURE.md for the ownership and review contract.
 * Protected main.content media blocks retain their prior sequence.
 */

/* ==== LAYER 1: platform base (pruned iotclass.css) ==== */

/* ===========================================
   IoT Class Design Tokens
   ===========================================
   Single source of truth for all design values
   IEEE Professional Color Palette + Modern Typography
   =========================================== */

:root:where(:scope) {
  /* ===== IEEE Professional Color Palette ===== */
  /* Primary Brand Colors */
  --ieee-navy: #2c3e50;
  --ieee-teal: #16a085;
  --ieee-orange: #e67e22;

  /* Semantic aliases */
  --color-primary: var(--ieee-navy);
  --color-secondary: var(--ieee-teal);
  --color-accent: var(--ieee-orange);

  /* Neutral Palette */
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* ===== Flat Interaction System ===== */
  --flat-page-bg: var(--gray-50);
  --flat-surface: #ffffff;
  --flat-surface-muted: #f7f8fa;
  --flat-surface-hover: #fbfcfe;
  --flat-border: #dbdcdd;
  --flat-border-strong: #c7c9cc;
  --flat-text: #21242c;
  --flat-text-muted: #475774;
  --flat-text-subtle: #646b7a;
  --flat-accent: #1865f2;
  --flat-control-bg: #f1f3f5;
  --flat-control-hover: #e7ebf0;
  --flat-shadow: none;
  --flat-focus-ring: #1865f2;
  --flat-radius-sm: var(--radius-sm);
  --flat-radius-md: var(--radius-md);
  --flat-radius-lg: var(--radius-lg);
  --interactive-all: #335c7d;
  --interactive-all-soft: #eef5fa;
  --interactive-all-ink: #24445f;
  --interactive-game: #b35c00;
  --interactive-game-soft: #fff3df;
  --interactive-game-ink: #6f3800;
  --interactive-simulation: #007c6e;
  --interactive-simulation-soft: #e3f8f4;
  --interactive-simulation-ink: #00564e;
  --interactive-animation: #1f5fbf;
  --interactive-animation-soft: #edf3ff;
  --interactive-animation-ink: #184a99;
  --interactive-lab: #7b3f98;
  --interactive-lab-soft: #f7ecfb;
  --interactive-lab-ink: #592c6d;
  --interactive-hardware-sim: #9a5200;
  --interactive-hardware-sim-soft: #fff0e0;
  --interactive-hardware-sim-ink: #713b00;
  --interactive-knowledge-check: #246b3d;
  --interactive-knowledge-check-soft: #e8f6ee;
  --interactive-knowledge-check-ink: #14532d;

  /* Semantic Colors */
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;

  /* ===== Typography Scale ===== */
  /* Base: 16px (1rem) - Modern 8pt grid aligned */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem; /* 36px */
  --font-size-5xl: 3rem; /* 48px */

  /* Font Families */
  --font-family-base:
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  --font-family-mono:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font-family-heading: var(--font-family-base);

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;

  /* ===== Spacing Scale (8pt grid) ===== */
  --spacing-xs: 0.25rem; /* 4px */
  --spacing-sm: 0.5rem; /* 8px */
  --spacing-md: 1rem; /* 16px */
  --spacing-lg: 1.5rem; /* 24px */
  --spacing-xl: 2rem; /* 32px */
  --spacing-2xl: 3rem; /* 48px */
  --spacing-3xl: 4rem; /* 64px */

  /* ===== Figure Sizing ===== */
  --iot-figure-max-width: 640px;
  --iot-figure-compact-max-width: 560px;
  --iot-figure-wide-max-width: 980px;

  /* ===== Border Radius ===== */
  --radius-sm: 0.25rem; /* 4px */
  --radius-md: 0.375rem; /* 6px */
  --radius-lg: 0.5rem; /* 8px */
  --radius-xl: 0.75rem; /* 12px */
  --radius-2xl: 1rem; /* 16px */
  --radius-full: 9999px; /* Pills/circles */

  /* ===== Shadows ===== */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

  /* ===== Transitions ===== */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;

  /* ===== Touch Targets (WCAG 2.1 AA) ===== */
  --touch-target-min: 44px;
  --touch-target-comfortable: 48px;
  --touch-target-large: 56px;

  /* ===== Focus States ===== */
  --focus-ring-color: rgba(59, 130, 246, 0.5);
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* ===== Legacy Compatibility ===== */
  --primary-blue: var(--ieee-navy);
  --primary-dark: #1a252f;
  --accent-purple: #546e7a;
  --gradient-primary: linear-gradient(135deg, var(--ieee-navy) 0%, var(--ieee-teal) 100%);
  --gradient-dark: linear-gradient(135deg, var(--gray-800) 0%, var(--gray-900) 100%);
  --gradient-accent: linear-gradient(135deg, var(--ieee-teal) 0%, var(--ieee-orange) 100%);
}
/* ===== FOUC Prevention & Component Placeholders ===== */
/* Moved from per-module _quarto.yml \3c style> blocks to single source of truth */
#quarto-sidebar .sidebar-item a:where(:scope, *) {
  transition: none !important;
}
iot-knowledge-check:not(:defined):where(:scope, *),
iot-matching-quiz:not(:defined):where(:scope, *),
iot-ordering-quiz:not(:defined):where(:scope, *),
iot-label-quiz:not(:defined):where(:scope, *),
iot-code-quiz:not(:defined):where(:scope, *),
iot-video:not(:defined):where(:scope, *),
iot-simulator:not(:defined):where(:scope, *),
iot-animation:not(:defined):where(:scope, *) {
  display: block;
  min-height: 100px;
  background: #f5f5f5;
  border-radius: 8px;
}
/* This roadmap's label quiz is taller after it hydrates. Reserve its measured
   widget box before the retired CoAP fragment lands below it. */
body.page-coap-message-format-practice #chapter-roadmap iot-label-quiz:where(:scope, *) {
  min-height: 930px;
}
@media (max-width: 600px) {
  body.page-coap-message-format-practice #chapter-roadmap iot-label-quiz:where(:scope, *) {
    min-height: 860px;
  }
}
iot-knowledge-check:where(:scope, *),
iot-matching-quiz:where(:scope, *),
iot-ordering-quiz:where(:scope, *),
iot-label-quiz:where(:scope, *),
iot-code-quiz:where(:scope, *),
iot-video:where(:scope, *),
iot-simulator:where(:scope, *),
iot-animation:where(:scope, *),
.inline-knowledge-check:where(:scope, *),
.iot-quiz-matching:where(:scope, *),
.iot-quiz-ordering:where(:scope, *),
.iot-quiz-label:where(:scope, *),
.iot-quiz-code:where(:scope, *) {
  display: block;
  width: 100%;
  box-sizing: border-box;
}
/* Display outputs should fill the available width instead of inheriting console-output chrome. */
.cell-output.cell-output-display:where(:scope, *) {
  background: transparent;
  border-left: 0;
  padding: 0;
  margin: 1rem 0;
  border-radius: 0;
  font-family: inherit;
  font-size: inherit;
}
/* Quarto wraps OJS outputs in anonymous divs that otherwise shrink to min-content. */
.cell-output.cell-output-display > div:where(:scope, *),
.cell-output.cell-output-display > div > [id^="ojs-cell-"]:where(:scope, *),
.cell-output.cell-output-display .observablehq:where(:scope, *),
.cell-output.cell-output-display .observablehq > form[class^="oi-"]:where(:scope, *) {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
/* OJS controls need more room than Quarto's default 120px labels. */
.observablehq > form[class^="oi-"]:where(:scope, *) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem 0.75rem;
  margin: 0.5rem 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.75rem;
  border: 1px solid var(--flat-border);
  border-radius: var(--flat-radius-lg);
  background: var(--flat-surface);
  box-shadow: var(--flat-shadow);
}
.observablehq > form[class^="oi-"] > label:where(:scope, *) {
  flex: 1 1 clamp(10rem, 20vw, 15rem);
  width: auto !important;
  max-width: 100%;
  margin: 0;
  line-height: 1.35;
  overflow-wrap: anywhere;
  color: var(--flat-text);
  font-weight: var(--font-weight-semibold);
}
.observablehq > form[class^="oi-"] > div[class$="-input"]:where(:scope, *) {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1 1 12rem;
  min-width: min(12rem, 100%);
  max-width: 100%;
}
.observablehq > form[class^="oi-"] input[type="number"]:where(:scope, *),
.observablehq > form[class^="oi-"] input[type="text"]:where(:scope, *),
.observablehq > form[class^="oi-"] select:where(:scope, *) {
  min-height: 2.25rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background: #ffffff;
  color: var(--gray-800);
  padding: 0.35rem 0.5rem;
}
.observablehq > form[class^="oi-"] input[type="number"]:where(:scope, *),
.observablehq > form[class^="oi-"] input[type="text"]:where(:scope, *) {
  flex: 0 0 min(10rem, 45%);
}
.observablehq > form[class^="oi-"] input[type="range"]:where(:scope, *),
.observablehq > form[class^="oi-"] select:where(:scope, *) {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
}
.observablehq > form[class^="oi-"] input[type="range"]:where(:scope, *) {
  accent-color: var(--ieee-teal);
}

@media (max-width: 700px) {
  .observablehq > form[class^="oi-"]:where(:scope, *) {
    flex-direction: column;
  }

  .observablehq > form[class^="oi-"] > label:where(:scope, *),
  .observablehq > form[class^="oi-"] > div[class$="-input"]:where(:scope, *) {
    width: 100% !important;
    flex-basis: auto;
    min-width: 0;
  }

  .observablehq > form[class^="oi-"] input[type="number"]:where(:scope, *),
  .observablehq > form[class^="oi-"] input[type="text"]:where(:scope, *) {
    flex-basis: 7.5rem;
  }
}
/* ===== Landing Page: Book Grid & Hero ===== */
/* Moved from root _quarto.yml \3c style> block to single source of truth */
.book-grid:where(:scope, *) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  padding: 1rem 0;
}
.book-card .meta:where(:scope, *) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: #888;
}
.hero:where(:scope, *) {
  text-align: center;
  padding: 3rem 1rem;
  background: linear-gradient(135deg, #2c3e50 0%, #16a085 100%);
  color: white;
  margin: -1rem -1rem 2rem -1rem;
  border-radius: 0 0 20px 20px;
}
.hero h1:where(:scope, *) {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}
.hero p:where(:scope, *) {
  font-size: 1.2rem;
  opacity: 0.9;
}
.stats:where(:scope, *) {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-top: 2rem;
}
.stat:where(:scope, *) {
  text-align: center;
}
/* ===== Global Resets ===== */
*:where(:scope, *),
*:where(:scope, *)::before,
*:where(:scope, *)::after {
  box-sizing: border-box;
}
html:where(:scope) {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Navigation links - no underline by default */
nav a:where(:scope, *),
.nav-link:where(:scope, *),
.sidebar a:where(:scope, *),
.breadcrumb a:where(:scope, *) {
  text-decoration: none;
}
nav a:hover:where(:scope, *),
.nav-link:hover:where(:scope, *),
.sidebar a:hover:where(:scope, *),
.breadcrumb a:hover:where(:scope, *) {
  text-decoration: none;
  color: var(--color-secondary);
}
main.content p a:where(:scope, *),
main.content li a:where(:scope, *),
#quarto-document-content p a:where(:scope, *),
#quarto-document-content li a:where(:scope, *),
#quarto-document-content td a:where(:scope, *),
#quarto-document-content .cap-index-cards > div > a:where(:scope, *),
#quarto-document-content .cap-index-grid > div > a:where(:scope, *),
#quarto-document-content section > .xref:where(:scope, *) {
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

/* These direct prose links are too close to surrounding body ink (1.47:1
   and 2.11:1). The existing flat accent clears 3:1 against body ink and
   4.5:1 against the white reading surface. */
#quarto-document-content .cap-index-cards > div > a:where(:scope, *),
#quarto-document-content .cap-index-grid > div > a:where(:scope, *),
#quarto-document-content section > .xref:where(:scope, *) {
  color: var(--flat-accent) !important;
}
/* =============================================
   IoT Class - Consolidated Theme
   Merged from: styles.css,
components.css,
educational-components.css,
sidebar-optimizer.css,
iot-simulator.css
   ============================================= */

/* ===== Skip Link (keyboard accessibility) ===== */
.skip-link-nav:where(:scope, *) {
  position: absolute;
  width: 0;
  height: 0;
  overflow: visible;
}
.skip-link:where(:scope, *) {
  position: fixed;
  top: 0.75rem;
  left: 1rem;
  transform: translateY(calc(-100% - 2rem));
  background: #2c3e50;
  color: white;
  padding: 8px 16px;
  z-index: 10000;
  text-decoration: none;
  font-weight: bold;
  border-radius: 4px;
}
.skip-link:focus:where(:scope, *),
.skip-link:focus-visible:where(:scope, *) {
  top: 0.75rem !important;
  transform: none !important;
}
/* --- Section: Modern Theme (was styles.css) --- */

/*------------------------------------------------------------------------------
  IoT Class - Modern Tier-Based Theme
  Adapted from AI for Sensor Data Playbook styling principles
  12 Parts organized by learning tier with gradient color scheme
------------------------------------------------------------------------------*/

:root:where(:scope) {
  /* Primary Palette - IoT Theme */
  --iot-midnight: #2c3e50;
  --iot-navy: #2e5cb8;
  --iot-ocean: #3498db;
  --iot-azure: #2e5cb8;
  --iot-sky: #00a3b4;
  --iot-electric: #00b878;
  --iot-mint: #27ae60;

  /* Neutral Palette */
  --iot-sand: #f5f5f5;
  --iot-cloud: #ececec;
  --iot-mist: #e0e0e0;
  --iot-foam: #ffffff;
  --iot-border: #bdbdbd;
  --iot-border-light: rgba(189, 189, 189, 0.5);
  --iot-muted: #757575;
  --iot-text-dark: #2c3e50;

  /* Accent Colors */
  --iot-accent-warning: #f7ca18;
  --iot-accent-error: #e74c3c;

  /* Effects */
  --iot-highlight: rgba(46, 92, 184, 0.12);
  --iot-shadow-md: 0 8px 24px rgba(44, 62, 80, 0.1);
  --iot-shadow-lg: 0 16px 48px rgba(44, 62, 80, 0.14);
  --iot-shadow-xl: 0 24px 64px rgba(44, 62, 80, 0.18);

  /* Gradients */
  --gradient-tech: linear-gradient(135deg, #2980b9 0%, #2e5cb8 35%, #00a3b4 65%, #27ae60 100%);
  --gradient-sky: linear-gradient(135deg, #00a3b4 0%, #27ae60 100%);
  --gradient-subtle: linear-gradient(
    135deg,
    rgba(46, 92, 184, 0.05) 0%,
    rgba(0, 163, 180, 0.05) 100%
  );

  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
html:where(:scope) {
  overflow-x: hidden;
  scroll-behavior: smooth;
}
/* a11y audit 2026-07-28/B9 close-out (TASK-70 item 1): the smooth
 * scroll-behavior above, plus every transition/animation this stylesheet
 * declares on interactive components, has no prefers-reduced-motion
 * override anywhere at global scope -- only a handful of individual
 * components (global-search, version-switcher, KC/quiz celebrations) had
 * their own scoped @media block. WCAG 2.3.3 (AAA, but treated as the bar
 * here per the audit) wants a user who has asked the OS for reduced motion
 * to get it everywhere, not component-by-component.
 *
 * Two-part fix, deliberately layered instead of a single blanket rule:
 *  1) `html { scroll-behavior: auto }` kills the animated jump-to-anchor /
 *     scrollIntoView behavior outright -- there is no "shorten" version of
 *     an instant scroll.
 *  2) A broad `*, *::before, *::after` transition/animation-duration clamp
 *     to near-zero (0.01ms, not 0 -- 0 can suppress `transitionend`/
 *     `animationend` events some of this file's own JS listens for, e.g.
 *     the celebration cleanup timers; several were already switched to
 *     setTimeout instead, but 0.01ms is the standard safe value that keeps
 *     those events firing while being visually instant) plus
 *     animation-iteration-count: 1 so anything looping (spinners, pulses)
 *     stops after one frame instead of spinning forever. This is safe at
 *     `*` scope: it only touches duration/iteration-count/scroll-behavior,
 *     never color/layout/display, so no component's resting appearance
 *     changes -- only its motion does. Existing component-scoped
 *     reduced-motion blocks below (search input/spinner, version switcher,
 *     KC/quiz celebrations + hotspot pulse) still apply on top of this and
 *     are left in place; they null out animation/transition entirely for
 *     nodes where even a 0.01ms flash isn't wanted (e.g. an infinite pulse
 *     that would otherwise still render one visible frame). */
@media (prefers-reduced-motion: reduce) {
  html:where(:scope) {
    scroll-behavior: auto;
  }
  *:where(:scope, *),
  *:where(:scope, *)::before,
  *:where(:scope, *)::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}
/* AST-CSS1 CRITICAL START: structural page shell */
body:where(:scope, *) {
  padding: 0;
  font-weight: 400;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
main.content:where(:scope, *) {
  background: transparent;
  box-shadow: none;
  padding: 0;
  max-width: 100%;
  overflow-x: hidden;
}
/* Keep long MathJax display equations readable on phones instead of clipping. */
#quarto-document-content mjx-container[display="true"]:where(:scope, *),
main.content mjx-container[display="true"]:where(:scope, *) {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  box-sizing: border-box;
  padding-bottom: 0.15rem;
}
/* worked-numbers-inline-math-overflow (P3 wave-3 fix,
2026-07-22): the rule
   above only ever matched mjx-container[display="true"] -- MathJax DISPLAY
   math ($$...$$). INLINE math ($...$) had zero overflow protection at all:
   its default `display: inline; overflow-x: visible` means a single wide
   inline formula can overflow a narrow container (e.g. a .physfn-card
   "Worked Numbers" bullet list) with no scroll mechanism whatsoever,
not
   even a hidden/inaccessible one. `display: inline-block` is required
   below because CSS `overflow` has no effect on plain `display: inline`
   boxes. Root-caused live via Playwright DOM inspection against
   wsn/duty-cycle-worked-examples (see temp/ceo-drafts-20260722/p3w3-fixes.md
   class 1) -- a wave-3 pre-flight `grep` had wrongly concluded this class
   was already fixed everywhere by matching .physfn-card's generic
   `overflow-x: auto` (present in the base template of all 316+ files)
   instead of a math-specific rule. */
#quarto-document-content mjx-container:not([display="true"]):where(:scope, *) {
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  vertical-align: middle;
  box-sizing: border-box;
}

@media (max-width: 700px) {
  #quarto-document-content mjx-container[display="true"]:where(:scope, *),
  main.content mjx-container[display="true"]:where(:scope, *) {
    font-size: 0.92em;
    text-align: left;
  }
}
#quarto-content:where(:scope, *) {
  background: transparent;
  padding: 2rem 1rem 2.5rem;
  gap: 0.5rem;
  max-width: 100%;
}
/* floating-feedback-widget-content-overlap (P3 wave-3 fix,
2026-07-22): the
   "Feedback" button (assets/js/content-flagging.js `applyButtonLayout()`) is
   `position: fixed; right: 20px; bottom: 20px;` set via inline style,
so it
   always floats over the same bottom-right viewport corner regardless of
   page content -- normally harmless because the last on-page content sits
   well above it,
except on short chapters with too few headings to generate
   a TOC sidebar,
where the content column widens/lengthens into that corner
   and its last element (often a Knowledge Check) ends up rendered under the
   button (edge-fog/edge-vs-cloud-debate). Reserve permanent clearance below
   all page content -- roughly 2x the button's own footprint (~64px: 20px
   offset + ~44px pill height) -- so the last element on ANY page,
long or
   short,
TOC or no TOC,
never reaches the button's zone. Harmless on long
   pages (a little extra whitespace at the very end); cannot be fixed on the
   button itself since its `.style.cssText` inline styles out-specificity
   any stylesheet rule without `!important`,
and this is the safer layer. */
#quarto-content:where(:scope, *) {
  padding-bottom: 6rem;
}
.page-columns:where(:scope, *) {
  max-width: 100%;
  gap: 0.5rem;
}
/* AST-CSS1 CRITICAL END */
main.content > *:first-child:where(:scope, *) {
  margin-top: 0;
}
h1:where(:scope, *),
h2:where(:scope, *),
h3:where(:scope, *),
h4:where(:scope, *),
h5:where(:scope, *),
h6:where(:scope, *) {
  color: var(--iot-midnight);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
}
h1:where(:scope, *) {
  font-size: 2.75rem;
  background: var(--gradient-subtle);
  border-left: 5px solid var(--iot-azure);
  border-bottom: 2px solid var(--iot-border-light);
  padding: 0.75rem 1.25rem 0.75rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
  border-radius: 8px;
  transition: border-left-color var(--transition-base);
}
h1:hover:where(:scope, *) {
  border-left-color: var(--iot-electric);
}
h2:where(:scope, *) {
  font-size: 2.1rem;
  border-bottom: 2px solid var(--iot-mist);
  padding-bottom: 0.6rem;
  margin-top: 2.75rem;
  margin-bottom: 1.25rem;
  position: relative;
  transition: color var(--transition-base);
}
h2:where(:scope, *)::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 60px;
  height: 3px;
  background: var(--gradient-sky);
  border-radius: 2px;
}
h3:where(:scope, *) {
  font-size: 1.65rem;
  /* a11y audit 2026-07-28 (B9): Bootstrap's own reboot sets
   * `h3, .h3, h4, .h4 { opacity: 0.9 }` (same specificity as this rule; we
   * only win on `color` because this file loads after bootstrap's, cascade
   * order, not specificity -- opacity was never contested here so bootstrap's
   * 0.9 always applied). That blended var(--iot-ocean) #3498db down to an
   * effective #47a1de on the #f5f5f5 body background used by _platform pages
   * -- 2.59:1, below even the 3:1 large-text floor this 1.65rem/700 heading
   * qualifies for. opacity:1 alone only reaches 2.89:1 (still short), so the
   * color itself is darkened 12% toward black on top of that -- 3.64:1,
   * comfortable margin above 3:1, without touching the shared --iot-ocean
   * variable (also used by a:hover/a:focus elsewhere, which already pass and
   * shouldn't move). */
  color: color-mix(in srgb, var(--iot-ocean) 88%, black);
  opacity: 1;
  margin-top: 2.25rem;
  margin-bottom: 1rem;
  padding-left: 0.75rem;
  border-left: 3px solid var(--iot-sky);
  transition: all var(--transition-base);
}
h3:hover:where(:scope, *) {
  color: var(--iot-azure);
  border-left-color: var(--iot-electric);
}
h4:where(:scope, *) {
  font-size: 1.35rem;
  color: var(--iot-navy);
  margin-top: 1.75rem;
  margin-bottom: 0.85rem;
}
/* Title block - minimal single colored bar */
#title-block-header.quarto-title-block:where(:scope, *) {
  position: relative;
  box-shadow: none;
}
#title-block-header.quarto-title-block:hover:where(:scope, *) {
  transform: none;
  box-shadow: none;
}
/* Remove all decorative elements */
#title-block-header.quarto-title-block:where(:scope, *)::before,
#title-block-header.quarto-title-block:where(:scope, *)::after {
  display: none;
}
/* Remove ALL borders from nested elements inside title block */
#title-block-header *:where(:scope, *),
#title-block-header *:where(:scope, *)::before,
#title-block-header *:where(:scope, *)::after {
  border: none !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
/* Hide breadcrumbs in title block */
#title-block-header .quarto-title-breadcrumbs:where(:scope, *),
#title-block-header nav.quarto-title-breadcrumbs:where(:scope, *),
.quarto-title-breadcrumbs:where(:scope, *) {
  display: none !important;
}
/* Title - white text on colored bar */
#title-block-header.quarto-title-block .title:where(:scope, *),
body #title-block-header .title:where(:scope, *) {
  font-size: 1.4rem;
  color: #ffffff !important;
  margin: 0;
  padding: 0;
  border-bottom: none;
  line-height: 1.35;
  font-weight: 600;
}
/* Chapter number link in title - also white */
#title-block-header .title a:where(:scope, *),
#title-block-header .title .chapter-number:where(:scope, *) {
  color: #ffffff !important;
  text-decoration: none;
}
/* How It Works keeps the authored title position while the shared H1 is visible. */
#quarto-document-content #title-block-header.hiw-title-block:where(:scope, *) {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
#title-block-header.hiw-title-block .hiw-kicker:where(:scope, *) {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  margin-bottom: 0.85rem;
  border-radius: 999px;
  background: #f1f5f9 !important;
  color: #1f2933;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#title-block-header.hiw-title-block h1.title:where(:scope, *) {
  margin: 2.6rem 0 1rem !important;
  padding: 0 0 0.4rem !important;
  border-bottom: 1px solid #d2d6dc !important;
  color: #1f2933 !important;
  font-size: 1.6rem !important;
  font-weight: 700;
  line-height: 1.4 !important;
  letter-spacing: -0.01em;
}
#title-block-header.hiw-title-block .iot-audio-toolbar:where(:scope, *) { display: none !important; }
body .hiw-page .hiw-kicker:where(:scope, *) { display: none !important; }
/* Description (Quarto's `description:` front-matter) needs the same white-on-
 * colored-bar treatment as .title above. This is NOT the same case as
 * .subtitle below: .subtitle is Quarto boilerplate and is deliberately
 * hidden, but description: is author-written summary content -- hiding it
 * would delete real content just to dodge a contrast failure.
 * Root cause (a11y audit 2026-07-28, B9): #title-block-header's background
 * is var(--pc-main, var(--iot-azure)) -- a mid-blue -- but .description had
 * no color override at all, so it rendered in ordinary body-text color at
 * 1.74:1 against that blue. white on the same banner measures 6.29:1. */
/* 2026-09-07 (CEO, seen on /labs/dht22-environment.html): the design-system
 * rule "h1..h5, .quarto-title-block .title { color: var(--ds-ink) }" made every
 * title block a flat white surface with a dark title, so white description
 * text became invisible and left a 60 px blank under the title on ~40 pages
 * (labs, legal, topics, how-it-works, games). The description follows the
 * title's surface: soft ink on the flat block. */
#title-block-header.quarto-title-block .description:where(:scope, *),
body #title-block-header .description:where(:scope, *) {
  color: var(--ds-ink-soft, #4b5b69) !important;
  margin: 0.35rem 0 0;
  max-width: 70ch;
}
/* Hide subtitle,
meta info */
#title-block-header.quarto-title-block .subtitle:where(:scope, *),
body #title-block-header .subtitle:where(:scope, *),
#title-block-header .quarto-categories:where(:scope, *),
#title-block-header .quarto-category:where(:scope, *),
#title-block-header .quarto-title-meta:where(:scope, *),
#title-block-header .quarto-title-meta-heading:where(:scope, *),
#title-block-header .quarto-title-meta-contents:where(:scope, *),
#title-block-header .keywords:where(:scope, *) {
  display: none !important;
}
/* Navigation — hide Quarto's default header bars visually; module bar replaces them.
   Use clip instead of display:none so Quarto's sidebar toggle + search JS still work. */
#quarto-header:where(:scope, *) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.quarto-secondary-nav:where(:scope, *) {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--iot-border-light);
  box-shadow: var(--iot-shadow-md);
  transition: box-shadow var(--transition-base);
}
.quarto-secondary-nav:hover:where(:scope, *) {
  box-shadow: var(--iot-shadow-lg);
}
.quarto-secondary-nav .btn:where(:scope, *) {
  color: var(--iot-midnight);
  transition: all var(--transition-base);
  border-radius: 8px;
  padding: 0.5rem 0.85rem;
}
.quarto-secondary-nav .btn:hover:where(:scope, *) {
  color: var(--iot-azure);
  background: var(--iot-highlight);
}
/* Sidebar */
#quarto-sidebar:where(:scope, *) {
  background: rgba(255, 255, 255, 0.97);
  border-right: 1px solid var(--iot-border-light);
  box-shadow: var(--iot-shadow-md);
  padding: 0.4rem 0.75rem 1rem 0.75rem;
  /* Ensure adequate width for chapter navigation */
  min-width: 280px;
  width: var(--bs-sidebar-width, 300px);
}
body.nav-sidebar .sidebar-navigation:where(:scope, *) {
  overflow: visible !important;
  max-height: none;
}
body.nav-sidebar .sidebar-menu-container:where(:scope, *) {
  max-height: none;
}
body.nav-sidebar .sidebar:where(:scope, *) {
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
}
body.nav-sidebar #quarto-sidebar:where(:scope, *) {
  max-height: none !important;
  height: max-content !important;
  min-height: 0;
}
/* ==========================================
   SIDEBAR WIDTH FIX FOR MODULE PAGES
   Ensure sidebar has adequate width on all pages
   ========================================== */

/* Left sidebar - enforce minimum 280px width */
#quarto-sidebar:where(:scope, *),
.sidebar.sidebar-navigation:where(:scope, *) {
  min-width: 280px !important;
  flex-shrink: 0;
}
/* Let Quarto handle grid - don't override */
/* Grid settings come from _quarto.yml */

/* When margin sidebar is hidden,
use two-column layout */
body.quarto-book .page-columns:not(:has(#quarto-margin-sidebar)):where(:scope, *) {
  grid-template-columns: minmax(280px, 300px) 1fr;
}
/* Ensure sidebar column doesn't shrink below minimum */
body.quarto-book #quarto-sidebar-glass-pane + .sidebar-menu-container:where(:scope, *) {
  width: 100%;
  min-width: 260px;
}
/* ==========================================
   COMPACT SIDEBAR STYLING FOR 200+ CHAPTERS
   ========================================== */

#quarto-sidebar .sidebar-item:where(:scope, *) {
  margin: 0.05rem 0;
}
/* Make items more compact for better navigation with 200+ chapters */
#quarto-sidebar .sidebar-item-container:where(:scope, *) {
  min-height: auto;
  padding: 0;
}
/* Force no capitalization on chapter links - increased specificity */
body #quarto-sidebar .sidebar-item a .sidebar-item-text:where(:scope, *),
body .sidebar-item-text:where(:scope, *),
#quarto-sidebar .sidebar-item-text:where(:scope, *) {
  text-transform: none;
}
#quarto-sidebar .sidebar-item a:where(:scope, *) {
  color: var(--iot-text-dark);
  font-weight: 500;
  padding: 0.28rem 0.5rem;
  display: block;
  border-radius: 4px;
  transition: all var(--transition-fast);
  border-left: 2px solid transparent;
  font-size: 0.76rem;
  line-height: 1.25;
  text-transform: none;
}
#quarto-sidebar .sidebar-item-section > .sidebar-item-container .sidebar-item-text:where(:scope, *) {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Hover will be handled by JavaScript for part-specific colors */
#quarto-sidebar .sidebar-item a:hover:where(:scope, *) {
  transform: translateX(2px);
}
/* Active chapter - fallback style,
JS will override with part color */
#quarto-sidebar .sidebar-item a.active:where(:scope, *) {
  font-weight: 600;
}
#quarto-sidebar .sidebar-search:where(:scope, *) {
  margin: 0.3rem 0 0.4rem;
}
/* Margin sidebar (Right TOC) - Clean base styling */
#quarto-margin-sidebar:where(:scope, *) {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0.5rem 1rem 0.5rem 0.5rem !important;
  overflow: visible;
}
#quarto-margin-sidebar:hover:where(:scope, *) {
  box-shadow: none !important;
}
#TOC:where(:scope, *) {
  position: sticky;
  top: 5rem;
  width: 100%;
}
#TOC ul:where(:scope, *) {
  padding-left: 0;
  margin: 0;
  list-style: none;
  border-left: none;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
#TOC li:where(:scope, *) {
  margin: 0;
  line-height: 1.25;
}
#TOC a:where(:scope, *) {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--iot-text-dark);
  transition: all var(--transition-base);
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  line-height: 1.2;
  font-size: 0.85rem;
  width: 100%;
  text-decoration: none;
  white-space: normal;
}
#TOC a:hover:where(:scope, *) {
  color: var(--iot-azure);
  background: var(--iot-highlight);
  font-weight: 600;
}
#TOC a.active:where(:scope, *) {
  color: var(--iot-azure);
  font-weight: 700;
  position: relative;
}
#TOC a.active:where(:scope, *)::before {
  content: "";
  position: absolute;
  left: -0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  background: var(--iot-azure);
  border-radius: 50%;
  box-shadow: 0 0 4px var(--iot-azure);
}
#TOC a .header-section-number:where(:scope, *) {
  font-weight: 600;
  min-width: 2.1rem;
  text-align: right;
  color: var(--iot-muted);
}
/* Links */
a:where(:scope, *) {
  color: var(--iot-azure);
  text-decoration: none;
  transition: all var(--transition-base);
  position: relative;
}
a:hover:where(:scope, *),
a:focus:where(:scope, *) {
  color: var(--iot-ocean);
  text-decoration: none;
}
a:hover:where(:scope, *)::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-sky);
  animation: linkUnderline-6f7fb24fba110c73 0.3s ease-out;
}

@keyframes linkUnderline-6f7fb24fba110c73 {
  from {
    transform: scaleX(0);
    transform-origin: left;
  }
  to {
    transform: scaleX(1);
    transform-origin: left;
  }
}
a:visited:where(:scope, *) {
  color: var(--iot-navy);
}
/* Code and pre */
code:where(:scope, *),
pre:where(:scope, *) {
  font-family:
    "Source Code Pro", "Source Code Pro Fallback", ui-monospace, SFMono-Regular, "DejaVu Sans Mono",
    monospace;
  font-size: 0.95rem;
}
code:where(:scope, *) {
  background: var(--iot-cloud);
  color: var(--iot-midnight);
  padding: 0.3rem 0.55rem;
  border-radius: 6px;
  border: 1px solid var(--iot-border-light);
  font-weight: 500;
  transition: all var(--transition-fast);
}
code:hover:where(:scope, *) {
  background: var(--iot-mist);
  border-color: var(--iot-border);
}
pre:where(:scope, *) {
  background: var(--iot-cloud);
  border-left: 4px solid var(--iot-azure);
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  overflow-x: auto;
  max-width: 100%;
  margin: 2rem 0;
  box-shadow: var(--iot-shadow-md);
  position: relative;
  transition: all var(--transition-base);
}
pre:hover:where(:scope, *) {
  box-shadow: var(--iot-shadow-lg);
  border-left-color: var(--iot-electric);
}
pre:where(:scope, *)::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.03));
  pointer-events: none;
}
pre code:where(:scope, *) {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 0.9rem;
}
/* Tables */
table:where(:scope, *) {
  width: 100%;
  margin: 2.5rem 0;
  border-collapse: collapse;
  background: var(--iot-foam);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--iot-shadow-md);
  border: 1px solid var(--iot-border-light);
  transition: box-shadow var(--transition-base);
}
table:hover:where(:scope, *) {
  box-shadow: var(--iot-shadow-lg);
}
table code:where(:scope, *) {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
thead:where(:scope, *) {
  background: var(--gradient-tech);
  color: var(--iot-foam);
  position: relative;
}
thead:where(:scope, *)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-sky);
}
thead th:where(:scope, *) {
  padding: 1rem 1.25rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  text-align: left;
}
tbody td:where(:scope, *) {
  padding: 0.95rem 1.25rem;
  border-bottom: 1px solid var(--iot-mist);
  font-size: 0.95rem;
  transition: background-color var(--transition-fast);
}
tbody tr:nth-child(even):where(:scope, *) {
  background: var(--iot-sand);
}
tbody tr:last-child td:where(:scope, *) {
  border-bottom: none;
}
tbody tr:hover:where(:scope, *) {
  background: var(--iot-highlight);
}
tbody tr:hover td:where(:scope, *) {
  color: var(--iot-midnight);
}
/* Callouts */
div.callout:where(:scope, *) {
  margin: 2rem 0;
  padding: 1.75rem 2rem;
  border-left: 5px solid;
  border-radius: 14px;
  background: var(--iot-foam);
  box-shadow: var(--iot-shadow-md);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}
div.callout:where(:scope, *)::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  height: 100%;
  opacity: 0.3;
  pointer-events: none;
}
div.callout:hover:where(:scope, *) {
  box-shadow: var(--iot-shadow-lg);
  transform: translateY(-2px);
}
div.callout-note:where(:scope, *) {
  border-left-color: var(--iot-azure);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(59, 130, 246, 0.02));
}
div.callout-note:where(:scope, *)::before {
  background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.15), transparent);
}
div.callout-tip:where(:scope, *) {
  border-left-color: var(--iot-mint);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.03));
}
div.callout-tip:where(:scope, *)::before {
  background: radial-gradient(circle at top right, rgba(16, 185, 129, 0.15), transparent);
}
div.callout-warning:where(:scope, *) {
  border-left-color: var(--iot-accent-warning);
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.08), rgba(234, 179, 8, 0.03));
}
div.callout-warning:where(:scope, *)::before {
  background: radial-gradient(circle at top right, rgba(234, 179, 8, 0.15), transparent);
}
div.callout-important:where(:scope, *),
div.callout-caution:where(:scope, *) {
  border-left-color: var(--iot-accent-error);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.03));
}
div.callout-important:where(:scope, *)::before,
div.callout-caution:where(:scope, *)::before {
  background: radial-gradient(circle at top right, rgba(239, 68, 68, 0.15), transparent);
}
.callout-title:where(:scope, *) {
  font-weight: 700;
  color: var(--iot-midnight);
  margin-bottom: 0.75rem;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
/* Blockquotes */
blockquote:where(:scope, *) {
  margin: 2.5rem 0;
  padding: 1.75rem 2rem 1.75rem 2.25rem;
  border-left: 5px solid var(--iot-electric);
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.06), rgba(6, 182, 212, 0.02));
  border-radius: 14px;
  color: var(--iot-text-dark);
  font-style: italic;
  box-shadow: var(--iot-shadow-md);
  position: relative;
  transition: all var(--transition-base);
}
blockquote:hover:where(:scope, *) {
  box-shadow: var(--iot-shadow-lg);
  transform: translateX(4px);
  border-left-color: var(--iot-mint);
}
blockquote:where(:scope, *)::before {
  content: "\201C";
  position: absolute;
  top: -10px;
  left: 15px;
  font-size: 4rem;
  color: var(--iot-electric);
  opacity: 0.2;
  font-style: normal;
  line-height: 1;
}
blockquote p:where(:scope, *) {
  margin: 0;
  position: relative;
  z-index: 1;
}
/* Figures */
figure:where(:scope, *) {
  margin: 3rem 0;
  text-align: center;
}
/* Founder 2026-09-08 (flat design, no 3D): images carry no shadow, border or
 * corner rounding of their own; a panel around them may. The old 14 px radius
 * and 48 px shadow were the "3D" look on every figure, logo and screenshot. */
img:where(:scope, *) {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
  transition: none;
  border: 0;
}
/* Generated figures - preserve aspect ratio */
.cell-output-display img:where(:scope, *),
.quarto-figure img:where(:scope, *),
figure.quarto-float img:where(:scope, *) {
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
/* Founder 2026-09-08: no hover motion on images (flat, no 3D). */
img:hover:where(:scope, *) {
  box-shadow: none;
  transform: none;
}
figcaption:where(:scope, *) {
  margin-top: 1.25rem;
  font-size: 0.9rem;
  color: var(--iot-muted);
  font-style: italic;
  padding: 0.5rem 1rem;
  background: var(--iot-sand);
  border-radius: 8px;
  display: inline-block;
}
/* ==========================================
   PART HEADERS IN SIDEBAR - COMPACT
   Uses --pc-main from part-colors JS system
   ========================================== */

.sidebar-item.sidebar-item-section:where(:scope, *) {
  margin-top: 0.6rem;
  margin-bottom: 0.25rem;
}
/* Part header container - unified bar layout */
#quarto-sidebar .sidebar-item.sidebar-item-section > .sidebar-item-container:where(:scope, *) {
  display: flex;
  align-items: center;
  background: var(--pc-main, #2c3e50);
  border-radius: 5px;
  overflow: hidden;
  transition: all var(--transition-fast);
}
/* Part header text - uses module's assigned color */
/* Using #quarto-sidebar prefix for higher specificity to override link color rules */
#quarto-sidebar .sidebar-item.sidebar-item-section > .sidebar-item-text:where(:scope, *),
#quarto-sidebar .sidebar-item.sidebar-item-section > .sidebar-item-container > .sidebar-item-text:where(:scope, *) {
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.4rem 0.6rem;
  border-radius: 0;
  display: block;
  flex: 1;
  cursor: pointer;
  transition: all var(--transition-fast);
  /* No separate background - container handles it */
  background: transparent;
  color: var(--pc-text, #ffffff);
  min-width: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.2;
}
/* Part div inside (contains the part name) */
.sidebar-item.sidebar-item-section .part:where(:scope, *) {
  font-weight: 700;
  color: inherit;
}
/* Toggle button - unified with container */
#quarto-sidebar .sidebar-item.sidebar-item-section .sidebar-item-toggle:where(:scope, *) {
  padding: 0.4rem 0.5rem;
  background: transparent;
  color: var(--pc-text, #ffffff);
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Hover state for part headers - apply to container */
#quarto-sidebar .sidebar-item.sidebar-item-section > .sidebar-item-container:hover:where(:scope, *) {
  filter: brightness(1.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
/* ==========================================
   CHAPTER ITEMS - STYLED BY JAVASCRIPT
   JavaScript handles all part-specific colors
   ========================================== */

/* Nested chapters under parts */
ul.sidebar-section:where(:scope, *) {
  margin-top: 0.25rem;
  padding-left: 0.5rem;
}
ul.sidebar-section li.sidebar-item:where(:scope, *) {
  margin: 0.05rem 0;
}
/* Base chapter link styling - JS will apply colors */
/* Increased specificity to avoid !important */
body ul.sidebar-section .sidebar-item a:where(:scope, *),
#quarto-sidebar ul.sidebar-section .sidebar-item a:where(:scope, *) {
  font-size: 0.74rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  padding: 0.25rem 0.45rem;
  border-left: 2px solid transparent;
  color: #2c3e50;
  border-radius: 4px;
  transition: all var(--transition-fast);
  display: block;
}
/* Mermaid diagram styling */
.mermaid:where(:scope, *) {
  font-size: 16px !important;
  background: var(--iot-foam);
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: var(--iot-shadow-md);
  margin: 2rem 0;
  overflow-x: auto;
}
.mermaid .label:where(:scope, *) {
  font-size: 14px !important;
  font-family:
    "Source Sans 3",
    "Source Sans 3 Fallback",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;
  fill: var(--iot-text-dark) !important;
}
.mermaid .node rect:where(:scope, *),
.mermaid .node circle:where(:scope, *),
.mermaid .node polygon:where(:scope, *) {
  fill: var(--iot-cloud) !important;
  stroke: var(--iot-azure) !important;
  stroke-width: 2px !important;
}
/* Responsive tweaks */
@media (max-width: 1200px) {
  #quarto-content:where(:scope, *) {
    padding: 2.25rem 1.5rem 3rem;
    gap: 1rem;
  }

  #title-block-header.quarto-title-block:where(:scope, *) {
    padding: 0.5rem 1rem;
  }
}

@media (max-width: 992px) {
  #quarto-content:where(:scope, *) {
    padding: 2rem 1.5rem 2.75rem;
  }

  #quarto-margin-sidebar:where(:scope, *) {
    position: static;
    margin-top: 1rem;
    padding: 0.5rem 0.25rem;
    width: 100% !important;
    min-width: auto !important;
    max-width: none !important;
  }

  #quarto-sidebar:where(:scope, *) {
    box-shadow: none;
    padding: 0.75rem 0.5rem;
    /* Maintain minimum width even on medium screens when sidebar is visible */
    min-width: 260px !important;
  }

  .sidebar-item.sidebar-item-section > .sidebar-item-text:where(:scope, *),
  .sidebar-item.sidebar-item-section > .sidebar-item-container > .sidebar-item-text:where(:scope, *) {
    font-size: 0.7rem;
    padding: 0.35rem 0.5rem;
    /* Inherit module color from base styles */
  }

  /* Book layout on medium screens - stack TOC below content */
  body.quarto-book .page-columns:where(:scope, *) {
    grid-template-columns: minmax(260px, 280px) 1fr;
  }
}
/* Large screens - ensure proper three-column layout */
@media (min-width: 1200px) {
  /* Enforce sidebar widths on large screens */
  #quarto-sidebar:where(:scope, *) {
    min-width: 280px;
    width: 300px;
    max-width: 320px;
    flex-shrink: 0;
  }

  #quarto-margin-sidebar:where(:scope, *) {
    min-width: 330px;
    width: clamp(330px, 30vw, 420px);
  }

  /* Three-column grid for book pages */
  body.quarto-book .page-columns:where(:scope, *) {
    display: grid;
    grid-template-columns: 300px 1fr minmax(330px, 420px);
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  body:where(:scope, *) {
    font-size: 15px;
  }

  h1:where(:scope, *) {
    font-size: 2.2rem;
  }

  h2:where(:scope, *) {
    font-size: 1.7rem;
  }

  #quarto-content:where(:scope, *) {
    padding: 1.65rem 0.5rem 2.5rem;
  }

  .quarto-page-breadcrumbs:where(:scope, *),
  .quarto-page-breadcrumbs .breadcrumb:where(:scope, *) {
    max-width: 100%;
    min-width: 0;
  }

  .quarto-page-breadcrumbs .breadcrumb:where(:scope, *) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.35rem;
    overflow-wrap: anywhere;
  }

  .quarto-page-breadcrumbs .breadcrumb-item:where(:scope, *) {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .quarto-page-breadcrumbs .breadcrumb-item a:where(:scope, *),
  .quarto-page-breadcrumbs .breadcrumb-item.active:where(:scope, *) {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  #title-block-header.quarto-title-block:where(:scope, *) {
    padding: 0.5rem 0.85rem;
  }

  #title-block-header.quarto-title-block .title:where(:scope, *),
  body #title-block-header .title:where(:scope, *) {
    font-size: 1.2rem;
  }

  .sidebar-item.sidebar-item-section > .sidebar-item-text:where(:scope, *),
  .sidebar-item.sidebar-item-section > .sidebar-item-container > .sidebar-item-text:where(:scope, *) {
    font-size: 0.68rem;
    padding: 0.3rem 0.45rem;
    letter-spacing: 0.04em;
    /* Inherit module color from base styles */
  }

  ul.sidebar-section .sidebar-item a:where(:scope, *) {
    font-size: 0.72rem;
    padding: 0.22rem 0.4rem;
  }

  #quarto-margin-sidebar:where(:scope, *) {
    padding: 1rem 0.85rem;
  }

  #TOC .toc-title:where(:scope, *) {
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
  }

  #TOC a:where(:scope, *) {
    font-size: 0.82rem;
  }

  #TOC li:where(:scope, *) {
    margin-bottom: 0.3rem;
  }

  /* On phones, collapse Quarto book pages to a true single column. */
  body.nav-sidebar .page-columns:where(:scope, *),
  body.docked .page-columns:where(:scope, *) {
    grid-template-columns:
      [screen-start] 0.25rem
      [screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] minmax(
        0,
        1fr
      )
      [body-content-end body-end body-end-outset page-end-inset page-end screen-end-inset] 0.25rem
      [screen-end] !important;
    column-gap: 0 !important;
  }

  body.nav-sidebar main.content:where(:scope, *),
  body.nav-sidebar main.content.column-body:where(:scope, *),
  body.docked main.content:where(:scope, *),
  body.docked main.content.column-body:where(:scope, *) {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}

/* Phone book navigation: sidebar-optimizer.js progressively enhances the
   existing sidebar into this inline disclosure. The fixed block-size reserves
   its first-paint footprint; without JS this control is absent and the normal
   expanded navigation remains available. Tablet and desktop rules are
   deliberately untouched. */
.iot-mobile-chapters-toggle:where(:scope, *),
.iot-mobile-chapters-fallback:where(:scope, *) {
  display: none;
}

@media (max-width: 767px) {
  .iot-mobile-chapters-toggle:where(:scope, *),
  .iot-mobile-chapters-fallback:where(:scope, *) {
    align-items: center;
    background: #fff;
    border: 1px solid var(--iot-border-light, #d7dee8);
    border-left: 4px solid var(--pc-main, #2c3e50);
    border-radius: 8px;
    box-sizing: border-box;
    color: var(--iot-midnight, #172033);
    cursor: pointer;
    display: flex;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    grid-column: body-content-start / body-content-end;
    height: 48px;
    justify-content: space-between;
    margin: 0 0 0.75rem;
    padding: 0 0.9rem;
    text-align: left;
    width: 100%;
  }

  .iot-mobile-chapters-fallback:where(:scope, *) {
    text-decoration: none;
  }

  .iot-mobile-chapters-toggle[hidden]:where(:scope, *),
  .iot-mobile-chapters-fallback[hidden]:where(:scope, *) {
    display: none;
  }

  body.iot-mobile-chapters-ready .iot-mobile-chapters-toggle svg:where(:scope, *) {
    height: 20px;
    transition: transform 0.16s ease;
    width: 20px;
  }

  body.iot-mobile-chapters-ready .iot-mobile-chapters-toggle[aria-expanded='true'] svg:where(:scope, *) {
    transform: rotate(180deg);
  }

  body.nav-sidebar #quarto-sidebar:where(:scope, *) {
    display: none !important;
  }

  body.iot-mobile-chapters-ready #quarto-sidebar:not([hidden]):where(:scope, *),
  body.nav-sidebar #quarto-sidebar:target:where(:scope, *) {
    display: block !important;
    grid-column: body-content-start / body-content-end;
    margin: 0 0 1rem;
    max-height: min(65vh, 560px) !important;
    min-width: 0 !important;
    overflow-y: auto !important;
    width: 100% !important;
  }
}
/* Lists */
ul:where(:scope, *),
ol:where(:scope, *) {
  padding-left: 1.2rem;
}
li:where(:scope, *) {
  margin-bottom: 0.35rem;
}
/* Selection / focus */
:where(:scope, *)::selection {
  background: rgba(59, 130, 246, 0.35);
  color: var(--iot-midnight);
}
:focus-visible:where(:scope, *) {
  outline: 3px solid rgba(6, 182, 212, 0.6);
  outline-offset: 3px;
}
/* Print styles */
@media print {
  body:where(:scope, *) {
    background: white;
  }

  .quarto-secondary-nav:where(:scope, *),
  #quarto-sidebar:where(:scope, *),
  #quarto-margin-sidebar:where(:scope, *),
  .nav-footer:where(:scope, *) {
    display: none;
  }

  #quarto-content:where(:scope, *) {
    max-width: 100%;
  }
}
/* --- Section: Components (was components.css) --- */

/*-- scss:rules --*/

/*=====================================
  COMPONENT STYLES
  Code blocks,
callouts,
tables,
images,
nav
=====================================*/

/* ===== CODE BLOCKS ===== */
.sourceCode:where(:scope, *),
pre.sourceCode:where(:scope, *) {
  border-radius: 12px;
  border: 1px solid rgba(0, 102, 204, 0.15);
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  padding: 1.5rem;
  margin: 1.5rem 0;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow-x: auto;
}
pre:where(:scope, *) {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
}
code:where(:scope, *) {
  font-family: var(--font-family-mono);
  font-weight: 500;
  font-size: 0.9em;
}
/* Inline code */
p code:where(:scope, *),
li code:where(:scope, *) {
  background: rgba(0, 102, 204, 0.08);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  color: var(--primary-dark);
  font-size: 0.875em;
  border: 1px solid rgba(0, 102, 204, 0.15);
}
/* Code language badge */
div.sourceCode:where(:scope, *)::before {
  content: attr(data-lang);
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: var(--primary-blue);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--font-family-base);
}
/* Code block output */
.cell-output:not(.cell-output-display):where(:scope, *) {
  background: linear-gradient(135deg, #e8f5e9 0%, #ffffff 100%);
  border-left: 4px solid var(--success);
  padding: 1rem 1.5rem;
  margin: 1rem 0;
  border-radius: 8px;
  font-family: var(--font-family-mono);
  font-size: 0.875rem;
}
/* ===== CALLOUT BOXES - Clean nbdev-inspired design ===== */
.callout:where(:scope, *) {
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  border-left-width: 3px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
}
.callout:hover:where(:scope, *) {
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.06),
    0 2px 4px -2px rgba(0, 0, 0, 0.06);
}
/* Collapsible callouts - smooth transitions */
.callout.callout-collapse:where(:scope, *) {
  overflow: hidden;
}
.callout.callout-collapse .callout-title:where(:scope, *) {
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.callout.callout-collapse .callout-title:where(:scope, *)::after {
  content: "▼";
  font-size: 0.75em;
  transition: transform 0.3s ease;
  opacity: 0.6;
}
.callout.callout-collapse.collapsed .callout-title:where(:scope, *)::after {
  transform: rotate(-90deg);
}
/* "For Beginners" specific styling */
.callout-tip[data-title*="Beginners"]:where(:scope, *) {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border-color: #bbf7d0;
  border-left-color: #10b981;
}
.callout-tip[data-title*="Beginners"] .callout-title:where(:scope, *),
.callout-tip[data-title*="beginner"] .callout-title:where(:scope, *) {
  color: #047857;
  font-weight: 600;
}
/* Note - Blue theme */
.callout-note:where(:scope, *) {
  background: #f0f9ff;
  border-color: #e0f2fe;
  border-left-color: #38bdf8;
}
.callout-note .callout-title:where(:scope, *) {
  color: #0369a1;
}
/* Tip - Green theme */
.callout-tip:where(:scope, *) {
  background: #f0fdf4;
  border-color: #dcfce7;
  border-left-color: #22c55e;
}
.callout-tip .callout-title:where(:scope, *) {
  color: #15803d;
}
/* Warning - Amber theme */
.callout-warning:where(:scope, *) {
  background: #fffbeb;
  border-color: #fef3c7;
  border-left-color: #f59e0b;
}
.callout-warning .callout-title:where(:scope, *) {
  color: #b45309;
}
/* Important/Caution - Rose theme */
.callout-important:where(:scope, *),
.callout-caution:where(:scope, *) {
  background: #fff1f2;
  border-color: #ffe4e6;
  border-left-color: #f43f5e;
}
.callout-important .callout-title:where(:scope, *),
.callout-caution .callout-title:where(:scope, *) {
  color: #be123c;
}
/* Callout title styling */
.callout-title:where(:scope, *) {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: -0.01em;
}
/* Callout body */
.callout-body:where(:scope, *) {
  color: #374151;
  line-height: 1.7;
  /* Preserve readable nested .85em values, headings and inline code. */
  font-size: 1.0625rem;
}
.callout-body p:where(:scope, *) {
  margin: 0.5rem 0;
}
.callout-body p:first-child:where(:scope, *) {
  margin-top: 0;
}
.callout-body p:last-child:where(:scope, *) {
  margin-bottom: 0;
}
.callout-body ul:where(:scope, *),
.callout-body ol:where(:scope, *) {
  margin: 0.75rem 0;
  padding-left: 1.5rem;
}
.callout-body li:where(:scope, *) {
  margin: 0.375rem 0;
}
/* Code blocks within callouts */
.callout-body code:where(:scope, *) {
  background: rgba(0, 0, 0, 0.05);
  padding: 0.125rem 0.375rem;
  border-radius: 3px;
  font-size: 0.875em;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.callout-body pre:where(:scope, *) {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 1rem;
  margin: 0.75rem 0;
  overflow-x: auto;
}
/* ===== TABLES ===== */
table:where(:scope, *) {
  width: 100%;
  margin: 2rem 0;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  font-size: 0.95rem;
}
thead:where(:scope, *) {
  background: var(--gradient-dark);
  color: white;
}
thead th:where(:scope, *) {
  padding: 1rem 1.25rem;
  font-weight: 700;
  text-align: left;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
tbody tr:where(:scope, *) {
  background: white;
  transition: all 0.2s ease;
}
tbody tr:nth-child(even):where(:scope, *) {
  background: var(--gray-50);
}
tbody tr:hover:where(:scope, *) {
  background: rgba(0, 102, 204, 0.05);
  transform: scale(1.01);
}
tbody td:where(:scope, *) {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--gray-200);
  color: var(--gray-700);
}
tbody tr:last-child td:where(:scope, *) {
  border-bottom: none;
}
/* Compact tables */
table.compact:where(:scope, *) {
  font-size: 0.875rem;
}
table.compact th:where(:scope, *),
table.compact td:where(:scope, *) {
  padding: 0.75rem 1rem;
}
/* ===== IMAGES & FIGURES ===== */
figure:where(:scope, *) {
  margin: 2.5rem 0;
  text-align: center;
}
figure img:where(:scope, *) {
  max-width: 100%;
  height: auto;
  border-radius: 0;
  box-shadow: none;
}
figure img:hover:where(:scope, *) {
  transform: none;
  box-shadow: none;
}
figcaption:where(:scope, *),
.figure-caption:where(:scope, *) {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--gray-700);
  font-style: italic;
  text-align: center;
}
/* Keep figures visually proportional to the text column.
   Use .figure-wide,
or .figure-compact around an image when a
   specific teaching diagram needs a different scale. */
.figure-compact:where(:scope, *) {
  --iot-figure-max-width: var(--iot-figure-compact-max-width);
}
.figure-wide:where(:scope, *) {
  --iot-figure-max-width: var(--iot-figure-wide-max-width);
}
.quarto-figure:where(:scope, *),
figure.quarto-float:where(:scope, *),
figure.figure:where(:scope, *) {
  max-width: min(100%, var(--iot-figure-max-width));
  margin-left: auto;
  margin-right: auto;
}
.quarto-figure img.figure-img:where(:scope, *),
figure.quarto-float img:where(:scope, *),
figure.figure img:where(:scope, *) {
  width: auto;
  max-width: 100%;
  height: auto;
}
.quarto-figure img.figure-img[src$=".svg"]:where(:scope, *),
figure.quarto-float img[src$=".svg"]:where(:scope, *),
figure.figure img[src$=".svg"]:where(:scope, *) {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.quarto-figure img.figure-img[src$=".svg"]:hover:where(:scope, *),
figure.quarto-float img[src$=".svg"]:hover:where(:scope, *),
figure.figure img[src$=".svg"]:hover:where(:scope, *) {
  transform: none;
  box-shadow: none;
}
/* Actuator local browser labs and wiring maps */
.browser-lab-card:where(:scope, *),
.wiring-map:where(:scope, *) {
  border: 1px solid var(--flat-border);
  border-radius: var(--flat-radius-lg);
  background: var(--flat-surface);
  box-shadow: var(--flat-shadow);
}
.browser-lab-card:where(:scope, *) {
  padding: var(--spacing-md);
  margin: var(--spacing-md) 0;
}
.browser-lab-grid:where(:scope, *) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-md);
}
.wiring-map:where(:scope, *) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--spacing-md) 0;
}
/* a11y audit 2026-07-28 (B9): this scroll container's content genuinely
 * overflows (672px table in a 655px/330px box at desktop/mobile widths) with
 * no way for a keyboard-only user to reach the cut-off part -- no tabindex,
 * no visible scrollbar affordance either (WCAG 2.1.1). assets/js/
 * iotclass-ui.js's normalizeWiringMapScrollRegions() sets tabindex="0" +
 * role="region" + aria-label at runtime (these are static content markup,
 * out of this territory); this is the focus style for that tabindex. */
.wiring-map:focus-visible:where(:scope, *) {
  outline: 3px solid rgba(6, 182, 212, 0.6);
  outline-offset: -3px;
}
.wiring-map table:where(:scope, *) {
  width: 100%;
  min-width: 42rem;
  margin: 0;
}
.wiring-map th:where(:scope, *) {
  background: var(--ieee-navy);
  color: #fff;
}
.wiring-map td:where(:scope, *),
.wiring-map th:where(:scope, *) {
  vertical-align: top;
}

@media (max-width: 700px) {
  .browser-lab-grid:where(:scope, *) {
    grid-template-columns: 1fr;
  }
}
/* ===== BLOCKQUOTES ===== */
blockquote:where(:scope, *) {
  background: linear-gradient(135deg, rgba(84, 110, 122, 0.05) 0%, rgba(0, 102, 204, 0.05) 100%);
  border-left: 4px solid var(--accent-purple);
  padding: 1.5rem 2rem;
  margin: 2rem 0;
  border-radius: 8px;
  font-style: italic;
  color: var(--gray-700);
}
blockquote p:last-child:where(:scope, *) {
  margin-bottom: 0;
}
/* ===== LISTS ===== */
ul:where(:scope, *),
ol:where(:scope, *) {
  margin: 1rem 0;
  padding-left: 2rem;
}
li:where(:scope, *) {
  margin: 0.5rem 0;
  line-height: 1.7;
}
ul li:where(:scope, *)::marker {
  color: var(--primary-blue);
}
ol li:where(:scope, *)::marker {
  color: var(--primary-blue);
  font-weight: 600;
}
/* ===== SIDEBAR & NAVIGATION ===== */
.sidebar:where(:scope, *) {
  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
  border-right: 1px solid var(--gray-200);
}
/* Remove panel styling from sidebar header/logo area - make header blend with sidebar */
.sidebar-logo:where(:scope, *),
#quarto-sidebar .sidebar-logo:where(:scope, *),
.sidebar-header:where(:scope, *),
#quarto-sidebar .sidebar-header:where(:scope, *),
.sidebar-header-stacked:where(:scope, *),
#quarto-sidebar .sidebar-header-stacked:where(:scope, *) {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.15rem 0.25rem !important;
  margin: 0 !important;
}
/* Override Bootstrap spacing on sidebar header */
#quarto-sidebar .sidebar-header.pt-lg-2:where(:scope, *) {
  padding-top: 0 !important;
}
#quarto-sidebar .sidebar-header.mt-2:where(:scope, *),
#quarto-sidebar .mt-2.flex-shrink-0:where(:scope, *) {
  margin-top: 0.15rem !important;
}
/* Override Quarto sidebar-header wrapper padding */
#quarto-sidebar .quarto-sidebar-header:where(:scope, *),
#quarto-sidebar > div:where(:scope, *) {
  padding: 0 !important;
}
/* Make entire sidebar uniform - no panel effect */
#quarto-sidebar:where(:scope, *),
.sidebar-navigation:where(:scope, *),
nav.sidebar:where(:scope, *) {
  background: white !important;
}
img.sidebar-logo:where(:scope, *),
#quarto-sidebar img.sidebar-logo:where(:scope, *) {
  max-width: 56px !important;
  width: 56px !important;
  height: auto !important;
  /* CLS (launch blocker B4): `height: auto` on an <img> with no width/height
   * attribute leaves the sidebar header height unknown until the bitmap
   * decodes. 411x351 is images/general/cover.png's own pixel size. */
  aspect-ratio: 411 / 351;
  border-radius: 4px !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}
/* Hide dark-mode logo variant — project uses light theme only.
   Quarto generates both light-content and dark-content img tags but
   does not include CSS to hide the inactive variant for single-theme builds. */
.sidebar-logo.dark-content:where(:scope, *) {
  display: none !important;
}
/* Remove card/panel effects from sidebar title block */
.sidebar-title:where(:scope, *),
.sidebar-logo-link:where(:scope, *),
#quarto-sidebar .sidebar-logo-link:where(:scope, *) {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}
/* Sidebar header: logo + title side-by-side */
#quarto-sidebar .sidebar-header-stacked:where(:scope, *),
#quarto-sidebar .sidebar-header:where(:scope, *) {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.4rem;
  flex-wrap: nowrap !important;
}
/* Keep sidebar logo link compact */
.sidebar-logo-link:where(:scope, *) {
  min-height: 0;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
}
/* Tools inline after title text */
#quarto-sidebar .sidebar-tools-main:where(:scope, *) {
  display: inline-flex !important;
  gap: 0.15rem;
  margin: 0;
  vertical-align: middle;
}
/* Hide sidebar header elements — replaced by module info bar */
#quarto-sidebar .quarto-sidebar-header:where(:scope, *),
#quarto-sidebar .sidebar-header-stacked:where(:scope, *),
#quarto-sidebar .sidebar-header:where(:scope, *),
#quarto-sidebar .sidebar-logo-link:where(:scope, *) {
  display: none !important;
}
/* Sidebar Part Title - Shows module/part name at top of sidebar */
#quarto-sidebar .quarto-sidebar-header:has(.sidebar-part-title):where(:scope, *) {
  display: block !important;
}
.sidebar-part-title:where(:scope, *) {
  display: block !important;
  margin: 0 !important;
  background: var(--pc-main, #2c3e50) !important;
  color: #ffffff !important;
}
/* Navbar "← All Modules" link - white in header bar,
always visible */
/* Note: font-weight: 700 causes brownish color rendering on green background */
/* Use same styling as .navbar-brand for consistent white appearance */
/* Include :visited to override global a:visited rule */
.navbar .navbar-nav .nav-link:where(:scope, *),
.navbar .navbar-nav .nav-link:visited:where(:scope, *),
.navbar .navbar-nav .nav-link .menu-text:where(:scope, *),
.navbar .navbar-nav .nav-link:visited .menu-text:where(:scope, *),
.navbar .navbar-nav .nav-link span:where(:scope, *),
.navbar .navbar-nav .nav-link:visited span:where(:scope, *) {
  color: #ccd1d5 !important; /* Same as navbar-brand: rgb(204, 209, 213) */
  font-weight: 500 !important; /* Medium weight - 700 causes color rendering issues */
  text-decoration: none;
}
.navbar .navbar-nav .nav-link:hover:where(:scope, *),
.navbar .navbar-nav .nav-link:hover .menu-text:where(:scope, *),
.navbar .navbar-nav .nav-link:hover span:where(:scope, *) {
  color: #ffffff !important;
  text-decoration: none;
}
/* Make the navbar itself have the module color */
.navbar:where(:scope, *) {
  background-color: var(--pc-main, #2c3e50) !important;
}
/* Always show navbar items (don't collapse into hamburger) */
.navbar .navbar-collapse:where(:scope, *) {
  display: flex !important;
  flex-basis: auto !important;
}
.navbar .navbar-nav:where(:scope, *) {
  flex-direction: row !important;
}
/* Hide hamburger menu toggle on all screens */
.navbar .navbar-toggler:where(:scope, *) {
  display: none !important;
}
/* Position "← All Modules" link before the title */
.navbar .navbar-nav.me-auto:where(:scope, *) {
  order: -1;
  margin-right: 1rem !important;
}
/* Keep old book-nav-header styles for backwards compatibility with stale HTML */
.book-nav-header:where(:scope, *) {
  display: block !important;
  margin: 0 !important;
  padding: 0.75rem 1rem !important;
  background: var(--pc-main, #2c3e50) !important;
}
/* Remove any panel styling from sidebar tools */
.sidebar-tools-main:where(:scope, *),
.quarto-navigation-tool:where(:scope, *) {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}
.sidebar-navigation a:where(:scope, *) {
  display: block;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  margin: 0 0.25rem;
  transition: all 0.2s ease;
  color: var(--gray-700);
  text-decoration: none;
  font-weight: 500;
}
.sidebar-navigation a:hover:where(:scope, *) {
  background: rgba(0, 102, 204, 0.08);
  color: var(--primary-blue);
  transform: translateX(4px);
}
.sidebar-navigation a.active:where(:scope, *) {
  background: var(--gradient-primary);
  color: white;
  font-weight: 600;
  box-shadow: var(--shadow-md);
}
/* ===== PART HEADERS - Color-coded by section ===== */
.part:where(:scope, *) {
  color: white;
  padding: 0.85rem 1.35rem;
  border-radius: 10px;
  font-weight: 800;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 1.2rem 0.3rem 0.8rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease;
  border-left: 6px solid rgba(255, 255, 255, 0.5);
  position: relative;
  overflow: hidden;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* Add subtle gradient overlay for depth */
.part:where(:scope, *)::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.15) 0%,
    transparent 50%,
    rgba(0, 0, 0, 0.1) 100%
  );
  pointer-events: none;
}
.part:hover:where(:scope, *) {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  transform: translateX(5px) scale(1.02);
  letter-spacing: 0.12em;
}
/* Hide chapter numbers for legal pages everywhere */
/* Sidebar */
.sidebar-item a[href*="/legal/"] .chapter-number:where(:scope, *),

.breadcrumb a[href*="/legal/"] .chapter-number:where(:scope, *),

nav a[href*="/legal/"] .chapter-number:where(:scope, *),

a[href*="/legal/"] .chapter-number:where(:scope, *) {
  display: none !important;
}
/* ===== BADGES & LABELS ===== */
.badge:where(:scope, *) {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* ===== BUTTONS ===== */
.btn:where(:scope, *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  text-decoration: none;
  border: none;
  cursor: pointer;
}
.btn-primary:where(:scope, *) {
  background: var(--primary-blue);
  color: white;
}
.btn-primary:hover:where(:scope, *) {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: white;
}
/* ===== NAVIGATION BREADCRUMBS ===== */
.breadcrumb:where(:scope, *) {
  padding: 1rem 0;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
}
.breadcrumb a:where(:scope, *) {
  color: var(--gray-700);
  text-decoration: none;
  transition: color 0.2s ease;
}
.breadcrumb a:hover:where(:scope, *) {
  color: var(--primary-blue);
}
/* Hierarchical breadcrumb styling */
.breadcrumb-item:where(:scope, *) {
  display: inline-block;
}
.breadcrumb-item + .breadcrumb-item:where(:scope, *)::before {
  content: "›";
  padding: 0 0.5rem;
  color: var(--gray-500);
  font-weight: 600;
}
/* Part-level breadcrumb (e.g.,
"Sensing & Actuation") */
.breadcrumb-part:where(:scope, *) {
  font-weight: 700;
  color: var(--primary-dark);
}
/* Section-level breadcrumb (e.g.,
"Sensor Types") */
.breadcrumb-section:where(:scope, *) {
  font-weight: 600;
  color: var(--gray-700);
}
/* Subsection-level breadcrumb */
.breadcrumb-subsection:where(:scope, *) {
  font-weight: 500;
  color: var(--gray-600);
}
/* Current chapter (active) */
.breadcrumb-chapter:where(:scope, *) {
  font-weight: 500;
  color: var(--gray-700);
}
.breadcrumb-chapter.active:where(:scope, *) {
  color: var(--gray-900);
  font-weight: 600;
}
/* Hide chapter numbers in breadcrumbs (handled by JS) */
.breadcrumb .chapter-number:where(:scope, *) {
  display: none;
}
/* ==========================================================================
   CROSS-BOOK NAVIGATION
   Module switcher,
prev/next navigation,
back-to-all-modules button
   Moved from cross-book-navigation.js to prevent style flash (FOUC)
   ========================================================================== */

/* Module Switcher */
.module-switcher:where(:scope, *) {
  margin: 1rem 0;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}
.module-switcher-header:where(:scope, *) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: #f9fafb;
  cursor: pointer;
}
.current-module-info:where(:scope, *) {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.module-label:where(:scope, *) {
  font-size: 0.75rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.module-name:where(:scope, *) {
  font-weight: 600;
  font-size: 0.95rem;
}
.switcher-toggle:where(:scope, *) {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  color: #6b7280;
  transition: color 0.2s;
}
.switcher-toggle:hover:where(:scope, *) {
  color: #111827;
}
.module-switcher-menu:where(:scope, *) {
  border-top: 1px solid #e5e7eb;
}
.switcher-modules:where(:scope, *) {
  max-height: 400px;
  overflow-y: auto;
}
.switcher-module:where(:scope, *) {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid transparent;
  text-decoration: none;
  color: #111827;
  transition: all 0.2s;
}
.switcher-module:hover:where(:scope, *) {
  background: #f9fafb;
}
.switcher-module.active:where(:scope, *) {
  background: #f0f9ff;
  font-weight: 600;
}
.module-number:where(:scope, *) {
  font-size: 0.7rem;
  color: #9ca3af;
  font-weight: 500;
}
.module-title:where(:scope, *) {
  font-size: 0.9rem;
}
.module-chapters:where(:scope, *) {
  font-size: 0.75rem;
  color: #6b7280;
}
/* Back to All Modules Button */
.back-to-all-modules:where(:scope, *) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  margin: 0.5rem 0;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  color: #2563eb;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  transition: all 0.2s;
}
.back-to-all-modules:hover:where(:scope, *) {
  background: #f0f9ff;
  border-color: #2563eb;
  transform: translateX(-2px);
}
/* Module Navigation (Prev/Next) */
.module-navigation:where(:scope, *) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin: 4rem 0 2rem;
  padding: 2rem 0;
  border-top: 2px solid #e5e7eb;
}
.module-nav-link:where(:scope, *) {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-left: 5px solid;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s;
}
.module-nav-link:hover:where(:scope, *) {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.nav-direction:where(:scope, *) {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
}
.nav-module-name:where(:scope, *) {
  font-size: 1.25rem;
  font-weight: 700;
}
.nav-module-desc:where(:scope, *) {
  font-size: 0.9rem;
  color: #4b5563;
  line-height: 1.5;
}
.module-nav-prev:where(:scope, *) {
  text-align: left;
}
.module-nav-next:where(:scope, *) {
  text-align: right;
}
/* Breadcrumb enhancements for cross-book navigation */
.breadcrumb-module a:where(:scope, *) {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
}
/* Responsive cross-book navigation */
@media (max-width: 768px) {
  .module-navigation:where(:scope, *) {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .module-nav-next:where(:scope, *) {
    text-align: left;
  }
}
/* ==========================================================================
   LANDING PAGE STATS & FILTERS
   Module cards,
filter bar,
scroll animations
   Moved from landing-stats.js to prevent style flash (FOUC)
   ========================================================================== */

/* Ripple effect for module cards */
.module-card:where(:scope, *) {
  position: relative;
  overflow: hidden;
}
.ripple:where(:scope, *) {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transform: scale(0);
  animation: ripple-animation-628b5ed26ffc0dca 0.6s ease-out;
  pointer-events: none;
}

@keyframes ripple-animation-628b5ed26ffc0dca {
  to {
    transform: scale(4);
    opacity: 0;
  }
}
/* Filter bar */
.module-filter-bar:where(:scope, *) {
  margin: 2rem auto;
  padding: 1.5rem;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  max-width: 1200px;
}
.filter-container:where(:scope, *) {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.filter-container label:where(:scope, *) {
  font-weight: 600;
  color: #374151;
}
.filter-container select:where(:scope, *) {
  padding: 0.5rem 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  font-size: 1rem;
  background: white;
  cursor: pointer;
  transition: border-color 0.2s;
}
.filter-container select:hover:where(:scope, *) {
  border-color: #2563eb;
}
.filter-container select:focus:where(:scope, *) {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
/* Scroll animations */
.animate-ready:where(:scope, *) {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}
.animate-in:where(:scope, *) {
  opacity: 1;
  transform: translateY(0);
}
/* Smooth stat counter transitions */
#stat-modules:where(:scope, *),
#stat-parts:where(:scope, *),
#stat-chapters:where(:scope, *) {
  display: inline-block;
  min-width: 3ch;
  transition: all 0.3s ease;
}

@media (max-width: 768px) {
  .filter-container:where(:scope, *) {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-container select:where(:scope, *) {
    width: 100%;
  }
}
/* ===== BACK TO TOP BUTTON ===== */
.back-to-top:where(:scope, *) {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--gradient-primary);
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 1000;
}
/* ===== SEARCH BOX ===== */
.search-input:where(:scope, *) {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid var(--gray-200);
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.3s ease;
}
.search-input:focus:where(:scope, *) {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}
/* ===== GLOBAL RESOURCE SEARCH ===== */
.global-search-container:where(:scope, *) {
  color: var(--flat-text, #21242c);
  display: grid;
  gap: var(--spacing-md, 1rem);
  margin: 0 auto var(--spacing-xl, 2rem);
  max-width: 1040px;
  width: 100%;
}
.global-search-header:where(:scope, *) {
  display: grid;
  gap: var(--spacing-xs, 0.25rem);
}
.global-search-header h2:where(:scope, *) {
  color: var(--flat-text, #21242c);
  font-size: var(--font-size-2xl, 1.5rem);
  line-height: var(--line-height-tight, 1.25);
  margin: 0;
}
.global-search-header .search-description:where(:scope, *) {
  color: var(--flat-text-muted, #475774);
  margin: 0;
}
.global-search-input-wrapper:where(:scope, *) {
  background: var(--flat-surface, #ffffff);
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: 8px;
  box-shadow: none;
  display: grid;
  gap: var(--spacing-sm, 0.5rem);
  padding: var(--spacing-md, 1rem);
}
.global-search-label:where(:scope, *) {
  color: var(--flat-text, #21242c);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-semibold, 600);
  line-height: var(--line-height-snug, 1.375);
}
.global-search-field:where(:scope, *) {
  align-items: center;
  display: flex;
  position: relative;
}
.global-search-field .search-icon:where(:scope, *) {
  border: 2px solid var(--flat-text-subtle, #646b7a);
  border-radius: 50%;
  height: 0.85rem;
  left: 1rem;
  pointer-events: none;
  position: absolute;
  width: 0.85rem;
}
.global-search-field .search-icon:where(:scope, *)::after {
  background: var(--flat-text-subtle, #646b7a);
  content: "";
  height: 2px;
  left: 0.62rem;
  position: absolute;
  top: 0.68rem;
  transform: rotate(45deg);
  transform-origin: left center;
  width: 0.42rem;
}
.global-search-input:where(:scope, *) {
  background: var(--flat-surface, #ffffff);
  border: 1px solid var(--flat-border-strong, #c7c9cc);
  border-radius: 8px;
  color: var(--flat-text, #21242c);
  font-size: var(--font-size-base, 1rem);
  line-height: var(--line-height-normal, 1.5);
  min-height: 48px;
  padding: 0.75rem 1rem 0.75rem 2.65rem;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
  width: 100%;
}
.global-search-input:where(:scope, *)::placeholder {
  color: var(--flat-text-subtle, #646b7a);
}
.global-search-input:focus:where(:scope, *) {
  border-color: var(--flat-focus-ring, #1865f2);
  box-shadow: 0 0 0 3px rgba(24, 101, 242, 0.16);
  outline: none;
}
.global-search-input-meta:where(:scope, *) {
  align-items: start;
  display: flex;
  gap: var(--spacing-md, 1rem);
  justify-content: space-between;
}
.global-search-input-meta .search-help:where(:scope, *),
.global-search-input-meta .search-stats:where(:scope, *) {
  color: var(--flat-text-muted, #475774);
  font-size: var(--font-size-sm, 0.875rem);
  line-height: var(--line-height-snug, 1.375);
  margin: 0;
}
.global-search-input-meta .search-stats:where(:scope, *) {
  font-weight: var(--font-weight-semibold, 600);
  text-align: right;
  white-space: nowrap;
}
.global-search-container .search-loading:where(:scope, *) {
  align-items: center;
  background: var(--flat-surface-muted, #f7f8fa);
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: 8px;
  color: var(--flat-text-muted, #475774);
  display: flex;
  gap: var(--spacing-sm, 0.5rem);
  padding: var(--spacing-md, 1rem);
}
.global-search-container .search-loading[hidden]:where(:scope, *) {
  display: none;
}
.global-search-container .spinner:where(:scope, *) {
  animation: global-search-spin-db93ec96e6124442 0.8s linear infinite;
  border: 3px solid var(--flat-border, #dbdcdd);
  border-radius: 50%;
  border-top-color: var(--flat-accent, #1865f2);
  height: 1.5rem;
  width: 1.5rem;
}

@keyframes global-search-spin-db93ec96e6124442 {
  to {
    transform: rotate(360deg);
  }
}
.global-search-results:where(:scope, *) {
  display: grid;
  gap: var(--spacing-md, 1rem);
}
.global-search-container .search-state:where(:scope, *) {
  background: var(--flat-surface-muted, #f7f8fa);
  border: 1px dashed var(--flat-border-strong, #c7c9cc);
  border-radius: 8px;
  color: var(--flat-text-muted, #475774);
  display: grid;
  gap: var(--spacing-sm, 0.5rem);
  padding: var(--spacing-lg, 1.5rem);
}
.global-search-container .search-error:where(:scope, *) {
  background: #fff1f2;
  border-color: #b42318;
  color: #7a1b12;
}
.global-search-container .search-no-results:where(:scope, *) {
  background: #fff7ed;
  border-color: #b66000;
  color: #713b00;
}
.global-search-container .search-state-title:where(:scope, *) {
  color: inherit;
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: var(--font-weight-semibold, 600);
  line-height: var(--line-height-snug, 1.375);
  margin: 0;
}
.global-search-container .search-state-detail:where(:scope, *) {
  margin: 0;
}
.global-search-container .search-suggestions:where(:scope, *) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm, 0.5rem);
  margin-top: var(--spacing-xs, 0.25rem);
}
.global-search-container .search-suggestion:where(:scope, *) {
  background: var(--flat-surface, #ffffff);
  border: 1px solid var(--flat-border-strong, #c7c9cc);
  border-radius: 6px;
  color: var(--flat-text, #21242c);
  cursor: pointer;
  font: inherit;
  font-size: var(--font-size-sm, 0.875rem);
  line-height: var(--line-height-snug, 1.375);
  min-height: 36px;
  padding: 0.4rem 0.7rem;
}
.global-search-container .search-suggestion:hover:where(:scope, *),
.global-search-container .search-suggestion:focus-visible:where(:scope, *) {
  background: var(--interactive-all-soft, #eef5fa);
  border-color: var(--flat-accent, #1865f2);
  color: var(--interactive-all-ink, #24445f);
  outline: none;
}
.global-search-container .search-broaden:where(:scope, *) {
  background: var(--flat-accent, #1865f2);
  border: 1px solid var(--flat-accent, #1865f2);
  border-radius: 6px;
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-weight: var(--font-weight-semibold, 600);
  justify-self: start;
  min-height: 42px;
  padding: 0.55rem 0.85rem;
}
.global-search-container .search-broaden:hover:where(:scope, *),
.global-search-container .search-broaden:focus-visible:where(:scope, *) {
  background: #114fc0;
  outline: 3px solid rgba(24, 101, 242, 0.22);
  outline-offset: 2px;
}
.global-search-container .search-broadened-notice:where(:scope, *) {
  background: var(--interactive-all-soft, #eef5fa);
  border-left: 4px solid var(--flat-accent, #1865f2);
  color: var(--interactive-all-ink, #24445f);
  margin: 0;
  padding: 0.65rem 0.85rem;
}
.global-search-container .search-mobile-help:where(:scope, *) {
  display: none;
}
.global-search-container .search-gallery-group:where(:scope, *) {
  background: var(--flat-surface, #ffffff);
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: 8px;
  box-shadow: none;
  overflow: hidden;
}
.global-search-container .gallery-group-header:where(:scope, *) {
  align-items: center;
  background: var(--flat-surface-muted, #f7f8fa);
  border-bottom: 1px solid var(--flat-border, #dbdcdd);
  border-left: 4px solid var(--gallery-color, var(--flat-accent, #1865f2));
  display: grid;
  gap: var(--spacing-sm, 0.5rem);
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 0.85rem 1rem;
}
.global-search-container .gallery-icon:where(:scope, *) {
  align-items: center;
  background: var(--flat-surface, #ffffff);
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: 6px;
  display: inline-flex;
  font-size: 1rem;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}
.global-search-container .gallery-group-title:where(:scope, *) {
  min-width: 0;
}
.global-search-container .gallery-group-title h3:where(:scope, *) {
  color: var(--flat-text, #21242c);
  font-size: var(--font-size-base, 1rem);
  line-height: var(--line-height-snug, 1.375);
  margin: 0;
}
.global-search-container .gallery-group-title p:where(:scope, *) {
  color: var(--flat-text-muted, #475774);
  font-size: var(--font-size-sm, 0.875rem);
  line-height: var(--line-height-snug, 1.375);
  margin: 0.1rem 0 0;
}
.global-search-container .gallery-count:where(:scope, *) {
  color: var(--flat-text-muted, #475774);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-semibold, 600);
  white-space: nowrap;
}
.global-search-container .gallery-group-items:where(:scope, *) {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
}
.global-search-container .search-result-entry + .search-result-entry:where(:scope, *) {
  border-top: 1px solid var(--flat-border, #dbdcdd);
}
.global-search-container .search-result-item:where(:scope, *) {
  color: var(--flat-text, #21242c);
  display: grid;
  gap: var(--spacing-sm, 0.5rem);
  padding: 1rem;
  text-decoration: none;
}
.global-search-container .search-result-item:hover:where(:scope, *),
.global-search-container .search-result-item:focus-visible:where(:scope, *),
.global-search-container .search-result-item.is-active:where(:scope, *) {
  background: var(--interactive-all-soft, #eef5fa);
  box-shadow: inset 3px 0 0 var(--flat-accent, #1865f2);
  color: var(--flat-text, #21242c);
  outline: none;
  text-decoration: none;
}
.global-search-container .result-header:where(:scope, *) {
  align-items: start;
  display: flex;
  gap: var(--spacing-sm, 0.5rem);
}
.global-search-container .result-icon:where(:scope, *) {
  align-items: center;
  background: var(--flat-control-bg, #f1f3f5);
  border-radius: 6px;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.95rem;
  height: 1.75rem;
  justify-content: center;
  width: 1.75rem;
}
.global-search-container .result-titles:where(:scope, *) {
  min-width: 0;
}
.global-search-container .result-title:where(:scope, *) {
  color: var(--flat-text, #21242c);
  font-weight: var(--font-weight-semibold, 600);
  line-height: var(--line-height-snug, 1.375);
  overflow-wrap: anywhere;
}
.global-search-container .result-subtitle:where(:scope, *) {
  color: var(--flat-text-muted, #475774);
  font-size: var(--font-size-sm, 0.875rem);
  line-height: var(--line-height-snug, 1.375);
  margin-top: 0.1rem;
  overflow-wrap: anywhere;
}
.global-search-container .result-meta:where(:scope, *) {
  color: var(--flat-text-subtle, #646b7a);
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs, 0.25rem);
}
.global-search-container .result-meta span:where(:scope, *) {
  background: var(--flat-surface-muted, #f7f8fa);
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: 4px;
  font-size: var(--font-size-xs, 0.75rem);
  line-height: var(--line-height-snug, 1.375);
  padding: 0.15rem 0.4rem;
}
.global-search-container .result-description:where(:scope, *),
.global-search-container .result-chapter:where(:scope, *) {
  color: var(--flat-text-muted, #475774);
  font-size: var(--font-size-sm, 0.875rem);
  line-height: var(--line-height-normal, 1.5);
  overflow-wrap: anywhere;
}
.global-search-container .result-chapter:where(:scope, *) {
  color: var(--interactive-all-ink, #24445f);
  font-weight: var(--font-weight-medium, 500);
}
.global-search-container mark:where(:scope, *) {
  background: #fff4e3;
  border-radius: 3px;
  color: #713b00;
  padding: 0 0.1rem;
}

@media (max-width: 640px) {
  body.iotclass-search-page:where(:scope, *),
  body.iotclass-search-page #quarto-document-content:where(:scope, *) {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  body.iotclass-search-page #last-edited-banner:where(:scope, *),
  body.iotclass-search-page #title-block-header .subtitle:where(:scope, *),
  body.iotclass-search-page #global-search > h2:where(:scope, *),
  body.iotclass-search-page .global-search-header:where(:scope, *) {
    display: none !important;
  }

  body.iotclass-search-page #title-block-header:where(:scope, *) {
    margin-bottom: 0.5rem;
    padding-bottom: 0;
  }

  body.iotclass-search-page #title-block-header h1:where(:scope, *) {
    margin-bottom: 0;
  }

  body.iotclass-search-page #global-search:where(:scope, *) {
    margin-top: 0;
    padding-top: 0;
  }

  .global-search-container:where(:scope, *) {
    gap: var(--spacing-sm, 0.5rem);
  }

  .global-search-header h2:where(:scope, *) {
    font-size: var(--font-size-xl, 1.25rem);
  }

  .global-search-input-wrapper:where(:scope, *),
  .global-search-container .search-state:where(:scope, *) {
    padding: var(--spacing-md, 1rem);
  }

  body.iotclass-search-page .global-search-input-wrapper:where(:scope, *) {
    position: sticky;
    top: 0.5rem;
    z-index: 20;
  }

  body.iotclass-search-page .global-search-label:where(:scope, *),
  body.iotclass-search-page .global-search-input-meta .search-help:where(:scope, *) {
    display: none;
  }

  body.iotclass-search-page .global-search-container .search-mobile-help:where(:scope, *) {
    color: var(--flat-text-muted, #475774);
    display: block;
    font-size: var(--font-size-sm, 0.875rem);
  }

  body.iotclass-search-page .global-search-container .search-mobile-help summary:where(:scope, *) {
    color: var(--interactive-all-ink, #24445f);
    cursor: pointer;
    font-weight: var(--font-weight-semibold, 600);
  }

  body.iotclass-search-page .global-search-container .search-mobile-help p:where(:scope, *) {
    margin: 0.5rem 0 0;
  }

  .global-search-container .gallery-group-header:where(:scope, *) {
    align-items: stretch;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .global-search-container .global-search-input-meta:where(:scope, *) {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr;
  }

  .global-search-container .global-search-input-meta .search-stats:where(:scope, *) {
    text-align: left;
    white-space: normal;
  }

  .global-search-container .gallery-count:where(:scope, *) {
    grid-column: 2;
    white-space: normal;
  }

  .global-search-container .search-result-item:where(:scope, *) {
    padding: 0.85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .global-search-input:where(:scope, *),
  .global-search-container .spinner:where(:scope, *) {
    animation: none;
    transition: none;
  }
}

/* ===== GLOBAL SEARCH: result-type grouping (TASK-62) =====
 * assets/js/global-search.js nests each .search-gallery-group (already
 * styled above) inside a .search-result-type-group per super-group --
 * Chapters / Interactives / Guides -- so learners can scan reading pages
 * separately from interactive content and guides. Only these wrapper
 * classes need new rules; everything nested inside reuses the gallery
 * styling above unchanged. Loaded explicitly on content/_platform/search.qmd
 * (see dashboard.qmd for why: page-level `css:` frontmatter does not
 * reliably survive render, and this page renders through the root project's
 * style/platform-base.css, not this file, so it needs its own <link>). */
.search-result-type-group:where(:scope, *) {
  display: grid;
  gap: var(--spacing-md, 1rem);
}
.search-result-type-header:where(:scope, *) {
  align-items: baseline;
  border-bottom: 2px solid var(--ds-line);
  display: flex;
  gap: var(--spacing-sm, 0.5rem);
  justify-content: space-between;
  padding-bottom: var(--spacing-xs, 0.25rem);
}
#quarto-document-content .search-result-type-header h2:where(:scope, *) {
  border-bottom: 0 !important;
  color: var(--flat-text, #21242c);
  font-size: var(--font-size-xl, 1.25rem);
  margin: 0;
  padding-bottom: 0;
}
#quarto-document-content .search-result-type-header h2:where(:scope, *)::before,
#quarto-document-content .search-result-type-header h2:where(:scope, *)::after {
  content: none;
}
.search-result-type-count:where(:scope, *) {
  color: var(--flat-text-muted, #475774);
  font-size: var(--font-size-sm, 0.875rem);
  white-space: nowrap;
}
.global-search-container .study-search-items:where(:scope, *) {
  display: grid;
  gap: var(--spacing-xs, 0.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.global-search-container .study-search-items .search-result-entry:where(:scope, *) {
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: 6px;
  min-width: 0;
}
.global-search-container .study-search-items .result-description:where(:scope, *) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ===== HORIZONTAL RULES ===== */
hr:where(:scope, *) {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--primary-blue) 50%, transparent 100%);
  margin: 3rem 0;
}
/* ===== UTILITY CLASSES ===== */
.text-center:where(:scope, *) {
  text-align: center;
}
.text-left:where(:scope, *) {
  text-align: left;
}
/* ===== EMBED WRAPPERS (Wokwi,
CircuitJS,
YouTube) ===== */
.embed:where(:scope, *) {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  margin: 1.5rem 0;
  overflow: hidden;
}
.embed-header:where(:scope, *) {
  background: var(--gradient-primary);
  color: #fff;
  padding: 0.5rem 0.75rem;
  font-weight: 700;
  font-size: 0.95rem;
}
.embed-frame:where(:scope, *) {
  display: block;
  width: 100%;
  border: 0;
}
.embed-caption:where(:scope, *) {
  padding: 0.5rem 0.75rem 0.9rem;
  color: var(--gray-700);
  font-style: italic;
  background: #fafafa;
}
.sr-only:where(:scope, *) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
/* ===== QUIZ (Lightweight MCQ pattern) ===== */
.quiz:where(:scope, *),
.mcq:where(:scope, *) {
  border: 1px solid var(--flat-border);
  border-left: 3px solid var(--interactive-knowledge-check);
  border-radius: var(--flat-radius-lg);
  padding: 1rem;
  box-shadow: var(--flat-shadow);
  background: var(--flat-surface);
  margin: 1.25rem 0;
}
/* ===== KNOWLEDGE CHECK (Collapsible inline concept checks) ===== */
.knowledge-check:where(:scope, *) {
  border: 1px solid var(--flat-border);
  border-left: 3px solid var(--interactive-knowledge-check);
  border-radius: var(--flat-radius-lg);
  background: var(--flat-surface);
  margin: 1.5rem 0;
  box-shadow: var(--flat-shadow);
}
.knowledge-check summary:where(:scope, *) {
  cursor: pointer;
  padding: 1rem 1.25rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--interactive-knowledge-check-ink);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  user-select: none;
  transition: background-color var(--transition-fast);
  border-radius: var(--flat-radius-md);
}
.knowledge-check summary:hover:where(:scope, *) {
  background: var(--interactive-knowledge-check-soft);
}
.knowledge-check summary:where(:scope, *)::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--interactive-knowledge-check-soft);
  color: var(--interactive-knowledge-check-ink);
  border: 1px solid var(--flat-border);
  border-radius: var(--flat-radius-md);
  font-size: 0.875rem;
  font-weight: 700;
  flex-shrink: 0;
}
.knowledge-check summary:where(:scope, *)::marker {
  content: "";
}

@keyframes slideDown-d2032cd0b048eeec {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.knowledge-check .mcq:where(:scope, *) {
  margin: 0.75rem 0;
  border-color: var(--flat-border);
  background: var(--flat-surface-muted);
}
.knowledge-check-badge:where(:scope, *) {
  display: inline-block;
  background: var(--interactive-knowledge-check-soft);
  color: var(--interactive-knowledge-check-ink);
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--flat-border);
  border-radius: var(--flat-radius-md);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  margin-left: auto;
}
/* Knowledge-check toggle button removed 2026-08-05 with its dead JS. */
.mt-1:where(:scope, *) {
  margin-top: var(--spacing-xs);
}
.mt-2:where(:scope, *) {
  margin-top: var(--spacing-sm);
}
/* ===== RESPONSIVE UTILITIES ===== */
@media (max-width: 768px) {
  .back-to-top:where(:scope, *) {
    bottom: 1rem;
    right: 1rem;
    width: 45px;
    height: 45px;
  }

  table:where(:scope, *) {
    font-size: 0.875rem;
  }

  thead th:where(:scope, *),
  tbody td:where(:scope, *) {
    padding: 0.75rem;
  }

  /* Mobile callout improvements */
  .callout:where(:scope, *) {
    padding: 1rem 1.25rem;
    margin: 1rem 0;
    border-radius: 6px;
  }

  .callout-title:where(:scope, *) {
    font-size: 0.9375rem;
    margin-bottom: 0.5rem;
  }

  .callout-body:where(:scope, *) {
    line-height: 1.65;
  }

  /* Collapsible callouts - better touch targets */
  .callout[data-bs-toggle="collapse"] .callout-title:where(:scope, *) {
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  /* Mobile code blocks */
  .sourceCode:where(:scope, *),
  pre.sourceCode:where(:scope, *) {
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 8px;
    font-size: 0.8125rem;
  }

  div.sourceCode:where(:scope, *)::before {
    font-size: 0.625rem;
    padding: 0.2rem 0.5rem;
    top: 0.5rem;
    right: 0.5rem;
  }

  /* Mobile figure/image handling */
  figure:where(:scope, *) {
    margin: 1rem 0;
  }

  figure img:where(:scope, *) {
    max-width: 100%;
    height: auto;
  }

  figcaption:where(:scope, *) {
    font-size: 0.8125rem;
    padding: 0.5rem;
  }

  /* Mobile Mermaid diagrams */
  .mermaid:where(:scope, *) {
    overflow-x: auto;
    max-width: 100%;
    font-size: 0.75rem;
  }

  /* Navigation touch targets */
  .sidebar-item a:where(:scope, *) {
    min-height: 44px;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
  }

  /* Table horizontal scroll */
  .table-responsive:where(:scope, *),
  table:where(:scope, *) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
/* Optional stacked tables for dense comparison tables on small screens.
   QMD pages opt in with: ::: {.table-responsive .iot-stack-table-wrap}
*/
.front-door-scope-table:where(:scope, *) {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}
.front-door-scope-table table:where(:scope, *) {
  width: 100%;
  min-width: 660px;
}
.front-door-scope-table:focus-visible:where(:scope, *) {
  outline: 3px solid var(--focus-ring, #1865f2);
  outline-offset: 3px;
}
.iot-stack-table-wrap table:where(:scope, *) {
  width: 100%;
}
#quarto-document-content table.iot-stack-table:where(:scope, *) {
  width: 100%;
}

@media (max-width: 700px) {
  .iot-stack-table-wrap:where(:scope, *) {
    overflow-x: visible;
  }

  #quarto-document-content table.iot-stack-table thead:where(:scope, *) {
    display: none;
  }

  #quarto-document-content table.iot-stack-table:where(:scope, *),
  #quarto-document-content table.iot-stack-table tbody:where(:scope, *),
  #quarto-document-content table.iot-stack-table tr:where(:scope, *),
  #quarto-document-content table.iot-stack-table td:where(:scope, *),
  #quarto-document-content table.iot-stack-table th:where(:scope, *) {
    display: block;
    width: 100%;
  }

  #quarto-document-content table.iot-stack-table tr[data-iot-stack-header="true"]:where(:scope, *) {
    display: none !important;
  }

  #quarto-document-content table.iot-stack-table tr:where(:scope, *) {
    margin: 0 0 1rem;
    border: 1px solid #d9e5ea;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  }

  #quarto-document-content table.iot-stack-table td:where(:scope, *),
  #quarto-document-content table.iot-stack-table th:where(:scope, *) {
    border: 0;
    border-bottom: 1px solid #edf2f7;
    padding: 0.8rem 0.9rem;
    text-align: left !important;
    white-space: normal;
  }

  #quarto-document-content table.iot-stack-table td:last-child:where(:scope, *),
  #quarto-document-content table.iot-stack-table th:last-child:where(:scope, *) {
    border-bottom: 0;
  }

  #quarto-document-content table.iot-stack-table td:where(:scope, *)::before,
  #quarto-document-content table.iot-stack-table th:where(:scope, *)::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #5b6f7f;
  }
}
/* Extra small screens */
@media (max-width: 480px) {
  .callout:where(:scope, *) {
    padding: 0.875rem 1rem;
    margin: 0.75rem 0;
  }

  .callout-title:where(:scope, *) {
    font-size: 0.875rem;
  }

  .sourceCode:where(:scope, *),
  pre.sourceCode:where(:scope, *) {
    padding: 0.75rem;
    font-size: 0.75rem;
  }

  h1:where(:scope, *) {
    font-size: 1.75rem;
  }

  h2:where(:scope, *) {
    font-size: 1.375rem;
  }

  h3:where(:scope, *) {
    font-size: 1.125rem;
  }

  /* Touch targets - still need 44px minimum */
  .back-to-top:where(:scope, *) {
    width: 48px;
    height: 48px;
  }
}
/* ===== RIGHT SIDEBAR (TABLE OF CONTENTS) STYLING ===== */
/* Base styling for right sidebar with part-aware accents */
#quarto-margin-sidebar:where(:scope, *) {
  --toc-accent: #2f4f4f;
  --toc-accent-border: #2f4f4f;
  background: transparent !important;
  border: none !important;
  border-left: none !important;
  padding: 0.5rem 0.75rem 0.5rem 0.25rem !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  position: relative;
  /* Allow vertical scroll, allow horizontal overflow for text wrapping */
  overflow-x: visible;
  overflow-y: auto;
  /* Ensure content stays within bounds */
  box-sizing: border-box;
  max-width: 100%;
}
/* TOC navigation styling */
nav#TOC:where(:scope, *) {
  font-size: 0.82rem;
  line-height: 1.5;
  /* Allow TOC text to wrap properly */
  max-width: 100%;
  overflow: visible;
  box-sizing: border-box;
}
nav#TOC ul:where(:scope, *) {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
nav#TOC li:where(:scope, *) {
  margin: 0;
}
#quarto-margin-sidebar nav#TOC a:where(:scope, *),
nav#TOC a:where(:scope, *) {
  display: block;
  position: relative;
  padding: 0.15rem 0.75rem 0.15rem 0.5rem;
  color: #495057 !important;
  text-decoration: none !important;
  border-left: 2px solid transparent;
  border-radius: 3px;
  transition: none !important;
  line-height: 1.3;
  background: none !important;
  /* Allow text to wrap - prevent cutoff */
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  font-size: 0.78rem;
  min-height: 0;
  /* Constrain to parent width with safety margin */
  max-width: calc(100% - 0.5rem);
  box-sizing: border-box;
}
/* toc-nav-heading-number-midbreak (P3 wave-4 fix,
2026-07-22): the
   `overflow-wrap: anywhere; word-break: break-word;` above is meant for the
   heading TITLE text (so long multi-word titles wrap instead of overflowing
   the sidebar) but both properties are inherited,
so a right-sidebar TOC
   entry's `.header-section-number` badge (e.g. "44.21") inherits them too --
   combined with the badge's own narrow `min-width: 2.1rem` (#TOC a
   .header-section-number,
above),
a two-digit sub-section number has just
   enough width pressure to break mid-digit ("44.2" / "1") instead of
   wrapping at the space before the title. Numbers never need to wrap; give
   the badge its own explicit `white-space: nowrap` so it always renders as
   one unbroken token regardless of column width. */
#quarto-margin-sidebar nav#TOC a .header-section-number:where(:scope, *),
nav#TOC a .header-section-number:where(:scope, *) {
  white-space: nowrap;
}
/* Ensure TOC text wraps properly within container bounds */
#quarto-margin-sidebar nav#TOC ul:where(:scope, *),
nav#TOC ul:where(:scope, *) {
  padding-right: 1rem;
}
nav#TOC li:where(:scope, *) {
  /* Allow text to wrap instead of truncating */
  overflow: visible;
}
#quarto-margin-sidebar nav#TOC a:hover:where(:scope, *),
nav#TOC a:hover:where(:scope, *) {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #212529 !important;
}
/* Active section highlighting */
#quarto-margin-sidebar nav#TOC a.active:where(:scope, *),
nav#TOC a.active:where(:scope, *) {
  background: rgba(0, 0, 0, 0.06) !important;
  border-left-color: var(--toc-accent-border);
  border-left-width: 3px;
  font-weight: 600;
  color: #2c3e50 !important;
}
/* Nested items */
nav#TOC ul ul:where(:scope, *) {
  padding-left: 0.75rem;
  margin: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.06);
}
nav#TOC ul ul a:where(:scope, *) {
  font-size: 0.75rem;
  padding: 0.2rem 0.3rem 0.2rem 0.5rem;
}
/* TOC actions (Edit this page,
Report issue) */
nav#TOC .toc-actions:where(:scope, *) {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e0e0e0;
}
/* Responsive adjustments */
@media (max-width: 1399px) {
  #quarto-margin-sidebar:where(:scope, *) {
    padding: 0.5rem 0.25rem;
  }
}

@media (max-width: 991px) {
  #quarto-margin-sidebar:where(:scope, *) {
    border-left: none;
    box-shadow: none;
  }
}
/* Sidebar color indicators for collapsed sections */
.sidebar-item-container .collapse-indicator:where(:scope, *) {
  color: inherit;
  transition: transform 0.3s ease;
}
/* Sidebar chapter indicators - disabled to prevent visual issues */
/* .sidebar-item a::before { content: "•"; ... }
- removed */

/* ===== SIDEBAR STYLING & LAYOUT ===== */
.sidebar:where(:scope, *) {
  background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
}
/* Sidebar layout - fixed sidebars,
adaptive content */
@media (min-width: 1100px) {
  /* Three-column: sidebar (left) | content (fill) | TOC (right) */
  body.docked .page-columns:where(:scope, *) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    column-gap: 0 !important;
  }
}
/* Two-column below 1100px: sidebar + content,
TOC hidden */
@media (min-width: 992px) and (max-width: 1099px) {
  body.docked .page-columns:where(:scope, *) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    column-gap: 0 !important;
    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] 0px
      [body-end] 0px
      [body-end-outset] 0px
      [page-end-inset] 0px
      [page-end] 0px
      [screen-end-inset] 1.5rem
      [screen-end] !important;
  }

  #quarto-margin-sidebar:where(:scope, *) {
    display: none !important;
  }
}

@media (min-width: 992px) {
  body.nav-sidebar.docked:not(.iotclass-homepage):not(.iotclass-modules-landing)
    #quarto-content.page-columns:where(:scope, *) {
    display: grid !important;
    width: min(100%, 1840px);
    max-width: 1840px;
    margin-inline: auto;
    box-sizing: border-box;
  }

  body.nav-sidebar.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) #quarto-sidebar:where(:scope, *) {
    grid-column: screen-start-inset / page-start-inset;
    grid-row: 1 / span 4;
    align-self: start;
  }

  body.nav-sidebar.docked:not(.iotclass-homepage):not(.iotclass-modules-landing)
    #quarto-margin-sidebar:where(:scope, *) {
    grid-column: body-end / page-end;
    grid-row: 1;
    align-self: start;
  }

  body.nav-sidebar.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content:where(:scope, *),
  body.nav-sidebar.docked:not(.iotclass-homepage):not(.iotclass-modules-landing)
    main.content.column-body:where(:scope, *) {
    grid-column: body-content-start / body-content-end;
    justify-self: start;
  }

  body.nav-sidebar.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) .page-navigation:where(:scope, *) {
    grid-column: body-content-start / body-content-end;
  }

  /* Left sidebar - fixed at 325px, flush left */
  #quarto-sidebar:where(:scope, *),
  #quarto-sidebar .sidebar-navigation:where(:scope, *) {
    width: 325px !important;
    min-width: 0 !important;
    max-width: 325px !important;
  }

  /* Right sidebar (TOC) - sticky, right-aligned */
  #quarto-margin-sidebar:where(:scope, *) {
    position: sticky !important;
    top: 60px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    min-width: 0 !important;
    width: auto !important;
    padding-right: 0.75rem;
  }
}

@media (min-width: 769px) {
  body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing)
    #quarto-sidebar
    .sidebar-search:where(:scope, *),
  body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing)
    #quarto-header
    #quarto-search:where(:scope, *),
  body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing)
    #quarto-header
    .aa-DetachedSearchButton:where(:scope, *) {
    display: none !important;
  }

  body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) #global-search-btn:where(:scope, *) {
    display: none !important;
  }

  body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) .quarto-secondary-nav:where(:scope, *) {
    display: none !important;
  }
}
/* Prevent horizontal overflow */
html:where(:scope) {
  overflow-x: hidden;
}
/* ===== MEDIA VERSIONING PICKER ===== */
/* Version indicator on images and diagrams with alternatives */
.media-version-indicator:where(:scope, *) {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(44, 62, 80, 0.85);
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition:
    opacity 0.2s,
    transform 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.media-version-container:hover .media-version-indicator:where(:scope, *),
figure:hover .media-version-indicator:where(:scope, *),
[id^="fig-"]:hover .media-version-indicator:where(:scope, *) {
  opacity: 1;
}
.media-version-indicator:hover:where(:scope, *) {
  transform: scale(1.1);
  background: rgba(22, 160, 133, 0.95);
}
.media-version-indicator .version-icon:where(:scope, *) {
  font-size: 14px;
}
.media-version-indicator .version-count:where(:scope, *) {
  background: rgba(255, 255, 255, 0.2);
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
}
/* Container for images with version indicators */
.media-version-container:where(:scope, *) {
  position: relative;
  display: inline-block;
}
/* Unified admin media indicator (same for images and diagrams) */
.admin-media-indicator:where(:scope, *) {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(44, 62, 80, 0.85);
  color: white;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  z-index: 10;
  opacity: 0;
  transition:
    opacity 0.2s,
    transform 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
/* Show indicator on hover - works for both images and diagrams */
.admin-media-container:hover .admin-media-indicator:where(:scope, *),
figure:hover .admin-media-indicator:where(:scope, *),
[id^="fig-"]:hover .admin-media-indicator:where(:scope, *),
.quarto-figure:hover .admin-media-indicator:where(:scope, *),
.cell-output-display:hover .admin-media-indicator:where(:scope, *) {
  opacity: 1;
}
.admin-media-indicator:hover:where(:scope, *) {
  transform: scale(1.1);
  background: rgba(22, 160, 133, 0.95);
}
/* Unified admin media container */
.admin-media-container:where(:scope, *) {
  position: relative;
  display: inline-block;
}
/* Option badge in picker panel */
.option-badge:where(:scope, *) {
  background: rgba(22, 160, 133, 0.2);
  color: #16a085;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  margin-left: auto;
}
/* Toggle indicator on figures with alternatives (legacy) */
.media-toggle-indicator:where(:scope, *) {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(44, 62, 80, 0.9);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0.7;
  transition:
    opacity 0.2s,
    transform 0.2s;
}
.media-toggle-indicator:hover:where(:scope, *) {
  opacity: 1;
  transform: scale(1.05);
}
.media-toggle-indicator .toggle-icon:where(:scope, *) {
  font-size: 14px;
}
.media-toggle-indicator .toggle-count:where(:scope, *) {
  font-size: 10px;
  opacity: 0.85;
}
/* Media picker panel */
.media-picker-panel:where(:scope, *) {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  z-index: 10001;
  min-width: 350px;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.media-panel-header:where(:scope, *) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #2c3e50;
  color: white;
  border-radius: 8px 8px 0 0;
  font-weight: 600;
}
.media-panel-close:where(:scope, *) {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.media-panel-close:hover:where(:scope, *) {
  opacity: 1;
}
.media-panel-body:where(:scope, *) {
  padding: 16px;
}
.media-type-section:where(:scope, *) {
  margin-bottom: 16px;
}
.media-type-section:last-of-type:where(:scope, *) {
  margin-bottom: 0;
}
.media-type-section h4:where(:scope, *) {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 14px;
  border-bottom: 1px solid #eee;
  padding-bottom: 4px;
}
.media-options-list:where(:scope, *) {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.media-option:where(:scope, *) {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.media-option:hover:where(:scope, *) {
  background: #f5f5f5;
}
.media-option.selected:where(:scope, *) {
  background: #e8f6f3;
  border-color: #16a085;
}
.media-option input:where(:scope, *) {
  margin: 0;
  cursor: pointer;
}
.option-label:where(:scope, *) {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
}
.option-source:where(:scope, *),
.option-file:where(:scope, *) {
  font-size: 11px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}
.media-panel-actions:where(:scope, *) {
  margin-top: 16px;
  text-align: right;
  border-top: 1px solid #eee;
  padding-top: 12px;
}
.apply-media-btn:where(:scope, *) {
  background: #16a085;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s;
}
.apply-media-btn:hover:where(:scope, *) {
  background: #138d75;
}
/* Panel info section */
.media-panel-info:where(:scope, *) {
  padding: 8px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #eee;
  font-size: 12px;
  color: #666;
}
/* Type badges */
.media-type-badge:where(:scope, *) {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}
.media-type-badge.image:where(:scope, *) {
  background: #e8f6f3;
  color: #16a085;
}
.media-type-badge.diagram:where(:scope, *) {
  background: #fdf2e9;
  color: #e67e22;
}
/* Admin preview section */
.media-preview-section:where(:scope, *) {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}
.media-preview-section h4:where(:scope, *) {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 14px;
}
.preview-container:where(:scope, *) {
  background: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 12px;
  text-align: center;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preview-placeholder:where(:scope, *) {
  color: #999;
  font-size: 12px;
  font-style: italic;
}
/* Admin tools section */
.admin-tools-section:where(:scope, *) {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}
.admin-tools-section h4:where(:scope, *) {
  margin: 0 0 10px 0;
  color: #2c3e50;
  font-size: 14px;
}
.admin-tool-buttons:where(:scope, *) {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.apply-all-btn:where(:scope, *),
.reset-selection-btn:where(:scope, *) {
  flex: 1;
  min-width: 120px;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: background 0.2s;
}
.apply-all-btn:where(:scope, *) {
  background: #e67e22;
  color: white;
}
.apply-all-btn:hover:where(:scope, *) {
  background: #d35400;
}
.reset-selection-btn:where(:scope, *) {
  background: #95a5a6;
  color: white;
}
.reset-selection-btn:hover:where(:scope, *) {
  background: #7f8c8d;
}
/* Diagram indicator styling */
.diagram-indicator:where(:scope, *) {
  background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
}
.diagram-indicator:hover:where(:scope, *) {
  background: linear-gradient(135deg, #8e44ad 0%, #7d3c98 100%);
}
/* Library browser section */
.library-section:where(:scope, *) {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}
/* Library option - increased specificity to avoid !important */
.library-images .library-option:where(:scope, *) {
  flex: 0 0 auto;
  padding: 4px 8px;
  font-size: 11px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 4px;
}
.library-option.selected:where(:scope, *) {
  background: #e8f6f3;
  border-color: #16a085;
}
/* Backdrop */
.media-picker-backdrop:where(:scope, *) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
}
/* Responsive adjustments */
@media (max-width: 480px) {
  .media-picker-panel:where(:scope, *) {
    min-width: 290px;
    max-width: calc(100vw - 40px);
  }

  .media-panel-header:where(:scope, *) {
    padding: 10px 14px;
    font-size: 14px;
  }

  .media-panel-body:where(:scope, *) {
    padding: 12px;
  }

  .media-option:where(:scope, *) {
    padding: 6px;
    gap: 6px;
  }

  .option-source:where(:scope, *),
  .option-file:where(:scope, *) {
    max-width: 80px;
  }
}
/* ===== PROGRESSIVE DISCLOSURE LAYER SYSTEM ===== */
/* Three-tier content disclosure: Core (always visible),
Practical (togglable),
Deep (collapsed by default) */

/* Layer Core - Always visible,
base content with no special styling */
/* Layer Practical - Visible by default,
can be toggled */
/* Used for hands-on examples,
code samples,
implementation details */
.layer-practical:where(:scope, *) {
  border-left: 3px solid #16a085;
  padding-left: 1rem;
  margin: 1rem 0;
  background: linear-gradient(90deg, rgba(22, 160, 133, 0.03) 0%, transparent 100%);
}
/* Layer Deep - Collapsed by default */
/* Used for advanced theory,
edge cases,
optimization details,
mathematical proofs */
.layer-deep:where(:scope, *) {
  background: #f8f9fa;
  border-left: 3px solid #7f8c8d;
  margin: 1rem 0;
}
/* Deep Dive callout styling - enhanced for progressive disclosure */
.callout-note[data-title*="Deep Dive"]:where(:scope, *) {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-color: #e9ecef;
  border-left-color: #7f8c8d;
  border-left-width: 4px;
}
.callout-note[data-title*="Deep Dive"] .callout-title:where(:scope, *),
.callout-note[data-title*="deep dive"] .callout-title:where(:scope, *) {
  color: #495057;
  font-weight: 600;
}
.callout-note[data-title*="Deep Dive"] .callout-title:where(:scope, *)::before,
.callout-note[data-title*="deep dive"] .callout-title:where(:scope, *)::before {
  content: "Advanced ";
  font-size: 0.7rem;
  background: #7f8c8d;
  color: white;
  padding: 0.125rem 0.375rem;
  border-radius: 3px;
  margin-right: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  vertical-align: middle;
}
/* Deep Dive callout body */
.callout-note[data-title*="Deep Dive"] .callout-body:where(:scope, *) {
  color: #495057;
}
/* Mathematical content within Deep Dive sections */
.callout-note[data-title*="Deep Dive"] .math:where(:scope, *) {
  background: white;
  padding: 0.5rem;
  border-radius: 4px;
  margin: 0.5rem 0;
}
/* ===== PRINT STYLES ===== */
@media print {
  .hero-section:where(:scope, *),
  .features-section:where(:scope, *),
  .pathway-section:where(:scope, *),
  .testimonial-section:where(:scope, *),
  .cta-section:where(:scope, *),
  .sidebar:where(:scope, *),
  .back-to-top:where(:scope, *) {
    display: none;
  }

  figure img:where(:scope, *) {
    box-shadow: none;
  }
}
/* --- Section: Educational Components (was educational-components.css) --- */

/*=====================================
  EDUCATIONAL COMPONENTS v1.0
  Kids content,
executive summaries,
research papers,
labs
  IEEE Color Palette: #2C3E50,
#16A085,
#E67E22,
#7F8C8D
=====================================*/

/* ===== KIDS CONTENT - COMICS & ELI5 ===== */

/* Kids panel container - collapsible section for children's content */
.kids-panel:where(:scope, *) {
  border: 3px solid #ffb347;
  border-radius: 16px;
  background: linear-gradient(135deg, #fff8e7 0%, #fffdf5 100%);
  margin: 2rem 0;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(255, 179, 71, 0.2);
  transition: all 0.3s ease;
}
.kids-panel:hover:where(:scope, *) {
  box-shadow: 0 6px 20px rgba(255, 179, 71, 0.3);
  transform: translateY(-2px);
}
.kids-panel-header:where(:scope, *) {
  background: linear-gradient(135deg, #ffb347 0%, #ffcc80 100%);
  padding: 1rem 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  user-select: none;
  transition: background 0.2s ease;
}
.kids-panel-header:hover:where(:scope, *) {
  background: linear-gradient(135deg, #ffa726 0%, #ffb74d 100%);
}
.kids-panel.collapsed .kids-panel-toggle:where(:scope, *) {
  transform: rotate(-90deg);
}
.kids-panel-body:where(:scope, *) {
  padding: 1.5rem;
  animation: slideDown-d2032cd0b048eeec 0.3s ease;
}
.kids-panel.collapsed .kids-panel-body:where(:scope, *) {
  display: none;
}
/* Flat bridge from academic chapters to the separate IoT Kids Books unit */
.iot-kids-book-link:where(:scope, *) {
  margin: 1.25rem 0;
  padding: 0.85rem 1rem;
  border-left: 3px solid #16a085;
  border-radius: 4px;
  background: #f6fbfa;
  color: #1f2937;
}
.iot-kids-book-link__text:where(:scope, *) {
  display: grid;
  gap: 0.25rem;
}
.iot-kids-book-link__eyebrow:where(:scope, *) {
  color: #52616b;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.iot-kids-book-link__title:where(:scope, *) {
  font-weight: 700;
}
.iot-kids-book-link__title a:where(:scope, *) {
  color: #0b6657;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;
}
.iot-kids-book-link__reason:where(:scope, *) {
  color: #52616b;
  font-size: 0.95rem;
}
/* ELI5 (Explain Like I'm 5) styling */
.eli5-section:where(:scope, *) {
  background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
  border-left: 4px solid #4caf50;
  border-radius: 0 12px 12px 0;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  position: relative;
}
/* Comic Panel Layout */
.comic-strip:where(:scope, *) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.comic-panel:where(:scope, *) {
  background: white;
  border: 3px solid #2c3e50;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 4px 4px 0 #2c3e50;
  transition: transform 0.2s ease;
}
.comic-panel:hover:where(:scope, *) {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #2c3e50;
}
.comic-speech-bubble:where(:scope, *) {
  background: #f5f5f5;
  border: 2px solid #333;
  border-radius: 20px;
  padding: 0.75rem 1rem;
  position: relative;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.5;
}
.comic-speech-bubble:where(:scope, *)::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 20px;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid #333;
}
.comic-speech-bubble:where(:scope, *)::before {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 22px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #f5f5f5;
  z-index: 1;
}
/* Character badges for comic characters */
.character-badge:where(:scope, *) {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}
/* Age indicator */
.age-indicator:where(:scope, *) {
  display: inline-block;
  background: #e3f2fd;
  color: #1565c0;
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  margin-left: 0.5rem;
}
/* ===== EXECUTIVE SUMMARY CARDS ===== */

.executive-summary:where(:scope, *) {
  background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
  border: 1px solid #e0e0e0;
  border-left: 5px solid #2c3e50;
  border-radius: 0 12px 12px 0;
  padding: 1.5rem;
  margin: 2rem 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
/* Key metrics table in executive summary */
.executive-metrics:where(:scope, *) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}
/* Decision criteria in executive summary */
.decision-criteria:where(:scope, *) {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
}
.criteria-list:where(:scope, *) {
  list-style: none;
  padding: 0;
  margin: 0;
}
.criteria-list li:where(:scope, *) {
  padding: 0.4rem 0;
  padding-left: 1.5rem;
  position: relative;
  font-size: 0.9rem;
  color: #555;
}
.criteria-list li.positive:where(:scope, *)::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #27ae60;
  font-weight: bold;
}
.criteria-list li.negative:where(:scope, *)::before {
  content: "✗";
  position: absolute;
  left: 0;
  color: #e74c3c;
  font-weight: bold;
}
.criteria-list li.neutral:where(:scope, *)::before {
  content: "○";
  position: absolute;
  left: 0;
  color: #95a5a6;
}
/* Case study snapshot */
.case-study-snapshot:where(:scope, *) {
  background: linear-gradient(135deg, #e8f6f3 0%, #f0faf8 100%);
  border: 1px solid #a3d9cc;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
}
/* ===== RESEARCH PAPER REFERENCES ===== */

.scholarly-references:where(:scope, *) {
  background: linear-gradient(135deg, #fff3e0 0%, #fffaf0 100%);
  border: 1px solid #ffe0b2;
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0;
}
.scholarly-references-header:where(:scope, *) {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #ffe0b2;
}
.scholarly-references-header h3:where(:scope, *) {
  margin: 0;
  color: #e65100;
  font-size: 1.1rem;
  font-weight: 700;
}
.scholarly-references-header:where(:scope, *)::before {
  content: "📚";
  font-size: 1.5rem;
}
.paper-category:where(:scope, *) {
  margin: 1.25rem 0;
}
.paper-category h4:where(:scope, *) {
  color: #bf360c;
  font-size: 0.95rem;
  margin: 0 0 0.75rem;
  padding-left: 0.5rem;
  border-left: 3px solid #ff5722;
}
.paper-card:where(:scope, *) {
  background: white;
  border: 1px solid #ffccbc;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 0.75rem;
  transition: all 0.2s ease;
}
.paper-card:hover:where(:scope, *) {
  border-color: #ff5722;
  box-shadow: 0 2px 8px rgba(255, 87, 34, 0.15);
}
.paper-card:last-child:where(:scope, *) {
  margin-bottom: 0;
}
.paper-title:where(:scope, *) {
  font-weight: 600;
  color: #2c3e50;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}
.paper-venue:where(:scope, *) {
  display: inline-block;
  background: #fff3e0;
  color: #a33b00;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.paper-authors:where(:scope, *) {
  color: #666;
  font-size: 0.85rem;
  font-style: italic;
  margin-bottom: 0.5rem;
}
.paper-contribution:where(:scope, *) {
  color: #555;
  font-size: 0.875rem;
  line-height: 1.6;
  margin-bottom: 0.75rem;
}
.paper-relevance:where(:scope, *) {
  background: #f5f5f5;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8rem;
  color: #666;
}
.paper-relevance strong:where(:scope, *) {
  color: #a33b00;
}
.paper-links:where(:scope, *) {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}
.paper-link:where(:scope, *) {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}
.paper-link.ieee:where(:scope, *) {
  background: #e3f2fd;
  color: #1565c0;
  border: 1px solid #90caf9;
}
.paper-link.ieee:hover:where(:scope, *) {
  background: #1565c0;
  color: white;
}
.paper-link.acm:where(:scope, *) {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}
.paper-link.acm:hover:where(:scope, *) {
  background: #2e7d32;
  color: white;
}
.paper-link.arxiv:where(:scope, *) {
  background: #eceff1;
  color: #546e7a;
  border: 1px solid #b0bec5;
}
.paper-link.arxiv:hover:where(:scope, *) {
  background: #37474f;
  color: white;
}
.paper-link.bibtex:where(:scope, *) {
  background: #eceff1;
  color: #546e7a;
  border: 1px solid #b0bec5;
}
.paper-link.bibtex:hover:where(:scope, *) {
  background: #546e7a;
  color: white;
}
/* Paper difficulty indicator */
.paper-difficulty:where(:scope, *) {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  color: #666;
  margin-left: 0.5rem;
}
.paper-difficulty .star:where(:scope, *) {
  color: #ffc107;
}
.paper-difficulty .star.empty:where(:scope, *) {
  color: #e0e0e0;
}
/* Paper reading guide */
.paper-reading-guide:where(:scope, *) {
  background: #fffde7;
  border: 1px solid #fff59d;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
}
/* ===== PRACTICAL LAB EXERCISES ===== */

.practical-lab:where(:scope, *) {
  background: linear-gradient(135deg, #e3f2fd 0%, #f5f9ff 100%);
  border: 2px solid #90caf9;
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0;
  position: relative;
}
.practical-lab:where(:scope, *)::before {
  content: "Hands-On Lab";
  position: absolute;
  top: -12px;
  left: 20px;
  background: linear-gradient(135deg, #1976d2 0%, #2196f3 100%);
  color: white;
  padding: 0.35rem 1rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.3);
}
.practical-lab-header:where(:scope, *) {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #bbdefb;
}
.practical-lab h2:where(:scope, *),
.practical-lab h3:where(:scope, *) {
  color: #1565c0;
  font-size: 1.25rem;
  margin: 0 0 0.75rem;
}
.lab-meta-item .icon:where(:scope, *) {
  font-size: 1rem;
}
/* Lab difficulty stars */
.lab-difficulty:where(:scope, *) {
  display: inline-flex;
  gap: 0.15rem;
}
.lab-difficulty .star:where(:scope, *) {
  color: #ffc107;
  font-size: 0.9rem;
}
.lab-difficulty .star.empty:where(:scope, *) {
  color: #e0e0e0;
}
/* Learning objectives */
.lab-objectives:where(:scope, *) {
  background: white;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.lab-objectives h4:where(:scope, *) {
  color: #1565c0;
  font-size: 0.95rem;
  margin: 0 0 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.lab-objectives h4:where(:scope, *)::before {
  content: "🎯";
}
.lab-objectives ul:where(:scope, *) {
  margin: 0;
  padding-left: 1.5rem;
}
.lab-objectives li:where(:scope, *) {
  color: #333;
  font-size: 0.9rem;
  margin: 0.4rem 0;
}
/* Lab steps */
.lab-step:where(:scope, *) {
  background: white;
  border: 1px solid #bbdefb;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  position: relative;
  padding-left: 3.5rem;
}
.lab-step p:where(:scope, *) {
  color: #555;
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}
/* Lab checkpoints */
.lab-checkpoint:where(:scope, *) {
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
}
.lab-checkpoint h4:where(:scope, *) {
  color: #2e7d32;
  font-size: 0.95rem;
  margin: 0 0 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.lab-checkpoint h4:where(:scope, *)::before {
  content: "✓";
  background: #4caf50;
  color: white;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}
.lab-checkpoint ul:where(:scope, *) {
  margin: 0;
  padding-left: 1.5rem;
}
.lab-checkpoint li:where(:scope, *) {
  color: #33691e;
  font-size: 0.9rem;
  margin: 0.3rem 0;
}
/* Lab extensions/challenges */
.lab-extensions:where(:scope, *) {
  background: #fff3e0;
  border: 1px solid #ffcc80;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
}
/* Lab troubleshooting */
.lab-troubleshooting:where(:scope, *) {
  background: #ffebee;
  border: 1px solid #ffcdd2;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
}
/* Lab equipment list */
.lab-equipment:where(:scope, *) {
  background: #f5f5f5;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
/* LAB-UX-1: flat lab and grading surfaces */
.practical-lab:where(:scope, *) {
  border: 1px solid var(--flat-border, #dbdcdd);
  border-top: 4px solid var(--interactive-lab, #7b3f98);
  border-radius: 8px;
  background: var(--flat-surface, #ffffff);
  box-shadow: none;
}
.practical-lab:where(:scope, *)::before {
  position: static;
  display: inline-flex;
  width: fit-content;
  margin-bottom: 12px;
  padding: 4px 8px;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: 6px;
  background: var(--flat-surface-muted, #f7f8fa);
  box-shadow: none;
  color: var(--interactive-lab-ink, #592c6d);
  letter-spacing: 0.04em;
}
.practical-lab-header:where(:scope, *) {
  display: grid;
  gap: 10px;
  margin-top: 0;
  border-bottom-color: var(--flat-border, #dbdcdd);
}
.practical-lab h2:where(:scope, *),
.practical-lab h3:where(:scope, *),
.lab-objectives h4:where(:scope, *),
.lab-checkpoint h4:where(:scope, *) {
  color: var(--flat-text, #21242c);
}
.lab-progress-bar:where(:scope, *) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}
.lab-progress-bar .progress-track:where(:scope, *) {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--flat-control-bg, #e7ebf0);
}
.lab-progress-bar .progress-fill:where(:scope, *) {
  height: 100%;
  border-radius: inherit;
  background: var(--flat-accent, #1865f2);
  transition: width 0.2s ease;
}
.lab-completed .lab-progress-bar .progress-fill:where(:scope, *) {
  background: #2e7d32;
}
.lab-progress-bar .progress-text:where(:scope, *) {
  color: var(--flat-text-muted, #475774);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}
.lab-progress-reset:where(:scope, *) {
  min-height: 32px;
  padding: 5px 9px;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: 6px;
  background: var(--flat-surface, #ffffff);
  color: var(--flat-text, #21242c);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 750;
}
.lab-progress-reset:hover:where(:scope, *),
.lab-progress-reset:focus:where(:scope, *) {
  border-color: var(--flat-accent, #1865f2);
  color: #164ca7;
}
.lab-objectives:where(:scope, *),
.lab-step:where(:scope, *),
.lab-checkpoint:where(:scope, *) {
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: 8px;
  background: var(--flat-surface-muted, #f7f8fa);
}
.lab-step:where(:scope, *) {
  padding-left: 3.25rem;
}
.lab-objectives li:where(:scope, *),
.lab-checkpoint li:where(:scope, *) {
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--flat-text, #21242c);
}
.lab-objectives li.completed:where(:scope, *),
.lab-checkpoint li.completed:where(:scope, *) {
  border-color: #b8d9c1;
  background: #f1f8f4;
  color: #255c30;
}
.lab-objectives input.lab-checkbox:where(:scope, *),
.lab-checkpoint input.lab-checkbox:where(:scope, *) {
  width: 18px;
  height: 18px;
  margin: 0 8px 0 0;
  accent-color: var(--flat-accent, #1865f2);
  vertical-align: middle;
}
.lab-objectives input.lab-checkbox:focus-visible:where(:scope, *),
.lab-checkpoint input.lab-checkbox:focus-visible:where(:scope, *),
.lab-progress-reset:focus-visible:where(:scope, *),
.lab-button:focus-visible:where(:scope, *),
.lab-submission-form input:focus-visible:where(:scope, *),
.lab-submission-form textarea:focus-visible:where(:scope, *),
.lab-grading-form input:focus-visible:where(:scope, *),
.lab-grading-form textarea:focus-visible:where(:scope, *) {
  outline: 3px solid rgba(24, 101, 242, 0.25);
  outline-offset: 2px;
}
.lab-submission:where(:scope, *),
.lab-grading:where(:scope, *),
.lab-auth-required:where(:scope, *),
.lab-access-denied:where(:scope, *) {
  display: grid;
  gap: 16px;
  margin: 1.5rem 0;
  padding: 18px;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: 8px;
  background: var(--flat-surface, #ffffff);
  color: var(--flat-text, #21242c);
}
.lab-submission-header:where(:scope, *),
.lab-grading-header:where(:scope, *) {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--flat-border, #dbdcdd);
}
.lab-submission-header h3:where(:scope, *),
.lab-grading-header h3:where(:scope, *),
.lab-auth-required h3:where(:scope, *) {
  margin: 0;
  color: var(--flat-text, #21242c);
}
.lab-type-badge:where(:scope, *),
.lab-student-name:where(:scope, *),
.lab-criterion-weight:where(:scope, *) {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: 999px;
  background: var(--flat-surface-muted, #f7f8fa);
  color: var(--flat-text-muted, #475774);
  font-size: 0.78rem;
  font-weight: 750;
}
.lab-submission-form:where(:scope, *),
.lab-grading-form:where(:scope, *),
.lab-submission-details:where(:scope, *) {
  display: grid;
  gap: 14px;
}
.lab-form-group:where(:scope, *),
.lab-detail-item:where(:scope, *),
.lab-criterion:where(:scope, *) {
  display: grid;
  gap: 8px;
}
.lab-form-group label:where(:scope, *),
.lab-criterion-header label:where(:scope, *),
.lab-detail-item strong:where(:scope, *) {
  color: var(--flat-text, #21242c);
  font-weight: 750;
}
.lab-submission-form input:where(:scope, *),
.lab-submission-form textarea:where(:scope, *),
.lab-grading-form input:where(:scope, *),
.lab-grading-form textarea:where(:scope, *) {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: 6px;
  background: var(--flat-surface, #ffffff);
  color: var(--flat-text, #21242c);
  font: inherit;
}
.lab-form-group small:where(:scope, *),
.lab-detail-item p:where(:scope, *) {
  color: var(--flat-text-muted, #475774);
}
.lab-self-assessment:where(:scope, *) {
  display: grid;
  gap: 8px;
}
.lab-self-assessment .lab-checkbox:where(:scope, *) {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 9px 10px;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: 6px;
  background: var(--flat-surface-muted, #f7f8fa);
}
.lab-self-assessment .lab-checkbox input:where(:scope, *) {
  width: 18px;
  min-width: 18px;
  margin-top: 2px;
  accent-color: var(--flat-accent, #1865f2);
}
.lab-form-actions:where(:scope, *) {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.lab-button:where(:scope, *) {
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: 6px;
  background: var(--flat-surface, #ffffff);
  color: var(--flat-text, #21242c);
  cursor: pointer;
  font: inherit;
  font-weight: 750;
}
.lab-button-primary:where(:scope, *) {
  border-color: var(--flat-accent, #1865f2);
  background: var(--flat-accent, #1865f2);
  color: #ffffff;
}
.lab-button-secondary:where(:scope, *) {
  background: var(--flat-surface-muted, #f7f8fa);
}
.lab-button:hover:where(:scope, *),
.lab-button:focus:where(:scope, *) {
  border-color: var(--flat-accent, #1865f2);
}
.lab-button-primary:hover:where(:scope, *),
.lab-button-primary:focus:where(:scope, *) {
  background: #134fbf;
  color: #ffffff;
}
.lab-button:disabled:where(:scope, *),
.lab-button[aria-disabled="true"]:where(:scope, *) {
  border-color: var(--flat-border, #dbdcdd);
  background: var(--flat-control-bg, #e7ebf0);
  color: var(--flat-text-subtle, #646b7a);
  cursor: not-allowed;
}
.lab-status:where(:scope, *) {
  padding: 10px 12px;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: 6px;
  background: var(--flat-surface-muted, #f7f8fa);
  color: var(--flat-text-muted, #475774);
  font-size: 0.9rem;
}
.lab-status-error:where(:scope, *),
.lab-access-denied:where(:scope, *) {
  border-color: #efb8b2;
  background: #fff8f7;
  color: #9f241d;
}
.lab-status-info:where(:scope, *) {
  border-color: #bfd2f8;
  background: #f4f7ff;
  color: #164ca7;
}
.lab-criterion:where(:scope, *) {
  padding: 12px;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: 8px;
  background: var(--flat-surface-muted, #f7f8fa);
}
.lab-criterion-header:where(:scope, *),
.lab-criterion-input:where(:scope, *) {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}
.lab-criterion-input input:where(:scope, *) {
  max-width: 120px;
}
.lab-criterion-max:where(:scope, *) {
  color: var(--flat-text-muted, #475774);
  font-weight: 750;
}
.lab-grade-summary:where(:scope, *) {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: 8px;
  background: var(--flat-surface-muted, #f7f8fa);
}
.lab-grade-total:where(:scope, *),
.lab-grade-letter:where(:scope, *) {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--flat-text, #21242c);
  font-weight: 800;
}
.lab-grade-letter:where(:scope, *) {
  min-width: 42px;
  min-height: 34px;
  justify-content: center;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: 6px;
  background: var(--flat-surface, #ffffff);
}
.lab-auth-icon:where(:scope, *) {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  background: #fff0ee;
  color: #9f241d;
  font-weight: 850;
}
.lab-auth-required p:where(:scope, *) {
  margin: 0;
  color: var(--flat-text-muted, #475774);
}
/* ===== CAPSTONE PROJECT CARDS ===== */

.capstone-project:where(:scope, *) {
  background: linear-gradient(135deg, #f3e5f5 0%, #fcf5ff 100%);
  border: 2px solid #ce93d8;
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0;
}
/* ===== COMPARISON TABLES (Enhanced) ===== */

.comparison-table-wrapper:where(:scope, *) {
  margin: 1.5rem 0;
  overflow-x: auto;
}
.comparison-table:where(:scope, *) {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.comparison-table thead:where(:scope, *) {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
}
.comparison-table th:where(:scope, *) {
  color: white;
  font-weight: 600;
  padding: 1rem;
  text-align: left;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}
/* Body row headings sit on white and alternating #fafafa rows; reserve the
   white ink above for the dark table head. */
.comparison-table tbody th[scope="row"]:where(:scope, *) {
  color: var(--flat-text);
}
.comparison-table th:first-child:where(:scope, *) {
  border-top-left-radius: 12px;
}
.comparison-table th:last-child:where(:scope, *) {
  border-top-right-radius: 12px;
}
.comparison-table td:where(:scope, *) {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid #e0e0e0;
  font-size: 0.9rem;
  vertical-align: top;
}
.comparison-table tbody tr:last-child td:where(:scope, *) {
  border-bottom: none;
}
.comparison-table tbody tr:last-child td:first-child:where(:scope, *) {
  border-bottom-left-radius: 12px;
}
.comparison-table tbody tr:last-child td:last-child:where(:scope, *) {
  border-bottom-right-radius: 12px;
}
.comparison-table tbody tr:nth-child(even):where(:scope, *) {
  background: #fafafa;
}
.comparison-table tbody tr:hover:where(:scope, *) {
  background: #f0f7ff;
}
/* Comparison indicators */
.comparison-good:where(:scope, *) {
  color: #27ae60;
  font-weight: 500;
}
/* ===== RESPONSIVE ADJUSTMENTS ===== */

@media (max-width: 768px) {
  .comic-strip:where(:scope, *) {
    grid-template-columns: 1fr;
  }

  .executive-metrics:where(:scope, *) {
    grid-template-columns: repeat(2, 1fr);
  }

  .lab-step:where(:scope, *) {
    padding-left: 1rem;
    padding-top: 3rem;
  }

  .lab-step-number:where(:scope, *) {
    left: 1rem;
    top: 0.75rem;
  }

  .paper-links:where(:scope, *) {
    flex-direction: column;
  }

  .paper-link:where(:scope, *) {
    justify-content: center;
  }

  .capstone-project-header:where(:scope, *) {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .case-study-stats:where(:scope, *) {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .kids-panel-header:where(:scope, *) {
    padding: 0.875rem 1rem;
  }

  .kids-panel-body:where(:scope, *) {
    padding: 1rem;
  }

  .executive-summary:where(:scope, *) {
    padding: 1rem;
  }

  .practical-lab:where(:scope, *) {
    padding: 1rem;
  }

  .scholarly-references:where(:scope, *) {
    padding: 1rem;
  }

  .executive-metrics:where(:scope, *) {
    grid-template-columns: 1fr;
  }

  .lab-meta:where(:scope, *) {
    flex-direction: column;
    gap: 0.5rem;
  }
}
/* ===== PRINT STYLES ===== */

@media print {
  .kids-panel:where(:scope, *),
  .executive-summary:where(:scope, *),
  .practical-lab:where(:scope, *),
  .scholarly-references:where(:scope, *),
  .capstone-project:where(:scope, *) {
    break-inside: avoid;
    box-shadow: none;
    border-width: 1px;
  }

  .kids-panel.collapsed .kids-panel-body:where(:scope, *) {
    display: block;
  }

  .paper-links:where(:scope, *) {
    display: none;
  }
}
/* =============================================
   IoT Class - Interactive Features
   Merged from: image-versions.css,
glossary-tooltips.css,
progress-tracker.css,
chapter-quiz.css
   ============================================= */

/* --- Section: Image Version Switcher (was image-versions.css) --- */
/*=====================================
  IMAGE VERSION SWITCHER STYLES
  For selecting between different image versions/sources

  IEEE Color Palette:
  - Navy:   #2C3E50
  - Teal:   #16A085
  - Orange: #E67E22
  - Gray:   #7F8C8D
=====================================*/

/* ===== CSS CUSTOM PROPERTIES ===== */
:root:where(:scope) {
  /* IEEE Color Palette */
  --vs-navy: #2c3e50;
  --vs-teal: #16a085;
  --vs-orange: #e67e22;
  --vs-gray: #7f8c8d;

  /* Derived colors */
  --vs-teal-light: #1abc9c;
  --vs-gray-light: #95a5a6;

  /* UI colors */
  --vs-bg: #ffffff;
  --vs-bg-hover: #f8f9fa;
  --vs-border: #e0e0e0;
  --vs-text: #333333;
  --vs-text-muted: #666666;
  --vs-shadow: rgba(0, 0, 0, 0.15);
  --vs-shadow-lg: rgba(0, 0, 0, 0.25);

  /* Animation timing */
  --vs-transition-fast: 0.15s ease;
  --vs-transition: 0.25s ease;
}
/* ===== VERSION SWITCHER BUTTON/ICON ===== */
.version-switcher:where(:scope, *) {
  position: relative;
  display: inline-block;
}
/* Container class used by iotclass-versions.js */
.version-switcher-container:where(:scope, *) {
  position: relative;
}
/* Show button on figure hover */
.version-switcher:hover .version-switcher-trigger:where(:scope, *),
[id^="fig-"]:hover .version-switcher-trigger:where(:scope, *),
.version-switcher:hover .version-switcher-btn:where(:scope, *),
figure:hover .version-switcher-btn:where(:scope, *),
.quarto-figure:hover .version-switcher-btn:where(:scope, *),
[id^="fig-"]:hover .version-switcher-btn:where(:scope, *) {
  opacity: 1;
  transform: scale(1);
}
/* Alias for version-switcher-btn (used by iotclass-versions.js) */
.version-switcher-btn:where(:scope, *) {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 32px;
  height: 32px;
  padding: 4px 8px;
  background: var(--vs-navy);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity var(--vs-transition),
    transform var(--vs-transition),
    background var(--vs-transition-fast);
  box-shadow: 0 2px 8px var(--vs-shadow);
}
.version-switcher-btn:hover:where(:scope, *) {
  background: var(--vs-teal);
  transform: scale(1.05);
  box-shadow: 0 4px 12px var(--vs-shadow-lg);
}
.version-switcher-btn:active:where(:scope, *) {
  transform: scale(0.98);
}
.version-switcher-btn:focus:where(:scope, *) {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(22, 160, 133, 0.4),
    0 2px 8px var(--vs-shadow);
}
.version-switcher-btn .version-icon:where(:scope, *) {
  font-size: 14px;
}
.version-switcher-btn .version-count:where(:scope, *) {
  font-size: 11px;
  background: var(--vs-teal);
  padding: 1px 5px;
  border-radius: 10px;
}
/* Button hover state */
.version-switcher-trigger:hover:where(:scope, *) {
  background: var(--vs-teal);
  transform: scale(1.05);
  box-shadow: 0 4px 12px var(--vs-shadow-lg);
}
/* Button active/pressed state */
.version-switcher-trigger:active:where(:scope, *) {
  transform: scale(0.98);
}
/* Button focus state for accessibility */
.version-switcher-trigger:focus:where(:scope, *) {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(22, 160, 133, 0.4),
    0 2px 8px var(--vs-shadow);
}
/* Version switcher icon (layers/stack icon using CSS) */
.version-switcher-icon:where(:scope, *) {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  width: 14px;
  height: 12px;
}
/* Alternative: Unicode icon */
.version-switcher-trigger[data-icon="layers"]:where(:scope, *)::before {
  content: "\229E"; /* Squared plus */
  font-size: 16px;
  line-height: 1;
}
/* Version count badge */
.version-switcher-count:where(:scope, *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 16px;
  height: 16px;
  padding: 0 4px;

  background: rgba(255, 255, 255, 0.25);
  border-radius: 8px;

  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
/* ===== VERSION DROPDOWN PANEL ===== */
.version-switcher-dropdown:where(:scope, *) {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1000;

  min-width: 280px;
  max-width: 380px;
  max-height: 400px;

  margin-top: 8px;

  background: var(--vs-bg);
  border: 1px solid var(--vs-border);
  border-radius: 8px;

  box-shadow: 0 8px 24px var(--vs-shadow-lg);

  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity var(--vs-transition),
    visibility var(--vs-transition),
    transform var(--vs-transition);

  overflow: hidden;
}
/* Show dropdown when active */
.version-switcher.is-open .version-switcher-dropdown:where(:scope, *) {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Dropdown header */
.version-switcher-header:where(:scope, *) {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 12px 16px;

  background: var(--vs-navy);
  color: #ffffff;

  font-weight: 600;
  font-size: 14px;
}
/* Dropdown body/content */
.version-switcher-body:where(:scope, *) {
  max-height: 320px;
  padding: 12px;
  overflow-y: auto;
}
/* Scrollbar styling for dropdown */
.version-switcher-body:where(:scope, *)::-webkit-scrollbar {
  width: 6px;
}
/* ===== VERSION LIST ===== */
.version-switcher-list:where(:scope, *) {
  display: flex;
  flex-direction: column;
  gap: 6px;

  list-style: none;
  margin: 0;
  padding: 0;
}
/* Version item */
.version-switcher-item:where(:scope, *) {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 12px;

  background: var(--vs-bg);
  border: 1px solid var(--vs-border);
  border-radius: 6px;

  cursor: pointer;
  transition:
    background var(--vs-transition-fast),
    border-color var(--vs-transition-fast),
    transform var(--vs-transition-fast);
}
/* Selected/current version */
.version-switcher-item.is-current:where(:scope, *),
.version-switcher-item.is-selected:where(:scope, *) {
  background: #e8f6f3;
  border-color: var(--vs-teal);
}
.version-switcher-item.is-selected:hover:where(:scope, *) {
  background: #d4ede8;
}
/* Radio input (hidden visually but accessible) */
.version-switcher-item input[type="radio"]:where(:scope, *) {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
/* Custom radio indicator */
.version-switcher-radio:where(:scope, *) {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 18px;
  flex-shrink: 0;

  background: #ffffff;
  border: 2px solid var(--vs-border);
  border-radius: 50%;

  transition:
    border-color var(--vs-transition-fast),
    background var(--vs-transition-fast);
}
.version-switcher-item.is-selected .version-switcher-radio:where(:scope, *) {
  border-color: var(--vs-teal);
  background: var(--vs-teal);
}
.version-switcher-item.is-selected .version-switcher-radio:where(:scope, *)::after {
  opacity: 1;
  transform: scale(1);
}
/* Version item content */
.version-switcher-content:where(:scope, *) {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* ===== VERSION TYPE BADGES ===== */
.version-switcher-badge:where(:scope, *) {
  display: inline-flex;
  align-items: center;
  gap: 4px;

  padding: 3px 8px;

  border-radius: 4px;

  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;

  white-space: nowrap;
  flex-shrink: 0;
}
/* Original image badge - Navy */
.version-switcher-badge--original:where(:scope, *) {
  background: rgba(44, 62, 80, 0.15);
  color: var(--vs-navy);
}
/* Mermaid SVG badge - Teal */
.version-switcher-badge--mermaid:where(:scope, *) {
  background: rgba(22, 160, 133, 0.15);
  color: var(--vs-teal);
}
/* DrawIO badge - Orange */
.version-switcher-badge--drawio:where(:scope, *) {
  background: rgba(230, 126, 34, 0.15);
  color: var(--vs-orange);
}
/* Academic source badge - Gray */
.version-switcher-badge--academic:where(:scope, *) {
  background: rgba(127, 140, 141, 0.15);
  color: var(--vs-gray);
}
/* SVG badge */
.version-switcher-badge--svg:where(:scope, *) {
  background: rgba(155, 89, 182, 0.15);
  color: #8e44ad;
}
/* PNG/JPG badge */
.version-switcher-badge--raster:where(:scope, *) {
  background: rgba(52, 152, 219, 0.15);
  color: #2980b9;
}
/* Badge with icon */
.version-switcher-badge-icon:where(:scope, *) {
  font-size: 11px;
  line-height: 1;
}
/* ===== VERSION SECTION GROUPS ===== */
.version-switcher-section:where(:scope, *) {
  margin-bottom: 16px;
}
/* ===== DROPDOWN FOOTER/ACTIONS ===== */
.version-switcher-footer:where(:scope, *) {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;

  padding: 12px 16px;

  border-top: 1px solid var(--vs-border);
  background: var(--vs-bg-hover);
}
/* ===== CURRENT VERSION INDICATOR ===== */
.version-switcher-current:where(:scope, *) {
  display: flex;
  align-items: center;
  gap: 6px;

  padding: 6px 10px;

  background: rgba(22, 160, 133, 0.1);
  border-radius: 4px;

  font-size: 11px;
  color: var(--vs-teal);
}
/* ===== BACKDROP FOR MODAL BEHAVIOR ===== */
.version-switcher-backdrop:where(:scope, *) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  z-index: 999;

  background: rgba(0, 0, 0, 0.3);

  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--vs-transition),
    visibility var(--vs-transition);
}
.version-switcher-backdrop.is-visible:where(:scope, *) {
  opacity: 1;
  visibility: visible;
}
/* Version switcher animations */
@keyframes versionSwitcherFadeIn-c5cd993e9229da9f {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes versionSwitcherSlideIn-dfd94fc95155e0a1 {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Transition state for image switching */
.version-switcher-transition img:where(:scope, *) {
  transition: opacity 300ms ease;
}
/* ===== PREVIEW THUMBNAIL ===== */
.version-switcher-preview:where(:scope, *) {
  width: 48px;
  height: 36px;
  flex-shrink: 0;

  border-radius: 4px;
  overflow: hidden;

  background: var(--vs-bg-hover);
  border: 1px solid var(--vs-border);
}
.version-switcher-preview img:where(:scope, *) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.version-switcher-preview--placeholder:where(:scope, *) {
  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--vs-gray-light);
  font-size: 16px;
}
/* ===== RESPONSIVE DESIGN ===== */

/* Tablet and below */
@media (max-width: 768px) {
  .version-switcher-trigger:where(:scope, *) {
    min-width: 40px;
    height: 40px;
    padding: 8px 10px;

    /* Always visible on mobile for better discoverability */
    opacity: 0.85;
    transform: scale(1);
  }

  .version-switcher-dropdown:where(:scope, *) {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;

    min-width: 100%;
    max-width: 100%;
    max-height: 70vh;

    margin-top: 0;
    border-radius: 16px 16px 0 0;

    transform: translateY(100%);
  }

  .version-switcher.is-open .version-switcher-dropdown:where(:scope, *),
  .version-switcher-dropdown.is-visible:where(:scope, *) {
    transform: translateY(0);
  }

  .version-switcher-header:where(:scope, *) {
    padding: 16px 20px;
    border-radius: 16px 16px 0 0;
  }

  .version-switcher-body:where(:scope, *) {
    padding: 16px;
    max-height: calc(70vh - 140px);
  }

  .version-switcher-item:where(:scope, *) {
    padding: 14px 16px;

    /* Touch-friendly target size (44px minimum) */
    min-height: 54px;
  }

  .version-switcher-footer:where(:scope, *) {
    padding: 16px 20px;
  }

  .version-switcher-apply:where(:scope, *) {
    flex: 1;
    padding: 12px 20px;
    font-size: 14px;
  }
}
/* Small mobile */
@media (max-width: 480px) {
  .version-switcher-trigger:where(:scope, *) {
    top: 4px;
    right: 4px;
    min-width: 36px;
    height: 36px;
  }

  .version-switcher-count:where(:scope, *) {
    display: none;
  }

  .version-switcher-dropdown:where(:scope, *) {
    max-height: 80vh;
  }

  .version-switcher-item:where(:scope, *) {
    gap: 8px;
  }

  .version-switcher-preview:where(:scope, *) {
    width: 40px;
    height: 30px;
  }

  .version-switcher-badge:where(:scope, *) {
    padding: 2px 6px;
    font-size: 9px;
  }
}
/* ===== INTEGRATION WITH QUARTO FIGURES ===== */

/* Ensure figure container can hold positioned elements */
figure.version-switcher:where(:scope, *),
[id^="fig-"].version-switcher:where(:scope, *) {
  position: relative;
}
/* Style adjustments for figures with version switcher */
figure.version-switcher img:where(:scope, *) {
  transition: opacity var(--vs-transition);
}
/* Loading spinner overlay */
.version-switcher-loading:where(:scope, *) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  display: none;

  width: 32px;
  height: 32px;

  border: 3px solid var(--vs-border);
  border-top-color: var(--vs-teal);
  border-radius: 50%;

  animation: vs-spin-c9cec6186a1a39e3 0.8s linear infinite;
}
figure.version-switcher.is-loading .version-switcher-loading:where(:scope, *) {
  display: block;
}

@keyframes vs-spin-c9cec6186a1a39e3 {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
/* ===== PRINT STYLES ===== */
@media print {
  .version-switcher-trigger:where(:scope, *),
  .version-switcher-dropdown:where(:scope, *),
  .version-switcher-backdrop:where(:scope, *) {
    display: none !important;
  }
}
/* ===== ANIMATION KEYFRAMES ===== */
@keyframes vs-fade-in-e350695ac3b44d45 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes vs-slide-up-978b248d61aa2c43 {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ===== UTILITY CLASSES ===== */
.version-switcher--compact .version-switcher-trigger:where(:scope, *) {
  min-width: 28px;
  height: 28px;
  padding: 4px 6px;
  font-size: 12px;
}
/* High contrast mode support */
@media (prefers-contrast: high) {
  .version-switcher-trigger:where(:scope, *) {
    border: 2px solid #ffffff;
  }

  .version-switcher-item:where(:scope, *) {
    border-width: 2px;
  }

  .version-switcher-item.is-current:where(:scope, *),
  .version-switcher-item.is-selected:where(:scope, *) {
    border-width: 3px;
  }
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .version-switcher-trigger:where(:scope, *),
  .version-switcher-dropdown:where(:scope, *),
  .version-switcher-item:where(:scope, *),
  .version-switcher-backdrop:where(:scope, *),
  .version-switcher-radio:where(:scope, *)::after {
    transition: none;
  }

  .version-switcher-loading:where(:scope, *) {
    animation: none;
  }
}
/* ===== VERSION SWITCHER PANEL (used by iotclass-versions.js) ===== */
.version-switcher-panel:where(:scope, *) {
  position: fixed;
  z-index: 10000;
  min-width: 280px;
  max-width: 380px;
  max-height: 70vh;
  background: var(--vs-bg, #ffffff);
  border: 1px solid var(--vs-border, #e0e0e0);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
}
.version-switcher-panel .panel-header:where(:scope, *) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--vs-navy, #2c3e50);
  color: #ffffff;
}
.version-switcher-panel .panel-title:where(:scope, *) {
  font-weight: 600;
  font-size: 14px;
}
.version-switcher-panel .panel-close:where(:scope, *) {
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 20px;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.version-switcher-panel .panel-close:hover:where(:scope, *) {
  opacity: 1;
}
.version-switcher-panel .panel-info:where(:scope, *) {
  padding: 12px 16px;
  border-bottom: 1px solid var(--vs-border, #e0e0e0);
  font-size: 12px;
  color: var(--vs-text-muted, #666666);
}
.version-switcher-panel .panel-info strong:where(:scope, *) {
  color: var(--vs-text, #333333);
  word-break: break-word;
}
.version-switcher-panel .panel-options:where(:scope, *) {
  max-height: 300px;
  overflow-y: auto;
  padding: 8px;
}
.version-switcher-option:where(:scope, *) {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  border: 2px solid transparent;
}
.version-switcher-option:hover:where(:scope, *) {
  background: var(--vs-bg-hover, #f8f9fa);
}
.version-switcher-option--selected:where(:scope, *) {
  background: rgba(22, 160, 133, 0.1);
  border-color: var(--vs-teal, #16a085);
}
.version-switcher-option .option-icon:where(:scope, *) {
  font-size: 18px;
  flex-shrink: 0;
}
.version-switcher-option .option-content:where(:scope, *) {
  flex: 1;
  min-width: 0;
}
.version-switcher-option .option-label:where(:scope, *) {
  font-weight: 500;
  font-size: 13px;
  color: var(--vs-text, #333333);
  display: block;
}
.version-switcher-option .option-description:where(:scope, *) {
  font-size: 11px;
  color: var(--vs-text-muted, #666666);
  display: block;
  margin-top: 2px;
}
.version-switcher-option .option-preview:where(:scope, *) {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid var(--vs-border, #e0e0e0);
  flex-shrink: 0;
}
.version-switcher-option .option-check:where(:scope, *) {
  color: var(--vs-teal, #16a085);
  font-size: 16px;
  flex-shrink: 0;
}
.version-switcher-panel .panel-footer:where(:scope, *) {
  padding: 12px 16px;
  border-top: 1px solid var(--vs-border, #e0e0e0);
  display: flex;
  justify-content: flex-end;
}
.version-switcher-panel .panel-reset:where(:scope, *) {
  background: transparent;
  border: 1px solid var(--vs-border, #e0e0e0);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  color: var(--vs-text-muted, #666666);
  transition: all 0.15s;
}
.version-switcher-panel .panel-reset:hover:where(:scope, *) {
  background: var(--vs-bg-hover, #f8f9fa);
  color: var(--vs-text, #333333);
}
/* Backdrop for modal-like behavior */
.version-switcher-backdrop:where(:scope, *) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9999;
}
/* --- Section: Glossary Tooltips (was glossary-tooltips.css) --- */
/**
 * Glossary Tooltip Styles
 * Interactive hover definitions for IoT terminology
 */

/* Glossary term styling - underline indicates clickable/hoverable */
.glossary-term:where(:scope, *) {
  border-bottom: 1px dotted #16a085;
  cursor: help;
  color: inherit;
  transition: border-color 0.2s ease;
}
.glossary-term:hover:where(:scope, *),
.glossary-term:focus:where(:scope, *) {
  border-bottom-color: #e67e22;
  outline: none;
}
.glossary-term:focus-visible:where(:scope, *) {
  outline: 3px solid #155eef;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .glossary-tooltip:where(:scope, *), .glossary-tooltip *:where(:scope, *) {
    animation: none !important;
    transition: none !important;
  }
}
.glossary-pronunciation-button:where(:scope, *) {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  margin-inline-start: .15rem;
  padding: 0 .2rem;
  border: 1px solid #94a3b8;
  border-radius: .3rem;
  background: #fff;
  color: #1e293b;
  cursor: pointer;
  vertical-align: middle;
}
.glossary-pronunciation-button:focus-visible:where(:scope, *) {
  outline: 3px solid #155eef;
  outline-offset: 2px;
}
/* Tooltip container */
.glossary-tooltip:where(:scope, *) {
  position: absolute;
  z-index: 1000;
  max-width: 320px;
  padding: 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border: 1px solid #e5e5e5;
  opacity: 0;
  visibility: hidden;
  transform: translateY(5px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;
  pointer-events: none;
}
.glossary-tooltip.visible:where(:scope, *) {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
/* Tooltip header */
.glossary-tooltip-header:where(:scope, *) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  border-radius: 8px 8px 0 0;
}
.glossary-tooltip-term:where(:scope, *) {
  font-weight: bold;
  color: white;
  font-size: 14px;
}
.glossary-tooltip-link:where(:scope, *) {
  font-size: 11px;
  color: #85c1e9;
  text-decoration: none;
  transition: color 0.2s ease;
}
.glossary-tooltip-link:hover:where(:scope, *) {
  color: white;
  text-decoration: underline;
}
/* Tooltip content */
.glossary-tooltip-definition:where(:scope, *) {
  padding: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #2c3e50;
  border-bottom: 1px solid #e5e5e5;
}
.glossary-tooltip-simple:where(:scope, *) {
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.4;
  color: #666;
  background: #f8f9fa;
  border-radius: 0 0 8px 8px;
}
.glossary-tooltip-simple:where(:scope, *)::before {
  content: "In simple terms: ";
  font-weight: 600;
  color: #00695c;
}
/* Mobile adjustments */
@media (max-width: 768px) {
  .glossary-tooltip:where(:scope, *) {
    max-width: 280px;
    left: 10px !important;
    right: 10px;
  }
}
/* Print - hide tooltips */
@media print {
  .glossary-tooltip:where(:scope, *) {
    display: none !important;
  }

  .glossary-term:where(:scope, *) {
    border-bottom: none;
  }
}
/* --- Section: Progress Tracker (was progress-tracker.css) --- */
/**
 * Progress Tracker Styles
 * Styling for learning progress,
milestones,
and achievements
 */

/* Progress Badge */
.progress-badge:where(:scope, *) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--flat-border-strong, #cfd4da);
  background: var(--flat-surface, #ffffff);
  color: #0f5f55;
  padding: 4px 10px;
  border-radius: var(--flat-radius-md, 6px);
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease;
  margin-left: 10px;
}
.progress-badge:hover:where(:scope, *),
.progress-badge:focus-visible:where(:scope, *) {
  border-color: var(--flat-accent, #1865f2);
  background: var(--flat-control-hover, #e7ebf0);
  outline: none;
}
.progress-score:where(:scope, *) {
  font-size: 14px;
}
.progress-label:where(:scope, *) {
  font-size: 10px;
  opacity: 0.9;
}
/* Milestone Notification */
.milestone-notification:where(:scope, *) {
  position: fixed;
  bottom: 20px;
  right: 20px;
  border: 1px solid #d8a15f;
  background: #fff5e8;
  color: #7a4a12;
  padding: 15px 20px;
  border-radius: var(--flat-radius-lg, 8px);
  display: flex;
  align-items: center;
  gap: 15px;
  transform: translateX(120%);
  transition: transform 0.3s ease;
  z-index: 10000;
}
.milestone-notification.show:where(:scope, *) {
  transform: translateX(0);
}
.milestone-icon:where(:scope, *) {
  font-size: 32px;
}
.milestone-icon svg:where(:scope, *) {
  display: block;
  width: 1em;
  height: 1em;
}
.milestone-title:where(:scope, *) {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.9;
}
.milestone-name:where(:scope, *) {
  font-size: 16px;
  font-weight: bold;
  margin: 3px 0;
}
.milestone-desc:where(:scope, *) {
  font-size: 12px;
  opacity: 0.9;
}
/* Progress Modal */
.progress-modal:where(:scope, *) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  animation: fadeIn-c28f8722c97cbd1a 0.2s ease;
}

@keyframes fadeIn-c28f8722c97cbd1a {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.progress-modal-content:where(:scope, *) {
  background: var(--flat-surface, #ffffff);
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: var(--flat-radius-lg, 8px);
  padding: 1.5rem;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  animation: slideUp-b9dfc7b679fbad28 0.3s ease;
}

@keyframes slideUp-b9dfc7b679fbad28 {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.progress-modal-close:where(:scope, *) {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: var(--flat-radius-md, 6px);
  background: var(--flat-surface-muted, #f7f8fa);
  font-size: 20px;
  cursor: pointer;
  color: var(--flat-text-muted, #475774);
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}
.progress-modal-close:hover:where(:scope, *),
.progress-modal-close:focus-visible:where(:scope, *) {
  background: var(--flat-control-hover, #e7ebf0);
  color: var(--flat-text, #21242c);
  outline: 2px solid var(--flat-accent, #1865f2);
  outline-offset: 2px;
}
.progress-modal h3:where(:scope, *) {
  margin: 0 0 20px 0;
  color: var(--flat-text, #21242c);
  font-size: 22px;
}
.progress-modal h4:where(:scope, *) {
  margin: 20px 0 15px 0;
  color: var(--flat-text, #21242c);
  font-size: 16px;
}
/* Progress Stats Grid */
/* Milestone List */
.milestone-list:where(:scope, *) {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.milestone-item:where(:scope, *) {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff5e8;
  padding: 12px 15px;
  border: 1px solid #d8a15f;
  border-radius: var(--flat-radius-md, 6px);
}
.milestone-info:where(:scope, *) {
  flex: 1;
}
.milestone-info strong:where(:scope, *) {
  color: var(--flat-text, #21242c);
}
.milestone-info small:where(:scope, *) {
  color: var(--flat-text-muted, #475774);
}
/* Progress Footer */
.progress-footer:where(:scope, *) {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #e5e5e5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.progress-footer small:where(:scope, *) {
  color: var(--flat-text-muted, #475774);
}
.progress-reset:where(:scope, *) {
  background: #ffffff;
  border: 1px solid #e74c3c;
  color: #e74c3c;
  padding: 6px 12px;
  border-radius: var(--flat-radius-md, 6px);
  font-size: 12px;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}
.progress-reset:hover:where(:scope, *),
.progress-reset:focus-visible:where(:scope, *) {
  background: #e74c3c;
  color: white;
  outline: none;
}
/* Mobile Adjustments */
@media (max-width: 768px) {
  .progress-badge:where(:scope, *) {
    padding: 3px 8px;
    font-size: 11px;
  }

  .milestone-notification:where(:scope, *) {
    left: 10px;
    right: 10px;
    bottom: 10px;
  }

  .progress-modal-content:where(:scope, *) {
    padding: 20px;
    margin: 10px;
  }

  .progress-stats:where(:scope, *) {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .stat-value:where(:scope, *) {
    font-size: 24px;
  }
}
/* --- Section: Chapter Quiz (was chapter-quiz.css) --- */
/**
 * Chapter Quiz Styles
 * Comprehensive styling for multi-question chapter quizzes
 */

/* Main Container */
.chapter-quiz:where(:scope, *) {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}
/* Header */
.cq-header:where(:scope, *) {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 30px;
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  border-radius: 12px;
  color: white;
  margin-bottom: 30px;
}
.cq-title h2:where(:scope, *) {
  margin: 0 0 10px 0;
  font-size: 28px;
}
.cq-description:where(:scope, *) {
  margin: 0;
  opacity: 0.9;
  font-size: 14px;
}
.cq-timer:where(:scope, *) {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-size: 20px;
  font-weight: bold;
  min-width: 100px;
  justify-content: center;
}
.cq-timer-warning:where(:scope, *) {
  animation: pulse-timer-f854f8a144919702 1s ease-in-out infinite;
}

@keyframes pulse-timer-f854f8a144919702 {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
.cq-timer-icon:where(:scope, *) {
  font-size: 24px;
}
/* Progress Bar */
.cq-progress-container:where(:scope, *) {
  margin-bottom: 30px;
}
.cq-progress-bar:where(:scope, *) {
  width: 100%;
  height: 8px;
  background: #ecf0f1;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}
.cq-progress-fill:where(:scope, *) {
  height: 100%;
  background: linear-gradient(90deg, #16a085 0%, #27ae60 100%);
  transition: width 0.3s ease;
}
.cq-progress-text:where(:scope, *) {
  text-align: center;
  font-size: 14px;
  color: #7f8c8d;
  font-weight: 600;
}
/* Question Container */
.cq-question-container:where(:scope, *) {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}
.cq-question-header:where(:scope, *) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #ecf0f1;
}
.cq-question-number:where(:scope, *) {
  font-size: 14px;
  font-weight: 600;
  color: #16a085;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cq-flag-button:where(:scope, *) {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: transparent;
  border: 2px solid #ecf0f1;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #7f8c8d;
  transition: all 0.2s;
}
.cq-flag-button:hover:where(:scope, *) {
  border-color: #3498db;
  color: #3498db;
}
.cq-flag-icon:where(:scope, *) {
  font-size: 16px;
}
.cq-question-text:where(:scope, *) {
  font-size: 18px;
  color: #2c3e50;
  line-height: 1.6;
  margin-bottom: 25px;
}
/* Options */
.cq-options:where(:scope, *) {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cq-option:where(:scope, *) {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px 20px;
  background: #f8f9fa;
  border: 2px solid #ecf0f1;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  font-size: 16px;
  position: relative;
}
.cq-option:hover:where(:scope, *) {
  border-color: #16a085;
  background: #e8f6f3;
}
.cq-option.cq-selected:where(:scope, *) {
  border-color: #16a085;
  background: #d5f4e6;
}
.cq-option-letter:where(:scope, *) {
  width: 36px;
  height: 36px;
  background: #ecf0f1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #2c3e50;
  flex-shrink: 0;
}
.cq-selected .cq-option-letter:where(:scope, *) {
  background: #16a085;
  color: white;
}
.cq-option-text:where(:scope, *) {
  flex: 1;
}
.cq-option-check:where(:scope, *) {
  opacity: 0;
  color: #16a085;
  font-size: 20px;
  transition: opacity 0.2s;
}
.cq-selected .cq-option-check:where(:scope, *) {
  opacity: 1;
}
/* Navigation */
.cq-navigation:where(:scope, *) {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-bottom: 30px;
}
.cq-nav-button:where(:scope, *) {
  padding: 12px 30px;
  background: #2c3e50;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.2s;
}
.cq-nav-button:hover:not(:disabled):where(:scope, *) {
  background: #1a252f;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.cq-nav-button:disabled:where(:scope, *) {
  background: #bdc3c7;
  cursor: not-allowed;
  opacity: 0.5;
}
.cq-nav-button.cq-submit:where(:scope, *) {
  background: #27ae60;
}
.cq-nav-button.cq-submit:hover:where(:scope, *) {
  background: #229954;
}
.cq-nav-button.cq-review:where(:scope, *) {
  background: #3498db;
}
.cq-nav-button.cq-review:hover:where(:scope, *) {
  background: #2874a6;
}
.cq-nav-button.cq-retry:where(:scope, *) {
  background: #e67e22;
}
.cq-nav-button.cq-retry:hover:where(:scope, *) {
  background: #d68910;
}
/* Question Navigator */
.cq-question-navigator:where(:scope, *) {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.cq-nav-title:where(:scope, *) {
  font-size: 14px;
  font-weight: 600;
  color: #7f8c8d;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cq-nav-grid:where(:scope, *) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(45px, 1fr));
  gap: 10px;
}
.cq-nav-number:where(:scope, *) {
  width: 45px;
  height: 45px;
  background: #f8f9fa;
  border: 2px solid #ecf0f1;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #7f8c8d;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
}
.cq-nav-number:hover:where(:scope, *) {
  border-color: #16a085;
  background: #e8f6f3;
}
.cq-nav-number.cq-current:where(:scope, *) {
  border-color: #2c3e50;
  background: #2c3e50;
  color: white;
}
.cq-nav-number.cq-answered:where(:scope, *) {
  border-color: #16a085;
  background: #d5f4e6;
  color: #16a085;
}
.cq-nav-number.cq-flagged:where(:scope, *) {
  position: relative;
}
.cq-nav-number.cq-flagged:where(:scope, *)::after {
  content: "🚩";
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 16px;
}
/* Review Screen */
.cq-review:where(:scope, *) {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.cq-review h2:where(:scope, *) {
  margin: 0 0 10px 0;
  color: #2c3e50;
}
.cq-review p:where(:scope, *) {
  color: #7f8c8d;
  margin-bottom: 30px;
}
.cq-review-stats:where(:scope, *) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}
.cq-review-stat:where(:scope, *) {
  text-align: center;
}
.cq-review-stat-value:where(:scope, *) {
  font-size: 36px;
  font-weight: bold;
  color: #16a085;
  margin-bottom: 5px;
}
.cq-review-stat-label:where(:scope, *) {
  font-size: 12px;
  color: #7f8c8d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cq-review-warning:where(:scope, *) {
  padding: 15px 20px;
  background: #fef5e7;
  border-left: 4px solid #e67e22;
  border-radius: 4px;
  margin-bottom: 25px;
  color: #a04000;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cq-warning-icon:where(:scope, *) {
  font-size: 24px;
}
.cq-review-grid:where(:scope, *) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  margin-bottom: 30px;
}
.cq-review-item:where(:scope, *) {
  padding: 20px;
  background: #f8f9fa;
  border: 2px solid #ecf0f1;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.cq-review-item:hover:where(:scope, *) {
  border-color: #16a085;
  background: #e8f6f3;
}
.cq-review-item.cq-unanswered:where(:scope, *) {
  border-color: #e67e22;
  background: #fef5e7;
}
.cq-review-item.cq-flagged:where(:scope, *) {
  border-color: #3498db;
  background: #ebf5fb;
}
.cq-review-item-number:where(:scope, *) {
  font-size: 18px;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 8px;
}
.cq-review-item-status:where(:scope, *) {
  font-size: 14px;
  color: #7f8c8d;
}
.cq-review-actions:where(:scope, *) {
  display: flex;
  gap: 15px;
  justify-content: center;
}
/* Results */
.cq-results:where(:scope, *) {
  background: white;
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
}
.cq-results-header:where(:scope, *) {
  padding: 40px;
  border-radius: 12px;
  margin-bottom: 40px;
}
.cq-results-header.cq-passed:where(:scope, *) {
  background: linear-gradient(135deg, #d5f4e6 0%, #a9dfbf 100%);
}
.cq-results-header.cq-failed:where(:scope, *) {
  background: linear-gradient(135deg, #fef5e7 0%, #fad7a0 100%);
}
.cq-results-icon:where(:scope, *) {
  font-size: 64px;
  margin-bottom: 20px;
}
.cq-results-header h2:where(:scope, *) {
  margin: 0 0 10px 0;
  font-size: 32px;
  color: #2c3e50;
}
.cq-results-header p:where(:scope, *) {
  margin: 0;
  font-size: 16px;
  color: #7f8c8d;
}
.cq-results-score:where(:scope, *) {
  margin: 40px 0;
  display: flex;
  justify-content: center;
}
.cq-results-score-circle:where(:scope, *) {
  position: relative;
  width: 200px;
  height: 200px;
}
.cq-results-score-circle svg:where(:scope, *) {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.cq-results-score-text:where(:scope, *) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.cq-results-percentage:where(:scope, *) {
  font-size: 48px;
  font-weight: bold;
  color: #2c3e50;
}
.cq-results-fraction:where(:scope, *) {
  font-size: 18px;
  color: #7f8c8d;
}
.cq-results-stats:where(:scope, *) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}
.cq-results-stat:where(:scope, *) {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}
.cq-results-stat-label:where(:scope, *) {
  font-size: 12px;
  color: #7f8c8d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.cq-results-stat-value:where(:scope, *) {
  font-size: 24px;
  font-weight: bold;
  color: #2c3e50;
}
.cq-results-actions:where(:scope, *) {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}
/* Detailed Review */
.cq-detailed-review:where(:scope, *) {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.cq-detailed-review h2:where(:scope, *) {
  margin: 0 0 10px 0;
  color: #2c3e50;
}
.cq-detailed-review p:where(:scope, *) {
  color: #7f8c8d;
  margin-bottom: 30px;
}
.cq-review-questions:where(:scope, *) {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-bottom: 30px;
}
.cq-review-question:where(:scope, *) {
  padding: 25px;
  border-radius: 12px;
  border: 2px solid #ecf0f1;
}
.cq-review-question.cq-correct:where(:scope, *) {
  border-color: #27ae60;
  background: #d5f4e6;
}
.cq-review-question.cq-incorrect:where(:scope, *) {
  border-color: #e74c3c;
  background: #fadbd8;
}
.cq-review-question-header:where(:scope, *) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}
.cq-review-question-number:where(:scope, *) {
  font-size: 14px;
  font-weight: 600;
  color: #2c3e50;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cq-review-question-result:where(:scope, *) {
  font-size: 14px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
}
.cq-review-question-result.cq-correct:where(:scope, *) {
  background: #27ae60;
  color: white;
}
.cq-review-question-result.cq-incorrect:where(:scope, *) {
  background: #e74c3c;
  color: white;
}
.cq-review-question-text:where(:scope, *) {
  font-size: 16px;
  color: #2c3e50;
  margin-bottom: 20px;
  line-height: 1.6;
}
.cq-review-options:where(:scope, *) {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 15px;
}
.cq-review-option:where(:scope, *) {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: white;
  border: 2px solid #ecf0f1;
  border-radius: 8px;
}
.cq-review-option.cq-correct-answer:where(:scope, *) {
  border-color: #27ae60;
  background: #d5f4e6;
}
.cq-review-option.cq-user-answer:not(.cq-correct-answer):where(:scope, *) {
  border-color: #e74c3c;
  background: #fadbd8;
}
.cq-option-badge:where(:scope, *) {
  margin-left: auto;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}
.cq-option-badge.cq-right:where(:scope, *) {
  background: #27ae60;
  color: white;
}
.cq-option-badge.cq-wrong:where(:scope, *) {
  background: #e74c3c;
  color: white;
}
.cq-review-explanation:where(:scope, *) {
  padding: 15px;
  background: #fef9e7;
  border-radius: 8px;
  border-left: 4px solid #f39c12;
  font-size: 14px;
  color: #5d4037;
  line-height: 1.6;
}
/* Max Attempts */
.cq-max-attempts:where(:scope, *) {
  background: white;
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
}
.cq-max-attempts-icon:where(:scope, *) {
  font-size: 72px;
  margin-bottom: 20px;
}
.cq-max-attempts h2:where(:scope, *) {
  margin: 0 0 15px 0;
  color: #2c3e50;
}
.cq-max-attempts p:where(:scope, *) {
  color: #7f8c8d;
  margin-bottom: 30px;
}
/* Responsive Design */
@media (max-width: 768px) {
  .chapter-quiz:where(:scope, *) {
    padding: 10px;
  }

  .cq-header:where(:scope, *) {
    flex-direction: column;
    gap: 20px;
  }

  .cq-timer:where(:scope, *) {
    width: 100%;
  }

  .cq-question-container:where(:scope, *) {
    padding: 20px;
  }

  .cq-navigation:where(:scope, *) {
    flex-direction: column;
  }

  .cq-nav-button:where(:scope, *) {
    width: 100%;
  }

  .cq-nav-grid:where(:scope, *) {
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 8px;
  }

  .cq-nav-number:where(:scope, *) {
    width: 40px;
    height: 40px;
  }

  .cq-results-stats:where(:scope, *),
  .cq-review-stats:where(:scope, *) {
    grid-template-columns: 1fr 1fr;
  }

  .cq-results-actions:where(:scope, *),
  .cq-review-actions:where(:scope, *) {
    flex-direction: column;
  }

  .cq-results-actions .cq-nav-button:where(:scope, *),
  .cq-review-actions .cq-nav-button:where(:scope, *) {
    width: 100%;
  }
}
/* Print Styles */
@media print {
  .cq-timer:where(:scope, *),
  .cq-navigation:where(:scope, *),
  .cq-question-navigator:where(:scope, *),
  .cq-flag-button:where(:scope, *),
  .cq-results-actions:where(:scope, *),
  .cq-review-actions:where(:scope, *) {
    display: none !important;
  }

  .chapter-quiz:where(:scope, *) {
    max-width: 100%;
  }

  .cq-header:where(:scope, *) {
    background: white;
    color: black;
    border: 1px solid #ecf0f1;
  }
}
/**
 * IoT Class Feedback & Progress Tracking Styles
 */

/* === FEEDBACK SECTION === */

.iotclass-feedback-section:where(:scope, *) {
  margin: 2rem 0;
  padding: 1.5rem;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12px;
  border: 1px solid #dee2e6;
}
.feedback-container h4:where(:scope, *),
.feedback-heading:where(:scope, *) {
  margin: 0 0 1rem 0;
  color: #2c3e50;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
}
.feedback-buttons:where(:scope, *) {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.feedback-btn:where(:scope, *) {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem 1.5rem;
  border: 2px solid #dee2e6;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 100px;
}
.feedback-btn:hover:where(:scope, *) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.feedback-btn.feedback-up:hover:where(:scope, *),
.feedback-btn.feedback-up.selected:where(:scope, *) {
  border-color: #16a085;
  background: #e8f8f5;
}
.feedback-btn.feedback-down:hover:where(:scope, *),
.feedback-btn.feedback-down.selected:where(:scope, *) {
  border-color: #e67e22;
  background: #fef5e7;
}
.feedback-btn:disabled:where(:scope, *) {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.feedback-icon:where(:scope, *) {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
}
.feedback-label:where(:scope, *) {
  font-size: 0.85rem;
  color: #666;
}
.feedback-comment-section:where(:scope, *) {
  margin-top: 1rem;
}
.feedback-comment-section textarea:where(:scope, *) {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  resize: vertical;
  margin-bottom: 0.5rem;
}
.feedback-comment-section textarea:focus:where(:scope, *) {
  outline: none;
  border-color: #16a085;
  box-shadow: 0 0 0 3px rgba(22, 160, 133, 0.1);
}
.feedback-submit-btn:where(:scope, *) {
  background: #16a085;
  color: white;
  border: none;
  padding: 0.6rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  transition: background 0.2s;
}
.feedback-submit-btn:hover:where(:scope, *) {
  background: #138d75;
}
.feedback-thanks:where(:scope, *) {
  text-align: center;
  color: #16a085;
  font-weight: 500;
  padding: 1rem;
  background: #e8f8f5;
  border-radius: 8px;
}
/* === PROGRESS TRACKING (now at bottom of page) === */

.iotclass-progress-check:where(:scope, *) {
  text-align: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}
.progress-checkbox-label:where(:scope, *) {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.5rem 1rem;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 20px;
  font-size: 0.9rem;
  color: #666;
  transition: all 0.2s;
}
.progress-checkbox-label:hover:where(:scope, *) {
  background: #e9ecef;
  border-color: #adb5bd;
}
.progress-checkbox:where(:scope, *) {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #16a085;
}
.progress-checkbox:checked + .progress-checkbox-text:where(:scope, *) {
  color: #16a085;
  font-weight: 500;
}
.iotclass-progress-check.progress-saved .progress-checkbox-label:where(:scope, *) {
  background: #e8f8f5;
  border-color: #16a085;
}
/* === ADMIN LINK === */

.iotclass-admin-link:where(:scope, *) {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #dee2e6;
  display: flex;
  gap: 1rem;
  justify-content: center;
}
.admin-link-btn:where(:scope, *),
.admin-logout-btn:where(:scope, *) {
  font-size: 0.85rem;
  color: #666;
  text-decoration: none;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  transition: all 0.2s;
}
.admin-link-btn:hover:where(:scope, *) {
  background: #f8f9fa;
  color: #2c3e50;
}
.admin-logout-btn:hover:where(:scope, *) {
  background: #fee;
  color: #c00;
}
/* === ADMIN MODAL === */

.iotclass-admin-modal:where(:scope, *) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 1rem;
}
.admin-modal-content:where(:scope, *) {
  background: white;
  border-radius: 12px;
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.admin-modal-header:where(:scope, *) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: #2c3e50;
  color: white;
}
.admin-modal-header h2:where(:scope, *) {
  margin: 0;
  font-size: 1.25rem;
}
.admin-close-btn:where(:scope, *) {
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.admin-modal-body:where(:scope, *) {
  padding: 1.5rem;
  overflow-y: auto;
}
.admin-loading:where(:scope, *) {
  text-align: center;
  padding: 2rem;
  color: #666;
}
/* Stats Grid */
.stats-grid:where(:scope, *) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.stat-card.stat-up:where(:scope, *) {
  background: #e8f8f5;
}
.stat-card.stat-down:where(:scope, *) {
  background: #fef5e7;
}
.stat-number:where(:scope, *) {
  font-size: 2rem;
  font-weight: bold;
  color: #2c3e50;
}
/* Feedback List */
.admin-feedback-list:where(:scope, *) {
  margin-top: 1.5rem;
}
.admin-feedback-list h3:where(:scope, *) {
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
  color: #2c3e50;
  border-bottom: 2px solid #eee;
  padding-bottom: 0.5rem;
}
.feedback-item:where(:scope, *) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: #f8f9fa;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}
.feedback-item.up:where(:scope, *) {
  border-left: 3px solid #16a085;
}
.feedback-item.down:where(:scope, *) {
  border-left: 3px solid #e67e22;
}
.feedback-vote:where(:scope, *) {
  font-size: 1.2rem;
}
.feedback-chapter:where(:scope, *) {
  font-weight: 500;
  color: #2c3e50;
}
.feedback-comment:where(:scope, *) {
  flex: 1;
  color: #666;
  font-style: italic;
}
.feedback-time:where(:scope, *) {
  font-size: 0.8rem;
  color: #999;
}
.comment-status.status-resolved:where(:scope, *) {
  background: #28a745;
  color: white;
}
/* Error message */
.feedback-error:where(:scope, *) {
  background: #f8d7da;
  color: #721c24;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-top: 1rem;
  text-align: center;
}
/* Feedback actions row */
.feedback-actions:where(:scope, *) {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.feedback-cancel-btn:where(:scope, *) {
  background: #6c757d;
  color: white;
  border: none;
  padding: 0.6rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  transition: background 0.2s;
}
.feedback-cancel-btn:hover:where(:scope, *) {
  background: #5a6268;
}
/* Admin login form */
.admin-login-form:where(:scope, *) {
  text-align: center;
}
.admin-login-form p:where(:scope, *) {
  margin-bottom: 1rem;
  color: #666;
}
.admin-username-input:where(:scope, *),
.admin-password-input:where(:scope, *) {
  width: 100%;
  max-width: 300px;
  padding: 0.75rem 1rem;
  border: 2px solid #dee2e6;
  border-radius: 8px;
  font-size: 1rem;
  margin-bottom: 0.75rem;
}
.admin-username-input:focus:where(:scope, *),
.admin-password-input:focus:where(:scope, *) {
  outline: none;
  border-color: #16a085;
  box-shadow: 0 0 0 3px rgba(22, 160, 133, 0.1);
}
.admin-login-actions:where(:scope, *) {
  margin-top: 1rem;
}
.admin-login-submit:where(:scope, *) {
  background: #16a085;
  color: white;
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}
.admin-login-submit:hover:where(:scope, *) {
  background: #138d75;
}
.admin-login-submit:disabled:where(:scope, *) {
  background: #95a5a6;
  cursor: not-allowed;
}
/* Admin error */
.admin-error:where(:scope, *) {
  text-align: center;
  padding: 2rem;
  color: #721c24;
}
/* Empty message */
.empty-message:where(:scope, *) {
  color: #666;
  font-style: italic;
  text-align: center;
  padding: 1rem;
}
/* Admin footer */
.admin-footer:where(:scope, *) {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
  text-align: center;
  color: #999;
}
/* === RESPONSIVE === */

@media (max-width: 600px) {
  .feedback-buttons:where(:scope, *) {
    flex-direction: column;
    align-items: center;
  }

  .feedback-btn:where(:scope, *) {
    width: 100%;
    max-width: 200px;
  }

  .stats-grid:where(:scope, *) {
    grid-template-columns: repeat(2, 1fr);
  }

  .admin-modal-content:where(:scope, *) {
    max-height: 100vh;
    border-radius: 0;
  }
}
/* === SECTION-LEVEL FEEDBACK (Hover Popup System) === */

/* Trigger icon that appears on section headers */
.section-feedback-trigger:where(:scope, *) {
  display: inline-flex;
  align-items: center;
  margin-left: 0.5rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  cursor: pointer;
  vertical-align: middle;
}
/* Show trigger on header hover */
h2:hover .section-feedback-trigger:where(:scope, *),
h3:hover .section-feedback-trigger:where(:scope, *),
h4:hover .section-feedback-trigger:where(:scope, *),
h5:hover .section-feedback-trigger:where(:scope, *),
.section-feedback-trigger:hover:where(:scope, *) {
  opacity: 1;
}
.trigger-icon:where(:scope, *) {
  font-size: 0.85em;
  padding: 0.15rem 0.3rem;
  border-radius: 4px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  transition: all 0.15s ease;
}
.trigger-icon:hover:where(:scope, *) {
  background: #e9ecef;
  border-color: #adb5bd;
}
.trigger-icon.trigger-done:where(:scope, *) {
  background: #e8f8f5;
  border-color: #16a085;
  color: #16a085;
  opacity: 0.7;
}
/* Feedback popup panel */
.section-feedback-popup:where(:scope, *) {
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  padding: 0.5rem;
  z-index: 10000;
  min-width: 160px;
}
.popup-header:where(:scope, *) {
  font-size: 0.75rem;
  color: #666;
  text-align: center;
  padding-bottom: 0.4rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid #eee;
}
.popup-actions:where(:scope, *) {
  display: flex;
  gap: 0.25rem;
  justify-content: center;
}
.popup-btn:where(:scope, *) {
  background: none;
  border: 1px solid transparent;
  padding: 0.4rem 0.6rem;
  font-size: 1.1rem;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s ease;
  line-height: 1;
}
.popup-btn:hover:where(:scope, *) {
  background: #f0f0f0;
  border-color: #ddd;
  transform: scale(1.1);
}
.popup-up:hover:where(:scope, *) {
  background: #e8f8f5;
  border-color: #16a085;
}
.popup-down:hover:where(:scope, *) {
  background: #fef5e7;
  border-color: #e67e22;
}
.popup-star:hover:where(:scope, *) {
  background: #fff8e1;
  border-color: #f9a825;
}
.popup-comment:hover:where(:scope, *) {
  background: #e3f2fd;
  border-color: #2196f3;
}
/* Star rating popup */
.star-rating-popup:where(:scope, *) {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 1rem;
  z-index: 1000;
  min-width: 250px;
  margin-top: 0.5rem;
}
.rating-row:where(:scope, *) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #eee;
}
.rating-row:last-of-type:where(:scope, *) {
  border-bottom: none;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
}
.rating-label:where(:scope, *) {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: #555;
}
.star-rating:where(:scope, *) {
  display: flex;
  gap: 0.15rem;
}
.star-btn:where(:scope, *) {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: #ddd;
  transition:
    color 0.1s,
    transform 0.1s;
  padding: 0;
  line-height: 1;
}
.star-btn:hover:where(:scope, *) {
  transform: scale(1.2);
}
.star-btn.active:where(:scope, *),
.star-btn:hover:where(:scope, *),
.star-rating:hover .star-btn:where(:scope, *) {
  color: #f9a825;
}
.star-rating .star-btn:hover ~ .star-btn:where(:scope, *) {
  color: #ddd;
}
/* Section comment modal */
.section-comment-overlay:where(:scope, *) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 1rem;
}
.section-comment-cancel:where(:scope, *) {
  background: #6c757d;
  color: white;
  border: none;
  padding: 0.6rem 1.25rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
}
.section-comment-cancel:hover:where(:scope, *) {
  background: #5a6268;
}
.section-comment-submit:where(:scope, *) {
  background: #e67e22;
  color: white;
  border: none;
  padding: 0.6rem 1.25rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
}
.section-comment-submit:hover:where(:scope, *) {
  background: #d35400;
}
.section-comment-submit:disabled:where(:scope, *) {
  background: #bdc3c7;
  cursor: not-allowed;
}
/* Vote count badges */
.vote-count:where(:scope, *) {
  font-size: 0.75rem;
  color: #999;
  margin-left: -0.2rem;
}
/* Section feedback submitted state */
.section-feedback.submitted:where(:scope, *) {
  opacity: 0.8;
}
/* === CHAPTER RATING GRID === */

.chapter-rating-grid:where(:scope, *) {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}
.chapter-rating-item:where(:scope, *) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.chapter-rating-item .rating-label:where(:scope, *) {
  font-size: 0.9rem;
  color: #555;
}
.chapter-star-rating:where(:scope, *) {
  display: flex;
  gap: 0.25rem;
}
.chapter-star-rating .star-btn:where(:scope, *) {
  font-size: 1.5rem;
}
/* === MODAL ACTION BUTTONS === */

.modal-actions:where(:scope, *) {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1rem;
}
.btn-primary:where(:scope, *) {
  background: #16a085;
  color: white;
  border: none;
  padding: 0.6rem 1.25rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  transition: background 0.2s;
}
.btn-primary:hover:where(:scope, *) {
  background: #138d75;
}
.btn-secondary:where(:scope, *) {
  background: #6c757d;
  color: white;
  border: none;
  padding: 0.6rem 1.25rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  transition: background 0.2s;
}
.btn-secondary:hover:where(:scope, *) {
  background: #5a6268;
}
/* Section feedback done state */
.section-feedback-done:where(:scope, *) {
  color: #16a085;
  font-size: 0.9rem;
  font-weight: bold;
}
/* Rating comment in modal */
.rating-comment:where(:scope, *) {
  margin-top: 0.75rem;
}
.rating-comment-input:where(:scope, *) {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
}
.rating-comment-input:focus:where(:scope, *) {
  outline: none;
  border-color: #16a085;
}
/* Section comment form in modal */
.section-comment-form p:where(:scope, *) {
  margin: 0 0 0.75rem 0;
  color: #555;
}
.section-comment-input:where(:scope, *) {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.95rem;
  resize: vertical;
  margin-bottom: 0.5rem;
}
.section-comment-input:focus:where(:scope, *) {
  outline: none;
  border-color: #e67e22;
  box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.1);
}
/* Admin login error */
.admin-login-error:where(:scope, *) {
  color: #dc3545;
  font-size: 0.9rem;
  text-align: center;
  padding: 0.5rem;
  margin: 0.5rem 0;
}
/* Admin stats section */
.admin-stats h3:where(:scope, *),
.admin-feedback-list h3:where(:scope, *) {
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
  color: #2c3e50;
  border-bottom: 2px solid #eee;
  padding-bottom: 0.5rem;
}
.feedback-section:where(:scope, *) {
  font-size: 0.85rem;
  color: #888;
  font-style: italic;
}
/* === MODULE INFO BAR (replaces user status bar) === */
/* AST-CSS1 CRITICAL START: static top-bar shell */

.iotclass-user-status:where(:scope, *) {
  /* EIC8-G: normal flow prevents the persistent bar from covering chapter
     text at arbitrary mobile scroll offsets. */
  position: static;
  z-index: 1100;
  padding: 0.45rem 1rem;
  font-size: 0.875rem;
}
.user-status-content:where(:scope, *) {
  max-width: 1840px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}
/* Left side: home link + logo + module name */
.module-bar-left:where(:scope, *) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.module-bar-home:where(:scope, *) {
  color: inherit !important;
  text-decoration: none;
  font-size: 0.85rem;
  white-space: nowrap;
  opacity: 1;
  transition: opacity 0.2s;
}
.module-bar-home:hover:where(:scope, *) {
  opacity: 0.85;
  color: inherit !important;
  text-decoration: none;
}
/* Sidebar toggle button in the module bar */
.module-bar-sidebar-toggle:where(:scope, *) {
  background: none;
  border: none;
  color: inherit;
  font-size: 1.1rem;
  padding: 0.2rem 0.4rem;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  line-height: 1;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
}
.module-bar-sidebar-toggle:hover:where(:scope, *) {
  opacity: 1;
}
/* Search button in the module bar */
.module-bar-search:where(:scope, *) {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: inherit;
  font-size: 0.8rem;
  padding: 0.25rem 0.65rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  min-width: 44px;
  min-height: 44px;
}
.module-bar-search:hover:where(:scope, *) {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}
.module-bar-search kbd:where(:scope, *) {
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 3px;
  padding: 0.05rem 0.35rem;
  font-size: 0.7rem;
  font-family: inherit;
  color: inherit !important;
}
.module-bar-search .bi:where(:scope, *) {
  font-size: 0.85rem;
}
.iotclass-user-status .module-bar-search:where(:scope, *),
.iotclass-user-status .module-bar-search .module-bar-search-label:where(:scope, *) {
  color: #1f2933 !important;
}
.iotclass-user-status .module-bar-search:hover:where(:scope, *),
.iotclass-user-status .module-bar-search:focus-visible:where(:scope, *) {
  background: #f8fafc !important;
  color: #111827 !important;
}
.iotclass-user-status .module-bar-search .bi:where(:scope, *),
.iotclass-user-status .module-bar-search kbd:where(:scope, *) {
  color: #1f2933 !important;
}
.iotclass-user-status .user-status-badge:where(:scope, *) {
  background: #ffffff !important;
  color: #1f2933 !important;
  border: 1px solid rgba(255, 255, 255, 0.86) !important;
  border-radius: 999px !important;
  padding: 0.18rem 0.55rem !important;
}
.module-bar-separator:where(:scope, *) {
  opacity: 0.35;
  font-size: 0.75rem;
  flex-shrink: 0;
}
.module-bar-logo-link:where(:scope, *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 3px;
  flex: 0 0 44px;
  line-height: 0;
  text-decoration: none;
}
.module-bar-logo:where(:scope, *) {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
}
.module-bar-name:where(:scope, *) {
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Right side: user badge + actions */
.module-bar-right:where(:scope, *) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
/* AST-UX4: the widest production profile chip measures 146.23px in the
   landing header (132.48px in the module bar). Reserve one response-rendered
   150x40px region so auth hydration can change only its contents. */
.iotclass-auth-slot:where(:scope, *) {
  display: flex;
  flex: 0 0 150px;
  align-items: center;
  justify-content: flex-end;
  width: 150px;
  min-width: 150px;
  max-width: 150px;
  height: 40px;
}
.iotclass-auth-slot > .iotclass-auth-trigger:where(:scope, *),
.iotclass-auth-slot > .iotclass-profile-presence:where(:scope, *) {
  flex: 0 0 auto;
  margin-inline-start: auto;
  max-width: 100%;
}
.iotclass-auth-slot > .iotclass-profile-presence:where(:scope, *) {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}
.user-status-badge:where(:scope, *) {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.status-icon:where(:scope, *) {
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.status-text:where(:scope, *) {
  color: inherit;
  opacity: 1;
}
.status-text strong:where(:scope, *) {
  color: #f1c40f;
}
.user-id:where(:scope, *) {
  font-family: monospace;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.8rem;
}
.admin-badge .status-text:where(:scope, *) {
  color: #f1c40f;
}
.admin-badge .status-text strong:where(:scope, *) {
  color: #f1c40f;
}
.reader-badge .status-text:where(:scope, *) {
  opacity: 1;
}
.guest-badge .status-text:where(:scope, *) {
  opacity: 1;
  font-style: italic;
}

@media (max-width: 640px) {
  .iotclass-user-status:where(:scope, *) {
    padding: 0.4rem 0.75rem;
  }

  .user-status-content:where(:scope, *) {
    gap: 0.5rem;
  }

  .module-bar-right:where(:scope, *) {
    gap: 0.35rem;
  }

  .module-bar-search:where(:scope, *) {
    padding: 0.25rem 0.5rem;
    gap: 0.3rem;
  }

  .module-bar-search kbd:where(:scope, *) {
    display: none;
  }
}

@media (max-width: 480px) {
  .module-bar-home:where(:scope, *) {
    font-size: 0.8rem;
  }

  /* Keep the module bar within a 390px viewport in every auth state. The
   * reader ID and the visible Search label duplicated information already
   * exposed by the badge/control accessible names; together they forced this
   * nowrap row wider than the viewport and pushed "All Modules" underneath
   * the inline Contents control. */
  .module-bar-search-label:where(:scope, *),
  .reader-badge .user-id:where(:scope, *) {
    display: none;
  }

  .guest-badge .status-text:where(:scope, *) {
    display: none;
  }

  .module-bar-link-dashboard:where(:scope, *) {
    display: none;
  }

  /* At this breakpoint the profile label is visually hidden; Sign In is the
     wider visible state at 64.78px, so 70px is the stable mobile slot. */
  .iotclass-auth-slot:where(:scope, *) {
    flex-basis: 70px;
    width: 70px;
    min-width: 70px;
    max-width: 70px;
  }
}
.user-status-actions:where(:scope, *) {
  display: flex;
  gap: 0.5rem;
}
.status-btn:where(:scope, *) {
  padding: 0.3rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.12);
  color: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.2s;
}
.status-btn:hover:where(:scope, *) {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
}
.status-dashboard-btn:where(:scope, *) {
  background: rgba(22, 160, 133, 0.3);
  border-color: #16a085;
}
.status-dashboard-btn:hover:where(:scope, *) {
  background: rgba(22, 160, 133, 0.5);
}
.status-logout-btn:where(:scope, *) {
  background: rgba(231, 76, 60, 0.2);
  border-color: rgba(231, 76, 60, 0.5);
}
.status-logout-btn:hover:where(:scope, *) {
  background: rgba(231, 76, 60, 0.4);
}
.status-login-btn:where(:scope, *) {
  background: rgba(52, 152, 219, 0.2);
  border-color: rgba(52, 152, 219, 0.5);
}
.status-login-btn:hover:where(:scope, *) {
  background: rgba(52, 152, 219, 0.4);
}
/* AST-CSS1 CRITICAL END */
/* Auth and profile surfaces */
.iotclass-auth-button:where(:scope, *),
.iotclass-auth-trigger:where(:scope, *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--flat-border-strong, #cfd4da);
  border-radius: var(--flat-radius-md, 6px);
  background: var(--flat-control-bg, #f1f3f5);
  color: var(--flat-text, #21242c);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}
.iotclass-auth-button:hover:not(:disabled):where(:scope, *),
.iotclass-auth-button:focus-visible:not(:disabled):where(:scope, *),
.iotclass-auth-trigger:hover:not(:disabled):where(:scope, *),
.iotclass-auth-trigger:focus-visible:not(:disabled):where(:scope, *) {
  border-color: var(--flat-accent, #1865f2);
  background: var(--flat-control-hover, #e7ebf0);
  color: var(--flat-text, #21242c);
  outline: none;
}
.iotclass-auth-button:focus-visible:where(:scope, *),
.iotclass-auth-trigger:focus-visible:where(:scope, *) {
  outline: 2px solid var(--flat-accent, #1865f2);
  outline-offset: 2px;
}
.iotclass-auth-slot .iotclass-auth-trigger:focus-visible:where(:scope, *) {
  outline: 3px solid #155eef;
  outline-offset: 2px;
}
.iotclass-auth-button-compact:where(:scope, *) {
  min-height: 2rem;
  padding: 0.42rem 0.7rem;
  font-size: 0.78rem;
}
.iotclass-auth-button-secondary:where(:scope, *) {
  background: #ffffff;
  color: var(--flat-text-muted, #475774);
}
.iotclass-auth-button-unavailable:where(:scope, *),
.iotclass-auth-trigger-unavailable:where(:scope, *),
.iotclass-auth-trigger-unavailable:hover:where(:scope, *),
.iotclass-auth-trigger-unavailable:focus-visible:where(:scope, *) {
  border-color: var(--flat-border, #dbdcdd);
  background: var(--flat-surface-muted, #f7f8fa);
  color: var(--flat-text-subtle, #646b7a);
  cursor: not-allowed;
}
.iotclass-auth-provider-mark:where(:scope, *) {
  color: #1f5fbf;
  font-weight: 800;
}
.iotclass-auth-panel:where(:scope, *) {
  display: grid;
  gap: 0.85rem;
  max-width: 560px;
  margin: 0 auto;
  padding: 1.25rem;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: var(--flat-radius-lg, 8px);
  background: var(--flat-surface, #ffffff);
  color: var(--flat-text, #21242c);
  text-align: center;
}
.iotclass-auth-panel h2:where(:scope, *) {
  margin: 0;
  color: var(--flat-text, #21242c);
  font-size: 1.25rem;
  line-height: 1.25;
}
.iotclass-auth-panel p:where(:scope, *) {
  margin: 0;
  color: var(--flat-text-muted, #475774);
}
.iotclass-auth-panel-muted:where(:scope, *) {
  color: var(--flat-text-muted, #475774);
}
.iotclass-auth-panel-error:where(:scope, *) {
  border-color: #f0b7b7;
  background: #fff7f7;
}
.iotclass-auth-panel-error p:where(:scope, *) {
  color: #9f2d2d;
}
.iotclass-auth-panel-unavailable:where(:scope, *) {
  background: var(--flat-surface-muted, #f7f8fa);
}
.iotclass-auth-profile-mini:where(:scope, *),
.iotclass-auth-profile-link:where(:scope, *) {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.iotclass-auth-profile-link:where(:scope, *) {
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.iotclass-auth-avatar:where(:scope, *) {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--flat-border-strong, #cfd4da);
  border-radius: 50%;
}
.iotclass-auth-avatar-mini:where(:scope, *) {
  width: 1.6rem;
  height: 1.6rem;
}
.iotclass-auth-profile-text:where(:scope, *) {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}
.iotclass-auth-name:where(:scope, *) {
  font-weight: 700;
}
.iotclass-auth-xp:where(:scope, *) {
  color: #0f5f55;
  font-size: 0.75rem;
  font-weight: 700;
}
.iotclass-auth-role:where(:scope, *) {
  padding: 0.12rem 0.45rem;
  border: 1px solid #d8a15f;
  border-radius: 4px;
  background: #fff5e8;
  color: #7a4a12;
  font-size: 0.68rem;
  font-weight: 800;
}
.iotclass-auth-profile-link-compact:where(:scope, *),
.iotclass-auth-profile-link-mini:where(:scope, *) {
  padding: 0.25rem 0.4rem;
  border: 1px solid transparent;
  border-radius: var(--flat-radius-md, 6px);
}
.iotclass-auth-profile-link-compact:hover:where(:scope, *),
.iotclass-auth-profile-link-compact:focus-visible:where(:scope, *),
.iotclass-auth-profile-link-mini:hover:where(:scope, *),
.iotclass-auth-profile-link-mini:focus-visible:where(:scope, *) {
  border-color: var(--flat-border-strong, #cfd4da);
  background: var(--flat-control-hover, #e7ebf0);
  outline: 2px solid var(--flat-accent, #1865f2);
  outline-offset: 2px;
}
.iotclass-auth-level-chip:where(:scope, *) {
  display: inline-flex;
  align-items: center;
  min-height: 1.35rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid #9dcfc5;
  border-radius: 4px;
  background: #e8f6f3;
  color: #0f5f55;
  font-size: 0.72rem;
  font-weight: 800;
}

/* Signed-in profile presence shared by landing, tool, and module headers. */
.iotclass-profile-presence-slot:where(:scope, *),
.iotclass-profile-presence:where(:scope, *) {
  position: relative;
  flex: 0 0 auto;
}
.iotclass-profile-presence-trigger:where(:scope, *) {
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  gap: 0.42rem;
  padding: 0.22rem 0.55rem 0.22rem 0.28rem;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: #ffffff;
  color: #1f2933;
  font: inherit;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.iotclass-profile-presence-trigger:hover:where(:scope, *),
.iotclass-profile-presence-trigger:focus-visible:where(:scope, *) {
  background: #f8fafc;
  color: #111827;
  outline: 3px solid rgba(22, 160, 133, 0.38);
  outline-offset: 2px;
}
.iotclass-profile-presence-avatar:where(:scope, *) {
  width: 1.72rem;
  height: 1.72rem;
  border-radius: 50%;
  background: #e8f6f3;
  object-fit: cover;
}
.iotclass-profile-presence-label:where(:scope, *) {
  white-space: nowrap;
}
.iotclass-profile-presence-chevron:where(:scope, *) {
  font-size: 0.78rem;
  transition: transform 0.15s ease;
}
.iotclass-profile-presence.is-open .iotclass-profile-presence-chevron:where(:scope, *) {
  transform: rotate(180deg);
}
.iotclass-profile-presence-menu:where(:scope, *) {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  z-index: 1200;
  display: grid;
  width: min(14rem, calc(100vw - 1.5rem));
  overflow: hidden;
  border: 1px solid #cfd7df;
  border-radius: 0.65rem;
  background: #ffffff;
  color: #1f2933;
  box-shadow: 0 12px 32px rgba(17, 24, 39, 0.22);
}
.iotclass-profile-presence-menu[hidden]:where(:scope, *) {
  display: none;
}
.iotclass-profile-presence-menu a:where(:scope, *),
.iotclass-profile-presence-menu button:where(:scope, *) {
  display: block;
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 0;
  background: transparent;
  color: #1f2933 !important;
  font: inherit;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.iotclass-profile-presence-menu a:hover:where(:scope, *),
.iotclass-profile-presence-menu a:focus-visible:where(:scope, *),
.iotclass-profile-presence-menu button:hover:where(:scope, *),
.iotclass-profile-presence-menu button:focus-visible:where(:scope, *) {
  background: #e8f6f3;
  outline: 2px solid #16806f;
  outline-offset: -2px;
}
.iotclass-profile-presence-progress:where(:scope, *) {
  margin: 0;
  padding: 0.55rem 0.85rem;
  border-block: 1px solid #e4e8ec;
  color: #475774;
  font-size: 0.78rem;
  font-weight: 700;
}
.iotclass-user-status .iotclass-profile-presence-progress:where(:scope, *) {
  display: block !important;
  position: relative;
  z-index: 2;
  background: #f7f9fb;
  color: #475774 !important;
  font-size: 0.78rem !important;
  opacity: 1 !important;
  white-space: nowrap;
}
.iotclass-module-profile-slot .status-login-btn:where(:scope, *) {
  min-height: 2.25rem;
  border-color: rgba(255, 255, 255, 0.82);
  background: #ffffff;
  color: #1f2933;
  font-weight: 700;
}
@media (max-width: 480px) {
  .iotclass-profile-presence-label:where(:scope, *) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .iotclass-profile-presence-trigger:where(:scope, *) {
    padding-right: 0.35rem;
  }
}
.iotclass-profile-card:where(:scope, *) {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: var(--flat-radius-lg, 8px);
  background: var(--flat-surface, #ffffff);
  color: var(--flat-text, #21242c);
}
.iotclass-profile-header:where(:scope, *) {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  border-bottom: 1px solid var(--flat-border, #dbdcdd);
  background: var(--flat-surface-muted, #f7f8fa);
}
.iotclass-profile-avatar:where(:scope, *) {
  width: 4.5rem;
  height: 4.5rem;
  border: 1px solid var(--flat-border-strong, #cfd4da);
  border-radius: 50%;
}
.iotclass-profile-header h2:where(:scope, *),
.iotclass-profile-header p:where(:scope, *) {
  margin: 0;
}
.iotclass-profile-header h2:where(:scope, *) {
  font-size: 1.35rem;
}
.iotclass-profile-header p:where(:scope, *),
.iotclass-profile-progress-label:where(:scope, *),
.iotclass-profile-stats span:where(:scope, *) {
  color: var(--flat-text-muted, #475774);
}
.iotclass-profile-streak:where(:scope, *) {
  display: inline-flex;
  margin-top: 0.45rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: 4px;
  background: #ffffff;
  color: var(--flat-text-muted, #475774);
  font-size: 0.78rem;
  font-weight: 700;
}
.iotclass-profile-stats:where(:scope, *) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--flat-border, #dbdcdd);
}
.iotclass-profile-stats div:where(:scope, *) {
  display: grid;
  gap: 0.2rem;
  padding: 1rem;
  border-right: 1px solid var(--flat-border, #dbdcdd);
  text-align: center;
}
.iotclass-profile-stats div:last-child:where(:scope, *) {
  border-right: 0;
}
.iotclass-profile-stats strong:where(:scope, *) {
  font-size: 1.55rem;
  line-height: 1;
}
.iotclass-profile-progress:where(:scope, *),
.iotclass-profile-badges:where(:scope, *),
.iotclass-profile-actions:where(:scope, *) {
  padding: 1rem 1.25rem;
}
.iotclass-profile-progress-label:where(:scope, *) {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
  font-size: 0.88rem;
}
.iotclass-profile-progress-track:where(:scope, *) {
  overflow: hidden;
  height: 0.65rem;
  border-radius: 999px;
  background: var(--flat-surface-muted, #f7f8fa);
}
.iotclass-profile-progress-fill:where(:scope, *) {
  height: 100%;
  border-radius: inherit;
  background: var(--flat-accent, #1865f2);
}
.iotclass-profile-badges:where(:scope, *) {
  border-top: 1px solid var(--flat-border, #dbdcdd);
}
.iotclass-profile-badges h3:where(:scope, *) {
  margin: 0 0 0.75rem;
  color: var(--flat-text, #21242c);
  font-size: 1rem;
}
.iotclass-profile-badges > div:where(:scope, *) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.6rem;
}
.iotclass-profile-badge:where(:scope, *) {
  display: grid;
  gap: 0.25rem;
  padding: 0.65rem;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: var(--flat-radius-md, 6px);
  background: var(--flat-surface-muted, #f7f8fa);
  text-align: center;
}
.iotclass-profile-badge-icon:where(:scope, *) {
  color: var(--flat-text-muted, #475774);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}
.iotclass-profile-actions:where(:scope, *) {
  display: flex;
  gap: 0.6rem;
  border-top: 1px solid var(--flat-border, #dbdcdd);
}
.iotclass-profile-actions .iotclass-auth-button:first-child:where(:scope, *) {
  flex: 1;
}

@media (max-width: 640px) {
  .iotclass-profile-header:where(:scope, *),
  .iotclass-profile-actions:where(:scope, *),
  .iotclass-profile-progress-label:where(:scope, *) {
    align-items: stretch;
    flex-direction: column;
  }

  .iotclass-profile-stats:where(:scope, *) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .iotclass-profile-stats div:nth-child(2n):where(:scope, *) {
    border-right: 0;
  }
}
/* Learner dashboard surface */
.iotclass-dashboard-profile:where(:scope, *) {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}
.iotclass-dashboard-avatar:where(:scope, *) {
  width: 4.5rem;
  height: 4.5rem;
  border: 1px solid var(--flat-border-strong, #cfd4da);
  border-radius: 50%;
  background: var(--flat-surface-muted, #f7f8fa);
}
.iotclass-dashboard-profile h2:where(:scope, *) {
  margin: 0;
  color: var(--flat-text, #21242c);
  font-size: 1.7rem;
  line-height: 1.2;
}
.iotclass-dashboard-profile p:where(:scope, *),
.iotclass-dashboard-status p:where(:scope, *),
.iotclass-dashboard-note:where(:scope, *) {
  margin: 0;
  color: var(--flat-text-muted, #475774);
}
.iotclass-dashboard-status:where(:scope, *) {
  padding: 0.85rem;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: var(--flat-radius-md, 6px);
  background: var(--flat-surface-muted, #f7f8fa);
}
.iotclass-dashboard-status > span:where(:scope, *) {
  font-weight: 800;
}
.iotclass-dashboard-stats:where(:scope, *) {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: var(--flat-radius-lg, 8px);
  background: var(--flat-surface, #ffffff);
}
.iotclass-dashboard-stat:where(:scope, *) {
  display: grid;
  gap: 0.25rem;
  min-height: 5.5rem;
  padding: 1rem 0.75rem;
  border-right: 1px solid var(--flat-border, #dbdcdd);
  text-align: center;
}
.iotclass-dashboard-stat:last-child:where(:scope, *) {
  border-right: 0;
}
.iotclass-dashboard-stat strong:where(:scope, *) {
  color: var(--flat-text, #21242c);
  font-size: 1.5rem;
  line-height: 1;
}
.iotclass-dashboard-stat span:where(:scope, *),
.iotclass-dashboard-panel-heading span:where(:scope, *),
.iotclass-dashboard-activity small:where(:scope, *) {
  color: var(--flat-text-muted, #475774);
  font-size: 0.82rem;
}
.iotclass-dashboard-panel:where(:scope, *),
.iotclass-dashboard-actions:where(:scope, *) {
  padding: 1rem;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: var(--flat-radius-lg, 8px);
  background: var(--flat-surface, #ffffff);
}
.iotclass-dashboard-panel-heading:where(:scope, *) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.iotclass-dashboard-panel-heading h3:where(:scope, *) {
  margin: 0;
  color: var(--flat-text, #21242c);
  font-size: 1rem;
}
.iotclass-dashboard-progress-track:where(:scope, *),
.iotclass-dashboard-meter-track:where(:scope, *) {
  overflow: hidden;
  border-radius: 999px;
  background: var(--flat-surface-muted, #f7f8fa);
}
.iotclass-dashboard-progress-track:where(:scope, *) {
  height: 0.8rem;
}
.iotclass-dashboard-progress-track span:where(:scope, *),
.iotclass-dashboard-meter-track span:where(:scope, *) {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #1865f2;
}
.iotclass-dashboard-note:where(:scope, *) {
  margin-top: 0.55rem;
  font-size: 0.88rem;
}
.iotclass-dashboard-next-link:hover:where(:scope, *),
.iotclass-dashboard-next-link:focus-visible:where(:scope, *) {
  border-color: var(--flat-accent, #1865f2);
  outline: 2px solid var(--flat-accent, #1865f2);
  outline-offset: 2px;
}
.iotclass-dashboard-ring:where(:scope, *) {
  --path-progress: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--flat-surface, #ffffff) 0 55%, transparent 56%),
    conic-gradient(
      var(--ring-color) calc(var(--path-progress) * 1%),
      var(--flat-surface-muted, #f7f8fa) 0
    );
}
.iotclass-dashboard-ring:where(:scope, *)::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: inherit;
}
.iotclass-dashboard-ring span:where(:scope, *) {
  position: relative;
  z-index: 1;
  color: var(--flat-text, #21242c);
  font-size: 0.82rem;
  font-weight: 900;
}
.iotclass-dashboard-streak-values div:where(:scope, *) {
  border-right: 1px solid var(--flat-border, #dbdcdd);
}
.iotclass-dashboard-streak-values div:last-child:where(:scope, *) {
  border-right: 0;
}
.iotclass-dashboard-columns:where(:scope, *) {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 1rem;
}
.iotclass-dashboard-meter-row:where(:scope, *) {
  margin-bottom: 0.75rem;
}
.iotclass-dashboard-meter-row:last-child:where(:scope, *) {
  margin-bottom: 0;
}
.iotclass-dashboard-meter-track span:where(:scope, *) {
  background: #0f5f55;
}
.iotclass-dashboard-activity:where(:scope, *) {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.iotclass-dashboard-activity li:where(:scope, *) {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  min-height: 3rem;
  padding: 0.6rem;
  border: 1px solid var(--flat-border, #dbdcdd);
  border-radius: var(--flat-radius-md, 6px);
  background: var(--flat-surface-muted, #f7f8fa);
}
.iotclass-dashboard-actions:where(:scope, *) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.iotclass-dashboard-actions a:where(:scope, *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--flat-border-strong, #cfd4da);
  border-radius: var(--flat-radius-md, 6px);
  background: var(--flat-surface-muted, #f7f8fa);
  color: var(--flat-text, #21242c);
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}
.iotclass-dashboard-actions a:hover:where(:scope, *),
.iotclass-dashboard-actions a:focus-visible:where(:scope, *) {
  border-color: var(--flat-accent, #1865f2);
  background: var(--flat-control-hover, #e7ebf0);
  outline: 2px solid var(--flat-accent, #1865f2);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .iotclass-dashboard-hero:where(:scope, *),
  .iotclass-dashboard-focus-grid:where(:scope, *),
  .iotclass-dashboard-columns:where(:scope, *) {
    grid-template-columns: 1fr;
  }

  .iotclass-dashboard-path-grid:where(:scope, *) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .iotclass-dashboard-stats:where(:scope, *) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .iotclass-dashboard-stat:nth-child(3n):where(:scope, *) {
    border-right: 0;
  }

  .iotclass-dashboard-stat:nth-child(n + 4):where(:scope, *) {
    border-top: 1px solid var(--flat-border, #dbdcdd);
  }
}

@media (max-width: 640px) {
  .iotclass-dashboard-shell:where(:scope, *) {
    margin: 0.75rem 0;
  }

  .iotclass-dashboard-profile:where(:scope, *) {
    align-items: flex-start;
  }

  .iotclass-dashboard-avatar:where(:scope, *) {
    width: 3.25rem;
    height: 3.25rem;
  }

  .iotclass-dashboard-profile h2:where(:scope, *) {
    font-size: 1.35rem;
  }

  .iotclass-dashboard-stats:where(:scope, *),
  .iotclass-dashboard-path-grid:where(:scope, *),
  .iotclass-dashboard-actions:where(:scope, *) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .iotclass-dashboard-stat:nth-child(3n):where(:scope, *) {
    border-right: 1px solid var(--flat-border, #dbdcdd);
  }

  .iotclass-dashboard-stat:nth-child(2n):where(:scope, *) {
    border-right: 0;
  }

  .iotclass-dashboard-stat:nth-child(n + 3):where(:scope, *) {
    border-top: 1px solid var(--flat-border, #dbdcdd);
  }

  .iotclass-dashboard-activity li:where(:scope, *) {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .iotclass-dashboard-path-grid:where(:scope, *),
  .iotclass-dashboard-streak-values:where(:scope, *) {
    grid-template-columns: 1fr;
  }

  .iotclass-dashboard-path-card:where(:scope, *) {
    min-height: 5.25rem;
  }

  .iotclass-dashboard-streak-values div:where(:scope, *) {
    border-right: 0;
    border-bottom: 1px solid var(--flat-border, #dbdcdd);
  }

  .iotclass-dashboard-streak-values div:last-child:where(:scope, *) {
    border-bottom: 0;
  }
}
/* Tablet: hide logo,
keep module name */
@media (max-width: 767px) {
  .module-bar-logo:where(:scope, *) {
    display: none;
  }

  .module-bar-separator:where(:scope, *) {
    display: none;
  }

  .module-bar-name:where(:scope, *) {
    max-width: 200px;
    font-size: 0.82rem;
  }

  .iotclass-user-status:where(:scope, *) {
    padding: 0.35rem 0.75rem;
  }
}
/* Small mobile: hide module name,
keep just home link + badge */
@media (max-width: 480px) {
  .module-bar-name:where(:scope, *) {
    display: none;
  }

  .status-btn:where(:scope, *) {
    padding: 0.25rem 0.5rem;
    font-size: 0.72rem;
  }
}
/* === ADMIN IMAGE VERSION MANAGEMENT === */

.admin-image-container:where(:scope, *) {
  position: relative;
  display: inline-block;
}
/* Image Version Panel */
.admin-image-panel:where(:scope, *) {
  background: white;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  min-width: 280px;
  max-width: 350px;
  z-index: 10001;
  overflow: hidden;
}
.image-panel-header:where(:scope, *) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: #2c3e50;
  color: white;
  font-weight: 500;
}
.image-panel-close:where(:scope, *) {
  background: none;
  border: none;
  color: white;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.image-panel-body:where(:scope, *) {
  padding: 1rem;
}
.version-item.selected:where(:scope, *) {
  background: #e8f8f5;
  border-color: #16a085;
}
/* Add Version Modal Form */
.add-version-form .form-group:where(:scope, *) {
  margin-bottom: 1rem;
}
.add-version-form label:where(:scope, *) {
  display: block;
  font-weight: 500;
  font-size: 0.9rem;
  color: #333;
  margin-bottom: 0.35rem;
}
.add-version-form input[type="text"]:where(:scope, *),
.add-version-form select:where(:scope, *),
.add-version-form textarea:where(:scope, *) {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
}
.add-version-form input:focus:where(:scope, *),
.add-version-form select:focus:where(:scope, *),
.add-version-form textarea:focus:where(:scope, *) {
  outline: none;
  border-color: #16a085;
  box-shadow: 0 0 0 3px rgba(22, 160, 133, 0.1);
}
/* === ADMIN SOURCE TAGGING === */

.admin-source-indicator:where(:scope, *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  cursor: pointer;
  font-size: 0.85em;
  padding: 0.15rem 0.3rem;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  vertical-align: middle;
}
h2:hover .admin-source-indicator:where(:scope, *),
h3:hover .admin-source-indicator:where(:scope, *),
h4:hover .admin-source-indicator:where(:scope, *),
h5:hover .admin-source-indicator:where(:scope, *),
.admin-source-indicator:hover:where(:scope, *) {
  opacity: 1;
}
.admin-source-indicator:hover:where(:scope, *) {
  background: #e9ecef;
  border-color: #adb5bd;
}
/* Source Tag Panel */
.admin-source-panel:where(:scope, *) {
  background: white;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  min-width: 260px;
  max-width: 320px;
  z-index: 10001;
  overflow: hidden;
}
.source-panel-header:where(:scope, *) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0.75rem;
  background: #34495e;
  color: white;
  font-size: 0.85rem;
  font-weight: 500;
}
.source-panel-close:where(:scope, *) {
  background: none;
  border: none;
  color: white;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.source-panel-body:where(:scope, *) {
  padding: 0.75rem;
}
.source-list:where(:scope, *) {
  max-height: 200px;
  overflow-y: auto;
}
.source-item:where(:scope, *) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border: 1px solid #eee;
  border-radius: 6px;
  margin-bottom: 0.4rem;
  transition: all 0.15s ease;
}
.source-item:hover:where(:scope, *) {
  background: #f8f9fa;
}
.source-item.tagged:where(:scope, *) {
  background: #e8f8f5;
  border-color: #16a085;
}
.source-color:where(:scope, *) {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  flex-shrink: 0;
}
.source-name:where(:scope, *) {
  flex: 1;
  font-size: 0.9rem;
  color: #333;
}
.source-toggle-btn:where(:scope, *) {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.source-item.tagged .source-toggle-btn:where(:scope, *) {
  background: #16a085;
  border-color: #16a085;
  color: white;
}
.source-toggle-btn:hover:where(:scope, *) {
  background: #e9ecef;
}
.source-actions:where(:scope, *) {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #eee;
}
.manage-sources-btn:where(:scope, *) {
  width: 100%;
  padding: 0.5rem;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  color: #555;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.manage-sources-btn:hover:where(:scope, *) {
  background: #e9ecef;
  border-color: #adb5bd;
}
.no-sources:where(:scope, *) {
  text-align: center;
  color: #888;
  font-size: 0.85rem;
  font-style: italic;
  padding: 0.75rem 0;
}
/* Source Tag Bar (displayed on sections) */
.source-tag-bar:where(:scope, *) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #eee;
}
.source-tag:where(:scope, *) {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 500;
  color: white;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
/* Quick Source Menu (right-click context menu) */
.quick-source-menu:where(:scope, *) {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  min-width: 180px;
  z-index: 10002;
  overflow: hidden;
}
.source-menu-header:where(:scope, *) {
  padding: 0.5rem 0.75rem;
  background: #f8f9fa;
  font-size: 0.75rem;
  font-weight: 500;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid #eee;
}
.source-menu-item:where(:scope, *) {
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.1s ease;
}
.source-menu-item:hover:where(:scope, *) {
  background: #f0f0f0;
}
.source-menu-cancel:where(:scope, *) {
  color: #888;
  border-top: 1px solid #eee;
  text-align: center;
}
/* Source Management Modal */
.source-management:where(:scope, *) {
  max-height: 60vh;
  overflow-y: auto;
}
.source-list-manage:where(:scope, *) {
  margin-bottom: 1.5rem;
}
.source-manage-item:where(:scope, *) {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: #f8f9fa;
  border-radius: 6px;
  margin-bottom: 0.5rem;
}
.source-color-block:where(:scope, *) {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  flex-shrink: 0;
}
.source-manage-item .source-name:where(:scope, *) {
  flex: 1;
  font-weight: 500;
}
.source-type:where(:scope, *) {
  font-size: 0.8rem;
  color: #888;
  text-transform: capitalize;
}
.source-edit-btn:where(:scope, *),
.source-delete-btn:where(:scope, *) {
  padding: 0.3rem 0.6rem;
  font-size: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  transition: all 0.15s ease;
}
.source-edit-btn:hover:where(:scope, *) {
  background: #e8f8f5;
  border-color: #16a085;
}
.source-delete-btn:hover:where(:scope, *) {
  background: #fee;
  border-color: #e74c3c;
  color: #e74c3c;
}
.add-source-section:where(:scope, *) {
  padding-top: 1rem;
  border-top: 2px solid #eee;
}
.add-source-section h4:where(:scope, *) {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  color: #333;
}
.form-row:where(:scope, *) {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.form-row input:where(:scope, *),
.form-row select:where(:scope, *) {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-size: 0.9rem;
}
.form-row input:focus:where(:scope, *),
.form-row select:focus:where(:scope, *) {
  outline: none;
  border-color: #16a085;
}
.source-color-input:where(:scope, *) {
  width: 50px !important;
  flex: 0 0 50px !important;
  padding: 0.25rem !important;
  cursor: pointer;
}
.source-desc-input:where(:scope, *) {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: inherit;
  resize: vertical;
  margin-bottom: 0.75rem;
}
.add-source-btn:where(:scope, *) {
  width: 100%;
  padding: 0.6rem;
  background: #16a085;
  border: none;
  border-radius: 6px;
  color: white;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s ease;
}
.add-source-btn:hover:where(:scope, *) {
  background: #138d75;
}
/* === TRANSFER LOG DASHBOARD === */

.transfer-log-container:where(:scope, *) {
  max-height: 60vh;
  overflow-y: auto;
}
/* Transfer Filters */
.transfer-filters:where(:scope, *) {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: #f8f9fa;
  border-radius: 6px;
}
/* Transfer List */
.transfer-list:where(:scope, *) {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/* Empty state */
.transfer-empty:where(:scope, *) {
  text-align: center;
  padding: 2rem;
  color: #888;
  font-style: italic;
}
/* Transfer log actions */
.transfer-log-actions:where(:scope, *) {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
}
.transfer-action-btn.btn-danger:where(:scope, *) {
  color: #dc3545;
}
.transfer-action-btn.btn-danger:hover:where(:scope, *) {
  background: #fee;
  border-color: #dc3545;
}
/* Admin Modal Tabs */
.admin-tabs:where(:scope, *) {
  display: flex;
  gap: 0;
  margin-bottom: 1rem;
  border-bottom: 2px solid #eee;
}
.admin-tab:where(:scope, *) {
  padding: 0.75rem 1.25rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  color: #666;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.admin-tab:hover:where(:scope, *) {
  color: #333;
  background: #f8f9fa;
}
.admin-tab.active:where(:scope, *) {
  color: #16a085;
  border-bottom-color: #16a085;
  font-weight: 500;
}
.admin-tab-content:where(:scope, *) {
  display: none;
}
.admin-tab-content.active:where(:scope, *) {
  display: block;
}
/* =============================================
   Part-Colors: Sidebar Module Colors
   Uses CSS custom properties set by part-colors.js:
   --pc-main,
--pc-light,
--pc-border,
--pc-text
   ============================================= */

/* --- Pre-JavaScript Fallback Styles ---
   These rules apply BEFORE part-colors.js adds data-pc attributes.
   They use CSS custom properties (set by inline CSS injected by serve.sh)
   so sidebar shows correct module colors IMMEDIATELY on page load.
   Fallback values (after comma) are used if no inline CSS is present. */

/* Fallback for sidebar section headers (before JS adds data-pc-header) */
#quarto-sidebar .sidebar-item-section > .sidebar-item-container:where(:scope, *) {
  margin: 0.5rem 0;
}
#quarto-sidebar .sidebar-item-section > .sidebar-item-container .sidebar-item-text:where(:scope, *) {
  color: var(--pc-text, #ffffff);
  padding: 0.5rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.grid-container h3:where(:scope, *),
.quick-links-grid h3:where(:scope, *) {
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Learning Hubs generated catalog */
.hub-catalog:where(:scope, *) {
  margin: 1.5rem 0 2rem;
  color: #1f2933;
}
.hub-catalog__stats:where(:scope, *) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.hub-catalog__stat:where(:scope, *) {
  border-left: 4px solid #5c0000;
  background: #f6f8fa;
  padding: 0.85rem 1rem;
}
.hub-catalog__stat span:where(:scope, *) {
  display: block;
  color: #52606d;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hub-catalog__stat strong:where(:scope, *) {
  display: block;
  color: #102a43;
  font-size: 1.55rem;
  line-height: 1.15;
}
.hub-catalog__controls:where(:scope, *) {
  display: grid;
  grid-template-columns: minmax(14rem, 2fr) minmax(10rem, 1fr) minmax(12rem, 1.2fr);
  gap: 0.75rem;
  align-items: end;
  margin-bottom: 0.9rem;
}
.hub-catalog__field span:where(:scope, *) {
  display: block;
  margin-bottom: 0.25rem;
  color: #334e68;
  font-size: 0.82rem;
  font-weight: 700;
}
.hub-catalog__field input:where(:scope, *),
.hub-catalog__field select:where(:scope, *) {
  width: 100%;
  min-height: 2.5rem;
  border: 1px solid #bcccdc;
  border-radius: 6px;
  background: #fff;
  color: #102a43;
  font-size: 0.95rem;
  line-height: 1.25;
  padding: 0.45rem 0.65rem;
}
.hub-catalog__field input:focus:where(:scope, *),
.hub-catalog__field select:focus:where(:scope, *) {
  border-color: #0f766e;
  outline: 3px solid rgba(15, 118, 110, 0.18);
}
.hub-catalog__books:where(:scope, *) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1rem;
}
.hub-catalog__book:where(:scope, *) {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.15rem;
  border: 1px solid #d9e2ec;
  border-left: 4px solid var(--hub-book-color, #2c3e50);
  border-radius: 6px;
  background: #fff;
  color: #243b53;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 0.35rem 0.6rem;
  cursor: pointer;
}
.hub-catalog__book:hover:where(:scope, *),
.hub-catalog__book.is-active:where(:scope, *) {
  background: #f0f7f7;
  border-color: var(--hub-book-color, #2c3e50);
}
.hub-catalog__book strong:where(:scope, *) {
  color: #52606d;
  font-size: 0.78rem;
}
.hub-catalog__content:where(:scope, *) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.85fr);
  gap: 1rem;
  align-items: start;
}
.hub-catalog__panel:where(:scope, *) {
  min-width: 0;
}
.hub-catalog__panel-heading:where(:scope, *) {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: baseline;
  border-bottom: 2px solid #e6edf3;
  margin-bottom: 0.7rem;
  padding-bottom: 0.35rem;
}
.hub-catalog__panel-heading h3:where(:scope, *) {
  margin: 0;
  color: #102a43;
  font-size: 1.05rem;
  line-height: 1.25;
}
.hub-catalog__panel-heading span:where(:scope, *) {
  color: #52606d;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}
.hub-catalog__part-list:where(:scope, *) {
  display: grid;
  gap: 0.65rem;
}
.hub-catalog__part:where(:scope, *) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  border-left: 4px solid var(--hub-part-color, #2c3e50);
  background: #f8fafc;
  padding: 0.75rem 0.85rem;
}
.hub-catalog__part-title:where(:scope, *) {
  color: #0f4c81;
  font-weight: 800;
  text-decoration: none;
}
.hub-catalog__part-title:hover:where(:scope, *) {
  color: #0f766e;
  text-decoration: underline;
}
.hub-catalog__part p:where(:scope, *) {
  margin: 0.25rem 0 0;
  color: #52606d;
  font-size: 0.88rem;
  line-height: 1.35;
}
.hub-catalog__part-meta:where(:scope, *) {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  align-items: flex-end;
  justify-content: center;
  color: #52606d;
  font-size: 0.78rem;
  text-align: right;
}
.hub-catalog__part-meta strong:where(:scope, *) {
  color: #243b53;
  font-size: 0.85rem;
  white-space: nowrap;
}
.hub-catalog__chapter-list:where(:scope, *) {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding-left: 1.4rem;
}
.hub-catalog__chapter-list li:where(:scope, *) {
  padding-left: 0.1rem;
}
.hub-catalog__chapter-list a:where(:scope, *) {
  color: #0f4c81;
  font-weight: 800;
  text-decoration: none;
}
.hub-catalog__chapter-list a:hover:where(:scope, *) {
  color: #0f766e;
  text-decoration: underline;
}
.hub-catalog__chapter-list span:where(:scope, *) {
  display: block;
  color: #627d98;
  font-size: 0.8rem;
  line-height: 1.35;
}
.hub-catalog__empty:where(:scope, *) {
  margin: 0;
  border-left: 4px solid #829ab1;
  background: #f6f8fa;
  color: #334e68;
  padding: 0.9rem 1rem;
}

@media (max-width: 900px) {
  .hub-catalog__controls:where(:scope, *),
  .hub-catalog__content:where(:scope, *) {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .hub-catalog__stats:where(:scope, *) {
    grid-template-columns: 1fr;
  }

  .hub-catalog__part:where(:scope, *) {
    grid-template-columns: 1fr;
  }

  .hub-catalog__part-meta:where(:scope, *) {
    align-items: flex-start;
    text-align: left;
  }
}
#quarto-sidebar .sidebar-item-section > .sidebar-item-container .sidebar-item-toggle:where(:scope, *) {
  color: var(--pc-text, #ffffff);
  background: transparent;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}
/* Fallback for sidebar links (before JS adds data-pc) */
#quarto-sidebar .sidebar-item a:not([data-pc]):where(:scope, *) {
  background: var(--pc-light, #f0f4f8);
  color: var(--pc-fg, #2c3e50);
  border-left: 2px solid var(--pc-border, #5a7a9a);
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  /* NO transition here - prevents visible animation when JS adds [data-pc] */
  /* Match [data-pc] rules to prevent layout shift */
  display: block;
  line-height: 1.3;
  font-weight: 500;
  margin: 0;
  text-decoration: none;
}
#quarto-sidebar .sidebar-item a:not([data-pc]):hover:where(:scope, *) {
  background: var(--pc-main, #2c3e50);
  color: var(--pc-text, #ffffff);
  transform: translateX(2px);
  font-weight: 600;
}
/* Fallback active state (before JS adds data-pc) - white text on dark background */
#quarto-sidebar .sidebar-item a:not([data-pc]).active:where(:scope, *) {
  background: var(--pc-main, #2c3e50);
  color: var(--pc-text, #ffffff) !important;
  font-weight: 600;
}
#quarto-sidebar .sidebar-item a:not([data-pc]).active .menu-text:where(:scope, *),
#quarto-sidebar .sidebar-item a:not([data-pc]).active .chapter-number:where(:scope, *),
#quarto-sidebar .sidebar-item a:not([data-pc]).active .chapter-title:where(:scope, *),
#quarto-sidebar .sidebar-item a:not([data-pc]).active span:where(:scope, *) {
  color: var(--pc-text, #ffffff) !important;
}
/* Fallback for sidebar list items (before JS adds data-pc) */
#quarto-sidebar .sidebar-item li:not([data-pc]):where(:scope, *) {
  margin: 0;
  padding: 0;
}
/* --- End Pre-JavaScript Fallback Styles --- */

/* Common styling for all part-colored sidebar links */
#quarto-sidebar .sidebar-item a[data-pc]:where(:scope, *) {
  font-weight: 500;
  padding: 0.15rem 0.4rem;
  margin: 0;
  border-radius: 3px;
  display: block;
  line-height: 1.3;
  text-decoration: none;
  transition: transform 0.1s ease;
  background: var(--pc-light, #f0f4f8);
  color: var(--pc-fg, #2c3e50);
  border-left: 2px solid var(--pc-border, #5a7a9a);
}
#quarto-sidebar .sidebar-item a[data-pc]:hover:where(:scope, *) {
  transform: translateX(2px);
  font-weight: 600;
}
/* Ensure nested spans in active links also get white text */
#quarto-sidebar .sidebar-item a[data-pc].active .menu-text:where(:scope, *),
#quarto-sidebar .sidebar-item a[data-pc].active .chapter-number:where(:scope, *),
#quarto-sidebar .sidebar-item a[data-pc].active .chapter-title:where(:scope, *),
#quarto-sidebar .sidebar-item a[data-pc].active span:where(:scope, *) {
  color: var(--pc-text, #ffffff) !important;
}
#quarto-sidebar .sidebar-item a[data-pc] .menu-text:where(:scope, *),
#quarto-sidebar .sidebar-item a[data-pc] span:where(:scope, *) {
  color: inherit;
}
#quarto-sidebar li[data-pc]:where(:scope, *) {
  margin: 0;
  padding: 0;
}
/* Part section containers - unified bar design */
#quarto-sidebar .sidebar-item-section[data-pc-section]:where(:scope, *) {
  margin: 0.5rem 0;
  padding: 0;
}
#quarto-sidebar .sidebar-item-section[data-pc-section] > .sidebar-item-container:where(:scope, *) {
  display: flex;
  align-items: center;
  background: var(--pc-main, #2c3e50);
  border-radius: 6px;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
/* Part section headers - NO separate background,
uses container */
#quarto-sidebar [data-pc-header]:where(:scope, *) {
  padding: 0.5rem 0.75rem;
  display: block;
  flex: 1;
  min-width: 0;
  border-radius: 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
  text-decoration: none;
  background: transparent;
  color: var(--pc-text, #ffffff);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.2;
}
#quarto-sidebar [data-pc-header] .menu-text:where(:scope, *) {
  color: inherit;
}
#quarto-sidebar .sidebar-item-section > .sidebar-item-container > .sidebar-item-text:where(:scope, *),
#quarto-sidebar .sidebar-item-section > .sidebar-item-container > a.sidebar-link:where(:scope, *),
#quarto-sidebar .sidebar-item-section > .sidebar-item-container .menu-text:where(:scope, *),
#quarto-sidebar .sidebar-part-title:where(:scope, *),
.sidebar-part-title:where(:scope, *) {
  color: color-mix(in srgb, var(--pc-main, #2c3e50) 48%, #111827) !important;
}
/* Part toggle buttons - NO separate background,
uses container */
#quarto-sidebar [data-pc-toggle]:where(:scope, *) {
  background: transparent;
  color: var(--pc-text, #ffffff);
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.5rem 0.6rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Hover effect on the container */
#quarto-sidebar .sidebar-item-section[data-pc-section] > .sidebar-item-container:hover:where(:scope, *) {
  filter: brightness(1.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
/* ==========================================================================
   INLINE KNOWLEDGE CHECKS
   Moved from inline-knowledge-checks.js to prevent style flash (FOUC)
   ========================================================================== */

.inline-knowledge-check:where(:scope, *) {
  background: var(--flat-surface);
  border: 1px solid var(--flat-border);
  border-left: 3px solid var(--interactive-knowledge-check);
  border-radius: var(--flat-radius-lg);
  box-shadow: var(--flat-shadow);
  padding: 1rem;
  margin: 1.25rem 0;
  color: var(--flat-text);
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast);
}
.inline-knowledge-check:hover:where(:scope, *) {
  border-color: var(--flat-border-strong);
  border-left-color: var(--interactive-knowledge-check);
}
.ikc-header:where(:scope, *) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--flat-border);
}
.ikc-icon:where(:scope, *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  border: 1px solid var(--flat-border);
  border-radius: var(--flat-radius-md);
  background: var(--interactive-knowledge-check-soft);
  color: var(--interactive-knowledge-check-ink);
}
.ikc-icon svg:where(:scope, *) {
  width: 1.15rem;
  height: 1.15rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ikc-title:where(:scope, *) {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--flat-text);
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25;
}
.ikc-xp:where(:scope, *) {
  background: var(--interactive-knowledge-check-soft);
  color: var(--interactive-knowledge-check-ink);
  flex: 0 0 auto;
  max-width: 100%;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--flat-border);
  border-radius: var(--flat-radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}
.ikc-xp-earned:where(:scope, *) {
  background: var(--interactive-knowledge-check-soft) !important;
  color: var(--interactive-knowledge-check-ink) !important;
}
.ikc-xp-missed:where(:scope, *) {
  background: var(--flat-surface-muted) !important;
  color: var(--flat-text-subtle) !important;
}
.ikc-attempts:where(:scope, *) {
  background: var(--flat-surface-muted);
  color: var(--flat-text-muted);
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--flat-border);
  border-radius: var(--flat-radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  margin-right: auto;
}
.ikc-mode-quiz .ikc-header:where(:scope, *) {
  background: transparent;
  color: var(--flat-text);
}
.ikc-mode-quiz .ikc-title:where(:scope, *),
.ikc-mode-quiz .ikc-attempts:where(:scope, *) {
  color: inherit !important;
}
.ikc-incorrect-attempt:where(:scope, *) {
  border-color: var(--danger) !important;
  background: #fdeceb !important;
}
.ikc-question:where(:scope, *) {
  font-size: var(--font-size-base);
  color: var(--flat-text);
  margin-bottom: 0.9rem;
  line-height: 1.5;
}
.ikc-options:where(:scope, *) {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.ikc-option:where(:scope, *) {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0.65rem 0.75rem;
  background: var(--flat-surface);
  border: 1px solid var(--flat-border);
  border-radius: var(--flat-radius-md);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
  text-align: left;
  font-size: var(--font-size-sm);
  color: var(--flat-text);
}
@media (hover: hover) and (pointer: fine) {
  .ikc-option:hover:not(.ikc-disabled):not(.ikc-selected):not(.ikc-correct):not(.ikc-incorrect):not(.ikc-missed):where(:scope, *) {
    border-color: var(--flat-accent);
  }
}
.ikc-option-letter:where(:scope, *) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  flex: 0 0 1.6rem;
  border: 1px solid var(--flat-border);
  border-radius: var(--flat-radius-md);
  background: var(--flat-surface-muted);
  color: var(--flat-text-muted);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}
.ikc-option-text:where(:scope, *) {
  flex: 1;
}
.ikc-disabled:where(:scope, *) {
  cursor: default;
  opacity: 1;
}
.ikc-correct:where(:scope, *) {
  border-color: var(--interactive-knowledge-check) !important;
  background: var(--interactive-knowledge-check-soft) !important;
}
.ikc-correct .ikc-option-letter:where(:scope, *) {
  background: var(--interactive-knowledge-check);
  border-color: var(--interactive-knowledge-check);
  color: #ffffff;
}
.ikc-incorrect:where(:scope, *) {
  border-color: var(--danger) !important;
  background: #fdeceb !important;
}
.ikc-incorrect .ikc-option-letter:where(:scope, *) {
  background: var(--danger);
  border-color: var(--danger);
  color: #ffffff;
}
.ikc-feedback:where(:scope, *) {
  margin-top: 0.9rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--flat-border);
  border-radius: var(--flat-radius-md);
  background: var(--flat-surface-muted);
  font-size: var(--font-size-sm);
}
.ikc-feedback-parts:where(:scope, *) {
  display: grid;
  grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr);
  gap: 0.3rem 0.7rem;
  margin: 0.75rem 0 0;
  overflow-wrap: anywhere;
}
.ikc-feedback-parts dt:where(:scope, *) { font-weight: 700; }
.ikc-feedback-parts dd:where(:scope, *) { margin: 0; }
.ikc-retry-panel:where(:scope, *), .ikc-revise-panel:where(:scope, *) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.ikc-retry-panel p:where(:scope, *), .ikc-revise-panel p:where(:scope, *) { flex-basis: 100%; margin: 0; }
.inline-knowledge-check[data-try-first-started="true"] .ikc-feedback:where(:scope, *) {
  border: 0;
  background: transparent;
  padding: 0;
}
.ikc-retry-panel .ikc-reason:where(:scope, *) {
  width: 100%;
  min-height: 2.75rem;
  font-size: var(--font-size-sm);
}
.ikc-reason:where(:scope, *), .ikc-skip-reason:where(:scope, *), .ikc-show-answer:where(:scope, *) {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--flat-border);
  border-radius: var(--flat-radius-md);
  background: var(--flat-surface-muted);
  color: var(--flat-text);
  text-align: left;
  cursor: pointer;
}
.ikc-skip-reason:where(:scope, *) { min-height: 2.75rem; margin-top: 0.25rem; background: var(--flat-surface); }
.ikc-corrective-note:where(:scope, *) {
  margin-top: 0.7rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--flat-radius-md);
  background: var(--flat-surface-muted);
  color: var(--flat-text);
}
.ikc-try-changed:where(:scope, *) {
  display: inline-block;
  min-height: 2.75rem;
  margin-top: 0.7rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--interactive-knowledge-check);
  border-radius: var(--flat-radius-md);
  background: var(--interactive-knowledge-check);
  color: #fff;
  font: inherit;
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}
.ikc-try-changed:hover:where(:scope, *) { filter: brightness(0.9); }
.ikc-reason:hover:where(:scope, *), .ikc-skip-reason:hover:where(:scope, *), .ikc-show-answer:hover:where(:scope, *) {
  border-color: var(--interactive-knowledge-check);
}
.ikc-revise-panel .ikc-option:where(:scope, *) { width: 100%; }
@media (max-width: 520px) {
  .ikc-feedback-parts:where(:scope, *) { grid-template-columns: minmax(0, 1fr); }
}
.ikc-result-correct:where(:scope, *) {
  color: var(--interactive-knowledge-check-ink);
  font-weight: var(--font-weight-bold);
}
.ikc-result-incorrect:where(:scope, *) {
  color: #9d2f24;
  font-weight: var(--font-weight-bold);
}
.ikc-explanation:where(:scope, *) {
  margin-top: 0.9rem;
  padding: 0.75rem 0.8rem;
  background: var(--flat-surface-muted);
  border: 1px solid var(--flat-border);
  border-left: 3px solid var(--interactive-knowledge-check);
  border-radius: var(--flat-radius-md);
  font-size: var(--font-size-sm);
  color: var(--flat-text-muted);
}
.ikc-explanation summary:where(:scope, *) {
  cursor: pointer;
  color: var(--flat-text);
  font-weight: var(--font-weight-bold);
}
.ikc-explanation-body:where(:scope, *) {
  margin-top: 0.5rem;
}
.ikc-celebration:where(:scope, *) {
  position: absolute;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--flat-border);
  border-radius: var(--flat-radius-md);
  background: var(--interactive-knowledge-check-soft);
  color: var(--interactive-knowledge-check-ink);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  pointer-events: none;
}
.ikc-wrapper:where(:scope, *) {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* IKC Multi-select mode */
.ikc-instruction:where(:scope, *) {
  font-size: var(--font-size-sm);
  color: var(--flat-text-subtle);
  margin-bottom: 0.6rem;
}
.ikc-option.ikc-selected .ikc-checkbox:where(:scope, *) {
  background: var(--flat-accent);
  border-color: var(--flat-accent);
}
.ikc-option.ikc-selected .ikc-checkbox:where(:scope, *)::after {
  content: "\2713";
}
.ikc-option.ikc-selected:where(:scope, *) {
  border-color: var(--flat-accent);
  background: var(--flat-surface-muted);
}
.ikc-option.ikc-disabled.ikc-correct .ikc-checkbox:where(:scope, *) {
  background: var(--interactive-knowledge-check);
  border-color: var(--interactive-knowledge-check);
}
.ikc-option.ikc-disabled.ikc-correct .ikc-checkbox:where(:scope, *)::after {
  content: "\2713";
}
.ikc-option.ikc-disabled.ikc-incorrect .ikc-checkbox:where(:scope, *) {
  background: var(--danger);
  border-color: var(--danger);
}
.ikc-option.ikc-disabled.ikc-incorrect .ikc-checkbox:where(:scope, *)::after {
  content: "\2717";
}
.ikc-option.ikc-missed:where(:scope, *) {
  border-color: var(--warning) !important;
  background: #fff6d6 !important;
}
.ikc-option.ikc-missed .ikc-checkbox:where(:scope, *) {
  background: var(--warning);
  border-color: var(--warning);
}
.ikc-option.ikc-missed .ikc-checkbox:where(:scope, *)::after {
  content: "!";
  font-weight: bold;
}
.ikc-submit-btn:where(:scope, *) {
  margin-top: 0.65rem;
  min-height: var(--touch-target-min);
  padding: 0.6rem 1rem;
  background: var(--interactive-knowledge-check);
  color: #ffffff;
  border: 1px solid var(--interactive-knowledge-check);
  border-radius: var(--flat-radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast);
  align-self: flex-start;
}
.ikc-submit-btn:hover:not(:disabled):where(:scope, *) {
  background: var(--interactive-knowledge-check-ink);
  border-color: var(--interactive-knowledge-check-ink);
}
.ikc-submit-btn:disabled:where(:scope, *) {
  background: var(--flat-surface-muted);
  border-color: var(--flat-border);
  color: var(--flat-text-subtle);
  cursor: not-allowed;
}
.ikc-option:focus-visible:where(:scope, *),
.ikc-submit-btn:focus-visible:where(:scope, *) {
  outline: 3px solid var(--flat-focus-ring);
  outline-offset: 2px;
}
/* ==========================================================================
   TOAST NOTIFICATIONS
   Error handler toast animations
   Moved from error-handler.js to prevent style flash (FOUC)
   ========================================================================== */

@keyframes iotclass-toast-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes iotclass-toast-slide-out {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}
/* Export toast animation (from export-utils.js) */
@keyframes fadeInOut-a1bcf8099af9576a {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  15% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  85% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
}
/* Badge notification animations (from badge-system.js) */
@keyframes slideIn-733f921d4839e9da {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}
/* ==========================================================================
   GAMIFICATION STYLES
   Moved from gamification.js to prevent style flash (FOUC)
   ========================================================================== */

.streak-indicator:where(:scope, *) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
  color: white;
  padding: 4px 10px;
  border-radius: 15px;
  font-size: 13px;
  font-weight: bold;
  margin-left: 10px;
  cursor: pointer;
}
.streak-flame:where(:scope, *) {
  font-size: 16px;
}
.gamification-notification:where(:scope, *) {
  position: static;
  width: min(100%, 48rem);
  margin: 1rem auto;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  padding: 15px 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  opacity: 0;
  transform: none;
  transition: opacity 0.3s ease;
  z-index: auto;
}
.gamification-notification.show:where(:scope, *) {
  opacity: 1;
}
.badge-notification:where(:scope, *) {
  background: linear-gradient(135deg, #fef5e7 0%, #fcf3cf 100%);
  border: 2px solid #f39c12;
}
.xp-notification:where(:scope, *) {
  background: linear-gradient(135deg, #e8f6f3 0%, #d5f4e6 100%);
  border: 2px solid #27ae60;
  padding: 10px 20px;
}
.xp-amount:where(:scope, *) {
  font-size: 20px;
  font-weight: bold;
  color: #27ae60;
}
.xp-reason:where(:scope, *) {
  color: #666;
  font-size: 13px;
  margin-left: 10px;
}
.challenge-notification:where(:scope, *) {
  background: linear-gradient(135deg, #e8f6f3 0%, #d5f4e6 100%);
  border: 2px solid #27ae60;
}
.level-notification:where(:scope, *) {
  background: linear-gradient(135deg, #e8daef 0%, #d2b4de 100%);
  border: 2px solid #9b59b6;
}
.gn-icon:where(:scope, *) {
  font-size: 36px;
}
.gn-title:where(:scope, *) {
  font-size: 11px;
  text-transform: uppercase;
  color: #666;
  letter-spacing: 1px;
}
.gn-name:where(:scope, *) {
  font-size: 16px;
  font-weight: bold;
  color: #2c3e50;
}
.gn-desc:where(:scope, *) {
  font-size: 12px;
  color: #666;
}
.gn-xp:where(:scope, *) {
  font-size: 14px;
  font-weight: bold;
  color: #27ae60;
  margin-top: 5px;
}
.daily-challenge-widget:where(:scope, *) {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  width: 280px;
  z-index: 1000;
  overflow: hidden;
}
.daily-challenge-widget.collapsed .dcw-content:where(:scope, *) {
  display: none;
}
.daily-challenge-widget.completed:where(:scope, *) {
  border: 2px solid #27ae60;
}
.dcw-header:where(:scope, *) {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  color: white;
  cursor: pointer;
}
.dcw-icon:where(:scope, *) {
  font-size: 20px;
}
.dcw-title:where(:scope, *) {
  flex: 1;
  font-weight: bold;
}
.dcw-toggle:where(:scope, *) {
  font-size: 12px;
  transition: transform 0.3s;
}
.collapsed .dcw-toggle:where(:scope, *) {
  transform: rotate(-90deg);
}
.dcw-content:where(:scope, *) {
  padding: 15px;
}
.dcw-name:where(:scope, *) {
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 5px;
}
.dcw-desc:where(:scope, *) {
  font-size: 13px;
  color: #666;
  margin-bottom: 10px;
}
.dcw-progress-bar:where(:scope, *) {
  background: #eee;
  border-radius: 10px;
  height: 10px;
  overflow: hidden;
}
.dcw-progress-fill:where(:scope, *) {
  background: linear-gradient(90deg, #3498db, #2980b9);
  height: 100%;
  transition: width 0.5s ease;
}
.completed .dcw-progress-fill:where(:scope, *) {
  background: linear-gradient(90deg, #27ae60, #1e8449);
}
.dcw-progress-text:where(:scope, *) {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
  text-align: center;
}
.dcw-reward:where(:scope, *) {
  font-size: 13px;
  font-weight: bold;
  color: #f39c12;
  margin-top: 10px;
  text-align: center;
}

@media (max-width: 768px) {
  .daily-challenge-widget:where(:scope, *) {
    bottom: 10px;
    left: 10px;
    right: 10px;
    width: auto;
  }

  .gamification-notification:where(:scope, *) {
    width: 100%;
    margin: 0.75rem 0;
  }
}
/* ==========================================================================
   KNOWLEDGE GRAPH SIDEBAR
   Styles for sidebar-panel.js knowledge map component
   Added Feb 2026 - these classes were missing,
causing unstyled sidebar
   ========================================================================== */

.kg-sidebar:where(:scope, *) {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  transition: width 0.3s ease;
}
.kg-sidebar-collapsed:where(:scope, *) {
  width: 40px !important;
}
.kg-sidebar-collapsed .kg-sidebar-content:where(:scope, *) {
  display: none;
}
.kg-sidebar-toggle:where(:scope, *) {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 28px;
  height: 28px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #64748b;
  transition: all 0.2s;
  z-index: 10;
}
.kg-sidebar-toggle:hover:where(:scope, *) {
  background: #f1f5f9;
  border-color: #94a3b8;
}
.kg-sidebar-toggle-icon:where(:scope, *) {
  line-height: 1;
}
.kg-sidebar-content:where(:scope, *) {
  padding: 50px 12px 12px;
  overflow-y: auto;
  flex: 1;
}
.kg-sidebar-section:where(:scope, *) {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
}
.kg-sidebar-section:last-child:where(:scope, *) {
  border-bottom: none;
  margin-bottom: 0;
}
.kg-sidebar-label:where(:scope, *) {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b;
  margin-bottom: 8px;
}
.kg-search-input:where(:scope, *) {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 14px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.kg-search-input:focus:where(:scope, *) {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.kg-search-input:where(:scope, *)::placeholder {
  color: #94a3b8;
}
/* View Buttons */
.kg-view-buttons:where(:scope, *) {
  display: flex;
  gap: 4px;
}
.kg-view-btn:where(:scope, *) {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: white;
  cursor: pointer;
  font-size: 11px;
  color: #64748b;
  transition: all 0.2s;
}
.kg-view-btn:hover:where(:scope, *) {
  background: #f8fafc;
  border-color: #94a3b8;
}
.kg-view-btn.active:where(:scope, *) {
  background: #1e3a5f;
  border-color: #1e3a5f;
  color: white;
}
.kg-view-btn svg:where(:scope, *) {
  width: 16px;
  height: 16px;
}
/* Collapsible Sections */
.kg-sidebar-collapsible .kg-section-content:where(:scope, *) {
  max-height: 300px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.kg-sidebar-collapsible.collapsed .kg-section-content:where(:scope, *) {
  max-height: 0;
  padding: 0;
}
.kg-section-header:where(:scope, *) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 8px 0;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  text-align: left;
}
.kg-section-header:hover:where(:scope, *) {
  color: #1e3a5f;
}
.kg-section-toggle:where(:scope, *) {
  font-size: 10px;
  color: #94a3b8;
  transition: transform 0.2s;
}
.kg-section-content:where(:scope, *) {
  padding-top: 8px;
}
/* Filter Items */
.kg-filter-item:where(:scope, *) {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
  color: #475569;
  cursor: pointer;
  min-width: 0;
  overflow-wrap: anywhere;
}
.kg-filter-item:hover:where(:scope, *) {
  color: #1e3a5f;
}
.kg-filter-item input[type="checkbox"]:where(:scope, *) {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.kg-part-filter:where(:scope, *) {
  padding: 4px 0;
}
.kg-part-color:where(:scope, *) {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.kg-part-filters:where(:scope, *) {
  max-height: 200px;
  overflow-x: hidden;
  overflow-y: auto;
  margin-bottom: 8px;
}
.kg-select-all-btn:where(:scope, *) {
  padding: 4px 8px;
  margin-right: 4px;
  margin-top: 4px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: white;
  font-size: 11px;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s;
}
.kg-select-all-btn:hover:where(:scope, *) {
  background: #f1f5f9;
  border-color: #94a3b8;
}
/* Difficulty Badges */
.kg-difficulty-badge:where(:scope, *) {
  font-size: 10px;
}
.kg-difficulty-beginner:where(:scope, *) {
  color: #16a085;
}
.kg-difficulty-intermediate:where(:scope, *) {
  color: #e67e22;
}
.kg-difficulty-advanced:where(:scope, *) {
  color: #8e44ad;
}
.kg-difficulty-filters:where(:scope, *),
.kg-feature-filters:where(:scope, *) {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Zoom Controls */
.kg-zoom-controls:where(:scope, *) {
  display: flex;
  gap: 4px;
}
.kg-zoom-btn:where(:scope, *) {
  width: 32px;
  height: 32px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: white;
  cursor: pointer;
  font-size: 16px;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.kg-zoom-btn:hover:where(:scope, *) {
  background: #f1f5f9;
  border-color: #94a3b8;
}
/* Legend */
.kg-legend-items:where(:scope, *) {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kg-legend-item:where(:scope, *) {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #64748b;
}
.kg-legend-shape:where(:scope, *) {
  width: 14px;
  text-align: center;
}
.kg-legend-circle:where(:scope, *) {
  color: #16a085;
}
.kg-legend-square:where(:scope, *) {
  color: #e67e22;
}
.kg-legend-hexagon:where(:scope, *) {
  color: #8e44ad;
}
.kg-legend-divider:where(:scope, *) {
  height: 1px;
  background: #e2e8f0;
  margin: 4px 0;
}
.kg-legend-line:where(:scope, *) {
  width: 20px;
  font-size: 10px;
  letter-spacing: -1px;
}
.kg-legend-solid:where(:scope, *) {
  color: #c0392b;
}
.kg-legend-dashed:where(:scope, *) {
  color: #95a5a6;
}
.kg-legend-dotted:where(:scope, *) {
  color: #3498db;
}
/* Stats */
.kg-stats:where(:scope, *) {
  background: #f8fafc;
  border-radius: 8px;
  padding: 12px !important;
  border-bottom: none !important;
}
.kg-stat:where(:scope, *) {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.kg-stat-value:where(:scope, *) {
  font-size: 24px;
  font-weight: 700;
  color: #1e3a5f;
}
.kg-stat-label:where(:scope, *) {
  font-size: 12px;
  color: #64748b;
}
/* Responsive */
@media (max-width: 768px) {
  .kg-sidebar:where(:scope, *) {
    width: 100% !important;
    max-height: 40vh;
    border-left: none;
    border-top: 1px solid #e2e8f0;
  }

  .kg-sidebar-collapsed:where(:scope, *) {
    max-height: 40px;
  }

  .kg-sidebar-toggle:where(:scope, *) {
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
  }

  .kg-sidebar-content:where(:scope, *) {
    padding-top: 40px;
  }
}
/* =============================================
   Mobile TOC Toggle
   =============================================
   Floating toggle button and slide-out drawer
   for Table of Contents on mobile/tablet viewports
   ============================================= */

/* Toggle Button */
.toc-mobile-toggle:where(:scope, *) {
  display: none; /* Hidden by default, shown via JS */
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1040;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--ieee-navy, #2c3e50);
  color: white;
  border: none;
  border-radius: var(--radius-xl, 12px);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.15),
    0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.toc-mobile-toggle:hover:where(:scope, *) {
  background: var(--ieee-teal, #16a085);
  transform: translateY(-2px);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.2),
    0 3px 6px rgba(0, 0, 0, 0.15);
}
.toc-mobile-toggle:active:where(:scope, *) {
  transform: translateY(0);
}
.toc-mobile-toggle.active:where(:scope, *) {
  background: var(--ieee-teal, #16a085);
}
.toc-mobile-toggle .toc-icon:where(:scope, *) {
  flex-shrink: 0;
}
.toc-mobile-toggle .toc-toggle-text:where(:scope, *) {
  white-space: nowrap;
}
.toc-mobile-toggle-inline:where(:scope, *) {
  position: static;
  bottom: auto;
  right: auto;
  z-index: auto;
  padding: 0.35rem 0.55rem;
  min-width: 34px;
  min-height: 34px;
  border-radius: 5px;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.85);
}
.toc-mobile-toggle-inline:hover:where(:scope, *),
.toc-mobile-toggle-inline:active:where(:scope, *) {
  background: rgba(255, 255, 255, 0.25);
  transform: none;
  box-shadow: none;
}
.toc-mobile-toggle-inline .toc-toggle-text:where(:scope, *) {
  display: none;
}
/* Hide text on very small screens,
show just icon */
@media (max-width: 400px) {
  .toc-mobile-toggle:where(:scope, *) {
    padding: 14px;
    border-radius: 50%;
  }
  .toc-mobile-toggle .toc-toggle-text:where(:scope, *) {
    display: none;
  }
}
/* Backdrop Overlay */
.toc-mobile-backdrop:where(:scope, *) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1045;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}
.toc-mobile-backdrop.visible:where(:scope, *) {
  opacity: 1;
  visibility: visible;
}
/* Drawer */
.toc-mobile-drawer:where(:scope, *) {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 85vw;
  max-width: 360px;
  background: white;
  z-index: 1050;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}
.toc-mobile-drawer.open:where(:scope, *) {
  transform: translateX(0);
}
/* Drawer Header */
.toc-drawer-header:where(:scope, *) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-200, #e2e8f0);
  background: var(--gray-50, #f8fafc);
  flex-shrink: 0;
}
.toc-drawer-title:where(:scope, *) {
  font-size: 16px;
  font-weight: 600;
  color: var(--ieee-navy, #2c3e50);
}
.toc-drawer-close:where(:scope, *) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-md, 6px);
  color: var(--gray-500, #64748b);
  cursor: pointer;
  transition: all 0.15s ease;
}
.toc-drawer-close:hover:where(:scope, *) {
  background: var(--gray-100, #f1f5f9);
  color: var(--gray-700, #334155);
}
.toc-drawer-close:focus-visible:where(:scope, *) {
  outline: 2px solid var(--ieee-teal, #16a085);
  outline-offset: 2px;
}
/* Drawer Content */
.toc-drawer-content:where(:scope, *) {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0;
  -webkit-overflow-scrolling: touch;
}
/* Style the cloned TOC inside drawer */
.toc-drawer-content #toc-mobile-content:where(:scope, *) {
  display: block !important;
  position: static !important;
  width: 100% !important;
  padding: 0 16px;
  background: transparent;
  box-shadow: none;
}
.toc-drawer-content #toc-mobile-content :is(#TOC, #TOC-mobile):where(:scope, *) {
  padding: 0;
}
.toc-drawer-content #toc-mobile-content :is(#TOC, #TOC-mobile) .toc-title:where(:scope, *) {
  display: none; /* We have our own header */
}
.toc-drawer-content #toc-mobile-content :is(#TOC, #TOC-mobile) ul:where(:scope, *) {
  padding-left: 0;
  margin: 0;
}
.toc-drawer-content #toc-mobile-content :is(#TOC, #TOC-mobile) ul ul:where(:scope, *) {
  padding-left: 16px;
}
.toc-drawer-content #toc-mobile-content :is(#TOC, #TOC-mobile) li:where(:scope, *) {
  margin-bottom: 4px;
}
.toc-drawer-content #toc-mobile-content :is(#TOC, #TOC-mobile) a:where(:scope, *) {
  display: block;
  padding: 10px 12px;
  color: var(--gray-700, #334155);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
  border-radius: var(--radius-md, 6px);
  transition: all 0.15s ease;
}
.toc-drawer-content #toc-mobile-content :is(#TOC, #TOC-mobile) a:hover:where(:scope, *) {
  background: var(--gray-100, #f1f5f9);
  color: var(--ieee-teal, #16a085);
}
.toc-drawer-content #toc-mobile-content :is(#TOC, #TOC-mobile) a.active:where(:scope, *) {
  background: rgba(22, 160, 133, 0.1);
  color: var(--ieee-teal, #16a085);
  font-weight: 500;
}
/* Responsive adjustments */
@media (min-width: 992px) {
  /* Hide mobile TOC elements on large screens */
  .toc-mobile-toggle:where(:scope, *),
  .toc-mobile-drawer:where(:scope, *),
  .toc-mobile-backdrop:where(:scope, *) {
    display: none !important;
  }
}
/* Show toggle on medium/small screens */
@media (max-width: 991.98px) {
  /* Keep the original TOC hidden on smaller screens */
  #quarto-margin-sidebar:where(:scope, *) {
    display: none !important;
  }

  /* Ensure toggle is visible when JS enables it */
  body.toc-mobile-ready .toc-mobile-toggle:where(:scope, *) {
    display: flex;
  }
}
/* Safe area insets for notched devices */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .toc-mobile-toggle:where(:scope, *) {
    bottom: calc(24px + env(safe-area-inset-bottom));
    right: calc(24px + env(safe-area-inset-right));
  }

  .toc-mobile-drawer:where(:scope, *) {
    padding-bottom: env(safe-area-inset-bottom);
  }
}
/* ============================================
   TOC Toggle Button - Collapsible Right Sidebar
   ============================================ */

/* TOC Toggle Button */
.toc-toggle-btn:where(:scope, *) {
  position: fixed;
  top: 70px;
  right: 20px;
  z-index: 1050;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--pc-main, #2c3e50);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
}
.toc-toggle-btn:hover:where(:scope, *) {
  background: var(--pc-main, #2c3e50);
  filter: brightness(1.1);
  transform: scale(1.05);
}
.toc-toggle-btn svg:where(:scope, *) {
  width: 20px;
  height: 20px;
}
/* ===========================================
   TOC Layout - Let Quarto handle it naturally
   Grid settings come from _quarto.yml
   =========================================== */

/* Hide custom toggle button - not needed */
.toc-toggle-btn:where(:scope, *) {
  display: none !important;
}
/* Hide custom overlay - not needed */
.toc-overlay:where(:scope, *) {
  display: none !important;
}
/* Hide toggle on small screens (TOC moves inline) */
@media (max-width: 991px) {
  .toc-toggle-btn:where(:scope, *) {
    display: none;
  }
}
/* Overlay when TOC is expanded */
.toc-overlay:where(:scope, *) {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1035;
}
.toc-overlay.active:where(:scope, *) {
  display: block;
}
/* ==========================================================================
   IoT Quiz & Component Styles (Consolidated)
   All interactive component CSS in one place.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Matching Quiz (.imq-)
   -------------------------------------------------------------------------- */
.iot-quiz-matching:where(:scope, *) {
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 0;
  margin: 1.5rem 0;
  background: #ffffff;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.imq-header:where(:scope, *) {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  color: white;
  gap: 8px;
}
.imq-icon:where(:scope, *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}
.imq-title:where(:scope, *) {
  font-weight: 600;
  font-size: 0.95rem;
  flex: 1;
}
.imq-xp:where(:scope, *) {
  background: rgba(255, 255, 255, 0.2);
  /* a11y audit 2026-07-28 (B9): no color was set here, so this pill inherited
   * whatever text color its ancestor happened to have instead of the header's
   * own `color: white` -- fine when inheritance actually reaches .imq-header's
   * dark navy gradient (5.3-6.0:1), but a real 3.78:1 failure was caught twice
   * on unrelated pages when it didn't (actuators-labs.html, B9 re-audit note:
   * "assumes a dark ancestor"). Explicit color removes the dependency on
   * inheritance entirely, matching .imq-xp-earned/-missed below which already
   * set their own color rather than relying on it. */
  color: #ffffff;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  transition: all 0.3s ease;
}
.imq-xp-earned:where(:scope, *) {
  background: #16a085 !important;
  color: white;
}
.imq-xp-missed:where(:scope, *) {
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: line-through;
}
.imq-question:where(:scope, *) {
  padding: 16px 20px 8px;
  font-size: 1.05rem;
  font-weight: 500;
  color: #1f2937;
  line-height: 1.5;
}
.imq-instruction:where(:scope, *) {
  padding: 0 20px 12px;
  font-size: 0.85rem;
  color: #4b5563;
  font-style: italic;
}
.imq-board:where(:scope, *) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 20px 12px;
}
.imq-left-column:where(:scope, *) {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.imq-right-column:where(:scope, *) {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.imq-left-item:where(:scope, *) {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #f9fafb;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  min-height: 44px;
}
.imq-left-text:where(:scope, *) {
  font-size: 0.9rem;
  font-weight: 500;
  color: #1f2937;
  flex: 1;
}
.imq-drop-zone:where(:scope, *) {
  min-width: 100px;
  min-height: 36px;
  border: 2px dashed #d1d5db;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  padding: 4px 8px;
  background: white;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: center;
}
.imq-drop-zone.imq-drag-over:where(:scope, *) {
  border-color: #3498db;
  background: #ebf5fb;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}
.imq-drop-zone.imq-has-match:where(:scope, *) {
  border-style: solid;
  border-color: #3498db;
  background: #ebf5fb;
}
.imq-drop-placeholder:where(:scope, *) {
  font-size: 0.8rem;
  color: var(--flat-text-muted, #475774);
  font-style: italic;
}
.imq-drop-zone.imq-has-match .imq-drop-placeholder:where(:scope, *) {
  display: none;
}
.imq-right-item:where(:scope, *) {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  background: #f0f9ff;
  border: 2px solid #bae6fd;
  border-radius: 8px;
  cursor: grab;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease,
    background-color 0.3s ease;
  user-select: none;
  font-size: 0.9rem;
  color: #1e3a5f;
  min-height: 44px;
  width: 100%;
}
.imq-right-item:where(:scope, *),
.imq-drop-zone:where(:scope, *) {
  appearance: none;
}
.imq-right-item:hover:where(:scope, *) {
  border-color: #3498db;
  box-shadow: 0 2px 6px rgba(52, 152, 219, 0.15);
  transform: translateY(-1px);
}
.imq-right-item.imq-dragging:where(:scope, *) {
  opacity: 0.5;
  transform: scale(0.98);
  border-color: #3498db;
  background: #ebf5fb;
}
.imq-right-item.imq-selected:where(:scope, *) {
  border-color: #e67e22;
  background: #fef9f3;
  box-shadow: 0 0 0 2px rgba(230, 126, 34, 0.2);
}
.imq-right-item.imq-correct:where(:scope, *) {
  background: #f0fdf4;
  border-color: #16a085;
  cursor: default;
}
.imq-right-item.imq-incorrect:where(:scope, *) {
  background: #fef2f2;
  border-color: #e74c3c;
  cursor: default;
}
.imq-left-item.imq-correct:where(:scope, *) {
  background: #f0fdf4;
  border-color: #16a085;
}
.imq-left-item.imq-incorrect:where(:scope, *) {
  background: #fef2f2;
  border-color: #e74c3c;
}
.imq-actions:where(:scope, *) {
  padding: 12px 20px 16px;
  display: flex;
  gap: 10px;
}
.imq-check-btn:where(:scope, *),
.imq-reset-btn:where(:scope, *) {
  padding: 10px 24px;
  background: #2c3e50;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.imq-check-btn:hover:not(:disabled):where(:scope, *),
.imq-reset-btn:hover:where(:scope, *) {
  background: #34495e;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(44, 62, 80, 0.3);
}
.imq-check-btn:disabled:where(:scope, *) {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.imq-right-item:focus-visible:where(:scope, *),
.imq-drop-zone:focus-visible:where(:scope, *),
.imq-check-btn:focus-visible:where(:scope, *),
.imq-reset-btn:focus-visible:where(:scope, *) {
  outline: 3px solid rgba(52, 152, 219, 0.42);
  outline-offset: 2px;
}
.imq-right-item:disabled:where(:scope, *),
.imq-drop-zone:disabled:where(:scope, *) {
  cursor: default;
}
.imq-reset-btn:where(:scope, *) {
  background: #6b7280;
}
.imq-reset-btn:hover:where(:scope, *) {
  background: #4b5563;
}
.imq-feedback:where(:scope, *) {
  padding: 12px 20px;
  margin: 0 20px 12px;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.5;
}
.imq-result-correct:where(:scope, *) {
  color: #065f46;
  background: #ecfdf5;
  display: block;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #a7f3d0;
  font-weight: 500;
}
.imq-result-incorrect:where(:scope, *) {
  color: #991b1b;
  background: #fef2f2;
  display: block;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #fecaca;
  font-weight: 500;
}
.imq-explanation:where(:scope, *) {
  padding: 12px 20px;
  margin: 0 20px 16px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  font-size: 0.9rem;
  color: #1e3a5f;
  line-height: 1.5;
}
.imq-explanation strong:where(:scope, *) {
  color: #2c3e50;
}
.imq-celebration:where(:scope, *) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-size: 4rem;
  animation: imq-celebrate-abaf4b30b1629ca6 1.5s ease-out forwards;
  pointer-events: none;
  z-index: 100;
}

@keyframes imq-celebrate-abaf4b30b1629ca6 {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}
.imq-error:where(:scope, *) {
  padding: 20px;
  background: #fef3f2;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  color: #991b1b;
  text-align: center;
}
/* Dark mode */
.quarto-dark .iot-quiz-matching:where(:scope, *) {
  background: #1f2937;
  border-color: #374151;
}
.quarto-dark .imq-question:where(:scope, *) {
  color: #f3f4f6;
}
.quarto-dark .imq-instruction:where(:scope, *) {
  color: #9ca3af;
}
.quarto-dark .imq-left-item:where(:scope, *) {
  background: #111827;
  border-color: #374151;
}
.quarto-dark .imq-left-text:where(:scope, *) {
  color: #f3f4f6;
}
.quarto-dark .imq-drop-zone:where(:scope, *) {
  border-color: #4b5563;
  background: #1f2937;
}
.quarto-dark .imq-drop-placeholder:where(:scope, *) {
  color: #cbd5e1;
}
.quarto-dark .imq-drop-zone.imq-drag-over:where(:scope, *) {
  border-color: #3498db;
  background: #1e3a5f;
}
.quarto-dark .imq-right-item:where(:scope, *) {
  background: #1e3a5f;
  border-color: #2c5282;
  color: #bae6fd;
}
.quarto-dark .imq-right-item:hover:where(:scope, *) {
  border-color: #3498db;
}
.quarto-dark .imq-right-item.imq-correct:where(:scope, *) {
  background: #064e3b;
  border-color: #16a085;
}
.quarto-dark .imq-right-item.imq-incorrect:where(:scope, *) {
  background: #4c1d1d;
  border-color: #e74c3c;
}
.quarto-dark .imq-left-item.imq-correct:where(:scope, *) {
  background: #064e3b;
  border-color: #16a085;
}
.quarto-dark .imq-left-item.imq-incorrect:where(:scope, *) {
  background: #4c1d1d;
  border-color: #e74c3c;
}
.quarto-dark .imq-check-btn:where(:scope, *) {
  background: #3498db;
}
.quarto-dark .imq-check-btn:hover:not(:disabled):where(:scope, *) {
  background: #2980b9;
}
.quarto-dark .imq-result-correct:where(:scope, *) {
  background: #064e3b;
  color: #a7f3d0;
  border-color: #065f46;
}
.quarto-dark .imq-result-incorrect:where(:scope, *) {
  background: #4c1d1d;
  color: #fecaca;
  border-color: #991b1b;
}
.quarto-dark .imq-explanation:where(:scope, *) {
  background: #1e3a5f;
  border-color: #2c5282;
  color: #bae6fd;
}
.quarto-dark .imq-explanation strong:where(:scope, *) {
  color: #93c5fd;
}
/* Responsive */
@media (max-width: 600px) {
  .imq-board:where(:scope, *) {
    grid-template-columns: 1fr;
  }

  .imq-left-item:where(:scope, *) {
    flex-wrap: wrap;
  }

  .imq-drop-zone:where(:scope, *) {
    min-width: 80px;
    width: 100%;
  }

  .imq-right-item:where(:scope, *) {
    font-size: 0.85rem;
  }
}
/* --------------------------------------------------------------------------
   Ordering Quiz (.ioq-)
   -------------------------------------------------------------------------- */
.iot-quiz-ordering:where(:scope, *) {
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 0;
  margin: 1.5rem 0;
  background: #ffffff;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.ioq-header:where(:scope, *) {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  color: white;
  gap: 8px;
}
.ioq-icon:where(:scope, *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}
.ioq-title:where(:scope, *) {
  font-weight: 600;
  font-size: 0.95rem;
  flex: 1;
}
.ioq-xp:where(:scope, *) {
  background: rgba(255, 255, 255, 0.2);
  /* a11y audit 2026-07-28 (B9): see .imq-xp above -- same missing-color/
   * assumed-dark-ancestor bug, same shared XP-badge component family. */
  color: #ffffff;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  transition: all 0.3s ease;
}
.ioq-xp-earned:where(:scope, *) {
  background: #16a085 !important;
  color: white;
}
.ioq-xp-missed:where(:scope, *) {
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: line-through;
}
.ioq-instruction:where(:scope, *) {
  padding: 0 20px 12px;
  font-size: 0.85rem;
  color: #4b5563;
  font-style: italic;
}
.ioq-list:where(:scope, *) {
  padding: 8px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ioq-item:where(:scope, *) {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  background: #f9fafb;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  cursor: grab;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease,
    background-color 0.3s ease;
  user-select: none;
  gap: 10px;
}
.ioq-item:hover:where(:scope, *) {
  border-color: #3498db;
  box-shadow: 0 2px 6px rgba(52, 152, 219, 0.15);
}
.ioq-item.ioq-dragging:where(:scope, *) {
  opacity: 0.5;
  transform: scale(0.98);
  border-color: #3498db;
  background: #ebf5fb;
}
.ioq-item.ioq-drag-over:where(:scope, *) {
  border-color: #e67e22;
  background: #fef9f3;
  box-shadow: 0 0 0 2px rgba(230, 126, 34, 0.2);
}
.ioq-item.ioq-touch-active:where(:scope, *) {
  border-color: #3498db;
  background: #ebf5fb;
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.25);
  transform: scale(1.02);
  z-index: 10;
}
.ioq-item.ioq-correct:where(:scope, *) {
  background: #f0fdf4;
  border-color: #16a085;
}
.ioq-item.ioq-correct .ioq-position:where(:scope, *) {
  background: #16a085;
  color: white;
}
.ioq-item.ioq-incorrect:where(:scope, *) {
  background: #fef2f2;
  border-color: #e74c3c;
}
.ioq-item.ioq-incorrect .ioq-position:where(:scope, *) {
  background: #e74c3c;
  color: white;
}
.ioq-item.ioq-disabled:where(:scope, *) {
  cursor: default;
  pointer-events: none;
}
.ioq-item.ioq-disabled .ioq-arrows:where(:scope, *),
.ioq-item.ioq-disabled .ioq-drag-handle:where(:scope, *) {
  visibility: hidden;
}
.ioq-position:where(:scope, *) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: #2c3e50;
  color: white;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}
.ioq-item-text:where(:scope, *) {
  flex: 1;
  font-size: 0.95rem;
  color: #1f2937;
  line-height: 1.4;
}
.ioq-correction:where(:scope, *) {
  display: inline-block;
  margin-left: 8px;
  font-size: 0.8rem;
  color: #16a085;
  font-weight: 600;
  font-style: italic;
}
.ioq-arrows:where(:scope, *) {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}
.ioq-arrow-up:where(:scope, *),
.ioq-arrow-down:where(:scope, *) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 20px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: white;
  color: #6b7280;
  cursor: pointer;
  font-size: 0.6rem;
  line-height: 1;
  padding: 0;
  transition: all 0.15s ease;
}
.ioq-arrow-up:hover:not(:disabled):where(:scope, *),
.ioq-arrow-down:hover:not(:disabled):where(:scope, *) {
  background: #3498db;
  color: white;
  border-color: #3498db;
}
.ioq-arrow-up:disabled:where(:scope, *),
.ioq-arrow-down:disabled:where(:scope, *) {
  opacity: 0.3;
  cursor: not-allowed;
}
.ioq-drag-handle:where(:scope, *) {
  color: #9ca3af;
  font-size: 1.1rem;
  cursor: grab;
  flex-shrink: 0;
  padding: 0 2px;
}
.ioq-actions:where(:scope, *) {
  padding: 12px 20px 16px;
  display: flex;
  gap: 10px;
}
.ioq-check-btn:where(:scope, *) {
  padding: 10px 24px;
  background: #2c3e50;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.ioq-check-btn:hover:where(:scope, *) {
  background: #34495e;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(44, 62, 80, 0.3);
}
.ioq-check-btn:disabled:where(:scope, *) {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.ioq-arrow-up:focus-visible:where(:scope, *),
.ioq-arrow-down:focus-visible:where(:scope, *),
.ioq-check-btn:focus-visible:where(:scope, *) {
  outline: 3px solid rgba(52, 152, 219, 0.42);
  outline-offset: 2px;
}
.ioq-feedback:where(:scope, *) {
  padding: 12px 20px;
  margin: 0 20px 12px;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.5;
}
.ioq-result-correct:where(:scope, *) {
  color: #065f46;
  background: #ecfdf5;
  display: block;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #a7f3d0;
  font-weight: 500;
}
.ioq-result-incorrect:where(:scope, *) {
  color: #991b1b;
  background: #fef2f2;
  display: block;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #fecaca;
  font-weight: 500;
}
.ioq-explanation:where(:scope, *) {
  padding: 12px 20px;
  margin: 0 20px 16px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  font-size: 0.9rem;
  color: #1e3a5f;
  line-height: 1.5;
}
.ioq-explanation strong:where(:scope, *) {
  color: #2c3e50;
}
.ioq-celebration:where(:scope, *) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-size: 4rem;
  animation: ioq-celebrate-c80729c3b387c892 1.5s ease-out forwards;
  pointer-events: none;
  z-index: 100;
}

@keyframes ioq-celebrate-c80729c3b387c892 {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}
/* Dark mode */
.quarto-dark .iot-quiz-ordering:where(:scope, *) {
  background: #1f2937;
  border-color: #374151;
}
.quarto-dark .ioq-instruction:where(:scope, *) {
  color: #9ca3af;
}
.quarto-dark .ioq-item:where(:scope, *) {
  background: #111827;
  border-color: #374151;
  color: #f3f4f6;
}
.quarto-dark .ioq-item:hover:where(:scope, *) {
  border-color: #3498db;
}
.quarto-dark .ioq-item.ioq-dragging:where(:scope, *) {
  background: #1e3a5f;
}
.quarto-dark .ioq-item.ioq-drag-over:where(:scope, *) {
  background: #3b2a1a;
  border-color: #e67e22;
}
.quarto-dark .ioq-item.ioq-correct:where(:scope, *) {
  background: #064e3b;
  border-color: #16a085;
}
.quarto-dark .ioq-item.ioq-incorrect:where(:scope, *) {
  background: #4c1d1d;
  border-color: #e74c3c;
}
.quarto-dark .ioq-item-text:where(:scope, *) {
  color: #f3f4f6;
}
.quarto-dark .ioq-correction:where(:scope, *) {
  color: #34d399;
}
.quarto-dark .ioq-arrow-up:where(:scope, *),
.quarto-dark .ioq-arrow-down:where(:scope, *) {
  background: #374151;
  border-color: #4b5563;
  color: #9ca3af;
}
.quarto-dark .ioq-arrow-up:hover:not(:disabled):where(:scope, *),
.quarto-dark .ioq-arrow-down:hover:not(:disabled):where(:scope, *) {
  background: #3498db;
  color: white;
  border-color: #3498db;
}
.quarto-dark .ioq-drag-handle:where(:scope, *) {
  color: #6b7280;
}
.quarto-dark .ioq-check-btn:where(:scope, *) {
  background: #3498db;
}
.quarto-dark .ioq-check-btn:hover:where(:scope, *) {
  background: #2980b9;
}
.quarto-dark .ioq-result-correct:where(:scope, *) {
  background: #064e3b;
  color: #a7f3d0;
  border-color: #065f46;
}
.quarto-dark .ioq-result-incorrect:where(:scope, *) {
  background: #4c1d1d;
  color: #fecaca;
  border-color: #991b1b;
}
.quarto-dark .ioq-explanation:where(:scope, *) {
  background: #1e3a5f;
  border-color: #2c5282;
  color: #bae6fd;
}
.quarto-dark .ioq-explanation strong:where(:scope, *) {
  color: #93c5fd;
}

@media (max-width: 600px) {
  .ioq-item:where(:scope, *) {
    padding: 8px 10px;
    gap: 6px;
  }

  .ioq-item-text:where(:scope, *) {
    font-size: 0.85rem;
  }

  .ioq-position:where(:scope, *) {
    width: 24px;
    height: 24px;
    min-width: 24px;
    font-size: 0.7rem;
  }

  .ioq-arrow-up:where(:scope, *),
  .ioq-arrow-down:where(:scope, *) {
    width: 22px;
    height: 18px;
    font-size: 0.55rem;
  }

  .ioq-drag-handle:where(:scope, *) {
    display: none;
  }
}
/* --------------------------------------------------------------------------
   Code Quiz (.icq-)
   -------------------------------------------------------------------------- */
.iot-quiz-code:where(:scope, *) {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  margin: 1.5em 0;
  background: #ffffff;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.icq-header:where(:scope, *) {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 600;
}
.icq-icon:where(:scope, *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}
.icq-title:where(:scope, *) {
  flex-grow: 1;
}
.icq-lang:where(:scope, *) {
  background: rgba(255, 255, 255, 0.15);
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.icq-xp:where(:scope, *) {
  background: rgba(22, 160, 133, 0.3);
  /* a11y audit 2026-07-28 (B9): see .imq-xp above -- same missing-color/
   * assumed-dark-ancestor bug, same shared XP-badge component family. */
  color: #ffffff;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}
.icq-xp-earned:where(:scope, *) {
  background: rgba(22, 160, 133, 0.8) !important;
  color: #ffffff;
}
.icq-xp-missed:where(:scope, *) {
  background: rgba(231, 76, 60, 0.3) !important;
  color: #ffffff;
  text-decoration: line-through;
}
.icq-question:where(:scope, *) {
  padding: 12px 16px;
  font-size: 1rem;
  font-weight: 600;
  color: #2c3e50;
  border-bottom: 1px solid #e5e7eb;
}
.icq-instruction:where(:scope, *) {
  padding: 8px 16px;
  font-size: 0.85rem;
  color: #4b5563;
  font-style: italic;
  border-bottom: 1px solid #e5e7eb;
}
.icq-code-container:where(:scope, *) {
  background: #1e1e2e;
  overflow-x: auto;
  margin: 0;
}
.icq-code-block:where(:scope, *) {
  padding: 12px 0;
  min-width: 0;
}
.icq-line:where(:scope, *) {
  display: flex;
  align-items: center;
  min-height: 28px;
  line-height: 1.6;
  padding: 0 16px 0 0;
  max-width: 100%;
  overflow-x: auto;
}
.icq-line-num:where(:scope, *) {
  display: inline-block;
  width: 44px;
  min-width: 44px;
  text-align: right;
  padding-right: 16px;
  color: #6c7086;
  font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", "Consolas", monospace;
  font-size: 0.8rem;
  user-select: none;
  -webkit-user-select: none;
  border-right: 1px solid #313244;
  margin-right: 16px;
}
.icq-line-content:where(:scope, *) {
  font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", "Consolas", monospace;
  font-size: 0.9rem;
  color: #cdd6f4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  flex: 1;
  min-width: 0;
}
.icq-line-blank:where(:scope, *) {
  background: rgba(22, 160, 133, 0.08);
}
.icq-blank-select:where(:scope, *) {
  font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", "Consolas", monospace;
  font-size: 0.85rem;
  background: #313244;
  color: #f9e2af;
  border: 1px dashed #89b4fa;
  max-width: 100%;
  text-overflow: ellipsis;
  border-radius: 4px;
  padding: 2px 8px;
  min-width: min(200px, 100%);
  max-width: 100%;
  width: min(100%, 42ch);
  box-sizing: border-box;
  cursor: pointer;
  outline: none;
  appearance: auto;
}
.icq-blank-select:hover:where(:scope, *) {
  border-color: #74c7ec;
  background: #45475a;
}
.icq-blank-select:focus:where(:scope, *) {
  border-color: #89b4fa;
  box-shadow: 0 0 0 2px rgba(137, 180, 250, 0.3);
}
.icq-blank-select.icq-correct:where(:scope, *) {
  background: rgba(22, 160, 133, 0.25);
  border-color: #16a085;
  color: #a6e3a1;
  border-style: solid;
}
.icq-blank-select.icq-incorrect:where(:scope, *) {
  background: rgba(231, 76, 60, 0.25);
  border-color: #e74c3c;
  color: #f38ba8;
  border-style: solid;
}
.icq-correct-answer:where(:scope, *) {
  display: block;
  font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", "Consolas", monospace;
  font-size: 0.8rem;
  color: #a6e3a1;
  margin-top: 2px;
  padding-left: 4px;
}
.icq-actions:where(:scope, *) {
  padding: 12px 16px;
  display: flex;
  gap: 8px;
  border-top: 1px solid #e5e7eb;
}
.icq-check-btn:where(:scope, *) {
  background: #2c3e50;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 8px 24px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.2s,
    opacity 0.2s;
}
.icq-check-btn:hover:not(:disabled):where(:scope, *) {
  background: #16a085;
}
.icq-check-btn:disabled:where(:scope, *) {
  opacity: 0.5;
  cursor: not-allowed;
}
.icq-blank-select:focus-visible:where(:scope, *),
.icq-check-btn:focus-visible:where(:scope, *) {
  outline: 3px solid rgba(137, 180, 250, 0.42);
  outline-offset: 2px;
}
.icq-feedback:where(:scope, *) {
  padding: 12px 16px;
  font-size: 0.95rem;
  border-top: 1px solid #e5e7eb;
}
.icq-result-correct:where(:scope, *) {
  color: #16a085;
  font-weight: 600;
}
.icq-result-incorrect:where(:scope, *) {
  color: #e74c3c;
  font-weight: 600;
}
.icq-explanation:where(:scope, *) {
  padding: 12px 16px;
  background: #f0fdf4;
  border-top: 1px solid #bbf7d0;
  font-size: 0.9rem;
  color: #166534;
  line-height: 1.5;
}
.icq-celebration:where(:scope, *) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  animation: icq-celebrate-3fee66b293b16e50 1.5s ease-out forwards;
  pointer-events: none;
  z-index: 10;
}

@keyframes icq-celebrate-3fee66b293b16e50 {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.5);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -80%) scale(1);
  }
}
.icq-error:where(:scope, *) {
  padding: 20px;
  background: #fef3f2;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  color: #991b1b;
  text-align: center;
}

/* auto-dark block removed 2026-08-05 (founder: dark mode deferred;
   components must not dark-adapt inside a light page) */

@media (max-width: 600px) {
  .icq-header:where(:scope, *) {
    flex-wrap: wrap;
  }

  .icq-code-container:where(:scope, *) {
    overflow-x: hidden;
  }

  .icq-code-block:where(:scope, *) {
    width: 100%;
    min-width: 0;
  }

  .icq-line:where(:scope, *) {
    align-items: flex-start;
    padding-right: 8px;
    overflow-x: visible;
  }

  .icq-line-num:where(:scope, *) {
    width: 32px;
    min-width: 32px;
    padding-right: 8px;
    margin-right: 8px;
  }

  .icq-line-content:where(:scope, *) {
    width: 100%;
    min-width: 0;
    word-break: break-word;
  }

  .icq-blank-select:where(:scope, *) {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 2px 0;
  }
}
/* --------------------------------------------------------------------------
   Label Quiz (.ilq-)
   -------------------------------------------------------------------------- */
.iot-quiz-label:where(:scope, *) {
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 0;
  margin: 1.5rem 0;
  background: #ffffff;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.ilq-header:where(:scope, *) {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  color: white;
  gap: 8px;
}
.ilq-icon:where(:scope, *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}
.ilq-title:where(:scope, *) {
  font-weight: 600;
  font-size: 0.95rem;
  flex: 1;
}
.ilq-xp:where(:scope, *) {
  background: rgba(255, 255, 255, 0.2);
  /* a11y audit 2026-07-28 (B9): see .imq-xp above -- same missing-color/
   * assumed-dark-ancestor bug, same shared XP-badge component family. */
  color: #ffffff;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  transition: all 0.3s ease;
}
.ilq-xp-earned:where(:scope, *) {
  background: #16a085 !important;
  color: white;
}
.ilq-xp-missed:where(:scope, *) {
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: line-through;
}
.ilq-question:where(:scope, *) {
  padding: 16px 20px 8px;
  font-size: 1.05rem;
  font-weight: 500;
  color: #1f2937;
  line-height: 1.5;
}
.ilq-instruction:where(:scope, *) {
  padding: 0 20px 12px;
  font-size: 0.85rem;
  color: #4b5563;
  font-style: italic;
}
.ilq-diagram-container:where(:scope, *) {
  position: relative;
  margin: 0 20px 16px;
  min-height: 180px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  background: #f9fafb;
}
.ilq-diagram-image:where(:scope, *) {
  display: block;
  width: 100%;
  height: auto;
}
.ilq-hotspot:where(:scope, *) {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e74c3c;
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 2;
  padding: 0;
}
.ilq-hotspot:hover:where(:scope, *) {
  transform: translate(-50%, -50%) scale(1.15);
  box-shadow: 0 3px 12px rgba(231, 76, 60, 0.5);
}
.ilq-hotspot-number:where(:scope, *) {
  color: white;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
}
.ilq-hotspot-selected:where(:scope, *) {
  background: #3498db;
  box-shadow: 0 2px 8px rgba(52, 152, 219, 0.4);
}
.ilq-hotspot-correct:where(:scope, *) {
  background: #16a085 !important;
  box-shadow: 0 2px 8px rgba(22, 160, 133, 0.4) !important;
}
.ilq-hotspot-incorrect:where(:scope, *) {
  background: #e74c3c !important;
  box-shadow: 0 2px 8px rgba(231, 76, 60, 0.5) !important;
}
.ilq-hotspot-disabled:where(:scope, *) {
  cursor: default;
  pointer-events: none;
}

@keyframes ilq-pulse-958a771b8ea7fb13 {
  0%,
  100% {
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4);
  }
  50% {
    box-shadow: 0 2px 16px rgba(231, 76, 60, 0.7);
  }
}
.ilq-hotspot:not(.ilq-hotspot-selected):not(.ilq-hotspot-correct):not(.ilq-hotspot-incorrect):not(
    .ilq-hotspot-disabled
  ):where(:scope, *) {
  animation: ilq-pulse-958a771b8ea7fb13 2s infinite;
}
.ilq-selections:where(:scope, *) {
  padding: 8px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ilq-selection-row:where(:scope, *) {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: all 0.2s ease;
}
.ilq-row-correct:where(:scope, *) {
  background: #f0fdf4;
  border-color: #16a085;
}
.ilq-row-incorrect:where(:scope, *) {
  background: #fef2f2;
  border-color: #e74c3c;
}
.ilq-selection-marker:where(:scope, *) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: #e74c3c;
  color: white;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}
.ilq-row-correct .ilq-selection-marker:where(:scope, *) {
  background: #16a085;
}
.ilq-row-incorrect .ilq-selection-marker:where(:scope, *) {
  background: #e74c3c;
}
.ilq-select:where(:scope, *) {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.9rem;
  color: #1f2937;
  background: white;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.ilq-select:focus:where(:scope, *) {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);
}
.ilq-select:disabled:where(:scope, *) {
  background: #f3f4f6;
  cursor: default;
  opacity: 0.8;
}
.ilq-selection-status:where(:scope, *) {
  min-width: 80px;
  font-size: 0.85rem;
  display: flex;
  flex: 0 1 44%;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  line-height: 1.4;
}
.ilq-status-correct:where(:scope, *) {
  color: #16a085;
  font-weight: 600;
}
.ilq-status-incorrect:where(:scope, *) {
  color: #e74c3c;
  font-weight: 600;
}
.ilq-correct-answer:where(:scope, *) {
  color: #16a085;
  font-size: 0.8rem;
  font-weight: 500;
  font-style: italic;
}
.ilq-answer-why:where(:scope, *) {
  color: #334155;
  font-size: 0.82rem;
  font-weight: 500;
}
.ilq-actions:where(:scope, *) {
  padding: 12px 20px 16px;
  display: flex;
  gap: 10px;
}
.ilq-check-btn:where(:scope, *) {
  padding: 10px 24px;
  background: #2c3e50;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.ilq-check-btn:hover:not(:disabled):where(:scope, *) {
  background: #34495e;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(44, 62, 80, 0.3);
}
.ilq-check-btn:disabled:where(:scope, *) {
  opacity: 0.5;
  cursor: not-allowed;
}
.ilq-hotspot:focus-visible:where(:scope, *),
.ilq-select:focus-visible:where(:scope, *),
.ilq-check-btn:focus-visible:where(:scope, *) {
  outline: 3px solid rgba(52, 152, 219, 0.42);
  outline-offset: 2px;
}
.ilq-feedback:where(:scope, *) {
  padding: 12px 20px;
  margin: 0 20px 12px;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.5;
}
.ilq-result-correct:where(:scope, *) {
  color: #065f46;
  background: #ecfdf5;
  display: block;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #a7f3d0;
  font-weight: 500;
}
.ilq-result-incorrect:where(:scope, *) {
  color: #991b1b;
  background: #fef2f2;
  display: block;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #fecaca;
  font-weight: 500;
}
.ilq-explanation:where(:scope, *) {
  padding: 12px 20px;
  margin: 0 20px 16px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  font-size: 0.9rem;
  color: #1e3a5f;
  line-height: 1.5;
}
.ilq-celebration:where(:scope, *) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  animation: ilq-celebrate-0c42a20b1fbc1e4f 1.5s ease-out forwards;
  pointer-events: none;
  z-index: 10;
}

@keyframes ilq-celebrate-0c42a20b1fbc1e4f {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.5);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -80%) scale(1);
  }
}

@media (max-width: 600px) {
  .ilq-hotspot:where(:scope, *) {
    width: 26px;
    height: 26px;
  }
  .ilq-hotspot-number:where(:scope, *) {
    font-size: 0.7rem;
  }
  .ilq-selection-row:where(:scope, *) {
    flex-wrap: wrap;
  }
  .ilq-select:where(:scope, *) {
    min-width: 0;
  }
  .ilq-selection-status:where(:scope, *) {
    flex: 1 0 calc(100% - 38px);
    min-width: 0;
    margin-left: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ikc-celebration:where(:scope, *),
  .imq-celebration:where(:scope, *),
  .ioq-celebration:where(:scope, *),
  .icq-celebration:where(:scope, *),
  .ilq-celebration:where(:scope, *),
  .ilq-hotspot:not(.ilq-hotspot-selected):not(.ilq-hotspot-correct):not(.ilq-hotspot-incorrect):not(
      .ilq-hotspot-disabled
    ):where(:scope, *) {
    animation: none !important;
  }
}
/* --------------------------------------------------------------------------
   Video Component (.ivid-)
   -------------------------------------------------------------------------- */
.iot-video-embed:where(:scope, *) {
  display: block;
  margin: 1.5em 0;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.ivid-header:where(:scope, *) {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 600;
}
.ivid-icon:where(:scope, *) {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 999px;
  padding: 0.14rem 0.45rem;
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}
.ivid-title:where(:scope, *) {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ivid-description:where(:scope, *) {
  padding: 10px 16px;
  margin: 0;
  font-size: 0.9rem;
  color: #4b5563;
  border-bottom: 1px solid #e5e7eb;
  line-height: 1.5;
}
.ivid-container:where(:scope, *) {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  background: #000000;
}
.ivid-placeholder:where(:scope, *) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ivid-placeholder:focus:where(:scope, *) {
  outline: 2px solid #16a085;
  outline-offset: -2px;
}
.ivid-play-btn:where(:scope, *) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
  opacity: 0.9;
  z-index: 1;
}
.ivid-placeholder:hover .ivid-play-btn:where(:scope, *) {
  transform: translate(-50%, -50%) scale(1.1);
  opacity: 1;
}
.ivid-play-btn svg:where(:scope, *) {
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.ivid-iframe:where(:scope, *) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.ivid-fallback:where(:scope, *) {
  padding: 10px 16px;
  text-align: center;
  font-size: 0.85rem;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
}
.ivid-fallback a:where(:scope, *) {
  color: #16a085;
  text-decoration: underline;
  font-weight: 500;
}
.ivid-fallback a:hover:where(:scope, *) {
  color: #0e7c61;
}

@media (max-width: 600px) {
  .ivid-header:where(:scope, *) {
    padding: 8px 12px;
    font-size: 0.8rem;
  }
  .ivid-description:where(:scope, *) {
    padding: 8px 12px;
    font-size: 0.8rem;
  }
}

/* auto-dark block removed 2026-08-05 (founder: dark mode deferred;
   components must not dark-adapt inside a light page) */
/* =============================================
   Landing Pages
   Scoped overrides for the homepage and browse-modules pages.
   ============================================= */

body.iotclass-homepage:where(:scope, *),
body.iotclass-modules-landing:where(:scope, *) {
  --landing-bg: var(--flat-surface, #ffffff);
  --landing-surface: var(--flat-surface, #ffffff);
  --landing-surface-hover: var(--flat-surface-hover, #f7f8fa);
  --landing-border: var(--flat-border, #dbdcdd);
  --landing-text: var(--flat-text, #21242c);
  --landing-muted: var(--flat-text-muted, #475774);
  --landing-subtle: var(--flat-text-subtle, #646b7a);
  --landing-accent: var(--flat-accent, #1865f2);
  --landing-content-width: 1120px;
  background: var(--landing-bg);
  color: var(--landing-text);
}
body.iotclass-homepage:where(:scope, *) {
  --landing-bg: var(--flat-surface, #ffffff);
  --landing-surface: var(--flat-surface, #ffffff);
  --landing-surface-hover: var(--flat-surface-hover, #f7f8fa);
  --landing-border: var(--flat-border, #dbdcdd);
  --landing-text: var(--flat-text, #21242c);
  --landing-muted: var(--flat-text-muted, #475774);
  --landing-subtle: var(--flat-text-subtle, #646b7a);
  --landing-accent: var(--flat-accent, #1865f2);
  --landing-content-width: 1120px;
  background: var(--landing-bg);
}
body.iotclass-homepage #quarto-header:where(:scope, *),
body.iotclass-homepage #title-block-header:where(:scope, *),
body.iotclass-homepage footer.footer:where(:scope, *),
body.iotclass-homepage .iotclass-user-status:where(:scope, *),
body.iotclass-homepage #content-flag-btn:where(:scope, *),
body.iotclass-homepage #content-flag-modal:where(:scope, *),
body.iotclass-modules-landing #quarto-header:where(:scope, *),
body.iotclass-modules-landing #title-block-header:where(:scope, *),
body.iotclass-modules-landing footer.footer:where(:scope, *),
body.iotclass-modules-landing .iotclass-user-status:where(:scope, *),
body.iotclass-modules-landing #content-flag-btn:where(:scope, *),
body.iotclass-modules-landing #content-flag-modal:where(:scope, *) {
  display: none !important;
}
body.iotclass-homepage .page-layout-custom:where(:scope, *),
body.iotclass-homepage #quarto-content:where(:scope, *),
body.iotclass-modules-landing .page-layout-custom:where(:scope, *),
body.iotclass-modules-landing #quarto-content:where(:scope, *) {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent;
}
body.iotclass-homepage #quarto-content:where(:scope, *),
body.iotclass-modules-landing #quarto-content:where(:scope, *) {
  gap: 0;
}
body.iotclass-homepage .skip-link:not(:focus):not(:focus-visible):where(:scope, *),
body.iotclass-modules-landing .skip-link:not(:focus):not(:focus-visible):where(:scope, *) {
  top: -120px;
}
body.iotclass-homepage .landing-navbar:where(:scope, *),
body.iotclass-modules-landing .landing-navbar:where(:scope, *) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  min-height: 56px;
  padding: 10px 28px;
  background: var(--landing-bg);
  border-bottom: 1px solid var(--landing-border);
  font-size: 16px;
}
body.iotclass-homepage .landing-navbar:where(:scope, *) {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.96);
}
body.iotclass-modules-landing .landing-navbar:where(:scope, *) {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.96);
}
/* /landing/ header parity with homepage: escape the constrained quarto page
   container so the navbar + beta banner run full-bleed,
exactly like the
   homepage header (they share identical markup; only this wrapper differed). */
body.iotclass-modules-landing:where(:scope, *) {
  overflow-x: clip;
}
body.iotclass-modules-landing .landing-navbar:where(:scope, *),
body.iotclass-modules-landing .construction-banner:where(:scope, *) {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
body.iotclass-modules-landing .landing-navbar:where(:scope, *) {
  padding: 10px 28px;
}
body.iotclass-homepage .landing-nav-logo:where(:scope, *),
body.iotclass-modules-landing .landing-nav-logo:where(:scope, *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  line-height: 0;
  text-decoration: none;
}
body.iotclass-homepage .landing-nav-logo img:where(:scope, *),
body.iotclass-modules-landing .landing-nav-logo img:where(:scope, *) {
  display: block;
  width: auto;
  height: 34px;
  border-radius: 4px !important;
  box-shadow: none !important;
}
body.iotclass-homepage .landing-nav-toggle:where(:scope, *),
body.iotclass-modules-landing .landing-nav-toggle:where(:scope, *) {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--landing-border);
  border-radius: 6px;
  background: #ffffff;
  color: var(--landing-text);
  cursor: pointer;
}
body.iotclass-homepage .landing-nav-toggle:hover:where(:scope, *),
body.iotclass-modules-landing .landing-nav-toggle:hover:where(:scope, *) {
  border-color: #c7c9cc;
  background: #f7f8fa;
}
body.iotclass-homepage .landing-nav-toggle:focus-visible:where(:scope, *),
body.iotclass-modules-landing .landing-nav-toggle:focus-visible:where(:scope, *) {
  outline: 3px solid rgba(24, 101, 242, 0.28);
  outline-offset: 2px;
}
body.iotclass-homepage .landing-nav-toggle-lines:where(:scope, *),
body.iotclass-homepage .landing-nav-toggle-lines:where(:scope, *)::before,
body.iotclass-homepage .landing-nav-toggle-lines:where(:scope, *)::after,
body.iotclass-modules-landing .landing-nav-toggle-lines:where(:scope, *),
body.iotclass-modules-landing .landing-nav-toggle-lines:where(:scope, *)::before,
body.iotclass-modules-landing .landing-nav-toggle-lines:where(:scope, *)::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  content: "";
}
body.iotclass-homepage .landing-nav-toggle-lines:where(:scope, *),
body.iotclass-modules-landing .landing-nav-toggle-lines:where(:scope, *) {
  position: relative;
}
body.iotclass-homepage .landing-nav-toggle-lines:where(:scope, *)::before,
body.iotclass-homepage .landing-nav-toggle-lines:where(:scope, *)::after,
body.iotclass-modules-landing .landing-nav-toggle-lines:where(:scope, *)::before,
body.iotclass-modules-landing .landing-nav-toggle-lines:where(:scope, *)::after {
  position: absolute;
  left: 0;
}
body.iotclass-homepage .landing-nav-toggle-lines:where(:scope, *)::before,
body.iotclass-modules-landing .landing-nav-toggle-lines:where(:scope, *)::before {
  top: -6px;
}
body.iotclass-homepage .landing-nav-toggle-lines:where(:scope, *)::after,
body.iotclass-modules-landing .landing-nav-toggle-lines:where(:scope, *)::after {
  top: 6px;
}
body.iotclass-homepage .landing-nav-center:where(:scope, *),
body.iotclass-modules-landing .landing-nav-center:where(:scope, *) {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 22px;
  min-width: 0;
}
body.iotclass-homepage .landing-nav-center a:where(:scope, *),
body.iotclass-modules-landing .landing-nav-center a:where(:scope, *) {
  color: var(--landing-muted);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
body.iotclass-homepage .landing-nav-center a:hover:where(:scope, *),
body.iotclass-modules-landing .landing-nav-center a:hover:where(:scope, *),
body.iotclass-modules-landing .landing-nav-active:where(:scope, *) {
  color: var(--landing-accent);
}
body.iotclass-homepage .landing-nav-center a:hover:where(:scope, *) {
  color: var(--landing-accent);
}
body.iotclass-homepage .landing-nav-right:where(:scope, *),
body.iotclass-modules-landing .landing-nav-right:where(:scope, *) {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 12px;
}
body.iotclass-homepage .landing-nav-login-btn:where(:scope, *),
body.iotclass-modules-landing .landing-nav-login-btn:where(:scope, *) {
  min-height: 34px;
  padding: 8px 18px;
  border: 1px solid #cfd4da;
  border-radius: 6px;
  background: #f1f3f5;
  color: var(--landing-text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}
body.iotclass-homepage .landing-nav-login-btn:where(:scope, *) {
  border: 1px solid #cfd4da;
  background: #f1f3f5;
  color: var(--landing-text);
}
body.iotclass-homepage .landing-nav-login-btn:hover:where(:scope, *),
body.iotclass-modules-landing .landing-nav-login-btn:hover:where(:scope, *) {
  background: #e7ebf0;
}
body.iotclass-homepage .landing-nav-login-btn:hover:where(:scope, *) {
  background: #e7ebf0;
}
body.iotclass-homepage .construction-banner:where(:scope, *),
body.iotclass-modules-landing .construction-banner:where(:scope, *) {
  width: 100%;
  padding: 8px 20px;
  border-bottom: 1px solid #d8dee5;
  background: #f3f6f8;
  color: #334155;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}
body.iotclass-homepage .construction-banner-label:where(:scope, *) {
  margin-right: 10px;
  font-weight: 800;
}
body.iotclass-modules-landing .construction-banner-label:where(:scope, *) {
  margin-right: 10px;
  font-weight: 800;
}
body.iotclass-homepage .content-block:where(:scope, *) {
  max-width: var(--landing-content-width);
  margin: 0 auto;
  padding: 0 30px;
  overflow-x: clip;
  overflow-y: visible;
}
body.iotclass-homepage .hero-banner:where(:scope, *) {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 25px;
  padding-bottom: 30px;
  margin-bottom: 0;
  text-align: center;
}
body.iotclass-homepage .hero-banner:first-of-type:where(:scope, *) {
  padding-top: 58px;
  padding-bottom: 48px;
}
body.iotclass-homepage .hero-banner h1:where(:scope, *) {
  margin-top: 10px;
  margin-bottom: 40px;
  padding-left: 0 !important;
  border: none !important;
  background: transparent !important;
  color: var(--landing-text);
  font-size: 56px;
  font-weight: 700;
  line-height: 1.2;
}
body.iotclass-homepage .hero-banner h1:where(:scope, *) {
  margin-bottom: 24px;
  font-size: clamp(42px, 7vw, 72px);
  letter-spacing: 0;
}
body.iotclass-homepage .hero-banner h1:where(:scope, *)::before,
body.iotclass-homepage .gallery-header:where(:scope, *)::before {
  content: none;
  display: none;
}
body.iotclass-homepage .hero-banner p:where(:scope, *) {
  max-width: 75%;
  margin: 0 auto 40px;
  color: var(--landing-muted);
  font-size: 20px;
  line-height: 1.6;
}
body.iotclass-homepage .landing-home-cta-row:where(:scope, *) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
body.iotclass-homepage .btn-action:where(:scope, *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 165px;
  padding: 20px 48px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  transition: all 0.2s ease;
}
body.iotclass-homepage .btn-action-primary:where(:scope, *) {
  background: var(--landing-accent);
  color: #ffffff !important;
  font-weight: 700;
  line-height: 20px;
}
body.iotclass-homepage .btn-action-primary:hover:where(:scope, *) {
  background: #35acf0;
  color: #f9fafb !important;
  text-decoration: none;
}
body.iotclass-homepage .btn-action-secondary:where(:scope, *) {
  border: 1px solid #cfd4da;
  background: #f1f3f5;
  color: var(--landing-text) !important;
  font-weight: 700;
  line-height: 20px;
}
body.iotclass-homepage .btn-action-secondary:hover:where(:scope, *) {
  border-color: #c7c9cc;
  background: #e7ebf0;
  color: var(--landing-text) !important;
  text-decoration: none;
}
/* a11y audit 2026-07-28 (B9), TASK-70 item 3: the actual fix for the two
 * hero CTAs' missing focus indicator (WCAG 2.4.7) already shipped in
 * style/platform-base.css (`body.iotclass-homepage .btn-action:focus-visible`
 * -- root cause there was Bootstrap's `.btn:focus-visible` outline:0 beating
 * this file's bare `:focus-visible` rule on specificity). platform.css
 * carries its own parallel copy of the .btn-action-primary/-secondary rules
 * above (pre-dating design-system.css becoming authoritative) with no
 * competing :focus-visible declaration of its own, so there is no cascade
 * conflict either way -- this is a defensive mirror only, matching that
 * fix's exact selector/value, in case platform.css is ever served as the
 * sole homepage stylesheet. */
body.iotclass-homepage .btn-action:focus-visible:where(:scope, *) {
  outline: 3px solid rgba(6, 182, 212, 0.6);
  outline-offset: 3px;
  box-shadow: none;
}
body.iotclass-homepage .landing-navbar a:where(:scope, *)::after,
body.iotclass-homepage .btn-action:where(:scope, *)::after,
body.iotclass-homepage .gallery-card:where(:scope, *)::after,
body.iotclass-homepage .mastery-card:where(:scope, *)::after,
body.iotclass-homepage .platform-card:where(:scope, *)::after,
.site-footer a:where(:scope, *)::after,
body.iotclass-modules-landing .landing-navbar a:where(:scope, *)::after,
body.iotclass-modules-landing .part-card:where(:scope, *)::after,
.site-footer a:where(:scope, *)::after {
  content: none !important;
  display: none !important;
}
body.iotclass-homepage #continue-reading-container:where(:scope, *) {
  max-width: var(--landing-content-width);
  margin: 20px auto;
  padding: 0 20px;
}
body.iotclass-homepage .iot-continue-card:where(:scope, *) {
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid #b7cfd1;
  border-radius: 18px;
  background: #f4fbf9;
  color: #17333d;
  box-shadow: 0 8px 24px #17333d12;
}
body.iotclass-homepage .iot-continue-card__heading:where(:scope, *) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
body.iotclass-homepage #quarto-document-content .iot-continue-card h2:where(:scope, *) {
  margin: 0;
  margin-top: 0 !important;
  color: #17333d;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
}
body.iotclass-homepage .iot-continue-card__clear:where(:scope, *) {
  padding: 6px 10px;
  border: 1px solid #648891;
  border-radius: 8px;
  background: transparent;
  color: #274953;
  cursor: pointer;
}
body.iotclass-homepage .iot-continue-card__clear:focus-visible:where(:scope, *),
body.iotclass-homepage .iot-continue-card a:focus-visible:where(:scope, *) {
  outline: 3px solid #156f79;
  outline-offset: 3px;
}
body.iotclass-homepage .iot-continue-card__module:where(:scope, *) { margin: 14px 0 4px; color: #536e74; }
body.iotclass-homepage .iot-continue-card__primary:where(:scope, *) { font-size: 1.25rem; font-weight: 700; }
body.iotclass-homepage .iot-continue-card__more:where(:scope, *) { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid #cfddde; list-style: none; }
body.iotclass-homepage .iot-continue-card__more li:where(:scope, *) { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body.iotclass-homepage .iot-continue-card__more span:where(:scope, *) { color: #536e74; font-size: .85rem; }
body.iotclass-homepage .platform-section:where(:scope, *) {
  --segment-accent: var(--landing-accent);
  --segment-tint: #f3f8fc;
  --platform-accent: var(--segment-accent);
  max-width: var(--landing-content-width);
  margin: 56px auto;
  padding: 0 30px;
}
body.iotclass-homepage .platform-section--intro:where(:scope, *) {
  margin-top: 26px;
}
body.iotclass-homepage .segment-orient:where(:scope, *) {
  --segment-accent: #546e7a;
  --segment-tint: #eef3f5;
}
body.iotclass-homepage .segment-learn:where(:scope, *) {
  --segment-accent: #8b0000;
  --segment-tint: #f9ecec;
}
body.iotclass-homepage .segment-practice:where(:scope, *) {
  --segment-accent: #1976d2;
  --segment-tint: #eaf2fc;
}
body.iotclass-homepage .segment-books:where(:scope, *) {
  --segment-accent: #9a6f00;
  --segment-tint: #fff8db;
}
body.iotclass-homepage .segment-design:where(:scope, *) {
  --segment-accent: #546e7a;
  --segment-tint: #eef3f5;
}
body.iotclass-homepage .platform-section-header:where(:scope, *) {
  max-width: 780px;
  margin: 0 auto 24px;
  text-align: center;
}
body.iotclass-homepage .platform-kicker:where(:scope, *),
body.iotclass-homepage .platform-card-kicker:where(:scope, *) {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-left: 3px solid var(--platform-accent, var(--landing-accent));
  padding-left: 9px;
  color: var(--platform-accent, var(--landing-accent));
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}
body.iotclass-homepage .platform-label-row:where(:scope, *) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
body.iotclass-homepage .platform-label-row--left:where(:scope, *) {
  justify-content: flex-start;
}
body.iotclass-homepage .platform-status-tag:where(:scope, *) {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 10px;
  border: 1px solid #e2b400;
  border-radius: 999px;
  background: #fff3bf;
  color: #5c4300;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}
body.iotclass-homepage .platform-section-header h2:where(:scope, *) {
  margin: 12px 0 10px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--landing-text);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  line-height: 1.18;
  text-align: center;
}
body.iotclass-homepage .platform-section-header h2:where(:scope, *)::before {
  content: none;
  display: none;
}
body.iotclass-homepage .platform-section-header p:where(:scope, *) {
  margin: 0;
  color: var(--landing-muted);
  font-size: 1rem;
  line-height: 1.6;
}
body.iotclass-homepage .learning-flow:where(:scope, *) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
body.iotclass-homepage .learning-step:where(:scope, *) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 12px;
  min-height: 150px;
  padding: 18px;
  border: 1px solid var(--landing-border);
  border-top: 4px solid var(--segment-accent);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--segment-tint) 0%, #ffffff 78%);
  color: inherit;
  text-align: left;
  text-decoration: none !important;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}
body.iotclass-homepage .learning-step:hover:where(:scope, *) {
  transform: translateY(-2px);
  border-color: #c7c9cc;
  background: linear-gradient(180deg, var(--segment-tint) 0%, var(--landing-surface-hover) 100%);
}
body.iotclass-homepage .learning-step-index:where(:scope, *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--segment-accent);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1;
}
body.iotclass-homepage .learning-step-title:where(:scope, *) {
  align-self: center;
  color: var(--landing-text);
  font-size: 1rem;
  font-weight: 800;
}
body.iotclass-homepage .learning-step-copy:where(:scope, *) {
  grid-column: 1 / -1;
  color: var(--landing-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}
body.iotclass-homepage .platform-grid:where(:scope, *) {
  display: grid;
  gap: 18px;
}
body.iotclass-homepage .platform-grid--three:where(:scope, *) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.iotclass-homepage .platform-card:where(:scope, *),
body.iotclass-homepage .platform-feature-card:where(:scope, *) {
  display: flex;
  flex-direction: column;
  min-height: 230px;
  padding: 22px;
  border: 1px solid var(--landing-border);
  border-top: 4px solid var(--platform-accent, var(--landing-accent));
  border-radius: 8px;
  background: linear-gradient(180deg, var(--segment-tint, #f8fafc) 0%, var(--landing-surface) 78%);
  color: inherit;
  text-align: left;
  text-decoration: none !important;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}
body.iotclass-homepage .platform-card:hover:where(:scope, *) {
  transform: translateY(-2px);
  border-color: #c7c9cc;
  background: linear-gradient(
    180deg,
    var(--segment-tint, #f8fafc) 0%,
    var(--landing-surface-hover) 100%
  );
}
body.iotclass-homepage .platform-card h3:where(:scope, *),
body.iotclass-homepage .platform-feature-card h3:where(:scope, *) {
  margin: 14px 0 10px;
  color: var(--landing-text);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
}
body.iotclass-homepage .platform-card p:where(:scope, *),
body.iotclass-homepage .platform-feature-card p:where(:scope, *) {
  flex: 1;
  margin: 0 0 18px;
  color: var(--landing-muted);
  font-size: 0.94rem;
  line-height: 1.55;
}
body.iotclass-homepage .platform-card-link:where(:scope, *) {
  margin-top: auto;
  color: var(--platform-accent, var(--landing-accent));
  font-size: 0.9rem;
  font-weight: 700;
}
body.iotclass-homepage .platform-card-note:where(:scope, *) {
  margin-top: auto;
  color: var(--landing-subtle);
  font-size: 0.9rem;
  font-weight: 700;
}
body.iotclass-homepage .platform-card--static:where(:scope, *) {
  cursor: default;
}
body.iotclass-homepage .platform-card--static:hover:where(:scope, *) {
  transform: none;
  border-color: var(--landing-border);
  background: linear-gradient(180deg, var(--segment-tint, #f8fafc) 0%, var(--landing-surface) 78%);
}
body.iotclass-homepage .platform-section--split:where(:scope, *) {
  margin-top: 42px;
}
body.iotclass-homepage .platform-feature-card:where(:scope, *) {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(220px, 0.85fr);
  align-items: center;
  gap: 24px;
}
body.iotclass-homepage .platform-feature-list:where(:scope, *) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
body.iotclass-homepage .platform-feature-list span:where(:scope, *) {
  border: 1px solid #d9dee5;
  border-radius: 6px;
  background: #f7f8fa;
  color: var(--landing-text);
  font-size: 0.84rem;
  font-weight: 700;
  padding: 10px 12px;
  text-align: center;
}
body.iotclass-homepage .gallery-section:where(:scope, *) {
  --gallery-accent: var(--segment-accent);
  padding: 40px 20px 0;
  text-align: center;
}
body.iotclass-homepage .gallery-header:where(:scope, *) {
  margin: 0 0 10px;
  padding-bottom: 0;
  border-bottom: 0;
  color: var(--landing-text);
  font-size: 2rem;
  font-weight: 700;
}
body.iotclass-homepage .gallery-subheader:where(:scope, *) {
  max-width: 600px;
  margin: 0 auto;
  color: var(--landing-muted);
  font-size: 1.1rem;
}
body.iotclass-homepage .gallery-grid:where(:scope, *) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  max-width: 100%;
  margin: 34px auto 0;
  padding: 0;
}
body.iotclass-homepage .gallery-card:where(:scope, *) {
  display: flex;
  flex-direction: column;
  min-height: 220px;
  padding: 24px;
  border: 1px solid var(--landing-border);
  border-top: 4px solid var(--gallery-accent, var(--segment-accent));
  border-radius: 8px;
  background: linear-gradient(180deg, var(--segment-tint, #f8fafc) 0%, var(--landing-surface) 78%);
  color: inherit;
  text-align: left;
  text-decoration: none !important;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}
body.iotclass-homepage .gallery-card:hover:where(:scope, *) {
  transform: translateY(-2px);
  border-color: #c7c9cc;
  background: linear-gradient(
    180deg,
    var(--segment-tint, #f8fafc) 0%,
    var(--landing-surface-hover) 100%
  );
}
body.iotclass-homepage .gallery-card *:where(:scope, *) {
  pointer-events: none;
}
body.iotclass-homepage .gallery-icon:where(:scope, *) {
  align-self: flex-start;
  margin-bottom: 18px;
  padding-left: 10px;
  border-left: 4px solid currentColor;
  color: var(--gallery-accent, var(--landing-accent)) !important;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}
body.iotclass-homepage .gallery-title:where(:scope, *) {
  margin: 0 0 12px;
  color: var(--landing-text);
  font-size: 20px;
  font-weight: 700;
}
body.iotclass-homepage .gallery-description:where(:scope, *) {
  flex-grow: 1;
  margin: 0 0 15px;
  color: var(--landing-muted);
  font-size: 15px;
  line-height: 1.6;
}
body.iotclass-homepage .gallery-count:where(:scope, *) {
  padding-left: 10px;
  margin-bottom: 15px;
  border-left: 3px solid var(--gallery-accent, var(--landing-accent));
  color: var(--landing-text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}
body.iotclass-homepage .gallery-link:where(:scope, *) {
  margin-top: auto;
  color: var(--gallery-accent, var(--landing-accent));
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
body.iotclass-homepage .mastery-grid:where(:scope, *) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 100%;
  margin: 2rem auto 0;
  padding: 0;
}
body.iotclass-homepage .mastery-grid p:where(:scope, *) {
  display: contents;
}
body.iotclass-homepage .mastery-card:where(:scope, *) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 140px;
  padding: 1.25rem;
  border: 1px solid var(--landing-border);
  border-left: 5px solid var(--card-accent, var(--segment-accent));
  border-radius: 8px;
  background: linear-gradient(180deg, var(--card-tint, var(--segment-tint)) 0%, #ffffff 85%);
  text-align: left;
  text-decoration: none;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}
body.iotclass-homepage .mastery-card:hover:where(:scope, *) {
  transform: translateY(-2px);
  border-color: #c7c9cc;
  background: linear-gradient(
    180deg,
    var(--card-tint, var(--segment-tint)) 0%,
    var(--landing-surface-hover) 100%
  );
}
body.iotclass-homepage .mastery-title:where(:scope, *) {
  margin-bottom: 8px;
  color: var(--landing-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}
body.iotclass-homepage .mastery-desc:where(:scope, *) {
  color: var(--landing-muted);
  font-size: 13px;
  line-height: 1.5;
}
body.iotclass-modules-landing .modules-container:where(:scope, *) {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 30px 50px;
}
body.iotclass-modules-landing .module-section:where(:scope, *) {
  margin-bottom: 25px;
}
body.iotclass-modules-landing .module-header:where(:scope, *) {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--module-color, var(--landing-accent));
}
body.iotclass-modules-landing .module-header h2:where(:scope, *) {
  margin: 0;
  color: var(--landing-text) !important;
  font-size: 1.1rem;
  font-weight: 600;
}
body.iotclass-modules-landing .module-badge:where(:scope, *) {
  padding: 2px 10px;
  border-radius: 12px;
  /* a11y audit 2026-07-28 (B9), TASK-70 item 2: --module-color is also the
   * module-header border-bottom + the section-label text color, so it can't
   * simply be darkened globally without recoloring the whole section band.
   * Two of the nine modules (2 and 4) measure below 4.5:1 as this chip's
   * background with white text (Module 2 #d84315 -> 4.44:1, Module 4
   * #43a047 -> 3.30:1; the other seven all clear 4.5+, see modules/landing/
   * index.qmd). --module-badge-bg is an opt-in per-section override (set
   * inline only on those two module-section divs) so just the small badge
   * chip gets a darker shade; every other module keeps using --module-color
   * unchanged via the fallback. */
  background: var(--module-badge-bg, var(--module-color, var(--landing-accent)));
  color: var(--module-text, #ffffff);
  font-size: 0.7rem;
  font-weight: 600;
}
body.iotclass-modules-landing .module-desc:where(:scope, *) {
  margin-left: auto;
  color: var(--landing-subtle);
  font-size: 0.8rem;
  font-style: italic;
}
body.iotclass-modules-landing .parts-grid:where(:scope, *) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
body.iotclass-modules-landing .part-card:where(:scope, *) {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--landing-border);
  border-left: 3px solid var(--part-color, var(--module-color, var(--landing-accent)));
  border-radius: 8px;
  background: var(--landing-surface);
  text-decoration: none !important;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}
body.iotclass-modules-landing .part-card:hover:where(:scope, *) {
  transform: translateY(-1px);
  border-color: #c7c9cc;
  background: var(--landing-surface-hover);
}
body.iotclass-modules-landing .part-card h3:where(:scope, *) {
  margin: 0 0 4px;
  color: var(--landing-text) !important;
  font-size: 0.9rem;
  font-weight: 500;
}
body.iotclass-modules-landing .part-card p:where(:scope, *) {
  margin: 0 0 6px;
  color: var(--landing-muted);
  font-size: 0.75rem;
  line-height: 1.3;
}
body.iotclass-modules-landing .part-card .chapters:where(:scope, *) {
  color: var(--part-color, var(--module-color, var(--landing-accent)));
  font-size: 0.7rem;
  font-weight: 600;
}
.site-footer:where(:scope, *) {
  margin-top: 60px;
  padding: 40px 20px 30px;
  border-top: 1px solid var(--landing-surface);
  background: #2d3139;
  color: rgba(255, 255, 255, 0.7);
}
.site-footer .footer-container:where(:scope, *) {
  max-width: 1200px;
  margin: 0 auto;
}
.site-footer .footer-columns:where(:scope, *) {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 30px;
}
.site-footer .footer-logo-container:where(:scope, *) {
  display: flex;
  align-items: center;
}
.site-footer .footer-logo:where(:scope, *) {
  width: auto;
  height: 200px;
  border-radius: 0;
}
.site-footer .footer-column:where(:scope, *) {
  min-width: 150px;
}
.site-footer .footer-column h3:where(:scope, *),
.site-footer .footer-column h4:where(:scope, *) {
  margin: 0 0 15px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.site-footer .footer-column ul:where(:scope, *) {
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer .footer-column li:where(:scope, *) {
  margin-bottom: 10px;
}
/* Founder 2026-09-08: visited footer links were falling back to the global
 * a:visited navy and vanished on the dark footer; the CIC line is part of the
 * footer text, not a panel. */
.site-footer a:where(:scope, *),
.site-footer a:visited:where(:scope, *) {
  color: #d8dde6;
  font-size: 14px;
  text-decoration: none;
}
.site-footer a:hover:where(:scope, *) {
  color: #ffffff;
}
.site-footer .footer-cic:where(:scope, *) {
  margin: 28px auto 0;
  max-width: 1200px;
  padding: 8px 0 18px;
  border-top: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: center;
}
.site-footer .footer-cic p:where(:scope, *) { margin: 0; }
.site-footer .footer-cic strong:where(:scope, *) { color: #ffffff; letter-spacing: 0.04em; }
.site-footer .footer-cic a:where(:scope, *),
.site-footer .footer-cic a:visited:where(:scope, *) { color: #7fd8c6; text-decoration: underline; text-underline-offset: 2px; }
.site-footer .footer-cic a:hover:where(:scope, *) { color: #ffffff; }
.site-footer .footer-bottom:where(:scope, *) {
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.site-footer .footer-bottom-content:where(:scope, *) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.site-footer .footer-copyright:where(:scope, *) {
  margin: 0;
  color: #d8dde6;
  font-size: 13px;
}
.site-footer .footer-legal-links:where(:scope, *) {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.site-footer .footer-legal-links a:where(:scope, *) {
  font-size: 13px;
}

@media (min-width: 900px) {
  body.iotclass-homepage .content-block:where(:scope, *) {
    padding: 0 50px;
  }
}

@media (min-width: 1200px) {
  body.iotclass-homepage .content-block:where(:scope, *),
  body.iotclass-homepage .platform-section:where(:scope, *) {
    padding: 0;
  }
}

@media (max-width: 900px) {
  body.iotclass-homepage .platform-grid--four:where(:scope, *),
  body.iotclass-homepage .platform-grid--three:where(:scope, *) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.iotclass-homepage .platform-feature-card:where(:scope, *) {
    grid-template-columns: 1fr;
  }

  body.iotclass-homepage .learning-flow:where(:scope, *) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.iotclass-homepage .mastery-grid:where(:scope, *) {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  body.iotclass-homepage .landing-navbar:where(:scope, *),
  body.iotclass-modules-landing .landing-navbar:where(:scope, *) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px 15px;
  }

  body.iotclass-homepage .landing-nav-logo img:where(:scope, *),
  body.iotclass-modules-landing .landing-nav-logo img:where(:scope, *) {
    height: 28px;
  }

  body.iotclass-homepage .landing-nav-center:where(:scope, *),
  body.iotclass-modules-landing .landing-nav-center:where(:scope, *) {
    order: 3;
    width: 100%;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 0;
  }

  body.iotclass-homepage .landing-nav-center a:where(:scope, *),
  body.iotclass-modules-landing .landing-nav-center a:where(:scope, *) {
    font-size: 0.78rem;
  }

  body.iotclass-homepage .landing-nav-login-btn:where(:scope, *),
  body.iotclass-modules-landing .landing-nav-login-btn:where(:scope, *) {
    padding: 6px 12px;
    font-size: 12px;
  }

  body.iotclass-homepage .landing-navbar.landing-nav-ready:where(:scope, *),
  body.iotclass-modules-landing .landing-navbar.landing-nav-ready:where(:scope, *) {
    display: grid;
    grid-template-columns: auto auto;
    gap: 10px;
    align-items: center;
  }

  body.iotclass-homepage .landing-navbar.landing-nav-ready .landing-nav-toggle:where(:scope, *),
  body.iotclass-modules-landing .landing-navbar.landing-nav-ready .landing-nav-toggle:where(:scope, *) {
    display: inline-flex;
    justify-self: end;
  }

  body.iotclass-homepage .landing-navbar.landing-nav-ready .landing-nav-center:where(:scope, *),
  body.iotclass-homepage .landing-navbar.landing-nav-ready .landing-nav-right:where(:scope, *),
  body.iotclass-modules-landing .landing-navbar.landing-nav-ready .landing-nav-center:where(:scope, *),
  body.iotclass-modules-landing .landing-navbar.landing-nav-ready .landing-nav-right:where(:scope, *) {
    display: none;
  }

  body.iotclass-homepage
    .landing-navbar.landing-nav-ready[data-nav-open="true"]
    .landing-nav-center:where(:scope, *),
  body.iotclass-modules-landing
    .landing-navbar.landing-nav-ready[data-nav-open="true"]
    .landing-nav-center:where(:scope, *) {
    display: flex;
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    width: 100%;
    margin-top: 0;
    padding-top: 8px;
  }

  body.iotclass-homepage
    .landing-navbar.landing-nav-ready[data-nav-open="true"]
    .landing-nav-center
    a:where(:scope, *),
  body.iotclass-modules-landing
    .landing-navbar.landing-nav-ready[data-nav-open="true"]
    .landing-nav-center
    a:where(:scope, *) {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 6px;
  }

  body.iotclass-homepage
    .landing-navbar.landing-nav-ready[data-nav-open="true"]
    .landing-nav-center
    a:hover:where(:scope, *),
  body.iotclass-homepage
    .landing-navbar.landing-nav-ready[data-nav-open="true"]
    .landing-nav-center
    a:focus-visible:where(:scope, *),
  body.iotclass-homepage
    .landing-navbar.landing-nav-ready[data-nav-open="true"]
    .landing-nav-active:where(:scope, *),
  body.iotclass-modules-landing
    .landing-navbar.landing-nav-ready[data-nav-open="true"]
    .landing-nav-center
    a:hover:where(:scope, *),
  body.iotclass-modules-landing
    .landing-navbar.landing-nav-ready[data-nav-open="true"]
    .landing-nav-center
    a:focus-visible:where(:scope, *),
  body.iotclass-modules-landing
    .landing-navbar.landing-nav-ready[data-nav-open="true"]
    .landing-nav-active:where(:scope, *) {
    border-color: var(--landing-border);
    background: #f7f8fa;
  }

  body.iotclass-homepage .landing-navbar.landing-nav-ready[data-nav-open="true"] .landing-nav-right:where(:scope, *),
  body.iotclass-modules-landing
    .landing-navbar.landing-nav-ready[data-nav-open="true"]
    .landing-nav-right:where(:scope, *) {
    display: flex;
    grid-column: 1 / -1;
    justify-content: flex-end;
    width: 100%;
    padding-top: 4px;
  }

  body.iotclass-homepage
    .landing-navbar.landing-nav-ready[data-nav-open="true"]
    .landing-nav-login-btn:where(:scope, *),
  body.iotclass-modules-landing
    .landing-navbar.landing-nav-ready[data-nav-open="true"]
    .landing-nav-login-btn:where(:scope, *) {
    width: 100%;
  }

  body.iotclass-homepage
    .landing-navbar.landing-nav-ready[data-nav-open="true"]
    .iotclass-auth-slot
    > .landing-nav-login-btn:where(:scope, *),
  body.iotclass-modules-landing
    .landing-navbar.landing-nav-ready[data-nav-open="true"]
    .iotclass-auth-slot
    > .landing-nav-login-btn:where(:scope, *) {
    width: auto;
  }

  body.iotclass-homepage .construction-banner:where(:scope, *),
  body.iotclass-modules-landing .construction-banner:where(:scope, *) {
    padding: 7px 15px;
    font-size: 12px;
    line-height: 1.4;
    white-space: normal;
  }

  body.iotclass-homepage .hero-banner h1:where(:scope, *),
  body.iotclass-homepage .hero-banner h2:where(:scope, *) {
    margin-bottom: 25px;
    font-size: 32px;
  }

  body.iotclass-homepage .hero-banner p:where(:scope, *) {
    max-width: 95%;
    margin-bottom: 25px;
    font-size: 16px;
  }

  body.iotclass-homepage .btn-action:where(:scope, *) {
    min-width: 140px;
    padding: 14px 28px;
    font-size: 14px;
  }

  body.iotclass-homepage .platform-section:where(:scope, *) {
    margin: 38px auto;
    padding: 0 18px;
  }

  body.iotclass-homepage .platform-section-header h2:where(:scope, *) {
    font-size: 28px;
  }

  body.iotclass-homepage .platform-card:where(:scope, *),
  body.iotclass-homepage .platform-feature-card:where(:scope, *) {
    min-height: 0;
    padding: 18px;
  }

  body.iotclass-modules-landing .modules-container:where(:scope, *) {
    padding: 15px;
  }

  body.iotclass-modules-landing .parts-grid:where(:scope, *) {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
  }

  body.iotclass-modules-landing .module-header:where(:scope, *) {
    flex-wrap: wrap;
  }

  body.iotclass-modules-landing .module-desc:where(:scope, *) {
    width: 100%;
    margin-top: 5px;
    margin-left: 0;
  }
}

@media (max-width: 600px) {
  body.iotclass-homepage .platform-grid--four:where(:scope, *),
  body.iotclass-homepage .platform-grid--three:where(:scope, *),
  body.iotclass-homepage .learning-flow:where(:scope, *),
  body.iotclass-homepage .platform-feature-list:where(:scope, *) {
    grid-template-columns: 1fr;
  }

  body.iotclass-homepage .mastery-grid:where(:scope, *) {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  body.iotclass-homepage .mastery-card:where(:scope, *) {
    min-height: 120px;
    padding: 1rem;
  }

  body.iotclass-homepage .mastery-title:where(:scope, *) {
    font-size: 14px;
  }

  body.iotclass-homepage .mastery-desc:where(:scope, *) {
    font-size: 12px;
  }

  .site-footer .footer-columns:where(:scope, *) {
    flex-direction: column;
    gap: 25px;
    text-align: center;
  }

  .site-footer .footer-logo-container:where(:scope, *) {
    justify-content: center;
  }

  .site-footer .footer-logo:where(:scope, *) {
    height: 120px;
  }

  .site-footer .footer-column:where(:scope, *) {
    min-width: auto;
  }

  .site-footer .footer-bottom-content:where(:scope, *) {
    flex-direction: column;
    text-align: center;
  }

  .site-footer .footer-legal-links:where(:scope, *) {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  body.iotclass-homepage .gallery-grid:where(:scope, *) {
    grid-template-columns: 1fr;
    padding: 0 15px;
    margin: 20px auto;
  }

  body.iotclass-homepage .gallery-card:where(:scope, *) {
    min-height: 200px;
    padding: 20px;
  }
}
/* ==========================================================
   Readable Code,
Config,
and Worked-Example Blocks
   ----------------------------------------------------------
   Course pages include real code,
CLI snippets,
router config,
calculations,
and ASCII timing diagrams. These final overrides
   keep those blocks readable on narrow screens and stop long
   plain-text examples from looking like broken raw output.
   ========================================================== */

main div.sourceCode:where(:scope, *),
main pre:where(:scope, *) {
  max-width: 100%;
  border: 1px solid rgba(21, 94, 43, 0.14);
  border-left: 4px solid #1b7f5a;
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(27, 127, 90, 0.055), transparent 42%),
    linear-gradient(135deg, #fbfdfc 0%, #f6faf8 100%);
  box-shadow: 0 10px 24px rgba(21, 50, 69, 0.08);
  margin: 1.1rem 0 1.4rem;
}
main div.sourceCode:where(:scope, *) {
  padding: 0;
  overflow: hidden;
}
main div.sourceCode pre:where(:scope, *),
main pre:not(.sourceCode):where(:scope, *) {
  padding: 1rem 1.15rem;
}
main pre:where(:scope, *),
main pre code:where(:scope, *) {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere;
  word-break: normal;
}
main pre:where(:scope, *) {
  overflow-x: auto;
  line-height: 1.55;
  font-size: clamp(0.78rem, 0.73rem + 0.2vw, 0.9rem);
}
main div.sourceCode pre:where(:scope, *) {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
main .callout-body pre:where(:scope, *),
main .callout-body div.sourceCode:where(:scope, *) {
  margin: 0.85rem 0;
}

@media (max-width: 640px) {
  main div.sourceCode pre:where(:scope, *),
  main pre:not(.sourceCode):where(:scope, *) {
    padding: 0.85rem;
  }

  main pre:where(:scope, *) {
    font-size: 0.72rem;
    line-height: 1.5;
  }
}
/* ==========================================================
   Khan-Inspired Flat Chapter Surfaces
   ----------------------------------------------------------
   Shared chapter/book pages should read like a clean learning
   surface: white background,
subtle borders,
flat stacked blocks,
and figures without decorative panels.
   ========================================================== */

:root:where(:scope) {
  --learn-page-bg: var(--flat-surface, #ffffff);
  --learn-surface: var(--flat-surface, #ffffff);
  --learn-surface-muted: var(--flat-surface-muted, #f7f8fa);
  --learn-border: var(--flat-border, #dbdcdd);
  --learn-border-strong: var(--flat-border-strong, #c7c9cc);
  --learn-text: var(--flat-text, #21242c);
  --learn-text-muted: var(--flat-text-muted, #475774);
  --learn-blue: var(--flat-accent, #1865f2);
  --learn-blue-soft: #edf3fe;
  --learn-green: #008f7a;
  --learn-green-soft: #e5f8f4;
  --learn-amber: #b66000;
  --learn-amber-soft: #fff4e3;
  --learn-red: #b42318;
  --learn-red-soft: #fff1f2;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing):where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing):where(:scope, *) {
  background: var(--learn-page-bg);
  color: var(--learn-text);
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) #quarto-content:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) #quarto-content:where(:scope, *) {
  background: var(--learn-page-bg);
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content:where(:scope, *) {
  background: var(--learn-surface);
  color: var(--learn-text);
  box-shadow: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing)
  #title-block-header.quarto-title-block:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing)
  #title-block-header.quarto-title-block:where(:scope, *) {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--learn-border);
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 1.1rem;
  margin: 0 0 1.75rem;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing)
  #title-block-header.quarto-title-block
  .title:where(:scope, *),
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) #title-block-header .title:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing)
  #title-block-header.quarto-title-block
  .title:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) #title-block-header .title:where(:scope, *) {
  color: var(--learn-text) !important;
  font-size: clamp(1.85rem, 1.45rem + 1.35vw, 2.45rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing)
  #title-block-header
  .title
  a:where(:scope, *),
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing)
  #title-block-header
  .title
  .chapter-number:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing)
  #title-block-header
  .title
  .chapter-number:where(:scope, *) {
  color: var(--learn-text) !important;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content h1:where(:scope, *),
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content h2:where(:scope, *),
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content h3:where(:scope, *),
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content h4:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content h1:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content h2:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content h3:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content h4:where(:scope, *) {
  color: var(--learn-text);
  background: transparent;
  border-left: 0;
  box-shadow: none;
  letter-spacing: 0;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content h1:not(.title):where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content h1:not(.title):where(:scope, *) {
  border-bottom: 1px solid var(--learn-border);
  border-radius: 0;
  padding: 0 0 0.7rem;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content h2:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content h2:where(:scope, *) {
  border-bottom: 1px solid var(--learn-border);
  padding-bottom: 0.55rem;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content h2:where(:scope, *)::before,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content h2:where(:scope, *)::before {
  content: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content h3:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content h3:where(:scope, *) {
  padding-left: 0;
  color: var(--learn-text);
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content h3:hover:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content h3:hover:where(:scope, *) {
  color: var(--learn-text);
  border-left-color: transparent;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content a:not(.iot-ideator-bridge__action):hover:where(:scope, *)::after,
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing)
  #quarto-sidebar
  a:hover:where(:scope, *)::after,
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) #TOC a:hover:where(:scope, *)::after,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content a:not(.iot-ideator-bridge__action):hover:where(:scope, *)::after,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) #quarto-sidebar a:hover:where(:scope, *)::after,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) #TOC a:hover:where(:scope, *)::after {
  content: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) #quarto-sidebar:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) #quarto-sidebar:where(:scope, *) {
  background: var(--learn-surface) !important;
  border-right: 1px solid var(--learn-border);
  box-shadow: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) .sidebar-navigation a:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) .sidebar-navigation a:where(:scope, *) {
  border-left: 3px solid transparent;
  border-radius: 6px;
  color: var(--learn-text-muted);
  transform: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) .sidebar-navigation a:hover:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) .sidebar-navigation a:hover:where(:scope, *) {
  background: var(--learn-blue-soft);
  color: var(--learn-blue);
  border-left-color: var(--learn-blue);
  transform: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing)
  .sidebar-navigation
  a.active:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) .sidebar-navigation a.active:where(:scope, *) {
  background: var(--learn-blue-soft) !important;
  color: #1b50b3 !important;
  border-left-color: var(--pc-main, var(--learn-blue)) !important;
  box-shadow: none !important;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing)
  #quarto-sidebar
  .sidebar-item
  a.sidebar-link.active:where(:scope, *),
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing)
  #quarto-sidebar
  .sidebar-item
  a.sidebar-link.active
  *:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing)
  #quarto-sidebar
  .sidebar-item
  a.sidebar-link.active:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing)
  #quarto-sidebar
  .sidebar-item
  a.sidebar-link.active
  *:where(:scope, *) {
  color: #1b50b3 !important;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) #quarto-margin-sidebar:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) #quarto-margin-sidebar:where(:scope, *) {
  background: transparent !important;
  box-shadow: none !important;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) #TOC a:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) #TOC a:where(:scope, *) {
  color: var(--learn-text-muted);
  border-left: 3px solid transparent;
  border-radius: 6px;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) #TOC a:hover:where(:scope, *),
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) #TOC a.active:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) #TOC a:hover:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) #TOC a.active:where(:scope, *) {
  background: var(--learn-blue-soft);
  color: var(--learn-blue);
  border-left-color: var(--learn-blue);
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) #TOC a.active:where(:scope, *)::before,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) #TOC a.active:where(:scope, *)::before {
  content: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main div.sourceCode:where(:scope, *),
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main pre:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main div.sourceCode:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main pre:where(:scope, *) {
  background: var(--learn-surface-muted);
  border: 1px solid var(--learn-border);
  border-left: 4px solid var(--learn-green);
  border-radius: 8px;
  box-shadow: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main div.sourceCode pre:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main div.sourceCode pre:where(:scope, *) {
  background: transparent;
  border: 0;
  box-shadow: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main p code:where(:scope, *),
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main li code:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main p code:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main li code:where(:scope, *) {
  background: var(--learn-surface-muted);
  border: 1px solid var(--learn-border);
  border-radius: 4px;
  color: var(--learn-text);
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main table:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main table:where(:scope, *) {
  border: 1px solid var(--learn-border);
  border-radius: 8px;
  box-shadow: none;
  overflow: hidden;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main thead:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main thead:where(:scope, *) {
  background: var(--learn-surface-muted);
  color: var(--learn-text);
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main thead:where(:scope, *)::after,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main thead:where(:scope, *)::after {
  content: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main thead th:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main thead th:where(:scope, *) {
  border-bottom: 1px solid var(--learn-border);
  color: var(--learn-text);
  letter-spacing: 0;
  text-transform: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main tbody tr:where(:scope, *),
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main tbody tr:hover:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main tbody tr:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main tbody tr:hover:where(:scope, *) {
  transform: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main tbody tr:hover:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main tbody tr:hover:where(:scope, *) {
  background: var(--learn-blue-soft);
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main .callout:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main .callout:where(:scope, *) {
  background: var(--learn-surface);
  border: 1px solid var(--learn-border);
  border-left: 4px solid var(--learn-blue);
  border-radius: 8px;
  box-shadow: none;
  transform: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main .callout:hover:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main .callout:hover:where(:scope, *) {
  box-shadow: none;
  transform: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main .callout:where(:scope, *)::before,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main .callout:where(:scope, *)::before {
  content: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main .callout-note:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main .callout-note:where(:scope, *) {
  border-left-color: var(--learn-blue);
  background: var(--learn-surface);
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main .callout-tip:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main .callout-tip:where(:scope, *) {
  border-left-color: var(--learn-green);
  background: var(--learn-surface);
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main .callout-warning:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main .callout-warning:where(:scope, *) {
  border-left-color: var(--learn-amber);
  background: var(--learn-surface);
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main .callout-important:where(:scope, *),
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main .callout-caution:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main .callout-important:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main .callout-caution:where(:scope, *) {
  border-left-color: var(--learn-red);
  background: var(--learn-surface);
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main blockquote:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main blockquote:where(:scope, *) {
  background: var(--learn-surface-muted);
  border: 1px solid var(--learn-border);
  border-left: 4px solid var(--learn-green);
  border-radius: 8px;
  box-shadow: none;
  transform: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main blockquote:where(:scope, *)::before,
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main blockquote:where(:scope, *)::before {
  content: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main figure:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main figure:where(:scope, *) {
  background: transparent;
  border: 0;
  box-shadow: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main figure img:where(:scope, *),
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing)
  main
  .quarto-figure
  img.figure-img:where(:scope, *),
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing)
  main
  figure.quarto-float
  img:where(:scope, *),
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main img:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main figure img:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing)
  main
  .quarto-figure
  img.figure-img:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main figure.quarto-float img:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main img:where(:scope, *) {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main figure img:hover:where(:scope, *),
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main img:hover:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main figure img:hover:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main img:hover:where(:scope, *) {
  box-shadow: none;
  transform: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main figcaption:where(:scope, *),
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main .figure-caption:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main figcaption:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main .figure-caption:where(:scope, *) {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--learn-text-muted);
  display: block;
  padding: 0;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) .browser-lab-card:where(:scope, *),
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) .wiring-map:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) .browser-lab-card:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) .wiring-map:where(:scope, *) {
  background: var(--learn-surface);
  border: 1px solid var(--learn-border);
  border-radius: 8px;
  box-shadow: none;
}
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) .page-navigation:where(:scope, *),
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) .nav-page:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) .page-navigation:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) .nav-page:where(:scope, *) {
  background: var(--learn-surface);
  border-top: 1px solid var(--learn-border);
  box-shadow: none;
}

@media (max-width: 768px) {
  body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing)
    #title-block-header.quarto-title-block:where(:scope, *),
  body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing)
    #title-block-header.quarto-title-block:where(:scope, *) {
    padding: 0 0 0.85rem;
  }

  body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing)
    #title-block-header.quarto-title-block
    .title:where(:scope, *),
  body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing)
    #title-block-header
    .title:where(:scope, *),
  body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing)
    #title-block-header.quarto-title-block
    .title:where(:scope, *),
  body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) #title-block-header .title:where(:scope, *) {
    font-size: 1.55rem;
  }
}
/* CEO interim component CSS removed 2026-07-09: component pack (design-system.css) owns code chrome now. */

/* FIX-9-NAV: the chapter pager is a flex container, not a grid. Collapse its
 * two flex items into full-width rows on phones and allow destination labels
 * to wrap instead of truncating inside half-width cards. Mirrored in the
 * design-system layer because both stylesheets participate in pager geometry. */
@media (max-width: 520px) {
  body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) .page-navigation:where(:scope, *),
  body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) .page-navigation:where(:scope, *) {
    align-items: stretch;
    flex-direction: column;
  }

  body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) .page-navigation .nav-page:where(:scope, *),
  body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) .page-navigation .nav-page:where(:scope, *) {
    flex: 1 1 auto;
    margin-left: 0;
    width: 100%;
  }

  body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) .page-navigation .nav-page > a:where(:scope, *),
  body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) .page-navigation .nav-page > a:where(:scope, *) {
    box-sizing: border-box;
    width: 100%;
  }

  body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) .page-navigation .nav-page-text:where(:scope, *),
  body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) .page-navigation .nav-page-text:where(:scope, *) {
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }
}

/* AST-HOTFIX1: restore the server-rendered last-edited strip geometry that was
 * dropped when AST-CSS1 split Platform from the appended Design System copy.
 * Platform owns this page-chrome footprint; Design System owns its colors and
 * typography. */
/* Admin strip (founder rule 2026-09-08, refined 16:20Z): admin-only information
 * is an OVERLAY, never a layout element. It is fixed to the top edge, 20 px tall,
 * translucent amber, and ignores pointer events, so an admin sees exactly the
 * page a visitor sees with a thin update strip floating over it. Inserted by
 * assets/js/last-edited-banner.js only when a signed-in admin is detected. */
#admin-bar:where(:scope, *) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2147483000;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.1rem;
  height: 20px;
  padding: 0 12px;
  background: rgba(255, 193, 7, 0.9);
  color: #212121;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 20px;
  pointer-events: none;
  border-bottom: 1px solid rgba(255, 179, 0, 0.9);
}
#admin-bar .admin-bar__label:where(:scope, *) {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 10px;
}
#admin-tools-host .admin-bar__tools:where(:scope, *) { display: flex; gap: .35rem; pointer-events: auto; }
#admin-tools-host .admin-bar__tools > button:where(:scope, *) { border: 1px solid #71510a; border-radius: 3px; background: #fff8df; color: #212121; font: inherit; line-height: 16px; cursor: pointer; }
#admin-tools-host .admin-bar__drawer:where(:scope, *) {
  position: fixed; top: 24px; right: 12px; width: min(480px, calc(100vw - 24px));
  max-height: calc(100vh - 36px); overflow: auto; padding: 16px;
  box-sizing: border-box; border: 1px solid #8b6a1f; border-radius: 8px;
  background: #fff; color: #212121; box-shadow: 0 8px 32px #0004;
  font: 14px/1.5 system-ui, sans-serif; letter-spacing: normal; text-align: left;
}
#admin-tools-host .admin-bar__drawer[hidden]:where(:scope, *) { display: none; }
#admin-tools-host .admin-bar__drawer.askai-review:where(:scope, *) {
  top: 28px; right: 12px; width: min(960px, calc(100vw - 24px));
  max-height: calc(100vh - 40px); overflow: auto; pointer-events: auto;
}
#admin-tools-host .askai-review__close:where(:scope, *) { float: right; }
#admin-tools-host .askai-review__filters:where(:scope, *) { display: flex; flex-wrap: wrap; gap: .75rem; margin: .75rem 0; }
#admin-tools-host .askai-review__filter:where(:scope, *) { display: grid; gap: .2rem; min-width: 10rem; }
#admin-tools-host .askai-review__filter select:where(:scope, *) { max-width: 100%; font: inherit; }
#admin-tools-host .askai-review__cards:where(:scope, *) { display: grid; gap: 1rem; }
#admin-tools-host .askai-review__card:where(:scope, *) { border: 1px solid #bbb; border-radius: .5rem; padding: 1rem; }
#admin-tools-host .askai-review__card h3:where(:scope, *) { margin: 0 0 .5rem; }
#admin-tools-host .askai-review__avatar:where(:scope, *) { float: right; object-fit: contain; }
#admin-tools-host .askai-review__field:where(:scope, *) { margin: .25rem 0; overflow-wrap: anywhere; }
#admin-tools-host .askai-review__prompt:where(:scope, *) { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; font: .85rem/1.45 ui-monospace, monospace; background: #f6f6f6; padding: .75rem; }
#admin-tools-host .admin-bar__drawer h2:where(:scope, *) { font-size: 1.15rem; margin: 0 0 .5rem; }
#admin-tools-host .admin-bar__drawer button:where(:scope, *) { cursor: pointer; }
#admin-tools-host .iotclass-admin-modal:where(:scope, *) { pointer-events: auto; letter-spacing: normal; font-size: 14px; line-height: 1.5; }
#admin-tools-host .admin-source-panel:where(:scope, *) { position: static; width: 100%; box-shadow: none; margin-top: 8px; }
#admin-tools-host .quick-source-menu:where(:scope, *) { position: static; width: 100%; box-shadow: none; margin-top: 8px; }
#admin-bar #last-edited-banner:where(:scope, *) {
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  line-height: 20px;
  visibility: visible;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 520px) {
  #admin-bar:where(:scope, *) { gap: 0.5rem; }
}
@media print { #admin-bar:where(:scope, *) { display: none; } }
#last-edited-banner:where(:scope, *) {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: block;
  box-sizing: border-box;
  min-height: calc(0.78rem * 1.5 + 6px + 6px + 1px);
  line-height: 1.5;
  padding: 6px 16px;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.3px;
  position: relative;
  z-index: 1040;
  visibility: hidden;
}

#last-edited-banner.is-populated:where(:scope, *) {
  visibility: visible;
}

/* Must stay LAST: on /landing/ the banner's generic width:100% rule (shared with
   homepage) would otherwise re-shrink it to the quarto container width. */
body.iotclass-modules-landing div.construction-banner:where(:scope, *) {
  width: 100vw;
}

/* HOME-ORDER-1: the shared preview notice is a slim banner above the title. */
body .construction-banner--sitewide:where(:scope, *) {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 .35em;
  box-sizing: border-box;
  min-height: 28px;
  padding: 4px 12px;
  border-radius: 0;
  font-size: 12px;
  line-height: 18px;
}
body .construction-banner--sitewide .construction-banner-label:where(:scope, *) {
  margin: 0;
}

/* Search coverage is intentionally wider than a phone. Keep the overflow on
   its labelled, keyboard-focusable region so every column remains reachable. */
#quarto-document-content .front-door-scope-table table:where(:scope, *) {
  display: table;
  width: 100% !important;
  min-width: 660px;
  max-width: none !important;
  overflow: visible;
}

/* FIX-RESPONSIVE-1: shared overflow contracts. Landing's source-local phone
 * rule intentionally keeps two compact columns; zero-min tracks let long book
 * names wrap instead of enlarging those tracks. Chapter wide-figure breakout
 * classes may exceed the prose column, but never the space between their
 * actual centred grid start and the viewport inset. */
@media (max-width: 767px) {
  html:where(:scope) body.iotclass-modules-landing main .parts-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  body.iotclass-modules-landing .part-card:where(:scope, *) {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

@media (min-width: 1100px) {
  main#quarto-document-content [class$="-breakout"]:where(:scope, *) {
    box-sizing: border-box;
    max-width: calc(50vw + 90px) !important;
  }
}

body.docked #last-edited-banner:where(:scope, *) {
  width: 100%;
  margin-right: 0;
  margin-left: 0;
}
/* EIC-FIX-6: mobile chapter geometry. Keep this block mirrored verbatim in
   design-system.css so the source and generated platform layers agree. */
@media (max-width: 520px) {
  .toc-mobile-drawer:not(.open):where(:scope, *) { display: none !important; }
  .toc-mobile-drawer.open:where(:scope, *) { display: flex !important; }
  body.page-sensor-calibration-lab #title-block-header:where(:scope, *),
  body.page-sensor-calibration-lab #title-block-header .quarto-title:where(:scope, *),
  body.page-sensor-calibration-lab #title-block-header .quarto-title-block:where(:scope, *) { height: fit-content !important; max-height: 6rem !important; }
  body.page-sensor-calibration-lab:where(:scope, *) { overflow-x: clip !important; }
  .iot-chapter-hint:where(:scope, *) { position: static !important; width: auto !important; margin: .75rem !important; }
}

/* EIC8-E/G: class-level list reset and non-occluding chapter hint. This block
 * is mirrored verbatim across both standard sheets because both participate
 * in the rendered navigation/chrome cascade. */
#quarto-sidebar ul.list-unstyled li:where(:scope, *) {
  list-style: none !important;
}

.iot-chapter-hint:where(:scope, *) {
  position: static;
  right: auto;
  left: auto;
  width: min(100%, 32rem);
  margin: 0 0 1rem auto;
}

/* A persistent sticky status bar lets body text scroll underneath it on
 * compact pages. It remains the first item in the page, but stays in flow. */
.iotclass-user-status:where(:scope, *) {
  position: static;
}

/* EIC10-G: reusable chapter figure breakout. Converted figures are nested in
 * main.content (and sometimes in a component grid), so first span that local
 * grid and then cross the equal 1.5rem gutters. This maps to the page grid's
 * body-start-outset / body-end lines without entering the live TOC track.
 * Keep this block mirrored verbatim in design-system.css. */
@media (min-width: 1100px) {
  main#quarto-document-content:has(.iot-wide-breakout):where(:scope, *) {
    overflow: visible;
  }

  main#quarto-document-content .iot-wide-breakout:where(:scope, *) {
    box-sizing: border-box;
    grid-column: 1 / -1;
    width: calc(100% + 3rem);
    max-width: calc(100% + 3rem) !important;
    min-width: 0;
    margin-left: -1.5rem !important;
    margin-right: 0 !important;
    overflow: visible;
  }
}

/* EIC9-A: body-sized journey labels use the approved slate ink. The former
 * #7c8894 and amber custom-property values fell below 4.5:1 on white. */
.j-upsell:where(:scope, *),
.j-kicker:where(:scope, *),
.g-role:where(:scope, *) {
  color: #51606e !important;
}

/* EIC10-S CANONICAL SECTION START: generated figure widths */
/* GENERATED by scripts/generate-figure-widths.py -- do not edit.
 * Per-figure display width derived from the figure's own typography, so
 * its labels render near 16px, the page's body text size.
 * Regenerate after adding or re-authoring figures.
 * 1667 rules emitted; figures computed at or above the 1120px column
 * are omitted because the shared 100% fluid fallback already sizes them identically.
 */

#quarto-document-content img[src$="1f-noise-spectrum-modern.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="1f-noise-spectrum-modern.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="6LoWPAN-modern-20260103070000.svg"]:where(:scope, *) { width: 100%; max-width: 800px; }
#quarto-document-content figure:has(img[src$="6LoWPAN-modern-20260103070000.svg"]):where(:scope, *) { --iot-figure-fit-width: 800px; }
#quarto-document-content img[src$="6LoWPANHeaderCompression-modern-20260103000500.svg"]:where(:scope, *) { width: 100%; max-width: 889px; }
#quarto-document-content figure:has(img[src$="6LoWPANHeaderCompression-modern-20260103000500.svg"]):where(:scope, *) { --iot-figure-fit-width: 889px; }
#quarto-document-content img[src$="6lowpanSecurityLayers-modern-20260102121500.svg"]:where(:scope, *) { width: 100%; max-width: 889px; }
#quarto-document-content figure:has(img[src$="6lowpanSecurityLayers-modern-20260102121500.svg"]):where(:scope, *) { --iot-figure-fit-width: 889px; }
#quarto-document-content img[src$="ADC-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 931px; }
#quarto-document-content figure:has(img[src$="ADC-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 931px; }
#quarto-document-content img[src$="ADCDAC-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 952px; }
#quarto-document-content figure:has(img[src$="ADCDAC-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 952px; }
#quarto-document-content img[src$="ADCGraph-modern-20260103151700.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="ADCGraph-modern-20260103151700.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="AMQPExchangeTypes-modern-20260102190000.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="AMQPExchangeTypes-modern-20260102190000.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="AMQPMessageFlow-modern-20260102134500.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="AMQPMessageFlow-modern-20260102134500.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="AMQPRoutingTopology-modern-20260102190000.svg"]:where(:scope, *) { width: 100%; max-width: 914px; }
#quarto-document-content figure:has(img[src$="AMQPRoutingTopology-modern-20260102190000.svg"]):where(:scope, *) { --iot-figure-fit-width: 914px; }
#quarto-document-content img[src$="APIGateway-modern-20260103030000.svg"]:where(:scope, *) { width: 100%; max-width: 1018px; }
#quarto-document-content figure:has(img[src$="APIGateway-modern-20260103030000.svg"]):where(:scope, *) { --iot-figure-fit-width: 1018px; }
#quarto-document-content img[src$="AccelerometerSpecificationsSpecSheet4-modern-20260103114200.svg"]:where(:scope, *) { width: 100%; max-width: 985px; }
#quarto-document-content figure:has(img[src$="AccelerometerSpecificationsSpecSheet4-modern-20260103114200.svg"]):where(:scope, *) { --iot-figure-fit-width: 985px; }
#quarto-document-content img[src$="AccessibilityDesignProcess-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="AccessibilityDesignProcess-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="ActiveBadgeInfraredProximity-modern-20260807.svg"]:where(:scope, *) { width: 100%; max-width: 1103px; }
#quarto-document-content figure:has(img[src$="ActiveBadgeInfraredProximity-modern-20260807.svg"]):where(:scope, *) { --iot-figure-fit-width: 1103px; }
#quarto-document-content img[src$="AdHocFANETs-modern-20260103070000.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="AdHocFANETs-modern-20260103070000.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="AdcResolutionBits-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 800px; }
#quarto-document-content figure:has(img[src$="AdcResolutionBits-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 800px; }
#quarto-document-content img[src$="AdcResolutionComparison-modern-20260108122912.svg"]:where(:scope, *) { width: 100%; max-width: 1100px; }
#quarto-document-content figure:has(img[src$="AdcResolutionComparison-modern-20260108122912.svg"]):where(:scope, *) { --iot-figure-fit-width: 1100px; }
#quarto-document-content img[src$="Adhoc-modern-20260103070000.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="Adhoc-modern-20260103070000.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="AdhocApplicationsRoutingSelection-modern-20260601.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="AdhocApplicationsRoutingSelection-modern-20260601.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="AdhocFundamentalsInfraVsAdhoc-modern-20260601.svg"]:where(:scope, *) { width: 100%; max-width: 777px; }
#quarto-document-content figure:has(img[src$="AdhocFundamentalsInfraVsAdhoc-modern-20260601.svg"]):where(:scope, *) { --iot-figure-fit-width: 777px; }
#quarto-document-content img[src$="AdhocHybridZrpBordercastSequence-modern-20260601.svg"]:where(:scope, *) { width: 100%; max-width: 800px; }
#quarto-document-content figure:has(img[src$="AdhocHybridZrpBordercastSequence-modern-20260601.svg"]):where(:scope, *) { --iot-figure-fit-width: 800px; }
#quarto-document-content img[src$="AdhocHybridZrpDecisionFlow-modern-20260601.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="AdhocHybridZrpDecisionFlow-modern-20260601.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="AdhocProdEnergyAwareImpact-modern-20260601.svg"]:where(:scope, *) { width: 100%; max-width: 411px; }
#quarto-document-content figure:has(img[src$="AdhocProdEnergyAwareImpact-modern-20260601.svg"]):where(:scope, *) { --iot-figure-fit-width: 411px; }
#quarto-document-content img[src$="AdhocProdRoutingComparison-modern-20260108123003.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="AdhocProdRoutingComparison-modern-20260108123003.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="AiWirelessEnergyEvidenceMatrix-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1080px; }
#quarto-document-content figure:has(img[src$="AiWirelessEnergyEvidenceMatrix-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1080px; }
#quarto-document-content img[src$="AmqpDeliveryGuarantees-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="AmqpDeliveryGuarantees-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="AmqpMessageLifecycle-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1108px; }
#quarto-document-content figure:has(img[src$="AmqpMessageLifecycle-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1108px; }
#quarto-document-content img[src$="AnomalyML-concepts-modern-20260221.svg"]:where(:scope, *) { width: 100%; max-width: 1049px; }
#quarto-document-content figure:has(img[src$="AnomalyML-concepts-modern-20260221.svg"]):where(:scope, *) { --iot-figure-fit-width: 1049px; }
#quarto-document-content img[src$="AnomalyMetrics-concepts-modern-20260221.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="AnomalyMetrics-concepts-modern-20260221.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="AnomalyPipelines-concepts-modern-20260221.svg"]:where(:scope, *) { width: 100%; max-width: 1054px; }
#quarto-document-content figure:has(img[src$="AnomalyPipelines-concepts-modern-20260221.svg"]):where(:scope, *) { --iot-figure-fit-width: 1054px; }
#quarto-document-content img[src$="AppFrameworkReviewRecord-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 933px; }
#quarto-document-content figure:has(img[src$="AppFrameworkReviewRecord-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 933px; }
#quarto-document-content img[src$="AppFrameworkRoute-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 933px; }
#quarto-document-content figure:has(img[src$="AppFrameworkRoute-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 933px; }
#quarto-document-content img[src$="ApplicationDomainsOverviewFivePillars-modern-20260324.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="ApplicationDomainsOverviewFivePillars-modern-20260324.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="ApplicationDomainsTechnologyMapping-modern-20260324.svg"]:where(:scope, *) { width: 100%; max-width: 948px; }
#quarto-document-content figure:has(img[src$="ApplicationDomainsTechnologyMapping-modern-20260324.svg"]):where(:scope, *) { --iot-figure-fit-width: 948px; }
#quarto-document-content img[src$="Application_Layer-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="Application_Layer-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="ArchitectureLabLayerMap-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="ArchitectureLabLayerMap-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="ArchitectureLabRouteReview-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1059px; }
#quarto-document-content figure:has(img[src$="ArchitectureLabRouteReview-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1059px; }
#quarto-document-content img[src$="ArchitectureLabTestMatrix-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="ArchitectureLabTestMatrix-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="AsymmetricEncryption-modern-20260103151700.svg"]:where(:scope, *) { width: 100%; max-width: 889px; }
#quarto-document-content figure:has(img[src$="AsymmetricEncryption-modern-20260103151700.svg"]):where(:scope, *) { --iot-figure-fit-width: 889px; }
#quarto-document-content img[src$="Authentication-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 823px; }
#quarto-document-content figure:has(img[src$="Authentication-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 823px; }
#quarto-document-content img[src$="BLEModule-modern-20260103044500.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="BLEModule-modern-20260103044500.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="BLEiBeacons-modern-20260103114200.svg"]:where(:scope, *) { width: 100%; max-width: 914px; }
#quarto-document-content figure:has(img[src$="BLEiBeacons-modern-20260103114200.svg"]):where(:scope, *) { --iot-figure-fit-width: 914px; }
#quarto-document-content img[src$="BT-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="BT-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="BabyMonitor-modern-20260103034500.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="BabyMonitor-modern-20260103034500.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="BabyUrinaryTractInfectionMonitoring-modern-20260103070000.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="BabyUrinaryTractInfectionMonitoring-modern-20260103070000.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="BacktoGPS-modern-20260103100000.svg"]:where(:scope, *) { width: 100%; max-width: 996px; }
#quarto-document-content figure:has(img[src$="BacktoGPS-modern-20260103100000.svg"]):where(:scope, *) { --iot-figure-fit-width: 996px; }
#quarto-document-content img[src$="BandwidthAndCoverage-modern-20260103070000.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="BandwidthAndCoverage-modern-20260103070000.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="BatteriesExercise-modern-20260103114200.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="BatteriesExercise-modern-20260103114200.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="BipolarJunctionTransistor-modern-20260103151700.svg"]:where(:scope, *) { width: 100%; max-width: 889px; }
#quarto-document-content figure:has(img[src$="BipolarJunctionTransistor-modern-20260103151700.svg"]):where(:scope, *) { --iot-figure-fit-width: 889px; }
#quarto-document-content img[src$="BleAttackTimeline-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 768px; }
#quarto-document-content figure:has(img[src$="BleAttackTimeline-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 768px; }
#quarto-document-content img[src$="BlePowerDecision-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 878px; }
#quarto-document-content figure:has(img[src$="BlePowerDecision-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 878px; }
#quarto-document-content img[src$="BleSecurityCircuit-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="BleSecurityCircuit-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="Bluetooth-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="Bluetooth-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="BluetoothPowerClasses-modern-20260103151700.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="BluetoothPowerClasses-modern-20260103151700.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="BluetoothProtocolStack-modern-20260102130000.svg"]:where(:scope, *) { width: 100%; max-width: 985px; }
#quarto-document-content figure:has(img[src$="BluetoothProtocolStack-modern-20260102130000.svg"]):where(:scope, *) { --iot-figure-fit-width: 985px; }
#quarto-document-content img[src$="BoardOnlyBringupBaselineLoop-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1032px; }
#quarto-document-content figure:has(img[src$="BoardOnlyBringupBaselineLoop-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1032px; }
#quarto-document-content img[src$="BusinessModelCanvas-modern-20260108122913.svg"]:where(:scope, *) { width: 100%; max-width: 951px; }
#quarto-document-content figure:has(img[src$="BusinessModelCanvas-modern-20260108122913.svg"]):where(:scope, *) { --iot-figure-fit-width: 951px; }
#quarto-document-content img[src$="ButTheyArentStatic-modern-20260103114200.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="ButTheyArentStatic-modern-20260103114200.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="CEP-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="CEP-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="CalculusRelationship-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="CalculusRelationship-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="CapacitorsInductorsResistorsTable-modern-20260103151700.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="CapacitorsInductorsResistorsTable-modern-20260103151700.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="CellularIoTComparison-modern-20260102133500.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="CellularIoTComparison-modern-20260102133500.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="CellularIoTEvolution-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="CellularIoTEvolution-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="CellularModem-modern-20260103044500.svg"]:where(:scope, *) { width: 100%; max-width: 900px; }
#quarto-document-content figure:has(img[src$="CellularModem-modern-20260103044500.svg"]):where(:scope, *) { --iot-figure-fit-width: 900px; }
#quarto-document-content img[src$="CertSelectionRoute-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="CertSelectionRoute-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="ChlorinationControl-modern-20260102234500.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="ChlorinationControl-modern-20260102234500.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="CircuitToUseAFETAsASwitch-modern-20260103151700.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="CircuitToUseAFETAsASwitch-modern-20260103151700.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="Cloud-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 900px; }
#quarto-document-content figure:has(img[src$="Cloud-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 900px; }
#quarto-document-content img[src$="CloudProductionLaunchRecord-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 996px; }
#quarto-document-content figure:has(img[src$="CloudProductionLaunchRecord-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 996px; }
#quarto-document-content img[src$="CloudProductionObservabilityLoop-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 994px; }
#quarto-document-content figure:has(img[src$="CloudProductionObservabilityLoop-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 994px; }
#quarto-document-content img[src$="CloudServiceModelsEvolutionPath-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1108px; }
#quarto-document-content figure:has(img[src$="CloudServiceModelsEvolutionPath-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1108px; }
#quarto-document-content img[src$="CoAPMessageFormat-modern-20260102122500.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="CoAPMessageFormat-modern-20260102122500.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="CoAPMessages-modern-20260103123000.svg"]:where(:scope, *) { width: 100%; max-width: 1029px; }
#quarto-document-content figure:has(img[src$="CoAPMessages-modern-20260103123000.svg"]):where(:scope, *) { --iot-figure-fit-width: 1029px; }
#quarto-document-content img[src$="CoAPServer-modern-20260103044500.svg"]:where(:scope, *) { width: 100%; max-width: 919px; }
#quarto-document-content figure:has(img[src$="CoAPServer-modern-20260103044500.svg"]):where(:scope, *) { --iot-figure-fit-width: 919px; }
#quarto-document-content img[src$="CoapFeaturesAndL-modern-20260108122928.svg"]:where(:scope, *) { width: 100%; max-width: 1080px; }
#quarto-document-content figure:has(img[src$="CoapFeaturesAndL-modern-20260108122928.svg"]):where(:scope, *) { --iot-figure-fit-width: 1080px; }
#quarto-document-content img[src$="CoapVsHttpTemperature-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="CoapVsHttpTemperature-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="CodeSnippetAdaptationRoute-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 972px; }
#quarto-document-content figure:has(img[src$="CodeSnippetAdaptationRoute-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 972px; }
#quarto-document-content img[src$="CoffeeKiosk-modern-20260103060000.svg"]:where(:scope, *) { width: 100%; max-width: 1081px; }
#quarto-document-content figure:has(img[src$="CoffeeKiosk-modern-20260103060000.svg"]):where(:scope, *) { --iot-figure-fit-width: 1081px; }
#quarto-document-content img[src$="ComparisonBetweenCoAPAndMQTT-modern-20260103123000.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="ComparisonBetweenCoAPAndMQTT-modern-20260103123000.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="ComparisonOfAsynchronousSerial-modern-20260103070000.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="ComparisonOfAsynchronousSerial-modern-20260103070000.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="Computing-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="Computing-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="ConnectedVsDisconnected-modern-20260103070000.svg"]:where(:scope, *) { width: 100%; max-width: 996px; }
#quarto-document-content figure:has(img[src$="ConnectedVsDisconnected-modern-20260103070000.svg"]):where(:scope, *) { --iot-figure-fit-width: 996px; }
#quarto-document-content img[src$="ConnectionCycleComparison-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="ConnectionCycleComparison-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="Consumer-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 929px; }
#quarto-document-content figure:has(img[src$="Consumer-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 929px; }
#quarto-document-content img[src$="ContextAnalysisRecord-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1034px; }
#quarto-document-content figure:has(img[src$="ContextAnalysisRecord-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1034px; }
#quarto-document-content img[src$="ControlRoom-modern-20260103060000.svg"]:where(:scope, *) { width: 100%; max-width: 1011px; }
#quarto-document-content figure:has(img[src$="ControlRoom-modern-20260103060000.svg"]):where(:scope, *) { --iot-figure-fit-width: 1011px; }
#quarto-document-content img[src$="CoradDroneKidsRoute-modern-20260601.svg"]:where(:scope, *) { width: 100%; max-width: 602px; }
#quarto-document-content figure:has(img[src$="CoradDroneKidsRoute-modern-20260601.svg"]):where(:scope, *) { --iot-figure-fit-width: 602px; }
#quarto-document-content img[src$="CoradSystemArchitecture-modern-20260601.svg"]:where(:scope, *) { width: 100%; max-width: 640px; }
#quarto-document-content figure:has(img[src$="CoradSystemArchitecture-modern-20260601.svg"]):where(:scope, *) { --iot-figure-fit-width: 640px; }
#quarto-document-content img[src$="CoradTspAlgorithmSelection-modern-20260601.svg"]:where(:scope, *) { width: 100%; max-width: 661px; }
#quarto-document-content figure:has(img[src$="CoradTspAlgorithmSelection-modern-20260601.svg"]):where(:scope, *) { --iot-figure-fit-width: 661px; }
#quarto-document-content img[src$="Cost-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1031px; }
#quarto-document-content figure:has(img[src$="Cost-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1031px; }
#quarto-document-content img[src$="CurbsidePickup-modern-20260102234500.svg"]:where(:scope, *) { width: 100%; max-width: 1054px; }
#quarto-document-content figure:has(img[src$="CurbsidePickup-modern-20260102234500.svg"]):where(:scope, *) { --iot-figure-fit-width: 1054px; }
#quarto-document-content img[src$="DEV-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="DEV-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="DSDVWhenALinkBreaks-modern-20260103090000.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="DSDVWhenALinkBreaks-modern-20260103090000.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="DTLSHandshake-modern-20260102130500.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="DTLSHandshake-modern-20260102130500.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="DamLevel-modern-20260103060000.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="DamLevel-modern-20260103060000.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="DataAtTheEdgeArchitecture-modern-20260103080000.svg"]:where(:scope, *) { width: 100%; max-width: 747px; }
#quarto-document-content figure:has(img[src$="DataAtTheEdgeArchitecture-modern-20260103080000.svg"]):where(:scope, *) { --iot-figure-fit-width: 747px; }
#quarto-document-content img[src$="DataCleaning-modern-20260103090000.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="DataCleaning-modern-20260103090000.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="DataEncodingFormats-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="DataEncodingFormats-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="DataFormatSelectionOverview-modern-20260317.svg"]:where(:scope, *) { width: 100%; max-width: 889px; }
#quarto-document-content figure:has(img[src$="DataFormatSelectionOverview-modern-20260317.svg"]):where(:scope, *) { --iot-figure-fit-width: 889px; }
#quarto-document-content img[src$="DataGenerationTable-modern-20260103090000.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="DataGenerationTable-modern-20260103090000.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="DataGenerationTable2-modern-20260103090000.svg"]:where(:scope, *) { width: 100%; max-width: 883px; }
#quarto-document-content figure:has(img[src$="DataGenerationTable2-modern-20260103090000.svg"]):where(:scope, *) { --iot-figure-fit-width: 883px; }
#quarto-document-content img[src$="DataQualityPipeline-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="DataQualityPipeline-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="DataVolume-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 747px; }
#quarto-document-content figure:has(img[src$="DataVolume-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 747px; }
#quarto-document-content img[src$="Dataaggregation-modern-20260103090000.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="Dataaggregation-modern-20260103090000.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="DefenseInDepthLayers-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="DefenseInDepthLayers-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="DefinitionsComplementary-modern-20260322.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="DefinitionsComplementary-modern-20260322.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="DeliveryReplicas-modern-20260103070000.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="DeliveryReplicas-modern-20260103070000.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="DesignApproachCostComparison-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1029px; }
#quarto-document-content figure:has(img[src$="DesignApproachCostComparison-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1029px; }
#quarto-document-content img[src$="DesignPlanningSpine-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="DesignPlanningSpine-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="DeviceEvolutionEraTimeline-modern-20260322.svg"]:where(:scope, *) { width: 100%; max-width: 823px; }
#quarto-document-content figure:has(img[src$="DeviceEvolutionEraTimeline-modern-20260322.svg"]):where(:scope, *) { --iot-figure-fit-width: 823px; }
#quarto-document-content img[src$="Diagram2-modern-20260108122931.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="Diagram2-modern-20260108122931.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="Diagram3-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1018px; }
#quarto-document-content figure:has(img[src$="Diagram3-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1018px; }
#quarto-document-content img[src$="DifferentKindsOfResistors-modern-20260103151700.svg"]:where(:scope, *) { width: 100%; max-width: 1011px; }
#quarto-document-content figure:has(img[src$="DifferentKindsOfResistors-modern-20260103151700.svg"]):where(:scope, *) { --iot-figure-fit-width: 1011px; }
#quarto-document-content img[src$="DifferentServiceModels-modern-20260103090000.svg"]:where(:scope, *) { width: 100%; max-width: 804px; }
#quarto-document-content figure:has(img[src$="DifferentServiceModels-modern-20260103090000.svg"]):where(:scope, *) { --iot-figure-fit-width: 804px; }
#quarto-document-content img[src$="DifferentialPrivacy-modern-20260102190000.svg"]:where(:scope, *) { width: 100%; max-width: 1016px; }
#quarto-document-content figure:has(img[src$="DifferentialPrivacy-modern-20260102190000.svg"]):where(:scope, *) { --iot-figure-fit-width: 1016px; }
#quarto-document-content img[src$="DigitalFactoryTwin-modern-20260103020000.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="DigitalFactoryTwin-modern-20260103020000.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="DigitalTwinScopeHierarchy-modern-20260601.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="DigitalTwinScopeHierarchy-modern-20260601.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="DirectedDiffusionTwoPhasePull-modern-20260103090000.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="DirectedDiffusionTwoPhasePull-modern-20260103090000.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="DsdvNeighborGraph-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 800px; }
#quarto-document-content figure:has(img[src$="DsdvNeighborGraph-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 800px; }
#quarto-document-content img[src$="DsdvVariantTimeline-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 808px; }
#quarto-document-content figure:has(img[src$="DsdvVariantTimeline-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 808px; }
#quarto-document-content img[src$="DsrFundamentalsDecision-modern-20260601.svg"]:where(:scope, *) { width: 100%; max-width: 1024px; }
#quarto-document-content figure:has(img[src$="DsrFundamentalsDecision-modern-20260601.svg"]):where(:scope, *) { --iot-figure-fit-width: 1024px; }
#quarto-document-content img[src$="DsrSourceRoutePacket-modern-20260601.svg"]:where(:scope, *) { width: 100%; max-width: 991px; }
#quarto-document-content figure:has(img[src$="DsrSourceRoutePacket-modern-20260601.svg"]):where(:scope, *) { --iot-figure-fit-width: 991px; }
#quarto-document-content img[src$="DtlsArchitecture-modern-20260108122932.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="DtlsArchitecture-modern-20260108122932.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="DtlsVsTlsComparisonVariant-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="DtlsVsTlsComparisonVariant-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="DtnApplicationsUseCaseMap-modern-20260601.svg"]:where(:scope, *) { width: 100%; max-width: 1059px; }
#quarto-document-content figure:has(img[src$="DtnApplicationsUseCaseMap-modern-20260601.svg"]):where(:scope, *) { --iot-figure-fit-width: 1059px; }
#quarto-document-content img[src$="DtnEpidemicTimeline-modern-20260601.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="DtnEpidemicTimeline-modern-20260601.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="DtnFundamentalsConnectivityComparison-modern-20260601.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="DtnFundamentalsConnectivityComparison-modern-20260601.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="DtnRoutingStrategyComparison-modern-20260601.svg"]:where(:scope, *) { width: 100%; max-width: 1045px; }
#quarto-document-content figure:has(img[src$="DtnRoutingStrategyComparison-modern-20260601.svg"]):where(:scope, *) { --iot-figure-fit-width: 1045px; }
#quarto-document-content img[src$="DtnSocialCastBoundedReplication-modern-20260601.svg"]:where(:scope, *) { width: 100%; max-width: 1024px; }
#quarto-document-content figure:has(img[src$="DtnSocialCastBoundedReplication-modern-20260601.svg"]):where(:scope, *) { --iot-figure-fit-width: 1024px; }
#quarto-document-content img[src$="DtnStoreCarryForwardSequence-modern-20260601.svg"]:where(:scope, *) { width: 100%; max-width: 1045px; }
#quarto-document-content figure:has(img[src$="DtnStoreCarryForwardSequence-modern-20260601.svg"]):where(:scope, *) { --iot-figure-fit-width: 1045px; }
#quarto-document-content img[src$="DutyCycleConcept-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 981px; }
#quarto-document-content figure:has(img[src$="DutyCycleConcept-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 981px; }
#quarto-document-content img[src$="DutyCycleWorkedExamplesReviewLoop-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1011px; }
#quarto-document-content figure:has(img[src$="DutyCycleWorkedExamplesReviewLoop-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1011px; }
#quarto-document-content img[src$="Edge-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="Edge-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="EdgeAiMl-modern-20260108122920.svg"]:where(:scope, *) { width: 100%; max-width: 1102px; }
#quarto-document-content figure:has(img[src$="EdgeAiMl-modern-20260108122920.svg"]):where(:scope, *) { --iot-figure-fit-width: 1102px; }
#quarto-document-content img[src$="EdgeContainerDeployment-modern-20260102190000.svg"]:where(:scope, *) { width: 100%; max-width: 1031px; }
#quarto-document-content figure:has(img[src$="EdgeContainerDeployment-modern-20260102190000.svg"]):where(:scope, *) { --iot-figure-fit-width: 1031px; }
#quarto-document-content img[src$="EdgeDataAcquisitio-modern-20260108122939.svg"]:where(:scope, *) { width: 100%; max-width: 993px; }
#quarto-document-content figure:has(img[src$="EdgeDataAcquisitio-modern-20260108122939.svg"]):where(:scope, *) { --iot-figure-fit-width: 993px; }
#quarto-document-content img[src$="EightFacetsThermostatExample-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1063px; }
#quarto-document-content figure:has(img[src$="EightFacetsThermostatExample-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1063px; }
#quarto-document-content img[src$="ElectromagneticSpectrum-modern-20260103123000.svg"]:where(:scope, *) { width: 100%; max-width: 889px; }
#quarto-document-content figure:has(img[src$="ElectromagneticSpectrum-modern-20260103123000.svg"]):where(:scope, *) { --iot-figure-fit-width: 889px; }
#quarto-document-content img[src$="EnablersCommunicationsRecord-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1058px; }
#quarto-document-content figure:has(img[src$="EnablersCommunicationsRecord-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1058px; }
#quarto-document-content img[src$="EnablersCommunicationsWorkflowSpine-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 972px; }
#quarto-document-content figure:has(img[src$="EnablersCommunicationsWorkflowSpine-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 972px; }
#quarto-document-content img[src$="EncryptionSummary-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 720px; }
#quarto-document-content figure:has(img[src$="EncryptionSummary-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 720px; }
#quarto-document-content img[src$="EndiannessVariantUsecase-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="EndiannessVariantUsecase-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="EnergyCasePatternMap-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 889px; }
#quarto-document-content figure:has(img[src$="EnergyCasePatternMap-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 889px; }
#quarto-document-content img[src$="EnergyCaseReviewChain-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1013px; }
#quarto-document-content figure:has(img[src$="EnergyCaseReviewChain-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1013px; }
#quarto-document-content img[src$="EnergyNeutralLedger-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 773px; }
#quarto-document-content figure:has(img[src$="EnergyNeutralLedger-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 773px; }
#quarto-document-content img[src$="EpidemicRoutingExample5-modern-20260103090000.svg"]:where(:scope, *) { width: 100%; max-width: 889px; }
#quarto-document-content figure:has(img[src$="EpidemicRoutingExample5-modern-20260103090000.svg"]):where(:scope, *) { --iot-figure-fit-width: 889px; }
#quarto-document-content img[src$="ErrorDetectionComparisonOverview-modern-20260317.svg"]:where(:scope, *) { width: 100%; max-width: 914px; }
#quarto-document-content figure:has(img[src$="ErrorDetectionComparisonOverview-modern-20260317.svg"]):where(:scope, *) { --iot-figure-fit-width: 914px; }
#quarto-document-content img[src$="FANETTopology-modern-20260102235500.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="FANETTopology-modern-20260102235500.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="Field-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1029px; }
#quarto-document-content figure:has(img[src$="Field-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1029px; }
#quarto-document-content img[src$="FieldTrialEvidenceLoop-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="FieldTrialEvidenceLoop-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="FigEncapsulationProcess-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 886px; }
#quarto-document-content figure:has(img[src$="FigEncapsulationProcess-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 886px; }
#quarto-document-content img[src$="FiveVerbsTimeline-modern-20260326.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="FiveVerbsTimeline-modern-20260326.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="FramingTechniquesOverview-modern-20260317.svg"]:where(:scope, *) { width: 100%; max-width: 969px; }
#quarto-document-content figure:has(img[src$="FramingTechniquesOverview-modern-20260317.svg"]):where(:scope, *) { --iot-figure-fit-width: 969px; }
#quarto-document-content img[src$="GPIO_Header-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="GPIO_Header-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="GatewayLabEvidenceFlow-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="GatewayLabEvidenceFlow-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="GattHierarchy-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="GattHierarchy-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="HOT-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 979px; }
#quarto-document-content figure:has(img[src$="HOT-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 979px; }
#quarto-document-content img[src$="HRT-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1029px; }
#quarto-document-content figure:has(img[src$="HRT-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1029px; }
#quarto-document-content img[src$="HTTP2-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="HTTP2-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="HalowPowerTimeline-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="HalowPowerTimeline-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="HardwarePlatformRoleMap-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1009px; }
#quarto-document-content figure:has(img[src$="HardwarePlatformRoleMap-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1009px; }
#quarto-document-content img[src$="HardwarePlatformSelectionFunnel-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1071px; }
#quarto-document-content figure:has(img[src$="HardwarePlatformSelectionFunnel-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1071px; }
#quarto-document-content img[src$="HardwarePlatformSelectionRecord-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1101px; }
#quarto-document-content figure:has(img[src$="HardwarePlatformSelectionRecord-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1101px; }
#quarto-document-content img[src$="HardwarePlatformTransitionGates-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1093px; }
#quarto-document-content figure:has(img[src$="HardwarePlatformTransitionGates-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1093px; }
#quarto-document-content img[src$="HardwarePrototypeReviewRecord-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1009px; }
#quarto-document-content figure:has(img[src$="HardwarePrototypeReviewRecord-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1009px; }
#quarto-document-content img[src$="HeaderByteComparison-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 904px; }
#quarto-document-content figure:has(img[src$="HeaderByteComparison-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 904px; }
#quarto-document-content img[src$="HealthcareAlertFatiguePipeline-modern-20260325.svg"]:where(:scope, *) { width: 100%; max-width: 1081px; }
#quarto-document-content figure:has(img[src$="HealthcareAlertFatiguePipeline-modern-20260325.svg"]):where(:scope, *) { --iot-figure-fit-width: 1081px; }
#quarto-document-content img[src$="HealthcareDeviceClassification-modern-20260325.svg"]:where(:scope, *) { width: 100%; max-width: 1002px; }
#quarto-document-content figure:has(img[src$="HealthcareDeviceClassification-modern-20260325.svg"]):where(:scope, *) { --iot-figure-fit-width: 1002px; }
#quarto-document-content img[src$="HealthcareIot-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="HealthcareIot-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="Howmuchsolarpowercanwepickup-modern-20260103114200.svg"]:where(:scope, *) { width: 100%; max-width: 1100px; }
#quarto-document-content figure:has(img[src$="Howmuchsolarpowercanwepickup-modern-20260103114200.svg"]):where(:scope, *) { --iot-figure-fit-width: 1100px; }
#quarto-document-content img[src$="HttpStackComparison-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="HttpStackComparison-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="HumanCentricSensingEvidenceRecord-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 970px; }
#quarto-document-content figure:has(img[src$="HumanCentricSensingEvidenceRecord-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 970px; }
#quarto-document-content img[src$="HwCaseDecisionMatrix-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="HwCaseDecisionMatrix-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="I2CBus-modern-20260103033000.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="I2CBus-modern-20260103033000.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="IPv4PacketHeaderFields-modern-20260103123000.svg"]:where(:scope, *) { width: 100%; max-width: 917px; }
#quarto-document-content figure:has(img[src$="IPv4PacketHeaderFields-modern-20260103123000.svg"]):where(:scope, *) { --iot-figure-fit-width: 917px; }
#quarto-document-content img[src$="IPv6Header-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1108px; }
#quarto-document-content figure:has(img[src$="IPv6Header-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1108px; }
#quarto-document-content img[src$="IbeaconFormat-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 683px; }
#quarto-document-content figure:has(img[src$="IbeaconFormat-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 683px; }
#quarto-document-content img[src$="IdsSignalFlowPipeline-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="IdsSignalFlowPipeline-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="IndicatorLED-modern-20260103044500.svg"]:where(:scope, *) { width: 100%; max-width: 1054px; }
#quarto-document-content figure:has(img[src$="IndicatorLED-modern-20260103044500.svg"]):where(:scope, *) { --iot-figure-fit-width: 1054px; }
#quarto-document-content img[src$="InputOutput-modern-20260103114200.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="InputOutput-modern-20260103114200.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="InterestExample-modern-20260103090000.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="InterestExample-modern-20260103090000.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="InterfacePowerCompatibilityGate-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="InterfacePowerCompatibilityGate-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="IoT-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1029px; }
#quarto-document-content figure:has(img[src$="IoT-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1029px; }
#quarto-document-content img[src$="IoTProtocolStack-modern-20260102140500.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="IoTProtocolStack-modern-20260102140500.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="IoTProtocolStack-modern-20260102235500.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="IoTProtocolStack-modern-20260102235500.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="IotSecurityDomainsWheel-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1108px; }
#quarto-document-content figure:has(img[src$="IotSecurityDomainsWheel-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1108px; }
#quarto-document-content img[src$="IotTroubleshootingFlowchart-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="IotTroubleshootingFlowchart-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="Ipv6SmartCityHierarchy-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="Ipv6SmartCityHierarchy-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="JitterComparison-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="JitterComparison-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="L-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1045px; }
#quarto-document-content figure:has(img[src$="L-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1045px; }
#quarto-document-content img[src$="L5-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="L5-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="LED-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="LED-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="Legacy-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="Legacy-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="LevelShifter-modern-20260103024500.svg"]:where(:scope, *) { width: 100%; max-width: 1054px; }
#quarto-document-content figure:has(img[src$="LevelShifter-modern-20260103024500.svg"]):where(:scope, *) { --iot-figure-fit-width: 1054px; }
#quarto-document-content img[src$="LinearizationRangeCurve-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="LinearizationRangeCurve-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="LinkBudgetCalc-modern-20260103023000.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="LinkBudgetCalc-modern-20260103023000.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="LoRaModulationEQ1-modern-20260103123000.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="LoRaModulationEQ1-modern-20260103123000.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="LoRaWANClassComparison-modern-20260102124000.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="LoRaWANClassComparison-modern-20260102124000.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="LoRaWANProtocol-modern-20260103123000.svg"]:where(:scope, *) { width: 100%; max-width: 985px; }
#quarto-document-content figure:has(img[src$="LoRaWANProtocol-modern-20260103123000.svg"]):where(:scope, *) { --iot-figure-fit-width: 985px; }
#quarto-document-content img[src$="LorawanClassComparison-modern-20260108122932.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="LorawanClassComparison-modern-20260108122932.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="LorawanLinkBudgetMargin-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1113px; }
#quarto-document-content figure:has(img[src$="LorawanLinkBudgetMargin-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1113px; }
#quarto-document-content img[src$="LorawanReleaseProofChain-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1108px; }
#quarto-document-content figure:has(img[src$="LorawanReleaseProofChain-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1108px; }
#quarto-document-content img[src$="LorawanSimLabCheckMap-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1054px; }
#quarto-document-content figure:has(img[src$="LorawanSimLabCheckMap-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1054px; }
#quarto-document-content img[src$="LpwanIntroduction-modern-20260108122937.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="LpwanIntroduction-modern-20260108122937.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="M2MPlatform-modern-20260103044500.svg"]:where(:scope, *) { width: 100%; max-width: 1024px; }
#quarto-document-content figure:has(img[src$="M2MPlatform-modern-20260103044500.svg"]):where(:scope, *) { --iot-figure-fit-width: 1024px; }
#quarto-document-content img[src$="M2MResourceTree-modern-20260102235500.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="M2MResourceTree-modern-20260102235500.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="M2mCaseStudyRecord-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 659px; }
#quarto-document-content figure:has(img[src$="M2mCaseStudyRecord-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 659px; }
#quarto-document-content img[src$="M2mFundamentalsDecisionLoop-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 937px; }
#quarto-document-content figure:has(img[src$="M2mFundamentalsDecisionLoop-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 937px; }
#quarto-document-content img[src$="M2mFundamentalsSystemPath-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 937px; }
#quarto-document-content figure:has(img[src$="M2mFundamentalsSystemPath-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 937px; }
#quarto-document-content img[src$="M2mImplementationsMessagePipeline-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 937px; }
#quarto-document-content figure:has(img[src$="M2mImplementationsMessagePipeline-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 937px; }
#quarto-document-content img[src$="M2mIotEvolution-modern-20260108122927.svg"]:where(:scope, *) { width: 100%; max-width: 900px; }
#quarto-document-content figure:has(img[src$="M2mIotEvolution-modern-20260108122927.svg"]):where(:scope, *) { --iot-figure-fit-width: 900px; }
#quarto-document-content img[src$="MQTT-modern-20260103140000.svg"]:where(:scope, *) { width: 100%; max-width: 985px; }
#quarto-document-content figure:has(img[src$="MQTT-modern-20260103140000.svg"]):where(:scope, *) { --iot-figure-fit-width: 985px; }
#quarto-document-content img[src$="MQTTFramework-modern-20260103123000.svg"]:where(:scope, *) { width: 100%; max-width: 800px; }
#quarto-document-content figure:has(img[src$="MQTTFramework-modern-20260103123000.svg"]):where(:scope, *) { --iot-figure-fit-width: 800px; }
#quarto-document-content img[src$="MQTTQoSLevels-modern-20260102140000.svg"]:where(:scope, *) { width: 100%; max-width: 943px; }
#quarto-document-content figure:has(img[src$="MQTTQoSLevels-modern-20260102140000.svg"]):where(:scope, *) { --iot-figure-fit-width: 943px; }
#quarto-document-content img[src$="MWSN-modern-20260103090000.svg"]:where(:scope, *) { width: 100%; max-width: 1059px; }
#quarto-document-content figure:has(img[src$="MWSN-modern-20260103090000.svg"]):where(:scope, *) { --iot-figure-fit-width: 1059px; }
#quarto-document-content img[src$="MaintenanceWorkflow-modern-20260108122955.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="MaintenanceWorkflow-modern-20260108122955.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="Master-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 981px; }
#quarto-document-content figure:has(img[src$="Master-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 981px; }
#quarto-document-content img[src$="MaterialsInIotDevice-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="MaterialsInIotDevice-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="MatterDeviceTypes-modern-20260103000000.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="MatterDeviceTypes-modern-20260103000000.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="MatterFabric-modern-20260103000000.svg"]:where(:scope, *) { width: 100%; max-width: 589px; }
#quarto-document-content figure:has(img[src$="MatterFabric-modern-20260103000000.svg"]):where(:scope, *) { --iot-figure-fit-width: 589px; }
#quarto-document-content img[src$="Mcu-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 808px; }
#quarto-document-content figure:has(img[src$="Mcu-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 808px; }
#quarto-document-content img[src$="McuMpuOsBoundary-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 937px; }
#quarto-document-content figure:has(img[src$="McuMpuOsBoundary-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 937px; }
#quarto-document-content img[src$="McuProgrammingRoute-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 847px; }
#quarto-document-content figure:has(img[src$="McuProgrammingRoute-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 847px; }
#quarto-document-content img[src$="Mermaid5gDeviceCategories1-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="Mermaid5gDeviceCategories1-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="Mermaid5gNetworkSlicing1-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1100px; }
#quarto-document-content figure:has(img[src$="Mermaid5gNetworkSlicing1-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1100px; }
#quarto-document-content img[src$="Mermaid802154Stack-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1108px; }
#quarto-document-content figure:has(img[src$="Mermaid802154Stack-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1108px; }
#quarto-document-content img[src$="MermaidAccuracy0-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="MermaidAccuracy0-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="MermaidAccuracy1-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1024px; }
#quarto-document-content figure:has(img[src$="MermaidAccuracy1-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1024px; }
#quarto-document-content img[src$="MermaidAccuracy2-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1024px; }
#quarto-document-content figure:has(img[src$="MermaidAccuracy2-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1024px; }
#quarto-document-content img[src$="MermaidAccuracy3-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1024px; }
#quarto-document-content figure:has(img[src$="MermaidAccuracy3-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1024px; }
#quarto-document-content img[src$="MermaidAccuracy4-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="MermaidAccuracy4-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="MermaidAdhocApplications-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1059px; }
#quarto-document-content figure:has(img[src$="MermaidAdhocApplications-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1059px; }
#quarto-document-content img[src$="MermaidAdhocDtnAndSocial12D3128b-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1024px; }
#quarto-document-content figure:has(img[src$="MermaidAdhocDtnAndSocial12D3128b-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1024px; }
#quarto-document-content img[src$="MermaidAdhocProactiveDsdv1Fcbcb6-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="MermaidAdhocProactiveDsdv1Fcbcb6-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="MermaidAdhocReactiveDsr0E4e4d4-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="MermaidAdhocReactiveDsr0E4e4d4-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="MermaidAdhocReactiveDsr1A2ce11-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1024px; }
#quarto-document-content figure:has(img[src$="MermaidAdhocReactiveDsr1A2ce11-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1024px; }
#quarto-document-content img[src$="MermaidAdhocReactiveDsr3Bc0d1e-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1054px; }
#quarto-document-content figure:has(img[src$="MermaidAdhocReactiveDsr3Bc0d1e-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1054px; }
#quarto-document-content img[src$="MermaidAdhocReactiveDsr4C0f131-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1024px; }
#quarto-document-content figure:has(img[src$="MermaidAdhocReactiveDsr4C0f131-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1024px; }
#quarto-document-content img[src$="MermaidAmqp091Model-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="MermaidAmqp091Model-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="MermaidAmqpMessageFormat-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 768px; }
#quarto-document-content figure:has(img[src$="MermaidAmqpMessageFormat-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 768px; }
#quarto-document-content img[src$="MermaidAmqpVsMqttAndUse2E4476d-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="MermaidAmqpVsMqttAndUse2E4476d-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="MermaidAuthVsAuthz-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="MermaidAuthVsAuthz-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="MermaidBandwidthThroughputGoodputVariant-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="MermaidBandwidthThroughputGoodputVariant-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="MermaidBinaryAdcFlow-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 815px; }
#quarto-document-content figure:has(img[src$="MermaidBinaryAdcFlow-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 815px; }
#quarto-document-content img[src$="MermaidCoap05db55e-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1024px; }
#quarto-document-content figure:has(img[src$="MermaidCoap05db55e-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1024px; }
#quarto-document-content img[src$="MermaidCoap2Ae108d-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="MermaidCoap2Ae108d-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="MermaidCoap3A453c7-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="MermaidCoap3A453c7-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="MermaidCoapVsHttp-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="MermaidCoapVsHttp-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="MermaidConnectingTogether3D2fd38-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1081px; }
#quarto-document-content figure:has(img[src$="MermaidConnectingTogether3D2fd38-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1081px; }
#quarto-document-content img[src$="MermaidConnectingTogether4904489-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1003px; }
#quarto-document-content figure:has(img[src$="MermaidConnectingTogether4904489-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1003px; }
#quarto-document-content img[src$="MermaidConnectingTogether53c1d5e-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="MermaidConnectingTogether53c1d5e-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="MermaidConsumerAcks-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 981px; }
#quarto-document-content figure:has(img[src$="MermaidConsumerAcks-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 981px; }
#quarto-document-content img[src$="MermaidContextAwareEnergy300a4d2-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="MermaidContextAwareEnergy300a4d2-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="MermaidDeliveryModes-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="MermaidDeliveryModes-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="MermaidDesignModelForIot1009d431-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1035px; }
#quarto-document-content figure:has(img[src$="MermaidDesignModelForIot1009d431-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1035px; }
#quarto-document-content img[src$="MermaidDesignModelForIot1176f2d7-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="MermaidDesignModelForIot1176f2d7-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="MermaidDesignModelForIot1226977b-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1029px; }
#quarto-document-content figure:has(img[src$="MermaidDesignModelForIot1226977b-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1029px; }
#quarto-document-content img[src$="MermaidDesignModelForIot9F71cc3-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="MermaidDesignModelForIot9F71cc3-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="MermaidDutyCyclingAndTop087bac4-modern-20260108132049.svg"]:where(:scope, *) { width: 100%; max-width: 1054px; }
#quarto-document-content figure:has(img[src$="MermaidDutyCyclingAndTop087bac4-modern-20260108132049.svg"]):where(:scope, *) { --iot-figure-fit-width: 1054px; }
#quarto-document-content img[src$="MermaidEdgeComputePattern6851436-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 978px; }
#quarto-document-content figure:has(img[src$="MermaidEdgeComputePattern6851436-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 978px; }
#quarto-document-content img[src$="MermaidEdgeFogComputing10857caa-modern-20260108132049.svg"]:where(:scope, *) { width: 100%; max-width: 969px; }
#quarto-document-content figure:has(img[src$="MermaidEdgeFogComputing10857caa-modern-20260108132049.svg"]):where(:scope, *) { --iot-figure-fit-width: 969px; }
#quarto-document-content img[src$="MermaidEdgeProcessing0-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="MermaidEdgeProcessing0-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="MermaidElectronics3Af1568-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="MermaidElectronics3Af1568-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="MermaidElectronics474c7fa-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="MermaidElectronics474c7fa-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="MermaidElectronics6Fb356c-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 943px; }
#quarto-document-content figure:has(img[src$="MermaidElectronics6Fb356c-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 943px; }
#quarto-document-content img[src$="MermaidElectronics71d7615-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="MermaidElectronics71d7615-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="MermaidEncryptionOverview-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 987px; }
#quarto-document-content figure:has(img[src$="MermaidEncryptionOverview-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 987px; }
#quarto-document-content img[src$="MermaidEthernetStandards-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1108px; }
#quarto-document-content figure:has(img[src$="MermaidEthernetStandards-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1108px; }
#quarto-document-content img[src$="MermaidFeaturePipeline-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="MermaidFeaturePipeline-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="MermaidFeedbackDesign-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1024px; }
#quarto-document-content figure:has(img[src$="MermaidFeedbackDesign-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1024px; }
#quarto-document-content img[src$="MermaidHardwareAndSoftwar1Fa6512-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="MermaidHardwareAndSoftwar1Fa6512-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="MermaidHarvesting1-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 830px; }
#quarto-document-content figure:has(img[src$="MermaidHarvesting1-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 830px; }
#quarto-document-content img[src$="MermaidI2cBus-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1011px; }
#quarto-document-content figure:has(img[src$="MermaidI2cBus-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1011px; }
#quarto-document-content img[src$="MermaidI2cRead-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1108px; }
#quarto-document-content figure:has(img[src$="MermaidI2cRead-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1108px; }
#quarto-document-content img[src$="MermaidIiotIndustry40Ec4fca-modern-20260108131314.svg"]:where(:scope, *) { width: 100%; max-width: 1024px; }
#quarto-document-content figure:has(img[src$="MermaidIiotIndustry40Ec4fca-modern-20260108131314.svg"]):where(:scope, *) { --iot-figure-fit-width: 1024px; }
#quarto-document-content img[src$="MermaidIiotIndustry42B9844d-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 920px; }
#quarto-document-content figure:has(img[src$="MermaidIiotIndustry42B9844d-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 920px; }
#quarto-document-content img[src$="MermaidIiotIndustry43F92297-modern-20260108131314.svg"]:where(:scope, *) { width: 100%; max-width: 1024px; }
#quarto-document-content figure:has(img[src$="MermaidIiotIndustry43F92297-modern-20260108131314.svg"]):where(:scope, *) { --iot-figure-fit-width: 1024px; }
#quarto-document-content img[src$="MermaidIndoor0-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 914px; }
#quarto-document-content figure:has(img[src$="MermaidIndoor0-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 914px; }
#quarto-document-content img[src$="MermaidIndoor1-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="MermaidIndoor1-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="MermaidInteractiveDesign14Dca35a-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="MermaidInteractiveDesign14Dca35a-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="MermaidInteractiveDesign8F89043-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="MermaidInteractiveDesign8F89043-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="MermaidInteroperability15a2939-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 847px; }
#quarto-document-content figure:has(img[src$="MermaidInteroperability15a2939-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 847px; }
#quarto-document-content img[src$="MermaidIntroFeedbackLoop-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 893px; }
#quarto-document-content figure:has(img[src$="MermaidIntroFeedbackLoop-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 893px; }
#quarto-document-content img[src$="MermaidIotUseCases14402809-modern-20260108131314.svg"]:where(:scope, *) { width: 100%; max-width: 1011px; }
#quarto-document-content figure:has(img[src$="MermaidIotUseCases14402809-modern-20260108131314.svg"]):where(:scope, *) { --iot-figure-fit-width: 1011px; }
#quarto-document-content img[src$="MermaidIotUseCases197cda09-modern-20260108131314.svg"]:where(:scope, *) { width: 100%; max-width: 1011px; }
#quarto-document-content figure:has(img[src$="MermaidIotUseCases197cda09-modern-20260108131314.svg"]):where(:scope, *) { --iot-figure-fit-width: 1011px; }
#quarto-document-content img[src$="MermaidLanTopology-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1100px; }
#quarto-document-content figure:has(img[src$="MermaidLanTopology-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1100px; }
#quarto-document-content img[src$="MermaidLorawanRevPhy0-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="MermaidLorawanRevPhy0-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="MermaidLorawanSecurity-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 878px; }
#quarto-document-content figure:has(img[src$="MermaidLorawanSecurity-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 878px; }
#quarto-document-content img[src$="MermaidLowpower1-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="MermaidLowpower1-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="MermaidLpwanComparison-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="MermaidLpwanComparison-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="MermaidMathematicalFoundat08802d0-modern-20260108131314.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="MermaidMathematicalFoundat08802d0-modern-20260108131314.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="MermaidMatterStack-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 878px; }
#quarto-document-content figure:has(img[src$="MermaidMatterStack-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 878px; }
#quarto-document-content img[src$="MermaidMeasurement1-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="MermaidMeasurement1-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="MermaidMeasurement2-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 832px; }
#quarto-document-content figure:has(img[src$="MermaidMeasurement2-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 832px; }
#quarto-document-content img[src$="MermaidMicrocontrollerProg1F74c0b-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="MermaidMicrocontrollerProg1F74c0b-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="MermaidMicrocontrollerProg421e0a9-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="MermaidMicrocontrollerProg421e0a9-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="MermaidMicrocontrollerProg5515858-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1100px; }
#quarto-document-content figure:has(img[src$="MermaidMicrocontrollerProg5515858-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1100px; }
#quarto-document-content img[src$="MermaidMobileFundEmWaves2-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="MermaidMobileFundEmWaves2-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="MermaidMobilePhoneAsASe4D7cd44-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="MermaidMobilePhoneAsASe4D7cd44-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="MermaidNbiotComp0-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="MermaidNbiotComp0-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="MermaidNetPerfCircuit-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1029px; }
#quarto-document-content figure:has(img[src$="MermaidNetPerfCircuit-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1029px; }
#quarto-document-content img[src$="MermaidNetworkDesignAndS00250d0-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 909px; }
#quarto-document-content figure:has(img[src$="MermaidNetworkDesignAndS00250d0-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 909px; }
#quarto-document-content img[src$="MermaidNetworkMechanisms51d0259-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="MermaidNetworkMechanisms51d0259-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="MermaidNetworkingAddressin1200ac91-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1108px; }
#quarto-document-content figure:has(img[src$="MermaidNetworkingAddressin1200ac91-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1108px; }
#quarto-document-content img[src$="MermaidNetworkingAddressin13969742-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1108px; }
#quarto-document-content figure:has(img[src$="MermaidNetworkingAddressin13969742-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1108px; }
#quarto-document-content img[src$="MermaidNetworkingAddressin8724701-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1108px; }
#quarto-document-content figure:has(img[src$="MermaidNetworkingAddressin8724701-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1108px; }
#quarto-document-content img[src$="MermaidNetworkingAddressin956a774-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1029px; }
#quarto-document-content figure:has(img[src$="MermaidNetworkingAddressin956a774-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1029px; }
#quarto-document-content img[src$="MermaidNetworkingFundament13977aaa-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1051px; }
#quarto-document-content figure:has(img[src$="MermaidNetworkingFundament13977aaa-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1051px; }
#quarto-document-content img[src$="MermaidNetworkingFundament14Be82db-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 808px; }
#quarto-document-content figure:has(img[src$="MermaidNetworkingFundament14Be82db-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 808px; }
#quarto-document-content img[src$="MermaidNetworkingFundament158a5693-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1051px; }
#quarto-document-content figure:has(img[src$="MermaidNetworkingFundament158a5693-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1051px; }
#quarto-document-content img[src$="MermaidNetworkingFundament6Ac8361-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="MermaidNetworkingFundament6Ac8361-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="MermaidOptimisticUi-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 815px; }
#quarto-document-content figure:has(img[src$="MermaidOptimisticUi-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 815px; }
#quarto-document-content img[src$="MermaidPanTopology-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1108px; }
#quarto-document-content figure:has(img[src$="MermaidPanTopology-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1108px; }
#quarto-document-content img[src$="MermaidPidImpl1-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="MermaidPidImpl1-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="MermaidProtocolSelection-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="MermaidProtocolSelection-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="MermaidPrototypingHardware23d186c-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="MermaidPrototypingHardware23d186c-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="MermaidRbacFlow-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1091px; }
#quarto-document-content figure:has(img[src$="MermaidRbacFlow-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1091px; }
#quarto-document-content img[src$="MermaidRfidTagTypes-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="MermaidRfidTagTypes-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="MermaidRoutingTables0-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1100px; }
#quarto-document-content figure:has(img[src$="MermaidRoutingTables0-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1100px; }
#quarto-document-content img[src$="MermaidSdnOpenflow0-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="MermaidSdnOpenflow0-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="MermaidSdnOpenflow2-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="MermaidSdnOpenflow2-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="MermaidSdnProductionFramework0-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="MermaidSdnProductionFramework0-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="MermaidSdnProductionIndex-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="MermaidSdnProductionIndex-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="MermaidServerDiscovery-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="MermaidServerDiscovery-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="MermaidSignalDomains-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="MermaidSignalDomains-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="MermaidStateSync-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="MermaidStateSync-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="MermaidSubscribeInteractionLifecycle-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="MermaidSubscribeInteractionLifecycle-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="MermaidUavIntro0-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="MermaidUavIntro0-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="MermaidUnderstandingPeople2Ec7e69-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="MermaidUnderstandingPeople2Ec7e69-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="MermaidUnderstandingPeople53ce682-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 662px; }
#quarto-document-content figure:has(img[src$="MermaidUnderstandingPeople53ce682-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 662px; }
#quarto-document-content img[src$="MermaidUserExperienceDesi3B00d75-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="MermaidUserExperienceDesi3B00d75-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="MermaidUwbFundBandwidth-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="MermaidUwbFundBandwidth-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="MermaidUwbPosArch-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="MermaidUwbPosArch-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="MermaidWifiEvolution-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1108px; }
#quarto-document-content figure:has(img[src$="MermaidWifiEvolution-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1108px; }
#quarto-document-content img[src$="MermaidWiredProtocolTradeoffVariant-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="MermaidWiredProtocolTradeoffVariant-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="MobileGatewayOverviewSuitability-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 937px; }
#quarto-document-content figure:has(img[src$="MobileGatewayOverviewSuitability-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 937px; }
#quarto-document-content img[src$="MobileLabsCoverageEvidenceFlow-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 937px; }
#quarto-document-content figure:has(img[src$="MobileLabsCoverageEvidenceFlow-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 937px; }
#quarto-document-content img[src$="MobileLabsCoverageTroubleshootingMap-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="MobileLabsCoverageTroubleshootingMap-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="MobilePhoneApisAccessFlow-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 937px; }
#quarto-document-content figure:has(img[src$="MobilePhoneApisAccessFlow-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 937px; }
#quarto-document-content img[src$="MobileSinkEvidenceMap-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="MobileSinkEvidenceMap-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="ModbusRTUFrame-modern-20260103001000.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="ModbusRTUFrame-modern-20260103001000.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="MqttBuildingTopicHierarchy-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1091px; }
#quarto-document-content figure:has(img[src$="MqttBuildingTopicHierarchy-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1091px; }
#quarto-document-content img[src$="MqttFactoryExample-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="MqttFactoryExample-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="MqttPubsubFlow-modern-20260411.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="MqttPubsubFlow-modern-20260411.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="Multipath-modern-20260103114200.svg"]:where(:scope, *) { width: 100%; max-width: 1100px; }
#quarto-document-content figure:has(img[src$="Multipath-modern-20260103114200.svg"]):where(:scope, *) { --iot-figure-fit-width: 1100px; }
#quarto-document-content img[src$="NFCDataExchange-modern-20260103080000.svg"]:where(:scope, *) { width: 100%; max-width: 900px; }
#quarto-document-content figure:has(img[src$="NFCDataExchange-modern-20260103080000.svg"]):where(:scope, *) { --iot-figure-fit-width: 900px; }
#quarto-document-content img[src$="NatTranslationTable-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="NatTranslationTable-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="NetworkDesignEvidenceChain-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 889px; }
#quarto-document-content figure:has(img[src$="NetworkDesignEvidenceChain-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 889px; }
#quarto-document-content img[src$="Networking-modern-20260103090000.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="Networking-modern-20260103090000.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="NfcIotArchitectureChoice-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1108px; }
#quarto-document-content figure:has(img[src$="NfcIotArchitectureChoice-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1108px; }
#quarto-document-content img[src$="NfcRealWorldPatternMap-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1108px; }
#quarto-document-content figure:has(img[src$="NfcRealWorldPatternMap-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1108px; }
#quarto-document-content img[src$="NfcSecurityReleaseEvidence-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1108px; }
#quarto-document-content figure:has(img[src$="NfcSecurityReleaseEvidence-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1108px; }
#quarto-document-content img[src$="NfcSecurityThreatControlMap-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1108px; }
#quarto-document-content figure:has(img[src$="NfcSecurityThreatControlMap-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1108px; }
#quarto-document-content img[src$="NodeBehaviorClassificationMatrix-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1108px; }
#quarto-document-content figure:has(img[src$="NodeBehaviorClassificationMatrix-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1108px; }
#quarto-document-content img[src$="NodeBehaviorClassificationRecord-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1108px; }
#quarto-document-content figure:has(img[src$="NodeBehaviorClassificationRecord-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1108px; }
#quarto-document-content img[src$="NodeBehaviorDumbRecoveryRecord-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1058px; }
#quarto-document-content figure:has(img[src$="NodeBehaviorDumbRecoveryRecord-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1058px; }
#quarto-document-content img[src$="NodeBehaviorSelfishMaliciousEvidenceMap-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1006px; }
#quarto-document-content figure:has(img[src$="NodeBehaviorSelfishMaliciousEvidenceMap-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1006px; }
#quarto-document-content img[src$="NoiseSourcesMitigation-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 914px; }
#quarto-document-content figure:has(img[src$="NoiseSourcesMitigation-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 914px; }
#quarto-document-content img[src$="Number37InBinary-modern-20260103151700.svg"]:where(:scope, *) { width: 100%; max-width: 842px; }
#quarto-document-content figure:has(img[src$="Number37InBinary-modern-20260103151700.svg"]):where(:scope, *) { --iot-figure-fit-width: 842px; }
#quarto-document-content img[src$="Number37InBinary2-modern-20260103151700.svg"]:where(:scope, *) { width: 100%; max-width: 753px; }
#quarto-document-content figure:has(img[src$="Number37InBinary2-modern-20260103151700.svg"]):where(:scope, *) { --iot-figure-fit-width: 753px; }
#quarto-document-content img[src$="OobPairingOptions-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="OobPairingOptions-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="OptimizationBottleneckContributors-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 972px; }
#quarto-document-content figure:has(img[src$="OptimizationBottleneckContributors-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 972px; }
#quarto-document-content img[src$="OptimizationMeasurementLoop-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1009px; }
#quarto-document-content figure:has(img[src$="OptimizationMeasurementLoop-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1009px; }
#quarto-document-content img[src$="OtaArchitecture-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="OtaArchitecture-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="OverheadAnalysisEvidenceRecord-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1101px; }
#quarto-document-content figure:has(img[src$="OverheadAnalysisEvidenceRecord-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1101px; }
#quarto-document-content img[src$="OverheadReplicas-modern-20260103080000.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="OverheadReplicas-modern-20260103080000.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="PCBDesignFlow-modern-20260102235500.svg"]:where(:scope, *) { width: 100%; max-width: 774px; }
#quarto-document-content figure:has(img[src$="PCBDesignFlow-modern-20260102235500.svg"]):where(:scope, *) { --iot-figure-fit-width: 774px; }
#quarto-document-content img[src$="PROFINET_TIERS-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1100px; }
#quarto-document-content figure:has(img[src$="PROFINET_TIERS-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1100px; }
#quarto-document-content img[src$="PaaS-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="PaaS-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="PacketCrcFlow-modern-20260317.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="PacketCrcFlow-modern-20260317.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="PacketErrorDetectionSelection-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1101px; }
#quarto-document-content figure:has(img[src$="PacketErrorDetectionSelection-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1101px; }
#quarto-document-content img[src$="PacketHeaderFieldsOverview-modern-20260321.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="PacketHeaderFieldsOverview-modern-20260321.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="PaperArchitectureSynthesisRecord-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1079px; }
#quarto-document-content figure:has(img[src$="PaperArchitectureSynthesisRecord-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1079px; }
#quarto-document-content img[src$="ParkinsonMonitoringComparison-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="ParkinsonMonitoringComparison-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="ParticleFiltersForLocation-modern-20260103090000.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="ParticleFiltersForLocation-modern-20260103090000.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="PathLossModel-modern-20260103023000.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="PathLossModel-modern-20260103023000.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="Pathlossisfrequencydependent-modern-20260103100000.svg"]:where(:scope, *) { width: 100%; max-width: 1029px; }
#quarto-document-content figure:has(img[src$="Pathlossisfrequencydependent-modern-20260103100000.svg"]):where(:scope, *) { --iot-figure-fit-width: 1029px; }
#quarto-document-content img[src$="PbdAssessmentEvidenceRecord-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="PbdAssessmentEvidenceRecord-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="PduByteBreakdown-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="PduByteBreakdown-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="PerformanceSummaryHybrid-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="PerformanceSummaryHybrid-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="PerspectiveTensions-modern-20260322.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="PerspectiveTensions-modern-20260322.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="PerspectivesTaxonomy-modern-20260322.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="PerspectivesTaxonomy-modern-20260322.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="Pitfalls-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="Pitfalls-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="PitfallsResilienceFlow-modern-20260324.svg"]:where(:scope, *) { width: 100%; max-width: 901px; }
#quarto-document-content figure:has(img[src$="PitfallsResilienceFlow-modern-20260324.svg"]):where(:scope, *) { --iot-figure-fit-width: 901px; }
#quarto-document-content img[src$="PitfallsTcoBreakdown-modern-20260324.svg"]:where(:scope, *) { width: 100%; max-width: 785px; }
#quarto-document-content figure:has(img[src$="PitfallsTcoBreakdown-modern-20260324.svg"]):where(:scope, *) { --iot-figure-fit-width: 785px; }
#quarto-document-content img[src$="PowerClasses-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="PowerClasses-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="PowerFormulaSelector-modern-20260428.svg"]:where(:scope, *) { width: 100%; max-width: 896px; }
#quarto-document-content figure:has(img[src$="PowerFormulaSelector-modern-20260428.svg"]):where(:scope, *) { --iot-figure-fit-width: 896px; }
#quarto-document-content img[src$="PowerInterfaceReviewFlow-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1032px; }
#quarto-document-content figure:has(img[src$="PowerInterfaceReviewFlow-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1032px; }
#quarto-document-content img[src$="PowerInterfaceReviewRoute-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1034px; }
#quarto-document-content figure:has(img[src$="PowerInterfaceReviewRoute-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1034px; }
#quarto-document-content img[src$="PowerOf2-modern-20260103151700.svg"]:where(:scope, *) { width: 100%; max-width: 996px; }
#quarto-document-content figure:has(img[src$="PowerOf2-modern-20260103151700.svg"]):where(:scope, *) { --iot-figure-fit-width: 996px; }
#quarto-document-content img[src$="PowerSignalDebugPath-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="PowerSignalDebugPath-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="PowerSourceDecision-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 996px; }
#quarto-document-content figure:has(img[src$="PowerSourceDecision-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 996px; }
#quarto-document-content img[src$="PricingStrategies-modern-20260108122915.svg"]:where(:scope, *) { width: 100%; max-width: 996px; }
#quarto-document-content figure:has(img[src$="PricingStrategies-modern-20260108122915.svg"]):where(:scope, *) { --iot-figure-fit-width: 996px; }
#quarto-document-content img[src$="PrivacyPreservingArchitecture-modern-20260108122925.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="PrivacyPreservingArchitecture-modern-20260108122925.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="PrivacyRegulationMappingRoute-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="PrivacyRegulationMappingRoute-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="PrivacyReviewRecordCard-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="PrivacyReviewRecordCard-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="Producers-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="Producers-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="ProductionCaseDecisionRoute-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1029px; }
#quarto-document-content figure:has(img[src$="ProductionCaseDecisionRoute-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1029px; }
#quarto-document-content img[src$="ProductionCaseStudyRecord-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1034px; }
#quarto-document-content figure:has(img[src$="ProductionCaseStudyRecord-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1034px; }
#quarto-document-content img[src$="ProductionDecisionRecord-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 972px; }
#quarto-document-content figure:has(img[src$="ProductionDecisionRecord-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 972px; }
#quarto-document-content img[src$="ProtocolDataUnits-modern-20260103123000.svg"]:where(:scope, *) { width: 100%; max-width: 886px; }
#quarto-document-content figure:has(img[src$="ProtocolDataUnits-modern-20260103123000.svg"]):where(:scope, *) { --iot-figure-fit-width: 886px; }
#quarto-document-content img[src$="ProtocolTranslationPipeline-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1113px; }
#quarto-document-content figure:has(img[src$="ProtocolTranslationPipeline-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1113px; }
#quarto-document-content img[src$="PrototypeFidelityTimeline-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="PrototypeFidelityTimeline-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="PrototypingSwLanguagesRoute-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1078px; }
#quarto-document-content figure:has(img[src$="PrototypingSwLanguagesRoute-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1078px; }
#quarto-document-content img[src$="PrototypingSwLibrariesSelectionGates-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="PrototypingSwLibrariesSelectionGates-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="ProximitySensorArray-modern-20260102235500.svg"]:where(:scope, *) { width: 100%; max-width: 900px; }
#quarto-document-content figure:has(img[src$="ProximitySensorArray-modern-20260102235500.svg"]):where(:scope, *) { --iot-figure-fit-width: 900px; }
#quarto-document-content img[src$="PwmDutyCycleWaveforms-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="PwmDutyCycleWaveforms-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="Q1-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="Q1-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="QueueFailureRouting-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1024px; }
#quarto-document-content figure:has(img[src$="QueueFailureRouting-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1024px; }
#quarto-document-content img[src$="RFIDReaderTagCommunication-modern-20260102190000.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="RFIDReaderTagCommunication-modern-20260102190000.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="RFIDSystemArchitecture-modern-20260102132000.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="RFIDSystemArchitecture-modern-20260102132000.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="RPLDodagFormation-modern-20260102133000.svg"]:where(:scope, *) { width: 100%; max-width: 1031px; }
#quarto-document-content figure:has(img[src$="RPLDodagFormation-modern-20260102133000.svg"]):where(:scope, *) { --iot-figure-fit-width: 1031px; }
#quarto-document-content img[src$="RS232SignalVoltageLevels-modern-20260103123000.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="RS232SignalVoltageLevels-modern-20260103123000.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="RSSIDriving-modern-20260103090000.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="RSSIDriving-modern-20260103090000.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="Raw-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 978px; }
#quarto-document-content figure:has(img[src$="Raw-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 978px; }
#quarto-document-content img[src$="RayTomlinson-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="RayTomlinson-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="Reactive-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="Reactive-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="RefArchitecturePitfallsOfflineBuffer-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1090px; }
#quarto-document-content figure:has(img[src$="RefArchitecturePitfallsOfflineBuffer-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1090px; }
#quarto-document-content img[src$="RefArchitectureSelectionPatternFit-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 924px; }
#quarto-document-content figure:has(img[src$="RefArchitectureSelectionPatternFit-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 924px; }
#quarto-document-content img[src$="RefModelReviewRecord-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 996px; }
#quarto-document-content figure:has(img[src$="RefModelReviewRecord-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 996px; }
#quarto-document-content img[src$="RefModelTranslationMap-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 972px; }
#quarto-document-content figure:has(img[src$="RefModelTranslationMap-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 972px; }
#quarto-document-content img[src$="ReliabilityErrorDetectionRecord-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1058px; }
#quarto-document-content figure:has(img[src$="ReliabilityErrorDetectionRecord-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1058px; }
#quarto-document-content img[src$="ReliabilityErrorHandlingDecisionRecord-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="ReliabilityErrorHandlingDecisionRecord-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="RequirementsReferenceBridge-modern-20260322.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="RequirementsReferenceBridge-modern-20260322.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="RequirementsTechnologyDecisionTree-modern-20260325.svg"]:where(:scope, *) { width: 100%; max-width: 996px; }
#quarto-document-content figure:has(img[src$="RequirementsTechnologyDecisionTree-modern-20260325.svg"]):where(:scope, *) { --iot-figure-fit-width: 996px; }
#quarto-document-content img[src$="RequirementsThreeIngredients-modern-20260322.svg"]:where(:scope, *) { width: 100%; max-width: 835px; }
#quarto-document-content figure:has(img[src$="RequirementsThreeIngredients-modern-20260322.svg"]):where(:scope, *) { --iot-figure-fit-width: 835px; }
#quarto-document-content img[src$="RequirementsTradeOffs-modern-20260325.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="RequirementsTradeOffs-modern-20260325.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="ResistorIotApplications-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 969px; }
#quarto-document-content figure:has(img[src$="ResistorIotApplications-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 969px; }
#quarto-document-content img[src$="RestApiArchitecturePattern-modern-20260327.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="RestApiArchitecturePattern-modern-20260327.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="RetailEcosystemOverview-modern-20260325.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="RetailEcosystemOverview-modern-20260325.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="RetailTechnologyMatrix-modern-20260325.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="RetailTechnologyMatrix-modern-20260325.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="RevenueLtvComparison-modern-20260108122913.svg"]:where(:scope, *) { width: 100%; max-width: 1049px; }
#quarto-document-content figure:has(img[src$="RevenueLtvComparison-modern-20260108122913.svg"]):where(:scope, *) { --iot-figure-fit-width: 1049px; }
#quarto-document-content img[src$="RfidAppsLabsAndAssessmentReleaseLoop-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 971px; }
#quarto-document-content figure:has(img[src$="RfidAppsLabsAndAssessmentReleaseLoop-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 971px; }
#quarto-document-content img[src$="RfidCouplingTypes-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 904px; }
#quarto-document-content figure:has(img[src$="RfidCouplingTypes-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 904px; }
#quarto-document-content img[src$="RfidReadZonePatternEvidence-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 907px; }
#quarto-document-content figure:has(img[src$="RfidReadZonePatternEvidence-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 907px; }
#quarto-document-content img[src$="RfidSecurityThreatModel-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 932px; }
#quarto-document-content figure:has(img[src$="RfidSecurityThreatModel-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 932px; }
#quarto-document-content img[src$="RoboticsVsAgricultural-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="RoboticsVsAgricultural-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="RoutingMetricsComparison-modern-20260108122951.svg"]:where(:scope, *) { width: 100%; max-width: 1100px; }
#quarto-document-content figure:has(img[src$="RoutingMetricsComparison-modern-20260108122951.svg"]):where(:scope, *) { --iot-figure-fit-width: 1100px; }
#quarto-document-content img[src$="RplLabsAndQuiz13-modern-20260108131302.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="RplLabsAndQuiz13-modern-20260108131302.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="RplSummaryToolsDecisionRecord-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1015px; }
#quarto-document-content figure:has(img[src$="RplSummaryToolsDecisionRecord-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1015px; }
#quarto-document-content img[src$="RplSummaryToolsRecordStack-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1015px; }
#quarto-document-content figure:has(img[src$="RplSummaryToolsRecordStack-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1015px; }
#quarto-document-content img[src$="S2aaSLayerModel-modern-20260102132000.svg"]:where(:scope, *) { width: 100%; max-width: 1006px; }
#quarto-document-content figure:has(img[src$="S2aaSLayerModel-modern-20260102132000.svg"]):where(:scope, *) { --iot-figure-fit-width: 1006px; }
#quarto-document-content img[src$="S2aasDeploymentSyncPatterns-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="S2aasDeploymentSyncPatterns-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="S2aasPrivacyLifecycle-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 823px; }
#quarto-document-content figure:has(img[src$="S2aasPrivacyLifecycle-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 823px; }
#quarto-document-content img[src$="SCENE-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="SCENE-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="SDNControllerArchitecture-modern-20260102132500.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="SDNControllerArchitecture-modern-20260102132500.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="SKIN-modern-20260103100000.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="SKIN-modern-20260103100000.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="SKIN3-modern-20260103151700.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="SKIN3-modern-20260103151700.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="SPIInterface-modern-20260103033000.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="SPIInterface-modern-20260103033000.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="SPISignal-modern-20260103123000.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="SPISignal-modern-20260103123000.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="START-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 889px; }
#quarto-document-content figure:has(img[src$="START-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 889px; }
#quarto-document-content img[src$="STRIDE-pedagogical-modern-20260103140000.svg"]:where(:scope, *) { width: 100%; max-width: 985px; }
#quarto-document-content figure:has(img[src$="STRIDE-pedagogical-modern-20260103140000.svg"]):where(:scope, *) { --iot-figure-fit-width: 985px; }
#quarto-document-content img[src$="SUPPLIERS-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="SUPPLIERS-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="SamplingTheorem-modern-20260103114200.svg"]:where(:scope, *) { width: 100%; max-width: 914px; }
#quarto-document-content figure:has(img[src$="SamplingTheorem-modern-20260103114200.svg"]):where(:scope, *) { --iot-figure-fit-width: 914px; }
#quarto-document-content img[src$="SdnArchitectureEvidenceLoop-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="SdnArchitectureEvidenceLoop-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="SecurityDesignPrinciplesEvidenceLoop-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="SecurityDesignPrinciplesEvidenceLoop-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="SecurityFrameworkReviewFlow-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="SecurityFrameworkReviewFlow-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="Seminal-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 569px; }
#quarto-document-content figure:has(img[src$="Seminal-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 569px; }
#quarto-document-content img[src$="SensorClassification-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 996px; }
#quarto-document-content figure:has(img[src$="SensorClassification-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 996px; }
#quarto-document-content img[src$="SensorDataEncapsulationJourney-modern-20260317.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="SensorDataEncapsulationJourney-modern-20260317.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="SensorPipelinePacketBudget-modern-20260317.svg"]:where(:scope, *) { width: 100%; max-width: 904px; }
#quarto-document-content figure:has(img[src$="SensorPipelinePacketBudget-modern-20260317.svg"]):where(:scope, *) { --iot-figure-fit-width: 904px; }
#quarto-document-content img[src$="SensorPipelineStagesFocus-modern-20260317.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="SensorPipelineStagesFocus-modern-20260317.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="SensorSelectionEvidenceMap-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 970px; }
#quarto-document-content figure:has(img[src$="SensorSelectionEvidenceMap-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 970px; }
#quarto-document-content img[src$="SigfoxServiceRiskDiagnosticsTrail-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1051px; }
#quarto-document-content figure:has(img[src$="SigfoxServiceRiskDiagnosticsTrail-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1051px; }
#quarto-document-content img[src$="SignalAliasingSamplingScenarios-modern-20260317.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="SignalAliasingSamplingScenarios-modern-20260317.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="SignalConditioningChain-modern-20260102131500.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="SignalConditioningChain-modern-20260102131500.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="SignalConditioningCircuit-modern-20260108122912.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="SignalConditioningCircuit-modern-20260108122912.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="SignalProcessingAdcPipelineOverview-modern-20260317.svg"]:where(:scope, *) { width: 100%; max-width: 525px; }
#quarto-document-content figure:has(img[src$="SignalProcessingAdcPipelineOverview-modern-20260317.svg"]):where(:scope, *) { --iot-figure-fit-width: 525px; }
#quarto-document-content img[src$="SignalProcessingFilterSelectionGuide-modern-20260317.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="SignalProcessingFilterSelectionGuide-modern-20260317.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="SignalProcessingNyquistComparison-modern-20260317.svg"]:where(:scope, *) { width: 100%; max-width: 547px; }
#quarto-document-content figure:has(img[src$="SignalProcessingNyquistComparison-modern-20260317.svg"]):where(:scope, *) { --iot-figure-fit-width: 547px; }
#quarto-document-content img[src$="SimulatingPlatformEmulationDebugRecord-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1100px; }
#quarto-document-content figure:has(img[src$="SimulatingPlatformEmulationDebugRecord-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1100px; }
#quarto-document-content img[src$="SimulationValidationEvidenceLadder-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="SimulationValidationEvidenceLadder-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="SmartCitiesArchitecture-modern-20260325.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="SmartCitiesArchitecture-modern-20260325.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="SmartCity-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="SmartCity-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="SmartHomeArchitectureLayers-modern-20260325.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="SmartHomeArchitectureLayers-modern-20260325.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="SmartHomeBASIntegration-modern-20260325.svg"]:where(:scope, *) { width: 100%; max-width: 922px; }
#quarto-document-content figure:has(img[src$="SmartHomeBASIntegration-modern-20260325.svg"]):where(:scope, *) { --iot-figure-fit-width: 922px; }
#quarto-document-content img[src$="SmartHomeFogArchitecture-modern-20260108122923.svg"]:where(:scope, *) { width: 100%; max-width: 1045px; }
#quarto-document-content figure:has(img[src$="SmartHomeFogArchitecture-modern-20260108122923.svg"]):where(:scope, *) { --iot-figure-fit-width: 1045px; }
#quarto-document-content img[src$="SmartHomeMultiSensorFusion-modern-20260409.svg"]:where(:scope, *) { width: 100%; max-width: 891px; }
#quarto-document-content figure:has(img[src$="SmartHomeMultiSensorFusion-modern-20260409.svg"]):where(:scope, *) { --iot-figure-fit-width: 891px; }
#quarto-document-content img[src$="SmartHomeRoiHierarchy-modern-20260325.svg"]:where(:scope, *) { width: 100%; max-width: 980px; }
#quarto-document-content figure:has(img[src$="SmartHomeRoiHierarchy-modern-20260325.svg"]):where(:scope, *) { --iot-figure-fit-width: 980px; }
#quarto-document-content img[src$="SmartHomeSecurityPipeline-modern-20260325.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="SmartHomeSecurityPipeline-modern-20260325.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="SmartHomeVoiceLatency-modern-20260325.svg"]:where(:scope, *) { width: 100%; max-width: 1024px; }
#quarto-document-content figure:has(img[src$="SmartHomeVoiceLatency-modern-20260325.svg"]):where(:scope, *) { --iot-figure-fit-width: 1024px; }
#quarto-document-content img[src$="StarTopologyRouter-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 969px; }
#quarto-document-content figure:has(img[src$="StarTopologyRouter-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 969px; }
#quarto-document-content img[src$="Start-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1105px; }
#quarto-document-content figure:has(img[src$="Start-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1105px; }
#quarto-document-content img[src$="StateMachineComparison-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="StateMachineComparison-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="StateMachineFundamentalsRoute-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1111px; }
#quarto-document-content figure:has(img[src$="StateMachineFundamentalsRoute-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1111px; }
#quarto-document-content img[src$="StateMachinesIotPatternFamilies-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1051px; }
#quarto-document-content figure:has(img[src$="StateMachinesIotPatternFamilies-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1051px; }
#quarto-document-content img[src$="StateMachinesIotSectionMap-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="StateMachinesIotSectionMap-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="StepperMotor-modern-20260102190000.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="StepperMotor-modern-20260102190000.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="SuperframeCycle-modern-20260222.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="SuperframeCycle-modern-20260222.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="SwarmBehaviorEvidenceRecord-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 937px; }
#quarto-document-content figure:has(img[src$="SwarmBehaviorEvidenceRecord-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 937px; }
#quarto-document-content img[src$="SystemsEvolutionArchitecturePatterns-modern-20260322.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="SystemsEvolutionArchitecturePatterns-modern-20260322.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="SystemsEvolutionEconomics-modern-20260326.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="SystemsEvolutionEconomics-modern-20260326.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="TLSSession-modern-20260103021500.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="TLSSession-modern-20260103021500.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="TcpHandshakeComparison-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="TcpHandshakeComparison-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="TechnologySelectionFunnel-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 889px; }
#quarto-document-content figure:has(img[src$="TechnologySelectionFunnel-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 889px; }
#quarto-document-content img[src$="TestAutomationReviewRecord-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="TestAutomationReviewRecord-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="TestingValidationReleaseGate-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="TestingValidationReleaseGate-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="The7LevelsOfAnInternetOfThingsReferenceModel-modern-20260103114200.svg"]:where(:scope, *) { width: 100%; max-width: 847px; }
#quarto-document-content figure:has(img[src$="The7LevelsOfAnInternetOfThingsReferenceModel-modern-20260103114200.svg"]):where(:scope, *) { --iot-figure-fit-width: 847px; }
#quarto-document-content img[src$="ThreadOperationsRecoveryRecord-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="ThreadOperationsRecoveryRecord-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="ThreatModelingDiagram-modern-20260102235500.svg"]:where(:scope, *) { width: 100%; max-width: 893px; }
#quarto-document-content figure:has(img[src$="ThreatModelingDiagram-modern-20260102235500.svg"]):where(:scope, *) { --iot-figure-fit-width: 893px; }
#quarto-document-content img[src$="TimBernersLee-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="TimBernersLee-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="TopologiesSelectionRoute-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="TopologiesSelectionRoute-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="TopologyFailureDomainsRecord-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 985px; }
#quarto-document-content figure:has(img[src$="TopologyFailureDomainsRecord-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 985px; }
#quarto-document-content img[src$="TrafficAnalysisLayered-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="TrafficAnalysisLayered-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="TrafficTestReviewLoop-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="TrafficTestReviewLoop-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="TransmissionLinkChoiceEvidenceMap-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 880px; }
#quarto-document-content figure:has(img[src$="TransmissionLinkChoiceEvidenceMap-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 880px; }
#quarto-document-content img[src$="TransmissionStageTransactionPath-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1059px; }
#quarto-document-content figure:has(img[src$="TransmissionStageTransactionPath-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1059px; }
#quarto-document-content img[src$="TransportProtocols-modern-20260108131302.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="TransportProtocols-modern-20260108131302.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="TransportProtocolsSelectionRecord-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="TransportProtocolsSelectionRecord-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="TwinsArchEnterprise-modern-20260108122919.svg"]:where(:scope, *) { width: 100%; max-width: 900px; }
#quarto-document-content figure:has(img[src$="TwinsArchEnterprise-modern-20260108122919.svg"]):where(:scope, *) { --iot-figure-fit-width: 900px; }
#quarto-document-content img[src$="UAVNetworkTopology-modern-20260102131000.svg"]:where(:scope, *) { width: 100%; max-width: 610px; }
#quarto-document-content figure:has(img[src$="UAVNetworkTopology-modern-20260102131000.svg"]):where(:scope, *) { --iot-figure-fit-width: 610px; }
#quarto-document-content img[src$="UartFrame-modern-20260108123004.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="UartFrame-modern-20260108123004.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="UdpCommunication-modern-20260108122912.svg"]:where(:scope, *) { width: 100%; max-width: 1029px; }
#quarto-document-content figure:has(img[src$="UdpCommunication-modern-20260108122912.svg"]):where(:scope, *) { --iot-figure-fit-width: 1029px; }
#quarto-document-content img[src$="Users-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 842px; }
#quarto-document-content figure:has(img[src$="Users-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 842px; }
#quarto-document-content img[src$="V2xCollisionTimeline-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1024px; }
#quarto-document-content figure:has(img[src$="V2xCollisionTimeline-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1024px; }
#quarto-document-content img[src$="VehicleSafetyEvolution-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 996px; }
#quarto-document-content figure:has(img[src$="VehicleSafetyEvolution-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 996px; }
#quarto-document-content img[src$="VoiceReleaseRecord-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="VoiceReleaseRecord-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="VoltageDivider-modern-20260103024500.svg"]:where(:scope, *) { width: 100%; max-width: 1040px; }
#quarto-document-content figure:has(img[src$="VoltageDivider-modern-20260103024500.svg"]):where(:scope, *) { --iot-figure-fit-width: 1040px; }
#quarto-document-content img[src$="WcagPourPrinciples-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 996px; }
#quarto-document-content figure:has(img[src$="WcagPourPrinciples-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 996px; }
#quarto-document-content img[src$="WeightlessSummary-modern-20260103123000.svg"]:where(:scope, *) { width: 100%; max-width: 1080px; }
#quarto-document-content figure:has(img[src$="WeightlessSummary-modern-20260103123000.svg"]):where(:scope, *) { --iot-figure-fit-width: 1080px; }
#quarto-document-content img[src$="WiFiChannelAllocation-modern-20260102190000.svg"]:where(:scope, *) { width: 100%; max-width: 1086px; }
#quarto-document-content figure:has(img[src$="WiFiChannelAllocation-modern-20260102190000.svg"]):where(:scope, *) { --iot-figure-fit-width: 1086px; }
#quarto-document-content img[src$="Wifi6TwtMechanism-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1011px; }
#quarto-document-content figure:has(img[src$="Wifi6TwtMechanism-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1011px; }
#quarto-document-content img[src$="Wifi802154CoexistenceEvidenceRecord-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="Wifi802154CoexistenceEvidenceRecord-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="Wifi802154OperationEvidenceRecord-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1050px; }
#quarto-document-content figure:has(img[src$="Wifi802154OperationEvidenceRecord-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1050px; }
#quarto-document-content img[src$="WifiSecurityProvisioningFlow-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="WifiSecurityProvisioningFlow-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="WiredCommunicationStandards-modern-20260103114200.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="WiredCommunicationStandards-modern-20260103114200.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="WirelessHARTNetwork-modern-20260103001000.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="WirelessHARTNetwork-modern-20260103001000.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="WirelessParadigmShift-modern-20260322.svg"]:where(:scope, *) { width: 100%; max-width: 889px; }
#quarto-document-content figure:has(img[src$="WirelessParadigmShift-modern-20260322.svg"]):where(:scope, *) { --iot-figure-fit-width: 889px; }
#quarto-document-content img[src$="WirelessParadigmsEngineering-modern-20260326.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="WirelessParadigmsEngineering-modern-20260326.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="WirelesshartTdmaGraphRouting-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1045px; }
#quarto-document-content figure:has(img[src$="WirelesshartTdmaGraphRouting-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1045px; }
#quarto-document-content img[src$="WorkedExamplesBeijingZones-modern-20260324.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="WorkedExamplesBeijingZones-modern-20260324.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="WorkedExamplesFloodCatchment-modern-20260324.svg"]:where(:scope, *) { width: 100%; max-width: 1100px; }
#quarto-document-content figure:has(img[src$="WorkedExamplesFloodCatchment-modern-20260324.svg"]):where(:scope, *) { --iot-figure-fit-width: 1100px; }
#quarto-document-content img[src$="WorkedExamplesFramework-modern-20260324.svg"]:where(:scope, *) { width: 100%; max-width: 935px; }
#quarto-document-content figure:has(img[src$="WorkedExamplesFramework-modern-20260324.svg"]):where(:scope, *) { --iot-figure-fit-width: 935px; }
#quarto-document-content img[src$="WorkedExamplesPortfolio-modern-20260324.svg"]:where(:scope, *) { width: 100%; max-width: 1013px; }
#quarto-document-content figure:has(img[src$="WorkedExamplesPortfolio-modern-20260324.svg"]):where(:scope, *) { --iot-figure-fit-width: 1013px; }
#quarto-document-content img[src$="WsnCoverageProblemTypesEvidenceRecord-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="WsnCoverageProblemTypesEvidenceRecord-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="WsnEnergyManagementReviewRoute-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1035px; }
#quarto-document-content figure:has(img[src$="WsnEnergyManagementReviewRoute-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1035px; }
#quarto-document-content img[src$="WsnIotBoundaryEvidenceMap-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="WsnIotBoundaryEvidenceMap-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="WsnRouteIntroEvidenceRecord-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="WsnRouteIntroEvidenceRecord-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="WsnTrackingFundamentalsEvidenceLoop-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="WsnTrackingFundamentalsEvidenceLoop-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="ZWaveRoutingEvidencePacket-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 900px; }
#quarto-document-content figure:has(img[src$="ZWaveRoutingEvidencePacket-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 900px; }
#quarto-document-content img[src$="ZWaveSimulationScenario-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 993px; }
#quarto-document-content figure:has(img[src$="ZWaveSimulationScenario-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 993px; }
#quarto-document-content img[src$="ZeroTrustArchitecture-modern-20260102130000.svg"]:where(:scope, *) { width: 100%; max-width: 886px; }
#quarto-document-content figure:has(img[src$="ZeroTrustArchitecture-modern-20260102130000.svg"]):where(:scope, *) { --iot-figure-fit-width: 886px; }
#quarto-document-content img[src$="ZigBeePublicProfiles-modern-20260103114200.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="ZigBeePublicProfiles-modern-20260103114200.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="Zigbee6LowpanBorderRouterRecord-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 996px; }
#quarto-document-content figure:has(img[src$="Zigbee6LowpanBorderRouterRecord-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 996px; }
#quarto-document-content img[src$="ZigbeeAnalyzerFrameLayers-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 976px; }
#quarto-document-content figure:has(img[src$="ZigbeeAnalyzerFrameLayers-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 976px; }
#quarto-document-content img[src$="ZigbeeCommonMistakeEvidenceMap-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 900px; }
#quarto-document-content figure:has(img[src$="ZigbeeCommonMistakeEvidenceMap-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 900px; }
#quarto-document-content img[src$="ZigbeeCommonMistakeReviewRecord-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 929px; }
#quarto-document-content figure:has(img[src$="ZigbeeCommonMistakeReviewRecord-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 929px; }
#quarto-document-content img[src$="ZigbeeProtocolSelectionEvidenceMap-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 944px; }
#quarto-document-content figure:has(img[src$="ZigbeeProtocolSelectionEvidenceMap-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 944px; }
#quarto-document-content img[src$="ZigbeeProtocolSelectionRecord-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="ZigbeeProtocolSelectionRecord-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="ZigbeeStandardsReviewRecord-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 1075px; }
#quarto-document-content figure:has(img[src$="ZigbeeStandardsReviewRecord-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 1075px; }
#quarto-document-content img[src$="ZigbeeTemperatureEvidenceFlow-modern-20260718.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="ZigbeeTemperatureEvidenceFlow-modern-20260718.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="applications-pricing-metrics-dashboard.svg"]:where(:scope, *) { width: 100%; max-width: 873px; }
#quarto-document-content figure:has(img[src$="applications-pricing-metrics-dashboard.svg"]):where(:scope, *) { --iot-figure-fit-width: 873px; }
#quarto-document-content img[src$="applications-pricing-tier-framework.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="applications-pricing-tier-framework.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="architecture-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1024px; }
#quarto-document-content figure:has(img[src$="architecture-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1024px; }
#quarto-document-content img[src$="ble-encryption-architecture-edinburgh-modern-20260103123000.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="ble-encryption-architecture-edinburgh-modern-20260103123000.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="ble-numeric-comparison-edinburgh-modern-20260103140000.svg"]:where(:scope, *) { width: 100%; max-width: 686px; }
#quarto-document-content figure:has(img[src$="ble-numeric-comparison-edinburgh-modern-20260103140000.svg"]):where(:scope, *) { --iot-figure-fit-width: 686px; }
#quarto-document-content img[src$="cow-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="cow-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="cp-guide-SleepMonitor-modern-20260103090000.svg"]:where(:scope, *) { width: 100%; max-width: 1078px; }
#quarto-document-content figure:has(img[src$="cp-guide-SleepMonitor-modern-20260103090000.svg"]):where(:scope, *) { --iot-figure-fit-width: 1078px; }
#quarto-document-content img[src$="data-representation-number-systems-modern-20260307.svg"]:where(:scope, *) { width: 100%; max-width: 933px; }
#quarto-document-content figure:has(img[src$="data-representation-number-systems-modern-20260307.svg"]):where(:scope, *) { --iot-figure-fit-width: 933px; }
#quarto-document-content img[src$="data-representation-pipeline-modern-20260307.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="data-representation-pipeline-modern-20260307.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="edinburgh-Part100-000-modern-20260103090000.svg"]:where(:scope, *) { width: 100%; max-width: 819px; }
#quarto-document-content figure:has(img[src$="edinburgh-Part100-000-modern-20260103090000.svg"]):where(:scope, *) { --iot-figure-fit-width: 819px; }
#quarto-document-content img[src$="edinburgh-Part90-000-modern-20260103090000.svg"]:where(:scope, *) { width: 100%; max-width: 1011px; }
#quarto-document-content figure:has(img[src$="edinburgh-Part90-000-modern-20260103090000.svg"]):where(:scope, *) { --iot-figure-fit-width: 1011px; }
#quarto-document-content img[src$="edinburgh-ble-key-distribution-modern-20260103140000.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="edinburgh-ble-key-distribution-modern-20260103140000.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-6lowpan-four-stack-cases.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="fig-6lowpan-four-stack-cases.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="fig-6lowpan-fragment-mesh-fields.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="fig-6lowpan-fragment-mesh-fields.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="fig-6lowpan-iphc-reconstruction.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="fig-6lowpan-iphc-reconstruction.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="fig-802-15-4-features-coexistence-review.svg"]:where(:scope, *) { width: 100%; max-width: 932px; }
#quarto-document-content figure:has(img[src$="fig-802-15-4-features-coexistence-review.svg"]):where(:scope, *) { --iot-figure-fit-width: 932px; }
#quarto-document-content img[src$="fig-802-15-4-operation-state-flow.svg"]:where(:scope, *) { width: 100%; max-width: 1029px; }
#quarto-document-content figure:has(img[src$="fig-802-15-4-operation-state-flow.svg"]):where(:scope, *) { --iot-figure-fit-width: 1029px; }
#quarto-document-content img[src$="fig-802-15-4-phy-lineage-timing.svg"]:where(:scope, *) { width: 100%; max-width: 600px; }
#quarto-document-content figure:has(img[src$="fig-802-15-4-phy-lineage-timing.svg"]):where(:scope, *) { --iot-figure-fit-width: 600px; }
#quarto-document-content img[src$="fig-802-15-4-review-architecture-boundary.svg"]:where(:scope, *) { width: 100%; max-width: 1074px; }
#quarto-document-content figure:has(img[src$="fig-802-15-4-review-architecture-boundary.svg"]):where(:scope, *) { --iot-figure-fit-width: 1074px; }
#quarto-document-content img[src$="fig-802-15-4-review-architecture-topology-roles.svg"]:where(:scope, *) { width: 100%; max-width: 784px; }
#quarto-document-content figure:has(img[src$="fig-802-15-4-review-architecture-topology-roles.svg"]):where(:scope, *) { --iot-figure-fit-width: 784px; }
#quarto-document-content img[src$="fig-802-15-4-review-frame-efficiency-budget.svg"]:where(:scope, *) { width: 100%; max-width: 610px; }
#quarto-document-content figure:has(img[src$="fig-802-15-4-review-frame-efficiency-budget.svg"]):where(:scope, *) { --iot-figure-fit-width: 610px; }
#quarto-document-content img[src$="fig-802154-rev-stack-specs-boundary.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-802154-rev-stack-specs-boundary.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-accelerometer-oscillator-readout.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-accelerometer-oscillator-readout.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-accuracy-precision-comparison-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1100px; }
#quarto-document-content figure:has(img[src$="fig-accuracy-precision-comparison-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1100px; }
#quarto-document-content img[src$="fig-ace-rule-mining-gates.svg"]:where(:scope, *) { width: 100%; max-width: 640px; }
#quarto-document-content figure:has(img[src$="fig-ace-rule-mining-gates.svg"]):where(:scope, *) { --iot-figure-fit-width: 640px; }
#quarto-document-content img[src$="fig-actuators-classifications-hydraulic-cylinder.svg"]:where(:scope, *) { width: 100%; max-width: 1100px; }
#quarto-document-content figure:has(img[src$="fig-actuators-classifications-hydraulic-cylinder.svg"]):where(:scope, *) { --iot-figure-fit-width: 1100px; }
#quarto-document-content img[src$="fig-actuators-classifications-rack-pinion.svg"]:where(:scope, *) { width: 100%; max-width: 1103px; }
#quarto-document-content figure:has(img[src$="fig-actuators-classifications-rack-pinion.svg"]):where(:scope, *) { --iot-figure-fit-width: 1103px; }
#quarto-document-content img[src$="fig-always-on-vision-energy.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="fig-always-on-vision-energy.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="fig-amqp-dlx-retry-parking.svg"]:where(:scope, *) { width: 100%; max-width: 1024px; }
#quarto-document-content figure:has(img[src$="fig-amqp-dlx-retry-parking.svg"]):where(:scope, *) { --iot-figure-fit-width: 1024px; }
#quarto-document-content img[src$="fig-amqp-prefetch-starvation.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="fig-amqp-prefetch-starvation.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="fig-analog-digital-interface-anatomy.svg"]:where(:scope, *) { width: 100%; max-width: 909px; }
#quarto-document-content figure:has(img[src$="fig-analog-digital-interface-anatomy.svg"]):where(:scope, *) { --iot-figure-fit-width: 909px; }
#quarto-document-content img[src$="fig-app-protocols-realtime-browser-paths.svg"]:where(:scope, *) { width: 100%; max-width: 1024px; }
#quarto-document-content figure:has(img[src$="fig-app-protocols-realtime-browser-paths.svg"]):where(:scope, *) { --iot-figure-fit-width: 1024px; }
#quarto-document-content img[src$="fig-app-protocols-realtime-decision-surface.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="fig-app-protocols-realtime-decision-surface.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="fig-app-protocols-realtime-door-route.svg"]:where(:scope, *) { width: 100%; max-width: 1011px; }
#quarto-document-content figure:has(img[src$="fig-app-protocols-realtime-door-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 1011px; }
#quarto-document-content img[src$="fig-app-protocols-realtime-hybrid-workflow.svg"]:where(:scope, *) { width: 100%; max-width: 1054px; }
#quarto-document-content figure:has(img[src$="fig-app-protocols-realtime-hybrid-workflow.svg"]):where(:scope, *) { --iot-figure-fit-width: 1054px; }
#quarto-document-content img[src$="fig-app-protocols-realtime-roles.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-app-protocols-realtime-roles.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-applications-sensors-hardware-selection-flow.svg"]:where(:scope, *) { width: 100%; max-width: 914px; }
#quarto-document-content figure:has(img[src$="fig-applications-sensors-hardware-selection-flow.svg"]):where(:scope, *) { --iot-figure-fit-width: 914px; }
#quarto-document-content img[src$="fig-architecture-lab-evidence-board.svg"]:where(:scope, *) { width: 100%; max-width: 935px; }
#quarto-document-content figure:has(img[src$="fig-architecture-lab-evidence-board.svg"]):where(:scope, *) { --iot-figure-fit-width: 935px; }
#quarto-document-content img[src$="fig-asic-specialization-lanes.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-asic-specialization-lanes.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-automotive-datasheet-qualification-route.svg"]:where(:scope, *) { width: 100%; max-width: 1024px; }
#quarto-document-content figure:has(img[src$="fig-automotive-datasheet-qualification-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 1024px; }
#quarto-document-content img[src$="fig-bitwise-decode-pipeline.svg"]:where(:scope, *) { width: 100%; max-width: 420px; }
#quarto-document-content figure:has(img[src$="fig-bitwise-decode-pipeline.svg"]):where(:scope, *) { --iot-figure-fit-width: 420px; }
#quarto-document-content img[src$="fig-ble-le-coded-encoder.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-ble-le-coded-encoder.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-blockchain-fundamentals-cold-chain.svg"]:where(:scope, *) { width: 100%; max-width: 924px; }
#quarto-document-content figure:has(img[src$="fig-blockchain-fundamentals-cold-chain.svg"]):where(:scope, *) { --iot-figure-fit-width: 924px; }
#quarto-document-content img[src$="fig-blockchain-fundamentals-fit-filter.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="fig-blockchain-fundamentals-fit-filter.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="fig-blockchain-fundamentals-hybrid-boundary.svg"]:where(:scope, *) { width: 100%; max-width: 1049px; }
#quarto-document-content figure:has(img[src$="fig-blockchain-fundamentals-hybrid-boundary.svg"]):where(:scope, *) { --iot-figure-fit-width: 1049px; }
#quarto-document-content img[src$="fig-blockchain-fundamentals-pattern-map.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="fig-blockchain-fundamentals-pattern-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="fig-blockchain-fundamentals-review-record.svg"]:where(:scope, *) { width: 100%; max-width: 811px; }
#quarto-document-content figure:has(img[src$="fig-blockchain-fundamentals-review-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 811px; }
#quarto-document-content img[src$="fig-blockchain-fundamentals-transaction-path.svg"]:where(:scope, *) { width: 100%; max-width: 914px; }
#quarto-document-content figure:has(img[src$="fig-blockchain-fundamentals-transaction-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 914px; }
#quarto-document-content img[src$="fig-blockchain-iot-fit-gates.svg"]:where(:scope, *) { width: 100%; max-width: 914px; }
#quarto-document-content figure:has(img[src$="fig-blockchain-iot-fit-gates.svg"]):where(:scope, *) { --iot-figure-fit-width: 914px; }
#quarto-document-content img[src$="fig-blockchain-iot-review-evidence.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="fig-blockchain-iot-review-evidence.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="fig-blockchain-limitations-data-placement.svg"]:where(:scope, *) { width: 100%; max-width: 1100px; }
#quarto-document-content figure:has(img[src$="fig-blockchain-limitations-data-placement.svg"]):where(:scope, *) { --iot-figure-fit-width: 1100px; }
#quarto-document-content img[src$="fig-blockchain-limitations-readiness-record.svg"]:where(:scope, *) { width: 100%; max-width: 800px; }
#quarto-document-content figure:has(img[src$="fig-blockchain-limitations-readiness-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 800px; }
#quarto-document-content img[src$="fig-blockchain-smart-contracts-readiness-record.svg"]:where(:scope, *) { width: 100%; max-width: 878px; }
#quarto-document-content figure:has(img[src$="fig-blockchain-smart-contracts-readiness-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 878px; }
#quarto-document-content img[src$="fig-bluetooth-classic-access-code.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="fig-bluetooth-classic-access-code.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="fig-bluetooth-classic-header-pipeline.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="fig-bluetooth-classic-header-pipeline.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="fig-botnet-defense-stateflow.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="fig-botnet-defense-stateflow.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="fig-candela-lumen-lux-geometry.svg"]:where(:scope, *) { width: 100%; max-width: 600px; }
#quarto-document-content figure:has(img[src$="fig-candela-lumen-lux-geometry.svg"]):where(:scope, *) { --iot-figure-fit-width: 600px; }
#quarto-document-content img[src$="fig-cc2650-power-state-ladder.svg"]:where(:scope, *) { width: 100%; max-width: 686px; }
#quarto-document-content figure:has(img[src$="fig-cc2650-power-state-ladder.svg"]):where(:scope, *) { --iot-figure-fit-width: 686px; }
#quarto-document-content img[src$="fig-chopper-amplifier-path.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="fig-chopper-amplifier-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="fig-cicd-iot-monitoring-and-tools-evidence-loop.svg"]:where(:scope, *) { width: 100%; max-width: 1080px; }
#quarto-document-content figure:has(img[src$="fig-cicd-iot-monitoring-and-tools-evidence-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 1080px; }
#quarto-document-content img[src$="fig-cicd-iot-monitoring-and-tools-record.svg"]:where(:scope, *) { width: 100%; max-width: 1051px; }
#quarto-document-content figure:has(img[src$="fig-cicd-iot-monitoring-and-tools-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 1051px; }
#quarto-document-content img[src$="fig-cicd-iot-rollback-and-rollout-gate-path.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="fig-cicd-iot-rollback-and-rollout-gate-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="fig-ciot-service-and-prb-paths.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="fig-ciot-service-and-prb-paths.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="fig-cloud-centric-path.svg"]:where(:scope, *) { width: 100%; max-width: 600px; }
#quarto-document-content figure:has(img[src$="fig-cloud-centric-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 600px; }
#quarto-document-content img[src$="fig-cloud-computing-fundamentals-workload-boundary.svg"]:where(:scope, *) { width: 100%; max-width: 904px; }
#quarto-document-content figure:has(img[src$="fig-cloud-computing-fundamentals-workload-boundary.svg"]):where(:scope, *) { --iot-figure-fit-width: 904px; }
#quarto-document-content img[src$="fig-cloud-deployment-models-fit-map.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="fig-cloud-deployment-models-fit-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="fig-cloud-deployment-models-governance-matrix.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-cloud-deployment-models-governance-matrix.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-cloud-deployment-models-placement-route.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-cloud-deployment-models-placement-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-cloud-local-response-latency.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-cloud-local-response-latency.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-cloud-placement-control-loop.svg"]:where(:scope, *) { width: 100%; max-width: 565px; }
#quarto-document-content figure:has(img[src$="fig-cloud-placement-control-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 565px; }
#quarto-document-content img[src$="fig-cloud-platforms-broker-queue-stream.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="fig-cloud-platforms-broker-queue-stream.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="fig-cloud-platforms-review-record.svg"]:where(:scope, *) { width: 100%; max-width: 904px; }
#quarto-document-content figure:has(img[src$="fig-cloud-platforms-review-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 904px; }
#quarto-document-content img[src$="fig-cloud-production-observability-loop.svg"]:where(:scope, *) { width: 100%; max-width: 1031px; }
#quarto-document-content figure:has(img[src$="fig-cloud-production-observability-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 1031px; }
#quarto-document-content img[src$="fig-cloud-security-identity-lifecycle.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-cloud-security-identity-lifecycle.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-cloud-security-monitoring-loop.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="fig-cloud-security-monitoring-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="fig-cloud-service-models-compute-route.svg"]:where(:scope, *) { width: 100%; max-width: 836px; }
#quarto-document-content figure:has(img[src$="fig-cloud-service-models-compute-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 836px; }
#quarto-document-content img[src$="fig-cloud-service-models-review-record.svg"]:where(:scope, *) { width: 100%; max-width: 904px; }
#quarto-document-content figure:has(img[src$="fig-cloud-service-models-review-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 904px; }
#quarto-document-content img[src$="fig-coap-message-exchange-patterns.svg"]:where(:scope, *) { width: 100%; max-width: 640px; }
#quarto-document-content figure:has(img[src$="fig-coap-message-exchange-patterns.svg"]):where(:scope, *) { --iot-figure-fit-width: 640px; }
#quarto-document-content img[src$="fig-code-density-parallelism-branches.svg"]:where(:scope, *) { width: 100%; max-width: 565px; }
#quarto-document-content figure:has(img[src$="fig-code-density-parallelism-branches.svg"]):where(:scope, *) { --iot-figure-fit-width: 565px; }
#quarto-document-content img[src$="fig-comm-bridge-pubsub-routing-flow.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="fig-comm-bridge-pubsub-routing-flow.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="fig-communication-and-protocol-bridging-examples-topologies.svg"]:where(:scope, *) { width: 100%; max-width: 818px; }
#quarto-document-content figure:has(img[src$="fig-communication-and-protocol-bridging-examples-topologies.svg"]):where(:scope, *) { --iot-figure-fit-width: 818px; }
#quarto-document-content img[src$="fig-communication-and-protocol-bridging-gateway-lab-failure.svg"]:where(:scope, *) { width: 100%; max-width: 996px; }
#quarto-document-content figure:has(img[src$="fig-communication-and-protocol-bridging-gateway-lab-failure.svg"]):where(:scope, *) { --iot-figure-fit-width: 996px; }
#quarto-document-content img[src$="fig-communication-and-protocol-bridging-gateway-lab-record.svg"]:where(:scope, *) { width: 100%; max-width: 940px; }
#quarto-document-content figure:has(img[src$="fig-communication-and-protocol-bridging-gateway-lab-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 940px; }
#quarto-document-content img[src$="fig-communication-and-protocol-bridging-gateway-lab-workbench.svg"]:where(:scope, *) { width: 100%; max-width: 920px; }
#quarto-document-content figure:has(img[src$="fig-communication-and-protocol-bridging-gateway-lab-workbench.svg"]):where(:scope, *) { --iot-figure-fit-width: 920px; }
#quarto-document-content img[src$="fig-communication-models-iot-push-pull.svg"]:where(:scope, *) { width: 100%; max-width: 847px; }
#quarto-document-content figure:has(img[src$="fig-communication-models-iot-push-pull.svg"]):where(:scope, *) { --iot-figure-fit-width: 847px; }
#quarto-document-content img[src$="fig-compute-versus-transmit-energy.svg"]:where(:scope, *) { width: 100%; max-width: 1100px; }
#quarto-document-content figure:has(img[src$="fig-compute-versus-transmit-energy.svg"]):where(:scope, *) { --iot-figure-fit-width: 1100px; }
#quarto-document-content img[src$="fig-connected-device-elements-circularity.svg"]:where(:scope, *) { width: 100%; max-width: 720px; }
#quarto-document-content figure:has(img[src$="fig-connected-device-elements-circularity.svg"]):where(:scope, *) { --iot-figure-fit-width: 720px; }
#quarto-document-content img[src$="fig-connected-devices-form-factors-record.svg"]:where(:scope, *) { width: 100%; max-width: 996px; }
#quarto-document-content figure:has(img[src$="fig-connected-devices-form-factors-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 996px; }
#quarto-document-content img[src$="fig-connected-devices-fundamentals-review-map.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-connected-devices-fundamentals-review-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-connected-devices-lifecycle-record.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="fig-connected-devices-lifecycle-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="fig-consortiums-ecosystem-contract.svg"]:where(:scope, *) { width: 100%; max-width: 942px; }
#quarto-document-content figure:has(img[src$="fig-consortiums-ecosystem-contract.svg"]):where(:scope, *) { --iot-figure-fit-width: 942px; }
#quarto-document-content img[src$="fig-constrained-transport-stack.svg"]:where(:scope, *) { width: 100%; max-width: 818px; }
#quarto-document-content figure:has(img[src$="fig-constrained-transport-stack.svg"]):where(:scope, *) { --iot-figure-fit-width: 818px; }
#quarto-document-content img[src$="fig-context-energy-evidence-record.svg"]:where(:scope, *) { width: 100%; max-width: 597px; }
#quarto-document-content figure:has(img[src$="fig-context-energy-evidence-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 597px; }
#quarto-document-content img[src$="fig-cortexm-armv6m-memory-map.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="fig-cortexm-armv6m-memory-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="fig-cortexm-memory-register-map.svg"]:where(:scope, *) { width: 100%; max-width: 565px; }
#quarto-document-content figure:has(img[src$="fig-cortexm-memory-register-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 565px; }
#quarto-document-content img[src$="fig-cortexm-xpsr-control-fields.svg"]:where(:scope, *) { width: 100%; max-width: 565px; }
#quarto-document-content figure:has(img[src$="fig-cortexm-xpsr-control-fields.svg"]):where(:scope, *) { --iot-figure-fit-width: 565px; }
#quarto-document-content img[src$="fig-crypto-basics-hybrid-pattern.svg"]:where(:scope, *) { width: 100%; max-width: 932px; }
#quarto-document-content figure:has(img[src$="fig-crypto-basics-hybrid-pattern.svg"]):where(:scope, *) { --iot-figure-fit-width: 932px; }
#quarto-document-content img[src$="fig-crypto-basics-plaintext-boundary-options.svg"]:where(:scope, *) { width: 100%; max-width: 707px; }
#quarto-document-content figure:has(img[src$="fig-crypto-basics-plaintext-boundary-options.svg"]):where(:scope, *) { --iot-figure-fit-width: 707px; }
#quarto-document-content img[src$="fig-dag-dodag-root-constraint.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="fig-dag-dodag-root-constraint.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="fig-data-formats-overview-pipeline.svg"]:where(:scope, *) { width: 100%; max-width: 360px; }
#quarto-document-content figure:has(img[src$="fig-data-formats-overview-pipeline.svg"]):where(:scope, *) { --iot-figure-fit-width: 360px; }
#quarto-document-content img[src$="fig-data-formats-vineyard-8byte-contract.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-data-formats-vineyard-8byte-contract.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-data-fusion-architectures-hierarchical-flow.svg"]:where(:scope, *) { width: 100%; max-width: 619px; }
#quarto-document-content figure:has(img[src$="fig-data-fusion-architectures-hierarchical-flow.svg"]):where(:scope, *) { --iot-figure-fit-width: 619px; }
#quarto-document-content img[src$="fig-data-fusion-architectures-io-levels.svg"]:where(:scope, *) { width: 100%; max-width: 640px; }
#quarto-document-content figure:has(img[src$="fig-data-fusion-architectures-io-levels.svg"]):where(:scope, *) { --iot-figure-fit-width: 640px; }
#quarto-document-content img[src$="fig-data-fusion-best-practices-benefit-evidence.svg"]:where(:scope, *) { width: 100%; max-width: 640px; }
#quarto-document-content figure:has(img[src$="fig-data-fusion-best-practices-benefit-evidence.svg"]):where(:scope, *) { --iot-figure-fit-width: 640px; }
#quarto-document-content img[src$="fig-data-fusion-best-practices-orientation-fusion.svg"]:where(:scope, *) { width: 100%; max-width: 640px; }
#quarto-document-content figure:has(img[src$="fig-data-fusion-best-practices-orientation-fusion.svg"]):where(:scope, *) { --iot-figure-fit-width: 640px; }
#quarto-document-content img[src$="fig-data-fusion-complementary-imu-body-planes.svg"]:where(:scope, *) { width: 100%; max-width: 619px; }
#quarto-document-content figure:has(img[src$="fig-data-fusion-complementary-imu-body-planes.svg"]):where(:scope, *) { --iot-figure-fit-width: 619px; }
#quarto-document-content img[src$="fig-data-fusion-complementary-imu-filter-loop.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-data-fusion-complementary-imu-filter-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-data-fusion-complementary-imu-raw-stationary.svg"]:where(:scope, *) { width: 100%; max-width: 1103px; }
#quarto-document-content figure:has(img[src$="fig-data-fusion-complementary-imu-raw-stationary.svg"]):where(:scope, *) { --iot-figure-fit-width: 1103px; }
#quarto-document-content img[src$="fig-data-fusion-introduction-cooperative-imu-baro.svg"]:where(:scope, *) { width: 100%; max-width: 640px; }
#quarto-document-content figure:has(img[src$="fig-data-fusion-introduction-cooperative-imu-baro.svg"]):where(:scope, *) { --iot-figure-fit-width: 640px; }
#quarto-document-content img[src$="fig-data-fusion-introduction-redundant-vote.svg"]:where(:scope, *) { width: 100%; max-width: 640px; }
#quarto-document-content figure:has(img[src$="fig-data-fusion-introduction-redundant-vote.svg"]):where(:scope, *) { --iot-figure-fit-width: 640px; }
#quarto-document-content img[src$="fig-data-fusion-introduction-stage-ladder.svg"]:where(:scope, *) { width: 100%; max-width: 600px; }
#quarto-document-content figure:has(img[src$="fig-data-fusion-introduction-stage-ladder.svg"]):where(:scope, *) { --iot-figure-fit-width: 600px; }
#quarto-document-content img[src$="fig-data-monetization-variant-pipeline-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 985px; }
#quarto-document-content figure:has(img[src$="fig-data-monetization-variant-pipeline-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 985px; }
#quarto-document-content img[src$="fig-data-representation-review-loop.svg"]:where(:scope, *) { width: 100%; max-width: 758px; }
#quarto-document-content figure:has(img[src$="fig-data-representation-review-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 758px; }
#quarto-document-content img[src$="fig-data-shape-spectrum.svg"]:where(:scope, *) { width: 100%; max-width: 1024px; }
#quarto-document-content figure:has(img[src$="fig-data-shape-spectrum.svg"]):where(:scope, *) { --iot-figure-fit-width: 1024px; }
#quarto-document-content img[src$="fig-data-storage-cap-evidence-timeline.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="fig-data-storage-cap-evidence-timeline.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="fig-data-storage-databases-evidence-loop.svg"]:where(:scope, *) { width: 100%; max-width: 618px; }
#quarto-document-content figure:has(img[src$="fig-data-storage-databases-evidence-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 618px; }
#quarto-document-content img[src$="fig-data-storage-quality-check-layers.svg"]:where(:scope, *) { width: 100%; max-width: 932px; }
#quarto-document-content figure:has(img[src$="fig-data-storage-quality-check-layers.svg"]):where(:scope, *) { --iot-figure-fit-width: 932px; }
#quarto-document-content img[src$="fig-data-storage-quality-gate-map.svg"]:where(:scope, *) { width: 100%; max-width: 939px; }
#quarto-document-content figure:has(img[src$="fig-data-storage-quality-gate-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 939px; }
#quarto-document-content img[src$="fig-data-visualization-codecs-decision-map.svg"]:where(:scope, *) { width: 100%; max-width: 1011px; }
#quarto-document-content figure:has(img[src$="fig-data-visualization-codecs-decision-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 1011px; }
#quarto-document-content img[src$="fig-datasheet-anatomy-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="fig-datasheet-anatomy-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="fig-design-cicd-update-lifecycle-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="fig-design-cicd-update-lifecycle-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="fig-design-thinking-evidence-board.svg"]:where(:scope, *) { width: 100%; max-width: 1024px; }
#quarto-document-content figure:has(img[src$="fig-design-thinking-evidence-board.svg"]):where(:scope, *) { --iot-figure-fit-width: 1024px; }
#quarto-document-content img[src$="fig-design-thinking-iot-loop.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="fig-design-thinking-iot-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="fig-digital-data-scale-shift.svg"]:where(:scope, *) { width: 100%; max-width: 1024px; }
#quarto-document-content figure:has(img[src$="fig-digital-data-scale-shift.svg"]):where(:scope, *) { --iot-figure-fit-width: 1024px; }
#quarto-document-content img[src$="fig-direct-exchange-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1108px; }
#quarto-document-content figure:has(img[src$="fig-direct-exchange-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1108px; }
#quarto-document-content img[src$="fig-dns-resolver-delegation.svg"]:where(:scope, *) { width: 100%; max-width: 996px; }
#quarto-document-content figure:has(img[src$="fig-dns-resolver-delegation.svg"]):where(:scope, *) { --iot-figure-fit-width: 996px; }
#quarto-document-content img[src$="fig-dt-industry-patterns.svg"]:where(:scope, *) { width: 100%; max-width: 507px; }
#quarto-document-content figure:has(img[src$="fig-dt-industry-patterns.svg"]):where(:scope, *) { --iot-figure-fit-width: 507px; }
#quarto-document-content img[src$="fig-dt-model-elements.svg"]:where(:scope, *) { width: 100%; max-width: 884px; }
#quarto-document-content figure:has(img[src$="fig-dt-model-elements.svg"]):where(:scope, *) { --iot-figure-fit-width: 884px; }
#quarto-document-content img[src$="fig-dt-sync-cadence.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="fig-dt-sync-cadence.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="fig-dt-use-case-map.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="fig-dt-use-case-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="fig-dt-use-case-selection.svg"]:where(:scope, *) { width: 100%; max-width: 924px; }
#quarto-document-content figure:has(img[src$="fig-dt-use-case-selection.svg"]):where(:scope, *) { --iot-figure-fit-width: 924px; }
#quarto-document-content img[src$="fig-dt-worked-example-flow.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="fig-dt-worked-example-flow.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="fig-e2-e3-decision.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="fig-e2-e3-decision.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="fig-e2-gateway-trust-boundary.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="fig-e2-gateway-trust-boundary.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="fig-e2-packet-evidence.svg"]:where(:scope, *) { width: 100%; max-width: 1059px; }
#quarto-document-content figure:has(img[src$="fig-e2-packet-evidence.svg"]):where(:scope, *) { --iot-figure-fit-width: 1059px; }
#quarto-document-content img[src$="fig-e3-e4-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1024px; }
#quarto-document-content figure:has(img[src$="fig-e3-e4-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1024px; }
#quarto-document-content img[src$="fig-e5-renewal-state-machine.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-e5-renewal-state-machine.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-edge-ai-hardware-validation-loop.svg"]:where(:scope, *) { width: 100%; max-width: 597px; }
#quarto-document-content figure:has(img[src$="fig-edge-ai-hardware-validation-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 597px; }
#quarto-document-content img[src$="fig-edge-ai-placement-mandates.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="fig-edge-ai-placement-mandates.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="fig-edge-bigdata-decision-path.svg"]:where(:scope, *) { width: 100%; max-width: 565px; }
#quarto-document-content figure:has(img[src$="fig-edge-bigdata-decision-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 565px; }
#quarto-document-content img[src$="fig-edge-centric-gateway-path.svg"]:where(:scope, *) { width: 100%; max-width: 600px; }
#quarto-document-content figure:has(img[src$="fig-edge-centric-gateway-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 600px; }
#quarto-document-content img[src$="fig-edge-data-in-motion.svg"]:where(:scope, *) { width: 100%; max-width: 582px; }
#quarto-document-content figure:has(img[src$="fig-edge-data-in-motion.svg"]):where(:scope, *) { --iot-figure-fit-width: 582px; }
#quarto-document-content img[src$="fig-edge-fog-bandwidth-pipeline.svg"]:where(:scope, *) { width: 100%; max-width: 476px; }
#quarto-document-content figure:has(img[src$="fig-edge-fog-bandwidth-pipeline.svg"]):where(:scope, *) { --iot-figure-fit-width: 476px; }
#quarto-document-content img[src$="fig-edge-fog-cloud-advanced-map.svg"]:where(:scope, *) { width: 100%; max-width: 932px; }
#quarto-document-content figure:has(img[src$="fig-edge-fog-cloud-advanced-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 932px; }
#quarto-document-content img[src$="fig-edge-fog-cloud-state-authority.svg"]:where(:scope, *) { width: 100%; max-width: 476px; }
#quarto-document-content figure:has(img[src$="fig-edge-fog-cloud-state-authority.svg"]):where(:scope, *) { --iot-figure-fit-width: 476px; }
#quarto-document-content img[src$="fig-edge-fog-decision-framework-pattern-map.svg"]:where(:scope, *) { width: 100%; max-width: 657px; }
#quarto-document-content figure:has(img[src$="fig-edge-fog-decision-framework-pattern-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 657px; }
#quarto-document-content img[src$="fig-edge-fog-four-v-boundary.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="fig-edge-fog-four-v-boundary.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="fig-edge-fog-pitfalls-map.svg"]:where(:scope, *) { width: 100%; max-width: 606px; }
#quarto-document-content figure:has(img[src$="fig-edge-fog-pitfalls-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 606px; }
#quarto-document-content img[src$="fig-edge-fog-use-case-review-loop.svg"]:where(:scope, *) { width: 100%; max-width: 978px; }
#quarto-document-content figure:has(img[src$="fig-edge-fog-use-case-review-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 978px; }
#quarto-document-content img[src$="fig-edge-reduction-options.svg"]:where(:scope, *) { width: 100%; max-width: 565px; }
#quarto-document-content figure:has(img[src$="fig-edge-reduction-options.svg"]):where(:scope, *) { --iot-figure-fit-width: 565px; }
#quarto-document-content img[src$="fig-edge-store-forward-log.svg"]:where(:scope, *) { width: 100%; max-width: 565px; }
#quarto-document-content figure:has(img[src$="fig-edge-store-forward-log.svg"]):where(:scope, *) { --iot-figure-fit-width: 565px; }
#quarto-document-content img[src$="fig-empathy-map-evidence.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="fig-empathy-map-evidence.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="fig-enablers-communications-family-fit.svg"]:where(:scope, *) { width: 100%; max-width: 788px; }
#quarto-document-content figure:has(img[src$="fig-enablers-communications-family-fit.svg"]):where(:scope, *) { --iot-figure-fit-width: 788px; }
#quarto-document-content img[src$="fig-enablers-evolution-convergence-map.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="fig-enablers-evolution-convergence-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="fig-enablers-fundamentals-maturity-ladder.svg"]:where(:scope, *) { width: 100%; max-width: 900px; }
#quarto-document-content figure:has(img[src$="fig-enablers-fundamentals-maturity-ladder.svg"]):where(:scope, *) { --iot-figure-fit-width: 900px; }
#quarto-document-content img[src$="fig-enablers-selection-power-ledger.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="fig-enablers-selection-power-ledger.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="fig-encryption-e1-blast-radius.svg"]:where(:scope, *) { width: 100%; max-width: 683px; }
#quarto-document-content figure:has(img[src$="fig-encryption-e1-blast-radius.svg"]):where(:scope, *) { --iot-figure-fit-width: 683px; }
#quarto-document-content img[src$="fig-encryption-e1-frame-evidence.svg"]:where(:scope, *) { width: 100%; max-width: 602px; }
#quarto-document-content figure:has(img[src$="fig-encryption-e1-frame-evidence.svg"]):where(:scope, *) { --iot-figure-fit-width: 602px; }
#quarto-document-content img[src$="fig-encryption-e1-hop-boundary.svg"]:where(:scope, *) { width: 100%; max-width: 731px; }
#quarto-document-content figure:has(img[src$="fig-encryption-e1-hop-boundary.svg"]):where(:scope, *) { --iot-figure-fit-width: 731px; }
#quarto-document-content img[src$="fig-encryption-key-lifecycle.svg"]:where(:scope, *) { width: 100%; max-width: 1035px; }
#quarto-document-content figure:has(img[src$="fig-encryption-key-lifecycle.svg"]):where(:scope, *) { --iot-figure-fit-width: 1035px; }
#quarto-document-content img[src$="fig-encryption-security-properties-map.svg"]:where(:scope, *) { width: 100%; max-width: 555px; }
#quarto-document-content figure:has(img[src$="fig-encryption-security-properties-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 555px; }
#quarto-document-content img[src$="fig-energy-considerations-gates.svg"]:where(:scope, *) { width: 100%; max-width: 608px; }
#quarto-document-content figure:has(img[src$="fig-energy-considerations-gates.svg"]):where(:scope, *) { --iot-figure-fit-width: 608px; }
#quarto-document-content img[src$="fig-energy-considerations-ledger.svg"]:where(:scope, *) { width: 100%; max-width: 676px; }
#quarto-document-content figure:has(img[src$="fig-energy-considerations-ledger.svg"]):where(:scope, *) { --iot-figure-fit-width: 676px; }
#quarto-document-content img[src$="fig-energy-considerations-loop.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-energy-considerations-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-energy-harvesting-source-map.svg"]:where(:scope, *) { width: 100%; max-width: 811px; }
#quarto-document-content figure:has(img[src$="fig-energy-harvesting-source-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 811px; }
#quarto-document-content img[src$="fig-energy-intro-budget.svg"]:where(:scope, *) { width: 100%; max-width: 799px; }
#quarto-document-content figure:has(img[src$="fig-energy-intro-budget.svg"]):where(:scope, *) { --iot-figure-fit-width: 799px; }
#quarto-document-content img[src$="fig-energy-lowpower-power-gating.svg"]:where(:scope, *) { width: 100%; max-width: 730px; }
#quarto-document-content figure:has(img[src$="fig-energy-lowpower-power-gating.svg"]):where(:scope, *) { --iot-figure-fit-width: 730px; }
#quarto-document-content img[src$="fig-energy-measurement-chain.svg"]:where(:scope, *) { width: 100%; max-width: 939px; }
#quarto-document-content figure:has(img[src$="fig-energy-measurement-chain.svg"]):where(:scope, *) { --iot-figure-fit-width: 939px; }
#quarto-document-content img[src$="fig-energy-measurement-workflow.svg"]:where(:scope, *) { width: 100%; max-width: 800px; }
#quarto-document-content figure:has(img[src$="fig-energy-measurement-workflow.svg"]):where(:scope, *) { --iot-figure-fit-width: 800px; }
#quarto-document-content img[src$="fig-energy-sources-source-map.svg"]:where(:scope, *) { width: 100%; max-width: 808px; }
#quarto-document-content figure:has(img[src$="fig-energy-sources-source-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 808px; }
#quarto-document-content img[src$="fig-energy-sources-usable-budget.svg"]:where(:scope, *) { width: 100%; max-width: 880px; }
#quarto-document-content figure:has(img[src$="fig-energy-sources-usable-budget.svg"]):where(:scope, *) { --iot-figure-fit-width: 880px; }
#quarto-document-content img[src$="fig-energy-tools-workflow.svg"]:where(:scope, *) { width: 100%; max-width: 810px; }
#quarto-document-content figure:has(img[src$="fig-energy-tools-workflow.svg"]):where(:scope, *) { --iot-figure-fit-width: 810px; }
#quarto-document-content img[src$="fig-fdsoi-body-bias.svg"]:where(:scope, *) { width: 100%; max-width: 686px; }
#quarto-document-content figure:has(img[src$="fig-fdsoi-body-bias.svg"]):where(:scope, *) { --iot-figure-fit-width: 686px; }
#quarto-document-content img[src$="fig-feedback-mechanisms-loop-roles.svg"]:where(:scope, *) { width: 100%; max-width: 1015px; }
#quarto-document-content figure:has(img[src$="fig-feedback-mechanisms-loop-roles.svg"]):where(:scope, *) { --iot-figure-fit-width: 1015px; }
#quarto-document-content img[src$="fig-fixed-point-validation.svg"]:where(:scope, *) { width: 100%; max-width: 360px; }
#quarto-document-content figure:has(img[src$="fig-fixed-point-validation.svg"]):where(:scope, *) { --iot-figure-fit-width: 360px; }
#quarto-document-content img[src$="fig-fixed-point-workflow.svg"]:where(:scope, *) { width: 100%; max-width: 360px; }
#quarto-document-content figure:has(img[src$="fig-fixed-point-workflow.svg"]):where(:scope, *) { --iot-figure-fit-width: 360px; }
#quarto-document-content img[src$="fig-format-decision-tree-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 878px; }
#quarto-document-content figure:has(img[src$="fig-format-decision-tree-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 878px; }
#quarto-document-content img[src$="fig-han-middleware-bridge-lifecycle.svg"]:where(:scope, *) { width: 100%; max-width: 914px; }
#quarto-document-content figure:has(img[src$="fig-han-middleware-bridge-lifecycle.svg"]):where(:scope, *) { --iot-figure-fit-width: 914px; }
#quarto-document-content img[src$="fig-hardware-optimization-data-path.svg"]:where(:scope, *) { width: 100%; max-width: 407px; }
#quarto-document-content figure:has(img[src$="fig-hardware-optimization-data-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 407px; }
#quarto-document-content img[src$="fig-hardware-optimization-decision.svg"]:where(:scope, *) { width: 100%; max-width: 360px; }
#quarto-document-content figure:has(img[src$="fig-hardware-optimization-decision.svg"]):where(:scope, *) { --iot-figure-fit-width: 360px; }
#quarto-document-content img[src$="fig-harvesting-battery-capacity.svg"]:where(:scope, *) { width: 100%; max-width: 565px; }
#quarto-document-content figure:has(img[src$="fig-harvesting-battery-capacity.svg"]):where(:scope, *) { --iot-figure-fit-width: 565px; }
#quarto-document-content img[src$="fig-harvesting-converter-control-loop.svg"]:where(:scope, *) { width: 100%; max-width: 565px; }
#quarto-document-content figure:has(img[src$="fig-harvesting-converter-control-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 565px; }
#quarto-document-content img[src$="fig-hash-vs-hmac.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="fig-hash-vs-hmac.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="fig-ht-design-for-security-lifecycle.svg"]:where(:scope, *) { width: 100%; max-width: 619px; }
#quarto-document-content figure:has(img[src$="fig-ht-design-for-security-lifecycle.svg"]):where(:scope, *) { --iot-figure-fit-width: 619px; }
#quarto-document-content img[src$="fig-ht-sequential-trigger-timing.svg"]:where(:scope, *) { width: 100%; max-width: 640px; }
#quarto-document-content figure:has(img[src$="fig-ht-sequential-trigger-timing.svg"]):where(:scope, *) { --iot-figure-fit-width: 640px; }
#quarto-document-content img[src$="fig-ideate-prototype-test-loop.svg"]:where(:scope, *) { width: 100%; max-width: 869px; }
#quarto-document-content figure:has(img[src$="fig-ideate-prototype-test-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 869px; }
#quarto-document-content img[src$="fig-ieee-ietf-layer-contracts.svg"]:where(:scope, *) { width: 100%; max-width: 865px; }
#quarto-document-content figure:has(img[src$="fig-ieee-ietf-layer-contracts.svg"]):where(:scope, *) { --iot-figure-fit-width: 865px; }
#quarto-document-content img[src$="fig-imu-stream-byte-math.svg"]:where(:scope, *) { width: 100%; max-width: 1084px; }
#quarto-document-content figure:has(img[src$="fig-imu-stream-byte-math.svg"]):where(:scope, *) { --iot-figure-fit-width: 1084px; }
#quarto-document-content img[src$="fig-indirect-revenue-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="fig-indirect-revenue-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="fig-industrial-iot-isa95-purdue-layers.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="fig-industrial-iot-isa95-purdue-layers.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="fig-interactive-design-prototyping-record.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="fig-interactive-design-prototyping-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="fig-interactive-tool-review-loop.svg"]:where(:scope, *) { width: 100%; max-width: 900px; }
#quarto-document-content figure:has(img[src$="fig-interactive-tool-review-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 900px; }
#quarto-document-content img[src$="fig-interop-fundamentals-layer-checks.svg"]:where(:scope, *) { width: 100%; max-width: 970px; }
#quarto-document-content figure:has(img[src$="fig-interop-fundamentals-layer-checks.svg"]):where(:scope, *) { --iot-figure-fit-width: 970px; }
#quarto-document-content img[src$="fig-interoperability-four-layers.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-interoperability-four-layers.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-interoperability-review-record.svg"]:where(:scope, *) { width: 100%; max-width: 866px; }
#quarto-document-content figure:has(img[src$="fig-interoperability-review-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 866px; }
#quarto-document-content img[src$="fig-iot-data-converged-network.svg"]:where(:scope, *) { width: 100%; max-width: 1024px; }
#quarto-document-content figure:has(img[src$="fig-iot-data-converged-network.svg"]):where(:scope, *) { --iot-figure-fit-width: 1024px; }
#quarto-document-content img[src$="fig-iot-data-science-trust-layers.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-iot-data-science-trust-layers.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-iot-data-separate-networks.svg"]:where(:scope, *) { width: 100%; max-width: 1024px; }
#quarto-document-content figure:has(img[src$="fig-iot-data-separate-networks.svg"]):where(:scope, *) { --iot-figure-fit-width: 1024px; }
#quarto-document-content img[src$="fig-iot-ecosystem-lifecycle.svg"]:where(:scope, *) { width: 100%; max-width: 1035px; }
#quarto-document-content figure:has(img[src$="fig-iot-ecosystem-lifecycle.svg"]):where(:scope, *) { --iot-figure-fit-width: 1035px; }
#quarto-document-content img[src$="fig-iot-protocol-role-matrix.svg"]:where(:scope, *) { width: 100%; max-width: 640px; }
#quarto-document-content figure:has(img[src$="fig-iot-protocol-role-matrix.svg"]):where(:scope, *) { --iot-figure-fit-width: 640px; }
#quarto-document-content img[src$="fig-iot-reference-model-edge-flow.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-iot-reference-model-edge-flow.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-iot-reference-model-level5-boundary.svg"]:where(:scope, *) { width: 100%; max-width: 565px; }
#quarto-document-content figure:has(img[src$="fig-iot-reference-model-level5-boundary.svg"]):where(:scope, *) { --iot-figure-fit-width: 565px; }
#quarto-document-content img[src$="fig-iot-security-fundamentals-pyramid.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-iot-security-fundamentals-pyramid.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-iot-security-hardware-vulnerabilities-review-flow.svg"]:where(:scope, *) { width: 100%; max-width: 900px; }
#quarto-document-content figure:has(img[src$="fig-iot-security-hardware-vulnerabilities-review-flow.svg"]):where(:scope, *) { --iot-figure-fit-width: 900px; }
#quarto-document-content img[src$="fig-iot-security-hardware-vulnerabilities-trojan-countermeasures.svg"]:where(:scope, *) { width: 100%; max-width: 1006px; }
#quarto-document-content figure:has(img[src$="fig-iot-security-hardware-vulnerabilities-trojan-countermeasures.svg"]):where(:scope, *) { --iot-figure-fit-width: 1006px; }
#quarto-document-content img[src$="fig-iot-security-hardware-vulnerabilities-trojan-trigger-payload.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="fig-iot-security-hardware-vulnerabilities-trojan-trigger-payload.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="fig-iot-security-intrusion-detection-placement.svg"]:where(:scope, *) { width: 100%; max-width: 914px; }
#quarto-document-content figure:has(img[src$="fig-iot-security-intrusion-detection-placement.svg"]):where(:scope, *) { --iot-figure-fit-width: 914px; }
#quarto-document-content img[src$="fig-iot-security-network-segmentation-flow-record.svg"]:where(:scope, *) { width: 100%; max-width: 970px; }
#quarto-document-content figure:has(img[src$="fig-iot-security-network-segmentation-flow-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 970px; }
#quarto-document-content img[src$="fig-iot-security-network-segmentation-review.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-iot-security-network-segmentation-review.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-iot-security-trust-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-iot-security-trust-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-iot-standards-governance-map.svg"]:where(:scope, *) { width: 100%; max-width: 640px; }
#quarto-document-content figure:has(img[src$="fig-iot-standards-governance-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 640px; }
#quarto-document-content img[src$="fig-iot-std-interoperability-contract.svg"]:where(:scope, *) { width: 100%; max-width: 800px; }
#quarto-document-content figure:has(img[src$="fig-iot-std-interoperability-contract.svg"]):where(:scope, *) { --iot-figure-fit-width: 800px; }
#quarto-document-content img[src$="fig-ip-boundary-threat-map.svg"]:where(:scope, *) { width: 100%; max-width: 1059px; }
#quarto-document-content figure:has(img[src$="fig-ip-boundary-threat-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 1059px; }
#quarto-document-content img[src$="fig-isa100-secure-join-lifecycle.svg"]:where(:scope, *) { width: 100%; max-width: 996px; }
#quarto-document-content figure:has(img[src$="fig-isa100-secure-join-lifecycle.svg"]):where(:scope, *) { --iot-figure-fit-width: 996px; }
#quarto-document-content img[src$="fig-isa100-security-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-isa100-security-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-isa100-stack-layer-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 909px; }
#quarto-document-content figure:has(img[src$="fig-isa100-stack-layer-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 909px; }
#quarto-document-content img[src$="fig-itu-iot-layers-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1108px; }
#quarto-document-content figure:has(img[src$="fig-itu-iot-layers-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1108px; }
#quarto-document-content img[src$="fig-jtag-chain-interconnect-test.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-jtag-chain-interconnect-test.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-jtag-tap-state-machine.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-jtag-tap-state-machine.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-kalman-constant-velocity-model.svg"]:where(:scope, *) { width: 100%; max-width: 582px; }
#quarto-document-content figure:has(img[src$="fig-kalman-constant-velocity-model.svg"]):where(:scope, *) { --iot-figure-fit-width: 582px; }
#quarto-document-content img[src$="fig-kalman-predict-update-gaussians.svg"]:where(:scope, *) { width: 100%; max-width: 640px; }
#quarto-document-content figure:has(img[src$="fig-kalman-predict-update-gaussians.svg"]):where(:scope, *) { --iot-figure-fit-width: 640px; }
#quarto-document-content img[src$="fig-key-management-lifecycle-evidence.svg"]:where(:scope, *) { width: 100%; max-width: 1035px; }
#quarto-document-content figure:has(img[src$="fig-key-management-lifecycle-evidence.svg"]):where(:scope, *) { --iot-figure-fit-width: 1035px; }
#quarto-document-content img[src$="fig-key-spec-parameters-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-key-spec-parameters-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-keyword-cnn-training-loop.svg"]:where(:scope, *) { width: 100%; max-width: 640px; }
#quarto-document-content figure:has(img[src$="fig-keyword-cnn-training-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 640px; }
#quarto-document-content img[src$="fig-keyword-placement-crossover.svg"]:where(:scope, *) { width: 100%; max-width: 565px; }
#quarto-document-content figure:has(img[src$="fig-keyword-placement-crossover.svg"]):where(:scope, *) { --iot-figure-fit-width: 565px; }
#quarto-document-content img[src$="fig-keyword-recognizer-build-sequence.svg"]:where(:scope, *) { width: 100%; max-width: 600px; }
#quarto-document-content figure:has(img[src$="fig-keyword-recognizer-build-sequence.svg"]):where(:scope, *) { --iot-figure-fit-width: 600px; }
#quarto-document-content img[src$="fig-leach-round-role-rotation.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-leach-round-role-rotation.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-leach-setup-steady-state.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-leach-setup-steady-state.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-loadng-discovery-repair.svg"]:where(:scope, *) { width: 100%; max-width: 565px; }
#quarto-document-content figure:has(img[src$="fig-loadng-discovery-repair.svg"]):where(:scope, *) { --iot-figure-fit-width: 565px; }
#quarto-document-content img[src$="fig-lora-chirp-class-tradeoff.svg"]:where(:scope, *) { width: 100%; max-width: 565px; }
#quarto-document-content figure:has(img[src$="fig-lora-chirp-class-tradeoff.svg"]):where(:scope, *) { --iot-figure-fit-width: 565px; }
#quarto-document-content img[src$="fig-lora-chirp-rate.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="fig-lora-chirp-rate.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="fig-lora-sf-coded-rate-table.svg"]:where(:scope, *) { width: 100%; max-width: 582px; }
#quarto-document-content figure:has(img[src$="fig-lora-sf-coded-rate-table.svg"]):where(:scope, *) { --iot-figure-fit-width: 582px; }
#quarto-document-content img[src$="fig-lorawan-comprehensive-scenario.svg"]:where(:scope, *) { width: 100%; max-width: 553px; }
#quarto-document-content figure:has(img[src$="fig-lorawan-comprehensive-scenario.svg"]):where(:scope, *) { --iot-figure-fit-width: 553px; }
#quarto-document-content img[src$="fig-lorawan-device-classes-release.svg"]:where(:scope, *) { width: 100%; max-width: 591px; }
#quarto-document-content figure:has(img[src$="fig-lorawan-device-classes-release.svg"]):where(:scope, *) { --iot-figure-fit-width: 591px; }
#quarto-document-content img[src$="fig-lorawan-device-classes-selection.svg"]:where(:scope, *) { width: 100%; max-width: 495px; }
#quarto-document-content figure:has(img[src$="fig-lorawan-device-classes-selection.svg"]):where(:scope, *) { --iot-figure-fit-width: 495px; }
#quarto-document-content img[src$="fig-lorawan-end-to-end-stack.svg"]:where(:scope, *) { width: 100%; max-width: 889px; }
#quarto-document-content figure:has(img[src$="fig-lorawan-end-to-end-stack.svg"]):where(:scope, *) { --iot-figure-fit-width: 889px; }
#quarto-document-content img[src$="fig-lorawan-modulation-css.svg"]:where(:scope, *) { width: 100%; max-width: 715px; }
#quarto-document-content figure:has(img[src$="fig-lorawan-modulation-css.svg"]):where(:scope, *) { --iot-figure-fit-width: 715px; }
#quarto-document-content img[src$="fig-lorawan-modulation-release.svg"]:where(:scope, *) { width: 100%; max-width: 726px; }
#quarto-document-content figure:has(img[src$="fig-lorawan-modulation-release.svg"]):where(:scope, *) { --iot-figure-fit-width: 726px; }
#quarto-document-content img[src$="fig-lorawan-network-architecture-release.svg"]:where(:scope, *) { width: 100%; max-width: 747px; }
#quarto-document-content figure:has(img[src$="fig-lorawan-network-architecture-release.svg"]):where(:scope, *) { --iot-figure-fit-width: 747px; }
#quarto-document-content img[src$="fig-lorawan-pitfalls-classes.svg"]:where(:scope, *) { width: 100%; max-width: 614px; }
#quarto-document-content figure:has(img[src$="fig-lorawan-pitfalls-classes.svg"]):where(:scope, *) { --iot-figure-fit-width: 614px; }
#quarto-document-content img[src$="fig-lorawan-pitfalls-release.svg"]:where(:scope, *) { width: 100%; max-width: 602px; }
#quarto-document-content figure:has(img[src$="fig-lorawan-pitfalls-release.svg"]):where(:scope, *) { --iot-figure-fit-width: 602px; }
#quarto-document-content img[src$="fig-lorawan-rev-deploy-field-validation.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-lorawan-rev-deploy-field-validation.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-lorawan-rev-deploy-gateway-plan.svg"]:where(:scope, *) { width: 100%; max-width: 715px; }
#quarto-document-content figure:has(img[src$="fig-lorawan-rev-deploy-gateway-plan.svg"]):where(:scope, *) { --iot-figure-fit-width: 715px; }
#quarto-document-content img[src$="fig-lorawan-rev-deploy-map.svg"]:where(:scope, *) { width: 100%; max-width: 695px; }
#quarto-document-content figure:has(img[src$="fig-lorawan-rev-deploy-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 695px; }
#quarto-document-content img[src$="fig-lorawan-security-abp.svg"]:where(:scope, *) { width: 100%; max-width: 589px; }
#quarto-document-content figure:has(img[src$="fig-lorawan-security-abp.svg"]):where(:scope, *) { --iot-figure-fit-width: 589px; }
#quarto-document-content img[src$="fig-lorawan-security-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 545px; }
#quarto-document-content figure:has(img[src$="fig-lorawan-security-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 545px; }
#quarto-document-content img[src$="fig-lorawan-security-otaa.svg"]:where(:scope, *) { width: 100%; max-width: 526px; }
#quarto-document-content figure:has(img[src$="fig-lorawan-security-otaa.svg"]):where(:scope, *) { --iot-figure-fit-width: 526px; }
#quarto-document-content img[src$="fig-lorawan-vs-lpwan-evidence.svg"]:where(:scope, *) { width: 100%; max-width: 1011px; }
#quarto-document-content figure:has(img[src$="fig-lorawan-vs-lpwan-evidence.svg"]):where(:scope, *) { --iot-figure-fit-width: 1011px; }
#quarto-document-content img[src$="fig-lpwan-fund-link-budget-field-validation.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-lpwan-fund-link-budget-field-validation.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-lpwan-fund-link-budget-margin-gate.svg"]:where(:scope, *) { width: 100%; max-width: 800px; }
#quarto-document-content figure:has(img[src$="fig-lpwan-fund-link-budget-margin-gate.svg"]):where(:scope, *) { --iot-figure-fit-width: 800px; }
#quarto-document-content img[src$="fig-lpwan-fundamentals-architecture.svg"]:where(:scope, *) { width: 100%; max-width: 869px; }
#quarto-document-content figure:has(img[src$="fig-lpwan-fundamentals-architecture.svg"]):where(:scope, *) { --iot-figure-fit-width: 869px; }
#quarto-document-content img[src$="fig-lpwan-fundamentals-characteristics.svg"]:where(:scope, *) { width: 100%; max-width: 935px; }
#quarto-document-content figure:has(img[src$="fig-lpwan-fundamentals-characteristics.svg"]):where(:scope, *) { --iot-figure-fit-width: 935px; }
#quarto-document-content img[src$="fig-lpwan-fundamentals-fit.svg"]:where(:scope, *) { width: 100%; max-width: 869px; }
#quarto-document-content figure:has(img[src$="fig-lpwan-fundamentals-fit.svg"]):where(:scope, *) { --iot-figure-fit-width: 869px; }
#quarto-document-content img[src$="fig-lpwan-fundamentals-nonfit.svg"]:where(:scope, *) { width: 100%; max-width: 869px; }
#quarto-document-content figure:has(img[src$="fig-lpwan-fundamentals-nonfit.svg"]):where(:scope, *) { --iot-figure-fit-width: 869px; }
#quarto-document-content img[src$="fig-lpwan-fundamentals-record.svg"]:where(:scope, *) { width: 100%; max-width: 869px; }
#quarto-document-content figure:has(img[src$="fig-lpwan-fundamentals-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 869px; }
#quarto-document-content img[src$="fig-lpwan-intro-cost-analysis-map.svg"]:where(:scope, *) { width: 100%; max-width: 711px; }
#quarto-document-content figure:has(img[src$="fig-lpwan-intro-cost-analysis-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 711px; }
#quarto-document-content img[src$="fig-lpwan-range-rate-selection.svg"]:where(:scope, *) { width: 100%; max-width: 565px; }
#quarto-document-content figure:has(img[src$="fig-lpwan-range-rate-selection.svg"]):where(:scope, *) { --iot-figure-fit-width: 565px; }
#quarto-document-content img[src$="fig-m2m-architectures-gateway-scheduling.svg"]:where(:scope, *) { width: 100%; max-width: 527px; }
#quarto-document-content figure:has(img[src$="fig-m2m-architectures-gateway-scheduling.svg"]):where(:scope, *) { --iot-figure-fit-width: 527px; }
#quarto-document-content img[src$="fig-m2m-case-studies-degraded-mode.svg"]:where(:scope, *) { width: 100%; max-width: 565px; }
#quarto-document-content figure:has(img[src$="fig-m2m-case-studies-degraded-mode.svg"]):where(:scope, *) { --iot-figure-fit-width: 565px; }
#quarto-document-content img[src$="fig-m2m-comm-evolution-comparison.svg"]:where(:scope, *) { width: 100%; max-width: 640px; }
#quarto-document-content figure:has(img[src$="fig-m2m-comm-evolution-comparison.svg"]):where(:scope, *) { --iot-figure-fit-width: 640px; }
#quarto-document-content img[src$="fig-m2m-comm-evolution-gateway.svg"]:where(:scope, *) { width: 100%; max-width: 795px; }
#quarto-document-content figure:has(img[src$="fig-m2m-comm-evolution-gateway.svg"]):where(:scope, *) { --iot-figure-fit-width: 795px; }
#quarto-document-content img[src$="fig-m2m-design-patterns-map.svg"]:where(:scope, *) { width: 100%; max-width: 661px; }
#quarto-document-content figure:has(img[src$="fig-m2m-design-patterns-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 661px; }
#quarto-document-content img[src$="fig-m2m-design-patterns-recovery-loop.svg"]:where(:scope, *) { width: 100%; max-width: 491px; }
#quarto-document-content figure:has(img[src$="fig-m2m-design-patterns-recovery-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 491px; }
#quarto-document-content img[src$="fig-m2m-design-patterns-selection-flow.svg"]:where(:scope, *) { width: 100%; max-width: 700px; }
#quarto-document-content figure:has(img[src$="fig-m2m-design-patterns-selection-flow.svg"]):where(:scope, *) { --iot-figure-fit-width: 700px; }
#quarto-document-content img[src$="fig-m2m-fundamentals-tier-map.svg"]:where(:scope, *) { width: 100%; max-width: 747px; }
#quarto-document-content figure:has(img[src$="fig-m2m-fundamentals-tier-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 747px; }
#quarto-document-content img[src$="fig-m2m-implementations-rollout-loop.svg"]:where(:scope, *) { width: 100%; max-width: 515px; }
#quarto-document-content figure:has(img[src$="fig-m2m-implementations-rollout-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 515px; }
#quarto-document-content img[src$="fig-m2m-implementations-stack.svg"]:where(:scope, *) { width: 100%; max-width: 889px; }
#quarto-document-content figure:has(img[src$="fig-m2m-implementations-stack.svg"]):where(:scope, *) { --iot-figure-fit-width: 889px; }
#quarto-document-content img[src$="fig-m2m-platform-handoffs.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="fig-m2m-platform-handoffs.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="fig-mac-address-scopes.svg"]:where(:scope, *) { width: 100%; max-width: 651px; }
#quarto-document-content figure:has(img[src$="fig-mac-address-scopes.svg"]):where(:scope, *) { --iot-figure-fit-width: 651px; }
#quarto-document-content img[src$="fig-massive-critical-iot-acquisition.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-massive-critical-iot-acquisition.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-mcu-memory-budget.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-mcu-memory-budget.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-mcu-mpu-evidence-checklist.svg"]:where(:scope, *) { width: 100%; max-width: 463px; }
#quarto-document-content figure:has(img[src$="fig-mcu-mpu-evidence-checklist.svg"]):where(:scope, *) { --iot-figure-fit-width: 463px; }
#quarto-document-content img[src$="fig-mcu-mpu-hybrid-boundary.svg"]:where(:scope, *) { width: 100%; max-width: 463px; }
#quarto-document-content figure:has(img[src$="fig-mcu-mpu-hybrid-boundary.svg"]):where(:scope, *) { --iot-figure-fit-width: 463px; }
#quarto-document-content img[src$="fig-mcu-mpu-selection-record.svg"]:where(:scope, *) { width: 100%; max-width: 480px; }
#quarto-document-content figure:has(img[src$="fig-mcu-mpu-selection-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 480px; }
#quarto-document-content img[src$="fig-mcu-mpu-selection-route.svg"]:where(:scope, *) { width: 100%; max-width: 463px; }
#quarto-document-content figure:has(img[src$="fig-mcu-mpu-selection-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 463px; }
#quarto-document-content img[src$="fig-mfcc-preemphasis-framing-window.svg"]:where(:scope, *) { width: 100%; max-width: 640px; }
#quarto-document-content figure:has(img[src$="fig-mfcc-preemphasis-framing-window.svg"]):where(:scope, *) { --iot-figure-fit-width: 640px; }
#quarto-document-content img[src$="fig-mfcc-spectrum-mel-filterbank.svg"]:where(:scope, *) { width: 100%; max-width: 1032px; }
#quarto-document-content figure:has(img[src$="fig-mfcc-spectrum-mel-filterbank.svg"]):where(:scope, *) { --iot-figure-fit-width: 1032px; }
#quarto-document-content img[src$="fig-mfcc-stage-record-map.svg"]:where(:scope, *) { width: 100%; max-width: 640px; }
#quarto-document-content figure:has(img[src$="fig-mfcc-stage-record-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 640px; }
#quarto-document-content img[src$="fig-min-t-reliable-route.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-min-t-reliable-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-miniature-sensor-duty-cycle.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-miniature-sensor-duty-cycle.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-mobile-fund-cellular-spectrum-review-map.svg"]:where(:scope, *) { width: 100%; max-width: 878px; }
#quarto-document-content figure:has(img[src$="fig-mobile-fund-cellular-spectrum-review-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 878px; }
#quarto-document-content img[src$="fig-mobile-fund-cellular-spectrum-selection-flow.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="fig-mobile-fund-cellular-spectrum-selection-flow.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="fig-mobile-fund-em-waves-propagation-evidence.svg"]:where(:scope, *) { width: 100%; max-width: 904px; }
#quarto-document-content figure:has(img[src$="fig-mobile-fund-em-waves-propagation-evidence.svg"]):where(:scope, *) { --iot-figure-fit-width: 904px; }
#quarto-document-content img[src$="fig-mobile-fund-em-waves-relationship.svg"]:where(:scope, *) { width: 100%; max-width: 904px; }
#quarto-document-content figure:has(img[src$="fig-mobile-fund-em-waves-relationship.svg"]):where(:scope, *) { --iot-figure-fit-width: 904px; }
#quarto-document-content img[src$="fig-mobile-fund-frequency-bands-selection-flow.svg"]:where(:scope, *) { width: 100%; max-width: 878px; }
#quarto-document-content figure:has(img[src$="fig-mobile-fund-frequency-bands-selection-flow.svg"]):where(:scope, *) { --iot-figure-fit-width: 878px; }
#quarto-document-content img[src$="fig-mobile-fund-propagation-design-evidence-map.svg"]:where(:scope, *) { width: 100%; max-width: 878px; }
#quarto-document-content figure:has(img[src$="fig-mobile-fund-propagation-design-evidence-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 878px; }
#quarto-document-content img[src$="fig-mobile-fund-propagation-design-review-flow.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="fig-mobile-fund-propagation-design-review-flow.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="fig-mobile-gateway-challenges-store-forward.svg"]:where(:scope, *) { width: 100%; max-width: 840px; }
#quarto-document-content figure:has(img[src$="fig-mobile-gateway-challenges-store-forward.svg"]):where(:scope, *) { --iot-figure-fit-width: 840px; }
#quarto-document-content img[src$="fig-mobile-gateway-overview-boundary.svg"]:where(:scope, *) { width: 100%; max-width: 889px; }
#quarto-document-content figure:has(img[src$="fig-mobile-gateway-overview-boundary.svg"]):where(:scope, *) { --iot-figure-fit-width: 889px; }
#quarto-document-content img[src$="fig-mobile-gateway-overview-functions.svg"]:where(:scope, *) { width: 100%; max-width: 1048px; }
#quarto-document-content figure:has(img[src$="fig-mobile-gateway-overview-functions.svg"]):where(:scope, *) { --iot-figure-fit-width: 1048px; }
#quarto-document-content img[src$="fig-mobile-gateway-overview-release.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="fig-mobile-gateway-overview-release.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="fig-mobile-gateway-protocols-lab-release.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-mobile-gateway-protocols-lab-release.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-mobile-gateway-protocols-lab-trace.svg"]:where(:scope, *) { width: 100%; max-width: 820px; }
#quarto-document-content figure:has(img[src$="fig-mobile-gateway-protocols-lab-trace.svg"]):where(:scope, *) { --iot-figure-fit-width: 820px; }
#quarto-document-content img[src$="fig-mobile-gateway-protocols-lab-validation.svg"]:where(:scope, *) { width: 100%; max-width: 1006px; }
#quarto-document-content figure:has(img[src$="fig-mobile-gateway-protocols-lab-validation.svg"]):where(:scope, *) { --iot-figure-fit-width: 1006px; }
#quarto-document-content img[src$="fig-mobile-gateway-protocols-lab-workflow.svg"]:where(:scope, *) { width: 100%; max-width: 785px; }
#quarto-document-content figure:has(img[src$="fig-mobile-gateway-protocols-lab-workflow.svg"]):where(:scope, *) { --iot-figure-fit-width: 785px; }
#quarto-document-content img[src$="fig-mobile-labs-cellular-modem-bringup-flow.svg"]:where(:scope, *) { width: 100%; max-width: 1031px; }
#quarto-document-content figure:has(img[src$="fig-mobile-labs-cellular-modem-bringup-flow.svg"]):where(:scope, *) { --iot-figure-fit-width: 1031px; }
#quarto-document-content img[src$="fig-mobile-labs-cellular-modem-troubleshooting-map.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-mobile-labs-cellular-modem-troubleshooting-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-mobile-location-privacy-map.svg"]:where(:scope, *) { width: 100%; max-width: 981px; }
#quarto-document-content figure:has(img[src$="fig-mobile-location-privacy-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 981px; }
#quarto-document-content img[src$="fig-mobile-phone-participatory-sensing-acceptance-gates.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="fig-mobile-phone-participatory-sensing-acceptance-gates.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="fig-mobile-review-cellular-architecture-fit-map.svg"]:where(:scope, *) { width: 100%; max-width: 919px; }
#quarto-document-content figure:has(img[src$="fig-mobile-review-cellular-architecture-fit-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 919px; }
#quarto-document-content img[src$="fig-mobile-review-cellular-architecture-gprs-claims.svg"]:where(:scope, *) { width: 100%; max-width: 619px; }
#quarto-document-content figure:has(img[src$="fig-mobile-review-cellular-architecture-gprs-claims.svg"]):where(:scope, *) { --iot-figure-fit-width: 619px; }
#quarto-document-content img[src$="fig-mobile-sensing-inference-costs.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="fig-mobile-sensing-inference-costs.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="fig-mobile-wifi-probe-metadata.svg"]:where(:scope, *) { width: 100%; max-width: 981px; }
#quarto-document-content figure:has(img[src$="fig-mobile-wifi-probe-metadata.svg"]):where(:scope, *) { --iot-figure-fit-width: 981px; }
#quarto-document-content img[src$="fig-mobile-wireless-design-considerations-design-loop.svg"]:where(:scope, *) { width: 100%; max-width: 693px; }
#quarto-document-content figure:has(img[src$="fig-mobile-wireless-design-considerations-design-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 693px; }
#quarto-document-content img[src$="fig-mobile-wireless-propagation-licensing-evidence-map.svg"]:where(:scope, *) { width: 100%; max-width: 539px; }
#quarto-document-content figure:has(img[src$="fig-mobile-wireless-propagation-licensing-evidence-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 539px; }
#quarto-document-content img[src$="fig-mobile-wireless-technologies-basics-family-map.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="fig-mobile-wireless-technologies-basics-family-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="fig-mobile-wireless-technologies-basics-standards-family.svg"]:where(:scope, *) { width: 100%; max-width: 619px; }
#quarto-document-content figure:has(img[src$="fig-mobile-wireless-technologies-basics-standards-family.svg"]):where(:scope, *) { --iot-figure-fit-width: 619px; }
#quarto-document-content img[src$="fig-modbus-register-model.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="fig-modbus-register-model.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="fig-modbus-tcp-gateway.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="fig-modbus-tcp-gateway.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="fig-modbus-troubleshooting-ladder.svg"]:where(:scope, *) { width: 100%; max-width: 874px; }
#quarto-document-content figure:has(img[src$="fig-modbus-troubleshooting-ladder.svg"]):where(:scope, *) { --iot-figure-fit-width: 874px; }
#quarto-document-content img[src$="fig-mqtt-method-topic-tls.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="fig-mqtt-method-topic-tls.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="fig-mqtt-publish-packet-flow.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-mqtt-publish-packet-flow.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-mqtt-qos-levels-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="fig-mqtt-qos-levels-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="fig-mqtt-qos-packet-ledger.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="fig-mqtt-qos-packet-ledger.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="fig-mqtt-qos0-sequence-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="fig-mqtt-qos0-sequence-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="fig-mqtt-qos1-sequence-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="fig-mqtt-qos1-sequence-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="fig-mqtt-qos2-sequence-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 970px; }
#quarto-document-content figure:has(img[src$="fig-mqtt-qos2-sequence-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 970px; }
#quarto-document-content img[src$="fig-multihop-apps-fit-map.svg"]:where(:scope, *) { width: 100%; max-width: 889px; }
#quarto-document-content figure:has(img[src$="fig-multihop-apps-fit-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 889px; }
#quarto-document-content img[src$="fig-multihop-apps-path-health.svg"]:where(:scope, *) { width: 100%; max-width: 640px; }
#quarto-document-content figure:has(img[src$="fig-multihop-apps-path-health.svg"]):where(:scope, *) { --iot-figure-fit-width: 640px; }
#quarto-document-content img[src$="fig-multihop-fundamentals-foundation.svg"]:where(:scope, *) { width: 100%; max-width: 780px; }
#quarto-document-content figure:has(img[src$="fig-multihop-fundamentals-foundation.svg"]):where(:scope, *) { --iot-figure-fit-width: 780px; }
#quarto-document-content img[src$="fig-multihop-fundamentals-review-record.svg"]:where(:scope, *) { width: 100%; max-width: 978px; }
#quarto-document-content figure:has(img[src$="fig-multihop-fundamentals-review-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 978px; }
#quarto-document-content img[src$="fig-multihop-fundamentals-topology-choice.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-multihop-fundamentals-topology-choice.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-nanowatt-adc-front-end.svg"]:where(:scope, *) { width: 100%; max-width: 686px; }
#quarto-document-content figure:has(img[src$="fig-nanowatt-adc-front-end.svg"]):where(:scope, *) { --iot-figure-fit-width: 686px; }
#quarto-document-content img[src$="fig-nb-iot-channel-access-flow.svg"]:where(:scope, *) { width: 100%; max-width: 1074px; }
#quarto-document-content figure:has(img[src$="fig-nb-iot-channel-access-flow.svg"]):where(:scope, *) { --iot-figure-fit-width: 1074px; }
#quarto-document-content img[src$="fig-nb-iot-technical-validation-loop.svg"]:where(:scope, *) { width: 100%; max-width: 1080px; }
#quarto-document-content figure:has(img[src$="fig-nb-iot-technical-validation-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 1080px; }
#quarto-document-content img[src$="fig-nbiot-deployment-evidence-matrix.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="fig-nbiot-deployment-evidence-matrix.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="fig-nbiot-deployment-mode-map.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="fig-nbiot-deployment-mode-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="fig-nbiot-deployment-modes.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-nbiot-deployment-modes.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-nbiot-deployment-review-workflow.svg"]:where(:scope, *) { width: 100%; max-width: 800px; }
#quarto-document-content figure:has(img[src$="fig-nbiot-deployment-review-workflow.svg"]):where(:scope, *) { --iot-figure-fit-width: 800px; }
#quarto-document-content img[src$="fig-nbiot-deployment-risk-record.svg"]:where(:scope, *) { width: 100%; max-width: 762px; }
#quarto-document-content figure:has(img[src$="fig-nbiot-deployment-risk-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 762px; }
#quarto-document-content img[src$="fig-nbiot-deployment-rollout-sequence.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-nbiot-deployment-rollout-sequence.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-nbiot-power-reachability.svg"]:where(:scope, *) { width: 100%; max-width: 978px; }
#quarto-document-content figure:has(img[src$="fig-nbiot-power-reachability.svg"]):where(:scope, *) { --iot-figure-fit-width: 978px; }
#quarto-document-content img[src$="fig-nbiot-tech-comparison-mobility-coverage.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="fig-nbiot-tech-comparison-mobility-coverage.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="fig-nbiot-tech-comparison-risk-record.svg"]:where(:scope, *) { width: 100%; max-width: 842px; }
#quarto-document-content figure:has(img[src$="fig-nbiot-tech-comparison-risk-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 842px; }
#quarto-document-content img[src$="fig-network-fundamentals-requirements-map.svg"]:where(:scope, *) { width: 100%; max-width: 935px; }
#quarto-document-content figure:has(img[src$="fig-network-fundamentals-requirements-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 935px; }
#quarto-document-content img[src$="fig-network-signal-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 640px; }
#quarto-document-content figure:has(img[src$="fig-network-signal-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 640px; }
#quarto-document-content img[src$="fig-network-simulation-study-plan.svg"]:where(:scope, *) { width: 100%; max-width: 760px; }
#quarto-document-content figure:has(img[src$="fig-network-simulation-study-plan.svg"]):where(:scope, *) { --iot-figure-fit-width: 760px; }
#quarto-document-content img[src$="fig-network-simulation-tools-review-record.svg"]:where(:scope, *) { width: 100%; max-width: 1035px; }
#quarto-document-content figure:has(img[src$="fig-network-simulation-tools-review-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 1035px; }
#quarto-document-content img[src$="fig-network-tools-selection-route.svg"]:where(:scope, *) { width: 100%; max-width: 517px; }
#quarto-document-content figure:has(img[src$="fig-network-tools-selection-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 517px; }
#quarto-document-content img[src$="fig-nfc-iot-integration-event-flow.svg"]:where(:scope, *) { width: 100%; max-width: 1102px; }
#quarto-document-content figure:has(img[src$="fig-nfc-iot-integration-event-flow.svg"]):where(:scope, *) { --iot-figure-fit-width: 1102px; }
#quarto-document-content img[src$="fig-nfc-iot-integration-lab-evidence.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-nfc-iot-integration-lab-evidence.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-nfc-modes-and-protocols-activation-flow.svg"]:where(:scope, *) { width: 100%; max-width: 981px; }
#quarto-document-content figure:has(img[src$="fig-nfc-modes-and-protocols-activation-flow.svg"]):where(:scope, *) { --iot-figure-fit-width: 981px; }
#quarto-document-content img[src$="fig-nfc-modes-and-protocols-handover-boundary.svg"]:where(:scope, *) { width: 100%; max-width: 678px; }
#quarto-document-content figure:has(img[src$="fig-nfc-modes-and-protocols-handover-boundary.svg"]):where(:scope, *) { --iot-figure-fit-width: 678px; }
#quarto-document-content img[src$="fig-nfc-modes-and-protocols-layer-stack.svg"]:where(:scope, *) { width: 100%; max-width: 640px; }
#quarto-document-content figure:has(img[src$="fig-nfc-modes-and-protocols-layer-stack.svg"]):where(:scope, *) { --iot-figure-fit-width: 640px; }
#quarto-document-content img[src$="fig-nfc-real-world-auth-evidence.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-nfc-real-world-auth-evidence.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-nfc-real-world-credential-trust.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-nfc-real-world-credential-trust.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-nfc-real-world-tag-path.svg"]:where(:scope, *) { width: 100%; max-width: 900px; }
#quarto-document-content figure:has(img[src$="fig-nfc-real-world-tag-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 900px; }
#quarto-document-content img[src$="fig-nfc-role-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1102px; }
#quarto-document-content figure:has(img[src$="fig-nfc-role-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1102px; }
#quarto-document-content img[src$="fig-nfc-security-and-best-practices-static-tag-limits.svg"]:where(:scope, *) { width: 100%; max-width: 1011px; }
#quarto-document-content figure:has(img[src$="fig-nfc-security-and-best-practices-static-tag-limits.svg"]):where(:scope, *) { --iot-figure-fit-width: 1011px; }
#quarto-document-content img[src$="fig-nfc-simulation-ndef-trace.svg"]:where(:scope, *) { width: 100%; max-width: 980px; }
#quarto-document-content figure:has(img[src$="fig-nfc-simulation-ndef-trace.svg"]):where(:scope, *) { --iot-figure-fit-width: 980px; }
#quarto-document-content img[src$="fig-nfc-simulation-risk-matrix.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="fig-nfc-simulation-risk-matrix.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="fig-nfc-tag-debug-map.svg"]:where(:scope, *) { width: 100%; max-width: 1031px; }
#quarto-document-content figure:has(img[src$="fig-nfc-tag-debug-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 1031px; }
#quarto-document-content img[src$="fig-nfc-tag-programming-workflow.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="fig-nfc-tag-programming-workflow.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="fig-nfc-tags-and-ndef-capability-map.svg"]:where(:scope, *) { width: 100%; max-width: 934px; }
#quarto-document-content figure:has(img[src$="fig-nfc-tags-and-ndef-capability-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 934px; }
#quarto-document-content img[src$="fig-nist-csf2-route.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="fig-nist-csf2-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="fig-node-behavior-taxonomy-review-flow.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="fig-node-behavior-taxonomy-review-flow.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="fig-nonlinearity-noise-dc-bias.svg"]:where(:scope, *) { width: 100%; max-width: 565px; }
#quarto-document-content figure:has(img[src$="fig-nonlinearity-noise-dc-bias.svg"]):where(:scope, *) { --iot-figure-fit-width: 565px; }
#quarto-document-content img[src$="fig-npn-relay-driver.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="fig-npn-relay-driver.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="fig-offloading-breakeven-gates.svg"]:where(:scope, *) { width: 100%; max-width: 914px; }
#quarto-document-content figure:has(img[src$="fig-offloading-breakeven-gates.svg"]):where(:scope, *) { --iot-figure-fit-width: 914px; }
#quarto-document-content img[src$="fig-opcua-address-space-record.svg"]:where(:scope, *) { width: 100%; max-width: 800px; }
#quarto-document-content figure:has(img[src$="fig-opcua-address-space-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 800px; }
#quarto-document-content img[src$="fig-opcua-pubsub-gateway-boundary.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="fig-opcua-pubsub-gateway-boundary.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="fig-opcua-review-risk-record.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-opcua-review-risk-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-opcua-service-workflow.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-opcua-service-workflow.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-optimization-fundamentals-tradeoffs.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-optimization-fundamentals-tradeoffs.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-overhead-analysis-fragmentation-gate.svg"]:where(:scope, *) { width: 100%; max-width: 889px; }
#quarto-document-content figure:has(img[src$="fig-overhead-analysis-fragmentation-gate.svg"]):where(:scope, *) { --iot-figure-fit-width: 889px; }
#quarto-document-content img[src$="fig-paper-architecture-map.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="fig-paper-architecture-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="fig-paper-guides-wsn-idle-vs-transmit-current.svg"]:where(:scope, *) { width: 100%; max-width: 996px; }
#quarto-document-content figure:has(img[src$="fig-paper-guides-wsn-idle-vs-transmit-current.svg"]):where(:scope, *) { --iot-figure-fit-width: 996px; }
#quarto-document-content img[src$="fig-paper-reading-three-pass.svg"]:where(:scope, *) { width: 100%; max-width: 678px; }
#quarto-document-content figure:has(img[src$="fig-paper-reading-three-pass.svg"]):where(:scope, *) { --iot-figure-fit-width: 678px; }
#quarto-document-content img[src$="fig-paper-reading-workflow.svg"]:where(:scope, *) { width: 100%; max-width: 892px; }
#quarto-document-content figure:has(img[src$="fig-paper-reading-workflow.svg"]):where(:scope, *) { --iot-figure-fit-width: 892px; }
#quarto-document-content img[src$="fig-paper-standardization-lens.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-paper-standardization-lens.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-particle-localize-track.svg"]:where(:scope, *) { width: 100%; max-width: 565px; }
#quarto-document-content figure:has(img[src$="fig-particle-localize-track.svg"]):where(:scope, *) { --iot-figure-fit-width: 565px; }
#quarto-document-content img[src$="fig-particle-predict-correct.svg"]:where(:scope, *) { width: 100%; max-width: 565px; }
#quarto-document-content figure:has(img[src$="fig-particle-predict-correct.svg"]):where(:scope, *) { --iot-figure-fit-width: 565px; }
#quarto-document-content img[src$="fig-particle-wall-resampling.svg"]:where(:scope, *) { width: 100%; max-width: 565px; }
#quarto-document-content figure:has(img[src$="fig-particle-wall-resampling.svg"]):where(:scope, *) { --iot-figure-fit-width: 565px; }
#quarto-document-content img[src$="fig-pbd-implementation-route.svg"]:where(:scope, *) { width: 100%; max-width: 878px; }
#quarto-document-content figure:has(img[src$="fig-pbd-implementation-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 878px; }
#quarto-document-content img[src$="fig-pdu-encapsulation-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 768px; }
#quarto-document-content figure:has(img[src$="fig-pdu-encapsulation-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 768px; }
#quarto-document-content img[src$="fig-pid-feedback-placement.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-pid-feedback-placement.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-pid-feedback-types.svg"]:where(:scope, *) { width: 100%; max-width: 1031px; }
#quarto-document-content figure:has(img[src$="fig-pid-feedback-types.svg"]):where(:scope, *) { --iot-figure-fit-width: 1031px; }
#quarto-document-content img[src$="fig-pid-loop-open-loop.svg"]:where(:scope, *) { width: 100%; max-width: 731px; }
#quarto-document-content figure:has(img[src$="fig-pid-loop-open-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 731px; }
#quarto-document-content img[src$="fig-pid-theory-response.svg"]:where(:scope, *) { width: 100%; max-width: 970px; }
#quarto-document-content figure:has(img[src$="fig-pid-theory-response.svg"]):where(:scope, *) { --iot-figure-fit-width: 970px; }
#quarto-document-content img[src$="fig-pid-theory-review-record.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-pid-theory-review-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-pid-theory-selection.svg"]:where(:scope, *) { width: 100%; max-width: 924px; }
#quarto-document-content figure:has(img[src$="fig-pid-theory-selection.svg"]):where(:scope, *) { --iot-figure-fit-width: 924px; }
#quarto-document-content img[src$="fig-pid-tuning-application-patterns.svg"]:where(:scope, *) { width: 100%; max-width: 998px; }
#quarto-document-content figure:has(img[src$="fig-pid-tuning-application-patterns.svg"]):where(:scope, *) { --iot-figure-fit-width: 998px; }
#quarto-document-content img[src$="fig-pid-tuning-response-evidence.svg"]:where(:scope, *) { width: 100%; max-width: 1051px; }
#quarto-document-content figure:has(img[src$="fig-pid-tuning-response-evidence.svg"]):where(:scope, *) { --iot-figure-fit-width: 1051px; }
#quarto-document-content img[src$="fig-pid-tuning-safe-workflow.svg"]:where(:scope, *) { width: 100%; max-width: 940px; }
#quarto-document-content figure:has(img[src$="fig-pid-tuning-safe-workflow.svg"]):where(:scope, *) { --iot-figure-fit-width: 940px; }
#quarto-document-content img[src$="fig-pid-tuning-zn-evidence.svg"]:where(:scope, *) { width: 100%; max-width: 1015px; }
#quarto-document-content figure:has(img[src$="fig-pid-tuning-zn-evidence.svg"]):where(:scope, *) { --iot-figure-fit-width: 1015px; }
#quarto-document-content img[src$="fig-power-interfaces-boundary.svg"]:where(:scope, *) { width: 100%; max-width: 935px; }
#quarto-document-content figure:has(img[src$="fig-power-interfaces-boundary.svg"]):where(:scope, *) { --iot-figure-fit-width: 935px; }
#quarto-document-content img[src$="fig-power-interfaces-state-ledger.svg"]:where(:scope, *) { width: 100%; max-width: 869px; }
#quarto-document-content figure:has(img[src$="fig-power-interfaces-state-ledger.svg"]):where(:scope, *) { --iot-figure-fit-width: 869px; }
#quarto-document-content img[src$="fig-predication-inline-tradeoff.svg"]:where(:scope, *) { width: 100%; max-width: 1100px; }
#quarto-document-content figure:has(img[src$="fig-predication-inline-tradeoff.svg"]):where(:scope, *) { --iot-figure-fit-width: 1100px; }
#quarto-document-content img[src$="fig-privacy-compliance-index-lifecycle.svg"]:where(:scope, *) { width: 100%; max-width: 788px; }
#quarto-document-content figure:has(img[src$="fig-privacy-compliance-index-lifecycle.svg"]):where(:scope, *) { --iot-figure-fit-width: 788px; }
#quarto-document-content img[src$="fig-privacy-compliance-index-record.svg"]:where(:scope, *) { width: 100%; max-width: 909px; }
#quarto-document-content figure:has(img[src$="fig-privacy-compliance-index-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 909px; }
#quarto-document-content img[src$="fig-privacy-compliance-index-route.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-privacy-compliance-index-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-privacy-intro-inference.svg"]:where(:scope, *) { width: 100%; max-width: 978px; }
#quarto-document-content figure:has(img[src$="fig-privacy-intro-inference.svg"]):where(:scope, *) { --iot-figure-fit-width: 978px; }
#quarto-document-content img[src$="fig-privacy-intro-security.svg"]:where(:scope, *) { width: 100%; max-width: 539px; }
#quarto-document-content figure:has(img[src$="fig-privacy-intro-security.svg"]):where(:scope, *) { --iot-figure-fit-width: 539px; }
#quarto-document-content img[src$="fig-privacy-principles-core.svg"]:where(:scope, *) { width: 100%; max-width: 889px; }
#quarto-document-content figure:has(img[src$="fig-privacy-principles-core.svg"]):where(:scope, *) { --iot-figure-fit-width: 889px; }
#quarto-document-content img[src$="fig-privacy-regulations-request.svg"]:where(:scope, *) { width: 100%; max-width: 1038px; }
#quarto-document-content figure:has(img[src$="fig-privacy-regulations-request.svg"]):where(:scope, *) { --iot-figure-fit-width: 1038px; }
#quarto-document-content img[src$="fig-privacy-techniques-selection.svg"]:where(:scope, *) { width: 100%; max-width: 904px; }
#quarto-document-content figure:has(img[src$="fig-privacy-techniques-selection.svg"]):where(:scope, *) { --iot-figure-fit-width: 904px; }
#quarto-document-content img[src$="fig-private-5g-architecture-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-private-5g-architecture-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-processes-systems-overview-blocks.svg"]:where(:scope, *) { width: 100%; max-width: 940px; }
#quarto-document-content figure:has(img[src$="fig-processes-systems-overview-blocks.svg"]):where(:scope, *) { --iot-figure-fit-width: 940px; }
#quarto-document-content img[src$="fig-processes-systems-overview-decomposition.svg"]:where(:scope, *) { width: 100%; max-width: 1003px; }
#quarto-document-content figure:has(img[src$="fig-processes-systems-overview-decomposition.svg"]):where(:scope, *) { --iot-figure-fit-width: 1003px; }
#quarto-document-content img[src$="fig-processes-systems-overview-ipo.svg"]:where(:scope, *) { width: 100%; max-width: 940px; }
#quarto-document-content figure:has(img[src$="fig-processes-systems-overview-ipo.svg"]):where(:scope, *) { --iot-figure-fit-width: 940px; }
#quarto-document-content img[src$="fig-production-case-studies-safety-timing.svg"]:where(:scope, *) { width: 100%; max-width: 828px; }
#quarto-document-content figure:has(img[src$="fig-production-case-studies-safety-timing.svg"]):where(:scope, *) { --iot-figure-fit-width: 828px; }
#quarto-document-content img[src$="fig-production-case-studies-scale-up.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-production-case-studies-scale-up.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-production-management-domains.svg"]:where(:scope, *) { width: 100%; max-width: 1011px; }
#quarto-document-content figure:has(img[src$="fig-production-management-domains.svg"]):where(:scope, *) { --iot-figure-fit-width: 1011px; }
#quarto-document-content img[src$="fig-production-management-lifecycle.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-production-management-lifecycle.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-production-resources-evidence-pack.svg"]:where(:scope, *) { width: 100%; max-width: 996px; }
#quarto-document-content figure:has(img[src$="fig-production-resources-evidence-pack.svg"]):where(:scope, *) { --iot-figure-fit-width: 996px; }
#quarto-document-content img[src$="fig-profinet-role-record.svg"]:where(:scope, *) { width: 100%; max-width: 996px; }
#quarto-document-content figure:has(img[src$="fig-profinet-role-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 996px; }
#quarto-document-content img[src$="fig-project-planning-evidence-board.svg"]:where(:scope, *) { width: 100%; max-width: 1100px; }
#quarto-document-content figure:has(img[src$="fig-project-planning-evidence-board.svg"]):where(:scope, *) { --iot-figure-fit-width: 1100px; }
#quarto-document-content img[src$="fig-protocol-antipatterns-correction-loop.svg"]:where(:scope, *) { width: 100%; max-width: 640px; }
#quarto-document-content figure:has(img[src$="fig-protocol-antipatterns-correction-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 640px; }
#quarto-document-content img[src$="fig-protocol-antipatterns-evidence-ledger.svg"]:where(:scope, *) { width: 100%; max-width: 602px; }
#quarto-document-content figure:has(img[src$="fig-protocol-antipatterns-evidence-ledger.svg"]):where(:scope, *) { --iot-figure-fit-width: 602px; }
#quarto-document-content img[src$="fig-protocol-antipatterns-map.svg"]:where(:scope, *) { width: 100%; max-width: 602px; }
#quarto-document-content figure:has(img[src$="fig-protocol-antipatterns-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 602px; }
#quarto-document-content img[src$="fig-protocol-challenge-shortlist.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="fig-protocol-challenge-shortlist.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="fig-protocol-scenarios-record.svg"]:where(:scope, *) { width: 100%; max-width: 555px; }
#quarto-document-content figure:has(img[src$="fig-protocol-scenarios-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 555px; }
#quarto-document-content img[src$="fig-protocol-scenarios-workflow.svg"]:where(:scope, *) { width: 100%; max-width: 726px; }
#quarto-document-content figure:has(img[src$="fig-protocol-scenarios-workflow.svg"]):where(:scope, *) { --iot-figure-fit-width: 726px; }
#quarto-document-content img[src$="fig-protocol-selection-decision-flow.svg"]:where(:scope, *) { width: 100%; max-width: 594px; }
#quarto-document-content figure:has(img[src$="fig-protocol-selection-decision-flow.svg"]):where(:scope, *) { --iot-figure-fit-width: 594px; }
#quarto-document-content img[src$="fig-protocol-selection-family-map.svg"]:where(:scope, *) { width: 100%; max-width: 800px; }
#quarto-document-content figure:has(img[src$="fig-protocol-selection-family-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 800px; }
#quarto-document-content img[src$="fig-protocol-selection-label.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="fig-protocol-selection-label.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="fig-protocol-stack-architecture-gateway.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-protocol-stack-architecture-gateway.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-protocol-stack-architecture-layer-map.svg"]:where(:scope, *) { width: 100%; max-width: 1054px; }
#quarto-document-content figure:has(img[src$="fig-protocol-stack-architecture-layer-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 1054px; }
#quarto-document-content img[src$="fig-protocol-systematic-record.svg"]:where(:scope, *) { width: 100%; max-width: 889px; }
#quarto-document-content figure:has(img[src$="fig-protocol-systematic-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 889px; }
#quarto-document-content img[src$="fig-protocol-systematic-workflow.svg"]:where(:scope, *) { width: 100%; max-width: 889px; }
#quarto-document-content figure:has(img[src$="fig-protocol-systematic-workflow.svg"]):where(:scope, *) { --iot-figure-fit-width: 889px; }
#quarto-document-content img[src$="fig-protocol-wizard-interactive-flow.svg"]:where(:scope, *) { width: 100%; max-width: 1011px; }
#quarto-document-content figure:has(img[src$="fig-protocol-wizard-interactive-flow.svg"]):where(:scope, *) { --iot-figure-fit-width: 1011px; }
#quarto-document-content img[src$="fig-prototyping-hw-best-practices-bringup.svg"]:where(:scope, *) { width: 100%; max-width: 1024px; }
#quarto-document-content figure:has(img[src$="fig-prototyping-hw-best-practices-bringup.svg"]):where(:scope, *) { --iot-figure-fit-width: 1024px; }
#quarto-document-content img[src$="fig-prototyping-hw-best-practices-loop.svg"]:where(:scope, *) { width: 100%; max-width: 978px; }
#quarto-document-content figure:has(img[src$="fig-prototyping-hw-best-practices-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 978px; }
#quarto-document-content img[src$="fig-prototyping-hw-components-actuator-chain.svg"]:where(:scope, *) { width: 100%; max-width: 996px; }
#quarto-document-content figure:has(img[src$="fig-prototyping-hw-components-actuator-chain.svg"]):where(:scope, *) { --iot-figure-fit-width: 996px; }
#quarto-document-content img[src$="fig-prototyping-hw-components-route.svg"]:where(:scope, *) { width: 100%; max-width: 811px; }
#quarto-document-content figure:has(img[src$="fig-prototyping-hw-components-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 811px; }
#quarto-document-content img[src$="fig-prototyping-hw-getting-started-debug-ladder.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-prototyping-hw-getting-started-debug-ladder.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-prototyping-hw-introduction-approaches.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-prototyping-hw-introduction-approaches.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-prototyping-hw-introduction-gap.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-prototyping-hw-introduction-gap.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-prototyping-hw-introduction-route.svg"]:where(:scope, *) { width: 100%; max-width: 811px; }
#quarto-document-content figure:has(img[src$="fig-prototyping-hw-introduction-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 811px; }
#quarto-document-content img[src$="fig-prototyping-hw-mcu-vs-mpu-decision-route.svg"]:where(:scope, *) { width: 100%; max-width: 811px; }
#quarto-document-content figure:has(img[src$="fig-prototyping-hw-mcu-vs-mpu-decision-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 811px; }
#quarto-document-content img[src$="fig-prototyping-hw-mcu-vs-mpu-evidence-map.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="fig-prototyping-hw-mcu-vs-mpu-evidence-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="fig-prototyping-hw-mcu-vs-mpu-hybrid-boundary.svg"]:where(:scope, *) { width: 100%; max-width: 715px; }
#quarto-document-content figure:has(img[src$="fig-prototyping-hw-mcu-vs-mpu-hybrid-boundary.svg"]):where(:scope, *) { --iot-figure-fit-width: 715px; }
#quarto-document-content img[src$="fig-prototyping-hw-mcu-vs-mpu-review-record.svg"]:where(:scope, *) { width: 100%; max-width: 760px; }
#quarto-document-content figure:has(img[src$="fig-prototyping-hw-mcu-vs-mpu-review-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 760px; }
#quarto-document-content img[src$="fig-prototyping-hw-pcb-design-layout-zones.svg"]:where(:scope, *) { width: 100%; max-width: 847px; }
#quarto-document-content figure:has(img[src$="fig-prototyping-hw-pcb-design-layout-zones.svg"]):where(:scope, *) { --iot-figure-fit-width: 847px; }
#quarto-document-content img[src$="fig-prototyping-hw-pcb-design-route.svg"]:where(:scope, *) { width: 100%; max-width: 780px; }
#quarto-document-content figure:has(img[src$="fig-prototyping-hw-pcb-design-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 780px; }
#quarto-document-content img[src$="fig-prototyping-kits-ai-wireless-energy-review-record.svg"]:where(:scope, *) { width: 100%; max-width: 1100px; }
#quarto-document-content figure:has(img[src$="fig-prototyping-kits-ai-wireless-energy-review-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 1100px; }
#quarto-document-content img[src$="fig-prototyping-kits-ai-wireless-energy-roles.svg"]:where(:scope, *) { width: 100%; max-width: 909px; }
#quarto-document-content figure:has(img[src$="fig-prototyping-kits-ai-wireless-energy-roles.svg"]):where(:scope, *) { --iot-figure-fit-width: 909px; }
#quarto-document-content img[src$="fig-prototyping-kits-ai-wireless-energy-route.svg"]:where(:scope, *) { width: 100%; max-width: 1047px; }
#quarto-document-content figure:has(img[src$="fig-prototyping-kits-ai-wireless-energy-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 1047px; }
#quarto-document-content img[src$="fig-prototyping-kits-industrial-wearable-evidence-matrix.svg"]:where(:scope, *) { width: 100%; max-width: 1109px; }
#quarto-document-content figure:has(img[src$="fig-prototyping-kits-industrial-wearable-evidence-matrix.svg"]):where(:scope, *) { --iot-figure-fit-width: 1109px; }
#quarto-document-content img[src$="fig-prototyping-kits-industrial-wearable-route.svg"]:where(:scope, *) { width: 100%; max-width: 903px; }
#quarto-document-content figure:has(img[src$="fig-prototyping-kits-industrial-wearable-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 903px; }
#quarto-document-content img[src$="fig-prototyping-kits-robotics-agricultural-evidence-matrix.svg"]:where(:scope, *) { width: 100%; max-width: 1024px; }
#quarto-document-content figure:has(img[src$="fig-prototyping-kits-robotics-agricultural-evidence-matrix.svg"]):where(:scope, *) { --iot-figure-fit-width: 1024px; }
#quarto-document-content img[src$="fig-prototyping-kits-robotics-agricultural-integration-boundary.svg"]:where(:scope, *) { width: 100%; max-width: 996px; }
#quarto-document-content figure:has(img[src$="fig-prototyping-kits-robotics-agricultural-integration-boundary.svg"]):where(:scope, *) { --iot-figure-fit-width: 996px; }
#quarto-document-content img[src$="fig-prototyping-kits-robotics-agricultural-review-record.svg"]:where(:scope, *) { width: 100%; max-width: 693px; }
#quarto-document-content figure:has(img[src$="fig-prototyping-kits-robotics-agricultural-review-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 693px; }
#quarto-document-content img[src$="fig-prototyping-kits-smart-home-environmental-evidence-matrix.svg"]:where(:scope, *) { width: 100%; max-width: 924px; }
#quarto-document-content figure:has(img[src$="fig-prototyping-kits-smart-home-environmental-evidence-matrix.svg"]):where(:scope, *) { --iot-figure-fit-width: 924px; }
#quarto-document-content img[src$="fig-prototyping-kits-smart-home-environmental-review-record.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="fig-prototyping-kits-smart-home-environmental-review-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="fig-prototyping-software-forms.svg"]:where(:scope, *) { width: 100%; max-width: 640px; }
#quarto-document-content figure:has(img[src$="fig-prototyping-software-forms.svg"]):where(:scope, *) { --iot-figure-fit-width: 640px; }
#quarto-document-content img[src$="fig-prototyping-software-route.svg"]:where(:scope, *) { width: 100%; max-width: 760px; }
#quarto-document-content figure:has(img[src$="fig-prototyping-software-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 760px; }
#quarto-document-content img[src$="fig-prototyping-sw-architecture-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="fig-prototyping-sw-architecture-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="fig-prototyping-sw-best-practices-config.svg"]:where(:scope, *) { width: 100%; max-width: 889px; }
#quarto-document-content figure:has(img[src$="fig-prototyping-sw-best-practices-config.svg"]):where(:scope, *) { --iot-figure-fit-width: 889px; }
#quarto-document-content img[src$="fig-prototyping-sw-best-practices-review-gates.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-prototyping-sw-best-practices-review-gates.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-prototyping-sw-environments-route.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="fig-prototyping-sw-environments-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="fig-prototyping-sw-environments-toolchain-record.svg"]:where(:scope, *) { width: 100%; max-width: 1080px; }
#quarto-document-content figure:has(img[src$="fig-prototyping-sw-environments-toolchain-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 1080px; }
#quarto-document-content img[src$="fig-prototyping-sw-languages-constraint-gates.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-prototyping-sw-languages-constraint-gates.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-prototyping-sw-ota-architecture.svg"]:where(:scope, *) { width: 100%; max-width: 867px; }
#quarto-document-content figure:has(img[src$="fig-prototyping-sw-ota-architecture.svg"]):where(:scope, *) { --iot-figure-fit-width: 867px; }
#quarto-document-content img[src$="fig-prototyping-sw-ota-device-states.svg"]:where(:scope, *) { width: 100%; max-width: 788px; }
#quarto-document-content figure:has(img[src$="fig-prototyping-sw-ota-device-states.svg"]):where(:scope, *) { --iot-figure-fit-width: 788px; }
#quarto-document-content img[src$="fig-prototyping-sw-testing-debug-loop.svg"]:where(:scope, *) { width: 100%; max-width: 706px; }
#quarto-document-content figure:has(img[src$="fig-prototyping-sw-testing-debug-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 706px; }
#quarto-document-content img[src$="fig-prototyping-sw-testing-regression-record.svg"]:where(:scope, *) { width: 100%; max-width: 706px; }
#quarto-document-content figure:has(img[src$="fig-prototyping-sw-testing-regression-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 706px; }
#quarto-document-content img[src$="fig-prototyping-sw-testing-route.svg"]:where(:scope, *) { width: 100%; max-width: 706px; }
#quarto-document-content figure:has(img[src$="fig-prototyping-sw-testing-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 706px; }
#quarto-document-content img[src$="fig-public-key-decision-matrix.svg"]:where(:scope, *) { width: 100%; max-width: 904px; }
#quarto-document-content figure:has(img[src$="fig-public-key-decision-matrix.svg"]):where(:scope, *) { --iot-figure-fit-width: 904px; }
#quarto-document-content img[src$="fig-qos-core-parameter-map.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="fig-qos-core-parameter-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="fig-qos-core-rate-limits.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="fig-qos-core-rate-limits.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="fig-qos-core-token-leaky.svg"]:where(:scope, *) { width: 100%; max-width: 993px; }
#quarto-document-content figure:has(img[src$="fig-qos-core-token-leaky.svg"]):where(:scope, *) { --iot-figure-fit-width: 993px; }
#quarto-document-content img[src$="fig-qos-real-domain-map.svg"]:where(:scope, *) { width: 100%; max-width: 900px; }
#quarto-document-content figure:has(img[src$="fig-qos-real-domain-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 900px; }
#quarto-document-content img[src$="fig-radio-duty-cycle-module-ledger.svg"]:where(:scope, *) { width: 100%; max-width: 565px; }
#quarto-document-content figure:has(img[src$="fig-radio-duty-cycle-module-ledger.svg"]):where(:scope, *) { --iot-figure-fit-width: 565px; }
#quarto-document-content img[src$="fig-radio-energy-per-delivered-bit.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="fig-radio-energy-per-delivered-bit.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="fig-real-sensor-dynamics-chain.svg"]:where(:scope, *) { width: 100%; max-width: 619px; }
#quarto-document-content figure:has(img[src$="fig-real-sensor-dynamics-chain.svg"]):where(:scope, *) { --iot-figure-fit-width: 619px; }
#quarto-document-content img[src$="fig-realtime-historical-four-vs.svg"]:where(:scope, *) { width: 100%; max-width: 1024px; }
#quarto-document-content figure:has(img[src$="fig-realtime-historical-four-vs.svg"]):where(:scope, *) { --iot-figure-fit-width: 1024px; }
#quarto-document-content img[src$="fig-ref-architecture-pitfalls-boundary-coupling.svg"]:where(:scope, *) { width: 100%; max-width: 860px; }
#quarto-document-content figure:has(img[src$="fig-ref-architecture-pitfalls-boundary-coupling.svg"]):where(:scope, *) { --iot-figure-fit-width: 860px; }
#quarto-document-content img[src$="fig-ref-architecture-pitfalls-map.svg"]:where(:scope, *) { width: 100%; max-width: 860px; }
#quarto-document-content figure:has(img[src$="fig-ref-architecture-pitfalls-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 860px; }
#quarto-document-content img[src$="fig-ref-architecture-pitfalls-model-fit.svg"]:where(:scope, *) { width: 100%; max-width: 933px; }
#quarto-document-content figure:has(img[src$="fig-ref-architecture-pitfalls-model-fit.svg"]):where(:scope, *) { --iot-figure-fit-width: 933px; }
#quarto-document-content img[src$="fig-ref-architecture-pitfalls-review-record.svg"]:where(:scope, *) { width: 100%; max-width: 1058px; }
#quarto-document-content figure:has(img[src$="fig-ref-architecture-pitfalls-review-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 1058px; }
#quarto-document-content img[src$="fig-ref-architecture-selection-flow-split.svg"]:where(:scope, *) { width: 100%; max-width: 1017px; }
#quarto-document-content figure:has(img[src$="fig-ref-architecture-selection-flow-split.svg"]):where(:scope, *) { --iot-figure-fit-width: 1017px; }
#quarto-document-content img[src$="fig-ref-architecture-selection-inputs.svg"]:where(:scope, *) { width: 100%; max-width: 860px; }
#quarto-document-content figure:has(img[src$="fig-ref-architecture-selection-inputs.svg"]):where(:scope, *) { --iot-figure-fit-width: 860px; }
#quarto-document-content img[src$="fig-ref-models-alternatives-lens-families.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-ref-models-alternatives-lens-families.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-reference-model-evidence-map.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="fig-reference-model-evidence-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="fig-reliability-error-handling-review-loop.svg"]:where(:scope, *) { width: 100%; max-width: 1035px; }
#quarto-document-content figure:has(img[src$="fig-reliability-error-handling-review-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 1035px; }
#quarto-document-content img[src$="fig-reliability-retry-sequencing-decision-record.svg"]:where(:scope, *) { width: 100%; max-width: 842px; }
#quarto-document-content figure:has(img[src$="fig-reliability-retry-sequencing-decision-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 842px; }
#quarto-document-content img[src$="fig-reliability-retry-sequencing-review-loop.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="fig-reliability-retry-sequencing-review-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="fig-rfid-apps-hardware-integration-physical-fit.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-rfid-apps-hardware-integration-physical-fit.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-rfid-apps-industry-applications-reader-placement.svg"]:where(:scope, *) { width: 100%; max-width: 483px; }
#quarto-document-content figure:has(img[src$="fig-rfid-apps-industry-applications-reader-placement.svg"]):where(:scope, *) { --iot-figure-fit-width: 483px; }
#quarto-document-content img[src$="fig-rfid-apps-industry-applications-rollout-loop.svg"]:where(:scope, *) { width: 100%; max-width: 1100px; }
#quarto-document-content figure:has(img[src$="fig-rfid-apps-industry-applications-rollout-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 1100px; }
#quarto-document-content img[src$="fig-rfid-apps-labs-and-assessment-antenna-placement.svg"]:where(:scope, *) { width: 100%; max-width: 914px; }
#quarto-document-content figure:has(img[src$="fig-rfid-apps-labs-and-assessment-antenna-placement.svg"]):where(:scope, *) { --iot-figure-fit-width: 914px; }
#quarto-document-content img[src$="fig-rfid-apps-labs-and-assessment-inventory-trace.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-rfid-apps-labs-and-assessment-inventory-trace.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-rfid-apps-labs-and-assessment-read-zone.svg"]:where(:scope, *) { width: 100%; max-width: 1103px; }
#quarto-document-content figure:has(img[src$="fig-rfid-apps-labs-and-assessment-read-zone.svg"]):where(:scope, *) { --iot-figure-fit-width: 1103px; }
#quarto-document-content img[src$="fig-rfid-comprehensive-review-read-zone-loop.svg"]:where(:scope, *) { width: 100%; max-width: 544px; }
#quarto-document-content figure:has(img[src$="fig-rfid-comprehensive-review-read-zone-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 544px; }
#quarto-document-content img[src$="fig-rfid-comprehensive-review-security-boundary.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-rfid-comprehensive-review-security-boundary.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-rfid-design-and-deployment-portal-review.svg"]:where(:scope, *) { width: 100%; max-width: 869px; }
#quarto-document-content figure:has(img[src$="fig-rfid-design-and-deployment-portal-review.svg"]):where(:scope, *) { --iot-figure-fit-width: 869px; }
#quarto-document-content img[src$="fig-rfid-design-and-deployment-review-loop.svg"]:where(:scope, *) { width: 100%; max-width: 811px; }
#quarto-document-content figure:has(img[src$="fig-rfid-design-and-deployment-review-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 811px; }
#quarto-document-content img[src$="fig-rfid-frequency-bands-coupling.svg"]:where(:scope, *) { width: 100%; max-width: 981px; }
#quarto-document-content figure:has(img[src$="fig-rfid-frequency-bands-coupling.svg"]):where(:scope, *) { --iot-figure-fit-width: 981px; }
#quarto-document-content img[src$="fig-rfid-frequency-bands-overview.svg"]:where(:scope, *) { width: 100%; max-width: 981px; }
#quarto-document-content figure:has(img[src$="fig-rfid-frequency-bands-overview.svg"]):where(:scope, *) { --iot-figure-fit-width: 981px; }
#quarto-document-content img[src$="fig-rfid-security-and-privacy-layered-controls.svg"]:where(:scope, *) { width: 100%; max-width: 604px; }
#quarto-document-content figure:has(img[src$="fig-rfid-security-and-privacy-layered-controls.svg"]):where(:scope, *) { --iot-figure-fit-width: 604px; }
#quarto-document-content img[src$="fig-rfid-security-and-privacy-review-flow.svg"]:where(:scope, *) { width: 100%; max-width: 837px; }
#quarto-document-content figure:has(img[src$="fig-rfid-security-and-privacy-review-flow.svg"]):where(:scope, *) { --iot-figure-fit-width: 837px; }
#quarto-document-content img[src$="fig-rfid-standards-protocols-data-path.svg"]:where(:scope, *) { width: 100%; max-width: 1100px; }
#quarto-document-content figure:has(img[src$="fig-rfid-standards-protocols-data-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 1100px; }
#quarto-document-content img[src$="fig-rfid-standards-protocols-gen2-round.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="fig-rfid-standards-protocols-gen2-round.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="fig-rfid-standards-protocols-responsibility-map.svg"]:where(:scope, *) { width: 100%; max-width: 702px; }
#quarto-document-content figure:has(img[src$="fig-rfid-standards-protocols-responsibility-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 702px; }
#quarto-document-content img[src$="fig-rfid-standards-protocols-selection-lanes.svg"]:where(:scope, *) { width: 100%; max-width: 1040px; }
#quarto-document-content figure:has(img[src$="fig-rfid-standards-protocols-selection-lanes.svg"]):where(:scope, *) { --iot-figure-fit-width: 1040px; }
#quarto-document-content img[src$="fig-rfid-system-components-memory-map.svg"]:where(:scope, *) { width: 100%; max-width: 654px; }
#quarto-document-content figure:has(img[src$="fig-rfid-system-components-memory-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 654px; }
#quarto-document-content img[src$="fig-rfid-tag-types-selection-path.svg"]:where(:scope, *) { width: 100%; max-width: 780px; }
#quarto-document-content figure:has(img[src$="fig-rfid-tag-types-selection-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 780px; }
#quarto-document-content img[src$="fig-routing-fund-basics-hop-by-hop.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="fig-routing-fund-basics-hop-by-hop.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="fig-routing-fund-tables-lpm.svg"]:where(:scope, *) { width: 100%; max-width: 889px; }
#quarto-document-content figure:has(img[src$="fig-routing-fund-tables-lpm.svg"]):where(:scope, *) { --iot-figure-fit-width: 889px; }
#quarto-document-content img[src$="fig-routing-fund-ttl-hop-count.svg"]:where(:scope, *) { width: 100%; max-width: 978px; }
#quarto-document-content figure:has(img[src$="fig-routing-fund-ttl-hop-count.svg"]):where(:scope, *) { --iot-figure-fit-width: 978px; }
#quarto-document-content img[src$="fig-routing-fund-ttl-loop-expiry.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="fig-routing-fund-ttl-loop-expiry.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="fig-routing-lab-advanced-metric-compare.svg"]:where(:scope, *) { width: 100%; max-width: 772px; }
#quarto-document-content figure:has(img[src$="fig-routing-lab-advanced-metric-compare.svg"]):where(:scope, *) { --iot-figure-fit-width: 772px; }
#quarto-document-content img[src$="fig-routing-lab-fundamentals-traceroute-signals.svg"]:where(:scope, *) { width: 100%; max-width: 558px; }
#quarto-document-content figure:has(img[src$="fig-routing-lab-fundamentals-traceroute-signals.svg"]):where(:scope, *) { --iot-figure-fit-width: 558px; }
#quarto-document-content img[src$="fig-rpl-dag-dodag-parent-sequence.svg"]:where(:scope, *) { width: 100%; max-width: 565px; }
#quarto-document-content figure:has(img[src$="fig-rpl-dag-dodag-parent-sequence.svg"]):where(:scope, *) { --iot-figure-fit-width: 565px; }
#quarto-document-content img[src$="fig-rpl-dodag-construction-evidence.svg"]:where(:scope, *) { width: 100%; max-width: 924px; }
#quarto-document-content figure:has(img[src$="fig-rpl-dodag-construction-evidence.svg"]):where(:scope, *) { --iot-figure-fit-width: 924px; }
#quarto-document-content img[src$="fig-rpl-dodag-control-sequence.svg"]:where(:scope, *) { width: 100%; max-width: 889px; }
#quarto-document-content figure:has(img[src$="fig-rpl-dodag-control-sequence.svg"]):where(:scope, *) { --iot-figure-fit-width: 889px; }
#quarto-document-content img[src$="fig-rpl-fund-traffic-directions.svg"]:where(:scope, *) { width: 100%; max-width: 980px; }
#quarto-document-content figure:has(img[src$="fig-rpl-fund-traffic-directions.svg"]):where(:scope, *) { --iot-figure-fit-width: 980px; }
#quarto-document-content img[src$="fig-rpl-intro-traffic-evidence.svg"]:where(:scope, *) { width: 100%; max-width: 520px; }
#quarto-document-content figure:has(img[src$="fig-rpl-intro-traffic-evidence.svg"]):where(:scope, *) { --iot-figure-fit-width: 520px; }
#quarto-document-content img[src$="fig-rpl-message-flow-dao-modes.svg"]:where(:scope, *) { width: 100%; max-width: 917px; }
#quarto-document-content figure:has(img[src$="fig-rpl-message-flow-dao-modes.svg"]):where(:scope, *) { --iot-figure-fit-width: 917px; }
#quarto-document-content img[src$="fig-rpl-message-flow-directions.svg"]:where(:scope, *) { width: 100%; max-width: 809px; }
#quarto-document-content figure:has(img[src$="fig-rpl-message-flow-directions.svg"]):where(:scope, *) { --iot-figure-fit-width: 809px; }
#quarto-document-content img[src$="fig-rpl-message-flow-sequence.svg"]:where(:scope, *) { width: 100%; max-width: 944px; }
#quarto-document-content figure:has(img[src$="fig-rpl-message-flow-sequence.svg"]):where(:scope, *) { --iot-figure-fit-width: 944px; }
#quarto-document-content img[src$="fig-rpl-non-storing-route.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-rpl-non-storing-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-rpl-prod-review-evidence-gates.svg"]:where(:scope, *) { width: 100%; max-width: 606px; }
#quarto-document-content figure:has(img[src$="fig-rpl-prod-review-evidence-gates.svg"]):where(:scope, *) { --iot-figure-fit-width: 606px; }
#quarto-document-content img[src$="fig-rpl-prod-scenarios-mode-record.svg"]:where(:scope, *) { width: 100%; max-width: 640px; }
#quarto-document-content figure:has(img[src$="fig-rpl-prod-scenarios-mode-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 640px; }
#quarto-document-content img[src$="fig-rpl-rank-parent-choice.svg"]:where(:scope, *) { width: 100%; max-width: 565px; }
#quarto-document-content figure:has(img[src$="fig-rpl-rank-parent-choice.svg"]):where(:scope, *) { --iot-figure-fit-width: 565px; }
#quarto-document-content img[src$="fig-rpl-routing-modes-traffic.svg"]:where(:scope, *) { width: 100%; max-width: 904px; }
#quarto-document-content figure:has(img[src$="fig-rpl-routing-modes-traffic.svg"]):where(:scope, *) { --iot-figure-fit-width: 904px; }
#quarto-document-content img[src$="fig-rpl-storing-nonstoring-peer-path.svg"]:where(:scope, *) { width: 100%; max-width: 686px; }
#quarto-document-content figure:has(img[src$="fig-rpl-storing-nonstoring-peer-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 686px; }
#quarto-document-content img[src$="fig-rpl-trickle-cycle.svg"]:where(:scope, *) { width: 100%; max-width: 840px; }
#quarto-document-content figure:has(img[src$="fig-rpl-trickle-cycle.svg"]):where(:scope, *) { --iot-figure-fit-width: 840px; }
#quarto-document-content img[src$="fig-rpl-trickle-states.svg"]:where(:scope, *) { width: 100%; max-width: 917px; }
#quarto-document-content figure:has(img[src$="fig-rpl-trickle-states.svg"]):where(:scope, *) { --iot-figure-fit-width: 917px; }
#quarto-document-content img[src$="fig-rpl-worked-parent-choice.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="fig-rpl-worked-parent-choice.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="fig-rpl-worked-topology.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="fig-rpl-worked-topology.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="fig-rssi-motion-comparison.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-rssi-motion-comparison.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-s2aas-considerations-operations-loop.svg"]:where(:scope, *) { width: 100%; max-width: 761px; }
#quarto-document-content figure:has(img[src$="fig-s2aas-considerations-operations-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 761px; }
#quarto-document-content img[src$="fig-s2aas-considerations-risk-matrix-records.svg"]:where(:scope, *) { width: 100%; max-width: 800px; }
#quarto-document-content figure:has(img[src$="fig-s2aas-considerations-risk-matrix-records.svg"]):where(:scope, *) { --iot-figure-fit-width: 800px; }
#quarto-document-content img[src$="fig-s2aas-core-subscription-lifecycle.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="fig-s2aas-core-subscription-lifecycle.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="fig-s2aas-deployment-model-comparison.svg"]:where(:scope, *) { width: 100%; max-width: 866px; }
#quarto-document-content figure:has(img[src$="fig-s2aas-deployment-model-comparison.svg"]):where(:scope, *) { --iot-figure-fit-width: 866px; }
#quarto-document-content img[src$="fig-s2aas-deployment-placement-map.svg"]:where(:scope, *) { width: 100%; max-width: 898px; }
#quarto-document-content figure:has(img[src$="fig-s2aas-deployment-placement-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 898px; }
#quarto-document-content img[src$="fig-s2aas-fundamentals-governance-loop.svg"]:where(:scope, *) { width: 100%; max-width: 988px; }
#quarto-document-content figure:has(img[src$="fig-s2aas-fundamentals-governance-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 988px; }
#quarto-document-content img[src$="fig-s2aas-fundamentals-service-stack.svg"]:where(:scope, *) { width: 100%; max-width: 871px; }
#quarto-document-content figure:has(img[src$="fig-s2aas-fundamentals-service-stack.svg"]):where(:scope, *) { --iot-figure-fit-width: 871px; }
#quarto-document-content img[src$="fig-s2aas-multilayer-control-plane.svg"]:where(:scope, *) { width: 100%; max-width: 873px; }
#quarto-document-content figure:has(img[src$="fig-s2aas-multilayer-control-plane.svg"]):where(:scope, *) { --iot-figure-fit-width: 873px; }
#quarto-document-content img[src$="fig-s2aas-multilayer-handoff-flow-records.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="fig-s2aas-multilayer-handoff-flow-records.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="fig-s2aas-multilayer-layer-contracts-records.svg"]:where(:scope, *) { width: 100%; max-width: 959px; }
#quarto-document-content figure:has(img[src$="fig-s2aas-multilayer-layer-contracts-records.svg"]):where(:scope, *) { --iot-figure-fit-width: 959px; }
#quarto-document-content img[src$="fig-s2aas-ownership-roles.svg"]:where(:scope, *) { width: 100%; max-width: 823px; }
#quarto-document-content figure:has(img[src$="fig-s2aas-ownership-roles.svg"]):where(:scope, *) { --iot-figure-fit-width: 823px; }
#quarto-document-content img[src$="fig-s2aas-patterns-capacity-guardrails.svg"]:where(:scope, *) { width: 100%; max-width: 1094px; }
#quarto-document-content figure:has(img[src$="fig-s2aas-patterns-capacity-guardrails.svg"]):where(:scope, *) { --iot-figure-fit-width: 1094px; }
#quarto-document-content img[src$="fig-s2aas-patterns-pattern-map-records.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-s2aas-patterns-pattern-map-records.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-s2aas-rights-framework.svg"]:where(:scope, *) { width: 100%; max-width: 480px; }
#quarto-document-content figure:has(img[src$="fig-s2aas-rights-framework.svg"]):where(:scope, *) { --iot-figure-fit-width: 480px; }
#quarto-document-content img[src$="fig-s2aas-value-challenge-matrix-records.svg"]:where(:scope, *) { width: 100%; max-width: 985px; }
#quarto-document-content figure:has(img[src$="fig-s2aas-value-challenge-matrix-records.svg"]):where(:scope, *) { --iot-figure-fit-width: 985px; }
#quarto-document-content img[src$="fig-s2aas-value-stakeholder-map-records.svg"]:where(:scope, *) { width: 100%; max-width: 720px; }
#quarto-document-content figure:has(img[src$="fig-s2aas-value-stakeholder-map-records.svg"]):where(:scope, *) { --iot-figure-fit-width: 720px; }
#quarto-document-content img[src$="fig-s2aas-value-trust-gates.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="fig-s2aas-value-trust-gates.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="fig-safeguards-protection-map.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-safeguards-protection-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-safeguards-protection-mccumber-cube.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-safeguards-protection-mccumber-cube.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-sca-cpa-evaluation-pipeline.svg"]:where(:scope, *) { width: 100%; max-width: 640px; }
#quarto-document-content figure:has(img[src$="fig-sca-cpa-evaluation-pipeline.svg"]):where(:scope, *) { --iot-figure-fit-width: 640px; }
#quarto-document-content img[src$="fig-sca-spa-dpa-comparison.svg"]:where(:scope, *) { width: 100%; max-width: 640px; }
#quarto-document-content figure:has(img[src$="fig-sca-spa-dpa-comparison.svg"]):where(:scope, *) { --iot-figure-fit-width: 640px; }
#quarto-document-content img[src$="fig-scaling-frequency-multicore-timeline.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="fig-scaling-frequency-multicore-timeline.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="fig-sdn-anomaly-detection-confidence-gate.svg"]:where(:scope, *) { width: 100%; max-width: 1029px; }
#quarto-document-content figure:has(img[src$="fig-sdn-anomaly-detection-confidence-gate.svg"]):where(:scope, *) { --iot-figure-fit-width: 1029px; }
#quarto-document-content img[src$="fig-sdn-anomaly-detection-signal-sources.svg"]:where(:scope, *) { width: 100%; max-width: 1029px; }
#quarto-document-content figure:has(img[src$="fig-sdn-anomaly-detection-signal-sources.svg"]):where(:scope, *) { --iot-figure-fit-width: 1029px; }
#quarto-document-content img[src$="fig-sdn-api-contract.svg"]:where(:scope, *) { width: 100%; max-width: 970px; }
#quarto-document-content figure:has(img[src$="fig-sdn-api-contract.svg"]):where(:scope, *) { --iot-figure-fit-width: 970px; }
#quarto-document-content img[src$="fig-sdn-api-evidence-loop.svg"]:where(:scope, *) { width: 100%; max-width: 1108px; }
#quarto-document-content figure:has(img[src$="fig-sdn-api-evidence-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 1108px; }
#quarto-document-content img[src$="fig-sdn-api-ha-route.svg"]:where(:scope, *) { width: 100%; max-width: 1029px; }
#quarto-document-content figure:has(img[src$="fig-sdn-api-ha-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 1029px; }
#quarto-document-content img[src$="fig-sdn-arch-availability-fallback.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="fig-sdn-arch-availability-fallback.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="fig-sdn-arch-iot-fit.svg"]:where(:scope, *) { width: 100%; max-width: 900px; }
#quarto-document-content figure:has(img[src$="fig-sdn-arch-iot-fit.svg"]):where(:scope, *) { --iot-figure-fit-width: 900px; }
#quarto-document-content img[src$="fig-sdn-arch-route.svg"]:where(:scope, *) { width: 100%; max-width: 1029px; }
#quarto-document-content figure:has(img[src$="fig-sdn-arch-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 1029px; }
#quarto-document-content img[src$="fig-sdn-controller-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1100px; }
#quarto-document-content figure:has(img[src$="fig-sdn-controller-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1100px; }
#quarto-document-content img[src$="fig-sdn-controller-installation-strategy.svg"]:where(:scope, *) { width: 100%; max-width: 900px; }
#quarto-document-content figure:has(img[src$="fig-sdn-controller-installation-strategy.svg"]):where(:scope, *) { --iot-figure-fit-width: 900px; }
#quarto-document-content img[src$="fig-sdn-controller-route.svg"]:where(:scope, *) { width: 100%; max-width: 1029px; }
#quarto-document-content figure:has(img[src$="fig-sdn-controller-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 1029px; }
#quarto-document-content img[src$="fig-sdn-controller-selection-evidence-loop.svg"]:where(:scope, *) { width: 100%; max-width: 1029px; }
#quarto-document-content figure:has(img[src$="fig-sdn-controller-selection-evidence-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 1029px; }
#quarto-document-content img[src$="fig-sdn-controller-selection-interface-fit.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="fig-sdn-controller-selection-interface-fit.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="fig-sdn-iot-applications-constrained-policy.svg"]:where(:scope, *) { width: 100%; max-width: 736px; }
#quarto-document-content figure:has(img[src$="fig-sdn-iot-applications-constrained-policy.svg"]):where(:scope, *) { --iot-figure-fit-width: 736px; }
#quarto-document-content img[src$="fig-sdn-iot-applications-evidence-loop.svg"]:where(:scope, *) { width: 100%; max-width: 794px; }
#quarto-document-content figure:has(img[src$="fig-sdn-iot-applications-evidence-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 794px; }
#quarto-document-content img[src$="fig-sdn-iot-applications-fit-map.svg"]:where(:scope, *) { width: 100%; max-width: 904px; }
#quarto-document-content figure:has(img[src$="fig-sdn-iot-applications-fit-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 904px; }
#quarto-document-content img[src$="fig-sdn-iot-applications-lvap-handoff.svg"]:where(:scope, *) { width: 100%; max-width: 662px; }
#quarto-document-content figure:has(img[src$="fig-sdn-iot-applications-lvap-handoff.svg"]):where(:scope, *) { --iot-figure-fit-width: 662px; }
#quarto-document-content img[src$="fig-sdn-iot-applications-mobiflow-prediction.svg"]:where(:scope, *) { width: 100%; max-width: 640px; }
#quarto-document-content figure:has(img[src$="fig-sdn-iot-applications-mobiflow-prediction.svg"]):where(:scope, *) { --iot-figure-fit-width: 640px; }
#quarto-document-content img[src$="fig-sdn-iot-applications-sdnwise-node-pipeline.svg"]:where(:scope, *) { width: 100%; max-width: 640px; }
#quarto-document-content figure:has(img[src$="fig-sdn-iot-applications-sdnwise-node-pipeline.svg"]):where(:scope, *) { --iot-figure-fit-width: 640px; }
#quarto-document-content img[src$="fig-sdn-iot-applications-softwsn-control-surface.svg"]:where(:scope, *) { width: 100%; max-width: 640px; }
#quarto-document-content figure:has(img[src$="fig-sdn-iot-applications-softwsn-control-surface.svg"]):where(:scope, *) { --iot-figure-fit-width: 640px; }
#quarto-document-content img[src$="fig-sdn-of-openflow-protocol-check-route.svg"]:where(:scope, *) { width: 100%; max-width: 951px; }
#quarto-document-content figure:has(img[src$="fig-sdn-of-openflow-protocol-check-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 951px; }
#quarto-document-content img[src$="fig-sdn-of-openflow-protocol-pipeline.svg"]:where(:scope, *) { width: 100%; max-width: 1029px; }
#quarto-document-content figure:has(img[src$="fig-sdn-of-openflow-protocol-pipeline.svg"]):where(:scope, *) { --iot-figure-fit-width: 1029px; }
#quarto-document-content img[src$="fig-sdn-of-openflow-protocol-proof-loop.svg"]:where(:scope, *) { width: 100%; max-width: 932px; }
#quarto-document-content figure:has(img[src$="fig-sdn-of-openflow-protocol-proof-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 932px; }
#quarto-document-content img[src$="fig-sdn-of-openflow-protocol-reactive-loop.svg"]:where(:scope, *) { width: 100%; max-width: 932px; }
#quarto-document-content figure:has(img[src$="fig-sdn-of-openflow-protocol-reactive-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 932px; }
#quarto-document-content img[src$="fig-sdn-of-openflow-protocol-security-failure.svg"]:where(:scope, *) { width: 100%; max-width: 1011px; }
#quarto-document-content figure:has(img[src$="fig-sdn-of-openflow-protocol-security-failure.svg"]):where(:scope, *) { --iot-figure-fit-width: 1011px; }
#quarto-document-content img[src$="fig-sdn-of-openflow-protocol-table-miss.svg"]:where(:scope, *) { width: 100%; max-width: 993px; }
#quarto-document-content figure:has(img[src$="fig-sdn-of-openflow-protocol-table-miss.svg"]):where(:scope, *) { --iot-figure-fit-width: 993px; }
#quarto-document-content img[src$="fig-sdn-openflow-challenges-capability-drift.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-sdn-openflow-challenges-capability-drift.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-sdn-openflow-challenges-check-route.svg"]:where(:scope, *) { width: 100%; max-width: 1011px; }
#quarto-document-content figure:has(img[src$="fig-sdn-openflow-challenges-check-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 1011px; }
#quarto-document-content img[src$="fig-sdn-openflow-challenges-constrained-iot.svg"]:where(:scope, *) { width: 100%; max-width: 777px; }
#quarto-document-content figure:has(img[src$="fig-sdn-openflow-challenges-constrained-iot.svg"]):where(:scope, *) { --iot-figure-fit-width: 777px; }
#quarto-document-content img[src$="fig-sdn-openflow-challenges-controller-placement.svg"]:where(:scope, *) { width: 100%; max-width: 1011px; }
#quarto-document-content figure:has(img[src$="fig-sdn-openflow-challenges-controller-placement.svg"]):where(:scope, *) { --iot-figure-fit-width: 1011px; }
#quarto-document-content img[src$="fig-sdn-openflow-challenges-rule-state.svg"]:where(:scope, *) { width: 100%; max-width: 1011px; }
#quarto-document-content figure:has(img[src$="fig-sdn-openflow-challenges-rule-state.svg"]):where(:scope, *) { --iot-figure-fit-width: 1011px; }
#quarto-document-content img[src$="fig-sdn-openflow-challenges-security.svg"]:where(:scope, *) { width: 100%; max-width: 1011px; }
#quarto-document-content figure:has(img[src$="fig-sdn-openflow-challenges-security.svg"]):where(:scope, *) { --iot-figure-fit-width: 1011px; }
#quarto-document-content img[src$="fig-sdn-openflow-challenges-table-miss.svg"]:where(:scope, *) { width: 100%; max-width: 1011px; }
#quarto-document-content figure:has(img[src$="fig-sdn-openflow-challenges-table-miss.svg"]):where(:scope, *) { --iot-figure-fit-width: 1011px; }
#quarto-document-content img[src$="fig-sdn-prod-framework-control-placement.svg"]:where(:scope, *) { width: 100%; max-width: 793px; }
#quarto-document-content figure:has(img[src$="fig-sdn-prod-framework-control-placement.svg"]):where(:scope, *) { --iot-figure-fit-width: 793px; }
#quarto-document-content img[src$="fig-sdn-prod-framework-controller-model.svg"]:where(:scope, *) { width: 100%; max-width: 900px; }
#quarto-document-content figure:has(img[src$="fig-sdn-prod-framework-controller-model.svg"]):where(:scope, *) { --iot-figure-fit-width: 900px; }
#quarto-document-content img[src$="fig-sdn-prod-framework-observability.svg"]:where(:scope, *) { width: 100%; max-width: 929px; }
#quarto-document-content figure:has(img[src$="fig-sdn-prod-framework-observability.svg"]):where(:scope, *) { --iot-figure-fit-width: 929px; }
#quarto-document-content img[src$="fig-sdn-prod-framework-pillars.svg"]:where(:scope, *) { width: 100%; max-width: 847px; }
#quarto-document-content figure:has(img[src$="fig-sdn-prod-framework-pillars.svg"]):where(:scope, *) { --iot-figure-fit-width: 847px; }
#quarto-document-content img[src$="fig-sdn-prod-framework-resilience.svg"]:where(:scope, *) { width: 100%; max-width: 929px; }
#quarto-document-content figure:has(img[src$="fig-sdn-prod-framework-resilience.svg"]):where(:scope, *) { --iot-figure-fit-width: 929px; }
#quarto-document-content img[src$="fig-sdn-prod-framework-route.svg"]:where(:scope, *) { width: 100%; max-width: 832px; }
#quarto-document-content figure:has(img[src$="fig-sdn-prod-framework-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 832px; }
#quarto-document-content img[src$="fig-sdn-prod-framework-security-boundary.svg"]:where(:scope, *) { width: 100%; max-width: 929px; }
#quarto-document-content figure:has(img[src$="fig-sdn-prod-framework-security-boundary.svg"]):where(:scope, *) { --iot-figure-fit-width: 929px; }
#quarto-document-content img[src$="fig-secure-comms-boundary-map.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="fig-secure-comms-boundary-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="fig-secure-comms-protocol-fit.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="fig-secure-comms-protocol-fit.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="fig-secure-data-iot-protocols-layers.svg"]:where(:scope, *) { width: 100%; max-width: 1032px; }
#quarto-document-content figure:has(img[src$="fig-secure-data-iot-protocols-layers.svg"]):where(:scope, *) { --iot-figure-fit-width: 1032px; }
#quarto-document-content img[src$="fig-secure-data-iot-protocols-review-record.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="fig-secure-data-iot-protocols-review-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="fig-sensor-fusion-patterns.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-sensor-fusion-patterns.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-sensor-pipeline-overview-adc.svg"]:where(:scope, *) { width: 100%; max-width: 654px; }
#quarto-document-content figure:has(img[src$="fig-sensor-pipeline-overview-adc.svg"]):where(:scope, *) { --iot-figure-fit-width: 654px; }
#quarto-document-content img[src$="fig-sensor-pipeline-overview-conditioning.svg"]:where(:scope, *) { width: 100%; max-width: 592px; }
#quarto-document-content figure:has(img[src$="fig-sensor-pipeline-overview-conditioning.svg"]):where(:scope, *) { --iot-figure-fit-width: 592px; }
#quarto-document-content img[src$="fig-sensor-pipeline-overview-transduction.svg"]:where(:scope, *) { width: 100%; max-width: 676px; }
#quarto-document-content figure:has(img[src$="fig-sensor-pipeline-overview-transduction.svg"]):where(:scope, *) { --iot-figure-fit-width: 676px; }
#quarto-document-content img[src$="fig-sensor-pipeline-processing-calibration.svg"]:where(:scope, *) { width: 100%; max-width: 655px; }
#quarto-document-content figure:has(img[src$="fig-sensor-pipeline-processing-calibration.svg"]):where(:scope, *) { --iot-figure-fit-width: 655px; }
#quarto-document-content img[src$="fig-sensor-pipeline-processing-packet.svg"]:where(:scope, *) { width: 100%; max-width: 617px; }
#quarto-document-content figure:has(img[src$="fig-sensor-pipeline-processing-packet.svg"]):where(:scope, *) { --iot-figure-fit-width: 617px; }
#quarto-document-content img[src$="fig-sensor-pipeline-processing-stages.svg"]:where(:scope, *) { width: 100%; max-width: 659px; }
#quarto-document-content figure:has(img[src$="fig-sensor-pipeline-processing-stages.svg"]):where(:scope, *) { --iot-figure-fit-width: 659px; }
#quarto-document-content img[src$="fig-sensor-pipeline-transmission-transaction.svg"]:where(:scope, *) { width: 100%; max-width: 788px; }
#quarto-document-content figure:has(img[src$="fig-sensor-pipeline-transmission-transaction.svg"]):where(:scope, *) { --iot-figure-fit-width: 788px; }
#quarto-document-content img[src$="fig-sensor-prod-quiz-record.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-sensor-prod-quiz-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-sensor-scaling-to-actuation.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-sensor-scaling-to-actuation.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-sensor-to-network-pipeline-map.svg"]:where(:scope, *) { width: 100%; max-width: 818px; }
#quarto-document-content figure:has(img[src$="fig-sensor-to-network-pipeline-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 818px; }
#quarto-document-content img[src$="fig-sigfox-deployment-plan.svg"]:where(:scope, *) { width: 100%; max-width: 760px; }
#quarto-document-content figure:has(img[src$="fig-sigfox-deployment-plan.svg"]):where(:scope, *) { --iot-figure-fit-width: 760px; }
#quarto-document-content img[src$="fig-sigfox-deployment-provisioning.svg"]:where(:scope, *) { width: 100%; max-width: 797px; }
#quarto-document-content figure:has(img[src$="fig-sigfox-deployment-provisioning.svg"]):where(:scope, *) { --iot-figure-fit-width: 797px; }
#quarto-document-content img[src$="fig-sigfox-overview-decision.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-sigfox-overview-decision.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-sigfox-overview-fit.svg"]:where(:scope, *) { width: 100%; max-width: 1016px; }
#quarto-document-content figure:has(img[src$="fig-sigfox-overview-fit.svg"]):where(:scope, *) { --iot-figure-fit-width: 1016px; }
#quarto-document-content img[src$="fig-sigfox-performance-envelope.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-sigfox-performance-envelope.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-signal-processing-adc-fundamentals-nyquist.svg"]:where(:scope, *) { width: 100%; max-width: 622px; }
#quarto-document-content figure:has(img[src$="fig-signal-processing-adc-fundamentals-nyquist.svg"]):where(:scope, *) { --iot-figure-fit-width: 622px; }
#quarto-document-content img[src$="fig-signal-processing-essentials-chain.svg"]:where(:scope, *) { width: 100%; max-width: 720px; }
#quarto-document-content figure:has(img[src$="fig-signal-processing-essentials-chain.svg"]):where(:scope, *) { --iot-figure-fit-width: 720px; }
#quarto-document-content img[src$="fig-signal-processing-essentials-decisions.svg"]:where(:scope, *) { width: 100%; max-width: 823px; }
#quarto-document-content figure:has(img[src$="fig-signal-processing-essentials-decisions.svg"]):where(:scope, *) { --iot-figure-fit-width: 823px; }
#quarto-document-content img[src$="fig-signal-processing-sensor-dynamics-review.svg"]:where(:scope, *) { width: 100%; max-width: 488px; }
#quarto-document-content figure:has(img[src$="fig-signal-processing-sensor-dynamics-review.svg"]):where(:scope, *) { --iot-figure-fit-width: 488px; }
#quarto-document-content img[src$="fig-signal-processing-voice-compression-companding.svg"]:where(:scope, *) { width: 100%; max-width: 823px; }
#quarto-document-content figure:has(img[src$="fig-signal-processing-voice-compression-companding.svg"]):where(:scope, *) { --iot-figure-fit-width: 823px; }
#quarto-document-content img[src$="fig-sim-hardware-transfer-gate.svg"]:where(:scope, *) { width: 100%; max-width: 395px; }
#quarto-document-content figure:has(img[src$="fig-sim-hardware-transfer-gate.svg"]):where(:scope, *) { --iot-figure-fit-width: 395px; }
#quarto-document-content img[src$="fig-sim-vs-hardware-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 876px; }
#quarto-document-content figure:has(img[src$="fig-sim-vs-hardware-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 876px; }
#quarto-document-content img[src$="fig-simulating-fundamentals-review-record.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-simulating-fundamentals-review-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-simulating-online-tools-evidence-path.svg"]:where(:scope, *) { width: 100%; max-width: 800px; }
#quarto-document-content figure:has(img[src$="fig-simulating-online-tools-evidence-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 800px; }
#quarto-document-content img[src$="fig-simulating-platform-emulation-evidence-path.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="fig-simulating-platform-emulation-evidence-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="fig-smart-city-four-tier-architecture.svg"]:where(:scope, *) { width: 100%; max-width: 698px; }
#quarto-document-content figure:has(img[src$="fig-smart-city-four-tier-architecture.svg"]):where(:scope, *) { --iot-figure-fit-width: 698px; }
#quarto-document-content img[src$="fig-smart-home-energy-savings-hierarchy.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="fig-smart-home-energy-savings-hierarchy.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="fig-soa-fundamentals-choice-map.svg"]:where(:scope, *) { width: 100%; max-width: 904px; }
#quarto-document-content figure:has(img[src$="fig-soa-fundamentals-choice-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 904px; }
#quarto-document-content img[src$="fig-soa-resilience-circuit-states.svg"]:where(:scope, *) { width: 100%; max-width: 533px; }
#quarto-document-content figure:has(img[src$="fig-soa-resilience-circuit-states.svg"]):where(:scope, *) { --iot-figure-fit-width: 533px; }
#quarto-document-content img[src$="fig-soc-architecture-accelerator-route.svg"]:where(:scope, *) { width: 100%; max-width: 1013px; }
#quarto-document-content figure:has(img[src$="fig-soc-architecture-accelerator-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 1013px; }
#quarto-document-content img[src$="fig-soc-architecture-data-paths.svg"]:where(:scope, *) { width: 100%; max-width: 901px; }
#quarto-document-content figure:has(img[src$="fig-soc-architecture-data-paths.svg"]):where(:scope, *) { --iot-figure-fit-width: 901px; }
#quarto-document-content img[src$="fig-soc-architecture-memory-security.svg"]:where(:scope, *) { width: 100%; max-width: 1013px; }
#quarto-document-content figure:has(img[src$="fig-soc-architecture-memory-security.svg"]):where(:scope, *) { --iot-figure-fit-width: 1013px; }
#quarto-document-content img[src$="fig-soc-architecture-power-islands.svg"]:where(:scope, *) { width: 100%; max-width: 935px; }
#quarto-document-content figure:has(img[src$="fig-soc-architecture-power-islands.svg"]):where(:scope, *) { --iot-figure-fit-width: 935px; }
#quarto-document-content img[src$="fig-soc-architecture-radio-boundary.svg"]:where(:scope, *) { width: 100%; max-width: 869px; }
#quarto-document-content figure:has(img[src$="fig-soc-architecture-radio-boundary.svg"]):where(:scope, *) { --iot-figure-fit-width: 869px; }
#quarto-document-content img[src$="fig-soc-architecture-review-route.svg"]:where(:scope, *) { width: 100%; max-width: 935px; }
#quarto-document-content figure:has(img[src$="fig-soc-architecture-review-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 935px; }
#quarto-document-content img[src$="fig-soc-architecture-selection-record.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="fig-soc-architecture-selection-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="fig-software-optimization-levers.svg"]:where(:scope, *) { width: 100%; max-width: 565px; }
#quarto-document-content figure:has(img[src$="fig-software-optimization-levers.svg"]):where(:scope, *) { --iot-figure-fit-width: 565px; }
#quarto-document-content img[src$="fig-software-optimization-loop.svg"]:where(:scope, *) { width: 100%; max-width: 460px; }
#quarto-document-content figure:has(img[src$="fig-software-optimization-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 460px; }
#quarto-document-content img[src$="fig-software-optimization-sleep.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="fig-software-optimization-sleep.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="fig-spec-sheet-values-ladder.svg"]:where(:scope, *) { width: 100%; max-width: 420px; }
#quarto-document-content figure:has(img[src$="fig-spec-sheet-values-ladder.svg"]):where(:scope, *) { --iot-figure-fit-width: 420px; }
#quarto-document-content img[src$="fig-state-machine-fundamentals-events-timers.svg"]:where(:scope, *) { width: 100%; max-width: 929px; }
#quarto-document-content figure:has(img[src$="fig-state-machine-fundamentals-events-timers.svg"]):where(:scope, *) { --iot-figure-fit-width: 929px; }
#quarto-document-content img[src$="fig-state-machine-fundamentals-transition-table.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="fig-state-machine-fundamentals-transition-table.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="fig-state-machines-iot-placement.svg"]:where(:scope, *) { width: 100%; max-width: 800px; }
#quarto-document-content figure:has(img[src$="fig-state-machines-iot-placement.svg"]):where(:scope, *) { --iot-figure-fit-width: 800px; }
#quarto-document-content img[src$="fig-step-charging-loss-comparison.svg"]:where(:scope, *) { width: 100%; max-width: 619px; }
#quarto-document-content figure:has(img[src$="fig-step-charging-loss-comparison.svg"]):where(:scope, *) { --iot-figure-fit-width: 619px; }
#quarto-document-content img[src$="fig-subthreshold-leakage-slope.svg"]:where(:scope, *) { width: 100%; max-width: 738px; }
#quarto-document-content figure:has(img[src$="fig-subthreshold-leakage-slope.svg"]):where(:scope, *) { --iot-figure-fit-width: 738px; }
#quarto-document-content img[src$="fig-sw-platforms-application-frameworks-boundary.svg"]:where(:scope, *) { width: 100%; max-width: 933px; }
#quarto-document-content figure:has(img[src$="fig-sw-platforms-application-frameworks-boundary.svg"]):where(:scope, *) { --iot-figure-fit-width: 933px; }
#quarto-document-content img[src$="fig-sw-platforms-application-frameworks-evidence-matrix.svg"]:where(:scope, *) { width: 100%; max-width: 811px; }
#quarto-document-content figure:has(img[src$="fig-sw-platforms-application-frameworks-evidence-matrix.svg"]):where(:scope, *) { --iot-figure-fit-width: 811px; }
#quarto-document-content img[src$="fig-sw-platforms-application-frameworks-roles.svg"]:where(:scope, *) { width: 100%; max-width: 797px; }
#quarto-document-content figure:has(img[src$="fig-sw-platforms-application-frameworks-roles.svg"]):where(:scope, *) { --iot-figure-fit-width: 797px; }
#quarto-document-content img[src$="fig-sw-platforms-cloud-evidence-matrix.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="fig-sw-platforms-cloud-evidence-matrix.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="fig-sw-platforms-cloud-review-record.svg"]:where(:scope, *) { width: 100%; max-width: 839px; }
#quarto-document-content figure:has(img[src$="fig-sw-platforms-cloud-review-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 839px; }
#quarto-document-content img[src$="fig-sw-platforms-cloud-route.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-sw-platforms-cloud-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-sw-platforms-device-management-rollout-boundary.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-sw-platforms-device-management-rollout-boundary.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-sw-platforms-device-management-route.svg"]:where(:scope, *) { width: 100%; max-width: 760px; }
#quarto-document-content figure:has(img[src$="fig-sw-platforms-device-management-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 760px; }
#quarto-document-content img[src$="fig-sw-platforms-edge-evidence-matrix.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-sw-platforms-edge-evidence-matrix.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-sw-platforms-edge-review-record.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-sw-platforms-edge-review-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-tcp-rst-udp-flood-defense.svg"]:where(:scope, *) { width: 100%; max-width: 640px; }
#quarto-document-content figure:has(img[src$="fig-tcp-rst-udp-flood-defense.svg"]):where(:scope, *) { --iot-figure-fit-width: 640px; }
#quarto-document-content img[src$="fig-tcp-syn-backlog-defense.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-tcp-syn-backlog-defense.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-tcpip-ownership-encapsulation.svg"]:where(:scope, *) { width: 100%; max-width: 565px; }
#quarto-document-content figure:has(img[src$="fig-tcpip-ownership-encapsulation.svg"]):where(:scope, *) { --iot-figure-fit-width: 565px; }
#quarto-document-content img[src$="fig-testing-environmental-review-record.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="fig-testing-environmental-review-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="fig-testing-fundamentals-evidence-pyramid.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="fig-testing-fundamentals-evidence-pyramid.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="fig-testing-integration-review-map.svg"]:where(:scope, *) { width: 100%; max-width: 1086px; }
#quarto-document-content figure:has(img[src$="fig-testing-integration-review-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 1086px; }
#quarto-document-content img[src$="fig-testing-pyramid-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="fig-testing-pyramid-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="fig-testing-security-evidence-route.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="fig-testing-security-evidence-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="fig-testing-security-review-record.svg"]:where(:scope, *) { width: 100%; max-width: 889px; }
#quarto-document-content figure:has(img[src$="fig-testing-security-review-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 889px; }
#quarto-document-content img[src$="fig-testing-unit-tests-evidence-boundary.svg"]:where(:scope, *) { width: 100%; max-width: 1100px; }
#quarto-document-content figure:has(img[src$="fig-testing-unit-tests-evidence-boundary.svg"]):where(:scope, *) { --iot-figure-fit-width: 1100px; }
#quarto-document-content img[src$="fig-testing-unit-tests-review-record.svg"]:where(:scope, *) { width: 100%; max-width: 900px; }
#quarto-document-content figure:has(img[src$="fig-testing-unit-tests-review-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 900px; }
#quarto-document-content img[src$="fig-testing-validation-evidence-route.svg"]:where(:scope, *) { width: 100%; max-width: 512px; }
#quarto-document-content figure:has(img[src$="fig-testing-validation-evidence-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 512px; }
#quarto-document-content img[src$="fig-text-encoding-pipeline.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="fig-text-encoding-pipeline.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="fig-threat-asset-matrix-outages-failures.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="fig-threat-asset-matrix-outages-failures.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="fig-threat-impact-consequence-scale.svg"]:where(:scope, *) { width: 100%; max-width: 909px; }
#quarto-document-content figure:has(img[src$="fig-threat-impact-consequence-scale.svg"]):where(:scope, *) { --iot-figure-fit-width: 909px; }
#quarto-document-content img[src$="fig-threats-attack-scenarios-calibration-tampering.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-threats-attack-scenarios-calibration-tampering.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-threats-attack-scenarios-review-loop.svg"]:where(:scope, *) { width: 100%; max-width: 760px; }
#quarto-document-content figure:has(img[src$="fig-threats-attack-scenarios-review-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 760px; }
#quarto-document-content img[src$="fig-threats-introduction-control-evidence-map.svg"]:where(:scope, *) { width: 100%; max-width: 785px; }
#quarto-document-content figure:has(img[src$="fig-threats-introduction-control-evidence-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 785px; }
#quarto-document-content img[src$="fig-threats-introduction-review-lens.svg"]:where(:scope, *) { width: 100%; max-width: 600px; }
#quarto-document-content figure:has(img[src$="fig-threats-introduction-review-lens.svg"]):where(:scope, *) { --iot-figure-fit-width: 600px; }
#quarto-document-content img[src$="fig-threats-owasp-top10-evidence-workflow.svg"]:where(:scope, *) { width: 100%; max-width: 914px; }
#quarto-document-content figure:has(img[src$="fig-threats-owasp-top10-evidence-workflow.svg"]):where(:scope, *) { --iot-figure-fit-width: 914px; }
#quarto-document-content img[src$="fig-threats-stride-framework-record.svg"]:where(:scope, *) { width: 100%; max-width: 1054px; }
#quarto-document-content figure:has(img[src$="fig-threats-stride-framework-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 1054px; }
#quarto-document-content img[src$="fig-time-series-queries-access-path.svg"]:where(:scope, *) { width: 100%; max-width: 669px; }
#quarto-document-content figure:has(img[src$="fig-time-series-queries-access-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 669px; }
#quarto-document-content img[src$="fig-time-series-queries-rollup-evidence.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="fig-time-series-queries-rollup-evidence.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="fig-topologies-analysis-decision-record.svg"]:where(:scope, *) { width: 100%; max-width: 993px; }
#quarto-document-content figure:has(img[src$="fig-topologies-analysis-decision-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 993px; }
#quarto-document-content img[src$="fig-topologies-analysis-failure-domains.svg"]:where(:scope, *) { width: 100%; max-width: 684px; }
#quarto-document-content figure:has(img[src$="fig-topologies-analysis-failure-domains.svg"]):where(:scope, *) { --iot-figure-fit-width: 684px; }
#quarto-document-content img[src$="fig-topologies-analysis-metrics.svg"]:where(:scope, *) { width: 100%; max-width: 1029px; }
#quarto-document-content figure:has(img[src$="fig-topologies-analysis-metrics.svg"]):where(:scope, *) { --iot-figure-fit-width: 1029px; }
#quarto-document-content img[src$="fig-topologies-analysis-route.svg"]:where(:scope, *) { width: 100%; max-width: 1029px; }
#quarto-document-content figure:has(img[src$="fig-topologies-analysis-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 1029px; }
#quarto-document-content img[src$="fig-topologies-failures-misconceptions.svg"]:where(:scope, *) { width: 100%; max-width: 889px; }
#quarto-document-content figure:has(img[src$="fig-topologies-failures-misconceptions.svg"]):where(:scope, *) { --iot-figure-fit-width: 889px; }
#quarto-document-content img[src$="fig-topologies-failures-recovery.svg"]:where(:scope, *) { width: 100%; max-width: 914px; }
#quarto-document-content figure:has(img[src$="fig-topologies-failures-recovery.svg"]):where(:scope, *) { --iot-figure-fit-width: 914px; }
#quarto-document-content img[src$="fig-topologies-failures-resilience.svg"]:where(:scope, *) { width: 100%; max-width: 966px; }
#quarto-document-content figure:has(img[src$="fig-topologies-failures-resilience.svg"]):where(:scope, *) { --iot-figure-fit-width: 966px; }
#quarto-document-content img[src$="fig-topologies-failures-route.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="fig-topologies-failures-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="fig-topologies-selection-gates.svg"]:where(:scope, *) { width: 100%; max-width: 880px; }
#quarto-document-content figure:has(img[src$="fig-topologies-selection-gates.svg"]):where(:scope, *) { --iot-figure-fit-width: 880px; }
#quarto-document-content img[src$="fig-traffic-analysis-fundamentals-evidence-record.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="fig-traffic-analysis-fundamentals-evidence-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="fig-traffic-analysis-tools-review-record.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-traffic-analysis-tools-review-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-transport-fund-overview-review-map.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="fig-transport-fund-overview-review-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="fig-transport-fund-tcp-decision-record.svg"]:where(:scope, *) { width: 100%; max-width: 820px; }
#quarto-document-content figure:has(img[src$="fig-transport-fund-tcp-decision-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 820px; }
#quarto-document-content img[src$="fig-tsn-toolbox-boundary.svg"]:where(:scope, *) { width: 100%; max-width: 800px; }
#quarto-document-content figure:has(img[src$="fig-tsn-toolbox-boundary.svg"]):where(:scope, *) { --iot-figure-fit-width: 800px; }
#quarto-document-content img[src$="fig-uav-energy-budget-records.svg"]:where(:scope, *) { width: 100%; max-width: 878px; }
#quarto-document-content figure:has(img[src$="fig-uav-energy-budget-records.svg"]):where(:scope, *) { --iot-figure-fit-width: 878px; }
#quarto-document-content img[src$="fig-uav-energy-planning-loop-records.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="fig-uav-energy-planning-loop-records.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="fig-uav-energy-route-gates-records.svg"]:where(:scope, *) { width: 100%; max-width: 931px; }
#quarto-document-content figure:has(img[src$="fig-uav-energy-route-gates-records.svg"]):where(:scope, *) { --iot-figure-fit-width: 931px; }
#quarto-document-content img[src$="fig-uav-fanet-gateway-records.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-uav-fanet-gateway-records.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-uav-fanet-vanet-integration-map.svg"]:where(:scope, *) { width: 100%; max-width: 838px; }
#quarto-document-content figure:has(img[src$="fig-uav-fanet-vanet-integration-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 838px; }
#quarto-document-content img[src$="fig-uav-fanet-vanet-message-flow.svg"]:where(:scope, *) { width: 100%; max-width: 1035px; }
#quarto-document-content figure:has(img[src$="fig-uav-fanet-vanet-message-flow.svg"]):where(:scope, *) { --iot-figure-fit-width: 1035px; }
#quarto-document-content img[src$="fig-uav-mission-pattern-map-records.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="fig-uav-mission-pattern-map-records.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="fig-uav-network-features-tradeoff-checks.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="fig-uav-network-features-tradeoff-checks.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="fig-uav-swarm-state-record.svg"]:where(:scope, *) { width: 100%; max-width: 996px; }
#quarto-document-content figure:has(img[src$="fig-uav-swarm-state-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 996px; }
#quarto-document-content img[src$="fig-uav-swarm-task-allocation-check-loop.svg"]:where(:scope, *) { width: 100%; max-width: 924px; }
#quarto-document-content figure:has(img[src$="fig-uav-swarm-task-allocation-check-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 924px; }
#quarto-document-content img[src$="fig-uav-topologies-decision-map.svg"]:where(:scope, *) { width: 100%; max-width: 889px; }
#quarto-document-content figure:has(img[src$="fig-uav-topologies-decision-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 889px; }
#quarto-document-content img[src$="fig-uav-topologies-decision-record.svg"]:where(:scope, *) { width: 100%; max-width: 889px; }
#quarto-document-content figure:has(img[src$="fig-uav-topologies-decision-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 889px; }
#quarto-document-content img[src$="fig-uav-traj-control-loop-records.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-uav-traj-control-loop-records.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-uav-traj-decision-record.svg"]:where(:scope, *) { width: 100%; max-width: 841px; }
#quarto-document-content figure:has(img[src$="fig-uav-traj-decision-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 841px; }
#quarto-document-content img[src$="fig-uav-traj-strategy-map-records.svg"]:where(:scope, *) { width: 100%; max-width: 1054px; }
#quarto-document-content figure:has(img[src$="fig-uav-traj-strategy-map-records.svg"]):where(:scope, *) { --iot-figure-fit-width: 1054px; }
#quarto-document-content img[src$="fig-ultra-low-power-dependability.svg"]:where(:scope, *) { width: 100%; max-width: 565px; }
#quarto-document-content figure:has(img[src$="fig-ultra-low-power-dependability.svg"]):where(:scope, *) { --iot-figure-fit-width: 565px; }
#quarto-document-content img[src$="fig-umb-architecture.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-umb-architecture.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-umb-command-response-flow.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-umb-command-response-flow.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-umb-device-discovery-flow.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-umb-device-discovery-flow.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-underwater-hasl-cycle.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="fig-underwater-hasl-cycle.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="fig-underwater-opportunistic-localization.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="fig-underwater-opportunistic-localization.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="fig-underwater-virtual-layer-custody.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="fig-underwater-virtual-layer-custody.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="fig-utf8-byte-width.svg"]:where(:scope, *) { width: 100%; max-width: 664px; }
#quarto-document-content figure:has(img[src$="fig-utf8-byte-width.svg"]):where(:scope, *) { --iot-figure-fit-width: 664px; }
#quarto-document-content img[src$="fig-uwb-app-security-access-chain.svg"]:where(:scope, *) { width: 100%; max-width: 663px; }
#quarto-document-content figure:has(img[src$="fig-uwb-app-security-access-chain.svg"]):where(:scope, *) { --iot-figure-fit-width: 663px; }
#quarto-document-content img[src$="fig-uwb-app-security-ops-loop.svg"]:where(:scope, *) { width: 100%; max-width: 693px; }
#quarto-document-content figure:has(img[src$="fig-uwb-app-security-ops-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 693px; }
#quarto-document-content img[src$="fig-uwb-app-security-relay-review.svg"]:where(:scope, *) { width: 100%; max-width: 686px; }
#quarto-document-content figure:has(img[src$="fig-uwb-app-security-relay-review.svg"]):where(:scope, *) { --iot-figure-fit-width: 686px; }
#quarto-document-content img[src$="fig-uwb-app-security-use-case-map.svg"]:where(:scope, *) { width: 100%; max-width: 932px; }
#quarto-document-content figure:has(img[src$="fig-uwb-app-security-use-case-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 932px; }
#quarto-document-content img[src$="fig-uwb-fundamentals-ranging-stack.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-uwb-fundamentals-ranging-stack.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-uwb-positioning-systems-architecture-choice.svg"]:where(:scope, *) { width: 100%; max-width: 869px; }
#quarto-document-content figure:has(img[src$="fig-uwb-positioning-systems-architecture-choice.svg"]):where(:scope, *) { --iot-figure-fit-width: 869px; }
#quarto-document-content img[src$="fig-uwb-positioning-systems-deployment-review.svg"]:where(:scope, *) { width: 100%; max-width: 979px; }
#quarto-document-content figure:has(img[src$="fig-uwb-positioning-systems-deployment-review.svg"]):where(:scope, *) { --iot-figure-fit-width: 979px; }
#quarto-document-content img[src$="fig-uwb-ranging-techniques-map.svg"]:where(:scope, *) { width: 100%; max-width: 913px; }
#quarto-document-content figure:has(img[src$="fig-uwb-ranging-techniques-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 913px; }
#quarto-document-content img[src$="fig-uwb-ranging-techniques-quality.svg"]:where(:scope, *) { width: 100%; max-width: 1051px; }
#quarto-document-content figure:has(img[src$="fig-uwb-ranging-techniques-quality.svg"]):where(:scope, *) { --iot-figure-fit-width: 1051px; }
#quarto-document-content img[src$="fig-ux-design-evaluation-method-map.svg"]:where(:scope, *) { width: 100%; max-width: 1112px; }
#quarto-document-content figure:has(img[src$="fig-ux-design-evaluation-method-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 1112px; }
#quarto-document-content img[src$="fig-ux-design-fundamentals-principle-map.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="fig-ux-design-fundamentals-principle-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="fig-vector-width-tail-peeling.svg"]:where(:scope, *) { width: 100%; max-width: 640px; }
#quarto-document-content figure:has(img[src$="fig-vector-width-tail-peeling.svg"]):where(:scope, *) { --iot-figure-fit-width: 640px; }
#quarto-document-content img[src$="fig-verification-validation-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 1029px; }
#quarto-document-content figure:has(img[src$="fig-verification-validation-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 1029px; }
#quarto-document-content img[src$="fig-weightless-cellular-evolution.svg"]:where(:scope, *) { width: 100%; max-width: 600px; }
#quarto-document-content figure:has(img[src$="fig-weightless-cellular-evolution.svg"]):where(:scope, *) { --iot-figure-fit-width: 600px; }
#quarto-document-content img[src$="fig-weightless-overview-architecture-roles.svg"]:where(:scope, *) { width: 100%; max-width: 847px; }
#quarto-document-content figure:has(img[src$="fig-weightless-overview-architecture-roles.svg"]):where(:scope, *) { --iot-figure-fit-width: 847px; }
#quarto-document-content img[src$="fig-weightless-overview-review-record.svg"]:where(:scope, *) { width: 100%; max-width: 929px; }
#quarto-document-content figure:has(img[src$="fig-weightless-overview-review-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 929px; }
#quarto-document-content img[src$="fig-weightless-overview-variant-lanes.svg"]:where(:scope, *) { width: 100%; max-width: 932px; }
#quarto-document-content figure:has(img[src$="fig-weightless-overview-variant-lanes.svg"]):where(:scope, *) { --iot-figure-fit-width: 932px; }
#quarto-document-content img[src$="fig-wifi-6e-7-evidence-map.svg"]:where(:scope, *) { width: 100%; max-width: 500px; }
#quarto-document-content figure:has(img[src$="fig-wifi-6e-7-evidence-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 500px; }
#quarto-document-content img[src$="fig-wifi-6e-7-review-route.svg"]:where(:scope, *) { width: 100%; max-width: 445px; }
#quarto-document-content figure:has(img[src$="fig-wifi-6e-7-review-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 445px; }
#quarto-document-content img[src$="fig-wifi-arch-fundamentals-map.svg"]:where(:scope, *) { width: 100%; max-width: 512px; }
#quarto-document-content figure:has(img[src$="fig-wifi-arch-fundamentals-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 512px; }
#quarto-document-content img[src$="fig-wifi-arch-mac-applications-map.svg"]:where(:scope, *) { width: 100%; max-width: 512px; }
#quarto-document-content figure:has(img[src$="fig-wifi-arch-mac-applications-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 512px; }
#quarto-document-content img[src$="fig-wifi-contention-throughput.svg"]:where(:scope, *) { width: 100%; max-width: 686px; }
#quarto-document-content figure:has(img[src$="fig-wifi-contention-throughput.svg"]):where(:scope, *) { --iot-figure-fit-width: 686px; }
#quarto-document-content img[src$="fig-wifi-dcf-contention-ledger.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="fig-wifi-dcf-contention-ledger.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="fig-wifi-deployment-planning-evidence-map.svg"]:where(:scope, *) { width: 100%; max-width: 512px; }
#quarto-document-content figure:has(img[src$="fig-wifi-deployment-planning-evidence-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 512px; }
#quarto-document-content img[src$="fig-wifi-deployment-planning-validation-loop.svg"]:where(:scope, *) { width: 100%; max-width: 512px; }
#quarto-document-content figure:has(img[src$="fig-wifi-deployment-planning-validation-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 512px; }
#quarto-document-content img[src$="fig-wifi-frequency-bands-channel-review.svg"]:where(:scope, *) { width: 100%; max-width: 512px; }
#quarto-document-content figure:has(img[src$="fig-wifi-frequency-bands-channel-review.svg"]):where(:scope, *) { --iot-figure-fit-width: 512px; }
#quarto-document-content img[src$="fig-wifi-halow-evidence-record.svg"]:where(:scope, *) { width: 100%; max-width: 602px; }
#quarto-document-content figure:has(img[src$="fig-wifi-halow-evidence-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 602px; }
#quarto-document-content img[src$="fig-wifi-halow-fit-map.svg"]:where(:scope, *) { width: 100%; max-width: 569px; }
#quarto-document-content figure:has(img[src$="fig-wifi-halow-fit-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 569px; }
#quarto-document-content img[src$="fig-wifi-impl-http-websocket-evidence.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-wifi-impl-http-websocket-evidence.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-wifi-isa100-fit.svg"]:where(:scope, *) { width: 100%; max-width: 565px; }
#quarto-document-content figure:has(img[src$="fig-wifi-isa100-fit.svg"]):where(:scope, *) { --iot-figure-fit-width: 565px; }
#quarto-document-content img[src$="fig-wifi-krack-wpa3-map.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="fig-wifi-krack-wpa3-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="fig-wifi-overview-route.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="fig-wifi-overview-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="fig-wifi-security-provisioning-record.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="fig-wifi-security-provisioning-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="fig-wifi-wep-tkip-migration.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="fig-wifi-wep-tkip-migration.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="fig-wifimac-exposed-terminal.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-wifimac-exposed-terminal.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-wireless-mcu-mode-currents.svg"]:where(:scope, *) { width: 100%; max-width: 640px; }
#quarto-document-content figure:has(img[src$="fig-wireless-mcu-mode-currents.svg"]):where(:scope, *) { --iot-figure-fit-width: 640px; }
#quarto-document-content img[src$="fig-wireless-prop-fading-interference-coexistence.svg"]:where(:scope, *) { width: 100%; max-width: 811px; }
#quarto-document-content figure:has(img[src$="fig-wireless-prop-fading-interference-coexistence.svg"]):where(:scope, *) { --iot-figure-fit-width: 811px; }
#quarto-document-content img[src$="fig-wireless-prop-fading-interference-diagnosis.svg"]:where(:scope, *) { width: 100%; max-width: 811px; }
#quarto-document-content figure:has(img[src$="fig-wireless-prop-fading-interference-diagnosis.svg"]):where(:scope, *) { --iot-figure-fit-width: 811px; }
#quarto-document-content img[src$="fig-wireless-prop-fading-interference-multipath.svg"]:where(:scope, *) { width: 100%; max-width: 811px; }
#quarto-document-content figure:has(img[src$="fig-wireless-prop-fading-interference-multipath.svg"]):where(:scope, *) { --iot-figure-fit-width: 811px; }
#quarto-document-content img[src$="fig-wireless-prop-fading-interference-review.svg"]:where(:scope, *) { width: 100%; max-width: 811px; }
#quarto-document-content figure:has(img[src$="fig-wireless-prop-fading-interference-review.svg"]):where(:scope, *) { --iot-figure-fit-width: 811px; }
#quarto-document-content img[src$="fig-wireless-prop-fundamentals-loss-stack.svg"]:where(:scope, *) { width: 100%; max-width: 594px; }
#quarto-document-content figure:has(img[src$="fig-wireless-prop-fundamentals-loss-stack.svg"]):where(:scope, *) { --iot-figure-fit-width: 594px; }
#quarto-document-content img[src$="fig-wireless-prop-fundamentals-site-factors.svg"]:where(:scope, *) { width: 100%; max-width: 914px; }
#quarto-document-content figure:has(img[src$="fig-wireless-prop-fundamentals-site-factors.svg"]):where(:scope, *) { --iot-figure-fit-width: 914px; }
#quarto-document-content img[src$="fig-wireless-prop-path-loss-link-budget-margin.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="fig-wireless-prop-path-loss-link-budget-margin.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="fig-wireless-prop-path-loss-link-budget-review.svg"]:where(:scope, *) { width: 100%; max-width: 780px; }
#quarto-document-content figure:has(img[src$="fig-wireless-prop-path-loss-link-budget-review.svg"]):where(:scope, *) { --iot-figure-fit-width: 780px; }
#quarto-document-content img[src$="fig-wireless-prop-radio-basics-selection-record.svg"]:where(:scope, *) { width: 100%; max-width: 1024px; }
#quarto-document-content figure:has(img[src$="fig-wireless-prop-radio-basics-selection-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 1024px; }
#quarto-document-content img[src$="fig-wmsn-coalition-choice.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="fig-wmsn-coalition-choice.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="fig-wsn-coverage-core-concepts-map.svg"]:where(:scope, *) { width: 100%; max-width: 885px; }
#quarto-document-content figure:has(img[src$="fig-wsn-coverage-core-concepts-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 885px; }
#quarto-document-content img[src$="fig-wsn-coverage-ogdc-placement.svg"]:where(:scope, *) { width: 100%; max-width: 1035px; }
#quarto-document-content figure:has(img[src$="fig-wsn-coverage-ogdc-placement.svg"]):where(:scope, *) { --iot-figure-fit-width: 1035px; }
#quarto-document-content img[src$="fig-wsn-coverage-types-decision-map.svg"]:where(:scope, *) { width: 100%; max-width: 723px; }
#quarto-document-content figure:has(img[src$="fig-wsn-coverage-types-decision-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 723px; }
#quarto-document-content img[src$="fig-wsn-data-aggregation-function-fit.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-wsn-data-aggregation-function-fit.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-wsn-deployment-sizing-record.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-wsn-deployment-sizing-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-wsn-deployment-sizing-route.svg"]:where(:scope, *) { width: 100%; max-width: 862px; }
#quarto-document-content figure:has(img[src$="fig-wsn-deployment-sizing-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 862px; }
#quarto-document-content img[src$="fig-wsn-directed-diffusion-review-record.svg"]:where(:scope, *) { width: 100%; max-width: 1054px; }
#quarto-document-content figure:has(img[src$="fig-wsn-directed-diffusion-review-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 1054px; }
#quarto-document-content img[src$="fig-wsn-human-dtn-record.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-wsn-human-dtn-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-wsn-human-dtn-route.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-wsn-human-dtn-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-wsn-human-participatory-sensing-record.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="fig-wsn-human-participatory-sensing-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="fig-wsn-human-participatory-sensing-route.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="fig-wsn-human-participatory-sensing-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="fig-wsn-ov-applications-fit-map.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-wsn-ov-applications-fit-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-wsn-sm-components-role-map.svg"]:where(:scope, *) { width: 100%; max-width: 1024px; }
#quarto-document-content figure:has(img[src$="fig-wsn-sm-components-role-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 1024px; }
#quarto-document-content img[src$="fig-wsn-swarm-iot-boundary.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-wsn-swarm-iot-boundary.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-wsn-trickle-evidence-map.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="fig-wsn-trickle-evidence-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="fig-xmpp-core-technology-fit.svg"]:where(:scope, *) { width: 100%; max-width: 565px; }
#quarto-document-content figure:has(img[src$="fig-xmpp-core-technology-fit.svg"]):where(:scope, *) { --iot-figure-fit-width: 565px; }
#quarto-document-content img[src$="fig-xmpp-federated-stanza-route.svg"]:where(:scope, *) { width: 100%; max-width: 565px; }
#quarto-document-content figure:has(img[src$="fig-xmpp-federated-stanza-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 565px; }
#quarto-document-content img[src$="fig-xmpp-stanza-roles.svg"]:where(:scope, *) { width: 100%; max-width: 753px; }
#quarto-document-content figure:has(img[src$="fig-xmpp-stanza-roles.svg"]):where(:scope, *) { --iot-figure-fit-width: 753px; }
#quarto-document-content img[src$="fig-z-wave-architecture-home-id.svg"]:where(:scope, *) { width: 100%; max-width: 875px; }
#quarto-document-content figure:has(img[src$="fig-z-wave-architecture-home-id.svg"]):where(:scope, *) { --iot-figure-fit-width: 875px; }
#quarto-document-content img[src$="fig-z-wave-architecture-route-repair.svg"]:where(:scope, *) { width: 100%; max-width: 875px; }
#quarto-document-content figure:has(img[src$="fig-z-wave-architecture-route-repair.svg"]):where(:scope, *) { --iot-figure-fit-width: 875px; }
#quarto-document-content img[src$="fig-z-wave-overview-topology-choice.svg"]:where(:scope, *) { width: 100%; max-width: 729px; }
#quarto-document-content figure:has(img[src$="fig-z-wave-overview-topology-choice.svg"]):where(:scope, *) { --iot-figure-fit-width: 729px; }
#quarto-document-content img[src$="fig-z-wave-routing-source-route.svg"]:where(:scope, *) { width: 100%; max-width: 875px; }
#quarto-document-content figure:has(img[src$="fig-z-wave-routing-source-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 875px; }
#quarto-document-content img[src$="fig-z-wave-simulation-boundary.svg"]:where(:scope, *) { width: 100%; max-width: 760px; }
#quarto-document-content figure:has(img[src$="fig-z-wave-simulation-boundary.svg"]):where(:scope, *) { --iot-figure-fit-width: 760px; }
#quarto-document-content img[src$="fig-z-wave-simulation-route-exercise.svg"]:where(:scope, *) { width: 100%; max-width: 738px; }
#quarto-document-content figure:has(img[src$="fig-z-wave-simulation-route-exercise.svg"]):where(:scope, *) { --iot-figure-fit-width: 738px; }
#quarto-document-content img[src$="fig-zero-trust-device-identity-credential-patterns.svg"]:where(:scope, *) { width: 100%; max-width: 1024px; }
#quarto-document-content figure:has(img[src$="fig-zero-trust-device-identity-credential-patterns.svg"]):where(:scope, *) { --iot-figure-fit-width: 1024px; }
#quarto-document-content img[src$="fig-zero-trust-network-segmentation-east-west.svg"]:where(:scope, *) { width: 100%; max-width: 1068px; }
#quarto-document-content figure:has(img[src$="fig-zero-trust-network-segmentation-east-west.svg"]):where(:scope, *) { --iot-figure-fit-width: 1068px; }
#quarto-document-content img[src$="fig-zigbee-6lowpan-fund-roles.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-6lowpan-fund-roles.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="fig-zigbee-6lowpan-iphc-review-path.svg"]:where(:scope, *) { width: 100%; max-width: 1035px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-6lowpan-iphc-review-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 1035px; }
#quarto-document-content img[src$="fig-zigbee-6lowpan-routing-rpl-direction-map.svg"]:where(:scope, *) { width: 100%; max-width: 768px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-6lowpan-routing-rpl-direction-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 768px; }
#quarto-document-content img[src$="fig-zigbee-6lowpan-sec-boundary.svg"]:where(:scope, *) { width: 100%; max-width: 889px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-6lowpan-sec-boundary.svg"]):where(:scope, *) { --iot-figure-fit-width: 889px; }
#quarto-document-content img[src$="fig-zigbee-6lowpan-sec-lab-path.svg"]:where(:scope, *) { width: 100%; max-width: 941px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-6lowpan-sec-lab-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 941px; }
#quarto-document-content img[src$="fig-zigbee-application-profile-evidence-map.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-application-profile-evidence-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-zigbee-beacon-superframe.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-beacon-superframe.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="fig-zigbee-frame-service-path.svg"]:where(:scope, *) { width: 100%; max-width: 565px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-frame-service-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 565px; }
#quarto-document-content img[src$="fig-zigbee-fundamentals-evidence-map.svg"]:where(:scope, *) { width: 100%; max-width: 527px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-fundamentals-evidence-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 527px; }
#quarto-document-content img[src$="fig-zigbee-future-standards-boundary-map.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-future-standards-boundary-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="fig-zigbee-industrial-deployment-readiness-record.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-industrial-deployment-readiness-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-zigbee-layered-landscape.svg"]:where(:scope, *) { width: 100%; max-width: 600px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-layered-landscape.svg"]):where(:scope, *) { --iot-figure-fit-width: 600px; }
#quarto-document-content img[src$="fig-zigbee-matter-architecture-evidence-map.svg"]:where(:scope, *) { width: 100%; max-width: 741px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-matter-architecture-evidence-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 741px; }
#quarto-document-content img[src$="fig-zigbee-matter-cluster-conformance-record.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-matter-cluster-conformance-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="fig-zigbee-matter-commissioning-evidence-flow.svg"]:where(:scope, *) { width: 100%; max-width: 1054px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-matter-commissioning-evidence-flow.svg"]):where(:scope, *) { --iot-figure-fit-width: 1054px; }
#quarto-document-content img[src$="fig-zigbee-matter-commissioning-review-path.svg"]:where(:scope, *) { width: 100%; max-width: 741px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-matter-commissioning-review-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 741px; }
#quarto-document-content img[src$="fig-zigbee-matter-commissioning-review-record.svg"]:where(:scope, *) { width: 100%; max-width: 1049px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-matter-commissioning-review-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 1049px; }
#quarto-document-content img[src$="fig-zigbee-matter-data-model-evidence-path.svg"]:where(:scope, *) { width: 100%; max-width: 741px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-matter-data-model-evidence-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 741px; }
#quarto-document-content img[src$="fig-zigbee-matter-device-type-evidence-map.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-matter-device-type-evidence-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="fig-zigbee-matter-fabric-security-boundary-map.svg"]:where(:scope, *) { width: 100%; max-width: 533px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-matter-fabric-security-boundary-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 533px; }
#quarto-document-content img[src$="fig-zigbee-matter-fragmentation-evidence-map.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-matter-fragmentation-evidence-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="fig-zigbee-matter-fragmentation-response-record.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-matter-fragmentation-response-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="fig-zigbee-matter-implementation-evidence-route.svg"]:where(:scope, *) { width: 100%; max-width: 996px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-matter-implementation-evidence-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 996px; }
#quarto-document-content img[src$="fig-zigbee-matter-interactions-evidence-map.svg"]:where(:scope, *) { width: 100%; max-width: 704px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-matter-interactions-evidence-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 704px; }
#quarto-document-content img[src$="fig-zigbee-matter-sdk-environment-evidence-map.svg"]:where(:scope, *) { width: 100%; max-width: 865px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-matter-sdk-environment-evidence-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 865px; }
#quarto-document-content img[src$="fig-zigbee-matter-transport-boundary-map.svg"]:where(:scope, *) { width: 100%; max-width: 996px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-matter-transport-boundary-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 996px; }
#quarto-document-content img[src$="fig-zigbee-matter-transport-decision-record.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-matter-transport-decision-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-zigbee-mesh-self-healing.svg"]:where(:scope, *) { width: 100%; max-width: 565px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-mesh-self-healing.svg"]):where(:scope, *) { --iot-figure-fit-width: 565px; }
#quarto-document-content img[src$="fig-zigbee-path-loss-tradeoff.svg"]:where(:scope, *) { width: 100%; max-width: 565px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-path-loss-tradeoff.svg"]):where(:scope, *) { --iot-figure-fit-width: 565px; }
#quarto-document-content img[src$="fig-zigbee-profiles-wirelesshart-boundary.svg"]:where(:scope, *) { width: 100%; max-width: 565px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-profiles-wirelesshart-boundary.svg"]):where(:scope, *) { --iot-figure-fit-width: 565px; }
#quarto-document-content img[src$="fig-zigbee-protocol-stack-evidence-map.svg"]:where(:scope, *) { width: 100%; max-width: 768px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-protocol-stack-evidence-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 768px; }
#quarto-document-content img[src$="fig-zigbee-routing-evidence-path.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-routing-evidence-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-zigbee-security-evidence-boundary.svg"]:where(:scope, *) { width: 100%; max-width: 698px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-security-evidence-boundary.svg"]):where(:scope, *) { --iot-figure-fit-width: 698px; }
#quarto-document-content img[src$="fig-zigbee-security-review-record.svg"]:where(:scope, *) { width: 100%; max-width: 698px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-security-review-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 698px; }
#quarto-document-content img[src$="fig-zigbee-sim-mesh-evidence-loop.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-sim-mesh-evidence-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-zigbee-sim-mesh-scenario-record.svg"]:where(:scope, *) { width: 100%; max-width: 698px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-sim-mesh-scenario-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 698px; }
#quarto-document-content img[src$="fig-zigbee-stack-ownership.svg"]:where(:scope, *) { width: 100%; max-width: 600px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-stack-ownership.svg"]):where(:scope, *) { --iot-figure-fit-width: 600px; }
#quarto-document-content img[src$="fig-zigbee-star-tree-mesh-roles.svg"]:where(:scope, *) { width: 100%; max-width: 686px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-star-tree-mesh-roles.svg"]):where(:scope, *) { --iot-figure-fit-width: 686px; }
#quarto-document-content img[src$="fig-zigbee-thread-advanced-evidence-map.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-thread-advanced-evidence-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-zigbee-thread-advanced-review-record.svg"]:where(:scope, *) { width: 100%; max-width: 853px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-thread-advanced-review-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 853px; }
#quarto-document-content img[src$="fig-zigbee-thread-impl-deploy-evidence-stack.svg"]:where(:scope, *) { width: 100%; max-width: 950px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-thread-impl-deploy-evidence-stack.svg"]):where(:scope, *) { --iot-figure-fit-width: 950px; }
#quarto-document-content img[src$="fig-zigbee-thread-impl-deploy-release-record.svg"]:where(:scope, *) { width: 100%; max-width: 980px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-thread-impl-deploy-release-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 980px; }
#quarto-document-content img[src$="fig-zigbee-thread-impl-dev-integration-record.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-thread-impl-dev-integration-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-zigbee-thread-intro-stack-boundary.svg"]:where(:scope, *) { width: 100%; max-width: 1012px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-thread-intro-stack-boundary.svg"]):where(:scope, *) { --iot-figure-fit-width: 1012px; }
#quarto-document-content img[src$="fig-zigbee-thread-protocol-comparison-decision-record.svg"]:where(:scope, *) { width: 100%; max-width: 620px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-thread-protocol-comparison-decision-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 620px; }
#quarto-document-content img[src$="fig-zigbee-thread-security-matter-record.svg"]:where(:scope, *) { width: 100%; max-width: 1100px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-thread-security-matter-record.svg"]):where(:scope, *) { --iot-figure-fit-width: 1100px; }
#quarto-document-content img[src$="fig-zigbee-topology-tradeoffs.svg"]:where(:scope, *) { width: 100%; max-width: 565px; }
#quarto-document-content figure:has(img[src$="fig-zigbee-topology-tradeoffs.svg"]):where(:scope, *) { --iot-figure-fit-width: 565px; }
#quarto-document-content img[src$="fig-zwave-mesh-healing.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="fig-zwave-mesh-healing.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="fig-zwave-source-route-floorplan.svg"]:where(:scope, *) { width: 100%; max-width: 565px; }
#quarto-document-content figure:has(img[src$="fig-zwave-source-route-floorplan.svg"]):where(:scope, *) { --iot-figure-fit-width: 565px; }
#quarto-document-content img[src$="gtm-channel-evolution-20260411.svg"]:where(:scope, *) { width: 100%; max-width: 1097px; }
#quarto-document-content figure:has(img[src$="gtm-channel-evolution-20260411.svg"]):where(:scope, *) { --iot-figure-fit-width: 1097px; }
#quarto-document-content img[src$="iiot-industrial-protocol-evolution-v2.svg"]:where(:scope, *) { width: 100%; max-width: 818px; }
#quarto-document-content figure:has(img[src$="iiot-industrial-protocol-evolution-v2.svg"]):where(:scope, *) { --iot-figure-fit-width: 818px; }
#quarto-document-content img[src$="label-quiz-accelerometer-release-chain.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-accelerometer-release-chain.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-accessible-multidevice-loop.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-accessible-multidevice-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-ace-request-resolution-proof.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-ace-request-resolution-proof.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-ace-shared-context.svg"]:where(:scope, *) { width: 100%; max-width: 725px; }
#quarto-document-content figure:has(img[src$="label-quiz-ace-shared-context.svg"]):where(:scope, *) { --iot-figure-fit-width: 725px; }
#quarto-document-content img[src$="label-quiz-actuator-assessment-proof.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-actuator-assessment-proof.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-actuator-safety-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-actuator-safety-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-adc-conversion-regions.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-adc-conversion-regions.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-adc-decision-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-adc-decision-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-adhoc-assessment-decision-regions.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-adhoc-assessment-decision-regions.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-adhoc-production-loop-regions.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-adhoc-production-loop-regions.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-advanced-auth-trust.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-advanced-auth-trust.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-advanced-sensor-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-advanced-sensor-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-agile-risk-control-loop.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-agile-risk-control-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-agriculture-decision-loop.svg"]:where(:scope, *) { width: 100%; max-width: 744px; }
#quarto-document-content figure:has(img[src$="label-quiz-agriculture-decision-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 744px; }
#quarto-document-content img[src$="label-quiz-amqp-delivery-evidence.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-amqp-delivery-evidence.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-amqp-frame-lifecycle.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-amqp-frame-lifecycle.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-amqp-message-delivery-proof.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-amqp-message-delivery-proof.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-amqp-message-route.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-amqp-message-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-amqp-production-path.svg"]:where(:scope, *) { width: 100%; max-width: 800px; }
#quarto-document-content figure:has(img[src$="label-quiz-amqp-production-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 800px; }
#quarto-document-content img[src$="label-quiz-amqp-restart-survival.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-amqp-restart-survival.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-amqp-scope-route-store.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-amqp-scope-route-store.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-analog-digital-control-loop.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-analog-digital-control-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-architecture-planner-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-architecture-planner-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-authentication-route-map.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-authentication-route-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-automotive-release-evidence.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-automotive-release-evidence.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-baby-monitoring-care-loop.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-baby-monitoring-care-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-binary-place-value-regions.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-binary-place-value-regions.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-biomimetic-strategy-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-biomimetic-strategy-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-ble-assessment-contracts.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-ble-assessment-contracts.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-ble-defense-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-ble-defense-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-ble-implementation-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-ble-implementation-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-ble-key-job-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-ble-key-job-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-ble-pairing-decision.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-ble-pairing-decision.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-ble-python-runtime-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-ble-python-runtime-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-bluetooth-mesh-contracts.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-bluetooth-mesh-contracts.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-bluetooth-profile-contracts.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-bluetooth-profile-contracts.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-braitenberg-coupling-behaviour.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-braitenberg-coupling-behaviour.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-calibration-span-proof.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-calibration-span-proof.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-capstone-delivery-path.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-capstone-delivery-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-capstone-evidence-cycle.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-capstone-evidence-cycle.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-cipher-learning-release.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-cipher-learning-release.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-cloudlet-session-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-cloudlet-session-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-coap-api-contract.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-coap-api-contract.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-coap-exchange-outcomes.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-coap-exchange-outcomes.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-coap-feature-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-coap-feature-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-coap-fixed-header.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-coap-fixed-header.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-coap-lab-evidence.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-coap-lab-evidence.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-coap-mqtt-placement.svg"]:where(:scope, *) { width: 100%; max-width: 744px; }
#quarto-document-content figure:has(img[src$="label-quiz-coap-mqtt-placement.svg"]):where(:scope, *) { --iot-figure-fit-width: 744px; }
#quarto-document-content img[src$="label-quiz-coap-multicast-contract.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-coap-multicast-contract.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-coap-observe-lifecycle.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-coap-observe-lifecycle.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-coap-security-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-coap-security-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-consent-control-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-consent-control-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-container-orchestration-control.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-container-orchestration-control.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-context-energy-management.svg"]:where(:scope, *) { width: 100%; max-width: 623px; }
#quarto-document-content figure:has(img[src$="label-quiz-context-energy-management.svg"]):where(:scope, *) { --iot-figure-fit-width: 623px; }
#quarto-document-content img[src$="label-quiz-context-energy-offloading.svg"]:where(:scope, *) { width: 100%; max-width: 660px; }
#quarto-document-content figure:has(img[src$="label-quiz-context-energy-offloading.svg"]):where(:scope, *) { --iot-figure-fit-width: 660px; }
#quarto-document-content img[src$="label-quiz-context-energy-policy-proof.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-context-energy-policy-proof.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-corad-collection-regions.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-corad-collection-regions.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-cryptography-index-route.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-cryptography-index-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-cyber-foraging-trust-path.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-cyber-foraging-trust-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-dac-signal-contract.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-dac-signal-contract.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-data-product-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-data-product-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-data-quality-evidence.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-data-quality-evidence.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-data-repair-evidence.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-data-repair-evidence.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-datasheet-decision-evidence.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-datasheet-decision-evidence.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-deployment-failure-learning.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-deployment-failure-learning.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-design-thinking-evidence-loop.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-design-thinking-evidence-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-device-adapter-fleet-resilience.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-device-adapter-fleet-resilience.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-device-evolution-stages.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-device-evolution-stages.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-domain-design-lens.svg"]:where(:scope, *) { width: 100%; max-width: 744px; }
#quarto-document-content figure:has(img[src$="label-quiz-domain-design-lens.svg"]):where(:scope, *) { --iot-figure-fit-width: 744px; }
#quarto-document-content img[src$="label-quiz-doping-junction-switch.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-doping-junction-switch.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-dt-industry-applications.svg"]:where(:scope, *) { width: 100%; max-width: 569px; }
#quarto-document-content figure:has(img[src$="label-quiz-dt-industry-applications.svg"]):where(:scope, *) { --iot-figure-fit-width: 569px; }
#quarto-document-content img[src$="label-quiz-dt-use-cases.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-dt-use-cases.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-dt-worked-examples.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-dt-worked-examples.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-dtn-encounter-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-dtn-encounter-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-dtn-socialcast-routing.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-dtn-socialcast-routing.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-dtn-store-carry-forward.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-dtn-store-carry-forward.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-e2-gateway-evidence.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-e2-gateway-evidence.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-e2e-evidence-route.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-e2e-evidence-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-e3-e4-ownership-session.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-e3-e4-ownership-session.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-edge-acquisition-responsibility.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-edge-acquisition-responsibility.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-edge-ai-fundamentals.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-edge-ai-fundamentals.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-edge-ai-hardware.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-edge-ai-hardware.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-edge-ai-optimization-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-edge-ai-optimization-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-edge-ai-pipeline.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-edge-ai-pipeline.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-edge-deployment-lifecycle.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-edge-deployment-lifecycle.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-edge-fog-bandwidth-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-edge-fog-bandwidth-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-edge-fog-cloud-advanced.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-edge-fog-cloud-advanced.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-edge-fog-cloud-control-plane.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-edge-fog-cloud-control-plane.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-edge-fog-pitfall-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-edge-fog-pitfall-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-edge-fog-pitfalls.svg"]:where(:scope, *) { width: 100%; max-width: 426px; }
#quarto-document-content figure:has(img[src$="label-quiz-edge-fog-pitfalls.svg"]):where(:scope, *) { --iot-figure-fit-width: 426px; }
#quarto-document-content img[src$="label-quiz-edge-fog-use-case-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-edge-fog-use-case-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-edge-fog-use-cases.svg"]:where(:scope, *) { width: 100%; max-width: 889px; }
#quarto-document-content figure:has(img[src$="label-quiz-edge-fog-use-cases.svg"]):where(:scope, *) { --iot-figure-fit-width: 889px; }
#quarto-document-content img[src$="label-quiz-edge-power-handoff.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-edge-power-handoff.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-edge-processing-decision.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-edge-processing-decision.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-electricity-core4.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="label-quiz-electricity-core4.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="label-quiz-electricity-design-decisions.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-electricity-design-decisions.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-electronics-load-path.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-electronics-load-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-empathize-define-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-empathize-define-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-energy-aware-interactive-tools.svg"]:where(:scope, *) { width: 100%; max-width: 666px; }
#quarto-document-content figure:has(img[src$="label-quiz-energy-aware-interactive-tools.svg"]):where(:scope, *) { --iot-figure-fit-width: 666px; }
#quarto-document-content img[src$="label-quiz-energy-case-study-proof.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-energy-case-study-proof.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-energy-design-margin.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-energy-design-margin.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-energy-latency-decision-regions.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-energy-latency-decision-regions.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-energy-measurement-path.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-energy-measurement-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-energy-tool-validation-loop.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-energy-tool-validation-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-fall-alert-escalation.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-fall-alert-escalation.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-fanet-routing-continuity-regions.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-fanet-routing-continuity-regions.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-firmware-optimization-loop.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-firmware-optimization-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-fixed-point-proof-path.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-fixed-point-proof-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-fog-arch-cloudlets.svg"]:where(:scope, *) { width: 100%; max-width: 842px; }
#quarto-document-content figure:has(img[src$="label-quiz-fog-arch-cloudlets.svg"]):where(:scope, *) { --iot-figure-fit-width: 842px; }
#quarto-document-content img[src$="label-quiz-fog-energy-latency.svg"]:where(:scope, *) { width: 100%; max-width: 727px; }
#quarto-document-content figure:has(img[src$="label-quiz-fog-energy-latency.svg"]):where(:scope, *) { --iot-figure-fit-width: 727px; }
#quarto-document-content img[src$="label-quiz-fog-resource-allocation.svg"]:where(:scope, *) { width: 100%; max-width: 960px; }
#quarto-document-content figure:has(img[src$="label-quiz-fog-resource-allocation.svg"]):where(:scope, *) { --iot-figure-fit-width: 960px; }
#quarto-document-content img[src$="label-quiz-gateway-translation-proof.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-gateway-translation-proof.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-glossary-af-system-map.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-glossary-af-system-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-glossary-qz-trust-path.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-glossary-qz-trust-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-glossary-stack-path.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-glossary-stack-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-gps-accuracy-budget.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-gps-accuracy-budget.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-gps-fix-decision.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-gps-fix-decision.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-hardware-acceleration-path.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-hardware-acceleration-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-harvesting-energy-path.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-harvesting-energy-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-healthcare-care-loop.svg"]:where(:scope, *) { width: 100%; max-width: 744px; }
#quarto-document-content figure:has(img[src$="label-quiz-healthcare-care-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 744px; }
#quarto-document-content img[src$="label-quiz-http-connection-budget.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-http-connection-budget.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-http-version-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-http-version-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-i2c-transaction-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-i2c-transaction-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-ideate-test-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-ideate-test-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-iiot-value-loop-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-iiot-value-loop-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-implement-iterate-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-implement-iterate-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-indoor-position-path.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-indoor-position-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-industry-twin-evidence.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-industry-twin-evidence.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-infrastructure-proxy-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-infrastructure-proxy-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-interaction-pattern-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-interaction-pattern-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-internet-history-path.svg"]:where(:scope, *) { width: 100%; max-width: 839px; }
#quarto-document-content figure:has(img[src$="label-quiz-internet-history-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 839px; }
#quarto-document-content img[src$="label-quiz-iot-business-value-loop.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-iot-business-value-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-iot-business-value-models.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-iot-business-value-models.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-iot-gtm-gates.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-iot-gtm-gates.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-iot-history-reframe.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-iot-history-reframe.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-iot-perspectives-lens.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-iot-perspectives-lens.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-iot-pitfall-defences.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-iot-pitfall-defences.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-iot-pricing-meter.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-iot-pricing-meter.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-iot-reference-handoffs.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-iot-reference-handoffs.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-iot-requirement-trace.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-iot-requirement-trace.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-iot-three-ingredients.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-iot-three-ingredients.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-iot-unit-economics.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-iot-unit-economics.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-iot-validation-framework.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-iot-validation-framework.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-iot-value-case.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-iot-value-case.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-isa95-decision-horizons.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-isa95-decision-horizons.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-link-budget-proof.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-link-budget-proof.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-location-context-decision.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-location-context-decision.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-location-privacy-lifecycle.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-location-privacy-lifecycle.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-lorawan-readiness-proof.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-lorawan-readiness-proof.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-lorawan-release-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-lorawan-release-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-lorawan-sim-release-path.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-lorawan-sim-release-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-low-power-policy-proof.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-low-power-policy-proof.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-m2m-architecture-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-m2m-architecture-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-m2m-architectures.svg"]:where(:scope, *) { width: 100%; max-width: 543px; }
#quarto-document-content figure:has(img[src$="label-quiz-m2m-architectures.svg"]):where(:scope, *) { --iot-figure-fit-width: 543px; }
#quarto-document-content img[src$="label-quiz-m2m-case-studies.svg"]:where(:scope, *) { width: 100%; max-width: 582px; }
#quarto-document-content figure:has(img[src$="label-quiz-m2m-case-studies.svg"]):where(:scope, *) { --iot-figure-fit-width: 582px; }
#quarto-document-content img[src$="label-quiz-m2m-case-study-evidence-path.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-m2m-case-study-evidence-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-m2m-comm-evolution.svg"]:where(:scope, *) { width: 100%; max-width: 643px; }
#quarto-document-content figure:has(img[src$="label-quiz-m2m-comm-evolution.svg"]):where(:scope, *) { --iot-figure-fit-width: 643px; }
#quarto-document-content img[src$="label-quiz-m2m-comm-platforms.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-m2m-comm-platforms.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-m2m-design-patterns.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-m2m-design-patterns.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-m2m-implementations.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-m2m-implementations.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-m2m-iot-hybrid-control-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-m2m-iot-hybrid-control-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-manufacturing-maintenance-loop.svg"]:where(:scope, *) { width: 100%; max-width: 744px; }
#quarto-document-content figure:has(img[src$="label-quiz-manufacturing-maintenance-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 744px; }
#quarto-document-content img[src$="label-quiz-material-electrical-roles.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-material-electrical-roles.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-math-evidence-chain.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-math-evidence-chain.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-medication-adherence-path.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-medication-adherence-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-mobile-gateway-release-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-mobile-gateway-release-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-mqtt-amqp-bridge.svg"]:where(:scope, *) { width: 100%; max-width: 842px; }
#quarto-document-content figure:has(img[src$="label-quiz-mqtt-amqp-bridge.svg"]):where(:scope, *) { --iot-figure-fit-width: 842px; }
#quarto-document-content img[src$="label-quiz-mqtt-first-roundtrip.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-mqtt-first-roundtrip.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-mqtt-production-flow.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-mqtt-production-flow.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-mqtt-python-event-loop.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-mqtt-python-event-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-mqtt-retain-lwt-flow.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-mqtt-retain-lwt-flow.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-mqtt-security-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-mqtt-security-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-mqtt-session-resume.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-mqtt-session-resume.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-multimodal-state-loop.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-multimodal-state-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-nb-iot-power-optimization-flow.svg"]:where(:scope, *) { width: 100%; max-width: 1016px; }
#quarto-document-content figure:has(img[src$="label-quiz-nb-iot-power-optimization-flow.svg"]):where(:scope, *) { --iot-figure-fit-width: 1016px; }
#quarto-document-content img[src$="label-quiz-nbiot-bringup-proof.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-nbiot-bringup-proof.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-network-fundamentals-packet.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-network-fundamentals-packet.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-network-introduction-route.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-network-introduction-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-network-methodology-evidence.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-network-methodology-evidence.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-network-performance-path.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-network-performance-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-network-scenario-evidence.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-network-scenario-evidence.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-network-tool-evidence.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-network-tool-evidence.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-networking-reference-map.svg"]:where(:scope, *) { width: 100%; max-width: 544px; }
#quarto-document-content figure:has(img[src$="label-quiz-networking-reference-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 544px; }
#quarto-document-content img[src$="label-quiz-normalization-contract.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-normalization-contract.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-nyquist-sampling-regions.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-nyquist-sampling-regions.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-offloading-placement-proof.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-offloading-placement-proof.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-opcua-client-session-services.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-opcua-client-session-services.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-optimization-decision-loop.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-optimization-decision-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-optimization-fixed-point.svg"]:where(:scope, *) { width: 100%; max-width: 560px; }
#quarto-document-content figure:has(img[src$="label-quiz-optimization-fixed-point.svg"]):where(:scope, *) { --iot-figure-fit-width: 560px; }
#quarto-document-content img[src$="label-quiz-optimization-fundamentals.svg"]:where(:scope, *) { width: 100%; max-width: 560px; }
#quarto-document-content figure:has(img[src$="label-quiz-optimization-fundamentals.svg"]):where(:scope, *) { --iot-figure-fit-width: 560px; }
#quarto-document-content img[src$="label-quiz-optimization-hardware.svg"]:where(:scope, *) { width: 100%; max-width: 614px; }
#quarto-document-content figure:has(img[src$="label-quiz-optimization-hardware.svg"]):where(:scope, *) { --iot-figure-fit-width: 614px; }
#quarto-document-content img[src$="label-quiz-optimization-software.svg"]:where(:scope, *) { width: 100%; max-width: 483px; }
#quarto-document-content figure:has(img[src$="label-quiz-optimization-software.svg"]):where(:scope, *) { --iot-figure-fit-width: 483px; }
#quarto-document-content img[src$="label-quiz-packet-evidence-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-packet-evidence-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-packet-journey-decisions.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-packet-journey-decisions.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-paper-architecture-decision.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-paper-architecture-decision.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-poe-ethernet-responsibility-regions.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-poe-ethernet-responsibility-regions.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-predictive-maintenance-action-path.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-predictive-maintenance-action-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-project-planning-governance.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-project-planning-governance.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-protocol-contribution-map.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-protocol-contribution-map.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-protocol-selection-evidence.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-protocol-selection-evidence.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-protocol-selection-proof.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-protocol-selection-proof.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-pwm-energy-response.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-pwm-energy-response.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-quality-interpret-score-route.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-quality-interpret-score-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-reference-model-handoffs.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-reference-model-handoffs.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-relay-isolation-path.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-relay-isolation-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-requirement-envelope.svg"]:where(:scope, *) { width: 100%; max-width: 762px; }
#quarto-document-content figure:has(img[src$="label-quiz-requirement-envelope.svg"]):where(:scope, *) { --iot-figure-fit-width: 762px; }
#quarto-document-content img[src$="label-quiz-resource-allocation-control-regions.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-resource-allocation-control-regions.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-rest-resource-contract.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-rest-resource-contract.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-rest-resource-exchange.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-rest-resource-exchange.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-retail-stock-loop.svg"]:where(:scope, *) { width: 100%; max-width: 780px; }
#quarto-document-content figure:has(img[src$="label-quiz-retail-stock-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 780px; }
#quarto-document-content img[src$="label-quiz-retention-release-evidence.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-retention-release-evidence.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-s2aas-core-concepts.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-s2aas-core-concepts.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-s2aas-data-ownership.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-s2aas-data-ownership.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-s2aas-fundamentals.svg"]:where(:scope, *) { width: 100%; max-width: 596px; }
#quarto-document-content figure:has(img[src$="label-quiz-s2aas-fundamentals.svg"]):where(:scope, *) { --iot-figure-fit-width: 596px; }
#quarto-document-content img[src$="label-quiz-s2aas-impl-considerations-records.svg"]:where(:scope, *) { width: 100%; max-width: 899px; }
#quarto-document-content figure:has(img[src$="label-quiz-s2aas-impl-considerations-records.svg"]):where(:scope, *) { --iot-figure-fit-width: 899px; }
#quarto-document-content img[src$="label-quiz-s2aas-impl-considerations.svg"]:where(:scope, *) { width: 100%; max-width: 899px; }
#quarto-document-content figure:has(img[src$="label-quiz-s2aas-impl-considerations.svg"]):where(:scope, *) { --iot-figure-fit-width: 899px; }
#quarto-document-content img[src$="label-quiz-s2aas-impl-multi-layer-records.svg"]:where(:scope, *) { width: 100%; max-width: 942px; }
#quarto-document-content figure:has(img[src$="label-quiz-s2aas-impl-multi-layer-records.svg"]):where(:scope, *) { --iot-figure-fit-width: 942px; }
#quarto-document-content img[src$="label-quiz-s2aas-impl-patterns-records.svg"]:where(:scope, *) { width: 100%; max-width: 858px; }
#quarto-document-content figure:has(img[src$="label-quiz-s2aas-impl-patterns-records.svg"]):where(:scope, *) { --iot-figure-fit-width: 858px; }
#quarto-document-content img[src$="label-quiz-s2aas-impl-platforms-records.svg"]:where(:scope, *) { width: 100%; max-width: 858px; }
#quarto-document-content figure:has(img[src$="label-quiz-s2aas-impl-platforms-records.svg"]):where(:scope, *) { --iot-figure-fit-width: 858px; }
#quarto-document-content img[src$="label-quiz-s2aas-layer-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-s2aas-layer-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-s2aas-pattern-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-s2aas-pattern-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-s2aas-platform-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-s2aas-platform-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-s2aas-readiness-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-s2aas-readiness-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-s2aas-service-contract.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-s2aas-service-contract.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-s2aas-value-challenges-records.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-s2aas-value-challenges-records.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-sampling-compression-budget.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-sampling-compression-budget.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-sense-decide-drive.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-sense-decide-drive.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-sensor-bus-diagnostics-regions.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-sensor-bus-diagnostics-regions.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-sensor-calibration-proof.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-sensor-calibration-proof.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-sensor-conditioning-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-sensor-conditioning-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-sensor-data-decision-pipeline.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-sensor-data-decision-pipeline.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-sensor-fault-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-sensor-fault-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-sensor-power-budget-control.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-sensor-power-budget-control.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-sensor-selection-contract.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-sensor-selection-contract.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-sensor-selection-decision.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-sensor-selection-decision.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-servo-feedback-loop.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-servo-feedback-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-sigfox-continuity-risk.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-sigfox-continuity-risk.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-sigfox-deployment-control.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-sigfox-deployment-control.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-sigfox-managed-path.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-sigfox-managed-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-signal-conditioning-chain.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-signal-conditioning-chain.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-smart-city-service-loop.svg"]:where(:scope, *) { width: 100%; max-width: 780px; }
#quarto-document-content figure:has(img[src$="label-quiz-smart-city-service-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 780px; }
#quarto-document-content img[src$="label-quiz-smart-grid-control-loop.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-smart-grid-control-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-smart-home-scene-loop.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-smart-home-scene-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-smart-lens-reading-path.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-smart-lens-reading-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-soa-request-route.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-soa-request-route.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-soa-resilience-controls.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-soa-resilience-controls.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-soa-responsibility-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-soa-responsibility-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-state-machine-controls.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-state-machine-controls.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-stepper-motion-chain.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-stepper-motion-chain.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-storage-role-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-storage-role-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-systems-evolution-convergence.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-systems-evolution-convergence.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-time-series-platforms-selection.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-time-series-platforms-selection.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-time-series-query-proof.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-time-series-query-proof.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-time-series-storage-contract.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-time-series-storage-contract.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-tinyml-device-action-lifecycle.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-tinyml-device-action-lifecycle.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-traffic-evidence-decisions.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-traffic-evidence-decisions.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-transistor-selection-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-transistor-selection-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-uav-energy-decision-regions.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-uav-energy-decision-regions.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-uav-energy-planning-records.svg"]:where(:scope, *) { width: 100%; max-width: 789px; }
#quarto-document-content figure:has(img[src$="label-quiz-uav-energy-planning-records.svg"]):where(:scope, *) { --iot-figure-fit-width: 789px; }
#quarto-document-content img[src$="label-quiz-uav-fanet-fundamentals.svg"]:where(:scope, *) { width: 100%; max-width: 542px; }
#quarto-document-content figure:has(img[src$="label-quiz-uav-fanet-fundamentals.svg"]):where(:scope, *) { --iot-figure-fit-width: 542px; }
#quarto-document-content img[src$="label-quiz-uav-fanet-gateway-selection-records.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-uav-fanet-gateway-selection-records.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-uav-fanet-vanet-integration-records.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-uav-fanet-vanet-integration-records.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-uav-mission-avoidance-regions.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-uav-mission-avoidance-regions.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-uav-missions-avoidance-records.svg"]:where(:scope, *) { width: 100%; max-width: 789px; }
#quarto-document-content figure:has(img[src$="label-quiz-uav-missions-avoidance-records.svg"]):where(:scope, *) { --iot-figure-fit-width: 789px; }
#quarto-document-content img[src$="label-quiz-uav-network-features-records.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-uav-network-features-records.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-uav-swarm-coordination-records.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-uav-swarm-coordination-records.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-uav-topologies-records.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-uav-topologies-records.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-uav-traj-control-records.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-uav-traj-control-records.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-urllc-budget-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-urllc-budget-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-ux-worked-example-loop.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-ux-worked-example-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-v2x-safety-path.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-v2x-safety-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-validation-evidence-ladder.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-validation-evidence-ladder.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-virtual-hardware-proof.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-virtual-hardware-proof.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-visual-audio-output-boundaries.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-visual-audio-output-boundaries.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-volkswagen-maintenance-loop.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-volkswagen-maintenance-loop.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-wearable-insight-path.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-wearable-insight-path.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-wifi-client-airtime-regions.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-wifi-client-airtime-regions.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="label-quiz-wifi-iot.svg"]:where(:scope, *) { width: 100%; max-width: 1035px; }
#quarto-document-content figure:has(img[src$="label-quiz-wifi-iot.svg"]):where(:scope, *) { --iot-figure-fit-width: 1035px; }
#quarto-document-content img[src$="label-quiz-zrp-zone-bordercast-regions.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="label-quiz-zrp-zone-bordercast-regions.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="networking-core-bandwidth-capacity.svg"]:where(:scope, *) { width: 100%; max-width: 1029px; }
#quarto-document-content figure:has(img[src$="networking-core-bandwidth-capacity.svg"]):where(:scope, *) { --iot-figure-fit-width: 1029px; }
#quarto-document-content img[src$="networking-core-iot-protocol-stack.svg"]:where(:scope, *) { width: 100%; max-width: 1000px; }
#quarto-document-content figure:has(img[src$="networking-core-iot-protocol-stack.svg"]):where(:scope, *) { --iot-figure-fit-width: 1000px; }
#quarto-document-content img[src$="networking-core-link-budget-decision.svg"]:where(:scope, *) { width: 100%; max-width: 970px; }
#quarto-document-content figure:has(img[src$="networking-core-link-budget-decision.svg"]):where(:scope, *) { --iot-figure-fit-width: 970px; }
#quarto-document-content img[src$="networking-core-path-loss-environments.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="networking-core-path-loss-environments.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="part-237-000-modern-20260103140000.svg"]:where(:scope, *) { width: 100%; max-width: 1067px; }
#quarto-document-content figure:has(img[src$="part-237-000-modern-20260103140000.svg"]):where(:scope, *) { --iot-figure-fit-width: 1067px; }
#quarto-document-content img[src$="pdm-ml-decision-mobile-20260411.svg"]:where(:scope, *) { width: 100%; max-width: 576px; }
#quarto-document-content figure:has(img[src$="pdm-ml-decision-mobile-20260411.svg"]):where(:scope, *) { --iot-figure-fit-width: 576px; }
#quarto-document-content img[src$="pdm-thermal-architecture-mobile-20260411.svg"]:where(:scope, *) { width: 100%; max-width: 576px; }
#quarto-document-content figure:has(img[src$="pdm-thermal-architecture-mobile-20260411.svg"]):where(:scope, *) { --iot-figure-fit-width: 576px; }
#quarto-document-content img[src$="props-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 978px; }
#quarto-document-content figure:has(img[src$="props-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 978px; }
#quarto-document-content img[src$="step1-modern-20260212.svg"]:where(:scope, *) { width: 100%; max-width: 981px; }
#quarto-document-content figure:has(img[src$="step1-modern-20260212.svg"]):where(:scope, *) { --iot-figure-fit-width: 981px; }

/* FIG-MOBILE-READ-1: 390px browser census measurements;
 * width = min(floor(viewBox width), ceil(11.1 / (smallest rendered label / image width))).
 * The 0.1px margin covers census rounding. A figure with intrinsic labels
 * smaller than 11px at viewBox width stays at its natural canvas width.
 * The figure custom property exposes a CSS-only, precomputed scroll marker.
 */
@media (max-width: 600px) {
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/AdhocProdEnergyAwareImpact-modern-20260601.svg"])) { --iot-figure-mobile-read-width: 286px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-lorawan-device-classes-selection.svg"])) { --iot-figure-mobile-read-width: 308px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-mcu-mpu-evidence-checklist.svg"], img[src$="/fig-mcu-mpu-hybrid-boundary.svg"], img[src$="/fig-mcu-mpu-selection-record.svg"], img[src$="/fig-software-optimization-loop.svg"])) { --iot-figure-mobile-read-width: 320px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-hardware-optimization-data-path.svg"], img[src$="/fig-mcu-mpu-selection-route.svg"], img[src$="/fig-network-tools-selection-route.svg"])) { --iot-figure-mobile-read-width: 322px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-lorawan-security-otaa.svg"])) { --iot-figure-mobile-read-width: 327px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-lorawan-security-boundaries.svg"])) { --iot-figure-mobile-read-width: 339px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-soa-resilience-circuit-states.svg"])) { --iot-figure-mobile-read-width: 346px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-rfid-apps-industry-applications-reader-placement.svg"])) { --iot-figure-mobile-read-width: 350px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-edge-fog-bandwidth-pipeline.svg"])) { --iot-figure-mobile-read-width: 352px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-edge-fog-cloud-state-authority.svg"])) { --iot-figure-mobile-read-width: 354px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-wifi-6e-7-review-route.svg"])) { --iot-figure-mobile-read-width: 356px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-protocol-selection-decision-flow.svg"])) { --iot-figure-mobile-read-width: 361px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-lorawan-security-abp.svg"], img[src$="/fig-zigbee-fundamentals-evidence-map.svg"])) { --iot-figure-mobile-read-width: 366px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-mobile-wireless-propagation-licensing-evidence-map.svg"])) { --iot-figure-mobile-read-width: 372px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-signal-processing-sensor-dynamics-review.svg"])) { --iot-figure-mobile-read-width: 374px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-m2m-design-patterns-recovery-loop.svg"])) { --iot-figure-mobile-read-width: 382px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-context-energy-evidence-record.svg"])) { --iot-figure-mobile-read-width: 389px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-rpl-dag-dodag-parent-sequence.svg"])) { --iot-figure-mobile-read-width: 396px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/IoTMLLifecycleSixStages-modern-20260410.svg"], img[src$="/fig-cloud-centric-path.svg"], img[src$="/fig-edge-centric-gateway-path.svg"], img[src$="/fig-kalman-constant-velocity-model.svg"], img[src$="/fig-keyword-recognizer-build-sequence.svg"], img[src$="/fig-m2m-architectures-gateway-scheduling.svg"], img[src$="/fig-mfcc-stage-record-map.svg"], img[src$="/fig-real-sensor-dynamics-chain.svg"], img[src$="/fig-rpl-prod-review-evidence-gates.svg"], img[src$="/fig-testing-validation-evidence-route.svg"])) { --iot-figure-mobile-read-width: 398px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/pdm-ml-decision-mobile-20260411.svg"], img[src$="/pdm-thermal-architecture-mobile-20260411.svg"])) { --iot-figure-mobile-read-width: 400px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/UAVNetworkTopology-modern-20260102131000.svg"])) { --iot-figure-mobile-read-width: 404px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/SignalProcessingNyquistComparison-modern-20260317.svg"])) { --iot-figure-mobile-read-width: 405px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-sensor-pipeline-processing-calibration.svg"])) { --iot-figure-mobile-read-width: 407px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-time-series-queries-access-path.svg"])) { --iot-figure-mobile-read-width: 409px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-signal-processing-adc-fundamentals-nyquist.svg"])) { --iot-figure-mobile-read-width: 410px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-routing-lab-fundamentals-traceroute-signals.svg"])) { --iot-figure-mobile-read-width: 411px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-lorawan-comprehensive-scenario.svg"])) { --iot-figure-mobile-read-width: 413px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-m2m-implementations-rollout-loop.svg"])) { --iot-figure-mobile-read-width: 416px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-sensor-pipeline-overview-conditioning.svg"])) { --iot-figure-mobile-read-width: 417px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-protocol-antipatterns-evidence-ledger.svg"], img[src$="/fig-protocol-antipatterns-map.svg"], img[src$="/fig-wifi-6e-7-evidence-map.svg"], img[src$="/fig-wifi-deployment-planning-evidence-map.svg"], img[src$="/fig-wifi-deployment-planning-validation-loop.svg"], img[src$="/fig-wifi-frequency-bands-channel-review.svg"])) { --iot-figure-mobile-read-width: 418px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-rpl-prod-scenarios-mode-record.svg"])) { --iot-figure-mobile-read-width: 421px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/M2mCaseStudyRecord-modern-20260718.svg"], img[src$="/ProfileComparison-modern-20260212.svg"], img[src$="/Seminal-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 422px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-rfid-comprehensive-review-read-zone-loop.svg"])) { --iot-figure-mobile-read-width: 423px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-edge-bigdata-decision-path.svg"], img[src$="/fig-edge-reduction-options.svg"], img[src$="/fig-iot-standards-governance-map.svg"], img[src$="/fig-zigbee-topology-tradeoffs.svg"])) { --iot-figure-mobile-read-width: 424px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-802-15-4-phy-lineage-timing.svg"], img[src$="/fig-candela-lumen-lux-geometry.svg"], img[src$="/fig-cloud-placement-control-loop.svg"], img[src$="/fig-coap-message-exchange-patterns.svg"], img[src$="/fig-code-density-parallelism-branches.svg"], img[src$="/fig-cortexm-memory-register-map.svg"], img[src$="/fig-cortexm-xpsr-control-fields.svg"], img[src$="/fig-data-fusion-architectures-hierarchical-flow.svg"], img[src$="/fig-data-fusion-best-practices-benefit-evidence.svg"], img[src$="/fig-data-fusion-complementary-imu-body-planes.svg"], img[src$="/fig-data-fusion-introduction-cooperative-imu-baro.svg"], img[src$="/fig-data-fusion-introduction-stage-ladder.svg"], img[src$="/fig-edge-data-in-motion.svg"], img[src$="/fig-edge-store-forward-log.svg"], img[src$="/fig-iot-protocol-role-matrix.svg"], img[src$="/fig-iot-reference-model-level5-boundary.svg"], img[src$="/fig-kalman-predict-update-gaussians.svg"], img[src$="/fig-keyword-cnn-training-loop.svg"], img[src$="/fig-keyword-placement-crossover.svg"], img[src$="/fig-loadng-discovery-repair.svg"], img[src$="/fig-lora-chirp-class-tradeoff.svg"], img[src$="/fig-lora-sf-coded-rate-table.svg"], img[src$="/fig-lpwan-range-rate-selection.svg"], img[src$="/fig-m2m-case-studies-degraded-mode.svg"])) { --iot-figure-mobile-read-width: 426px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-mfcc-preemphasis-framing-window.svg"], img[src$="/fig-radio-duty-cycle-module-ledger.svg"], img[src$="/fig-rpl-rank-parent-choice.svg"], img[src$="/fig-rpl-storing-nonstoring-peer-path.svg"], img[src$="/fig-sdn-iot-applications-lvap-handoff.svg"], img[src$="/fig-sdn-iot-applications-mobiflow-prediction.svg"], img[src$="/fig-sdn-iot-applications-sdnwise-node-pipeline.svg"], img[src$="/fig-sdn-iot-applications-softwsn-control-surface.svg"], img[src$="/fig-step-charging-loss-comparison.svg"], img[src$="/fig-tcp-rst-udp-flood-defense.svg"], img[src$="/fig-tcpip-ownership-encapsulation.svg"], img[src$="/fig-threats-introduction-review-lens.svg"], img[src$="/fig-ultra-low-power-dependability.svg"], img[src$="/fig-vector-width-tail-peeling.svg"], img[src$="/fig-weightless-cellular-evolution.svg"], img[src$="/fig-wifi-contention-throughput.svg"], img[src$="/fig-wifi-isa100-fit.svg"], img[src$="/fig-xmpp-core-technology-fit.svg"], img[src$="/fig-xmpp-federated-stanza-route.svg"], img[src$="/fig-zigbee-frame-service-path.svg"], img[src$="/fig-zigbee-layered-landscape.svg"], img[src$="/fig-zigbee-mesh-self-healing.svg"], img[src$="/fig-zigbee-path-loss-tradeoff.svg"], img[src$="/fig-zigbee-profiles-wirelesshart-boundary.svg"])) { --iot-figure-mobile-read-width: 426px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-zigbee-stack-ownership.svg"], img[src$="/fig-zigbee-star-tree-mesh-roles.svg"], img[src$="/fig-zwave-source-route-floorplan.svg"])) { --iot-figure-mobile-read-width: 426px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-encryption-security-properties-map.svg"])) { --iot-figure-mobile-read-width: 428px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-ace-rule-mining-gates.svg"], img[src$="/fig-zigbee-thread-protocol-comparison-decision-record.svg"])) { --iot-figure-mobile-read-width: 431px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-network-signal-boundaries.svg"])) { --iot-figure-mobile-read-width: 439px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-m2m-design-patterns-map.svg"])) { --iot-figure-mobile-read-width: 441px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/CoradSystemArchitecture-modern-20260601.svg"], img[src$="/MermaidUnderstandingPeople53ce682-modern-20260212.svg"], img[src$="/fig-lpwan-intro-cost-analysis-map.svg"], img[src$="/fig-utf8-byte-width.svg"], img[src$="/fig-wifi-arch-fundamentals-map.svg"], img[src$="/fig-wifi-arch-mac-applications-map.svg"], img[src$="/fig-wifi-halow-fit-map.svg"])) { --iot-figure-mobile-read-width: 444px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-dt-industry-patterns.svg"], img[src$="/fig-nfc-modes-and-protocols-layer-stack.svg"])) { --iot-figure-mobile-read-width: 445px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/SignalProcessingAdcPipelineOverview-modern-20260317.svg"])) { --iot-figure-mobile-read-width: 453px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/IbeaconFormat-modern-20260212.svg"], img[src$="/fig-lorawan-pitfalls-classes.svg"])) { --iot-figure-mobile-read-width: 455px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-software-optimization-levers.svg"])) { --iot-figure-mobile-read-width: 456px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-m2m-design-patterns-selection-flow.svg"])) { --iot-figure-mobile-read-width: 458px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-mobile-review-cellular-architecture-gprs-claims.svg"], img[src$="/fig-mobile-wireless-technologies-basics-standards-family.svg"], img[src$="/fig-wireless-mcu-mode-currents.svg"], img[src$="/fig-z-wave-simulation-route-exercise.svg"])) { --iot-figure-mobile-read-width: 459px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-data-storage-databases-evidence-loop.svg"])) { --iot-figure-mobile-read-width: 464px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-sensor-pipeline-overview-transduction.svg"])) { --iot-figure-mobile-read-width: 469px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-paper-reading-three-pass.svg"])) { --iot-figure-mobile-read-width: 471px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/AdhocFundamentalsInfraVsAdhoc-modern-20260601.svg"], img[src$="/fig-rfid-security-and-privacy-layered-controls.svg"])) { --iot-figure-mobile-read-width: 472px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-privacy-intro-security.svg"], img[src$="/fig-wifi-halow-evidence-record.svg"])) { --iot-figure-mobile-read-width: 474px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-nfc-modes-and-protocols-handover-boundary.svg"])) { --iot-figure-mobile-read-width: 477px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-routing-lab-advanced-metric-compare.svg"])) { --iot-figure-mobile-read-width: 480px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-zigbee-matter-architecture-evidence-map.svg"], img[src$="/fig-zigbee-matter-interactions-evidence-map.svg"])) { --iot-figure-mobile-read-width: 483px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-rfid-tag-types-selection-path.svg"], img[src$="/fig-zigbee-security-evidence-boundary.svg"])) { --iot-figure-mobile-read-width: 485px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-m2m-fundamentals-tier-map.svg"], img[src$="/fig-wsn-coverage-types-decision-map.svg"], img[src$="/fig-zigbee-matter-commissioning-review-path.svg"], img[src$="/fig-zigbee-matter-data-model-evidence-path.svg"])) { --iot-figure-mobile-read-width: 486px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-m2m-comm-evolution-comparison.svg"])) { --iot-figure-mobile-read-width: 487px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-encryption-e1-hop-boundary.svg"], img[src$="/fig-prototyping-sw-testing-debug-loop.svg"], img[src$="/fig-prototyping-sw-testing-regression-record.svg"], img[src$="/fig-prototyping-sw-testing-route.svg"])) { --iot-figure-mobile-read-width: 490px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-rfid-standards-protocols-responsibility-map.svg"])) { --iot-figure-mobile-read-width: 494px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-energy-considerations-gates.svg"], img[src$="/fig-sensor-pipeline-processing-stages.svg"])) { --iot-figure-mobile-read-width: 497px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/EncryptionSummary-modern-20260212.svg"], img[src$="/fig-protocol-antipatterns-correction-loop.svg"], img[src$="/fig-s2aas-ownership-roles.svg"], img[src$="/fig-s2aas-rights-framework.svg"], img[src$="/fig-s2aas-value-stakeholder-map-records.svg"], img[src$="/fig-simulating-online-tools-evidence-path.svg"])) { --iot-figure-mobile-read-width: 500px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/BleAttackTimeline-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 502px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-energy-lowpower-power-gating.svg"], img[src$="/fig-sdn-iot-applications-constrained-policy.svg"])) { --iot-figure-mobile-read-width: 503px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-m2m-implementations-stack.svg"], img[src$="/fig-rfid-security-and-privacy-review-flow.svg"], img[src$="/fig-z-wave-simulation-boundary.svg"])) { --iot-figure-mobile-read-width: 504px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-edge-ai-hardware-validation-loop.svg"])) { --iot-figure-mobile-read-width: 506px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/CoradDroneKidsRoute-modern-20260601.svg"], img[src$="/fig-zigbee-security-review-record.svg"], img[src$="/fig-zigbee-sim-mesh-scenario-record.svg"], img[src$="/iiot-industrial-protocol-evolution-v2.svg"])) { --iot-figure-mobile-read-width: 508px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-edge-fog-pitfalls-map.svg"])) { --iot-figure-mobile-read-width: 512px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-wireless-prop-fundamentals-loss-stack.svg"])) { --iot-figure-mobile-read-width: 517px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/McuProgrammingRoute-modern-20260718.svg"])) { --iot-figure-mobile-read-width: 526px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/Mcu-modern-20260212.svg"], img[src$="/MermaidHarvesting1-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 527px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-blockchain-fundamentals-review-record.svg"], img[src$="/fig-energy-considerations-ledger.svg"], img[src$="/fig-energy-harvesting-source-map.svg"], img[src$="/fig-ideate-prototype-test-loop.svg"], img[src$="/fig-network-simulation-study-plan.svg"], img[src$="/fig-prototyping-hw-mcu-vs-mpu-decision-route.svg"], img[src$="/fig-prototyping-hw-mcu-vs-mpu-hybrid-boundary.svg"], img[src$="/fig-prototyping-hw-mcu-vs-mpu-review-record.svg"], img[src$="/fig-sigfox-deployment-plan.svg"], img[src$="/fig-sigfox-deployment-provisioning.svg"], img[src$="/fig-sw-platforms-device-management-route.svg"], img[src$="/fig-threats-attack-scenarios-review-loop.svg"], img[src$="/fig-threats-introduction-control-evidence-map.svg"])) { --iot-figure-mobile-read-width: 528px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-uwb-app-security-access-chain.svg"])) { --iot-figure-mobile-read-width: 530px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/DataCleaning-modern-20260103090000.svg"], img[src$="/LinearizationRangeCurve-modern-20260718.svg"], img[src$="/MermaidDeliveryModes-modern-20260212.svg"], img[src$="/ModbusRTUFrame-modern-20260103001000.svg"], img[src$="/NatTranslationTable-modern-20260212.svg"], img[src$="/TrafficAnalysisLayered-modern-20260212.svg"], img[src$="/fig-802-15-4-review-frame-efficiency-budget.svg"], img[src$="/fig-encryption-e1-frame-evidence.svg"], img[src$="/fig-multihop-apps-path-health.svg"], img[src$="/fig-pid-loop-open-loop.svg"], img[src$="/fig-prototyping-sw-ota-device-states.svg"], img[src$="/fig-sensor-pipeline-transmission-transaction.svg"], img[src$="/fig-zigbee-6lowpan-routing-rpl-direction-map.svg"])) { --iot-figure-mobile-read-width: 531px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/AMQPExchangeTypes-modern-20260102190000.svg"], img[src$="/AMQPMessageFlow-modern-20260102134500.svg"], img[src$="/DesignPlanningSpine-modern-20260718.svg"], img[src$="/DigitalTwinScopeHierarchy-modern-20260601.svg"], img[src$="/MermaidAmqpMessageFormat-modern-20260212.svg"], img[src$="/MermaidAmqpVsMqttAndUse2E4476d-modern-20260212.svg"], img[src$="/MermaidSdnOpenflow0-modern-20260212.svg"], img[src$="/MermaidSignalDomains-modern-20260212.svg"], img[src$="/OverheadReplicas-modern-20260103080000.svg"], img[src$="/SDNControllerArchitecture-modern-20260102132500.svg"], img[src$="/fig-zigbee-protocol-stack-evidence-map.svg"])) { --iot-figure-mobile-read-width: 533px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-sdn-prod-framework-control-placement.svg"], img[src$="/fig-wsn-deployment-sizing-route.svg"])) { --iot-figure-mobile-read-width: 535px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-lorawan-modulation-css.svg"], img[src$="/fig-m2m-comm-evolution-gateway.svg"], img[src$="/fig-z-wave-overview-topology-choice.svg"])) { --iot-figure-mobile-read-width: 536px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-mobile-gateway-protocols-lab-workflow.svg"], img[src$="/fig-wireless-prop-fading-interference-diagnosis.svg"], img[src$="/fig-xmpp-stanza-roles.svg"])) { --iot-figure-mobile-read-width: 537px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-prototyping-software-forms.svg"], img[src$="/fig-prototyping-software-route.svg"], img[src$="/fig-rfid-design-and-deployment-review-loop.svg"], img[src$="/fig-uwb-positioning-systems-architecture-choice.svg"], img[src$="/fig-wireless-prop-fading-interference-multipath.svg"])) { --iot-figure-mobile-read-width: 540px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-prototyping-hw-pcb-design-route.svg"])) { --iot-figure-mobile-read-width: 542px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-uwb-app-security-relay-review.svg"])) { --iot-figure-mobile-read-width: 548px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-sdn-openflow-challenges-constrained-iot.svg"], img[src$="/fig-signal-processing-essentials-chain.svg"])) { --iot-figure-mobile-read-width: 551px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-uwb-app-security-ops-loop.svg"])) { --iot-figure-mobile-read-width: 554px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/GattHierarchy-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 558px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-sdn-iot-applications-evidence-loop.svg"])) { --iot-figure-mobile-read-width: 560px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/MermaidNetworkingFundament14Be82db-modern-20260212.svg"], img[src$="/fig-mobile-gateway-protocols-lab-trace.svg"], img[src$="/fig-rpl-routing-modes-traffic.svg"], img[src$="/fig-sdn-prod-framework-route.svg"])) { --iot-figure-mobile-read-width: 561px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-sw-platforms-application-frameworks-evidence-matrix.svg"], img[src$="/fig-sw-platforms-application-frameworks-roles.svg"], img[src$="/fig-sw-platforms-cloud-review-record.svg"])) { --iot-figure-mobile-read-width: 563px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-uwb-ranging-techniques-map.svg"])) { --iot-figure-mobile-read-width: 567px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/Number37InBinary2-modern-20260103151700.svg"])) { --iot-figure-mobile-read-width: 568px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-data-storage-quality-check-layers.svg"])) { --iot-figure-mobile-read-width: 569px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-802-15-4-review-architecture-topology-roles.svg"], img[src$="/fig-energy-intro-budget.svg"])) { --iot-figure-mobile-read-width: 573px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-energy-sources-source-map.svg"], img[src$="/fig-mobile-gateway-challenges-store-forward.svg"])) { --iot-figure-mobile-read-width: 574px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-enablers-communications-family-fit.svg"])) { --iot-figure-mobile-read-width: 575px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-crypto-basics-hybrid-pattern.svg"], img[src$="/fig-sdn-of-openflow-protocol-proof-loop.svg"])) { --iot-figure-mobile-read-width: 579px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-802-15-4-features-coexistence-review.svg"], img[src$="/fig-edge-fog-cloud-advanced-map.svg"], img[src$="/fig-sdn-of-openflow-protocol-reactive-loop.svg"], img[src$="/fig-weightless-overview-variant-lanes.svg"])) { --iot-figure-mobile-read-width: 580px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-edge-fog-decision-framework-pattern-map.svg"], img[src$="/fig-energy-tools-workflow.svg"], img[src$="/fig-lorawan-rev-deploy-gateway-plan.svg"], img[src$="/fig-lorawan-rev-deploy-map.svg"], img[src$="/fig-rfid-design-and-deployment-portal-review.svg"])) { --iot-figure-mobile-read-width: 581px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-protocol-scenarios-workflow.svg"], img[src$="/fig-s2aas-considerations-operations-loop.svg"])) { --iot-figure-mobile-read-width: 583px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/RfidSecurityThreatModel-modern-20260718.svg"], img[src$="/fig-uwb-app-security-use-case-map.svg"])) { --iot-figure-mobile-read-width: 585px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/CellularModem-modern-20260103044500.svg"], img[src$="/MQTTFramework-modern-20260103123000.svg"], img[src$="/NFCDataExchange-modern-20260103080000.svg"], img[src$="/ProximitySensorArray-modern-20260102235500.svg"], img[src$="/QosRealServicePatterns-modern-20260718.svg"], img[src$="/fig-blockchain-limitations-readiness-record.svg"], img[src$="/fig-data-representation-review-loop.svg"], img[src$="/fig-production-case-studies-safety-timing.svg"], img[src$="/fig-protocol-selection-family-map.svg"], img[src$="/fig-sdn-controller-installation-strategy.svg"], img[src$="/fig-testing-unit-tests-review-record.svg"])) { --iot-figure-mobile-read-width: 588px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-interactive-design-prototyping-record.svg"])) { --iot-figure-mobile-read-width: 592px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-pdu-encapsulation-modern-20260212.svg"], img[src$="/fig-signal-processing-essentials-decisions.svg"])) { --iot-figure-mobile-read-width: 593px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/MermaidHardwareAndSoftwar1Fa6512-modern-20260212.svg"], img[src$="/ProtocolDataUnits-modern-20260103123000.svg"], img[src$="/fig-energy-measurement-workflow.svg"], img[src$="/fig-format-decision-tree-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 597px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-uav-traj-decision-record.svg"])) { --iot-figure-mobile-read-width: 601px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-prototyping-hw-components-route.svg"], img[src$="/fig-prototyping-hw-introduction-route.svg"], img[src$="/fig-rpl-trickle-cycle.svg"])) { --iot-figure-mobile-read-width: 603px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-prototyping-sw-ota-architecture.svg"])) { --iot-figure-mobile-read-width: 606px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-z-wave-architecture-home-id.svg"], img[src$="/fig-z-wave-architecture-route-repair.svg"], img[src$="/fig-z-wave-routing-source-route.svg"])) { --iot-figure-mobile-read-width: 607px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-uav-fanet-vanet-integration-map.svg"])) { --iot-figure-mobile-read-width: 608px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-rfid-frequency-bands-overview.svg"])) { --iot-figure-mobile-read-width: 610px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-ref-architecture-selection-flow-split.svg"])) { --iot-figure-mobile-read-width: 612px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/DeviceEvolutionEraTimeline-modern-20260322.svg"], img[src$="/Diagram2-modern-20260108122931.svg"], img[src$="/EdgeDataAcquisitio-modern-20260108122939.svg"], img[src$="/HRT-modern-20260212.svg"], img[src$="/M2mIotEvolution-modern-20260108122927.svg"], img[src$="/ProductionCaseDecisionRoute-modern-20260718.svg"], img[src$="/ReliabilityErrorDetectionRecord-modern-20260718.svg"], img[src$="/ZWaveRoutingEvidencePacket-modern-20260718.svg"], img[src$="/ZWaveSimulationScenario-modern-20260718.svg"], img[src$="/fig-energy-sources-usable-budget.svg"], img[src$="/fig-iot-security-hardware-vulnerabilities-review-flow.svg"], img[src$="/fig-prototyping-hw-pcb-design-layout-zones.svg"], img[src$="/fig-sdn-prod-framework-controller-model.svg"], img[src$="/fig-sdn-prod-framework-observability.svg"], img[src$="/fig-sdn-prod-framework-pillars.svg"], img[src$="/fig-sdn-prod-framework-resilience.svg"], img[src$="/fig-sdn-prod-framework-security-boundary.svg"], img[src$="/fig-software-optimization-sleep.svg"], img[src$="/fig-state-machines-iot-placement.svg"])) { --iot-figure-mobile-read-width: 625px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-mobile-gateway-protocols-lab-validation.svg"], img[src$="/fig-soc-architecture-review-route.svg"])) { --iot-figure-mobile-read-width: 626px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/BlePowerDecision-modern-20260212.svg"], img[src$="/BleSecurityCircuit-modern-20260212.svg"], img[src$="/ConnectionCycleComparison-modern-20260212.svg"], img[src$="/ControllerEvidenceMatrix-modern-20260718.svg"], img[src$="/DtlsVsTlsComparisonVariant-modern-20260212.svg"], img[src$="/HeaderByteComparison-modern-20260212.svg"], img[src$="/JitterComparison-modern-20260212.svg"], img[src$="/MermaidUwbFundBandwidth-modern-20260212.svg"], img[src$="/OobPairingOptions-modern-20260212.svg"], img[src$="/PerformanceSummaryHybrid-modern-20260212.svg"], img[src$="/RfidCouplingTypes-modern-20260212.svg"], img[src$="/StateMachineComparison-modern-20260212.svg"], img[src$="/TcpHandshakeComparison-modern-20260212.svg"], img[src$="/fig-privacy-techniques-selection.svg"], img[src$="/fig-soa-fundamentals-choice-map.svg"], img[src$="/fig-zero-trust-device-identity-credential-patterns.svg"])) { --iot-figure-mobile-read-width: 627px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/RfidReadZonePatternEvidence-modern-20260718.svg"])) { --iot-figure-mobile-read-width: 629px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/PitfallsResilienceFlow-modern-20260324.svg"], img[src$="/fig-architecture-lab-evidence-board.svg"], img[src$="/fig-lpwan-fundamentals-architecture.svg"], img[src$="/fig-lpwan-fundamentals-fit.svg"], img[src$="/fig-network-fundamentals-requirements-map.svg"], img[src$="/fig-power-interfaces-boundary.svg"], img[src$="/fig-power-interfaces-state-ledger.svg"], img[src$="/fig-soc-architecture-data-paths.svg"], img[src$="/fig-soc-architecture-power-islands.svg"], img[src$="/fig-soc-architecture-radio-boundary.svg"])) { --iot-figure-mobile-read-width: 630px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/MermaidAccuracy0-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 635px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/MermaidMatterStack-modern-20260212.svg"], img[src$="/MermaidPrototypingHardware23d186c-modern-20260212.svg"], img[src$="/fig-cloud-deployment-models-fit-map.svg"], img[src$="/fig-cloud-platforms-broker-queue-stream.svg"], img[src$="/fig-mobile-fund-cellular-spectrum-review-map.svg"], img[src$="/fig-pbd-implementation-route.svg"], img[src$="/fig-uav-energy-budget-records.svg"], img[src$="/fig-uav-energy-planning-loop-records.svg"], img[src$="/fig-uav-mission-pattern-map-records.svg"])) { --iot-figure-mobile-read-width: 636px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-ref-architecture-pitfalls-map.svg"], img[src$="/fig-ref-architecture-pitfalls-review-record.svg"], img[src$="/fig-ref-architecture-selection-inputs.svg"], img[src$="/fig-rpl-trickle-states.svg"])) { --iot-figure-mobile-read-width: 637px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/AdhocHybridZrpBordercastSequence-modern-20260601.svg"], img[src$="/AdhocHybridZrpDecisionFlow-modern-20260601.svg"], img[src$="/CalculusRelationship-modern-20260212.svg"], img[src$="/CoAPMessages-modern-20260103123000.svg"], img[src$="/DSDVWhenALinkBreaks-modern-20260103090000.svg"], img[src$="/DesignApproachCostComparison-modern-20260212.svg"], img[src$="/I2CBus-modern-20260103033000.svg"], img[src$="/Master-modern-20260212.svg"], img[src$="/MermaidDesignModelForIot1176f2d7-modern-20260212.svg"], img[src$="/MermaidIiotIndustry42B9844d-modern-20260212.svg"], img[src$="/MermaidIndoor1-modern-20260212.svg"], img[src$="/MermaidInteroperability15a2939-modern-20260212.svg"], img[src$="/fig-interoperability-review-record.svg"], img[src$="/fig-nfc-real-world-tag-path.svg"], img[src$="/fig-opcua-address-space-record.svg"], img[src$="/fig-paper-reading-workflow.svg"], img[src$="/fig-s2aas-considerations-risk-matrix-records.svg"], img[src$="/fig-s2aas-multilayer-control-plane.svg"], img[src$="/fig-testing-pyramid-modern-20260212.svg"], img[src$="/step1-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 639px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/SmartHomeRoiHierarchy-modern-20260325.svg"], img[src$="/fig-rfid-apps-hardware-integration-event-pipeline.svg"], img[src$="/fig-s2aas-fundamentals-service-stack.svg"])) { --iot-figure-mobile-read-width: 640px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/SmartHomeMultiSensorFusion-modern-20260409.svg"])) { --iot-figure-mobile-read-width: 646px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/AppFrameworkReviewRecord-modern-20260718.svg"])) { --iot-figure-mobile-read-width: 648px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/AppFrameworkRoute-modern-20260718.svg"], img[src$="/fig-sw-platforms-application-frameworks-boundary.svg"])) { --iot-figure-mobile-read-width: 649px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/PowerFormulaSelector-modern-20260428.svg"])) { --iot-figure-mobile-read-width: 650px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-mqtt-qos-levels-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 651px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/6LoWPAN-modern-20260103070000.svg"], img[src$="/6LoWPANHeaderCompression-modern-20260103000500.svg"], img[src$="/6lowpanSecurityLayers-modern-20260102121500.svg"], img[src$="/AsymmetricEncryption-modern-20260103151700.svg"], img[src$="/DataFormatSelectionOverview-modern-20260317.svg"], img[src$="/DeliveryReplicas-modern-20260103070000.svg"], img[src$="/DutyCycleConcept-modern-20260212.svg"], img[src$="/ElectromagneticSpectrum-modern-20260103123000.svg"], img[src$="/EnergyCasePatternMap-modern-20260718.svg"], img[src$="/EpidemicRoutingExample5-modern-20260103090000.svg"], img[src$="/IdsSignalFlowPipeline-modern-20260718.svg"], img[src$="/InterestExample-modern-20260103090000.svg"], img[src$="/MermaidDataRepresentation09c71b0-modern-20260212.svg"], img[src$="/MermaidInteractiveDesign14Dca35a-modern-20260212.svg"], img[src$="/MermaidLorawanRevPhy0-modern-20260212.svg"], img[src$="/MermaidNetworkMechanisms51d0259-modern-20260212.svg"], img[src$="/MermaidSdnOpenflow2-modern-20260212.svg"], img[src$="/PacketHeaderFieldsOverview-modern-20260321.svg"], img[src$="/PathLossModel-modern-20260103023000.svg"], img[src$="/START-modern-20260212.svg"], img[src$="/SecurityDesignPrinciplesEvidenceLoop-modern-20260718.svg"], img[src$="/SuperframeCycle-modern-20260222.svg"], img[src$="/TechnologySelectionFunnel-modern-20260718.svg"], img[src$="/TrafficTestReviewLoop-modern-20260718.svg"])) { --iot-figure-mobile-read-width: 653px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/UnderstandingIoTSecurity-modern-20260103151700.svg"], img[src$="/WirelessParadigmShift-modern-20260322.svg"], img[src$="/WorkedExamplesFramework-modern-20260324.svg"], img[src$="/WsnCoverageProblemTypesEvidenceRecord-modern-20260718.svg"], img[src$="/fig-automotive-release-evidence-gate.svg"], img[src$="/fig-botnet-defense-stateflow.svg"], img[src$="/fig-communication-and-protocol-bridging-examples-topologies.svg"], img[src$="/fig-design-thinking-iot-loop.svg"], img[src$="/fig-han-middleware-bridge-lifecycle.svg"], img[src$="/fig-ieee-ietf-layer-contracts.svg"], img[src$="/fig-iot-security-intrusion-detection-placement.svg"], img[src$="/fig-iot-std-interoperability-contract.svg"], img[src$="/fig-key-spec-parameters-modern-20260212.svg"], img[src$="/fig-lorawan-end-to-end-stack.svg"], img[src$="/fig-lorawan-modulation-boundary.svg"], img[src$="/fig-lpwan-fund-link-budget-margin-gate.svg"], img[src$="/fig-m2m-comm-platforms-service-map.svg"], img[src$="/fig-mobile-gateway-overview-boundary.svg"], img[src$="/fig-multihop-apps-fit-map.svg"], img[src$="/fig-multihop-fundamentals-foundation.svg"], img[src$="/fig-nb-iot-channel-access-flow.svg"], img[src$="/fig-nb-iot-technical-spec-map.svg"], img[src$="/fig-nbiot-deployment-review-workflow.svg"], img[src$="/fig-nbiot-deployment-risk-record.svg"])) { --iot-figure-mobile-read-width: 653px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-nist-csf2-route.svg"], img[src$="/fig-overhead-analysis-fragmentation-gate.svg"], img[src$="/fig-pid-tuning-safe-workflow.svg"], img[src$="/fig-privacy-principles-core.svg"], img[src$="/fig-processes-systems-overview-blocks.svg"], img[src$="/fig-processes-systems-overview-decomposition.svg"], img[src$="/fig-processes-systems-overview-ipo.svg"], img[src$="/fig-protocol-selection-series-map.svg"], img[src$="/fig-protocol-systematic-workflow.svg"], img[src$="/fig-prototyping-software-layers.svg"], img[src$="/fig-prototyping-sw-best-practices-config.svg"], img[src$="/fig-reliability-retry-sequencing-decision-record.svg"], img[src$="/fig-s2aas-multilayer-handoff-flow-records.svg"], img[src$="/fig-safeguards-protection-map.svg"], img[src$="/fig-sensor-to-network-pipeline-map.svg"], img[src$="/fig-soc-architecture-selection-record.svg"], img[src$="/fig-sw-platforms-cloud-evidence-matrix.svg"], img[src$="/fig-sw-platforms-device-management-rollout-boundary.svg"], img[src$="/fig-testing-security-review-record.svg"], img[src$="/fig-topologies-failures-route.svg"], img[src$="/fig-uav-topologies-decision-map.svg"], img[src$="/fig-uav-topologies-decision-record.svg"], img[src$="/fig-uwb-ranging-techniques-quality.svg"], img[src$="/fig-zigbee-application-profile-evidence-map.svg"])) { --iot-figure-mobile-read-width: 653px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-zigbee-beacon-superframe.svg"], img[src$="/fig-zigbee-matter-sdk-environment-evidence-map.svg"], img[src$="/fig-zigbee-matter-transport-decision-record.svg"], img[src$="/fig-zigbee-sim-mesh-evidence-loop.svg"], img[src$="/fig-zigbee-thread-advanced-evidence-map.svg"])) { --iot-figure-mobile-read-width: 653px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-rpl-message-flow-sequence.svg"])) { --iot-figure-mobile-read-width: 655px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-mobile-fund-cellular-spectrum-selection-flow.svg"], img[src$="/fig-mobile-fund-em-waves-relationship.svg"], img[src$="/fig-s2aas-deployment-placement-map.svg"])) { --iot-figure-mobile-read-width: 658px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/Adhoc-modern-20260103070000.svg"])) { --iot-figure-mobile-read-width: 659px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/EightFacetsThermostatExample-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 661px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/AMQPRoutingTopology-modern-20260102190000.svg"], img[src$="/ErrorDetectionComparisonOverview-modern-20260317.svg"], img[src$="/HumanCentricSensingEvidenceRecord-modern-20260718.svg"], img[src$="/MermaidLpwanComparison-modern-20260212.svg"], img[src$="/MermaidMeasurement1-modern-20260212.svg"], img[src$="/MermaidUavIntro0-modern-20260212.svg"], img[src$="/PbdAssessmentEvidenceRecord-modern-20260718.svg"], img[src$="/PrivacyRegulationMappingRoute-modern-20260718.svg"], img[src$="/RplLabsAndQuiz13-modern-20260108131302.svg"], img[src$="/SensorSelectionEvidenceMap-modern-20260718.svg"], img[src$="/TransportProtocols-modern-20260108131302.svg"], img[src$="/fig-applications-sensors-hardware-selection-flow.svg"], img[src$="/fig-cortexm-armv6m-memory-map.svg"], img[src$="/fig-mfcc-spectrum-mel-filterbank.svg"], img[src$="/fig-mobile-sensing-inference-costs.svg"], img[src$="/fig-prototyping-kits-ai-wireless-energy-integration-boundary.svg"], img[src$="/fig-prototyping-sw-environments-route.svg"], img[src$="/fig-rpl-dodag-control-sequence.svg"], img[src$="/fig-rpl-worked-topology.svg"], img[src$="/fig-sdn-controller-selection-interface-fit.svg"], img[src$="/fig-underwater-hasl-cycle.svg"], img[src$="/fig-underwater-opportunistic-localization.svg"], img[src$="/fig-wifi-security-provisioning-record.svg"], img[src$="/fig-wireless-prop-fundamentals-site-factors.svg"])) { --iot-figure-mobile-read-width: 663px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/DsdvNeighborGraph-modern-20260718.svg"], img[src$="/LED-modern-20260212.svg"], img[src$="/MermaidCoap2Ae108d-modern-20260212.svg"], img[src$="/S2aasPrivacyLifecycle-modern-20260718.svg"], img[src$="/ZigbeeAnalyzerFrameLayers-modern-20260718.svg"], img[src$="/ZigbeeCommonMistakeEvidenceMap-modern-20260718.svg"], img[src$="/ZigbeeCommonMistakeReviewRecord-modern-20260718.svg"], img[src$="/applications-pricing-metrics-dashboard.svg"], img[src$="/fig-automotive-datasheet-qualification-route.svg"], img[src$="/fig-blockchain-smart-contracts-readiness-record.svg"], img[src$="/fig-cicd-iot-rollback-and-rollout-gate-path.svg"], img[src$="/fig-communication-models-iot-push-pull.svg"], img[src$="/fig-design-thinking-evidence-board.svg"], img[src$="/fig-e5-renewal-state-machine.svg"], img[src$="/fig-empathy-map-evidence.svg"], img[src$="/fig-reference-model-evidence-map.svg"], img[src$="/fig-state-machine-fundamentals-transition-table.svg"], img[src$="/fig-testing-security-evidence-route.svg"], img[src$="/fig-wsn-coverage-core-concepts-map.svg"], img[src$="/fig-zigbee-thread-advanced-review-record.svg"])) { --iot-figure-mobile-read-width: 666px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/MermaidConnectingTogether4904489-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 667px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/BLEiBeacons-modern-20260103114200.svg"], img[src$="/fig-pid-tuning-application-patterns.svg"])) { --iot-figure-mobile-read-width: 668px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/RfidAppsLabsAndAssessmentReleaseLoop-modern-20260718.svg"], img[src$="/fig-energy-measurement-chain.svg"])) { --iot-figure-mobile-read-width: 673px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/Wifi802154OperationEvidenceRecord-modern-20260718.svg"], img[src$="/fig-mobile-gateway-overview-functions.svg"])) { --iot-figure-mobile-read-width: 675px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/DefinitionsComplementary-modern-20260322.svg"], img[src$="/MermaidCoap05db55e-modern-20260212.svg"], img[src$="/fig-uav-energy-route-gates-records.svg"])) { --iot-figure-mobile-read-width: 678px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/OptimizationMeasurementLoop-modern-20260718.svg"])) { --iot-figure-mobile-read-width: 679px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/DtnStoreCarryForwardSequence-modern-20260601.svg"], img[src$="/HealthcareAlertFatiguePipeline-modern-20260325.svg"], img[src$="/L-modern-20260212.svg"], img[src$="/MermaidMeasurement2-modern-20260212.svg"], img[src$="/PCBDesignFlow-modern-20260102235500.svg"], img[src$="/RefArchitectureSelectionPatternFit-modern-20260718.svg"], img[src$="/SmartHomeBASIntegration-modern-20260325.svg"], img[src$="/fig-blockchain-fundamentals-cold-chain.svg"], img[src$="/fig-mobile-wireless-design-considerations-design-loop.svg"], img[src$="/fig-multihop-fundamentals-route.svg"], img[src$="/fig-nfc-tags-and-ndef-write-release-loop.svg"], img[src$="/fig-pid-theory-selection.svg"], img[src$="/fig-prototyping-kits-industrial-wearable-evidence-matrix.svg"], img[src$="/fig-prototyping-kits-robotics-agricultural-review-record.svg"], img[src$="/fig-prototyping-kits-smart-home-environmental-evidence-matrix.svg"], img[src$="/fig-sim-vs-hardware-modern-20260212.svg"], img[src$="/fig-uav-swarm-task-allocation-check-loop.svg"], img[src$="/fig-zigbee-thread-impl-deploy-evidence-stack.svg"], img[src$="/fig-zigbee-thread-impl-deploy-release-record.svg"], img[src$="/fig-zigbee-thread-intro-stack-boundary.svg"])) { --iot-figure-mobile-read-width: 680px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-cicd-iot-monitoring-and-tools-record.svg"])) { --iot-figure-mobile-read-width: 681px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/AmqpDeliveryGuarantees-modern-20260212.svg"], img[src$="/DtlsArchitecture-modern-20260108122932.svg"], img[src$="/MWSN-modern-20260103090000.svg"], img[src$="/MermaidAccuracy1-modern-20260212.svg"], img[src$="/MermaidAccuracy3-modern-20260212.svg"], img[src$="/MermaidAccuracy4-modern-20260212.svg"], img[src$="/MermaidAdhocApplications-modern-20260212.svg"], img[src$="/MermaidAdhocReactiveDsr1A2ce11-modern-20260212.svg"], img[src$="/MermaidAdhocReactiveDsr4C0f131-modern-20260212.svg"], img[src$="/MermaidAmqp091Model-modern-20260212.svg"], img[src$="/MermaidConnectingTogether53c1d5e-modern-20260212.svg"], img[src$="/MermaidContextAwareEnergy300a4d2-modern-20260212.svg"], img[src$="/MermaidFeedbackDesign-modern-20260212.svg"], img[src$="/MermaidIiotIndustry40Ec4fca-modern-20260108131314.svg"], img[src$="/MermaidIiotIndustry43F92297-modern-20260108131314.svg"], img[src$="/SensorPipelinePacketBudget-modern-20260317.svg"], img[src$="/fig-app-protocols-realtime-browser-paths.svg"], img[src$="/fig-cloud-computing-fundamentals-workload-boundary.svg"], img[src$="/fig-cloud-platforms-review-record.svg"], img[src$="/fig-cloud-security-monitoring-loop.svg"], img[src$="/fig-data-shape-spectrum.svg"], img[src$="/fig-digital-data-scale-shift.svg"], img[src$="/fig-e2-e3-decision.svg"], img[src$="/fig-indirect-revenue-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 682px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-iot-data-converged-network.svg"], img[src$="/fig-iot-data-separate-networks.svg"], img[src$="/fig-ip-boundary-threat-map.svg"], img[src$="/fig-mobile-fund-em-waves-propagation-evidence.svg"], img[src$="/fig-mobile-fund-frequency-bands-selection-flow.svg"], img[src$="/fig-realtime-historical-four-vs.svg"], img[src$="/fig-rpl-message-flow-directions.svg"], img[src$="/fig-sdn-of-openflow-protocol-check-route.svg"], img[src$="/fig-zigbee-matter-cluster-conformance-record.svg"], img[src$="/fig-zigbee-matter-device-type-evidence-map.svg"], img[src$="/fig-zigbee-matter-fragmentation-evidence-map.svg"], img[src$="/fig-zigbee-matter-fragmentation-response-record.svg"])) { --iot-figure-mobile-read-width: 682px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-soc-architecture-accelerator-route.svg"])) { --iot-figure-mobile-read-width: 683px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/MermaidNetPerfCircuit-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 684px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/PitfallsTcoBreakdown-modern-20260324.svg"], img[src$="/WorkedExamplesPortfolio-modern-20260324.svg"], img[src$="/fig-lpwan-fundamentals-characteristics.svg"], img[src$="/fig-soc-architecture-memory-security.svg"])) { --iot-figure-mobile-read-width: 687px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/MermaidLinkBudgetWaterfall-modern-20260212.svg"], img[src$="/Pathlossisfrequencydependent-modern-20260103100000.svg"], img[src$="/UdpCommunication-modern-20260108122912.svg"], img[src$="/fig-interactive-tool-review-loop.svg"], img[src$="/fig-modbus-register-model.svg"], img[src$="/fig-modbus-tcp-gateway.svg"], img[src$="/fig-nbiot-deployment-evidence-matrix.svg"], img[src$="/fig-nbiot-deployment-mode-map.svg"], img[src$="/fig-qos-core-parameter-map.svg"], img[src$="/fig-qos-core-rate-limits.svg"], img[src$="/fig-qos-core-token-leaky.svg"], img[src$="/fig-qos-real-domain-map.svg"], img[src$="/fig-sdn-arch-route.svg"], img[src$="/fig-sdn-controller-selection-evidence-loop.svg"], img[src$="/fig-sdn-of-openflow-protocol-table-miss.svg"], img[src$="/fig-topologies-analysis-metrics.svg"], img[src$="/fig-topologies-analysis-route.svg"], img[src$="/fig-uwb-positioning-systems-deployment-review.svg"])) { --iot-figure-mobile-read-width: 689px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-zigbee-matter-implementation-evidence-route.svg"], img[src$="/fig-zigbee-matter-transport-boundary-map.svg"])) { --iot-figure-mobile-read-width: 692px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-consortiums-ecosystem-contract.svg"])) { --iot-figure-mobile-read-width: 693px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/AdhocApplicationsRoutingSelection-modern-20260601.svg"], img[src$="/ArchitectureLabLayerMap-modern-20260718.svg"], img[src$="/BipolarJunctionTransistor-modern-20260103151700.svg"], img[src$="/BluetoothPowerClasses-modern-20260103151700.svg"], img[src$="/BoardOnlyBringupBaselineLoop-modern-20260718.svg"], img[src$="/DTLSHandshake-modern-20260102130500.svg"], img[src$="/DefenseInDepthLayers-modern-20260718.svg"], img[src$="/EncryptionLayerDecision-modern-20260222.svg"], img[src$="/FieldTrialEvidenceLoop-modern-20260718.svg"], img[src$="/InputOutput-modern-20260103114200.svg"], img[src$="/InterfacePowerCompatibilityGate-modern-20260718.svg"], img[src$="/IotTroubleshootingFlowchart-modern-20260212.svg"], img[src$="/LorawanClassComparison-modern-20260108122932.svg"], img[src$="/MatterDeviceTypes-modern-20260103000000.svg"], img[src$="/Mermaid5gDeviceCategories1-modern-20260212.svg"], img[src$="/MermaidBandwidthThroughputGoodputVariant-modern-20260212.svg"], img[src$="/MermaidFeaturePipeline-modern-20260212.svg"], img[src$="/MermaidMicrocontrollerProg1F74c0b-modern-20260212.svg"], img[src$="/MermaidMicrocontrollerProg421e0a9-modern-20260212.svg"], img[src$="/MobileSinkEvidenceMap-modern-20260718.svg"], img[src$="/MqttPubsubFlow-modern-20260411.svg"], img[src$="/NetworkDesignEvidenceChain-modern-20260718.svg"], img[src$="/PowerInterfaceReviewFlow-modern-20260718.svg"], img[src$="/PowerSignalDebugPath-modern-20260718.svg"])) { --iot-figure-mobile-read-width: 694px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/PrototypingSwLibrariesSelectionGates-modern-20260718.svg"], img[src$="/SPISignal-modern-20260103123000.svg"], img[src$="/SecurityFrameworkReviewFlow-modern-20260718.svg"], img[src$="/SigfoxDeploymentOperationsHandoff-modern-20260718.svg"], img[src$="/SimulationValidationEvidenceLadder-modern-20260718.svg"], img[src$="/StateMachinesIotSectionMap-modern-20260718.svg"], img[src$="/TCPvsUDPComparison-modern-20260102190000.svg"], img[src$="/ThreadBorder-modern-20260103044500.svg"], img[src$="/ThreadOperationsRecoveryRecord-modern-20260718.svg"], img[src$="/TopologiesSelectionRoute-modern-20260718.svg"], img[src$="/Wifi802154CoexistenceEvidenceRecord-modern-20260718.svg"], img[src$="/WifiSecurityProvisioningFlow-modern-20260718.svg"], img[src$="/WiredCommunicationStandards-modern-20260103114200.svg"], img[src$="/WsnRouteIntroEvidenceRecord-modern-20260718.svg"], img[src$="/WsnTrackingInteractiveEvidenceRecord-modern-20260718.svg"], img[src$="/ZigBeePublicProfiles-modern-20260103114200.svg"], img[src$="/ZigbeeProtocolSelectionRecord-modern-20260718.svg"], img[src$="/fig-blockchain-fundamentals-pattern-map.svg"], img[src$="/fig-blockchain-iot-review-evidence.svg"], img[src$="/fig-dev-tools-development-review-record.svg"], img[src$="/fig-dt-intro-ladder.svg"], img[src$="/fig-energy-considerations-loop.svg"], img[src$="/fig-interop-fundamentals-layer-checks.svg"], img[src$="/fig-iot-data-science-trust-layers.svg"])) { --iot-figure-mobile-read-width: 694px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-iot-security-common-mistakes-review-flow.svg"], img[src$="/fig-iot-security-network-segmentation-flow-record.svg"], img[src$="/fig-iot-security-secure-boot-evidence-record.svg"], img[src$="/fig-isa100-security-boundaries.svg"], img[src$="/fig-mobile-phone-participatory-sensing-acceptance-gates.svg"], img[src$="/fig-nfc-simulation-risk-matrix.svg"], img[src$="/fig-offloading-breakeven-gates.svg"], img[src$="/fig-paper-security-triad.svg"], img[src$="/fig-pid-feedback-placement.svg"], img[src$="/fig-pid-theory-response.svg"], img[src$="/fig-protocol-challenge-shortlist.svg"], img[src$="/fig-prototyping-hw-getting-started-debug-ladder.svg"], img[src$="/fig-prototyping-hw-mcu-vs-mpu-evidence-map.svg"], img[src$="/fig-ref-models-alternatives-lens-families.svg"], img[src$="/fig-reliability-retry-sequencing-review-loop.svg"], img[src$="/fig-rfid-apps-hardware-integration-physical-fit.svg"], img[src$="/fig-rfid-apps-labs-and-assessment-antenna-placement.svg"], img[src$="/fig-rfid-apps-labs-and-assessment-inventory-trace.svg"], img[src$="/fig-rpl-worked-parent-choice.svg"], img[src$="/fig-s2aas-core-subscription-lifecycle.svg"], img[src$="/fig-s2aas-patterns-pattern-map-records.svg"], img[src$="/fig-s2aas-value-challenge-matrix-records.svg"], img[src$="/fig-s2aas-value-trust-gates.svg"], img[src$="/fig-sdn-api-contract.svg"])) { --iot-figure-mobile-read-width: 694px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-sdn-openflow-challenges-capability-drift.svg"], img[src$="/fig-sdn-prod-case-studies-baseline.svg"], img[src$="/fig-secure-data-iot-protocols-layers.svg"], img[src$="/fig-secure-data-iot-protocols-review-record.svg"], img[src$="/fig-sensor-selection-scorecard-gate.svg"], img[src$="/fig-sw-platforms-cloud-route.svg"], img[src$="/fig-sw-platforms-edge-evidence-matrix.svg"], img[src$="/fig-sw-platforms-edge-review-record.svg"], img[src$="/fig-testing-environmental-review-record.svg"], img[src$="/fig-testing-fundamentals-evidence-pyramid.svg"], img[src$="/fig-text-encoding-pipeline.svg"], img[src$="/fig-threats-owasp-top10-evidence-workflow.svg"], img[src$="/fig-time-series-queries-rollup-evidence.svg"], img[src$="/fig-traffic-analysis-fundamentals-evidence-record.svg"], img[src$="/fig-transport-fund-overview-review-map.svg"], img[src$="/fig-uwb-fundamentals-ranging-stack.svg"], img[src$="/fig-wsn-communication-pattern-map.svg"], img[src$="/fig-wsn-data-aggregation-function-fit.svg"], img[src$="/fig-wsn-deployment-sizing-record.svg"], img[src$="/fig-wsn-human-dtn-record.svg"], img[src$="/fig-wsn-human-dtn-route.svg"], img[src$="/fig-wsn-human-participatory-sensing-route.svg"], img[src$="/fig-wsn-ov-applications-fit-map.svg"], img[src$="/fig-wsn-swarm-iot-boundary.svg"])) { --iot-figure-mobile-read-width: 694px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-wsn-trickle-evidence-map.svg"], img[src$="/fig-xmpp-presence-pubsub.svg"], img[src$="/fig-zigbee-6lowpan-fund-roles.svg"], img[src$="/fig-zigbee-6lowpan-sec-boundary.svg"], img[src$="/fig-zigbee-6lowpan-sec-lab-path.svg"], img[src$="/fig-zigbee-future-standards-boundary-map.svg"], img[src$="/fig-zigbee-thread-impl-dev-integration-record.svg"])) { --iot-figure-mobile-read-width: 694px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/AnomalyTypes-modern-20260108122928.svg"], img[src$="/IotTesting-modern-20260212.svg"], img[src$="/MermaidConnectingTogether3D2fd38-modern-20260212.svg"], img[src$="/Zigbee6LowpanBorderRouterRecord-modern-20260718.svg"], img[src$="/measure-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 696px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-pid-tuning-zn-evidence.svg"])) { --iot-figure-mobile-read-width: 699px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/MermaidElectricity85116d6-modern-20260212.svg"], img[src$="/fig-prototyping-kits-industrial-wearable-route.svg"])) { --iot-figure-mobile-read-width: 700px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/MermaidCoap3A453c7-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 702px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-data-storage-quality-gate-map.svg"], img[src$="/fig-mobile-location-privacy-map.svg"], img[src$="/fig-mobile-wifi-probe-metadata.svg"], img[src$="/fig-pid-tuning-response-evidence.svg"], img[src$="/fig-s2aas-deployment-model-comparison.svg"])) { --iot-figure-mobile-read-width: 704px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/EnablersCommunicationsWorkflowSpine-modern-20260718.svg"])) { --iot-figure-mobile-read-width: 705px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/DifferentServiceModels-modern-20260103090000.svg"], img[src$="/DirectedDiffusionTwoPhasePull-modern-20260103090000.svg"], img[src$="/MermaidEncryptionOverview-modern-20260212.svg"], img[src$="/MermaidMathematicalFoundat08802d0-modern-20260108131314.svg"], img[src$="/MermaidMobileFundEmWaves2-modern-20260212.svg"], img[src$="/MermaidMobilePhoneAsASe4D7cd44-modern-20260212.svg"], img[src$="/MermaidNetworkDesignAndS00250d0-modern-20260212.svg"], img[src$="/ParticleFiltersForLocation-modern-20260103090000.svg"], img[src$="/PerspectiveTensions-modern-20260322.svg"], img[src$="/RoutingConnectivityPathEvidence-modern-20260718.svg"], img[src$="/TLSSession-modern-20260103021500.svg"], img[src$="/Users-modern-20260212.svg"], img[src$="/WeightlessSummary-modern-20260103123000.svg"], img[src$="/ZeroTrustArchitecture-modern-20260102130000.svg"], img[src$="/fig-6lowpan-fragment-mesh-fields.svg"], img[src$="/fig-iot-security-fundamentals-pyramid.svg"], img[src$="/fig-isa100-stack-layer-boundaries.svg"], img[src$="/fig-mobile-wireless-technologies-basics-family-map.svg"], img[src$="/fig-prototyping-kits-ai-wireless-energy-roles.svg"], img[src$="/fig-sigfox-overview-fit.svg"], img[src$="/fig-threat-impact-consequence-scale.svg"], img[src$="/fig-ux-design-fundamentals-principle-map.svg"])) { --iot-figure-mobile-read-width: 706px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-wsn-sm-components-role-map.svg"])) { --iot-figure-mobile-read-width: 707px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/AdcSelectionDesignGuide-modern-20260317.svg"], img[src$="/AdhocHybridZrpComponents-modern-20260601.svg"], img[src$="/BitwiseOperationsVariantIot-modern-20260212.svg"], img[src$="/CertSelectionRoute-modern-20260718.svg"], img[src$="/DataFusionArchitecture-modern-20260102134500.svg"], img[src$="/HTTP2-modern-20260212.svg"], img[src$="/LoRaWANClassComparison-modern-20260102124000.svg"], img[src$="/LpwanIntroduction-modern-20260108122937.svg"], img[src$="/MermaidDesignModelForIot9F71cc3-modern-20260212.svg"], img[src$="/MermaidDesignThinkingTimeline-modern-20260212.svg"], img[src$="/MermaidLowpower1-modern-20260212.svg"], img[src$="/MermaidNbiotComp0-modern-20260212.svg"], img[src$="/MermaidOperationCosts1-modern-20260212.svg"], img[src$="/MermaidPidImpl1-modern-20260212.svg"], img[src$="/MermaidSdnProductionFramework0-modern-20260212.svg"], img[src$="/MermaidSdnProductionIndex-modern-20260212.svg"], img[src$="/MermaidServerDiscovery-modern-20260212.svg"], img[src$="/MermaidStateSync-modern-20260212.svg"], img[src$="/MermaidUwbPosArch-modern-20260212.svg"], img[src$="/MermaidWiredProtocolTradeoffVariant-modern-20260212.svg"], img[src$="/Number37InBinary-modern-20260103151700.svg"], img[src$="/OtaArchitecture-modern-20260212.svg"], img[src$="/PerspectivesTaxonomy-modern-20260322.svg"], img[src$="/PrivacyPreservingArchitecture-modern-20260108122925.svg"])) { --iot-figure-mobile-read-width: 710px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/ProtocolOverheadComparisonOverview-modern-20260317.svg"], img[src$="/PrototypeFidelityTimeline-modern-20260212.svg"], img[src$="/RS232SignalVoltageLevels-modern-20260103123000.svg"], img[src$="/RayTomlinson-modern-20260212.svg"], img[src$="/RefModelTranslationMap-modern-20260718.svg"], img[src$="/RequirementsTradeOffs-modern-20260325.svg"], img[src$="/ResponsiveDesignPatterns-modern-20260212.svg"], img[src$="/RoboticsVsAgricultural-modern-20260212.svg"], img[src$="/Routing02-modern-20260108131211.svg"], img[src$="/SensorDataEncapsulationJourney-modern-20260317.svg"], img[src$="/SensorSelectionDecisionTree-modern-20260212.svg"], img[src$="/SignalAliasingSamplingScenarios-modern-20260317.svg"], img[src$="/SignalConditioningChain-modern-20260102131500.svg"], img[src$="/SummaryMultidevice-modern-20260212.svg"], img[src$="/UartFrame-modern-20260108123004.svg"], img[src$="/WPA2FourWayHandshake-modern-20260103151700.svg"], img[src$="/WsnIotBoundaryEvidenceMap-modern-20260718.svg"], img[src$="/WsnTrackingFundamentalsEvidenceLoop-modern-20260718.svg"], img[src$="/fig-6lowpan-four-stack-cases.svg"], img[src$="/fig-6lowpan-iphc-reconstruction.svg"], img[src$="/fig-always-on-vision-energy.svg"], img[src$="/fig-blockchain-iot-fit-gates.svg"], img[src$="/fig-bluetooth-classic-access-code.svg"], img[src$="/fig-bluetooth-classic-header-pipeline.svg"])) { --iot-figure-mobile-read-width: 710px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-ciot-service-and-prb-paths.svg"], img[src$="/fig-comm-bridge-pubsub-routing-flow.svg"], img[src$="/fig-datasheet-anatomy-modern-20260212.svg"], img[src$="/fig-dt-use-case-map.svg"], img[src$="/fig-edge-fog-four-v-boundary.svg"], img[src$="/fig-lora-chirp-rate.svg"], img[src$="/fig-m2m-comm-platforms-scheduling.svg"], img[src$="/fig-m2m-platform-handoffs.svg"], img[src$="/fig-mqtt-method-topic-tls.svg"], img[src$="/fig-mqtt-qos-packet-ledger.svg"], img[src$="/fig-npn-relay-driver.svg"], img[src$="/fig-paper-architecture-map.svg"], img[src$="/fig-prototyping-sw-architecture-boundaries.svg"], img[src$="/fig-prototyping-sw-languages-constraint-gates.svg"], img[src$="/fig-radio-energy-per-delivered-bit.svg"], img[src$="/fig-rfid-apps-labs-and-assessment-read-zone.svg"], img[src$="/fig-routing-fund-tables-lpm.svg"], img[src$="/fig-scaling-frequency-multicore-timeline.svg"], img[src$="/fig-threats-attack-scenarios-calibration-tampering.svg"], img[src$="/fig-underwater-virtual-layer-custody.svg"], img[src$="/fig-wifi-dcf-contention-ledger.svg"], img[src$="/fig-wifi-krack-wpa3-map.svg"], img[src$="/fig-wifi-wep-tkip-migration.svg"], img[src$="/fig-wmsn-coalition-choice.svg"])) { --iot-figure-mobile-read-width: 710px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-zero-trust-network-segmentation-shift.svg"], img[src$="/networking-core-iot-protocol-stack.svg"])) { --iot-figure-mobile-read-width: 710px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/DtnSocialCastBoundedReplication-modern-20260601.svg"], img[src$="/fig-routing-fund-basics-hop-by-hop.svg"], img[src$="/fig-s2aas-multilayer-layer-contracts-records.svg"])) { --iot-figure-mobile-read-width: 711px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-sdn-openflow-challenges-security.svg"])) { --iot-figure-mobile-read-width: 712px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/AmqpMessageLifecycle-modern-20260212.svg"], img[src$="/ZigbeeProtocolSelectionEvidenceMap-modern-20260718.svg"], img[src$="/applications-pricing-tier-framework.svg"], img[src$="/fig-802-15-4-operation-state-flow.svg"], img[src$="/fig-direct-exchange-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 714px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/CoapFeaturesAndL-modern-20260108122928.svg"], img[src$="/FieldTrialReviewRecord-modern-20260718.svg"], img[src$="/FigDtlsHandshake-modern-20260212.svg"], img[src$="/RplDodagFloorLayout-modern-20260212.svg"], img[src$="/fig-sdn-of-openflow-protocol-pipeline.svg"], img[src$="/fig-sdn-of-openflow-protocol-security-failure.svg"], img[src$="/fig-sdn-openflow-challenges-check-route.svg"], img[src$="/fig-sdn-openflow-challenges-controller-placement.svg"], img[src$="/fig-sdn-openflow-challenges-rule-state.svg"], img[src$="/fig-sdn-openflow-challenges-table-miss.svg"])) { --iot-figure-mobile-read-width: 716px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/L0-modern-20260212.svg"], img[src$="/LoRaWANProtocol-modern-20260103123000.svg"], img[src$="/MermaidRoutingTables0-modern-20260212.svg"], img[src$="/Raw-modern-20260212.svg"], img[src$="/ReliabilityErrorHandlingDecisionRecord-modern-20260718.svg"], img[src$="/S2aaSLayerModel-modern-20260102132000.svg"], img[src$="/SimulatingPlatformEmulationDebugRecord-modern-20260718.svg"], img[src$="/StructureAndCommonSymbolsForDiodes-modern-20260103151700.svg"], img[src$="/edinburgh-Part100-000-modern-20260103090000.svg"], img[src$="/fig-edge-fog-use-case-review-loop.svg"], img[src$="/fig-iot-security-network-segmentation-zones.svg"], img[src$="/fig-multihop-fundamentals-review-record.svg"], img[src$="/fig-network-simulation-tools-review-record.svg"], img[src$="/fig-privacy-intro-inference.svg"], img[src$="/fig-project-planning-evidence-board.svg"], img[src$="/fig-prototyping-hw-best-practices-loop.svg"], img[src$="/fig-prototyping-hw-best-practices-record-map.svg"], img[src$="/fig-rfid-apps-industry-applications-rollout-loop.svg"], img[src$="/fig-topologies-selection-gates.svg"], img[src$="/fig-traffic-analysis-tools-review-record.svg"], img[src$="/fig-wsn-kcov-review-route.svg"], img[src$="/fig-zigbee-thread-security-matter-record.svg"], img[src$="/kalman-filter-cycle-modern.svg"], img[src$="/part-237-000-modern-20260103140000.svg"])) { --iot-figure-mobile-read-width: 719px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/props-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 719px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-coap-udp-pattern-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 720px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/MermaidConsumerAcks-modern-20260212.svg"], img[src$="/fig-nfc-modes-and-protocols-activation-flow.svg"])) { --iot-figure-mobile-read-width: 721px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/VoltageDivider-modern-20260103024500.svg"])) { --iot-figure-mobile-read-width: 722px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/AccelerometerSpecificationsSpecSheet4-modern-20260103114200.svg"], img[src$="/CalibrationImportance-modern-20260212.svg"], img[src$="/Capacitors-modern-20260103151700.svg"], img[src$="/CommonSymbolsFoResistors-modern-20260103151700.svg"], img[src$="/ComparisonBetweenCoAPAndMQTT-modern-20260103123000.svg"], img[src$="/FANETTopology-modern-20260102235500.svg"], img[src$="/Inductors-modern-20260103151700.svg"], img[src$="/MWSN2-modern-20260103070000.svg"], img[src$="/Networking-modern-20260103090000.svg"], img[src$="/fig-data-monetization-variant-pipeline-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 723px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/SmartHomeFogArchitecture-modern-20260108122923.svg"], img[src$="/WirelesshartTdmaGraphRouting-modern-20260718.svg"], img[src$="/fig-nfc-simulation-ndef-trace.svg"])) { --iot-figure-mobile-read-width: 726px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/Active-modern-20260212.svg"], img[src$="/MermaidDesignModelForIot1009d431-modern-20260212.svg"], img[src$="/Multipath-modern-20260103114200.svg"], img[src$="/WorkedExamplesFloodCatchment-modern-20260324.svg"], img[src$="/WsnEnergyManagementReviewRoute-modern-20260718.svg"], img[src$="/fig-actuators-classifications-hydraulic-cylinder.svg"], img[src$="/fig-blockchain-limitations-data-placement.svg"], img[src$="/fig-s2aas-fundamentals-governance-loop.svg"], img[src$="/fig-uav-fanet-vanet-message-flow.svg"])) { --iot-figure-mobile-read-width: 729px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/ButTheyArentStatic-modern-20260103114200.svg"], img[src$="/Dataaggregation-modern-20260103090000.svg"], img[src$="/DsrFundamentalsDecision-modern-20260601.svg"], img[src$="/M2MPlatform-modern-20260103044500.svg"], img[src$="/MermaidAdhocDtnAndSocial12D3128b-modern-20260212.svg"], img[src$="/RplSummaryToolsDecisionRecord-modern-20260718.svg"], img[src$="/RplSummaryToolsRecordStack-modern-20260718.svg"], img[src$="/SigfoxServiceRiskDiagnosticsTrail-modern-20260718.svg"], img[src$="/StateMachinesIotPatternFamilies-modern-20260718.svg"], img[src$="/fig-e3-e4-boundaries.svg"], img[src$="/fig-mobile-fund-propagation-design-evidence-map.svg"], img[src$="/fig-uav-topologies-pattern-comparison.svg"])) { --iot-figure-mobile-read-width: 730px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/AdHocFANETs-modern-20260103070000.svg"], img[src$="/AnomalyPipelines-concepts-modern-20260221.svg"], img[src$="/BacktoGPS-modern-20260103100000.svg"], img[src$="/CloudProductionLaunchRecord-modern-20260718.svg"], img[src$="/CoAPServer-modern-20260103044500.svg"], img[src$="/ConnectedVsDisconnected-modern-20260103070000.svg"], img[src$="/CurbsidePickup-modern-20260102234500.svg"], img[src$="/DataAtTheEdgeArchitecture-modern-20260103080000.svg"], img[src$="/DataVolume-modern-20260212.svg"], img[src$="/DesignModelPatternsComponentsRecord-modern-20260718.svg"], img[src$="/FramingTechniquesOverview-modern-20260317.svg"], img[src$="/MermaidBinaryAdcFlow-modern-20260212.svg"], img[src$="/MermaidDutyCyclingAndTop087bac4-modern-20260108132049.svg"], img[src$="/MermaidEdgeFogComputing10857caa-modern-20260108132049.svg"], img[src$="/MermaidElectronics6Fb356c-modern-20260212.svg"], img[src$="/MermaidNetworkingAddressin10924f23-modern-20260212.svg"], img[src$="/MermaidOptimisticUi-modern-20260212.svg"], img[src$="/MultiTouchpointInteraction-modern-20260212.svg"], img[src$="/PowerSourceDecision-modern-20260212.svg"], img[src$="/PricingStrategies-modern-20260108122915.svg"], img[src$="/RequirementsTechnologyDecisionTree-modern-20260325.svg"], img[src$="/ResistorIotApplications-modern-20260212.svg"], img[src$="/SecureCoAP-modern-20260103021500.svg"], img[src$="/SensorClassification-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 732px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/SmartHomeVoiceLatency-modern-20260325.svg"], img[src$="/StarTopologyRouter-modern-20260212.svg"], img[src$="/VehicleSafetyEvolution-modern-20260212.svg"], img[src$="/WcagPourPrinciples-modern-20260212.svg"], img[src$="/fig-communication-and-protocol-bridging-gateway-lab-failure.svg"], img[src$="/fig-connected-devices-form-factors-record.svg"], img[src$="/fig-dns-resolver-delegation.svg"], img[src$="/fig-isa100-secure-join-lifecycle.svg"], img[src$="/fig-lorawan-quiz-bank-readiness.svg"], img[src$="/fig-mobile-review-cellular-architecture-fit-map.svg"], img[src$="/fig-production-resources-evidence-pack.svg"], img[src$="/fig-prototyping-hw-components-actuator-chain.svg"], img[src$="/fig-prototyping-kits-robotics-agricultural-integration-boundary.svg"], img[src$="/fig-threat-modelling-and-mitigation-review-loop.svg"], img[src$="/fig-uav-swarm-state-record.svg"], img[src$="/fig-uav-traj-strategy-map-records.svg"], img[src$="/fig-wsn-directed-diffusion-review-record.svg"])) { --iot-figure-mobile-read-width: 732px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/ChlorinationControl-modern-20260102234500.svg"], img[src$="/MermaidAccuracy2-modern-20260212.svg"], img[src$="/MermaidAdhocReactiveDsr0E4e4d4-modern-20260212.svg"], img[src$="/fig-dt-sync-cadence.svg"], img[src$="/fig-e2-packet-evidence.svg"], img[src$="/fig-enablers-selection-power-ledger.svg"], img[src$="/fig-key-provisioning-boundaries.svg"], img[src$="/fig-prototyping-kits-robotics-agricultural-evidence-matrix.svg"], img[src$="/fig-prototyping-kits-smart-home-environmental-review-record.svg"], img[src$="/fig-sdn-iot-applications-fit-map.svg"], img[src$="/fig-secure-comms-protocol-fit.svg"], img[src$="/wearable-market-segments-modern-20260505.svg"])) { --iot-figure-mobile-read-width: 734px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/CodeSnippetAdaptationRoute-modern-20260718.svg"], img[src$="/M2mFundamentalsSystemPath-modern-20260718.svg"], img[src$="/M2mImplementationsMessagePipeline-modern-20260718.svg"], img[src$="/McuMpuOsBoundary-modern-20260718.svg"], img[src$="/MobileGatewayOverviewSuitability-modern-20260718.svg"], img[src$="/MobileLabsCoverageEvidenceFlow-modern-20260718.svg"], img[src$="/MobilePhoneApisAccessFlow-modern-20260718.svg"], img[src$="/MobilePhoneAsSensorReviewPath-modern-20260718.svg"], img[src$="/OptimizationBottleneckContributors-modern-20260718.svg"])) { --iot-figure-mobile-read-width: 737px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-802-15-4-review-architecture-boundary.svg"], img[src$="/fig-rfid-standards-protocols-selection-lanes.svg"])) { --iot-figure-mobile-read-width: 739px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-iot-security-common-mistakes-control-map.svg"])) { --iot-figure-mobile-read-width: 740px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/MermaidDesignModelForIot1226977b-modern-20260212.svg"], img[src$="/ProductionDecisionRecord-modern-20260718.svg"], img[src$="/SwarmBehaviorEvidenceRecord-modern-20260718.svg"])) { --iot-figure-mobile-read-width: 741px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-design-cicd-update-lifecycle-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 742px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/LevelShifter-modern-20260103024500.svg"], img[src$="/MermaidAdhocReactiveDsr3Bc0d1e-modern-20260212.svg"], img[src$="/MermaidInterfaceModalityQuadrant-modern-20260212.svg"], img[src$="/PowerOf2-modern-20260103151700.svg"], img[src$="/fig-app-protocols-realtime-hybrid-workflow.svg"])) { --iot-figure-mobile-read-width: 743px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/EnergyCaseReviewChain-modern-20260718.svg"])) { --iot-figure-mobile-read-width: 745px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/Datagram-modern-20260103140000.svg"], img[src$="/Frame-modern-20260212.svg"], img[src$="/IPv6Header-modern-20260212.svg"], img[src$="/MermaidNetworkingAddressin1200ac91-modern-20260212.svg"], img[src$="/MermaidNetworkingAddressin8724701-modern-20260212.svg"], img[src$="/MermaidSensorCircuitsFundamentals1-modern-20260212.svg"], img[src$="/SensorLabChecklist-modern-20260212.svg"], img[src$="/The7LevelsOfAnInternetOfThingsReferenceModel-modern-20260103114200.svg"], img[src$="/fig-rogue-device-traffic-traces.svg"], img[src$="/fig-sdn-anomaly-detection-confidence-gate.svg"], img[src$="/fig-sdn-anomaly-detection-signal-sources.svg"], img[src$="/fig-sdn-controller-route.svg"], img[src$="/fig-sdn-controller-selection-route.svg"], img[src$="/fig-sensing-privacy-data-flow.svg"], img[src$="/fig-verification-validation-modern-20260212.svg"], img[src$="/fig-weightless-overview-architecture-roles.svg"], img[src$="/mfg-modern-20260212.svg"], img[src$="/networking-core-bandwidth-capacity.svg"])) { --iot-figure-mobile-read-width: 746px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-cicd-iot-monitoring-and-tools-evidence-loop.svg"], img[src$="/fig-communication-and-protocol-bridging-gateway-lab-record.svg"])) { --iot-figure-mobile-read-width: 748px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/M2mImplBufferManagement-modern-20260108122929.svg"], img[src$="/MermaidConnectingTogether6B6a989-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 749px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/AiWirelessEnergyEvidenceMatrix-modern-20260718.svg"], img[src$="/CoAPBlockTransfer-modern-20260103000000.svg"], img[src$="/CoapFundamentalsAn-modern-20260108122928.svg"], img[src$="/Errors-modern-20260212.svg"], img[src$="/MermaidI2cProtocol-modern-20260212.svg"], img[src$="/MermaidRbacFlow-modern-20260212.svg"], img[src$="/MermaidSignalConditioning1-modern-20260212.svg"], img[src$="/MermaidSpiProtocol-modern-20260212.svg"], img[src$="/Vehicle1-modern-20260212.svg"], img[src$="/fig-prototyping-kits-ai-wireless-energy-route.svg"], img[src$="/fig-prototyping-sw-environments-toolchain-record.svg"], img[src$="/label-quiz-nb-iot-power-optimization-flow.svg"])) { --iot-figure-mobile-read-width: 750px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/LorawanLinkBudgetAdr-modern-20260718.svg"], img[src$="/QueueFailureRouting-modern-20260718.svg"])) { --iot-figure-mobile-read-width: 753px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/ContextAnalysisRecord-modern-20260718.svg"], img[src$="/DefenseInDepthControls-modern-20260718.svg"], img[src$="/EthicsReviewRecord-modern-20260718.svg"], img[src$="/MermaidUavFanetRoutingTaxonomy-modern-20260212.svg"], img[src$="/MultihopApplicationDecisionRecord-modern-20260718.svg"], img[src$="/ZigbeeStandardsReviewRecord-modern-20260718.svg"])) { --iot-figure-mobile-read-width: 754px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/BlePairingDefenseLayers-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 756px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/ADCDAC-modern-20260212.svg"], img[src$="/Cost-modern-20260212.svg"], img[src$="/EdgeContainerDeployment-modern-20260102190000.svg"], img[src$="/EdgeRevArchDecisionTree-modern-20260212.svg"], img[src$="/EnergyNeutralLedger-modern-20260718.svg"], img[src$="/RPLDodagFormation-modern-20260102133000.svg"], img[src$="/fig-cloud-production-observability-loop.svg"], img[src$="/fig-mobile-labs-cellular-modem-bringup-flow.svg"], img[src$="/fig-nfc-tag-debug-map.svg"], img[src$="/fig-pid-feedback-types.svg"])) { --iot-figure-mobile-read-width: 758px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/DutyCycleWorkedExamplesStateLedger-modern-20260718.svg"], img[src$="/GainScheduleBoundaries-modern-20260718.svg"], img[src$="/HardwarePlatformRoleMap-modern-20260718.svg"], img[src$="/HardwarePlatformSelectionFunnel-modern-20260718.svg"], img[src$="/HardwarePrototypeReviewRecord-modern-20260718.svg"], img[src$="/PowerInterfaceReviewRoute-modern-20260718.svg"])) { --iot-figure-mobile-read-width: 759px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/HDFSBlockReplicationArchitecture-modern-20260807.svg"], img[src$="/fig-actuators-classifications-rack-pinion.svg"], img[src$="/fig-privacy-compliance-intro-choice.svg"])) { --iot-figure-mobile-read-width: 760px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/AMQPFrameStructure-modern-20260212.svg"], img[src$="/MermaidNetworkingFundament13977aaa-modern-20260212.svg"], img[src$="/MermaidNetworkingFundament158a5693-modern-20260212.svg"], img[src$="/TestingValidationReleaseGate-modern-20260718.svg"], img[src$="/WsnApplicationReviewRoute-modern-20260718.svg"], img[src$="/WsnOverviewReviewEvidenceMap-modern-20260718.svg"], img[src$="/fig-communication-and-protocol-bridging-gateway-lab-workbench.svg"], img[src$="/fig-dt-worked-example-flow.svg"], img[src$="/fig-feedback-mechanisms-loop-roles.svg"], img[src$="/fig-wsn-common-mistakes-evidence-record.svg"])) { --iot-figure-mobile-read-width: 762px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-nfc-tags-and-ndef-capability-map.svg"])) { --iot-figure-mobile-read-width: 763px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/AnomalyDetectionProofLoop-modern-20260718.svg"], img[src$="/CipherChallengeEvidenceMap-modern-20260718.svg"], img[src$="/EnergyToolValidationLoop-modern-20260718.svg"], img[src$="/IotSecurityClaimReviewRecord-modern-20260718.svg"], img[src$="/Mermaid5gNetworkSlicing1-modern-20260212.svg"], img[src$="/MermaidMicrocontrollerProg5515858-modern-20260212.svg"], img[src$="/PROFINET_TIERS-modern-20260212.svg"], img[src$="/PcbPowerReturnPathReview-modern-20260718.svg"], img[src$="/PrototypingSwLanguagesRoute-modern-20260718.svg"], img[src$="/QuantizationCodeStepFit-modern-20260718.svg"], img[src$="/TransmissionLinkChoiceEvidenceMap-modern-20260718.svg"], img[src$="/VoiceCodecFamilyMap-modern-20260718.svg"], img[src$="/fig-blockchain-iot-architecture-boundaries.svg"], img[src$="/fig-blockchain-iot-series-map.svg"], img[src$="/fig-blockchain-limitations-pressure-map.svg"], img[src$="/fig-compute-versus-transmit-energy.svg"], img[src$="/fig-iot-validation-gates.svg"], img[src$="/fig-key-management-lifecycle-evidence.svg"], img[src$="/fig-paper-reading-review-record.svg"], img[src$="/fig-predication-inline-tradeoff.svg"], img[src$="/fig-prototyping-kits-ai-wireless-energy-review-record.svg"], img[src$="/fig-qos-real-constrained-links.svg"], img[src$="/fig-reliability-error-handling-review-loop.svg"], img[src$="/fig-rfid-standards-protocols-data-path.svg"])) { --iot-figure-mobile-read-width: 764px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-routing-fund-ttl-hop-count.svg"], img[src$="/fig-sdn-controller-boundaries.svg"], img[src$="/fig-spec-sheet-first-pass-route.svg"], img[src$="/fig-testing-unit-tests-evidence-boundary.svg"], img[src$="/fig-z-wave-routing-sleeping-endpoints.svg"], img[src$="/fig-zigbee-6lowpan-iphc-review-path.svg"], img[src$="/label-quiz-wifi-iot.svg"])) { --iot-figure-mobile-read-width: 764px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/M2MResourceTree-modern-20260102235500.svg"], img[src$="/PositionEquations-modern-20260103114200.svg"], img[src$="/fig-ace-energy-preserving-plan.svg"], img[src$="/fig-app-protocols-realtime-sip-register.svg"], img[src$="/fig-bluetooth-protected-bitstream.svg"], img[src$="/fig-cellular-iot-overview-generations.svg"], img[src$="/fig-data-fusion-complementary-imu-accel-tilt.svg"], img[src$="/fig-data-fusion-complementary-imu-calibration-pipeline.svg"], img[src$="/fig-data-fusion-complementary-imu-filter-loop.svg"], img[src$="/fig-edge-storage-scale-retention.svg"], img[src$="/networking-core-link-budget-decision.svg"])) { --iot-figure-mobile-read-width: 765px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-blockchain-limitations-device-boundary.svg"])) { --iot-figure-mobile-read-width: 767px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-ecc-key-agreement.svg"])) { --iot-figure-mobile-read-width: 770px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/AnomalyML-concepts-modern-20260221.svg"], img[src$="/CloudProductionObservabilityLoop-modern-20260718.svg"], img[src$="/RevenueLtvComparison-modern-20260108122913.svg"], img[src$="/fig-accuracy-precision-comparison-modern-20260212.svg"], img[src$="/fig-blockchain-fundamentals-hybrid-boundary.svg"], img[src$="/fig-pid-tuning-manual-route.svg"], img[src$="/fig-zigbee-matter-commissioning-review-record.svg"])) { --iot-figure-mobile-read-width: 771px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/HwCaseStudyRoute-modern-20260718.svg"], img[src$="/NodeBehaviorDumbRecoveryRecord-modern-20260718.svg"], img[src$="/PaperArchitectureSynthesisRecord-modern-20260718.svg"])) { --iot-figure-mobile-read-width: 772px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/NfcIotArchitectureChoice-modern-20260718.svg"], img[src$="/NfcSecurityReleaseEvidence-modern-20260718.svg"], img[src$="/NfcSecurityThreatControlMap-modern-20260718.svg"], img[src$="/NodeBehaviorClassificationMatrix-modern-20260718.svg"], img[src$="/NodeBehaviorClassificationRecord-modern-20260718.svg"])) { --iot-figure-mobile-read-width: 773px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/AdcResolutionComparison-modern-20260108122912.svg"])) { --iot-figure-mobile-read-width: 776px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/EnablersCommunicationsRecord-modern-20260718.svg"])) { --iot-figure-mobile-read-width: 777px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/Aliasing-modern-20260103114200.svg"], img[src$="/DACCircuit-modern-20260103151700.svg"], img[src$="/DirectExchange-modern-20260108122922.svg"], img[src$="/HealthcareDeviceClassification-modern-20260325.svg"], img[src$="/I2C-modern-20260103123000.svg"], img[src$="/LPWANLinkBudget-modern-20260103000000.svg"], img[src$="/LorawanSimLabCheckMap-modern-20260718.svg"], img[src$="/LpwanCellularSelectionRecord-modern-20260718.svg"], img[src$="/MermaidBandwidthCoverage-modern-20260212.svg"], img[src$="/MermaidProcessesFundamenta34563b5-modern-20260212.svg"], img[src$="/MobileSinkComparison-modern-20260108122953.svg"], img[src$="/NFCCommunicationModes-modern-20260102131500.svg"], img[src$="/NfcRealWorldPatternMap-modern-20260718.svg"], img[src$="/P-modern-20260212.svg"], img[src$="/WirelesshartFundamentalsArchitecture-modern-20260718.svg"], img[src$="/fig-empathize-define-field-loop.svg"], img[src$="/fig-nb-iot-uplink-tones.svg"], img[src$="/fig-paper-wsn-energy-lens.svg"], img[src$="/fig-signal-processing-sensor-dynamics-bandwidth.svg"], img[src$="/fig-simulating-online-tools-review-record.svg"], img[src$="/fig-testing-integration-review-map.svg"], img[src$="/fig-threats-stride-framework-record.svg"], img[src$="/fig-time-series-fundamentals-write-path.svg"], img[src$="/fig-zigbee-6lowpan-pitfalls-failure-map.svg"])) { --iot-figure-mobile-read-width: 778px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-zigbee-matter-commissioning-evidence-flow.svg"])) { --iot-figure-mobile-read-width: 778px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/Esp32WifiImplementationRoute-modern-20260718.svg"])) { --iot-figure-mobile-read-width: 780px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/SdnControllerFailoverReview-modern-20260718.svg"], img[src$="/TrilaterationIntersectingCircles-modern-20260807.svg"], img[src$="/fig-nbiot-power-reachability.svg"], img[src$="/fig-rfid-tag-types-form-factor.svg"])) { --iot-figure-mobile-read-width: 781px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/6LoWPANFragmentation-modern-20260103000500.svg"], img[src$="/AdcResolutionBits-modern-20260212.svg"], img[src$="/AdhocHybridZrpProtocolComparison-modern-20260601.svg"], img[src$="/AdhocHybridZrpZoneStructure-modern-20260601.svg"], img[src$="/AdhocProdQualityTree-modern-20260108123004.svg"], img[src$="/AdhocProdRoutingComparison-modern-20260108123003.svg"], img[src$="/AnomalyMetrics-concepts-modern-20260221.svg"], img[src$="/AnomalyTimeSeries-concepts-modern-20260221.svg"], img[src$="/BabyMonitor-modern-20260103034500.svg"], img[src$="/BabyUrinaryTractInfectionMonitoring-modern-20260103070000.svg"], img[src$="/CertSelectionFunnel-modern-20260718.svg"], img[src$="/CircuitToUseAFETAsASwitch-modern-20260103151700.svg"], img[src$="/CoAPMessageFormat-modern-20260102122500.svg"], img[src$="/ConsentManagement-modern-20260103033000.svg"], img[src$="/ControlRoom-modern-20260103060000.svg"], img[src$="/DamLevel-modern-20260103060000.svg"], img[src$="/DashboardHierarchy-modern-20260718.svg"], img[src$="/DataQualityPipeline-modern-20260212.svg"], img[src$="/DeviceSelectionFlow-modern-20260212.svg"], img[src$="/DifferentKindsOfResistors-modern-20260103151700.svg"], img[src$="/DigitalFactoryTwin-modern-20260103020000.svg"], img[src$="/DigitalTwinFeedbackLoop-modern-20260601.svg"], img[src$="/DtlsSecFundamentalsReviewRecord-modern-20260718.svg"], img[src$="/DtnFundamentalsConnectivityComparison-modern-20260601.svg"])) { --iot-figure-mobile-read-width: 784px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/DynamicPricing-modern-20260102234500.svg"], img[src$="/EdgeGateway-modern-20260103044500.svg"], img[src$="/ElectricalEquations-modern-20260212.svg"], img[src$="/EnablersFundamentalsCouplingLoop-modern-20260718.svg"], img[src$="/FiveVerbsTimeline-modern-20260326.svg"], img[src$="/GeoffMulligan-modern-20260212.svg"], img[src$="/Http2Multiplexing-modern-20260212.svg"], img[src$="/HttpStackComparison-modern-20260212.svg"], img[src$="/HwCaseEvidenceTimeline-modern-20260718.svg"], img[src$="/InteractionModalities-modern-20260102235500.svg"], img[src$="/IoTElephant-modern-20260103070000.svg"], img[src$="/IotPlatformDecision-modern-20260212.svg"], img[src$="/KevinAshton-modern-20260212.svg"], img[src$="/L5-modern-20260212.svg"], img[src$="/LAUNCH-modern-20260212.svg"], img[src$="/LightIntensityVSLDRResistance-modern-20260103151700.svg"], img[src$="/LpwanDesignForces-modern-20260718.svg"], img[src$="/LpwanFundamentalsScopeMap-modern-20260718.svg"], img[src$="/MQTTBrokerArchitecture-modern-20260102190000.svg"], img[src$="/MQTTMethods-modern-20260103114200.svg"], img[src$="/MQTTTopicWildcards-modern-20260103000000.svg"], img[src$="/MaintenanceWorkflow-modern-20260108122955.svg"], img[src$="/MermaidAmqpVsMqttAndUse11b2c7c-modern-20260212.svg"], img[src$="/MermaidBulkhead-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 784px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/MermaidCoap8Aa93c6-modern-20260212.svg"], img[src$="/MermaidCoap95bffff-modern-20260212.svg"], img[src$="/MermaidCoapVsHttp-modern-20260212.svg"], img[src$="/MermaidConnectingTogether2199bf2-modern-20260212.svg"], img[src$="/MermaidDutyCyclingAndTop1Ab437a-modern-20260108132049.svg"], img[src$="/MermaidEdgeProcessing0-modern-20260212.svg"], img[src$="/MermaidElectronics474c7fa-modern-20260212.svg"], img[src$="/MermaidGps0-modern-20260212.svg"], img[src$="/MermaidI2cBus-modern-20260212.svg"], img[src$="/MermaidIndoor0-modern-20260212.svg"], img[src$="/MermaidIndustrialProtocols3E04c2f-modern-20260212.svg"], img[src$="/MermaidInteractiveDesign12a3109-modern-20260212.svg"], img[src$="/MermaidIntroFeedbackLoop-modern-20260212.svg"], img[src$="/MermaidIotUseCases14402809-modern-20260108131314.svg"], img[src$="/MermaidIotUseCases197cda09-modern-20260108131314.svg"], img[src$="/MermaidLocationFundamentals1-modern-20260212.svg"], img[src$="/MermaidNetworkMechanisms3754ef0-modern-20260212.svg"], img[src$="/MermaidNetworkMechanisms4E946a9-modern-20260212.svg"], img[src$="/MermaidPidSysSum1-modern-20260212.svg"], img[src$="/MermaidPrivacy0-modern-20260212.svg"], img[src$="/MermaidRfidTagTypes-modern-20260212.svg"], img[src$="/MermaidShardingDecision-modern-20260212.svg"], img[src$="/MermaidUnderstandingPeople2Ec7e69-modern-20260212.svg"], img[src$="/MermaidWiredSelectionVariant-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 784px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/MixedMethodEvidencePlan-modern-20260718.svg"], img[src$="/MobileLabsCoverageTroubleshootingMap-modern-20260718.svg"], img[src$="/NaiveRetryProblem-modern-20260212.svg"], img[src$="/NetworkDesignConsiderationMap-modern-20260718.svg"], img[src$="/NodeBehaviorTaxonomyMap-modern-20260718.svg"], img[src$="/OPCUAArchitecture-modern-20260103001000.svg"], img[src$="/Phase1-modern-20260212.svg"], img[src$="/PrivacyReviewRecordCard-modern-20260718.svg"], img[src$="/ProtocolCaptureDecision-modern-20260212.svg"], img[src$="/PwmDutyCycleWaveforms-modern-20260212.svg"], img[src$="/QosRealRoute-modern-20260718.svg"], img[src$="/REACTIVE-modern-20260212.svg"], img[src$="/RFIDSystemArchitecture-modern-20260102132000.svg"], img[src$="/RefModelLensRoute-modern-20260718.svg"], img[src$="/RefModelsAlternativesDecisionSurface-modern-20260718.svg"], img[src$="/RequirementsClassificationDecisionTree-modern-20260322.svg"], img[src$="/RequirementsLatencySpectrum-modern-20260325.svg"], img[src$="/RequirementsSixDimensions-modern-20260325.svg"], img[src$="/RetailEcosystemOverview-modern-20260325.svg"], img[src$="/RfidTagLifecycleEvidenceLoop-modern-20260718.svg"], img[src$="/RplProdFrameworkAcceptanceLoop-modern-20260718.svg"], img[src$="/RplRouting-modern-20260108122958.svg"], img[src$="/SENSING-modern-20260212.svg"], img[src$="/SUPPLIERS-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 784px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/SecurityArchitectureEvidenceLoop-modern-20260718.svg"], img[src$="/SemiconductorKnowledgeCheck-modern-20260103151700.svg"], img[src$="/SensorTrustEvidenceRecord-modern-20260718.svg"], img[src$="/ServiceInterfaceRecord-modern-20260718.svg"], img[src$="/SigfoxOverviewRouteMap-modern-20260718.svg"], img[src$="/SigfoxServiceRiskReviewLabels-modern-20260718.svg"], img[src$="/SimulatingFundamentalsEvidencePath-modern-20260718.svg"], img[src$="/SimulationValidationReleaseGate-modern-20260718.svg"], img[src$="/SmartCitiesArchitecture-modern-20260325.svg"], img[src$="/SmartGridArchitecture-modern-20260102233000.svg"], img[src$="/SoftwareVulnerabilityReviewMap-modern-20260718.svg"], img[src$="/StateMachinesIotRoute-modern-20260718.svg"], img[src$="/SystemsEvolutionArchitecturePatterns-modern-20260322.svg"], img[src$="/TestingFundamentalsReviewRecord-modern-20260718.svg"], img[src$="/TestingIntegrationEvidencePath-modern-20260718.svg"], img[src$="/ThreatModelingDiagram-modern-20260102235500.svg"], img[src$="/TopologyFailureDomainsRecord-modern-20260718.svg"], img[src$="/TransportAnalogyTranslationMap-modern-20260718.svg"], img[src$="/TransportScenarioReviewPath-modern-20260718.svg"], img[src$="/TwinLifecycleManagement-modern-20260103000500.svg"], img[src$="/UavGatewayHandoffDecisionLoop-modern-20260718.svg"], img[src$="/UltrasonicSensor-modern-20260102190000.svg"], img[src$="/UserResearchEvidenceRecord-modern-20260718.svg"], img[src$="/WearableSensorAccuracy-modern-20260325.svg"])) { --iot-figure-mobile-read-width: 784px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/WheatstoneB-modern-20260103024500.svg"], img[src$="/Wifi6TwtMechanism-modern-20260212.svg"], img[src$="/WirelessHARTNetwork-modern-20260103001000.svg"], img[src$="/WorkedExamplesBeijingZones-modern-20260324.svg"], img[src$="/WsnArchitectureReviewRoute-modern-20260718.svg"], img[src$="/WsnEnergyDutyCyclingRoute-modern-20260718.svg"], img[src$="/WsnRouteClassificationDecisionRecord-modern-20260718.svg"], img[src$="/WsnRoutingOverviewEvidenceMap-modern-20260718.svg"], img[src$="/edinburgh-Part90-000-modern-20260103090000.svg"], img[src$="/edinburgh-ble-key-distribution-modern-20260103140000.svg"], img[src$="/fig-802154-rev-stack-specs-boundary.svg"], img[src$="/fig-actuators-classifications-crankshaft.svg"], img[src$="/fig-analog-digital-flow-modern-20260212.svg"], img[src$="/fig-app-protocols-realtime-decision-surface.svg"], img[src$="/fig-app-protocols-realtime-door-route.svg"], img[src$="/fig-app-protocols-realtime-roles.svg"], img[src$="/fig-asic-specialization-lanes.svg"], img[src$="/fig-blockchain-fundamentals-transaction-path.svg"], img[src$="/fig-blockchain-smart-contracts-boundary.svg"], img[src$="/fig-cicd-iot-fundamentals-gate-review.svg"], img[src$="/fig-cloud-computing-fundamentals-iot-flow.svg"], img[src$="/fig-cloud-deployment-models-governance-matrix.svg"], img[src$="/fig-cloud-deployment-models-placement-route.svg"], img[src$="/fig-cloud-security-identity-lifecycle.svg"])) { --iot-figure-mobile-read-width: 784px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-coap-resource-format-modern-20260212.svg"], img[src$="/fig-comm-bridge-queue-challenges-dlq-workflow.svg"], img[src$="/fig-connected-devices-fundamentals-record.svg"], img[src$="/fig-connected-devices-fundamentals-review-map.svg"], img[src$="/fig-connecting-communication-patterns-map.svg"], img[src$="/fig-connecting-discovery-pairing-flow.svg"], img[src$="/fig-data-formats-vineyard-8byte-contract.svg"], img[src$="/fig-data-fusion-best-practices-calibration-review.svg"], img[src$="/fig-data-visualization-codecs-decision-map.svg"], img[src$="/fig-e5-key-establishment-boundaries.svg"], img[src$="/fig-edge-ai-placement-mandates.svg"], img[src$="/fig-edge-fog-cloud-device-contracts.svg"], img[src$="/fig-fanout-exchange-modern-20260212.svg"], img[src$="/fig-ieee-ietf-route.svg"], img[src$="/fig-iot-validation-alternatives.svg"], img[src$="/fig-isa100-fundamentals-topology.svg"], img[src$="/fig-isa100-fundamentals-traffic.svg"], img[src$="/fig-isa100-labs-security-map.svg"], img[src$="/fig-isa100-managed-architecture.svg"], img[src$="/fig-isa100-stack-comparison-map.svg"], img[src$="/fig-isa100-stack-selection-evidence.svg"], img[src$="/fig-lorawan-network-architecture-path.svg"], img[src$="/fig-lorawan-rev-deploy-field-validation.svg"], img[src$="/fig-lorawan-vs-lpwan-evidence.svg"])) { --iot-figure-mobile-read-width: 784px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-lpwan-fund-link-budget-workflow.svg"], img[src$="/fig-maintenance-strategies-variant-timeline-modern-20260212.svg"], img[src$="/fig-mobile-fund-propagation-design-review-flow.svg"], img[src$="/fig-mobile-gateway-protocols-lab-release.svg"], img[src$="/fig-mobile-labs-cellular-modem-troubleshooting-map.svg"], img[src$="/fig-mobile-privacy-two-surface-map.svg"], img[src$="/fig-multihop-fundamentals-topology-choice.svg"], img[src$="/fig-nfc-iot-integration-lab-evidence.svg"], img[src$="/fig-nfc-real-world-auth-evidence.svg"], img[src$="/fig-nfc-real-world-credential-trust.svg"], img[src$="/fig-nfc-security-and-best-practices-static-tag-limits.svg"], img[src$="/fig-nfc-simulation-lab-model.svg"], img[src$="/fig-opcua-service-workflow.svg"], img[src$="/fig-optimization-fundamentals-tradeoffs.svg"], img[src$="/fig-paper-standardization-lens.svg"], img[src$="/fig-paper-wsn-review-record.svg"], img[src$="/fig-pid-theory-review-record.svg"], img[src$="/fig-power-architecture-modern-20260212.svg"], img[src$="/fig-privacy-fundamentals-record.svg"], img[src$="/fig-privacy-regulations-request.svg"], img[src$="/fig-privacy-techniques-minimization.svg"], img[src$="/fig-private-5g-architecture-boundaries.svg"], img[src$="/fig-processes-systems-overview-views.svg"], img[src$="/fig-production-case-studies-scale-up.svg"])) { --iot-figure-mobile-read-width: 784px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-production-management-domains.svg"], img[src$="/fig-production-management-lifecycle.svg"], img[src$="/fig-prototyping-hw-introduction-approaches.svg"], img[src$="/fig-prototyping-hw-introduction-gap.svg"], img[src$="/fig-prototyping-kits-industrial-wearable-review-record.svg"], img[src$="/fig-prototyping-kits-selection-best-practices-gates.svg"], img[src$="/fig-prototyping-kits-selection-best-practices-route.svg"], img[src$="/fig-prototyping-kits-selection-best-practices-transition.svg"], img[src$="/fig-prototyping-sw-best-practices-review-gates.svg"], img[src$="/fig-prototyping-sw-libraries-route.svg"], img[src$="/fig-prototyping-sw-testing-observability.svg"], img[src$="/fig-rfid-apps-industry-applications-evidence-record.svg"], img[src$="/fig-rfid-troubleshooting-change-test.svg"], img[src$="/fig-rfid-troubleshooting-evidence-packet.svg"], img[src$="/fig-rpl-summary-tools-record-map.svg"], img[src$="/fig-s2aas-core-layer-choice.svg"], img[src$="/fig-sdn-iot-applications-service-assurance.svg"], img[src$="/fig-sdn-iot-applications-traffic-classes.svg"], img[src$="/fig-sdn-prod-framework-capacity-rule-budget.svg"], img[src$="/fig-stream-processing-pipelines-stage-path.svg"], img[src$="/fig-tcp-syn-backlog-defense.svg"], img[src$="/fig-threat-asset-matrix-outages-failures.svg"], img[src$="/fig-topic-exchange-modern-20260212.svg"], img[src$="/fig-topologies-failures-recovery.svg"])) { --iot-figure-mobile-read-width: 784px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-transport-fund-tcp-evidence-route.svg"], img[src$="/fig-uav-network-features-pressure-records.svg"], img[src$="/fig-uav-network-features-tradeoff-checks.svg"], img[src$="/fig-wifi-impl-power-optimization-route.svg"], img[src$="/fig-wifi-overview-route.svg"], img[src$="/fig-wifimac-exposed-terminal.svg"], img[src$="/fig-wireless-site-survey-loop.svg"], img[src$="/fig-wsn-coverage-fundamentals-record.svg"], img[src$="/fig-wsn-impl-deployment-energy-record.svg"], img[src$="/fig-wsn-sm-prod-deploy-evidence.svg"], img[src$="/fig-wsn-sm-types-fit-record.svg"], img[src$="/fig-xmpp-protocol-fit-record.svg"], img[src$="/fig-z-wave-overview-region-check.svg"], img[src$="/fig-zigbee-6lowpan-frag-gate.svg"], img[src$="/fig-zigbee-6lowpan-frag-record.svg"], img[src$="/fig-zigbee-industrial-deployment-evidence-map.svg"], img[src$="/fig-zigbee-routing-repair-record.svg"], img[src$="/fig-zigbee-thread-impl-dev-evidence-map.svg"], img[src$="/fig-zigbee-thread-protocol-comparison-evidence-map.svg"], img[src$="/label-quiz-esim-global-lifecycle.svg"], img[src$="/networking-core-propagation-loss-path.svg"])) { --iot-figure-mobile-read-width: 784px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/7LevelIoTReferenceModel_new-modern-20260103070000.svg"], img[src$="/GatewayLabEvidenceFlow-modern-20260718.svg"], img[src$="/LorawanLinkBudgetMargin-modern-20260718.svg"], img[src$="/NodeBehaviorSelfishMaliciousEvidenceMap-modern-20260718.svg"], img[src$="/SamplingTheorem-modern-20260103114200.svg"], img[src$="/TimBernersLee-modern-20260212.svg"], img[src$="/TransmissionStageTransactionPath-modern-20260718.svg"], img[src$="/fig-e2-gateway-trust-boundary.svg"], img[src$="/fig-isac-ofdm-tradeoff.svg"], img[src$="/fig-rpl-non-storing-route.svg"], img[src$="/fig-simulating-platform-emulation-evidence-path.svg"])) { --iot-figure-mobile-read-width: 791px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/CoffeeKiosk-modern-20260103060000.svg"])) { --iot-figure-mobile-read-width: 794px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/ADCGraph-modern-20260103151700.svg"], img[src$="/AdcFitReview-modern-20260718.svg"], img[src$="/AdvancedAudioDistributionProfile-modern-20260103123000.svg"], img[src$="/AnomalyStatistical-concepts-modern-20260221.svg"], img[src$="/ArchitectureLabRouteReview-modern-20260718.svg"], img[src$="/ArchitectureLabTestMatrix-modern-20260718.svg"], img[src$="/AutomatedCheckout-modern-20260102231500.svg"], img[src$="/BLETrilateration-modern-20260103024500.svg"], img[src$="/CicdIotRollbackAndRolloutRecord-modern-20260718.svg"], img[src$="/ControllerFitFamilies-modern-20260718.svg"], img[src$="/CorrectMotorConnection-modern-20260212.svg"], img[src$="/DtnApplicationsUseCaseMap-modern-20260601.svg"], img[src$="/DtnEpidemicTimeline-modern-20260601.svg"], img[src$="/DutyCycleWorkedExamplesReviewLoop-modern-20260718.svg"], img[src$="/EdgeReductionTimeline-modern-20260212.svg"], img[src$="/EndiannessVariantUsecase-modern-20260212.svg"], img[src$="/EnvironmentalTests-modern-20260212.svg"], img[src$="/GeometryisImportant-modern-20260103114200.svg"], img[src$="/HardwarePlatformSelectionRecord-modern-20260718.svg"], img[src$="/IdsAlertReviewRecord-modern-20260718.svg"], img[src$="/IotProtocolStackDetail-modern-20260108122934.svg"], img[src$="/KalmanFilter-modern-20260103090000.svg"], img[src$="/MermaidAdcAnalogWorld-modern-20260212.svg"], img[src$="/MermaidAuthVsAuthz-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 796px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/MermaidEdgeProcessing2-modern-20260212.svg"], img[src$="/MermaidElectronics71d7615-modern-20260212.svg"], img[src$="/MermaidJwtFlow-modern-20260212.svg"], img[src$="/MermaidMatterComm0-modern-20260212.svg"], img[src$="/MermaidNetworkingAddressin1171b412-modern-20260212.svg"], img[src$="/MermaidPowerAnalysis1-modern-20260212.svg"], img[src$="/NFCNDEFMessage-modern-20260103000500.svg"], img[src$="/OpAmpBuffer-modern-20260103024500.svg"], img[src$="/PacketSwitchingInADataNetwork-modern-20260103114200.svg"], img[src$="/ProtocolReviewRecordGroups-modern-20260718.svg"], img[src$="/ProtocolStack-modern-20260102190000.svg"], img[src$="/RadiaPerlman-modern-20260212.svg"], img[src$="/RequirementsReliabilityCost-modern-20260325.svg"], img[src$="/Routing19-modern-20260108131302.svg"], img[src$="/SARADC-modern-20260103123000.svg"], img[src$="/SKIN-modern-20260103100000.svg"], img[src$="/SKIN3-modern-20260103151700.svg"], img[src$="/STRIDE-pedagogical-modern-20260103140000.svg"], img[src$="/SdnAnomalyDetectionBaselineWindows-modern-20260718.svg"], img[src$="/SdnIotMobilityHandoffProof-modern-20260718.svg"], img[src$="/SdnScheduledForwardingProofRecord-modern-20260718.svg"], img[src$="/SecurityControlsTailoringDecisionPath-modern-20260718.svg"], img[src$="/SecurityFrameworkLenses-modern-20260718.svg"], img[src$="/SensorCalibrationFlow-modern-20260102130500.svg"])) { --iot-figure-mobile-read-width: 796px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/SensorPipelineStagesFocus-modern-20260317.svg"], img[src$="/SmartGridStandardsEcosystem-modern-20260325.svg"], img[src$="/SoilSensorBeforeAfterLedger-modern-20260718.svg"], img[src$="/TDoA-modern-20260103114200.svg"], img[src$="/TestAutomationReviewRecord-modern-20260718.svg"], img[src$="/TransportationV2xDecisionTree-modern-20260325.svg"], img[src$="/V2xCollisionTimeline-modern-20260212.svg"], img[src$="/VoiceReleaseRecord-modern-20260718.svg"], img[src$="/WiFiChannelAllocation-modern-20260102190000.svg"], img[src$="/WifiBandFitComparison-modern-20260718.svg"], img[src$="/WsnCoverageWorkedExamplesEvidenceRecord-modern-20260718.svg"], img[src$="/ZWavePracticalTroubleshootingFlow-modern-20260718.svg"], img[src$="/ble-pairing-phases-edinburgh-modern-20260103114200.svg"], img[src$="/fig-admin-compromise-kill-chain.svg"], img[src$="/fig-ble-le-coded-encoder.svg"], img[src$="/fig-cloud-platforms-qos-handshakes.svg"], img[src$="/fig-connected-devices-lifecycle-record.svg"], img[src$="/fig-constrained-application-protocol-stack.svg"], img[src$="/fig-dev-pipeline-modern-20260212.svg"], img[src$="/fig-enablers-selection-route.svg"], img[src$="/fig-hash-vs-hmac.svg"], img[src$="/fig-i4-stack-variant-latency-modern-20260212.svg"], img[src$="/fig-interoperability-four-layers.svg"], img[src$="/fig-iot-reference-model-edge-flow.svg"])) { --iot-figure-mobile-read-width: 796px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-kalman-gyro-bias-gps-correction.svg"], img[src$="/fig-leach-round-role-rotation.svg"], img[src$="/fig-leach-setup-steady-state.svg"], img[src$="/fig-massive-critical-iot-acquisition.svg"], img[src$="/fig-min-t-reliable-route.svg"], img[src$="/fig-miniature-sensor-duty-cycle.svg"], img[src$="/fig-nbiot-deployment-modes.svg"], img[src$="/fig-protocol-stack-architecture-layer-map.svg"], img[src$="/fig-prototyping-kits-industrial-wearable-integration-boundary.svg"], img[src$="/fig-prototyping-sw-environments-fit-map.svg"], img[src$="/fig-prototyping-sw-environments-handoff-boundary.svg"], img[src$="/fig-rpl-storing-route.svg"], img[src$="/fig-sdn-api-boundary-map.svg"], img[src$="/fig-secure-comms-boundary-map.svg"], img[src$="/fig-sigfox-performance-envelope.svg"], img[src$="/fig-sw-platforms-edge-route.svg"], img[src$="/fig-umb-architecture.svg"], img[src$="/fig-umb-command-response-flow.svg"], img[src$="/fig-vital-sign-frequency-separation.svg"], img[src$="/fig-zwave-mesh-healing.svg"], img[src$="/gtm-pricing-decision-tree-20260411.svg"], img[src$="/iiot-industrial-protocol-selection-v2.svg"])) { --iot-figure-mobile-read-width: 796px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-imu-stream-byte-math.svg"])) { --iot-figure-mobile-read-width: 797px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/6lowpanIphcCompression-modern-20260102121000.svg"], img[src$="/AdhocRoutingProtocols-modern-20260102190000.svg"], img[src$="/ApplicationDomainsTechnologyMapping-modern-20260324.svg"], img[src$="/BT-modern-20260212.svg"], img[src$="/BandwidthAndCoverage-modern-20260103070000.svg"], img[src$="/BatteriesExercise-modern-20260103114200.svg"], img[src$="/BluetoothProtocolStack-modern-20260102130000.svg"], img[src$="/DutyCycling-modern-20260103151700.svg"], img[src$="/ElderlyMonitoring-modern-20260103070000.svg"], img[src$="/FogEdgeAndTheCloudNetwork-modern-20260103114200.svg"], img[src$="/HowAreSatellitesSynced-modern-20260103114200.svg"], img[src$="/I2CConnections-modern-20260103114200.svg"], img[src$="/LoRaWANProtocolStack-modern-20260103114200.svg"], img[src$="/MermaidSensorLabsImplemen0D396bb-modern-20260212.svg"], img[src$="/ProtocolTranslationPipeline-modern-20260718.svg"], img[src$="/QnmFormat-modern-20260103114200.svg"], img[src$="/RSSIStationary-modern-20260103090000.svg"], img[src$="/RelayNode-modern-20260103044500.svg"], img[src$="/SkinMechanics-modern-20260103151700.svg"], img[src$="/TCPThreeWayHandshake-modern-20260102190000.svg"], img[src$="/WebSocketConnection-modern-20260102190000.svg"], img[src$="/WiFiFingerprinting-modern-20260103024500.svg"], img[src$="/WsnDataAggregationEvidenceRecord-modern-20260718.svg"], img[src$="/ZigbeeNetworkFormation-modern-20260102190000.svg"])) { --iot-figure-mobile-read-width: 800px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/MermaidInteractiveDesign10Dd6475-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 804px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/TransportOptimizationReviewMap-modern-20260718.svg"], img[src$="/fig-sigfox-deployment-site.svg"], img[src$="/fig-zigbee-matter-sdk-review-record.svg"])) { --iot-figure-mobile-read-width: 805px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/HwCaseDecisionMatrix-modern-20260718.svg"], img[src$="/LorawanReleaseProofChain-modern-20260718.svg"], img[src$="/MermaidNetworkingAddressin3923428-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 808px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/DiffieHellmanAnalogy-modern-20260212.svg"], img[src$="/ISA-modern-20260103123000.svg"], img[src$="/MermaidEdgeFogComputing11E6314e-modern-20260108132049.svg"], img[src$="/MermaidInteractiveDesign13156ca9-modern-20260212.svg"], img[src$="/PowerSupply-modern-20260212.svg"], img[src$="/fig-nfc-iot-integration-event-flow.svg"], img[src$="/fig-nfc-role-boundaries.svg"], img[src$="/fig-time-series-platforms-role-map.svg"])) { --iot-figure-mobile-read-width: 810px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/WsnTrackingEnergyPredictionReleaseGates-modern-20260718.svg"], img[src$="/WsnTrackingFormulationsEvidenceMap-modern-20260718.svg"], img[src$="/WsnTrackingFormulationsReleaseGates-modern-20260718.svg"], img[src$="/WsnTrackingFundamentalsReleaseGates-modern-20260718.svg"], img[src$="/WsnTrackingImplementationFrameworkReleaseGates-modern-20260718.svg"])) { --iot-figure-mobile-read-width: 812px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/IotSecurityDomainsWheel-modern-20260718.svg"], img[src$="/MermaidEthernetStandards-modern-20260212.svg"], img[src$="/MermaidI2cRead-modern-20260212.svg"], img[src$="/MermaidI2cWrite-modern-20260212.svg"], img[src$="/MermaidNetworkClassification-modern-20260212.svg"], img[src$="/MermaidNetworkingAddressin52d94c2-modern-20260212.svg"], img[src$="/MermaidNetworkingAddressin7B6462a-modern-20260212.svg"], img[src$="/MermaidWifiEvolution-modern-20260212.svg"], img[src$="/fig-ipv4-structure-modern-20260212.svg"], img[src$="/fig-ipv6-comparison-modern-20260212.svg"], img[src$="/fig-itu-iot-layers-modern-20260212.svg"], img[src$="/fig-sdn-api-evidence-loop.svg"], img[src$="/fig-sdn-api-ha-route.svg"])) { --iot-figure-mobile-read-width: 813px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/BusinessModelCanvas-modern-20260108122913.svg"])) { --iot-figure-mobile-read-width: 815px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/RPLRank4-modern-20260103123000.svg"])) { --iot-figure-mobile-read-width: 817px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-imu-kalman-yaw-architecture.svg"])) { --iot-figure-mobile-read-width: 819px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/HardwarePlatformTransitionGates-modern-20260718.svg"])) { --iot-figure-mobile-read-width: 820px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-mobile-labs-wifi-spectrum-survey-flow.svg"])) { --iot-figure-mobile-read-width: 823px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-electronics-serial-bus-i2c-start-stop.svg"], img[src$="/fig-wifimac-hidden-terminal.svg"], img[src$="/fig-wirelesshart-fundamentals-osi-comparison.svg"])) { --iot-figure-mobile-read-width: 824px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/Esp32WifiConnectionEvidence-modern-20260718.svg"], img[src$="/I2COneByteTransmissionTiming-modern-20260807.svg"], img[src$="/MermaidSdnCaseBarcelona-modern-20260212.svg"], img[src$="/RestApiArchitecturePattern-modern-20260327.svg"], img[src$="/fig-actuators-classifications-sma-piezo-motor.svg"], img[src$="/fig-data-fusion-complementary-imu-gyro-drift.svg"], img[src$="/fig-data-fusion-complementary-imu-raw-stationary.svg"], img[src$="/fig-data-fusion-complementary-imu-trapezoid.svg"], img[src$="/fig-energy-lowpower-subthreshold-leakage.svg"], img[src$="/fig-mobile-priv-data-collection-library-cumulative.svg"], img[src$="/fig-nfc-modes-field-coupling.svg"], img[src$="/fig-soa-api-version-lifecycle.svg"], img[src$="/fig-wsn-tracking-formulations-message-timing.svg"], img[src$="/fig-wsn-tracking-formulations-topology-comparison.svg"])) { --iot-figure-mobile-read-width: 828px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-sdn-prod-case-studies-lenses.svg"], img[src$="/fig-sdn-prod-case-studies-proof-comparison.svg"], img[src$="/fig-sdn-prod-case-studies-proof-loop.svg"], img[src$="/fig-sdn-prod-case-studies-traffic-engineering.svg"])) { --iot-figure-mobile-read-width: 831px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/5gDeviceCategorySelection-modern-20260212.svg"], img[src$="/7LevelDataFlow-modern-20260108122912.svg"], img[src$="/AMQPMessageQueuing-modern-20260102190000.svg"], img[src$="/AccessibilityDesignProcess-modern-20260212.svg"], img[src$="/AccessibilityIoT-modern-20260103044500.svg"], img[src$="/ActuatorClassificationByOutput-modern-20260212.svg"], img[src$="/AdhocFundamentalsRoutingParadigms-modern-20260601.svg"], img[src$="/AdhocLabsSimulationSetup-modern-20260601.svg"], img[src$="/AdhocProdFrameworkArchitecture-modern-20260601.svg"], img[src$="/AdhocProdMultipathStrategies-modern-20260601.svg"], img[src$="/AdvancedSecurityEvidenceMap-modern-20260718.svg"], img[src$="/AgileIoTDevelopment-modern-20260212.svg"], img[src$="/AgriculturePrecisionStack-modern-20260325.svg"], img[src$="/BJTModelWithTwoDiodes-modern-20260103151700.svg"], img[src$="/BabyMonitoring2-modern-20260103070000.svg"], img[src$="/Basic-modern-20260212.svg"], img[src$="/BatterySelfDischargeComparison-modern-20260212.svg"], img[src$="/BleDefenseLayers-modern-20260212.svg"], img[src$="/BlockchainSmartContractPatternMap-modern-20260718.svg"], img[src$="/BluetoothPairingProcess-modern-20260212.svg"], img[src$="/BluetoothSerialPortProfile-modern-20260103123000.svg"], img[src$="/BobMetcalfe-modern-20260212.svg"], img[src$="/BodyAreaNetwork-modern-20260102231500.svg"], img[src$="/BreadboardFirstCircuitEvidenceLoop-modern-20260718.svg"])) { --iot-figure-mobile-read-width: 833px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/BusinessModelEvolution-modern-20260212.svg"], img[src$="/CONSUMER-modern-20260212.svg"], img[src$="/CapacitorsInductorsResistorsTable-modern-20260103151700.svg"], img[src$="/CerfKahn-modern-20260212.svg"], img[src$="/CircuitUsedToTurnAnNPNBJTIntoASwitch-modern-20260103151700.svg"], img[src$="/CloudCentric-modern-20260103080000.svg"], img[src$="/CloudPlatformSelectionRoute-modern-20260718.svg"], img[src$="/CloudProductionCostRetentionControls-modern-20260718.svg"], img[src$="/CloudProductionReadinessMap-modern-20260718.svg"], img[src$="/CloudSecurityBoundaryMap-modern-20260718.svg"], img[src$="/CloudSecurityControlRecord-modern-20260718.svg"], img[src$="/CoapConNonComparison-modern-20260212.svg"], img[src$="/CommunicationModelSelectionRoute-modern-20260718.svg"], img[src$="/ComponentsOfTargetTrackingAlgorithms-modern-20260103070000.svg"], img[src$="/ConnectedDevicesOverview-modern-20260212.svg"], img[src$="/ConnectivityEnergySelectionRecord-modern-20260718.svg"], img[src$="/ContextAwarenessModel-modern-20260212.svg"], img[src$="/ContextEnergyPolicyGates-modern-20260718.svg"], img[src$="/CoradMissionTimeline-modern-20260601.svg"], img[src$="/Coverage-modern-20260103123000.svg"], img[src$="/DONE-modern-20260212.svg"], img[src$="/DataFormatEfficiency-modern-20260212.svg"], img[src$="/DataLifecycleSecurity-modern-20260102134500.svg"], img[src$="/DataMinimization-modern-20260103033000.svg"])) { --iot-figure-mobile-read-width: 833px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/DesignModelArchitecturesRecord-modern-20260718.svg"], img[src$="/DesignModelFacetsCalmRecord-modern-20260718.svg"], img[src$="/DesignModelIntroductionRecord-modern-20260718.svg"], img[src$="/DesignPatternsIotPatternsMap-modern-20260718.svg"], img[src$="/DesignThinkingTimeBudget-modern-20260212.svg"], img[src$="/DeviceLifecycleStates-modern-20260212.svg"], img[src$="/DevicePowerReviewPath-modern-20260718.svg"], img[src$="/DeviceSecurityBootstrap-modern-20260102134000.svg"], img[src$="/Diagram1-modern-20260212.svg"], img[src$="/DigitalTwinArchitecture-modern-20260102131500.svg"], img[src$="/DigitalTwinMaturityLevels-modern-20260601.svg"], img[src$="/DisplayTypes-modern-20260212.svg"], img[src$="/DtnFundamentalsStoreCarryForward-modern-20260601.svg"], img[src$="/DtnSocialCarVsEpidemic-modern-20260601.svg"], img[src$="/DtnSocialCastTradeoffs-modern-20260601.svg"], img[src$="/DutyCycleFundamentalsReviewRecord-modern-20260718.svg"], img[src$="/DutyCyclingAndTopologyDecisionMap-modern-20260718.svg"], img[src$="/DutyCyclingStates-modern-20260102133500.svg"], img[src$="/EcosystemIntegrationRecord-modern-20260718.svg"], img[src$="/EdgeAiOptimizationGate-modern-20260718.svg"], img[src$="/ElderlyMonitoringFallDetection-modern-20260103070000.svg"], img[src$="/ElectricityUnitsHierarchy-modern-20260212.svg"], img[src$="/EmbeddedDesignTradeoffs-modern-20260326.svg"], img[src$="/EnablerReadinessRecord-modern-20260718.svg"])) { --iot-figure-mobile-read-width: 833px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/EnablersCommunicationsScaleMap-modern-20260718.svg"], img[src$="/EnablersEvolution-modern-20260108122911.svg"], img[src$="/EnergyBufferDesignChain-modern-20260718.svg"], img[src$="/EnergyHarvest-modern-20260108123005.svg"], img[src$="/Errorsources-modern-20260103114200.svg"], img[src$="/EvGridIntegration-modern-20260212.svg"], img[src$="/EvolutionOfIoT-modern-20260103070000.svg"], img[src$="/FeedbackLoopInSystemContext-modern-20260718.svg"], img[src$="/FeedbackLoopRecord-modern-20260718.svg"], img[src$="/FieldEffectTransistor-modern-20260103151700.svg"], img[src$="/FigProtocolOverheadComparison-modern-20260212.svg"], img[src$="/FirstBenchBuildRoute-modern-20260718.svg"], img[src$="/FirstPrototypeMeasurementRecord-modern-20260718.svg"], img[src$="/FiveVerbsMindmap-modern-20260326.svg"], img[src$="/FogOptimizationStrategies-modern-20260108122924.svg"], img[src$="/FormFactorDesign-modern-20260212.svg"], img[src$="/GatewayPathControlRecord-modern-20260718.svg"], img[src$="/Gatt-modern-20260212.svg"], img[src$="/GestureControl-modern-20260103044500.svg"], img[src$="/HardwarePlatformEvidenceMatrix-modern-20260718.svg"], img[src$="/HistoryDismissalPattern-modern-20260326.svg"], img[src$="/HistoryParadigmBlindness-modern-20260326.svg"], img[src$="/HwDebuggingLadder-modern-20260718.svg"], img[src$="/I2CSignal2-modern-20260103114200.svg"])) { --iot-figure-mobile-read-width: 833px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/IPv4SubnetMask-modern-20260103114200.svg"], img[src$="/ISA100Network-modern-20260103001000.svg"], img[src$="/ISA100NetworkLayers-modern-20260212.svg"], img[src$="/IiotVsConsumer-modern-20260212.svg"], img[src$="/IndustrialEthernet-modern-20260102190000.svg"], img[src$="/IndustrialEthernetSelectionWorkflow-modern-20260718.svg"], img[src$="/IndustrialVsWearable-modern-20260212.svg"], img[src$="/Industry4DataFlow-modern-20260322.svg"], img[src$="/InputHandlingBoundaryFlow-modern-20260718.svg"], img[src$="/IoTBusinessPlans-modern-20260103123000.svg"], img[src$="/IotData-modern-20260212.svg"], img[src$="/IotPrivacyDataFlowChain-modern-20260718.svg"], img[src$="/IotReleaseEvidenceBoard-modern-20260718.svg"], img[src$="/IotSecurityFundamentalsMap-modern-20260718.svg"], img[src$="/IotUxFailureModes-modern-20260212.svg"], img[src$="/JonPostel-modern-20260212.svg"], img[src$="/KeyLifecycle-modern-20260212.svg"], img[src$="/KitSelectionReviewRecord-modern-20260718.svg"], img[src$="/LTV_BLOCK-modern-20260212.svg"], img[src$="/Legacy-modern-20260212.svg"], img[src$="/LinearityOfAResistiveSensorInAHalfBridge-modern-20260103151700.svg"], img[src$="/LocationUseCaseJourney-modern-20260212.svg"], img[src$="/LorawanFundamentalsTroubleshootSurfaces-modern-20260718.svg"], img[src$="/LorawanPitfallTriageMap-modern-20260718.svg"])) { --iot-figure-mobile-read-width: 833px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/LorawanReleasePacket-modern-20260718.svg"], img[src$="/LorawanRoleBoundaryMap-modern-20260718.svg"], img[src$="/LorawanSimLabPacketTrace-modern-20260718.svg"], img[src$="/M2mNetworkBoundary-modern-20260718.svg"], img[src$="/MQTTBrokerCluster-modern-20260103000000.svg"], img[src$="/MeasurementsAreNoisy-modern-20260103090000.svg"], img[src$="/Mermaid5gDeviceCategories0-modern-20260212.svg"], img[src$="/Mermaid5gNetworkSlicing2-modern-20260212.svg"], img[src$="/Mermaid5gUrllcFuture0-modern-20260212.svg"], img[src$="/Mermaid5gUrllcFuture1-modern-20260212.svg"], img[src$="/Mermaid5vsFramework-modern-20260212.svg"], img[src$="/Mermaid7StepPipeline-modern-20260212.svg"], img[src$="/MermaidAccuracy5-modern-20260212.svg"], img[src$="/MermaidAdcDigitalWorld-modern-20260212.svg"], img[src$="/MermaidAdhocDtnAndSocial1139b6ab-modern-20260212.svg"], img[src$="/MermaidAdhocProactiveDsdv1Fcbcb6-modern-20260212.svg"], img[src$="/MermaidAlarmBellsComparison-modern-20260212.svg"], img[src$="/MermaidAmqpFrameLifecycle-modern-20260212.svg"], img[src$="/MermaidAmqpOverview-modern-20260212.svg"], img[src$="/MermaidAmqpVsMqttAndUse386355b-modern-20260212.svg"], img[src$="/MermaidApplicationProtocolIntro0-modern-20260212.svg"], img[src$="/MermaidArchitectureDecisionTree-modern-20260212.svg"], img[src$="/MermaidCloudFundamentals4-modern-20260212.svg"], img[src$="/MermaidComponentHierarchy-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 833px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/MermaidConnectingTogether1789a02-modern-20260212.svg"], img[src$="/MermaidContextAwareEnergy0296529-modern-20260212.svg"], img[src$="/MermaidContextAwareEnergy5Ae29e9-modern-20260212.svg"], img[src$="/MermaidDesignModelForIot1353daad-modern-20260212.svg"], img[src$="/MermaidDesignModelForIot888c1b0-modern-20260212.svg"], img[src$="/MermaidDesignThinkingAnd4Cfd647-modern-20260212.svg"], img[src$="/MermaidDeviceCategories-modern-20260212.svg"], img[src$="/MermaidDlqFlow-modern-20260212.svg"], img[src$="/MermaidEdgeComputePattern0214e75-modern-20260212.svg"], img[src$="/MermaidElectronics3Af1568-modern-20260212.svg"], img[src$="/MermaidEventDriven-modern-20260212.svg"], img[src$="/MermaidFogArchitectureAnd4F30c1b-modern-20260108132049.svg"], img[src$="/MermaidGracefulDegradation-modern-20260212.svg"], img[src$="/MermaidHybridCloudArchitecture-modern-20260212.svg"], img[src$="/MermaidIndoor2-modern-20260212.svg"], img[src$="/MermaidInteractiveDesign5C96868-modern-20260212.svg"], img[src$="/MermaidInteractiveDesign7139037-modern-20260212.svg"], img[src$="/MermaidInteractiveDesign8F89043-modern-20260212.svg"], img[src$="/MermaidInteroperability2Dd6c6c-modern-20260212.svg"], img[src$="/MermaidIoModalities-modern-20260212.svg"], img[src$="/MermaidIotUseCases10Df8885-modern-20260108131314.svg"], img[src$="/MermaidK8sIot-modern-20260212.svg"], img[src$="/MermaidLocationFundamentals0-modern-20260212.svg"], img[src$="/MermaidLocationFundamentals2-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 833px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/MermaidLocationFundamentals3-modern-20260212.svg"], img[src$="/MermaidMethodologyOverview-modern-20260212.svg"], img[src$="/MermaidMobilePhoneAsASe32f75dc-modern-20260212.svg"], img[src$="/MermaidNetPerfConcepts-modern-20260212.svg"], img[src$="/MermaidNetworkDesignTopologies-modern-20260212.svg"], img[src$="/MermaidOverviewOfIot0C18565-modern-20260108131314.svg"], img[src$="/MermaidOverviewOfIot1E0886b-modern-20260108131314.svg"], img[src$="/MermaidPrivacy1-modern-20260212.svg"], img[src$="/MermaidProgrammingParadigm117139f-modern-20260212.svg"], img[src$="/MermaidProgrammingParadigm206de31-modern-20260212.svg"], img[src$="/MermaidPublisherConfirms-modern-20260212.svg"], img[src$="/MermaidServiceDiscovery-modern-20260212.svg"], img[src$="/MermaidToolComparison-modern-20260212.svg"], img[src$="/MermaidTrafficPatterns-modern-20260212.svg"], img[src$="/MermaidUavFeatures1-modern-20260212.svg"], img[src$="/MermaidUavTrajectoryLabs101ede29-modern-20260212.svg"], img[src$="/MermaidUnderstandingPeople3897388-modern-20260212.svg"], img[src$="/MermaidUnderstandingPeople4Dbdf66-modern-20260212.svg"], img[src$="/MermaidUnderstandingPeople60cff4c-modern-20260212.svg"], img[src$="/MermaidValidationProcess-modern-20260212.svg"], img[src$="/MermaidWifi6-modern-20260212.svg"], img[src$="/MermaidWiredFundamentals0-modern-20260212.svg"], img[src$="/MermaidWiredFundamentals1-modern-20260212.svg"], img[src$="/MermaidWsnTrackingVertica372ecd0-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 833px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/MermaidXmpp0054958-modern-20260212.svg"], img[src$="/MobilePhoneApisDecisionMap-modern-20260718.svg"], img[src$="/MobileSinkCoordinationReview-modern-20260718.svg"], img[src$="/MobileWsnEvidenceRecord-modern-20260718.svg"], img[src$="/ModbusTCPFrame-modern-20260103014500.svg"], img[src$="/MqttBuildingTopicHierarchy-modern-20260212.svg"], img[src$="/MqttQosDecisionTree-modern-20260212.svg"], img[src$="/MultihopApplicationRoute-modern-20260718.svg"], img[src$="/MultihopProofWorkflow-modern-20260718.svg"], img[src$="/NbIotArchitecturePaths-modern-20260718.svg"], img[src$="/NbIotFundamentalsSystemMap-modern-20260718.svg"], img[src$="/NbIotImplementationWorkflow-modern-20260718.svg"], img[src$="/NfcSecurityProofMap-modern-20260718.svg"], img[src$="/NodeBehaviorClassificationPath-modern-20260718.svg"], img[src$="/NodeBehaviorDumbRecoveryDiagnosis-modern-20260718.svg"], img[src$="/PRINCIPLE-modern-20260212.svg"], img[src$="/PacketAnatomyOverview-modern-20260317.svg"], img[src$="/Patient-modern-20260212.svg"], img[src$="/PbdImplementationRuntimeGates-modern-20260718.svg"], img[src$="/PerspectivesOverview-modern-20260322.svg"], img[src$="/PerspectivesTeam-modern-20260322.svg"], img[src$="/Phone-modern-20260212.svg"], img[src$="/Pitfalls-modern-20260212.svg"], img[src$="/PitfallsDefenseDepth-modern-20260324.svg"])) { --iot-figure-mobile-read-width: 833px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/PitfallsPurchaseDecision-modern-20260324.svg"], img[src$="/PositioningTechSelection-modern-20260212.svg"], img[src$="/PowerBudgetDecisionTree-modern-20260722.svg"], img[src$="/PrivacyDataFlow-modern-20260212.svg"], img[src$="/ProcessSystemDecisionRecord-modern-20260718.svg"], img[src$="/ProcessSystemLearningRoute-modern-20260718.svg"], img[src$="/ProductionUpdateControlRoute-modern-20260718.svg"], img[src$="/ProductizationPipelineMarketMatrix-modern-20260807.svg"], img[src$="/ProtocolScenarioFamiliesMap-modern-20260718.svg"], img[src$="/PrototypeFidelity-modern-20260212.svg"], img[src$="/ProvisioningFlow-modern-20260212.svg"], img[src$="/QosCoreProofLoop-modern-20260718.svg"], img[src$="/QosRealProofLoop-modern-20260718.svg"], img[src$="/RS232Cable-modern-20260103123000.svg"], img[src$="/RealtimeProtocolLearningRoute-modern-20260718.svg"], img[src$="/RedesigningEverydayObjects-modern-20260103114200.svg"], img[src$="/RefArchitecturesApplicationsDomainMap-modern-20260718.svg"], img[src$="/RefArchitecturesApplicationsRoute-modern-20260718.svg"], img[src$="/ReferenceModelComparison-modern-20260212.svg"], img[src$="/ReliabilityErrorDetectionEvidencePath-modern-20260718.svg"], img[src$="/RequirementsCharacteristicsMap-modern-20260322.svg"], img[src$="/ResearchMethodSelection-modern-20260212.svg"], img[src$="/RetailLossPreventionStack-modern-20260325.svg"], img[src$="/RetailSmartShelfArchitecture-modern-20260325.svg"])) { --iot-figure-mobile-read-width: 833px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/RetailTechnologyMatrix-modern-20260325.svg"], img[src$="/RfidAppsHardwareIntegrationInterfaceMap-modern-20260718.svg"], img[src$="/Routing03-modern-20260108131211.svg"], img[src$="/RoutingProtocolSelection-modern-20260212.svg"], img[src$="/RplProdFrameworkEvidenceStack-modern-20260718.svg"], img[src$="/RplProdScenariosHandoff-modern-20260718.svg"], img[src$="/RplProdScenariosRetestRecord-modern-20260718.svg"], img[src$="/SPIClockMechanism-modern-20260103123000.svg"], img[src$="/SafePowerCheckSequence-modern-20260718.svg"], img[src$="/SampleEverydayObjects-modern-20260103070000.svg"], img[src$="/SdnAnomalyDetectionIotContainment-modern-20260718.svg"], img[src$="/SdnArchitectureRuleLifecycle-modern-20260718.svg"], img[src$="/SdnCaseOperationsHandoff-modern-20260718.svg"], img[src$="/SdnProdFrameworkFlowLifecycle-modern-20260718.svg"], img[src$="/SemiconductorsTypes-modern-20260103151700.svg"], img[src$="/SensorApplicationsActionChain-modern-20260718.svg"], img[src$="/SensorFusion-modern-20260103080000.svg"], img[src$="/SensorProductionFrameworkRecord-modern-20260718.svg"], img[src$="/SensorProductionFrameworkReviewFlow-modern-20260718.svg"], img[src$="/SensorReviewGate-modern-20260718.svg"], img[src$="/SensorReviewRecord-modern-20260718.svg"], img[src$="/SensorSelectionEvidenceRoute-modern-20260718.svg"], img[src$="/SensorTrustReviewLoop-modern-20260718.svg"], img[src$="/Sensors-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 833px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/ServoPwmTiming-modern-20260212.svg"], img[src$="/SigfoxDeploymentReleaseGates-modern-20260718.svg"], img[src$="/SigfoxServiceRiskContinuityTriggers-modern-20260718.svg"], img[src$="/SigfoxServiceRiskReviewMap-modern-20260718.svg"], img[src$="/SignalFingerprinting-modern-20260103114200.svg"], img[src$="/SignalProcessingEssentialsConceptMap-modern-20260317.svg"], img[src$="/SmartAgricultureSystem-modern-20260102190000.svg"], img[src$="/SmartBuildingWorkedRoute-modern-20260718.svg"], img[src$="/SmartHomeArchitectureLayers-modern-20260325.svg"], img[src$="/SmartHomeEnvironmentalIntegrationBoundary-modern-20260718.svg"], img[src$="/SmartHomeSecurityPipeline-modern-20260325.svg"], img[src$="/SmartMeterDataFlow-modern-20260212.svg"], img[src$="/SmartShelfSystem-modern-20260102231500.svg"], img[src$="/SoftwareArchitectureEvidenceRoute-modern-20260718.svg"], img[src$="/SoftwarePrototypeReviewRecord-modern-20260718.svg"], img[src$="/SoftwarePrototypeRuntimeRiskMap-modern-20260718.svg"], img[src$="/StanfordClarkMqttConstraintCard-modern-20260718.svg"], img[src$="/StateMachinePatternMap-modern-20260718.svg"], img[src$="/StateMachinesIotProofChecklist-modern-20260718.svg"], img[src$="/StateMachinesIotStyleChoice-modern-20260718.svg"], img[src$="/SwarmBehaviorReviewRoute-modern-20260718.svg"], img[src$="/SystemsEvolutionFogHierarchy-modern-20260322.svg"], img[src$="/SystemsEvolutionInflectionPoint-modern-20260322.svg"], img[src$="/TestingHilReviewRecord-modern-20260718.svg"])) { --iot-figure-mobile-read-width: 833px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/ThreadNetworkOperationsLoop-modern-20260718.svg"], img[src$="/ThreatsComplianceEvidencePacket-modern-20260718.svg"], img[src$="/ThreatsComplianceReviewLoop-modern-20260718.svg"], img[src$="/ThreatsWorkedExamplesDecisionOutcomes-modern-20260718.svg"], img[src$="/ThreeIngredientsDecision-modern-20260326.svg"], img[src$="/ThreeTierDetailed-modern-20260108122922.svg"], img[src$="/TopologyManagementTechniquesDecisionMap-modern-20260718.svg"], img[src$="/TrafficCapturePlanPath-modern-20260718.svg"], img[src$="/TransportProtocolsReviewRecord-modern-20260718.svg"], img[src$="/UavNetworkFeaturesReadinessRecord-modern-20260718.svg"], img[src$="/UserResearchEvidenceLoop-modern-20260718.svg"], img[src$="/UxPitfallsPatternMap-modern-20260718.svg"], img[src$="/ValueEcosystem-modern-20260108122916.svg"], img[src$="/VoiceUIFlow-modern-20260103021500.svg"], img[src$="/WearableDesignPrinciples-modern-20260325.svg"], img[src$="/WiFiChannelPlan-modern-20260103000000.svg"], img[src$="/Wifi802154AdvancedDecisionPath-modern-20260718.svg"], img[src$="/Wifi802154AdvancedEvidenceRecord-modern-20260718.svg"], img[src$="/WifiPowerBudgetEvidenceRecord-modern-20260718.svg"], img[src$="/WifiPowerConsumptionStateMap-modern-20260718.svg"], img[src$="/WirelessParadigmsEngineering-modern-20260326.svg"], img[src$="/WirelessProtocolSelection-modern-20260212.svg"], img[src$="/WmsnTrackingReleaseGates-modern-20260718.svg"], img[src$="/WokwiCircuit-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 833px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/Workflow-modern-20260212.svg"], img[src$="/WsnCoverageAlgorithmEvidenceLoop-modern-20260718.svg"], img[src$="/WsnCoverageAlgorithmSelectionRoute-modern-20260718.svg"], img[src$="/WsnCoverageFundamentalsReviewRoute-modern-20260718.svg"], img[src$="/WsnCoverageWorkedExamplesReviewRoute-modern-20260718.svg"], img[src$="/WsnEnergyEvidenceRecord-modern-20260718.svg"], img[src$="/WsnMobileCoverageEvidenceRecord-modern-20260718.svg"], img[src$="/WsnMobileCoverageReviewRoute-modern-20260718.svg"], img[src$="/WsnRoutingLinkQualityRecord-modern-20260718.svg"], img[src$="/WsnSensorNodeReviewRoute-modern-20260718.svg"], img[src$="/WsnTrickleReviewRecord-modern-20260718.svg"], img[src$="/XmppAddressDiscoveryRecord-modern-20260718.svg"], img[src$="/Year1-modern-20260212.svg"], img[src$="/ZWaveArchitectureDeviceRoles-modern-20260718.svg"], img[src$="/ZWaveOverviewProtocolMap-modern-20260718.svg"], img[src$="/ZWavePracticalPlacementPlan-modern-20260718.svg"], img[src$="/ZWavePracticalPlanningLoop-modern-20260718.svg"], img[src$="/ZWavePracticalSecurityPlan-modern-20260718.svg"], img[src$="/ZigbeeAnalyzerReviewRecord-modern-20260718.svg"], img[src$="/ZigbeeNetworkTopology-modern-20260102130500.svg"], img[src$="/ZigbeeTemperatureReviewRecord-modern-20260718.svg"], img[src$="/fig-802-15-4-coexistence-diagnosis-flow.svg"], img[src$="/fig-802-15-4-deployment-acceptance-record.svg"], img[src$="/fig-802-15-4-deployment-evidence-loop.svg"])) { --iot-figure-mobile-read-width: 833px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-802-15-4-features-spec-map.svg"], img[src$="/fig-amqp-091-connection-channel-broker-state.svg"], img[src$="/fig-amqp-implementation-patterns.svg"], img[src$="/fig-amqp-queue-copy-consumer-topology.svg"], img[src$="/fig-applications-sensors-overview-selection-flow.svg"], img[src$="/fig-blockchain-fundamentals-fit-filter.svg"], img[src$="/fig-blockchain-limitations-latency-fit.svg"], img[src$="/fig-blockchain-smart-contracts-exception-flow.svg"], img[src$="/fig-business-model-canvas-variant-layers-modern-20260212.svg"], img[src$="/fig-cicd-iot-ota-updates-gate-path.svg"], img[src$="/fig-cicd-iot-ota-updates-review-record.svg"], img[src$="/fig-cipher-to-production-evidence.svg"], img[src$="/fig-cloud-service-models-iot-fit-map.svg"], img[src$="/fig-coap-amqp-delivery-path.svg"], img[src$="/fig-communication-models-iot-flow-comparison.svg"], img[src$="/fig-connected-devices-form-factors-review-path.svg"], img[src$="/fig-connected-devices-lifecycle-review-path.svg"], img[src$="/fig-connected-devices-power-management-record.svg"], img[src$="/fig-dag-dodag-root-constraint.svg"], img[src$="/fig-data-visualization-realtime-update-lanes.svg"], img[src$="/fig-data-visualization-tools-selection-flow.svg"], img[src$="/fig-data-visualization-types-selection-flow.svg"], img[src$="/fig-design-model-facets-calm-tech-map.svg"], img[src$="/fig-design-model-introduction-orientation.svg"])) { --iot-figure-mobile-read-width: 833px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-design-project-planning-loop.svg"], img[src$="/fig-dev-tools-development-debug-path.svg"], img[src$="/fig-dev-tools-development-workflow-map.svg"], img[src$="/fig-dt-worked-example-patterns.svg"], img[src$="/fig-dtls-sec-attacks-auth-evidence-map.svg"], img[src$="/fig-dtls-sec-performance-cost-route.svg"], img[src$="/fig-dtls-sec-performance-decision-record.svg"], img[src$="/fig-edge-ai-hardware-selection-map.svg"], img[src$="/fig-edge-ai-optimization-decision-map.svg"], img[src$="/fig-edge-ai-tinyml-development-loop.svg"], img[src$="/fig-edge-fog-latency-budget.svg"], img[src$="/fig-enablers-fundamentals-responsibility-placement.svg"], img[src$="/fig-energy-lowpower-strategy-stack.svg"], img[src$="/fig-fmcw-radar-cube.svg"], img[src$="/fig-gateway-deployment-modern-20260212.svg"], img[src$="/fig-hash-role-map.svg"], img[src$="/fig-implement-iterate-loop.svg"], img[src$="/fig-industrial-ethernet-determinism-map.svg"], img[src$="/fig-industrial-ethernet-risk-record.svg"], img[src$="/fig-interactive-design-learning-loop.svg"], img[src$="/fig-interactive-design-principles-map.svg"], img[src$="/fig-interactive-design-principles-record.svg"], img[src$="/fig-interactive-design-process-record.svg"], img[src$="/fig-interactive-design-prototyping-map.svg"])) { --iot-figure-mobile-read-width: 833px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-interactive-design-user-testing-loop.svg"], img[src$="/fig-interactive-design-user-testing-record.svg"], img[src$="/fig-interface-design-fundamentals-state-model.svg"], img[src$="/fig-introduction-to-privacy-threats-chain.svg"], img[src$="/fig-introduction-to-privacy-threats-data-flow.svg"], img[src$="/fig-iot-cloud-levels-cleaning.svg"], img[src$="/fig-iot-ecosystem-layers.svg"], img[src$="/fig-iot-security-hardware-vulnerabilities-surface.svg"], img[src$="/fig-iot-security-network-segmentation-review.svg"], img[src$="/fig-iot-security-ota-updates-pipeline.svg"], img[src$="/fig-iot-security-ota-updates-review.svg"], img[src$="/fig-isa100-fundamentals-management.svg"], img[src$="/fig-isa100-fundamentals-map.svg"], img[src$="/fig-isa100-release-evidence.svg"], img[src$="/fig-isa100-security-usage-classes.svg"], img[src$="/fig-isa100-stack-routing-security.svg"], img[src$="/fig-isa95-variant-usecase-modern-20260212.svg"], img[src$="/fig-leo-job-scheduler.svg"], img[src$="/fig-lorawan-classes-stack.svg"], img[src$="/fig-lorawan-fundamentals-quiz-map.svg"], img[src$="/fig-lorawan-sim-lab-adr.svg"], img[src$="/fig-lorawan-vs-lpwan-map.svg"], img[src$="/fig-lpwan-fund-selection-hard-gates.svg"], img[src$="/fig-m2m-case-studies-pattern-map.svg"])) { --iot-figure-mobile-read-width: 833px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-mcu-gpio-adc-serial.svg"], img[src$="/fig-mcu-mpu-class-fit.svg"], img[src$="/fig-mobile-leak-sdk-paths.svg"], img[src$="/fig-mobile-phone-participatory-sensing-aggregation-review.svg"], img[src$="/fig-multihop-apps-relay-roles.svg"], img[src$="/fig-nb-iot-coverage-reality-modern-20260212.svg"], img[src$="/fig-nb-iot-psm-edrx-timer-gate.svg"], img[src$="/fig-net-cell-apps-agri-arch-modern-20260212.svg"], img[src$="/fig-net-cell-apps-asset-arch-modern-20260212.svg"], img[src$="/fig-net-cell-apps-fleet-arch-modern-20260212.svg"], img[src$="/fig-network-introduction-evidence-route.svg"], img[src$="/fig-network-introduction-review-loop.svg"], img[src$="/fig-network-simulation-scenario-set.svg"], img[src$="/fig-network-simulation-tools-evidence-route.svg"], img[src$="/fig-network-simulation-validation-map.svg"], img[src$="/fig-network-tools-evidence-stack.svg"], img[src$="/fig-network-traffic-capture-points.svg"], img[src$="/fig-network-traffic-evidence-loop.svg"], img[src$="/fig-nfc-modes-and-protocols-release-evidence.svg"], img[src$="/fig-nfc-security-and-comparisons-boundaries.svg"], img[src$="/fig-nfc-tag-programming-workflow.svg"], img[src$="/fig-nfc-tags-and-ndef-security-boundary.svg"], img[src$="/fig-node-behavior-selfish-malicious-review-loop.svg"], img[src$="/fig-opcua-companion-model-review.svg"])) { --iot-figure-mobile-read-width: 833px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-paper-security-map.svg"], img[src$="/fig-paper-security-review-record.svg"], img[src$="/fig-paper-security-tradeoff.svg"], img[src$="/fig-paper-wsn-map.svg"], img[src$="/fig-pid-loop-choice-map.svg"], img[src$="/fig-pid-loop-disturbance.svg"], img[src$="/fig-pid-loop-review-record.svg"], img[src$="/fig-privacy-intro-questions.svg"], img[src$="/fig-privacy-intro-route.svg"], img[src$="/fig-production-case-studies-observability.svg"], img[src$="/fig-protocol-challenge-constraint-map.svg"], img[src$="/fig-protocol-selection-gate.svg"], img[src$="/fig-protocol-selection-guide-evidence-matrix.svg"], img[src$="/fig-protocol-wizard-interactive-flow.svg"], img[src$="/fig-prototyping-hw-components-bench-ladder.svg"], img[src$="/fig-prototyping-hw-pcb-design-bring-up-ladder.svg"], img[src$="/fig-prototyping-kits-smart-home-environmental-roles.svg"], img[src$="/fig-prototyping-sw-languages-boundary-record.svg"], img[src$="/fig-prototyping-sw-languages-roles.svg"], img[src$="/fig-prototyping-sw-libraries-review-workflow.svg"], img[src$="/fig-rf-localisation-evidence-map.svg"], img[src$="/fig-rfid-apps-hardware-integration-boundary.svg"], img[src$="/fig-rfid-apps-hardware-integration-release-evidence.svg"], img[src$="/fig-rfid-apps-industry-applications-pattern-map.svg"])) { --iot-figure-mobile-read-width: 833px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-rfid-security-and-privacy-trust-boundaries.svg"], img[src$="/fig-rfid-troubleshooting-diagnostic-flow.svg"], img[src$="/fig-rfid-troubleshooting-pattern-map.svg"], img[src$="/fig-routing-review-advanced-failover-evidence.svg"], img[src$="/fig-rpl-dodag-construction-phases.svg"], img[src$="/fig-rpl-intro-protocol-fit.svg"], img[src$="/fig-rpl-specification-map.svg"], img[src$="/fig-s2aas-patterns-request-flow-records.svg"], img[src$="/fig-s2aas-platforms-exit-readiness-records.svg"], img[src$="/fig-s2aas-platforms-responsibility-map-records.svg"], img[src$="/fig-safeguards-protection-mccumber-cube.svg"], img[src$="/fig-sdn-anomaly-detection-decision-route.svg"], img[src$="/fig-sdn-anomaly-detection-response-ladder.svg"], img[src$="/fig-sdn-api-request-lifecycle.svg"], img[src$="/fig-sdn-arch-api-boundaries.svg"], img[src$="/fig-sdn-controller-iot-fit.svg"], img[src$="/fig-sdn-controller-message-flow.svg"], img[src$="/fig-sdn-controller-selection-iot-fit.svg"], img[src$="/fig-sdn-controller-selection-lenses.svg"], img[src$="/fig-sdn-data-center-security-response.svg"], img[src$="/fig-sdn-data-center-security-route.svg"], img[src$="/fig-sdn-data-center-security-segmentation.svg"], img[src$="/fig-sdn-iot-api-ha-fit.svg"], img[src$="/fig-sdn-iot-applications-review-route.svg"])) { --iot-figure-mobile-read-width: 833px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-sdn-of-openflow-protocol-boundary.svg"], img[src$="/fig-sdn-of-openflow-protocol-message-roles.svg"], img[src$="/fig-sdn-openflow-challenges-failure-domain.svg"], img[src$="/fig-sdn-prod-framework-proof-loop.svg"], img[src$="/fig-security-overview-architecture-review-map.svg"], img[src$="/fig-security-overview-design-principles-boundary-gates.svg"], img[src$="/fig-sensor-behaviors-mine-safety-review-record.svg"], img[src$="/fig-sensor-prod-quiz-record.svg"], img[src$="/fig-sigfox-deployment-rollout.svg"], img[src$="/fig-sigfox-overview-boundary.svg"], img[src$="/fig-sigfox-service-risk-dependency.svg"], img[src$="/fig-signal-processing-linearization-practice-methods.svg"], img[src$="/fig-signal-processing-linearization-practice-record.svg"], img[src$="/fig-signal-processing-linearization-practice-validation.svg"], img[src$="/fig-signal-processing-sensor-dynamics-step-response.svg"], img[src$="/fig-sim-hardware-evidence-loop.svg"], img[src$="/fig-simulating-fundamentals-review-record.svg"], img[src$="/fig-smart-building-layer-map.svg"], img[src$="/fig-soc-architecture-block-ownership.svg"], img[src$="/fig-soil-sensor-field-selection.svg"], img[src$="/fig-state-machine-transition-contract.svg"], img[src$="/fig-state-machines-iot-coordination.svg"], img[src$="/fig-sw-platforms-cloud-boundary.svg"], img[src$="/fig-sw-platforms-device-management-evidence-matrix.svg"])) { --iot-figure-mobile-read-width: 833px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-sw-platforms-device-management-review-record.svg"], img[src$="/fig-sw-platforms-device-management-roles.svg"], img[src$="/fig-sw-platforms-edge-roles.svg"], img[src$="/fig-testing-environmental-evidence-route.svg"], img[src$="/fig-testing-hil-evidence-loop.svg"], img[src$="/fig-threat-modelling-and-mitigation-decision-flow.svg"], img[src$="/fig-threat-modelling-and-mitigation-scope-map.svg"], img[src$="/fig-threats-owasp-top10-review-surfaces.svg"], img[src$="/fig-time-series-fundamentals-query-lifecycle.svg"], img[src$="/fig-transport-fund-comparison-review-record.svg"], img[src$="/fig-uav-fanet-gateway-records.svg"], img[src$="/fig-uav-mission-avoidance-loop-records.svg"], img[src$="/fig-uav-traj-control-loop-records.svg"], img[src$="/fig-understanding-people-context-evidence-record.svg"], img[src$="/fig-uwb-positioning-systems-measurement-pipeline.svg"], img[src$="/fig-ux-design-evaluation-issue-record.svg"], img[src$="/fig-ux-design-fundamentals-state-loop.svg"], img[src$="/fig-ux-design-pitfalls-patterns-triage-record.svg"], img[src$="/fig-v2x-architecture-modern-20260212.svg"], img[src$="/fig-wifi-certification-reference-evidence-map.svg"], img[src$="/fig-wifi-impl-http-websocket-evidence.svg"], img[src$="/fig-wifi-impl-http-websocket-route.svg"], img[src$="/fig-wirelesshart-network-management-route-health.svg"], img[src$="/fig-wirelesshart-tdma-channel-hopping-blacklist.svg"])) { --iot-figure-mobile-read-width: 833px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-wirelesshart-tdma-channel-hopping-schedule.svg"], img[src$="/fig-wsn-common-mistakes-review-route.svg"], img[src$="/fig-wsn-cov-impl-algorithms-review-map.svg"], img[src$="/fig-wsn-coverage-implementations-route.svg"], img[src$="/fig-wsn-human-centric-sensing-route.svg"], img[src$="/fig-wsn-iot-relationship-review.svg"], img[src$="/fig-wsn-kcov-rotation-record.svg"], img[src$="/fig-wsn-routing-link-quality-map.svg"], img[src$="/fig-wsn-sm-components-record.svg"], img[src$="/fig-wsn-sm-mobile-fit-map.svg"], img[src$="/fig-wsn-sm-prod-deploy-rollout.svg"], img[src$="/fig-wsn-sm-stationary-fit-map.svg"], img[src$="/fig-wsn-sm-stationary-record.svg"], img[src$="/fig-wsn-sm-types-entity-map.svg"], img[src$="/fig-wsn-track-vert-uwasn-gates.svg"], img[src$="/fig-wsn-track-vert-uwasn-map.svg"], img[src$="/fig-wsn-tracking-algorithms-gates.svg"], img[src$="/fig-wsn-tracking-energy-prediction-loop.svg"], img[src$="/fig-xmpp-review-route.svg"], img[src$="/fig-z-wave-architecture-design-review.svg"], img[src$="/fig-z-wave-routing-repair-loop.svg"], img[src$="/fig-z-wave-simulation-handoff.svg"], img[src$="/fig-zero-trust-device-identity-lifecycle.svg"], img[src$="/fig-zigbee-6lowpan-overview-fit-path.svg"])) { --iot-figure-mobile-read-width: 833px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-zigbee-6lowpan-pitfalls-debug-path.svg"], img[src$="/fig-zigbee-6lowpan-routing-rpl-evidence-path.svg"], img[src$="/fig-zigbee-join-evidence-record.svg"], img[src$="/fig-zigbee-matter-certification-evidence-flow.svg"], img[src$="/fig-zigbee-matter-fabric-security-boundary-map.svg"], img[src$="/fig-zigbee-matter-overview-fit-record.svg"], img[src$="/fig-zigbee-matter-stack-evidence-map.svg"], img[src$="/fig-zigbee-matter-testing-triage-record.svg"], img[src$="/fig-zigbee-thread-intro-fit-map.svg"], img[src$="/fig-zigbee-thread-security-matter-boundary-map.svg"], img[src$="/gtm-framework-sequence-20260411.svg"], img[src$="/gtm-phased-launch-gates-20260411.svg"], img[src$="/label-quiz-accelerometer-evidence-route.svg"], img[src$="/label-quiz-hub-gateway.svg"], img[src$="/label-quiz-networking-fund-game-journey.svg"], img[src$="/label-quiz-urllc-control-loop.svg"], img[src$="/monetizing-iot-revenue-landscape.svg"], img[src$="/users-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 833px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/ADC-modern-20260212.svg"], img[src$="/BLEStateMachine-modern-20260102142000.svg"], img[src$="/BabyMonitoring-modern-20260103070000.svg"], img[src$="/BtVersionTimeline-modern-20260212.svg"], img[src$="/ConnectedVehicleV2X-modern-20260102190000.svg"], img[src$="/DeviceLifecycle-modern-20260212.svg"], img[src$="/DtnSocialCarUtility-modern-20260601.svg"], img[src$="/EnablersCommunicationsTopology-modern-20260718.svg"], img[src$="/ManufacturingSupplyChainStack-modern-20260325.svg"], img[src$="/MermaidDacPipeline-modern-20260212.svg"], img[src$="/MermaidInteractiveDesign155a1233-modern-20260212.svg"], img[src$="/MermaidInteractiveDesign6Ddbbd2-modern-20260212.svg"], img[src$="/SensorToCloudPipeline-modern-20260102190000.svg"], img[src$="/TransportOptimizationEvidenceRecord-modern-20260718.svg"], img[src$="/applications-pricing-revenue-model-map.svg"], img[src$="/cp-guide-SleepMonitor-modern-20260103090000.svg"], img[src$="/fig-enablers-communications-decision-surface.svg"], img[src$="/fig-nb-iot-coverage-decision-loop.svg"], img[src$="/fig-nfc-iot-integration-boundary.svg"], img[src$="/fig-nfc-tag-write-verify-loop.svg"], img[src$="/fig-openflow-tcam-miss-sequence.svg"], img[src$="/fig-privacy-principles-ethics.svg"], img[src$="/fig-production-management-operating-model.svg"], img[src$="/fig-prototyping-sw-best-practices-boundaries.svg"])) { --iot-figure-mobile-read-width: 836px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-prototyping-sw-best-practices-route.svg"], img[src$="/label-quiz-electricity-core4.svg"])) { --iot-figure-mobile-read-width: 836px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/LOW_RISK-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 840px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/DSDVWhenANewLinkAppears-modern-20260807.svg"])) { --iot-figure-mobile-read-width: 841px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/BLEGATTProfile-modern-20260103000000.svg"], img[src$="/DutyCyclingAndTopologyEvidenceRecord-modern-20260718.svg"], img[src$="/Ethernet-modern-20260103090000.svg"], img[src$="/FlowEntry-modern-20260222.svg"], img[src$="/Mermaid5gNetworkSlicing0-modern-20260212.svg"], img[src$="/MermaidSpiBus-modern-20260212.svg"], img[src$="/MermaidUserExperienceDesi3B00d75-modern-20260212.svg"], img[src$="/NbiotLtemSelectionWorkflow-modern-20260718.svg"], img[src$="/NoiseSourcesMitigation-modern-20260212.svg"], img[src$="/RevenueStreams-modern-20260108122913.svg"], img[src$="/ServiceMesh-modern-20260102190000.svg"], img[src$="/UavVanetHandoffRecord-modern-20260718.svg"], img[src$="/fig-lpwan-fund-selection-requirement-record.svg"], img[src$="/fig-mobile-wsn-topology-self-management.svg"], img[src$="/fig-public-key-workflow.svg"], img[src$="/fig-zwave-region-identity-radio.svg"])) { --iot-figure-mobile-read-width: 847px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-industrial-revolutions-variant-comparison-modern-20260212.svg"], img[src$="/fig-prototyping-hw-best-practices-bringup.svg"], img[src$="/fig-sensor-data-quality-pipeline.svg"])) { --iot-figure-mobile-read-width: 848px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/MermaidAdcPipeline-modern-20260212.svg"], img[src$="/fig-s2aas-patterns-capacity-guardrails.svg"])) { --iot-figure-mobile-read-width: 850px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/StateMachineFundamentalsRoute-modern-20260718.svg"])) { --iot-figure-mobile-read-width: 851px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/3gLteStateMachines-modern-20260108122926.svg"], img[src$="/ASchematicOfAnAdHocNetwork-modern-20260103070000.svg"], img[src$="/AccelerometerAndGyroscopeExampleData-modern-20260103090000.svg"], img[src$="/AgricultureConnectivityGuide-modern-20260325.svg"], img[src$="/ArchitectureLabExtensionRoute-modern-20260718.svg"], img[src$="/ArchitecturePatternsComparison-modern-20260212.svg"], img[src$="/ArchitectureSelectionGuide-modern-20260212.svg"], img[src$="/BLEModule-modern-20260103044500.svg"], img[src$="/BLEStack-modern-20260103070000.svg"], img[src$="/CertEvidenceLanes-modern-20260718.svg"], img[src$="/CommunicationPatternReadinessRecord-modern-20260718.svg"], img[src$="/DSDV-modern-20260103090000.svg"], img[src$="/DataFormatSpectrumOverview-modern-20260317.svg"], img[src$="/DesignTriangle-modern-20260212.svg"], img[src$="/DeviceRequirementsMatrix-modern-20260212.svg"], img[src$="/DigitalTwinSync-modern-20260102190000.svg"], img[src$="/DsdvOverheadComparisonVariant-modern-20260212.svg"], img[src$="/ESP32Architecture-modern-20260103023000.svg"], img[src$="/EdgeAiDeploymentRing-modern-20260718.svg"], img[src$="/EdgeAiLifecycleSpine-modern-20260718.svg"], img[src$="/GettingPosition-modern-20260103114200.svg"], img[src$="/HARTAndWirelessHART-modern-20260103114200.svg"], img[src$="/HBridgeMotorControl-modern-20260212.svg"], img[src$="/HardwareRevenueStrategies-modern-20260108122915.svg"])) { --iot-figure-mobile-read-width: 852px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/I2CSignal-modern-20260103123000.svg"], img[src$="/Initiate-modern-20260222.svg"], img[src$="/InsulatorsConductorsSemiconductors-modern-20260103151700.svg"], img[src$="/IoTProtocolStack-modern-20260102140500.svg"], img[src$="/LorawanFundamentalsReadinessRecord-modern-20260718.svg"], img[src$="/ManufacturingFourPillars-modern-20260325.svg"], img[src$="/ManufacturingMaintenanceEvolution-modern-20260325.svg"], img[src$="/MaterialsInIotDevice-modern-20260212.svg"], img[src$="/Mermaid5gUrllcFuture2-modern-20260212.svg"], img[src$="/MermaidAmqpVsMqttAndUse004e144-modern-20260212.svg"], img[src$="/MermaidCaseStudies0-modern-20260212.svg"], img[src$="/MermaidDoubleDiamondVariant-modern-20260212.svg"], img[src$="/MermaidInteractiveDesign02ed3e1-modern-20260212.svg"], img[src$="/MermaidInteractiveDesign4881708-modern-20260212.svg"], img[src$="/MermaidIotUseCases85cb92a-modern-20260212.svg"], img[src$="/MermaidMultimodalDesign-modern-20260212.svg"], img[src$="/MermaidNetworkMechanisms6574f47-modern-20260212.svg"], img[src$="/MermaidProductionIssues-modern-20260212.svg"], img[src$="/MermaidRiskLayers-modern-20260212.svg"], img[src$="/NanoscaleWsnTrackingEvidenceMap-modern-20260718.svg"], img[src$="/NanoscaleWsnTrackingReleaseGates-modern-20260718.svg"], img[src$="/NbIotImplementationEvidenceRecord-modern-20260718.svg"], img[src$="/PaulBaran-modern-20260212.svg"], img[src$="/Piconets-modern-20260103070000.svg"])) { --iot-figure-mobile-read-width: 852px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/PitfallsLandscape-modern-20260324.svg"], img[src$="/PitfallsRedesignHexagon-modern-20260324.svg"], img[src$="/PrivacyByDesign-modern-20260102131500.svg"], img[src$="/PrivacyComplianceEvidenceWorkflow-modern-20260718.svg"], img[src$="/ProductionCaseStudyRecord-modern-20260718.svg"], img[src$="/ProtocolEvidencePath-modern-20260718.svg"], img[src$="/PrototypingSwBestPracticesResilience-modern-20260718.svg"], img[src$="/R1-modern-20260212.svg"], img[src$="/RequirementsReferenceBridge-modern-20260322.svg"], img[src$="/RequirementsSenseConnectProcessAct-modern-20260322.svg"], img[src$="/RequirementsThreeIngredients-modern-20260322.svg"], img[src$="/ScalingArchitectureEvolution-modern-20260212.svg"], img[src$="/SdnCaseMigrationRiskBoundary-modern-20260718.svg"], img[src$="/SdnIotContainmentRecovery-modern-20260718.svg"], img[src$="/SecurityControlsImplementationRoute-modern-20260718.svg"], img[src$="/SensingServiceBoundaryDecisionPath-modern-20260718.svg"], img[src$="/SensingServiceReviewRecord-modern-20260718.svg"], img[src$="/SensorAppsArchitectureDataPath-modern-20260718.svg"], img[src$="/SixLoWPANCompression-modern-20260102190000.svg"], img[src$="/SmartHomeInterface-modern-20260102190000.svg"], img[src$="/SystemsEvolutionEconomics-modern-20260326.svg"], img[src$="/ThreatsWorkedExamplesEvidenceRecord-modern-20260718.svg"], img[src$="/TimeOfFlight-modern-20260103114200.svg"], img[src$="/TopologyChangeReviewRecord-modern-20260718.svg"])) { --iot-figure-mobile-read-width: 852px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/TrafficCaptureEvidenceRoute-modern-20260718.svg"], img[src$="/TrafficMonitoringEvidenceRecord-modern-20260718.svg"], img[src$="/TransmissionPowerProfile-modern-20260317.svg"], img[src$="/TransportAnalogyEvidenceRecord-modern-20260718.svg"], img[src$="/UxProblemDiagnosisTree-modern-20260212.svg"], img[src$="/WifiZigbeeChannelOverlap-modern-20260222.svg"], img[src$="/WsnCoverageImplementationsFieldLoop-modern-20260718.svg"], img[src$="/coap-methods-patterns-polling-vs-observe.svg"], img[src$="/data-management-and-analytics--KalmanFilter-modern-20260103090000.svg"], img[src$="/data-representation-pipeline-modern-20260307.svg"], img[src$="/fig-automotive-sensors-categories-modern-20260212.svg"], img[src$="/fig-blockchain-iot-shared-energy.svg"], img[src$="/fig-cloud-deployment-models-readiness-record.svg"], img[src$="/fig-communication-models-iot-pattern-map.svg"], img[src$="/fig-context-energy-ace-system-attribute-cost.svg"], img[src$="/fig-e3-object-envelope.svg"], img[src$="/fig-edge-ai-tinyml-fit-gate.svg"], img[src$="/fig-enablers-evolution-convergence-map.svg"], img[src$="/fig-enablers-fundamentals-readiness-gate.svg"], img[src$="/fig-ipv6-6lowpan-adaptation-stack.svg"], img[src$="/fig-jtag-tap-state-machine.svg"], img[src$="/fig-lorawan-exercises-release.svg"], img[src$="/fig-mcu-memory-budget.svg"], img[src$="/fig-modbus-protocol-map.svg"])) { --iot-figure-mobile-read-width: 852px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-net-cell-apps-metering-arch-modern-20260212.svg"], img[src$="/fig-nfc-security-and-comparisons-fallback-flow.svg"], img[src$="/fig-node-behavior-taxonomy-review-flow.svg"], img[src$="/fig-opcua-security-trust-record.svg"], img[src$="/fig-precision-farm-gateway-fabric.svg"], img[src$="/fig-prototyping-sw-architecture-timing.svg"], img[src$="/fig-prototyping-sw-environments-debug-loop.svg"], img[src$="/fig-prototyping-sw-libraries-repo-structure.svg"], img[src$="/fig-qos-core-route.svg"], img[src$="/fig-revenue-ltv-comparison-variant-timeline-modern-20260212.svg"], img[src$="/fig-rpl-prod-framework-mode-decision.svg"], img[src$="/fig-s2aas-platforms-evaluation-flow-records.svg"], img[src$="/fig-sigfox-overview-decision.svg"], img[src$="/fig-signal-processing-voice-compression-pipeline.svg"], img[src$="/fig-soa-resilience-layered-patterns.svg"], img[src$="/fig-umb-device-discovery-flow.svg"], img[src$="/fig-wirelesshart-network-management-join-schedule.svg"], img[src$="/fig-wsn-coverage-problem-types-selection.svg"], img[src$="/fig-wsn-track-vert-wmsn-map.svg"], img[src$="/fig-zero-trust-network-segmentation-enforcement.svg"], img[src$="/fig-zigbee-matter-overview-evidence-map.svg"], img[src$="/gtm-channel-evolution-20260411.svg"])) { --iot-figure-mobile-read-width: 852px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-fog-resource-allocation-loop.svg"])) { --iot-figure-mobile-read-width: 856px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/MermaidIotUseCases7Ba5e21-modern-20260212.svg"], img[src$="/networking-core-ipv4-address-classes.svg"])) { --iot-figure-mobile-read-width: 857px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/EdgeAiMl-modern-20260108122920.svg"], img[src$="/GridSecurity-modern-20260212.svg"], img[src$="/IndustrialMonitoring-modern-20260212.svg"], img[src$="/MermaidBinaryAnalogDigital-modern-20260212.svg"], img[src$="/MermaidInteractiveDesign99a34f5-modern-20260212.svg"], img[src$="/MountingMethods-modern-20260212.svg"], img[src$="/fig-agile-risk-evidence-loop.svg"], img[src$="/fig-fog-energy-latency-frontier.svg"], img[src$="/fig-paper-protocol-map.svg"], img[src$="/fig-prototyping-hw-case-studies-failure-flow.svg"], img[src$="/fig-s2aas-core-discovery-contract.svg"], img[src$="/fig-zigbee-thread-network-architecture-evidence-record.svg"])) { --iot-figure-mobile-read-width: 861px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/Levels-modern-20260212.svg"], img[src$="/MermaidCoap56da8f9-modern-20260212.svg"], img[src$="/MermaidSensorCircuitsFundamentals0-modern-20260212.svg"], img[src$="/SmartBuildingTraceability-modern-20260718.svg"], img[src$="/StateSyncSequence-modern-20260212.svg"], img[src$="/fig-data-storage-cap-evidence-timeline.svg"], img[src$="/fig-enablers-selection-tradeoff-board.svg"], img[src$="/fig-ux-design-evaluation-method-map.svg"], img[src$="/fig-wireless-prop-radio-basics-selection-record.svg"])) { --iot-figure-mobile-read-width: 862px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/BigDataTechnologySelectionRoute-modern-20260718.svg"], img[src$="/MermaidCoap4707c91-modern-20260212.svg"], img[src$="/ParkinsonMonitoringComparison-modern-20260718.svg"], img[src$="/TransportProtocolsEvidenceMap-modern-20260718.svg"], img[src$="/ZWaveRoutingClassicVsLongRange-modern-20260718.svg"], img[src$="/fig-app-protocols-realtime-security-review.svg"], img[src$="/fig-e4-transport-identity.svg"], img[src$="/fig-prototyping-kits-selection-best-practices-scorecard.svg"])) { --iot-figure-mobile-read-width: 867px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/InterusabilityCrossDeviceState-modern-20260807.svg"], img[src$="/TwinsArchComplete-modern-20260108122918.svg"], img[src$="/fig-design-cicd-staged-rollout-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 875px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-cloud-platforms-responsibility-map.svg"])) { --iot-figure-mobile-read-width: 878px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/WsnTrackingImplementationFrameworkMap-modern-20260718.svg"])) { --iot-figure-mobile-read-width: 880px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/BLEConnectionFlow-modern-20260103000000.svg"], img[src$="/CryptoGameFeedbackLoop-modern-20260718.svg"], img[src$="/fig-prototyping-sw-languages-handoff.svg"])) { --iot-figure-mobile-read-width: 881px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/AdhocProdStrategyComparison-modern-20260108123004.svg"], img[src$="/BeaconMarketing-modern-20260102231500.svg"], img[src$="/BlockchainSmartContractEvidencePath-modern-20260718.svg"], img[src$="/Bluetooth-modern-20260212.svg"], img[src$="/CNCMachine-modern-20260103050000.svg"], img[src$="/CS-modern-20260212.svg"], img[src$="/CloudProductionLaunchGateRoute-modern-20260718.svg"], img[src$="/DataMonetization-modern-20260108122915.svg"], img[src$="/DecisionTree-modern-20260108122922.svg"], img[src$="/EnhanceAdherence-modern-20260103070000.svg"], img[src$="/GridAutomation-modern-20260103033000.svg"], img[src$="/INPUT-modern-20260212.svg"], img[src$="/IndustrialIoTLayers-modern-20260212.svg"], img[src$="/IoTBusinessPlansExample-modern-20260103080000.svg"], img[src$="/MermaidDatasheetByPhase-modern-20260212.svg"], img[src$="/MermaidDlqReliability-modern-20260212.svg"], img[src$="/MermaidIiotIndustry41D4c40b-modern-20260108131314.svg"], img[src$="/MermaidLdrVoltageDivider-modern-20260212.svg"], img[src$="/MermaidLocationFundamentals4-modern-20260212.svg"], img[src$="/MermaidNotificationEscalation-modern-20260212.svg"], img[src$="/MermaidSignalConditioning0-modern-20260212.svg"], img[src$="/MermaidWifiHalow-modern-20260212.svg"], img[src$="/QosCorePriorityQueue-modern-20260718.svg"], img[src$="/RetailHvacControlLoop-modern-20260325.svg"])) { --iot-figure-mobile-read-width: 888px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/RetailRfidWorkflow-modern-20260325.svg"], img[src$="/SmartGridVvoLoop-modern-20260325.svg"], img[src$="/SoftwareArchitecturePatternEvidenceMap-modern-20260718.svg"], img[src$="/SoftwareArchitectureReviewRecord-modern-20260718.svg"], img[src$="/TimeSeriesStorage-modern-20260102235500.svg"], img[src$="/TopologiesFundament-modern-20260108122909.svg"], img[src$="/WsnEnergyDutyCyclingRecord-modern-20260719.svg"], img[src$="/fig-amqp-routing-verdict-tree.svg"], img[src$="/fig-business-model-canvas-modern-20260212.svg"], img[src$="/fig-data-visualization-overview-review-loop.svg"], img[src$="/fig-design-model-architectures-selection-map.svg"], img[src$="/fig-design-model-design-thinking-record.svg"], img[src$="/fig-offloading-heterogeneous-placement.svg"], img[src$="/fig-prototyping-sw-ota-route.svg"], img[src$="/fig-ranging-modality-choice.svg"], img[src$="/fig-revenue-ltv-comparison-modern-20260212.svg"], img[src$="/fig-sdn-openflow-challenges-proof-loop.svg"], img[src$="/fig-sensor-prod-quiz-route.svg"], img[src$="/fig-soa-service-boundary-review.svg"], img[src$="/fig-sw-platforms-edge-boundary.svg"], img[src$="/fig-threat-asset-matrix-abuse-interception.svg"], img[src$="/fig-zigbee-6lowpan-deploy-path.svg"])) { --iot-figure-mobile-read-width: 888px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/SignalProcessingFilterSelectionGuide-modern-20260317.svg"], img[src$="/fig-wsn-trickle-multi-node-suppression.svg"])) { --iot-figure-mobile-read-width: 898px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/ControllerAvailabilityOperationsFit-modern-20260718.svg"], img[src$="/DigitalTwinWindFarmGraph-modern-20260601.svg"], img[src$="/RequirementsFiveLayerStack-modern-20260322.svg"])) { --iot-figure-mobile-read-width: 902px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/BatteryLifeSensitivitySweep-modern-20260718.svg"], img[src$="/fig-actuators-classifications-solenoid-bell.svg"], img[src$="/fig-data-fusion-complementary-imu-drift-comparison.svg"], img[src$="/fig-data-fusion-complementary-imu-stationary-calibration.svg"], img[src$="/fig-data-fusion-introduction-data-feature-fusion.svg"], img[src$="/fig-data-fusion-introduction-source-relationships.svg"], img[src$="/fig-revenue-streams-variant-money-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 903px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/GpsSelectiveAvailabilityErrorDrop-modern-20260807.svg"])) { --iot-figure-mobile-read-width: 906px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/EnergyOptimization-modern-20260102190000.svg"], img[src$="/LorawanReleaseReadinessRoute-modern-20260718.svg"], img[src$="/TransportScenarioDecisionRecord-modern-20260718.svg"], img[src$="/fig-data-visualization-codecs-pipeline.svg"], img[src$="/fig-sensor-behaviors-apps-quiz-evidence-path.svg"])) { --iot-figure-mobile-read-width: 909px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/LENS-modern-20260212.svg"], img[src$="/MermaidEdgeComputePattern1D0c15f-modern-20260212.svg"], img[src$="/RetailCheckoutDecisionTree-modern-20260325.svg"], img[src$="/SmartCitiesInfrastructurePlatform-modern-20260325.svg"], img[src$="/ble-encryption-architecture-edinburgh-modern-20260103123000.svg"], img[src$="/fig-connecting-ecosystem-integration-map.svg"], img[src$="/fig-lpwan-fund-selection-workflow.svg"], img[src$="/fig-mobile-privacy-review-loop.svg"], img[src$="/fig-people-context-pitfalls-ethics-risk-loop.svg"], img[src$="/fig-time-series-platforms-evidence-matrix.svg"])) { --iot-figure-mobile-read-width: 915px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/AMQP-modern-20260103070000.svg"], img[src$="/EmbeddedSystem-modern-20260103070000.svg"], img[src$="/GenericSensingApplication-modern-20260103151700.svg"], img[src$="/MermaidDesignModelForIot782f0f5-modern-20260212.svg"], img[src$="/MermaidNetworkMechanisms7B1fc88-modern-20260212.svg"], img[src$="/NBIoTDeploymentModes-modern-20260103000000.svg"], img[src$="/RplSummaryToolsReviewStack-modern-20260718.svg"], img[src$="/RulePlacementChallenges-modern-20260103090000.svg"], img[src$="/WsnCommunicationReviewRoute-modern-20260718.svg"], img[src$="/fig-ci-pipeline-modern-20260212.svg"], img[src$="/fig-edge-ai-application-map.svg"], img[src$="/fig-time-series-retention-lifecycle.svg"])) { --iot-figure-mobile-read-width: 916px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/DataFormatVariantScenarios-modern-20260212.svg"], img[src$="/fig-ace-cache-inference-rule-path.svg"], img[src$="/fig-cloud-traditional-control-tradeoff.svg"], img[src$="/fig-coap-mqtt-constrained-tradeoffs.svg"], img[src$="/fig-collision-resolving-code-columns.svg"], img[src$="/fig-edge-farm-stream-contract.svg"], img[src$="/fig-har-window-inference-path.svg"], img[src$="/fig-iot-data-science-evidence-loop.svg"], img[src$="/fig-lorawan-class-a-receive-timeline.svg"], img[src$="/fig-lorawan-class-b-ping-timeline.svg"], img[src$="/fig-lorawan-class-c-receive-timeline.svg"], img[src$="/fig-lorawan-confirmed-uplink-ack-path.svg"], img[src$="/fig-mobile-sensing-resource-tradeoff.svg"], img[src$="/fig-tilt-maze-protocol-sequence.svg"], img[src$="/fig-transport-mode-evidence-path.svg"], img[src$="/fig-wirelesshart-stack-schedule.svg"])) { --iot-figure-mobile-read-width: 917px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/HumanActivityRecognition-modern-20260103090000.svg"], img[src$="/fig-sensor-behaviors-apps-quiz-record.svg"])) { --iot-figure-mobile-read-width: 923px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/TheStructurOfAnAtom-modern-20260103151700.svg"], img[src$="/fig-ecc-decision-map.svg"])) { --iot-figure-mobile-read-width: 925px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/data-representation-number-systems-modern-20260307.svg"])) { --iot-figure-mobile-read-width: 928px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/SigfoxOverviewEvidencePath-modern-20260718.svg"])) { --iot-figure-mobile-read-width: 930px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/MermaidMfccPipeline-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 937px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/ADCConversionProcess-modern-20260212.svg"], img[src$="/AnomalyDetectionSystem-modern-20260102190000.svg"], img[src$="/FogEnergyLatencyReviewLoop-modern-20260718.svg"], img[src$="/Medication-modern-20260212.svg"], img[src$="/MermaidGatewayFunctions-modern-20260212.svg"], img[src$="/RetailValueTimeline-modern-20260325.svg"], img[src$="/fig-connecting-discovery-pairing-record.svg"], img[src$="/fig-nfc-implementation-write-verify.svg"])) { --iot-figure-mobile-read-width: 941px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/WearableEcosystemArchitecture-modern-20260325.svg"])) { --iot-figure-mobile-read-width: 944px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/SystemsEvolutionTechCycles-modern-20260326.svg"])) { --iot-figure-mobile-read-width: 948px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-wirelesshart-fundamentals-scheduled-mesh.svg"])) { --iot-figure-mobile-read-width: 956px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/SemiconductorDopingProcess-modern-20260429.svg"], img[src$="/fig-component-taxonomy-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 960px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-predictive-pipeline-variant-dataflow-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 965px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/IotReferenceLatency-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 967px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/APIGateway-modern-20260103030000.svg"], img[src$="/AppProtocolSelectionVariant-modern-20260212.svg"], img[src$="/BCN-modern-20260212.svg"], img[src$="/CloudPlatformsMessageLifecycle-modern-20260718.svg"], img[src$="/CoAPObserve-modern-20260102190000.svg"], img[src$="/CompressionAlgorithmDecisionTree-modern-20260212.svg"], img[src$="/DesignModelPatternsComponentsMap-modern-20260718.svg"], img[src$="/DeviceEvolutionClassificationTree-modern-20260322.svg"], img[src$="/DigitalTwinGovernedLoop-modern-20260718.svg"], img[src$="/DroneSwarm-modern-20260103023000.svg"], img[src$="/FleetTelematicsArchitecture-modern-20260212.svg"], img[src$="/Industry40-modern-20260103070000.svg"], img[src$="/MatterFabric-modern-20260103000000.svg"], img[src$="/MermaidAdhocDtnAndSocial1021678f-modern-20260212.svg"], img[src$="/MermaidDesignModelForIot53763d7-modern-20260212.svg"], img[src$="/MermaidInterfaceLandscape-modern-20260212.svg"], img[src$="/MermaidPredictiveMaintenance-modern-20260212.svg"], img[src$="/RetailAnalyticsDataFlow-modern-20260325.svg"], img[src$="/RoboticsAgriculturalKitEvidenceRoute-modern-20260718.svg"], img[src$="/SensorSelectionFitMatrixTradeoffRecord-modern-20260718.svg"], img[src$="/SmartHomeProtocolDecision-modern-20260325.svg"], img[src$="/fig-mobile-phone-participatory-sensing-workflow.svg"], img[src$="/fig-people-context-personas-journeys-journey-map.svg"], img[src$="/fig-pid-tuning-review-record.svg"])) { --iot-figure-mobile-read-width: 972px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-secure-data-software-vulnerabilities-workflow.svg"], img[src$="/fig-time-series-retention-dry-run.svg"], img[src$="/fig-wifi-csi-evidence-pipeline.svg"])) { --iot-figure-mobile-read-width: 972px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-rpl-trickle-worked-example.svg"])) { --iot-figure-mobile-read-width: 978px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/APIGateway-modern-20260102190000.svg"], img[src$="/EvolutionOfIoT-modern-20260103114200.svg"], img[src$="/HealthcareIngestibleWorkflow-modern-20260325.svg"], img[src$="/RequirementsPriorityMatrix-modern-20260322.svg"], img[src$="/fig-threats-worked-examples-record-flow.svg"])) { --iot-figure-mobile-read-width: 980px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/DeviceTaxonomy-modern-20260212.svg"], img[src$="/fig-prototyping-kits-smart-home-environmental-route.svg"])) { --iot-figure-mobile-read-width: 988px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/Sense-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 993px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/FallDetection-modern-20260103033000.svg"], img[src$="/SdnRollbackOperationsHandoff-modern-20260718.svg"], img[src$="/SensorFundamentalsTypesOverview-modern-20260326.svg"], img[src$="/UavStarVsMeshTopology-modern-20260807.svg"], img[src$="/fig-ace-context-energy-architecture.svg"], img[src$="/fig-consortiums-route.svg"], img[src$="/fig-dtn-buffer-tail-risk.svg"], img[src$="/fig-group-testing-sparse-identification.svg"], img[src$="/fig-lorawan-frame-security-ownership.svg"], img[src$="/fig-lorawan-trust-boundary-architecture.svg"], img[src$="/fig-sensor-noise-budget-resolution.svg"])) { --iot-figure-mobile-read-width: 994px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/CalibrationConcepts-modern-20260212.svg"], img[src$="/CellularIotTrafficPathEvidence-modern-20260718.svg"], img[src$="/CoAPObservePattern-modern-20260103000000.svg"], img[src$="/DataStorageDecisionMap-modern-20260718.svg"], img[src$="/DeviceShadow-modern-20260103030000.svg"], img[src$="/HealthcareDataFlowArchitecture-modern-20260325.svg"], img[src$="/LocationAccuracyTradeoffs-modern-20260212.svg"], img[src$="/fig-agile-risk-board.svg"], img[src$="/fig-enablers-fundamentals-foundation-map.svg"], img[src$="/fig-point-cloud-processing-chain.svg"])) { --iot-figure-mobile-read-width: 1000px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-wirelesshart-network-management-evidence-loop.svg"])) { --iot-figure-mobile-read-width: 1012px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/ContainerOrchestration-modern-20260102190000.svg"])) { --iot-figure-mobile-read-width: 1013px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/CloudPrototypeEvidenceRoles-modern-20260718.svg"], img[src$="/MermaidIotUseCases11Ingestible-modern-20260212.svg"], img[src$="/RetailFivePillars-modern-20260325.svg"])) { --iot-figure-mobile-read-width: 1041px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-wifi-certification-reference-route.svg"])) { --iot-figure-mobile-read-width: 1045px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/QoSMechanisms-modern-20260102235500.svg"])) { --iot-figure-mobile-read-width: 1055px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/FirmwareUpdateFlow-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 1079px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/TransmissionLatencyBudget-modern-20260317.svg"])) { --iot-figure-mobile-read-width: 1085px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/EpidemicRoutingExample1-modern-20260103090000.svg"], img[src$="/FREE-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 1110px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-sensor-behaviors-mine-safety-evidence-flow.svg"])) { --iot-figure-mobile-read-width: 1136px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/fig-wifi-overview-fit-record.svg"])) { --iot-figure-mobile-read-width: 1142px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/sensor-fusion-architecture-modern.svg"])) { --iot-figure-mobile-read-width: 1166px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content figure:has(:is(img[src$="/ElectricityPitfalls-modern-20260212.svg"])) { --iot-figure-mobile-read-width: 1180px; --iot-figure-mobile-max-width: none; --iot-figure-mobile-cue: "Swipe or drag to view the full diagram"; --iot-figure-mobile-overflow-x: auto; --iot-figure-mobile-overflow-y: hidden; --iot-figure-mobile-scrollbar: thin; --iot-figure-mobile-overscroll: contain; }
}
/* EIC10-S CANONICAL SECTION END: generated figure widths */

/* EIC10-S CANONICAL SECTION START: design system */
/* Per-figure display widths, generated by scripts/generate-figure-widths.py from each
 * figure's own typography so its labels render near the page's 16px body text.
 * Imported first on purpose: chapter-local #fig-<id> rules (49 chapters, 146 figures)
 * are authored by hand and must keep winning as deliberate overrides. */
/* ============================================================================
   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.
   ============================================================================ */

/* ---- BEGIN self-hosted fonts (2026-07-26, launch blocker B4 perf fix) ----
 * Replaces the fonts.googleapis.com @import chain (page -> this stylesheet ->
 * Google's CSS -> the actual .woff2 file: 2 extra network round-trips before
 * the real font can even start downloading) with same-origin variable-font
 * files referenced directly via @font-face, subset to "latin" only (Latin-1
 * covers this site's English + accented-Latin content; the "latin-ext"
 * Google was also serving is ~1.7x heavier per family and unused here).
 * font-display: optional (was swap until 2026-08-04): the webfont either
 * makes first paint or that pageview keeps the fallback for its lifetime --
 * there is NO mid-page swap, which founder-reported as visible movement.
 * Chrome was measured IGNORING size-adjust/*-override on local() sources
 * (a 50% size-adjust test face rendered identical to plain Arial), so the
 * metric-matched fallbacks below never actually cushioned the swap there;
 * optional is the real shift eliminator. The fallback metrics are kept for
 * engines that do honor them, corrected 2026-08-04 from live rendered-width
 * measurement (the original OS/2 xAvgCharWidth basis was wrong for Inter and
 * Source Code Pro: it said Inter needed 138% when real Inter is NARROWER
 * than Arial, 93.94%); the code font now falls back to Courier New, not
 * Arial, so unswapped code blocks still read as code.
 * Previous rationale (fallback face visible immediately):
 * the paired "* Fallback" faces below use size-adjust/ascent-override/
 * descent-override computed from each font's own OS/2 + hhea tables against
 * Arial's published reference metrics (unitsPerEm 2048, hhea ascent 1854,
 * descent -434, xAvgCharWidth 904 -- the standard reference baseline for
 * this technique, e.g. next/font's automatic local-fallback generator), so
 * the fallback-to-webfont swap reflows the page by only a few px instead of
 * the ~0.14 CLS the homepage <h1> was measured contributing
 * (docs-internal/ops/performance-audit.md, cls-culprits-insight). See
 * docs-internal/ops/performance-b4.md for the exact metric derivation and
 * the measured before/after. Font files: assets/fonts/*.woff2 (repo-tracked,
 * ~97 KB combined for all 3 families vs. the 220-296 KB/page "Font" transfer
 * weight measured before this fix on chapter/guide pages).
 */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: optional;
  src: url("/assets/fonts/source-sans-3-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3 Fallback";
  size-adjust: 81.66%;
  ascent-override: 125.39%;
  descent-override: 48.97%;
  line-gap-override: 0%;
  src: local("Arial");
}
@font-face {
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 200 900;
  font-display: optional;
  src: url("/assets/fonts/source-code-pro-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Code Pro Fallback";
  size-adjust: 117.01%;
  ascent-override: 84.1%;
  descent-override: 23.33%;
  line-gap-override: 0%;
  src: local("Courier New");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Fallback";
  size-adjust: 93.94%;
  ascent-override: 103.12%;
  descent-override: 25.67%;
  line-gap-override: 0%;
  src: local("Arial");
}
/* ---- END self-hosted fonts ---- */

/* ---- Preload coverage gap (2026-08-05, W3 task #69) --------------------
 * font-display: optional above means each of the 3 families gets exactly one
 * chance per pageview: whichever one is NOT already in flight in time for
 * first paint just falls back for that pageview's whole lifetime (no mid-page
 * swap -- that is deliberate, see the CLS rationale above). Whether a family
 * is "in flight in time" depends on how early the browser discovers its URL,
 * which for a font only referenced from CSS (as these are) normally means
 * "whenever this stylesheet is parsed" -- late relative to first paint.
 * <link rel="preload"> is what moves that discovery earlier; CSS has no
 * equivalent mechanism (@font-face cannot inject a resource hint), so any
 * real fix here is necessarily HTML + build-script, not CSS.
 *
 * Audited all 49 _quarto.yml include-in-header preload blocks (root +
 * modules/*, 2026-08-05) and scripts/generate-book-configs.py, which
 * generates them: every block preloads exactly ONE family, chosen per CSS
 * bundle to match that bundle's own body-text font (BUNDLE_FIRST_PAINT_FONT
 * in that script: style/platform.css -> Inter, style/platform-base.css ->
 * Source Sans 3) -- 47 files preload inter-latin.woff2, 2 (root,
 * modules/landing) preload source-sans-3-latin.woff2. This is DELIBERATE,
 * not an oversight: that script's own comment states Source Code Pro is
 * "never preloaded: it is code-block-only, so it is below the fold on
 * effectively every page," and preloading an unused face both costs a real
 * download on slow links and earns a Chrome console warning on any page
 * that never uses it in time.
 *
 * That tradeoff is sound for pages with NO code block, but this task's
 * symptom (code blocks silently rendering in Courier) shows it costs real,
 * visible font-fallback on the many chapter pages that DO have one --
 * "below the fold on effectively every page" is the part worth re-checking
 * against how many platform.css pages actually open with a code sample.
 * The coherent fix is narrower than "preload everywhere" (which would
 * reintroduce the exact waste/warning that decision was avoiding): teach
 * generate-book-configs.py's existing per-bundle preload injection to also
 * check each rendered page for a real code block (`pre code` -- and, for
 * platform.css pages specifically, `.mermaid`, since .mermaid .label is
 * hardcoded to Source Sans 3 regardless of the page's body-text bundle) and
 * add the matching preload only there. That is a scripts/** + generated
 * _quarto.yml change -- outside this file's ownership (W3 board rule) and
 * outside CSS entirely -- so it is handed to CEO as a finding + recommended
 * approach rather than implemented here.
 *
 * The considered alternative -- dropping these families to font-display:
 * swap so a late font can still swap in -- was rejected: swap is exactly
 * what optional REPLACED four lines above, for a measured reason (Chrome
 * ignoring size-adjust/*-override on local() fallback sources, so the
 * swap's reflow was never actually cushioned here). Reverting to swap would
 * trade today's occasional wrong-font code block for the founder-reported
 * visible-movement regression optional was written to eliminate -- a
 * targeted preload fixes the real gap without reopening that one. */

/* ---- BEGIN self-hosted bootstrap-icons override (2026-07-28, launch
 * blocker B4 remainder, cause 1 of 3) ----
 * Quarto's own site_libs/bootstrap/bootstrap-icons.css (regenerated on every
 * build, not ours to edit) declares @font-face { font-family: "bootstrap-icons";
 * src: url(".../bootstrap-icons.woff") format("woff"); } with no font-display,
 * which computed as font-display: block -- 176 KB, no woff2, shipped on every
 * page. This block re-declares the SAME font-family (and the same implicit
 * normal/400 weight+style Quarto's rule uses, so the two rules' descriptors
 * match) with a self-hosted woff2 (128 KB, byte-identical glyph set and
 * cmap -- converted from Quarto's own .woff via fontTools, verified) and
 * font-display: swap. Per the CSS Fonts spec, when two @font-face rules have
 * matching descriptors the later one in document order wins entirely -- this
 * stylesheet loads after site_libs/bootstrap/bootstrap-icons.css on every
 * page class that includes this bundle (verified in rendered <head> order),
 * so the browser fetches only this woff2 and never Quarto's woff. Font file:
 * assets/fonts/bootstrap-icons.woff2 (repo-tracked). See
 * docs-internal/ops/LAUNCH-BLOCKER-REGISTER.md B4 for the full remainder and
 * measured before/after.
 */
@font-face {
  font-family: "bootstrap-icons";
  font-display: swap;
  src: url("/assets/fonts/bootstrap-icons.woff2") format("woff2");
}
/* ---- END self-hosted bootstrap-icons override ---- */

/* AST-HOTFIX1: AST-CSS1 removed Quarto's Bootstrap Icons stylesheet from
 * Astro's static CSS set but retained the font face above. A font without its
 * base pseudo-element contract and glyph mappings renders every `.bi` node as
 * an empty box. Keep the canonical Design System self-contained with the
 * complete icon vocabulary used by current Astro layouts and runtime UI. */
.bi:where(:scope, *)::before,
[class^="bi-"]:where(:scope, *)::before,
[class*=" bi-"]:where(:scope, *)::before {
  display: inline-block;
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -0.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.bi-arrow-left-short:where(:scope, *)::before { content: "\f12c"; }
.bi-arrow-right-short:where(:scope, *)::before { content: "\f135"; }
.bi-award-fill:where(:scope, *)::before { content: "\f153"; }
.bi-eye-fill:where(:scope, *)::before { content: "\f33e"; }
.bi-hand-thumbs-down:where(:scope, *)::before { content: "\f405"; }
.bi-hand-thumbs-up:where(:scope, *)::before { content: "\f407"; }
.bi-journal-bookmark:where(:scope, *)::before { content: "\f43d"; }
.bi-layout-text-sidebar-reverse:where(:scope, *)::before { content: "\f461"; }
.bi-person-circle:where(:scope, *)::before { content: "\f4d7"; }
.bi-search:where(:scope, *)::before { content: "\f52a"; }
.bi-shield-lock:where(:scope, *)::before { content: "\f538"; }

/* AST-CSS1 CRITICAL START: final tokens and typography */
:root:where(:scope) {
  --ds-font: "Inter", "Inter Fallback", "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: #5f6b78; /* captions / meta: AA on white and subtle panels */
  --ds-line: #e6e8eb; /* hairlines */
  --ds-line-strong: #d2d6dc;
  --ds-surface: #ffffff;
  --ds-surface-alt: #f7f9fb; /* subtle panels */
  --ds-accent: var(--pc-main, #546e7a);
  --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:where(:scope, *) {
  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:where(:scope, *),
#quarto-document-content li:where(:scope, *),
#quarto-document-content > ul:where(:scope, *),
#quarto-document-content > ol:where(:scope, *),
#quarto-document-content blockquote:where(:scope, *) {
  max-width: var(--ds-measure);
}
#quarto-document-content p:where(:scope, *) {
  margin: 0 0 1.15rem;
}

h1:where(:scope, *),
h2:where(:scope, *),
h3:where(:scope, *),
h4:where(:scope, *),
h5:where(:scope, *),
.quarto-title-block .title:where(:scope, *) {
  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:where(:scope, *) {
  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:where(:scope, *) {
  font-size: 1.25rem !important;
  margin-top: 1.9rem !important;
}
#quarto-document-content h2:where(:scope, *)::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:where(:scope, *),
a:visited:where(:scope, *) {
  color: var(--ds-accent-link);
  text-decoration: none;
}
a:hover:where(:scope, *) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

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

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

/* ---- 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
  ):where(:scope, *) {
  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
    )
  ):where(:scope, *) {
  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
  ):where(:scope, *) {
  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):where(:scope, *) {
  width: auto !important;
  max-width: var(--ds-block-width) !important;
  min-width: 0;
  box-sizing: border-box;
  justify-self: stretch;
}

/* Generated typography widths live on the figure as a custom property too.
   A capped image gets a panel just 32px wider than itself (the existing 16px
   side padding). At a narrow viewport the panel still fills its available
   column. 400px is the caption floor: ordinary two-line captions remain easy
   to scan without forcing an image wider than its legible generated size. */
#quarto-document-content figure:has(img[src$=".svg"]):where(:scope, *) {
  width: min(100%, max(400px, calc(var(--iot-figure-fit-width, 100%) + 32px))) !important;
  justify-self: center;
}
#quarto-document-content figure:has(img[src$=".svg"]) img[src$=".svg"]:where(:scope, *) {
  width: 100% !important;
  max-width: min(100%, var(--iot-figure-fit-width, 100%)) !important;
}
/* FIG-MOBILE-READ-1: each mobile width is generated from measured SVG text.
   The figure panel and caption keep their fitted width; only its viewport scrolls. */
@media (max-width: 600px) {
  /* Keep the original ultra-wide fallback readable before the viewport script runs. */
  #quarto-document-content figure:has(img:is(
    [src$="/ClosedLoopIotSystem-modern-20260108122920.svg"],
    [src$="/UartStructure-modern-20260108123005.svg"]
  )):where(:scope, *) {
    --iot-figure-mobile-read-width: 45rem;
    --iot-figure-mobile-max-width: none;
  }
  #quarto-document-content figure:not(.iot-figure-ultrawide):has(img[src$=".svg"]) img[src$=".svg"]:where(:scope, *) {
    width: var(--iot-figure-mobile-read-width, 100%) !important;
    max-width: var(--iot-figure-mobile-max-width, min(100%, var(--iot-figure-fit-width, 100%))) !important;
  }
  #quarto-document-content figure:has(img[src$=".svg"]):where(:scope, *)::before {
    content: var(--iot-figure-mobile-cue, none);
    display: block;
    margin: 0 0 0.45rem;
    color: var(--ds-ink-soft);
    font-size: 0.78rem;
    font-weight: 700;
    text-align: left;
  }
}

/* Preserve the existing phone scroll viewport for ultra-wide diagrams. Its
   authored-size image prevents a shallow SVG from collapsing to a thin strip. */
@media (max-width: 767px) {
  #quarto-document-content :is(figure, .quarto-figure).iot-figure-scroll img[src$=".svg"]:where(:scope, *),
  #quarto-document-content :is(figure, .quarto-figure):has(.iot-figure-scroll) img.iot-figure-scroll[src$=".svg"]:where(:scope, *) {
    width: 45rem !important;
    max-width: none !important;
  }
}

/* Depth prose wrappers use a `*-layer` / `*-layer-copy` convention and many
   are single-column grids without an explicit track. An implicit `auto` track
   takes a fixed-width figure or table's max-content width and can grow beyond
   its mobile reading column. Give that shared single-column convention a
   zero-minimum track so the figure fallback and table scroll box resolve
   against the actual column instead. Purpose-built multi-column components
   use their own `*-grid` classes and are unaffected. */
#quarto-document-content
  :where(
    [class$="-layer"],
    [class*="-layer "],
    [class$="-layer-copy"],
    [class*="-layer-copy "]
  ):where(:scope, *) {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  max-width: 100%;
}

/* Figures fill the available narrow column but never exceed their generated
   typography-derived max-width. The generated selector supplies that pixel
   cap; this fluid fallback prevents the image's intrinsic/fixed width from
   enlarging a mobile grid track and clipping the right side of the figure. */
#quarto-document-content :where(figure img, figure svg, .quarto-figure img.figure-img):where(:scope, *) {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin-inline: auto;
}

/* ---- Sidebar / nav: clean, flat, accent-aware -------------------------- */
#quarto-sidebar:where(:scope, *),
.sidebar.sidebar-navigation:where(:scope, *) {
  background: var(--ds-surface) !important;
  border-right: 1px solid var(--ds-line) !important;
}
#quarto-sidebar .sidebar-item-text:where(:scope, *) {
  color: var(--ds-ink-soft) !important;
  font-weight: 500;
}
#quarto-sidebar .sidebar-item a.active:where(:scope, *),
#quarto-sidebar .sidebar-link.active:where(:scope, *) {
  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:where(:scope, *) {
  color: var(--ds-accent) !important;
}
.sidebar-title:where(:scope, *),
.sidebar-part-title:where(:scope, *) {
  color: var(--ds-accent) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

/* ---- Callouts (Summary / Key Takeaway): flat with accent edge ---------- */
.callout:where(:scope, *) {
  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:where(:scope, *),
.callout-title-container:where(:scope, *) {
  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"]:not(.ikc-corrective-note):where(:scope, *) {
  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:where(:scope, *),
#quarto-document-content [class*="-note"] b:where(:scope, *),
#quarto-document-content [class*="-note"] .pc-pbd-note-title:where(:scope, *) {
  color: var(--ds-ink) !important;
}

/* ---- Figures: centered, framed, AUTO-NUMBERED ------------------------- */
#quarto-document-content:where(:scope, *) {
  counter-reset: ds-fig;
}
#quarto-document-content figure:where(:scope, *),
#quarto-document-content .pc-pbd-figure:where(:scope, *),
#quarto-document-content [class*="-figure"]:where(:scope, *) {
  counter-increment: ds-fig;
}

/* duplicate-figure-caption (P3 wave-3 fix, 2026-07-22): a figure authored
   with Quarto's NATIVE crossref syntax (`![caption](img){#fig-id}`) already
   bakes its own "Figure X.Y: " prefix straight into the caption text, using
   Quarto's own chapter-scoped crossref counter -- built HTML confirmed
   `<figcaption class="quarto-float-caption-bottom quarto-float-caption
   quarto-float-fig">Figure&nbsp;4.1: RFID Tag Types Compared</figcaption>`.
   That counter is entirely independent of `ds-fig` below, so the two
   systems were double-numbering every Quarto-native figure ("Figure 3.
   Figure 4.1: RFID Tag Types Compared", rfid-nfc-uwb). Opt Quarto-native
   figures out of the `ds-fig` counter entirely (both the increment and the
   injected prefix) rather than patching the 3 affected chapters -- one
   shared selector fix here covers every current and future Quarto-native
   figure estate-wide, and raw-HTML (non-crossref) figures keep their
   existing clean sequential "Figure 1.", "Figure 2." numbering unaffected
   (Quarto-native figures no longer consume a number from that sequence
   either, so it stays contiguous on mixed pages). */
#quarto-document-content figure.quarto-float-fig:where(:scope, *) {
  counter-increment: none;
}

/* Founder 2026-09-08: a figure is a light-grey flat panel, never a bordered
 * white box inside another box; the image inside has no border or shadow. */
#quarto-document-content figure:where(:scope, *) {
  margin: 2rem auto !important;
  text-align: center;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 1rem 1rem 0.5rem !important;
  background: #f3f5f7 !important;
  max-width: 760px;
}
#quarto-document-content figure img:where(:scope, *),
#quarto-document-content figure svg:where(:scope, *) {
  max-width: 100%;
  height: auto;
}
#quarto-document-content figcaption:where(:scope, *),
#quarto-document-content figure figcaption:where(:scope, *) {
  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:not(.quarto-float-caption):where(:scope, *)::before {
  content: "Figure " counter(ds-fig) ". ";
  font-weight: 700;
  color: color-mix(in srgb, var(--ds-accent) 58%, #17212b);
}

/* Chapter figures: every diagram can be opened at authored size. Ultra-wide
   SVGs keep that size in a labelled, keyboard-focusable phone viewport rather
   than shrinking into a 33--65px strip. components.js adds these wrappers as
   progressive enhancement; the underlying image and caption remain intact. */
.iot-figure-viewport:where(:scope, *) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.iot-figure-viewport > img:where(:scope, *) {
  max-height: none !important;
  object-fit: contain;
}
.iot-figure-scroll-hint:where(:scope, *) {
  display: none;
}
.iot-figure-expand:where(:scope, *),
.iot-figure-dialog__close:where(:scope, *) {
  appearance: none;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface);
  color: #17212b;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 0.55rem 0.75rem;
  cursor: pointer;
}
.iot-figure-expand:where(:scope, *) {
  display: block;
  min-height: 2.75rem;
  margin: 0.7rem auto 0;
}
.iot-figure-expand:hover:where(:scope, *),
.iot-figure-dialog__close:hover:where(:scope, *) {
  background: color-mix(in srgb, var(--ds-accent) 8%, white);
}
.iot-figure-expand:focus-visible:where(:scope, *),
.iot-figure-dialog__close:focus-visible:where(:scope, *),
.iot-figure-viewport:focus-visible:where(:scope, *) {
  outline: 3px solid color-mix(in srgb, var(--ds-accent) 42%, white);
  outline-offset: 3px;
}
.iot-figure-dialog:where(:scope, *) {
  width: min(96vw, 1440px);
  max-width: none;
  height: min(94vh, 1080px);
  max-height: none;
  padding: 0;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
  color: var(--ds-ink);
  box-shadow: 0 20px 60px rgb(15 23 42 / 24%);
}
.iot-figure-dialog:where(:scope, *)::backdrop {
  background: rgb(15 23 42 / 58%);
}
.iot-figure-dialog__bar:where(:scope, *) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--ds-line);
}
.iot-figure-dialog__viewport:where(:scope, *) {
  height: calc(100% - 3.8rem);
  overflow: auto;
  padding: 1rem;
  text-align: center;
  overscroll-behavior: contain;
}
.iot-figure-dialog__viewport img:where(:scope, *) {
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  min-width: min(100%, 900px);
}
body.iot-figure-dialog-open:where(:scope, *) {
  overflow: hidden;
}

@media (max-width: 600px) {
  /* These two figures sit in nested sections whose automatic minimum width
     otherwise grows to the scrollable diagram. Keep the caption panel in view. */
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content section:has(figure img:is(
    [src$="/SensorPipelinePacketBudget-modern-20260317.svg"],
    [src$="/fig-ipv4-structure-modern-20260212.svg"]
  )) {
    min-width: 0;
    max-width: 100%;
  }
  #quarto-document-content figure.iot-figure-ultrawide:where(:scope, *) {
    padding-inline: 0.65rem !important;
  }
  .iot-figure-scroll-hint:where(:scope, *) {
    display: var(--iot-figure-mobile-hint-display, none);
    margin: 0 0 0.45rem;
    color: var(--ds-ink-soft);
    font-size: 0.78rem;
    font-weight: 700;
    text-align: left;
  }
  .iot-figure-viewport:where(:scope, *) {
    overflow-x: var(--iot-figure-mobile-overflow-x, visible);
    overflow-y: var(--iot-figure-mobile-overflow-y, visible);
    padding: var(--iot-figure-mobile-padding, 0);
    scrollbar-width: var(--iot-figure-mobile-scrollbar, auto);
    overscroll-behavior-inline: var(--iot-figure-mobile-overscroll, auto);
  }
  .iot-figure-ultrawide .iot-figure-viewport:where(:scope, *) {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.25rem 0 0.6rem;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
  }
  .iot-figure-ultrawide:where(:scope, *) { --iot-figure-mobile-hint-display: block; }
  #quarto-document-content figure.iot-figure-ultrawide .iot-figure-viewport > img[src]:where(:scope, *) {
    width: max(56rem, var(--iot-figure-mobile-read-width, 56rem), 100%) !important;
    max-width: none !important;
    height: auto !important;
    scroll-snap-align: start;
  }
  .iot-figure-dialog:where(:scope, *) {
    width: 100vw;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }
}

/* Opted-in raster diagrams retain their authored pixels in the existing phone
   scroll viewport. SVG text measurements cannot establish raster label sizes. */
@media (max-width: 600px) {
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content .iot-figure-expandable {
    min-width: 0;
    max-width: 100%;
    --iot-figure-mobile-read-width: max-content;
    --iot-figure-mobile-overflow-x: auto;
    --iot-figure-mobile-overflow-y: hidden;
    --iot-figure-mobile-scrollbar: thin;
    --iot-figure-mobile-overscroll: contain;
    --iot-figure-mobile-hint-display: block;
  }
  html:where(:scope):not([data-feat-chapter-figure-mobile-read="off"]) #quarto-document-content .iot-figure-expandable figure .iot-figure-viewport > img[src] {
    width: max-content !important;
    max-width: none !important;
    height: auto !important;
  }
}

/* ---- Photo figures (real-photo pilot, 2026-08-06) ----------------------
   Licensed Wikimedia Commons photographs of physical hardware, stored under
   assets/photos/ with every file registered in
   assets/data/photo-registry.json (author, license, source URL; enforced by
   scripts/check-photo-attribution.py). Reuses the figure frame above
   (border, radius, background, centering, auto-numbering) as-is and adds
   only what a real photo needs that an authored SVG diagram does not: a
   hairline border directly on the <img> itself (a photo carries its own
   busy background, unlike a diagram drawn flat to match --ds-surface) and a
   quiet attribution line inside the figcaption -- required by the CC BY /
   CC BY-SA licenses in the registry, kept visually secondary to the caption
   text it follows. Markup:
     <figure class="photo-figure">
       <img src="/assets/photos/<slug>.webp" alt="...">
       <figcaption>
         <span class="photo-figure-caption">Caption sentence(s).</span>
         <span class="photo-figure-credit">Photo: <a href="<source_url>">
           <author>, <license></a></span>
       </figcaption>
     </figure> */
/* Keep a single intrinsic photo and its credit in one snug figure panel.
   The zero-width caption takes the figure's resolved width without contributing
   its long unwrapped text to the panel's intrinsic size. Full-column photos
   retain their existing width and caption measure. */
#quarto-document-content figure.photo-figure:where(:scope, *) {
  width: fit-content !important;
  min-width: min(100%, 400px);
  max-width: 100% !important;
}
#quarto-document-content figure.photo-figure figcaption:where(:scope, *) {
  width: 0;
  min-width: 100%;
}
#quarto-document-content figure.photo-figure img:where(:scope, *) {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: min(75vh, calc(100svh - 12rem));
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-sm) !important;
}
.iot-photo-lightbox-trigger:where(:scope, *) {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  cursor: zoom-in;
}
.iot-photo-lightbox-trigger:focus-visible:where(:scope, *) {
  border-radius: var(--ds-radius-sm);
  outline: 3px solid color-mix(in srgb, var(--ds-accent) 42%, white);
  outline-offset: 4px;
}
.iot-photo-lightbox:where(:scope, *) {
  width: min(96vw, 1440px);
  max-width: none;
  height: min(94vh, 1080px);
  max-height: none;
  padding: 0;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
  color: var(--ds-ink);
  box-shadow: 0 20px 60px rgb(15 23 42 / 24%);
}
.iot-photo-lightbox:where(:scope, *)::backdrop {
  background: rgb(15 23 42 / 72%);
}
.iot-photo-lightbox__bar:where(:scope, *) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--ds-line);
}
.iot-photo-lightbox__close:where(:scope, *) {
  appearance: none;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface);
  color: #17212b;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.iot-photo-lightbox__close:hover:where(:scope, *) {
  background: color-mix(in srgb, var(--ds-accent) 8%, white);
}
.iot-photo-lightbox__close:focus-visible:where(:scope, *) {
  outline: 3px solid color-mix(in srgb, var(--ds-accent) 42%, white);
  outline-offset: 2px;
}
.iot-photo-lightbox__viewport:where(:scope, *) {
  display: grid;
  height: calc(100% - 4.4rem);
  box-sizing: border-box;
  place-items: center;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.75rem;
  padding: 1rem;
}
.iot-photo-lightbox__image:where(:scope, *) {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  cursor: zoom-out;
}
.iot-photo-lightbox__caption:where(:scope, *) {
  max-width: 70rem;
  margin: 0;
  color: var(--ds-ink-soft);
  font-size: 0.9rem;
  line-height: 1.45;
  text-align: center;
}
body.iot-photo-lightbox-open:where(:scope, *) {
  overflow: hidden;
}
@media (max-width: 600px) {
  .iot-photo-lightbox:where(:scope, *) {
    width: 100vw;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }
  .iot-photo-lightbox__viewport:where(:scope, *) {
    padding: 0.75rem;
  }
}
#quarto-document-content figure.photo-figure .photo-figure-caption:where(:scope, *) {
  display: block;
}
#quarto-document-content figure.photo-figure .photo-figure-credit:where(:scope, *) {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.8rem !important;
  font-weight: 400;
  color: var(--ds-ink-soft, #52606d);
}
#quarto-document-content figure.photo-figure .photo-figure-credit a:where(:scope, *) {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--ds-line-strong);
  text-underline-offset: 2px;
}
#quarto-document-content figure.photo-figure .photo-figure-credit a:hover:where(:scope, *) {
  color: var(--ds-ink-soft);
  text-decoration-color: currentColor;
}

/* ---- Photo carousel ---------------------------------------------------
   Progressive enhancement for the PHOTO-B7/B8 multi-photo teaching
   pattern. The unenhanced custom element remains a readable stack of
   attributed figures; once iot-photo-carousel.js is ready, one slide is
   shown with explicit previous/next controls and a roving-tabindex dot
   group. There is deliberately no timed transition or autoplay. */
#quarto-document-content iot-photo-carousel:where(:scope, *) {
  display: block;
  width: 100%;
  max-width: 72rem;
  margin: 1.5rem auto;
}
#quarto-document-content iot-photo-carousel.iot-photo-carousel--enhanced:where(:scope, *) {
  touch-action: pan-y;
}
#quarto-document-content iot-photo-carousel > figure.photo-figure:where(:scope, *) {
  box-sizing: border-box;
  width: 100%;
  margin: 0 !important;
}
.iot-photo-carousel__controls:where(:scope, *) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.75rem;
}
.iot-photo-carousel__arrow:where(:scope, *) {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--ds-line-strong);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface);
  color: var(--ds-ink);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.iot-photo-carousel__arrow:hover:where(:scope, *) {
  border-color: var(--ds-accent);
  background: color-mix(in srgb, var(--ds-accent) 8%, var(--ds-surface));
}
.iot-photo-carousel__arrow:focus-visible:where(:scope, *),
.iot-photo-carousel__dot:focus-visible:where(:scope, *) {
  outline: 3px solid color-mix(in srgb, var(--ds-accent) 42%, white);
  outline-offset: 2px;
}
.iot-photo-carousel__dots:where(:scope, *) {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
}
.iot-photo-carousel__dot:where(:scope, *) {
  position: relative;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}
.iot-photo-carousel__dot:where(:scope, *)::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border: 2px solid var(--ds-line-strong);
  border-radius: 999px;
  background: var(--ds-surface);
  content: "";
  transform: translate(-50%, -50%);
}
.iot-photo-carousel__dot[aria-current]:where(:scope, *)::before {
  border-color: var(--ds-accent);
  background: var(--ds-accent);
}
@media (max-width: 480px) {
  .iot-photo-carousel__controls:where(:scope, *) {
    gap: 0.25rem;
  }
  .iot-photo-carousel__arrow:where(:scope, *) {
    padding-inline: 0.65rem;
  }
  .iot-photo-carousel__arrow span:not([aria-hidden="true"]):where(:scope, *) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .iot-photo-carousel__dot:where(:scope, *) {
    width: 36px;
    min-width: 36px;
  }
}

/* ---- 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:where(:scope, *),
iot-knowledge-check.inline-knowledge-check:where(:scope, *) {
  background: var(--ds-surface-alt) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius) !important;
  box-shadow: none !important;
}
/* White options lift off the grey check panel. Hover changes only the border;
   answer feedback keeps its own colour and touch cannot leave a hover state. */
.inline-knowledge-check .ikc-option:not(.ikc-selected):not(.ikc-correct):not(.ikc-incorrect):not(.ikc-missed):where(:scope, *) {
  border: 1px solid var(--ds-line) !important;
  box-shadow: none !important;
}
@media (hover: hover) and (pointer: fine) {
  .inline-knowledge-check .ikc-option:hover:not(.ikc-disabled):not(.ikc-selected):not(.ikc-correct):not(.ikc-incorrect):not(.ikc-missed):where(:scope, *) {
    border-color: var(--flat-accent) !important;
  }
}

.wearable-battery-results:where(:scope, *),
.wearable-battery-results *:where(:scope, *) { color: #fff !important; }

/* ---- Tables: flat, clean ---------------------------------------------- */
/* table-column-text-clipped-right-edge / table-column-text-overflow-clipped
   (P3 wave-5 visual-review, 2026-07-22 -- ux-design/location-awareness-indoor
   and others): a real <table> with `table-layout: auto` (the default) sizes
   each column from its own content's natural width; when the sum of those
   natural widths exceeds the space this narrower reading column gives the
   table, the excess used to be silently DISCARDED by `overflow: hidden`
   here -- no wrap fallback, no scrollbar, right-hand columns (often the
   most important one, e.g. "Recommendation"/"Suitable?") losing content
   with no visual affordance that anything was cut. DOM-measured live: the
   clipped table's own scrollWidth/clientWidth both looked "fine" (`overflow:
   hidden` on a non-scrolling element reports its OWN box size, not the
   content it discarded), but a full-viewport screenshot showed the table's
   right edge genuinely extending past the rest of the page's content
   column with text glyphs missing -- confirmed via `elementHandle.
   screenshot()`, not just a DOM measurement (that measurement is
   structurally blind to this exact failure mode). `overflow-x: auto` is
   the same fix already established for `.physfn-card` (P3 wave-3) and the
   `cix-table` family (P3 wave-5 §6.5 fix) for the identical fixed-content-
   wider-than-container shape: the reader now gets a real horizontal
   scrollbar/cue instead of a silent, invisible cut. Applies to every plain
   <table> estate-wide in one shared rule. */
#quarto-document-content table:where(:scope, *) {
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-sm);
  width: auto !important;
  max-width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
  justify-self: stretch;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  display: block;
}
#quarto-document-content thead th:where(:scope, *) {
  background: var(--ds-surface-alt) !important;
  color: var(--ds-ink) !important;
  border-bottom: 2px solid var(--ds-line-strong) !important;
}
#quarto-document-content td:where(:scope, *),
#quarto-document-content th:where(:scope, *) {
  border-color: var(--ds-line) !important;
}

/* Existing tables already scroll. A scroll timeline is inactive when a table
   fits, so the cue adds no layout box and appears only for real overflow.
   Keep chapter-specific stacked/card layouts and widget tables untouched. */
@supports (animation-timeline: scroll(nearest inline)) {
  #quarto-document-content table:not(:where(.observablehq *, .cell-output-display *, iot-knowledge-check *, .inline-knowledge-check *, .iot-table-scroll *, .iot-lab-table-scroll *, .access-table-scroll *, .wiring-map *)):where(:scope, *) {
    position: relative;
  }
  #quarto-document-content table:not(:where(.observablehq *, .cell-output-display *, iot-knowledge-check *, .inline-knowledge-check *, .iot-table-scroll *, .iot-lab-table-scroll *, .access-table-scroll *, .wiring-map *)):where(:scope, *)::after {
    content: "scroll →";
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    box-sizing: border-box;
    width: 4.5rem;
    height: 100%;
    padding: .3rem .35rem;
    text-align: right;
    font: 600 .72rem/1.3 system-ui, sans-serif;
    color: var(--ds-ink, #243746);
    background: linear-gradient(to right, transparent, var(--ds-surface, #fff) 100%);
    pointer-events: none;
    opacity: 0;
    animation: iot-table-scroll-cue-49be8f35e5630bbd linear;
    animation-timeline: scroll(nearest inline);
  }
  @keyframes iot-table-scroll-cue-49be8f35e5630bbd {
    0% { opacity: 1; }
    100% { opacity: 0; }
  }
}

/* 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:where(:scope, *),
#quarto-document-content th:where(:scope, *) {
  hyphens: auto;
}

/* ledger-grid-midword-break-no-hyphen (P3 wave-3 fix, 2026-07-22): the exact
   same table-cell-midword-break mechanism above, but for the custom
   div-based "ledger" pseudo-table pattern (`<div class="<prefix>-ledger">`
   wrapping `<div>` cell children, each per-file \3c style> block setting
   `overflow-wrap: anywhere` on the cell divs with no `hyphens`) that this
   site uses in ~280 chapters estate-wide as an alternative to a real
   <table> -- confirmed via grep that every instance follows the identical
   `.<prefix>-ledger > div { ... overflow-wrap: anywhere; }` shape (only the
   chapter-specific class prefix changes), so a single attribute-wildcard
   selector covers all of them without 280 per-file edits. The report's
   7-chapter finding (reference-architectures) was this pattern's first
   *reported* occurrence, not its full extent -- fixed estate-wide here
   since the mechanism and the fix are identical everywhere it appears.
   `apps-depth-grid` (iot-reference-architectures-applications.qmd) is the
   one observed naming outlier that uses a "-grid" suffix instead of
   "-ledger" for the same component; listed explicitly rather than widened
   to `[class*="-grid"]`, which would also match unrelated grid classes
   (e.g. `.physfn-grid`) that already have their own overflow handling. */
#quarto-document-content [class*="-ledger"] > div:where(:scope, *),
#quarto-document-content .apps-depth-grid > div:where(:scope, *) {
  hyphens: auto;
}

/* ---- Code: soft, flat -------------------------------------------------- */
#quarto-document-content pre:where(:scope, *),
#quarto-document-content code:where(:scope, *) {
  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:where(:scope, *) {
  --part-color: var(--pc-main, #546e7a); /* primary accent source */
  --module-color: var(--pc-main, #546e7a); /* 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, #546e7a);
}

/* ---- 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. */
/* Legacy <iot-depth> TOC-hide + full-span geometry removed 2026-08-04: the
 * estate no longer authors <iot-depth> (depth toolbar replaced it), and the
 * re-span made depth pages a different width from every other page. */
#quarto-margin-sidebar .sidebar-toc-link:where(:scope, *) {
  color: var(--ds-ink-faint) !important;
}
#quarto-margin-sidebar .sidebar-toc-link.active:where(:scope, *) {
  color: var(--ds-accent) !important;
  border-left-color: var(--ds-accent) !important;
}

#quarto-margin-sidebar nav#TOC a.active .header-section-number:where(:scope, *),
nav#TOC a.active .header-section-number:where(:scope, *) {
  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:where(:scope, *) {
    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:where(:scope, *),
#quarto-header > nav.navbar:where(:scope, *),
.navbar.navbar-expand-lg:where(:scope, *) {
  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:where(:scope, *),
.navbar .navbar-brand:where(:scope, *),
.navbar a:where(:scope, *),
.navbar .nav-link:where(:scope, *),
.navbar .menu-text:where(:scope, *),
.navbar-brand-container:where(:scope, *),
.navbar .quarto-navbar-tools a:where(:scope, *) {
  color: var(--ds-ink) !important;
}
.navbar a:hover:where(:scope, *),
.navbar .nav-link:hover:where(:scope, *),
.navbar .navbar-brand:hover:where(:scope, *) {
  color: var(--ds-accent) !important;
}
.navbar #quarto-search input:where(:scope, *),
.navbar .aa-Input:where(:scope, *),
.navbar .aa-DetachedSearchButton:where(:scope, *) {
  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:where(:scope, *) {
  filter: none !important;
}

/* AST-CSS1 CRITICAL START: final top-bar skin */
/* 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:where(:scope, *) {
  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:where(:scope, *),
.iotclass-user-status span:where(:scope, *),
.iotclass-user-status .menu-text:where(:scope, *),
.iotclass-user-status button:where(:scope, *),
.iotclass-user-status .nav-link:where(:scope, *),
.iotclass-user-status .navbar-title:where(:scope, *),
.iotclass-user-status .navbar-brand:where(:scope, *) {
  color: #ffffff !important;
}
.iotclass-user-status a:hover:where(:scope, *),
.iotclass-user-status button:hover:where(:scope, *) {
  color: #ffffff !important;
  opacity: 0.82;
}
/* The signed-out action is an opaque white control, so it needs dark text.
   Keep this scoped exception after the bar-wide white-text rule above. */
.iotclass-user-status .status-login-btn.iotclass-auth-trigger:where(:scope, *) {
  background: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.85) !important;
  color: #1f2933 !important;
  opacity: 1;
}
.iotclass-user-status .status-login-btn.iotclass-auth-trigger:hover:where(:scope, *),
.iotclass-user-status .status-login-btn.iotclass-auth-trigger:focus-visible:where(:scope, *) {
  background: #f7f9fb !important;
  color: #111827 !important;
  opacity: 1;
  outline: 3px solid rgba(255, 255, 255, 0.82);
  outline-offset: 2px;
}
/* status chip ("Guest" etc.): frosted white pill on the colored bar */
.iotclass-user-status .user-badge:where(:scope, *),
.iotclass-user-status [class*="badge"]:where(:scope, *),
.iotclass-user-status [class*="status-chip"]:where(:scope, *) {
  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:where(:scope, *),
.iotclass-user-status .user-status-badge .status-text:where(:scope, *),
.iotclass-user-status .user-status-badge .status-text strong:where(:scope, *) {
  color: #1f2933 !important;
}
/* search affordance: frosted on the colored bar */
.iotclass-user-status #quarto-search input:where(:scope, *),
.iotclass-user-status .aa-DetachedSearchButton:where(:scope, *) {
  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:where(:scope, *)::placeholder,
.iotclass-user-status .aa-DetachedSearchButton .aa-DetachedSearchButtonPlaceholder:where(:scope, *) {
  color: rgba(255, 255, 255, 0.82) !important;
}
.navbar .aa-DetachedSearchButton:where(:scope, *) {
  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:where(:scope, *) {
  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:where(:scope, *),
.iotclass-user-status .module-bar-search .bi:where(:scope, *),
.iotclass-user-status .module-bar-search kbd:where(:scope, *) {
  color: #1f2933 !important;
}

.iotclass-user-status .module-bar-search kbd:where(:scope, *) {
  background: #eef2f7 !important;
  border-color: #cbd5e1 !important;
}
/* AST-CSS1 CRITICAL END */

/* Auth/profile appearance belongs to the Design System. Keep the compact
   avatar inside AST-UX4's fixed geometry instead of inheriting the estate's
   large editorial-image shadow. */
.iotclass-profile-presence-avatar:where(:scope, *) {
  box-shadow: none;
}

/* Last-updated banner: subtle, not bright yellow */
#last-edited-banner:where(:scope, *),
.last-edited-banner:where(:scope, *),
.content-update-banner:where(:scope, *) {
  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:where(:scope, *) {
  color: var(--ds-ink-soft) !important;
}

/* Sidebar header: clean title in accent, no filled block */
#quarto-sidebar .sidebar-title:where(:scope, *),
.sidebar-title:where(:scope, *),
.sidebar-header:where(:scope, *),
#quarto-sidebar .sidebar-header:where(:scope, *),
.sidebar-part-title:where(:scope, *) {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--ds-accent) !important;
  border: none !important;
}
.sidebar-part-title:where(:scope, *) {
  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]:where(:scope, *),
#quarto-sidebar .sidebar-item-section[data-pc-section]:where(:scope, *) {
  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:where(:scope, *) {
  background: color-mix(in srgb, var(--ds-accent) 7%, white) !important;
  color: var(--ds-accent) !important;
}
#quarto-sidebar .sidebar-item a[data-pc].active:where(:scope, *) {
  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:where(:scope, *) {
  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:where(:scope, *),
#quarto-sidebar .sidebar-item-section > .sidebar-item-container > a.sidebar-link:where(:scope, *),
#quarto-sidebar .sidebar-item-section > .sidebar-item-container .menu-text:where(:scope, *) {
  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:where(:scope, *),
#quarto-sidebar .sidebar-item-section > .sidebar-item-container i.bi:where(:scope, *),
#quarto-sidebar .sidebar-item-section > .sidebar-item-container .chevron-icon:where(:scope, *) {
  color: var(--ds-ink-faint) !important;
  background: transparent !important;
}
#quarto-sidebar .sidebar-item-section > .sidebar-item-container:hover:where(:scope, *) {
  background: color-mix(in srgb, var(--pc-main, var(--ds-accent)) 7%, white) !important;
}

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

/* the feedback FAB: keep but flatten */
.feedback-fab:where(:scope, *),
#feedback-button:where(:scope, *),
.feedback-button:where(:scope, *) {
  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:where(:scope, *) {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 18px;
  padding: 12px;
  border: 1px solid #d0d7de;
  border-radius: .9rem;
  background: #f7f8fa;
  min-height: 105px;
}

.iot-section-depth-toggle__heading:where(:scope, *) {
  display: grid;
  min-width: 10.5rem;
  flex: 0 0 auto;
  gap: 2px;
}

.iot-section-depth-toggle__kicker:where(:scope, *) {
  color: #3f4f5f;
  font-size: 0.875rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

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

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

.iot-section-depth-toggle__button:where(:scope, *) {
  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-checked="true"]:where(:scope, *) {
  border-color: #435563;
  background: #435563;
  color: #ffffff;
}

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

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

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

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

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

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

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

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

.iot-section-depth-current:where(:scope, *) {
  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;
}
section.depth-l2:not([data-iot-depth-visible="true"]):where(:scope, *) {
  display: none;
}

/* Same pre-paint treatment for learners whose STORED choice is Overview
 * (founder 2026-08-04): without this, depth-l1 sections paint and then
 * collapse when applyDepth() runs (~150ms in, layout-shift 0.174). The
 * <html> attribute is stamped by the tiny synchronous head script that
 * generate-book-configs.py bakes into every book, so the rule holds from
 * the first frame; applyDepth() still reveals any section it stamps
 * data-iot-depth-visible="true" (toolbar picks, hash deep-links). */
html:where(:scope)[data-iot-stored-depth="overview"] section.depth-l1:not([data-iot-depth-visible="true"]) {
  display: none;
}

body.iot-toc-hidden #quarto-margin-sidebar:where(:scope, *) {
  display: none !important;
}

/* ---- Build-owned TOC depth state (FDBK-W3, founder 2026-08-21) ----------
 * OnThisPage.astro stamps every target's derived depth and per-depth sparse
 * verdict in the response. The head prepaint stamp selects stored/hash depth;
 * after initialization, body[data-iot-toc-depth] mirrors the same choice.
 * The client verifies these facts but never rewrites the TOC list on load. */
#quarto-margin-sidebar li[data-iot-toc-depth="2"]:where(:scope, *) {
  display: none;
}
html:where(:scope)[data-iot-stored-depth="overview"]
  #quarto-margin-sidebar li[data-iot-toc-depth="1"] {
  display: none;
}
html:where(:scope)[data-iot-stored-depth="under-the-hood"]
  #quarto-margin-sidebar li[data-iot-toc-depth="2"],
body[data-iot-toc-depth="2"]
  #quarto-margin-sidebar li[data-iot-toc-depth]:where(:scope, *) {
  display: list-item;
}
body[data-iot-toc-depth="0"]
  #quarto-margin-sidebar li[data-iot-toc-depth="1"]:where(:scope, *),
body[data-iot-toc-depth="0"]
  #quarto-margin-sidebar li[data-iot-toc-depth="2"]:where(:scope, *),
body[data-iot-toc-depth="1"]
  #quarto-margin-sidebar li[data-iot-toc-depth="2"]:where(:scope, *) {
  display: none;
}
/* Whole rail: when the baked per-depth entry count is already under the
 * show threshold for the depth that will apply, keep the rail hidden from
 * the first frame instead of letting it paint and then vanish. */
html:where(:scope):not([data-iot-stored-depth="overview"]):not([data-iot-stored-depth="under-the-hood"])
  #quarto-margin-sidebar[data-iot-toc-sparse-l1="true"],
html:where(:scope)[data-iot-stored-depth="overview"]
  #quarto-margin-sidebar[data-iot-toc-sparse-l0="true"],
html:where(:scope)[data-iot-stored-depth="under-the-hood"]
  #quarto-margin-sidebar[data-iot-toc-sparse-l2="true"] {
  display: none;
}

/* ---- Pre-paint geometry reservation (founder 2026-08-04) ----------------
 * components.js decorates every left-sidebar chapter link after load: a
 * progress ring (1rem + .38rem margin), a doc/lab/quiz icon (1.5rem), flex
 * layout and .25rem/.45rem padding -- growing each row 22px -> 34px and
 * reflowing the whole rail. Give the UNdecorated link the identical box up
 * front; the ::before placeholder holds the ring+icon slot so the text sits
 * at its final offset from the first frame. Both rules stop matching the
 * moment the decorator adds .iot-nav-link, so the hydrated result is
 * untouched. Section-header links (li.sidebar-item-section) never get
 * decorated and keep their own styling. */
#quarto-sidebar li.sidebar-item:not(.sidebar-item-section) > div.sidebar-item-container > a.sidebar-link:not(.iot-nav-link):where(:scope, *) {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.45rem;
  min-height: 2rem; /* 1.5rem icon + 2 x .25rem padding = final 34px row */
  box-sizing: border-box;
}
#quarto-sidebar li.sidebar-item:not(.sidebar-item-section) > div.sidebar-item-container > a.sidebar-link:not(.iot-nav-link):where(:scope, *)::before {
  content: "";
  flex: 0 0 calc(1rem + 0.38rem + 0.35rem + 1.5rem); /* ring + ring margin + flex gap + icon */
  height: 1.5rem;
}

/* The user-status strip above #quarto-content hydrates its sign-in chrome
 * ~100ms after paint and grew 52px -> 55px, nudging the whole page down.
 * Reserve the hydrated height (3.25rem at the 17px root) from the start. */
.iotclass-user-status:where(:scope, *) {
  min-height: 3.25rem;
  box-sizing: border-box;
}

/* Right-TOC links get the same after-load decoration (icon + flex layout,
 * every entry, kind page/quiz) which narrowed the text box and re-wrapped
 * entries ~250ms in. Reserve the identical geometry while undecorated. */
#quarto-margin-sidebar nav#TOC li > a:not(.iot-toc-nav-link):where(:scope, *) {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 0.15rem 0.75rem 0.15rem 0.5rem;
  box-sizing: border-box;
}
#quarto-margin-sidebar nav#TOC li > a:not(.iot-toc-nav-link):where(:scope, *)::before {
  content: "";
  flex: 0 0 1.5rem;
  height: 1.5rem;
}

/* The decorated module-guide (map) link measured 31px against the 34px the
 * reservation above holds for every chapter row; pin it to the same 2rem
 * so decoration changes nothing. */
#quarto-sidebar a.iot-nav-link--map:where(:scope, *),
.sidebar a.iot-nav-link--map:where(:scope, *) {
  min-height: 2rem;
  box-sizing: border-box;
}

/* Deliberately NO main.content geometry override when the TOC is hidden.
 * A previous grid-column/max-width:50rem re-span here made the middle column
 * a different width on every low-heading page (43 static pages, plus any page
 * whose visible TOC count drops under the threshold after a depth switch --
 * a visible post-load width jump). Founder requirement 2026-08-04: the middle
 * column is identical on every page; a hidden TOC just leaves its rail empty. */

/* Legacy <iot-depth> full-span geometry removed 2026-08-04: no rendered page
 * in the estate carries an authored <iot-depth> element any more (the depth
 * toolbar replaced it), so this only survived as a dormant competing width
 * override -- the same one-page-wider trap as the old iot-toc-hidden re-span. */

main.content div.sourceCode:where(:scope, *),
main.content pre:where(:scope, *),
#quarto-document-content div.sourceCode:where(:scope, *),
#quarto-document-content pre:where(:scope, *) {
  /* 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:where(:scope, *) {
  position: relative;
  overflow: auto !important;
}

#quarto-document-content div.sourceCode:where(:scope, *)::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:where(:scope, *) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0.45rem 1rem 1rem !important;
}

/* LABS-FIX-1: Astro emits the github-dark Shiki token palette inline, while
   the learning surface intentionally uses a light code background. Translate
   every emitted palette colour to its accessible github-light counterpart.
   Inline styles require !important; the contrast gate checks the computed
   colour against the effective rendered background across every lab page. */
#quarto-document-content pre.astro-code span[style*="color:#E1E4E8" i]:where(:scope, *) { color: #24292f !important; }
#quarto-document-content pre.astro-code span[style*="color:#F97583" i]:where(:scope, *) { color: #b31d28 !important; }
#quarto-document-content pre.astro-code span[style*="color:#B392F0" i]:where(:scope, *) { color: #6639ba !important; }
#quarto-document-content pre.astro-code span[style*="color:#79B8FF" i]:where(:scope, *) { color: #0550ae !important; }
#quarto-document-content pre.astro-code span[style*="color:#9ECBFF" i]:where(:scope, *) { color: #0a3069 !important; }
#quarto-document-content pre.astro-code span[style*="color:#6A737D" i]:where(:scope, *) { color: #57606a !important; }
#quarto-document-content pre.astro-code span[style*="color:#FFAB70" i]:where(:scope, *) { color: #7d3100 !important; }
#quarto-document-content pre.astro-code span[style*="color:#85E89D" i]:where(:scope, *) { color: #116329 !important; }
#quarto-document-content pre.astro-code span[style*="color:#7F8C8D" i]:where(:scope, *) { color: #57606a !important; }

/* code-block-horizontal-overflow (P3 wave-2 visual-review, 2026-07-22 --.6.2):
   `div.sourceCode` above already sets `overflow: auto !important`, and
   `#quarto-document-content pre > code.sourceCode` forces `white-space: pre
   !important` (never wrap, so hand-formatted code/output stays intact) --
   live DOM verification during this pass confirmed every reported instance
   already renders a working horizontal scrollbar (offsetHeight exceeds
   clientHeight by a consistent 17px, matching the native scrollbar track).
   The real defect is discoverability, not function: the native
   browser-default scrollbar is thin and low-contrast against the block's
   white background, so a reader skimming a screenshot (or the page itself)
   reads a mid-word cutoff as permanently lost content rather than "scroll
   right for more" -- exactly the wave-2 report's own framing. Thicken and
   color the thumb so the scroll affordance is unmistakable at a glance;
   this does not change the underlying overflow/white-space mechanism. */
#quarto-document-content div.sourceCode:where(:scope, *) {
  scrollbar-width: auto;
  scrollbar-color: var(--ds-accent) var(--ds-surface-alt);
}

#quarto-document-content div.sourceCode:where(:scope, *)::-webkit-scrollbar {
  height: 11px;
}

#quarto-document-content div.sourceCode:where(:scope, *)::-webkit-scrollbar-track {
  background: var(--ds-surface-alt);
  border-radius: 999px;
}

#quarto-document-content div.sourceCode:where(:scope, *)::-webkit-scrollbar-thumb {
  background: var(--ds-accent);
  border-radius: 999px;
  border: 2px solid var(--ds-surface-alt);
}

/* worked-numbers-inline-math-overflow: same discoverable-scrollbar treatment
   as the code-block fix above, applied estate-wide to any MathJax container
   that ends up individually scrollable inside a narrow card (per-chapter
   `.physfn-card mjx-container` rules cap width + set overflow-x per chapter;
   this only adds the visible thumb styling on top, harmless when a formula
   fits and never scrolls). */
#quarto-document-content mjx-container:where(:scope, *) {
  scrollbar-width: thin;
  scrollbar-color: var(--ds-accent) var(--ds-surface-alt);
}

#quarto-document-content mjx-container:where(:scope, *)::-webkit-scrollbar {
  height: 7px;
}

#quarto-document-content mjx-container:where(:scope, *)::-webkit-scrollbar-track {
  background: var(--ds-surface-alt);
  border-radius: 999px;
}

#quarto-document-content mjx-container:where(:scope, *)::-webkit-scrollbar-thumb {
  background: var(--ds-accent);
  border-radius: 999px;
}

/* worked-numbers-inline-math-overflow recurrence, P3 wave-3 fix (2026-07-22).
   The scrollbar styling above was verified NOT to render in practice: live
   Playwright measurement on wsn/duty-cycle-worked-examples found
   `mjx-container.offsetHeight === mjx-container.clientHeight` (zero space
   reserved for a scrollbar) even though `scrollWidth > clientWidth` is
   genuinely true and the box IS mechanically scrollable (`scrollLeft`
   works). Isolated the trigger: nesting a second `overflow-x: auto`
   scroll container (`.physfn-card`) directly around an already-auto-overflow
   mjx-container suppresses the inner element's own scrollbar rendering in
   this Chromium build -- a synthetic reproduction confirmed the SAME
   mjx-container renders its scrollbar normally the moment it is not nested
   inside another auto-overflow-x ancestor. Rather than remove
   `.physfn-card`'s own overflow-x:auto (a estate-wide baseline safety net
   for other kinds of overflow, out of scope to touch here), add a
   paint-based "scroll shadow" that does not depend on the native scrollbar
   rendering at all, plus mitigations that reduce how often a formula needs
   to scroll in the first place. `.physfn-card`'s background is solid white
   in every variant, so a white-to-transparent edge fade is safe here; this
   is intentionally scoped to `.physfn-card` rather than applied to every
   mjx-container site-wide (a white fade would look wrong over non-white
   backgrounds elsewhere). */
#quarto-document-content .physfn-card mjx-container:where(:scope, *),
main.content .physfn-card mjx-container:where(:scope, *) {
  background-image:
    linear-gradient(to right, #fff 0, rgba(255, 255, 255, 0) 14px),
    linear-gradient(to left, #fff 0, rgba(255, 255, 255, 0) 14px),
    linear-gradient(to right, rgba(57, 107, 131, 0.55), rgba(57, 107, 131, 0) 8px),
    linear-gradient(to left, rgba(57, 107, 131, 0.55), rgba(57, 107, 131, 0) 8px);
  background-repeat: no-repeat;
  background-position: left center, right center, left center, right center;
  background-size: 14px 100%, 14px 100%, 8px 100%, 8px 100%;
  /* `local` fade layers scroll WITH the content (only shown at the true start/
     end of the formula); `scroll` accent layers stay pinned to the box edge
     as a constant "this is scrollable" cue. */
  background-attachment: local, local, scroll, scroll;
}

#quarto-document-content .physfn-card mjx-container[display="true"]:where(:scope, *),
main.content .physfn-card mjx-container[display="true"]:where(:scope, *) {
  font-size: 88% !important;
}

/* Widen the worked-numbers card grid slightly (230px -> 255px min column)
   so more display equations fit without scrolling at all. Uses the
   #quarto-document-content prefix for higher specificity than the
   byte-identical `.physfn-card`/`.physfn-grid` block copy-pasted into each
   of the 334 chapter files, so this is a single shared fix rather than 334
   per-file edits (still allows the browser to fall back to fewer, wider
   columns via `auto-fit`; verified it does not collapse the flagship
   3-column layout to 1 column at 1280px). */
#quarto-document-content .physfn-grid:where(:scope, *),
main.content .physfn-grid:where(:scope, *) {
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}

/* Field Notes character portraits use the same intentional circular avatar
   language as the IoT Ideator bridge. The transparent character art remains
   fully visible (including tall silhouettes) instead of being stretched into
   the tinted callout surface. */
#quarto-document-content .physfn-grid > img:first-child:where(:scope, *),
main.content .physfn-grid > img:first-child:where(:scope, *) {
  display: block;
  width: 88px;
  height: 88px;
  padding: 0.2rem;
  border: 2px solid color-mix(in srgb, var(--pc-main, #1f6f78) 42%, white);
  border-radius: 50% !important;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 4px 12px rgba(23, 42, 48, 0.18);
  object-fit: contain;
}

@media (max-width: 640px) {
  #quarto-document-content .physfn-grid > img:first-child:where(:scope, *),
  main.content .physfn-grid > img:first-child:where(:scope, *) {
    width: 76px;
    height: 76px;
  }
}

#quarto-document-content pre > code.sourceCode:where(:scope, *) {
  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:where(:scope, *),
#quarto-document-content pre code:where(:scope, *) {
  overflow-wrap: normal !important;
  word-break: normal !important;
}

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

#quarto-document-content .callout div.sourceCode:where(:scope, *),
#quarto-document-content [data-iot-panel-category] div.sourceCode:where(:scope, *) {
  /* 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:where(:scope, *),
#quarto-document-content [data-iot-panel-category] div.sourceCode pre:where(:scope, *) {
  border: 0 !important;
  background: transparent !important;
}

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

details.iot-code-disclosure:where(:scope, *) {
  margin: 1rem 0 1.25rem;
  border: 0 !important;
  background: transparent !important;
}

details.iot-code-disclosure > summary:where(:scope, *) {
  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:where(:scope, *) {
  color: var(--ds-accent);
  background: color-mix(in srgb, var(--ds-accent) 7%, white);
}

details.iot-code-disclosure[open] > summary:where(:scope, *) {
  margin-bottom: 0.55rem;
}

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

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

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

[data-iot-panel-category="foundation"]:where(:scope, *) {
  --iot-panel-accent: #5c6873;
  --iot-panel-tint: #eef1f3;
}

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

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

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

#quarto-document-content .callout[data-iot-panel-category]:where(:scope, *),
#quarto-document-content section[data-iot-panel-category]:where(:scope, *) {
  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:where(:scope, *) {
  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:where(:scope, *) {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.iot-lab-identity-band:where(:scope, *) {
  --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:where(:scope, *),
.iot-lab-identity-band__chips:where(:scope, *) {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}

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

.iot-lab-identity-band__icon:where(:scope, *),
.iot-lab-nav-icon:where(:scope, *),
.iot-lab-collection-nav-icon:where(:scope, *),
.iot-nav-icon:where(:scope, *),
.iot-toc-nav-icon:where(:scope, *) {
  --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:where(:scope, *),
.iot-lab-nav-icon svg:where(:scope, *),
.iot-lab-collection-nav-icon svg:where(:scope, *),
.iot-nav-icon svg:where(:scope, *),
.iot-toc-nav-icon svg:where(:scope, *) {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

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

.iot-nav-icon--quiz:where(:scope, *) {
  --iot-nav-icon-color: #475569;
}

.iot-nav-icon--map:where(:scope, *) {
  --iot-nav-icon-color: #2563eb;
}

.iot-nav-icon--page:where(:scope, *) {
  --iot-nav-icon-color: #94a3b8;
}

.iot-lab-chip:where(:scope, *) {
  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:where(:scope, *) {
  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:where(:scope, *),
.sidebar a.iot-lab-nav-link:where(:scope, *),
#quarto-sidebar a.iot-lab-collection-nav-link:where(:scope, *),
.sidebar a.iot-lab-collection-nav-link:where(:scope, *),
#quarto-sidebar a.iot-nav-link:where(:scope, *),
.sidebar a.iot-nav-link:where(:scope, *),
#quarto-margin-sidebar a.iot-toc-nav-link:where(:scope, *),
#TOC a.iot-toc-nav-link:where(:scope, *) {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

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

#quarto-sidebar a.iot-lab-collection-nav-link:where(:scope, *),
.sidebar a.iot-lab-collection-nav-link:where(:scope, *) {
  --iot-lab-accent: #0f766e;
}

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

  .iot-lab-identity-band__chips:where(:scope, *) {
    width: 100%;
  }
}

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

#quarto-document-content .iot-panel [style*="border-left"]:where(:scope, *),
#quarto-document-content .callout [style*="border-left"]:where(:scope, *),
#quarto-document-content .iot-panel [data-iot-panel-nested-bar-suppressed="true"]:where(:scope, *),
#quarto-document-content .callout [data-iot-panel-nested-bar-suppressed="true"]:where(:scope, *) {
  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)
  ):where(:scope, *),
#quarto-document-content
  section.callout-question:has(
    :where(iot-knowledge-check, iot-matching-quiz, iot-ordering-quiz, iot-label-quiz, iot-code-quiz)
  ):where(:scope, *) {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

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

iot-knowledge-check:where(:scope, *),
iot-matching-quiz:where(:scope, *),
iot-ordering-quiz:where(:scope, *),
iot-label-quiz:where(:scope, *),
iot-code-quiz:where(:scope, *),
iot-knowledge-check.iot-kc-standard:where(:scope, *),
iot-matching-quiz.iot-assessment-standard:where(:scope, *),
iot-ordering-quiz.iot-assessment-standard:where(:scope, *),
iot-label-quiz.iot-assessment-standard:where(:scope, *),
iot-code-quiz.iot-assessment-standard:where(:scope, *),
iot-knowledge-check.inline-knowledge-check:where(:scope, *),
iot-knowledge-check.inline-knowledge-check.iot-kc-standard:where(:scope, *),
.iot-quiz-matching.iot-assessment-standard:where(:scope, *),
.iot-quiz-ordering.iot-assessment-standard:where(:scope, *),
.iot-quiz-label.iot-assessment-standard:where(:scope, *),
.iot-quiz-code.iot-assessment-standard:where(:scope, *) {
  /* 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;
}

/* Pre-hydration box parity (founder report 2026-08-04, data-visualization-codecs
 * page): the KC hydrator replaces the baked classes, and .inline-knowledge-check
 * then brings padding:1rem -- so the text inside the widget jumped ~17px inward
 * about 350ms after first paint. Bake the identical padding onto the bare
 * element so hydration changes nothing about the box. */
iot-knowledge-check:where(:scope, *) {
  padding: 1rem;
}

.iot-assessment-standard :where(.ikc-header, .imq-header, .ioq-header, .ilq-header, .icq-header):where(:scope, *) {
  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:where(:scope, *),
.iot-assessment-variant-icon:where(:scope, *) {
  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:where(:scope, *),
.iot-assessment-variant-icon svg:where(:scope, *) {
  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):where(:scope, *) {
  flex: 0 0 auto !important;
  color: var(--ds-ink) !important;
  font-size: 0.875rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

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

.iot-assessment-variant-text:where(:scope, *) {
  min-width: 0;
  overflow-wrap: anywhere;
}

.iot-assessment-standard :where(.ikc-xp, .imq-xp, .ioq-xp, .ilq-xp, .icq-xp):where(:scope, *) {
  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.875rem !important;
  font-weight: 800 !important;
  white-space: nowrap;
  /* The light skin arrives after first paint; the base chips' `transition: all`
     would fade white text onto the now-white header for ~0.3s. */
  transition: none !important;
}

.iot-assessment-standard .icq-lang:where(:scope, *) {
  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):where(:scope, *) {
  color: var(--ds-ink-soft) !important;
}

.iot-child-links:where(:scope, *) {
  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:where(:scope, *),
.iot-child-links > h3:where(:scope, *),
.iot-child-links > h4:where(:scope, *) {
  margin-top: 0 !important;
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.iot-child-links > h2:where(:scope, *)::after,
.iot-child-links > h3:where(:scope, *)::after,
.iot-child-links > h4:where(:scope, *)::after {
  content: none !important;
}

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

.iot-child-links li:where(:scope, *) {
  position: relative;
  max-width: none !important;
  padding-left: 1.65rem;
}

.iot-child-links li:where(:scope, *)::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"]:where(:scope, *),
#quarto-document-content .observablehq [style*="color: #3498DB"]:where(:scope, *),
#quarto-document-content .observablehq [style*="color:#3498db"]:where(:scope, *),
#quarto-document-content .observablehq [style*="color: #3498db"]:where(:scope, *) {
  color: #1d5f8f !important;
}

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

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

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

@media (max-width: 1280px) and (min-width: 761px) {
  .iot-section-depth-toggle:where(:scope, *) {
    align-items: stretch;
    flex-direction: column;
    /* CLS fix (B4 remainder): taller stacked layout at this width. */
    min-height: 154px;
  }

  .iot-section-depth-toggle__controls:where(:scope, *) {
    justify-content: stretch;
  }

  .iot-section-depth-toggle__button:where(:scope, *) {
    max-width: none;
  }
}

@media (max-width: 760px) {
  body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content:where(:scope, *),
  body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing)
    .page-columns
    main.content:where(:scope, *),
  body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) main.content:where(:scope, *),
  body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) .page-columns main.content:where(:scope, *),
  body.iot-section-depth-ready main.content:where(:scope, *),
  body.iot-section-depth-ready .page-columns main.content:where(:scope, *) {
    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:where(:scope, *),
  body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) #quarto-document-content:where(:scope, *),
  body.iot-section-depth-ready #quarto-document-content:where(:scope, *) {
    width: 100% !important;
    max-width: 100% !important;
  }

  .iot-section-depth-toggle:where(:scope, *) {
    align-items: stretch;
    flex-direction: column;
    /* CLS fix (B4 remainder): tallest layout -- stacked buttons + wrap,
     * inside the full-bleed main.content this breakpoint also sets above. */
    min-height: 207px;
  }

  .iot-section-depth-toggle__controls:where(:scope, *) {
    flex-wrap: wrap;
    justify-content: stretch;
  }

  .iot-section-depth-toggle__button:where(:scope, *) {
    flex: 1 1 8rem;
    max-width: none;
  }
}

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

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

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

#quarto-sidebar a.iot-nav-link--map:where(:scope, *),
.sidebar a.iot-nav-link--map:where(:scope, *) {
  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:where(:scope, *) {
  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:where(:scope, *),
.mermaid-js .edgeLabel:where(:scope, *),
.mermaid-js .label:where(:scope, *),
.mermaid-js text:where(:scope, *) {
  font-size: 14px !important;
  font-family:
    "Source Sans 3", "Source Sans 3 Fallback",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;
  fill: var(--iot-text-dark) !important;
}

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

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

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

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

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

/* worked-example-code-block-low-contrast (P3 wave-4 fix, 2026-07-22).
   A bare <pre> used for a "Worked example:"/"Classification example:"
   narrative walkthrough (not real source code) is meant to render as a dark
   navy card with light text. Every affected analytics-ml chapter already
   defines its OWN per-chapter `.xxx-layer pre { background: #0bXXXX
   !important; color: #eXXXXX !important; }` rule in an inline \3c style> block
   -- but that selector's specificity (0 IDs, 1 class, 1 type) can never
   out-rank the two site-wide `#quarto-document-content pre` rules above
   (line ~411 "soft, flat" and line ~883 the founder 2026-07-09u white-pre
   default), each of which is (1 ID, 0 classes, 1 type) -- regardless of
   !important or declaration order, an ID always beats a class. Confirmed
   live via getComputedStyle + CSSOM rule inspection in a real browser
   (data-fusion-introduction.qmd's worked example rendered background
   rgb(255,255,255) / color rgb(231,238,247), i.e. the founder's white-pre
   default won and the chapter's own dark rule silently lost). The one
   chapter that happened to render correctly (anomaly-detection.qmd) did so
   by accident, via a fragile per-block ID selector
   (`#practitioner-ado-zscore-persistence > pre`) that only a single block
   in a single chapter had -- not a scalable pattern.
   Fix: give every such block a single shared class
   (`iot-worked-example`, applied to the 13 flagged chapters' <pre> tags,
   23 blocks total) and style it here with specificity (1 ID, 1 class, 1
   type) -- unconditionally higher than the two global rules above, so this
   wins regardless of cascade order. No more per-chapter ID hacks needed;
   any future chapter can opt in by adding this one class. The two cloud-data
   quality examples already share a .cdqs-layer wrapper, which needs the same
   winning dark surface without changing authored chapter content. */
#quarto-document-content pre.iot-worked-example:where(:scope, *),
#quarto-document-content pre.iot-worked-example code:where(:scope, *),
#quarto-document-content .cdqs-layer > pre:where(:scope, *),
#quarto-document-content .cdqs-layer > pre code:where(:scope, *) {
  background: #0b1220 !important;
  color: #f8fafc !important;
}
#quarto-document-content pre.iot-worked-example *:where(:scope, *),
#quarto-document-content .cdqs-layer > pre *:where(:scope, *) {
  color: #f8fafc !important;
}

/* Keep the troubleshooting decision tree's code card dark despite the shared
   inline-code background rule. */
#quarto-document-content code.hiw-tree-code:where(:scope, *) {
  background: var(--gray-800) !important;
  color: var(--gray-50) !important;
}

/* White body-size control text needs the existing darker green token. */
#quarto-document-content .hiw-tree-btn.yes:where(:scope, *) {
  background: var(--interactive-knowledge-check) !important;
}

/* ==== CANONICAL COMPONENT: Math and Mermaid proof layout ==== */
.content .katex-display:where(:scope, *) {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.15rem;
}
.content .katex:not(.katex-display .katex):where(:scope, *) {
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  vertical-align: middle;
}
/* KaTeX absolutely positions its visually clipped MathML accessibility layer
   at the inline formula's static position. Inside a horizontally scrolling
   table cell that 1px box can escape the table's scroll owner and widen the
   root document even though the visible formula remains contained. Anchor the
   hidden accessibility layer to the start of its positioned formula box; DOM
   order and assistive-technology text remain unchanged. */
.content .katex .katex-mathml:where(:scope, *) {
  inset-inline-start: 0;
}
.lane-banner:where(:scope, *) {
  max-width: 900px;
  margin: 1.25rem auto 2rem;
  padding: 0.85rem 1rem;
  border: 2px dashed #a13d3d;
  border-radius: 8px;
  background: #fdf2f2;
  font-size: 0.92rem;
}
.lane-banner p:where(:scope, *) {
  margin: 0.25rem 0;
}
body:has(.lane-banner) main.content:where(:scope, *) {
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem 1.5rem 4rem;
}

/* ==== CANONICAL COMPONENT: Astro chapter compatibility ==== */
/* platform.css's equation overflow protection targets MathJax's
     <mjx-container> DOM; KaTeX emits different markup and katex.min.css
     sets white-space:nowrap with no overflow rule, reproducing the exact
     overflow bug class platform.css already fixed once for MathJax
     (LANE-REPORT-math.md §4). */
  .katex-display:where(:scope, *) {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.15rem;
  }
  .katex:not(.katex-display .katex):where(:scope, *) {
    display: inline-block;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    vertical-align: middle;
  }
  /* Bootstrap's grid/utility classes are referenced by the real DOM
     (navbar-expand-lg, d-flex, etc.) but Bootstrap's own CSS is not
     vendored into this pilot (task brief: only design-system.css +
     platform.css). This is the pilot's one deliberate structural gap --
     documented in PILOT-REPORT.md rather than patched here. */
  .pilot-unconverted:where(:scope, *) {
    border: 2px dashed #a13d3d;
    border-radius: 8px;
    padding: 0.85rem 1rem;
    margin: 1rem 0;
    background: #fdf2f2;
  }
  .pilot-unconverted p:where(:scope, *) { margin: 0 0 0.5rem; }
  .pilot-figure:where(:scope, *) { margin: 1.25rem 0; text-align: center; }
  .pilot-figure img:where(:scope, *) { max-width: 100%; height: auto; }
  .pilot-figure figcaption:where(:scope, *) { font-size: 0.9rem; color: #4b5563; margin-top: 0.4rem; }


/* ==== CANONICAL COMPONENT: Astro platform chrome ==== */
*:where(:scope, *) { box-sizing: border-box; }
    body:where(:scope, *) { margin: 0; }
    .platform-navbar:where(:scope, *) {
      display: flex;
      align-items: center;
      gap: 1rem;
      min-height: 58px;
      padding: 0.45rem clamp(1rem, 3vw, 2.5rem);
      color: #fff;
      background: #2c3e50;
    }
    .platform-navbar a:where(:scope, *) { color: inherit; text-decoration: none; }
    .platform-navbar__brand:where(:scope, *) { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 700; }
    .platform-navbar__brand img:where(:scope, *) { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; }
    .platform-navbar__links:where(:scope, *) { display: flex; align-items: center; gap: 1rem; margin-inline-start: auto; }
    .platform-navbar__links a:where(:scope, *),
    .platform-navbar__links button:where(:scope, *) { display: inline-flex; min-height: 44px; align-items: center; padding: 0.35rem 0.5rem; }
    .platform-navbar__links button:where(:scope, *) { border: 0; color: inherit; background: transparent; font: inherit; cursor: pointer; }
    .platform-navbar__toggle:where(:scope, *) { display: none; min-width: 44px; min-height: 44px; margin-inline-start: auto; }
    .platform-auth-link:where(:scope, *) { border: 1px solid rgba(255,255,255,.7); border-radius: 999px; padding-inline: 0.9rem !important; }
    #quarto-content > main:where(:scope, *) { min-width: 0; }
    .platform-full-main:where(:scope, *) { display: block; width: 100%; min-width: 0; }
    body[data-platform-variant="dashboard"] #quarto-content:where(:scope, *) {
      /* Quarto's 1208px content shell plus its 16px inline gutters. */
      max-width: 1240px;
      margin-inline: auto;
    }
    .platform-sidebar:where(:scope, *) { grid-area: sidebar; }
    .platform-footer:where(:scope, *) { padding: 2rem clamp(1rem, 4vw, 4rem); background: #f5f7f9; color: #334155; }
    .platform-breadcrumbs:where(:scope, *) { max-width: 1200px; margin: 0 auto; padding: .65rem 1rem 0; }
    .platform-pagination:where(:scope, *) { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
    .katex-display:where(:scope, *) { overflow-x: auto; overflow-y: hidden; }
    body[data-platform-variant='home'] .landing-navbar > [hidden]:where(:scope, *),
    body[data-platform-variant='landing'] .landing-navbar > [hidden]:where(:scope, *) { display: none !important; }
    body[data-platform-variant='home'] .landing-navbar #global-search-btn:where(:scope, *),
    body[data-platform-variant='landing'] .landing-navbar #global-search-btn:where(:scope, *) {
      position: absolute !important;
      top: 8px !important;
      right: 26px !important;
      width: 38px !important;
      height: 29px !important;
      margin: 0 !important;
      padding: 0 !important;
      opacity: 0;
    }
    body[data-platform-variant='guide'] #quarto-header .navbar:where(:scope, *) { background-color: #171c22 !important; }
    /* Quarto's Bootstrap bundle normally establishes this named page grid.
       PlatformPage is intentionally standalone, so carry the small layout
       contract here instead of importing the full generated bundle. */
    @media (min-width: 992px) {
      body[data-platform-variant="article"] #quarto-content.page-columns:where(:scope, *) {
        display: grid;
        gap: 0;
        grid-template-columns:
          [screen-start] 1.5rem
          [screen-start-inset] 5fr
          [page-start page-start-inset] 42px
          [body-start-outset] 42px
          [body-start] 1.5rem
          [body-content-start] minmax(500px, calc(850px - 3rem))
          [body-content-end] 1.5rem
          [body-end] 35px
          [body-end-outset] minmax(75px, 145px)
          [page-end-inset] 35px
          [page-end] 5fr
          [screen-end-inset] 1.5rem
          [screen-end];
      }
      body[data-platform-variant="full"] #quarto-content.page-columns:where(:scope, *) {
        display: grid;
        gap: 0;
        grid-template-columns:
          [screen-start] 1.5rem
          [screen-start-inset] 5fr
          [page-start page-start-inset] 42px
          [body-start-outset] 42px
          [body-start] 1.5rem
          [body-content-start] minmax(500px, calc(850px - 3rem))
          [body-content-end] 1.5rem
          [body-end] 35px
          [body-end-outset] 35px
          [page-end-inset page-end] 5fr
          [screen-end-inset] 1.5rem
          [screen-end];
      }
      body[data-platform-variant="article"] #quarto-content > main:where(:scope, *),
      body[data-platform-variant="full"] #quarto-content > main:where(:scope, *) {
        grid-column: body-content-start / body-content-end;
        grid-row: content-top / content-bottom;
        align-content: flex-start;
      }
      body[data-platform-variant="article"] #quarto-margin-sidebar:where(:scope, *) {
        grid-column: body-end / page-end;
        grid-row: content-top / page-bottom;
      }
    }
    @media (max-width: 991.98px) {
      body[data-platform-variant="article"] #quarto-content.page-columns:where(:scope, *),
      body[data-platform-variant="full"] #quarto-content.page-columns:where(:scope, *) { display: block; }
    }
    @media (max-width: 780px) {
      .platform-navbar__toggle:where(:scope, *) { display: inline-flex; align-items: center; justify-content: center; }
      .platform-navbar__links:where(:scope, *) { display: none; width: 100%; flex-direction: column; align-items: stretch; }
      .platform-navbar__links.is-open:where(:scope, *) { display: flex; }
      .platform-navbar:where(:scope, *) { flex-wrap: wrap; }
    }


/* ==== CANONICAL COMPONENT: Astro chrome supplement ==== */
/*
 * Astro chrome compatibility supplement.
 *
 * The signed-in profile control and its menu use opaque white surfaces. The
 * module-bar rules later in design-system.css/platform.css intentionally force
 * every generic bar link, span, and button to white with !important, which
 * overrides the earlier profile component colors and makes this text white on
 * white. These higher-specificity exceptions restore the dark ink defined by
 * the profile component, and nothing outside that component is affected.
 */
.iotclass-user-status .iotclass-profile-presence-trigger:where(:scope, *),
.iotclass-user-status .iotclass-profile-presence-trigger .iotclass-profile-presence-label:where(:scope, *),
.iotclass-user-status .iotclass-profile-presence-trigger .iotclass-profile-presence-chevron:where(:scope, *),
.iotclass-user-status .iotclass-profile-presence-menu a:where(:scope, *),
.iotclass-user-status .iotclass-profile-presence-menu button:where(:scope, *) {
  color: #1f2933 !important;
}

.iotclass-user-status .iotclass-profile-presence-trigger:hover:where(:scope, *),
.iotclass-user-status .iotclass-profile-presence-trigger:focus-visible:where(:scope, *),
.iotclass-user-status .iotclass-profile-presence-trigger:hover .iotclass-profile-presence-label:where(:scope, *),
.iotclass-user-status .iotclass-profile-presence-trigger:focus-visible .iotclass-profile-presence-label:where(:scope, *),
.iotclass-user-status .iotclass-profile-presence-trigger:hover .iotclass-profile-presence-chevron:where(:scope, *),
.iotclass-user-status .iotclass-profile-presence-trigger:focus-visible .iotclass-profile-presence-chevron:where(:scope, *) {
  color: #111827 !important;
}

/* AST-HOTFIX2: Astro's canonical P/DS/K stylesheet set no longer includes
 * Quarto/Bootstrap's accessible visually-hidden utility. Progress module cells
 * still emit their full chapter title and status inside this span, so losing
 * the utility paints hundreds of labels over the 0.85rem status squares.
 * Design System owns this accessibility/component contract. */
.visually-hidden:where(:scope, *) {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.visually-hidden:not(caption):where(:scope, *) {
  position: absolute !important;
}


/* ==== CANONICAL COMPONENT: Dashboard components ==== */
/* Learner dashboard
 *
 * The dashboard is an application surface, not a chapter. It uses the shared
 * flat platform tokens and keeps every visual rule out of OJS/JS templates.
 */

:root:where(:scope) {
  --dashboard-text: var(--flat-text);
  --dashboard-muted: var(--flat-text-muted);
  --dashboard-subtle: var(--flat-text-subtle);
  --dashboard-line: var(--flat-border);
  --dashboard-line-strong: var(--flat-border-strong);
  --dashboard-surface: var(--flat-surface);
  --dashboard-surface-muted: var(--flat-surface-muted);
  --dashboard-control: var(--flat-control-bg);
  --dashboard-accent: var(--flat-accent);
  --dashboard-avatar-accent: var(--ds-accent, #546e7a);
  --dashboard-success: var(--success);
  --dashboard-radius: var(--flat-radius-lg);
  --dashboard-radius-sm: var(--flat-radius-md);
}

html:where(:scope),
body:where(:scope, *) {
  max-width: 100%;
  overflow-x: clip;
}

body:where(:scope, *),
#quarto-content:where(:scope, *) {
  color: var(--dashboard-text) !important;
  background: var(--dashboard-surface) !important;
}

.navbar:where(:scope, *) {
  background: var(--ieee-navy) !important;
}

.iotclass-user-status:where(:scope, *) {
  color: #fff !important;
  background: var(--ieee-navy) !important;
}

.iotclass-dashboard-enhanced #last-edited-banner:where(:scope, *),
.iotclass-dashboard-enhanced #quarto-margin-sidebar:where(:scope, *) {
  display: none !important;
}

#quarto-document-content:where(:scope, *) {
  box-sizing: border-box;
  width: min(100%, 1180px);
  max-width: 1180px;
  min-width: 0;
  margin-inline: auto;
}

#title-block-header.quarto-title-block:where(:scope, *) {
  margin: 0 0 var(--spacing-2xl);
  padding: 0 0 var(--spacing-xl) !important;
  overflow: visible;
  background: var(--dashboard-surface) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dashboard-line) !important;
  border-radius: 0 !important;
}

#title-block-header.quarto-title-block .title:where(:scope, *) {
  margin: 0;
  color: var(--dashboard-text) !important;
  font-size: clamp(2.2rem, 5vw, 3.4rem) !important;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.04em;
  line-height: 1.05;
}

#title-block-header.quarto-title-block .subtitle:where(:scope, *) {
  display: block !important;
  max-width: 42rem;
  margin-top: var(--spacing-md);
  color: var(--dashboard-muted) !important;
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: var(--line-height-normal);
}

#quarto-document-content .cell-code:where(:scope, *),
#quarto-document-content .cell > details:where(:scope, *),
#quarto-document-content [id^="ojs-cell"] .observablehq--inspect:where(:scope, *) {
  display: none !important;
}

#quarto-document-content .cell:where(:scope, *),
#quarto-document-content .cell-output:where(:scope, *),
#quarto-document-content [id^="ojs-cell"]:where(:scope, *),
#quarto-document-content .observablehq:where(:scope, *) {
  width: 100%;
  max-width: none;
  min-width: 0;
}

.iotclass-dashboard-enhanced #dashboard-content:where(:scope, *) {
  display: none !important;
}

.dashboard-auth-region:where(:scope, *),
.dashboard-ojs-content:where(:scope, *),
.dashboard-ojs-shell:where(:scope, *),
.iotclass-dashboard-shell:where(:scope, *) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.dashboard-auth-region[hidden]:where(:scope, *),
.dashboard-ojs-content[hidden]:where(:scope, *) {
  display: none !important;
}

.dashboard-loading:where(:scope, *) {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  min-height: 8rem;
  padding: var(--spacing-xl);
  color: var(--dashboard-muted);
  background: var(--dashboard-surface-muted);
  border: 1px solid var(--dashboard-line);
  border-radius: var(--dashboard-radius);
}

.dashboard-loading strong:where(:scope, *),
.dashboard-loading p:where(:scope, *) {
  margin: 0;
}

.dashboard-loading strong:where(:scope, *) {
  color: var(--dashboard-text);
}

.dashboard-loading-mark:where(:scope, *) {
  width: 1.6rem;
  height: 1.6rem;
  border: 3px solid var(--dashboard-line-strong);
  border-top-color: var(--dashboard-accent);
  border-radius: var(--radius-full);
  animation: dashboard-spin-80fc1a25dc817a4b 0.9s linear infinite;
}

@keyframes dashboard-spin-80fc1a25dc817a4b {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-loading-mark:where(:scope, *) {
    animation: none;
  }
}

.iotclass-dashboard-shell:where(:scope, *) {
  display: grid;
  gap: var(--spacing-xl);
  margin: 0;
  color: var(--dashboard-text);
}

.iotclass-dashboard-shell h2:where(:scope, *),
.iotclass-dashboard-shell h3:where(:scope, *),
.dashboard-ojs-shell h2:where(:scope, *),
.dashboard-ojs-shell h3:where(:scope, *),
.dashboard-signin-card h2:where(:scope, *),
.dashboard-earn-panel h2:where(:scope, *) {
  padding: 0 !important;
  color: var(--dashboard-text) !important;
  border: 0 !important;
  font-family: var(--font-family-base) !important;
  font-weight: var(--font-weight-bold) !important;
  letter-spacing: -0.02em;
  line-height: var(--line-height-tight);
}

.iotclass-dashboard-shell h2:where(:scope, *),
.iotclass-dashboard-shell h3:where(:scope, *),
.iotclass-dashboard-shell p:where(:scope, *),
.dashboard-ojs-shell h2:where(:scope, *),
.dashboard-ojs-shell h3:where(:scope, *),
.dashboard-ojs-shell p:where(:scope, *),
.dashboard-signin-card h2:where(:scope, *),
.dashboard-signin-card p:where(:scope, *),
.dashboard-earn-panel h2:where(:scope, *),
.dashboard-earn-panel p:where(:scope, *) {
  max-width: none !important;
}

.iotclass-dashboard-section-kicker:where(:scope, *),
.dashboard-eyebrow:where(:scope, *) {
  display: block;
  margin-bottom: var(--spacing-xs);
  color: var(--dashboard-accent);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Signed-out state */
.iotclass-dashboard-signin:where(:scope, *),
.dashboard-signin-card:where(:scope, *) {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
  gap: var(--spacing-2xl);
  align-items: center;
  min-height: 23rem;
  padding: clamp(2rem, 5vw, 4rem);
  background: var(--dashboard-surface);
  border: 1px solid var(--dashboard-line);
  border-left: 4px solid var(--dashboard-accent);
  border-radius: var(--dashboard-radius);
}

.iotclass-dashboard-signin-copy:where(:scope, *),
.dashboard-signin-copy:where(:scope, *) {
  display: grid;
  justify-items: start;
  gap: var(--spacing-md);
}

.iotclass-dashboard-signin h2:where(:scope, *),
.dashboard-signin-card h2:where(:scope, *) {
  margin: 0 !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
}

.iotclass-dashboard-signin p:where(:scope, *),
.dashboard-signin-card p:where(:scope, *) {
  max-width: 38rem !important;
  margin: 0;
  color: var(--dashboard-muted);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
}

.iotclass-dashboard-signin-copy > small:where(:scope, *) {
  color: var(--dashboard-subtle);
  font-size: var(--font-size-sm);
}

.iotclass-dashboard-signin-preview:where(:scope, *),
.dashboard-signin-preview:where(:scope, *) {
  display: grid;
  gap: var(--spacing-md);
  align-content: center;
  min-height: 15rem;
  padding: var(--spacing-xl);
  background: var(--dashboard-surface-muted);
  border: 1px solid var(--dashboard-line);
  border-radius: var(--dashboard-radius);
}

.iotclass-dashboard-signin-preview > span:where(:scope, *),
.dashboard-preview-label:where(:scope, *) {
  color: var(--dashboard-accent);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.iotclass-dashboard-signin-preview strong:where(:scope, *),
.dashboard-signin-preview strong:where(:scope, *) {
  color: var(--dashboard-text);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-snug);
}

.iotclass-dashboard-signin-preview small:where(:scope, *),
.dashboard-signin-preview small:where(:scope, *) {
  color: var(--dashboard-muted);
}

.iotclass-auth-button:where(:scope, *),
.dashboard-primary-button:where(:scope, *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  min-height: var(--touch-target-comfortable);
  padding: 0.7rem 1.15rem;
  color: #fff;
  background: var(--dashboard-accent);
  border: 1px solid var(--dashboard-accent);
  border-radius: var(--dashboard-radius-sm);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.iotclass-auth-button:hover:where(:scope, *),
.dashboard-primary-button:hover:where(:scope, *) {
  color: #fff;
  background: color-mix(in srgb, var(--dashboard-accent) 88%, black);
  border-color: color-mix(in srgb, var(--dashboard-accent) 88%, black);
}

.iotclass-auth-button:focus-visible:where(:scope, *),
.dashboard-primary-button:focus-visible:where(:scope, *) {
  outline: 3px solid color-mix(in srgb, var(--dashboard-accent) 30%, transparent);
  outline-offset: 2px;
}

.iotclass-auth-button-unavailable:where(:scope, *) {
  color: var(--dashboard-subtle);
  background: var(--dashboard-control);
  border-color: var(--dashboard-line-strong);
  cursor: not-allowed;
}

.dashboard-google-mark:where(:scope, *) {
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  color: var(--dashboard-accent);
  background: #fff;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  place-items: center;
}

/* Profile and avatar */
.iotclass-dashboard-hero:where(:scope, *) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.4fr);
  gap: var(--spacing-xl);
  align-items: center;
  min-height: 11rem;
  padding: var(--spacing-xl);
  background: var(--dashboard-surface-muted);
  border: 1px solid var(--dashboard-line);
  border-left: 4px solid var(--dashboard-accent);
  border-radius: var(--dashboard-radius);
}

.iotclass-dashboard-profile:where(:scope, *),
.dashboard-ojs-profile:where(:scope, *) {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  min-width: 0;
}

.iotclass-dashboard-avatar-chip:where(:scope, *) {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: 6.5rem;
  height: 6.5rem;
  padding: 0.35rem;
  background: var(--dashboard-surface);
  border: 1px solid var(--dashboard-line-strong);
  border-radius: var(--radius-full);
  color: var(--dashboard-text);
  cursor: pointer;
  font: inherit;
  place-items: center;
}

.iotclass-dashboard-avatar-chip:hover:where(:scope, *) {
  border-color: var(--dashboard-avatar-accent);
}

.iotclass-dashboard-avatar-chip:focus-visible:where(:scope, *) {
  outline: 3px solid color-mix(in srgb, var(--dashboard-avatar-accent) 30%, transparent);
  outline-offset: 3px;
}

.iotclass-dashboard-avatar-change:where(:scope, *) {
  position: absolute;
  right: 50%;
  bottom: -0.25rem;
  min-width: 3.4rem;
  padding: 0.25rem 0.55rem;
  color: #fff;
  background: var(--dashboard-avatar-accent);
  border: 2px solid var(--dashboard-surface-muted);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  text-align: center;
  transform: translateX(50%);
}

.iotclass-dashboard-avatar:where(:scope, *),
.dashboard-ojs-avatar:where(:scope, *) {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--dashboard-surface);
  object-fit: cover;
}

.iotclass-dashboard-kicker:where(:scope, *) {
  margin: 0 0 var(--spacing-xs);
  color: var(--dashboard-accent);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.iotclass-dashboard-profile h2:where(:scope, *),
.dashboard-ojs-identity h2:where(:scope, *) {
  margin: 0 !important;
  font-size: clamp(1.8rem, 4vw, 2.6rem) !important;
}

.iotclass-dashboard-profile p:where(:scope, *),
.dashboard-ojs-identity p:where(:scope, *),
.iotclass-dashboard-status p:where(:scope, *) {
  margin: var(--spacing-xs) 0 0;
  color: var(--dashboard-muted);
}

.iotclass-dashboard-status:where(:scope, *) {
  display: grid;
  gap: var(--spacing-sm);
  align-content: center;
  min-height: 7rem;
  padding-left: var(--spacing-xl);
  border-left: 1px solid var(--dashboard-line);
}

.iotclass-dashboard-status > strong:where(:scope, *) {
  color: var(--dashboard-text);
  font-size: var(--font-size-xl);
}

.iotclass-dashboard-pill:where(:scope, *) {
  display: inline-flex;
  width: fit-content;
  margin-top: var(--spacing-xs);
  padding: 0.28rem 0.55rem;
  color: var(--dashboard-muted);
  background: var(--dashboard-surface);
  border: 1px solid var(--dashboard-line-strong);
  border-radius: var(--dashboard-radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.iotclass-avatar-dialog:where(:scope, *) {
  width: min(42rem, calc(100vw - 2rem));
  max-width: none;
  max-height: min(88vh, 48rem);
  margin: auto;
  padding: 0;
  color: var(--dashboard-text);
  background: var(--dashboard-surface);
  border: 1px solid var(--dashboard-line-strong);
  border-radius: var(--dashboard-radius);
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);
}

.iotclass-avatar-dialog:where(:scope, *)::backdrop {
  background: rgba(15, 23, 42, 0.58);
}

.iotclass-avatar-dialog-surface:where(:scope, *) {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: min(88vh, 48rem);
}

.iotclass-avatar-dialog-header:where(:scope, *) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--dashboard-line);
}

.iotclass-avatar-dialog-header h3:where(:scope, *) {
  margin: var(--spacing-xs) 0 0;
  color: var(--dashboard-text);
  font-size: var(--font-size-xl);
}

.iotclass-avatar-dialog-close:where(:scope, *) {
  display: inline-grid;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  flex: 0 0 auto;
  padding: 0;
  color: var(--dashboard-muted);
  background: var(--dashboard-surface-muted);
  border: 1px solid var(--dashboard-line);
  border-radius: var(--dashboard-radius-sm);
  cursor: pointer;
  font: inherit;
  font-size: var(--font-size-xl);
  place-items: center;
}

.iotclass-avatar-dialog-close:hover:where(:scope, *) {
  color: var(--dashboard-text);
  border-color: var(--dashboard-text);
}

.iotclass-avatar-dialog-close:focus-visible:where(:scope, *) {
  outline: 3px solid color-mix(in srgb, var(--dashboard-avatar-accent) 30%, transparent);
  outline-offset: 2px;
}

.iotclass-avatar-picker-panel:where(:scope, *) {
  padding: var(--spacing-lg);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.iotclass-avatar-picker-panel > p:where(:scope, *) {
  margin: 0 0 var(--spacing-md);
  color: var(--dashboard-muted);
  font-size: var(--font-size-sm);
}

.iotclass-avatar-grid:where(:scope, *) {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--spacing-md);
}

.iotclass-avatar-choice:where(:scope, *) {
  display: grid;
  gap: var(--spacing-sm);
  justify-items: center;
  min-width: 0;
  min-height: 8.5rem;
  padding: var(--spacing-md) var(--spacing-sm);
  color: var(--dashboard-text);
  background: var(--dashboard-surface-muted);
  border: 1px solid var(--dashboard-line);
  border-radius: var(--dashboard-radius-sm);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.iotclass-avatar-choice:hover:where(:scope, *) {
  background: var(--dashboard-surface);
  border-color: var(--dashboard-line-strong);
}

.iotclass-avatar-choice:focus-visible:where(:scope, *) {
  outline: 3px solid color-mix(in srgb, var(--dashboard-avatar-accent) 30%, transparent);
  outline-offset: 2px;
}

.iotclass-avatar-choice.is-selected:where(:scope, *) {
  background: color-mix(in srgb, var(--dashboard-avatar-accent) 7%, white);
  border: 2px solid var(--dashboard-avatar-accent);
}

.iotclass-avatar-choice img:where(:scope, *) {
  width: min(5.2rem, 100%);
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  background: var(--dashboard-surface);
  object-fit: cover;
}

.iotclass-avatar-picker-status:where(:scope, *) {
  min-height: 1.2rem;
  margin: var(--spacing-md) 0 0 !important;
  color: var(--dashboard-avatar-accent) !important;
  font-weight: var(--font-weight-semibold);
}

/* Stats and panels */
.iotclass-dashboard-stats:where(:scope, *),
.dashboard-stat-grid:where(:scope, *) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-md);
  background: transparent;
  border: 0;
}

.iotclass-dashboard-stat:where(:scope, *),
.dashboard-stat:where(:scope, *) {
  display: grid;
  gap: var(--spacing-sm);
  min-height: 8.5rem;
  padding: var(--spacing-lg);
  text-align: left;
  background: var(--dashboard-surface);
  border: 1px solid var(--dashboard-line);
  border-top: 3px solid var(--dashboard-line-strong);
  border-radius: var(--dashboard-radius);
}

.iotclass-dashboard-stat strong:where(:scope, *),
.dashboard-stat strong:where(:scope, *) {
  color: var(--dashboard-text);
  font-size: clamp(1.8rem, 4vw, 2.35rem);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  order: 2;
}

.iotclass-dashboard-stat span:where(:scope, *),
.dashboard-stat > span:where(:scope, *) {
  color: var(--dashboard-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  order: 1;
}

.dashboard-stat small:where(:scope, *) {
  color: var(--dashboard-subtle);
  order: 3;
}

.iotclass-dashboard-panel:where(:scope, *),
.iotclass-dashboard-actions:where(:scope, *),
.dashboard-panel:where(:scope, *),
.dashboard-shortcuts:where(:scope, *) {
  padding: var(--spacing-xl);
  color: var(--dashboard-text);
  background: var(--dashboard-surface);
  border: 1px solid var(--dashboard-line);
  border-radius: var(--dashboard-radius);
  box-shadow: none;
}

.iotclass-dashboard-overview-grid:where(:scope, *) {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(19rem, 0.65fr);
  gap: var(--spacing-md);
}

.iotclass-dashboard-panel-heading:where(:scope, *),
.dashboard-section-heading:where(:scope, *) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.iotclass-dashboard-panel-heading h3:where(:scope, *),
.dashboard-section-heading h3:where(:scope, *) {
  margin: 0 !important;
  font-size: var(--font-size-xl) !important;
}

.iotclass-dashboard-panel-heading > span:where(:scope, *),
.iotclass-dashboard-panel-heading > a:where(:scope, *),
.dashboard-section-heading > a:where(:scope, *) {
  color: var(--dashboard-muted);
  font-size: var(--font-size-sm);
}

.iotclass-dashboard-panel-heading > a:where(:scope, *),
.dashboard-section-heading > a:where(:scope, *) {
  color: var(--dashboard-accent);
  font-weight: var(--font-weight-semibold);
}

.iotclass-dashboard-panel-heading > strong:where(:scope, *) {
  color: var(--dashboard-text);
  font-size: var(--font-size-2xl);
}

.iotclass-dashboard-note:where(:scope, *),
.dashboard-level-panel p:where(:scope, *) {
  margin: var(--spacing-md) 0 0;
  color: var(--dashboard-muted);
  font-size: var(--font-size-sm);
}

progress:where(:scope, *) {
  overflow: hidden;
  appearance: none;
  display: block;
  width: 100%;
  height: 0.7rem;
  color: var(--dashboard-accent);
  background: var(--dashboard-control);
  border: 0;
  border-radius: var(--radius-full);
}

progress:where(:scope, *)::-webkit-progress-bar {
  background: var(--dashboard-control);
  border-radius: var(--radius-full);
}

progress:where(:scope, *)::-webkit-progress-value {
  background: var(--dashboard-accent);
  border-radius: var(--radius-full);
}

progress:where(:scope, *)::-moz-progress-bar {
  background: var(--dashboard-accent);
  border-radius: var(--radius-full);
}

.iotclass-dashboard-progress-track:where(:scope, *),
.dashboard-progress:where(:scope, *) {
  height: 0.85rem;
}

.iotclass-dashboard-streak-values:where(:scope, *) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  background: var(--dashboard-surface-muted);
  border: 1px solid var(--dashboard-line);
  border-radius: var(--dashboard-radius-sm);
}

.iotclass-dashboard-streak-values div:where(:scope, *) {
  display: grid;
  gap: var(--spacing-sm);
  min-width: 0;
  padding: var(--spacing-lg);
}

.iotclass-dashboard-streak-values div + div:where(:scope, *) {
  border-left: 1px solid var(--dashboard-line);
}

.iotclass-dashboard-streak-values strong:where(:scope, *) {
  color: var(--dashboard-text);
  font-size: var(--font-size-xl);
  line-height: 1.1;
}

.iotclass-dashboard-streak-values span:where(:scope, *) {
  color: var(--dashboard-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
}

/* Module unit map */
.iotclass-dashboard-modules:where(:scope, *) {
  position: relative;
  display: grid;
  gap: var(--spacing-lg);
  padding: var(--spacing-xl);
  color: var(--dashboard-text);
  background: var(--dashboard-surface);
  border: 1px solid var(--dashboard-line);
  border-top: 3px solid var(--dashboard-success);
  border-radius: var(--dashboard-radius);
}

.iotclass-dashboard-modules-heading:where(:scope, *) {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-xl);
}

.iotclass-dashboard-modules-heading h3:where(:scope, *) {
  margin: 0 !important;
  color: var(--dashboard-text) !important;
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
}

.iotclass-dashboard-modules-heading p:where(:scope, *) {
  margin: var(--spacing-xs) 0 0 !important;
  color: var(--dashboard-muted);
  font-size: var(--font-size-sm);
}

.iotclass-dashboard-module-summary:where(:scope, *) {
  display: grid;
  flex: 0 0 auto;
  gap: var(--spacing-xs);
  justify-items: end;
  color: var(--dashboard-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
}

.iotclass-dashboard-module-summary strong:where(:scope, *) {
  color: var(--dashboard-text);
  font-size: var(--font-size-2xl);
  line-height: 1;
}

.iotclass-dashboard-module-summary strong span:where(:scope, *),
.iotclass-dashboard-module-fraction span:where(:scope, *) {
  margin-inline: 0.15em;
  color: var(--dashboard-subtle);
  font-weight: var(--font-weight-normal);
}

.iotclass-dashboard-unit-legend:where(:scope, *) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm) var(--spacing-lg);
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--dashboard-muted);
  background: var(--dashboard-surface-muted);
  border: 1px solid var(--dashboard-line);
  border-radius: var(--dashboard-radius-sm);
  font-size: var(--font-size-xs);
}

.iotclass-dashboard-unit-legend span:where(:scope, *) {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.iotclass-dashboard-unit-legend i:where(:scope, *),
.iotclass-dashboard-unit-cell:where(:scope, *) {
  box-sizing: border-box;
  display: block;
  width: 0.85rem;
  height: 0.85rem;
  background: var(--dashboard-surface-muted);
  border: 1px solid var(--dashboard-line-strong);
  border-radius: 2px;
}

.iotclass-dashboard-unit-legend i[data-state="partially-complete"]:where(:scope, *),
.iotclass-dashboard-unit-cell[data-state="partially-complete"]:where(:scope, *) {
  background: color-mix(in srgb, var(--dashboard-success) 42%, var(--dashboard-surface));
  border-color: var(--dashboard-success);
}

.iotclass-dashboard-unit-legend i[data-state="completed"]:where(:scope, *),
.iotclass-dashboard-unit-cell[data-state="completed"]:where(:scope, *) {
  background: var(--dashboard-success);
  border-color: var(--dashboard-success);
}

.iotclass-dashboard-unit-legend i[data-freshened="true"]:where(:scope, *),
.iotclass-dashboard-unit-cell[data-freshened="true"]:where(:scope, *) {
  position: relative;
  overflow: visible;
}

.iotclass-dashboard-unit-legend i[data-freshened="true"]:where(:scope, *)::after,
.iotclass-dashboard-unit-cell[data-freshened="true"]:where(:scope, *)::after {
  content: "";
  position: absolute;
  top: -0.22rem;
  right: -0.22rem;
  width: 0.36rem;
  height: 0.36rem;
  background: #f59e0b;
  border: 1px solid var(--dashboard-surface);
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 1px color-mix(in srgb, #b45309 45%, transparent);
}

.iotclass-dashboard-fresh-panel:where(:scope, *) {
  display: grid;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: color-mix(in srgb, var(--dashboard-success) 5%, var(--dashboard-surface));
  border: 1px solid color-mix(in srgb, var(--dashboard-success) 34%, var(--dashboard-line));
  border-left: 4px solid var(--dashboard-success);
  border-radius: var(--dashboard-radius-sm);
}

.iotclass-dashboard-fresh-heading:where(:scope, *) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-lg);
}

.iotclass-dashboard-fresh-heading h4:where(:scope, *) {
  margin: 0 !important;
  color: var(--dashboard-text) !important;
  font-size: var(--font-size-xl) !important;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
}

.iotclass-dashboard-fresh-heading p:where(:scope, *) {
  margin: var(--spacing-xs) 0 0 !important;
  color: var(--dashboard-muted);
  font-size: var(--font-size-sm);
}

.iotclass-dashboard-fresh-heading > strong:where(:scope, *) {
  display: grid;
  flex: 0 0 auto;
  width: 2.15rem;
  height: 2.15rem;
  color: #075d45;
  background: #fff;
  border: 1px solid #9bd7c2;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  place-items: center;
}

.iotclass-dashboard-fresh-list:where(:scope, *) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.iotclass-dashboard-fresh-list li:where(:scope, *) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  min-width: 0;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--dashboard-surface);
  border: 1px solid var(--dashboard-line);
  border-radius: var(--dashboard-radius-sm);
}

.iotclass-dashboard-fresh-list li > span:where(:scope, *) {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.iotclass-dashboard-fresh-list strong:where(:scope, *) {
  overflow: hidden;
  color: var(--dashboard-text);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.iotclass-dashboard-fresh-list small:where(:scope, *) {
  color: var(--dashboard-muted);
  font-size: var(--font-size-xs);
}

.iotclass-dashboard-fresh-list a:where(:scope, *) {
  flex: 0 0 auto;
  padding: 0.42rem 0.65rem;
  color: #075d45;
  background: #eefaf5;
  border: 1px solid #9bd7c2;
  border-radius: var(--dashboard-radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.iotclass-dashboard-fresh-list a:hover:where(:scope, *) {
  color: #064c39;
  background: #dff5ec;
}

.iotclass-dashboard-fresh-list a:focus-visible:where(:scope, *) {
  outline: 3px solid color-mix(in srgb, var(--dashboard-success) 35%, transparent);
  outline-offset: 2px;
}

.iotclass-dashboard-module-list:where(:scope, *) {
  display: grid;
  border-bottom: 1px solid var(--dashboard-line);
}

.iotclass-dashboard-module-row:where(:scope, *) {
  display: grid;
  grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr) 4.5rem;
  gap: var(--spacing-lg);
  align-items: center;
  min-width: 0;
  padding: var(--spacing-md) 0;
  border-top: 1px solid var(--dashboard-line);
}

.iotclass-dashboard-module-identity:where(:scope, *) {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--spacing-md);
  align-items: center;
  min-width: 0;
}

.iotclass-dashboard-module-badge:where(:scope, *) {
  display: grid;
  width: 3.35rem;
  height: 3.35rem;
  padding: 0.15rem;
  background: var(--dashboard-surface-muted);
  border: 1px solid var(--dashboard-line);
  border-radius: var(--radius-full);
  place-items: center;
}

.iotclass-dashboard-module-badge img:where(:scope, *) {
  display: block;
  width: 100%;
  height: 100%;
  filter: grayscale(1);
  opacity: 0.34;
  object-fit: contain;
}

.iotclass-dashboard-module-badge.is-earned:where(:scope, *) {
  background: var(--dashboard-surface);
  border-color: var(--dashboard-success);
  outline: 3px solid color-mix(in srgb, var(--dashboard-success) 22%, transparent);
  outline-offset: 2px;
}

.iotclass-dashboard-module-badge.is-earned img:where(:scope, *) {
  filter: none;
  opacity: 1;
}

/* Badge art can 404 (art pipeline is populated separately from this UI). The
   onerror handler in user-profile.js removes the broken <img> and adds this
   class to the slot so the empty circle still reads as an intentional badge
   placeholder, not a broken image. */
.iotclass-dashboard-module-badge.iotclass-badge-art-missing:where(:scope, *)::after {
  content: "";
  width: 0.9rem;
  height: 0.9rem;
  background: var(--dashboard-line-strong);
  border-radius: var(--radius-full);
}

.iotclass-dashboard-module-badge.is-earned.iotclass-badge-art-missing:where(:scope, *)::after {
  background: var(--dashboard-success);
}

.iotclass-dashboard-module-copy:where(:scope, *) {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.iotclass-dashboard-module-copy strong:where(:scope, *) {
  overflow-wrap: anywhere;
  color: var(--dashboard-text);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
}

.iotclass-dashboard-module-copy small:where(:scope, *) {
  color: var(--dashboard-muted);
  font-size: var(--font-size-xs);
}

.iotclass-dashboard-unit-grid:where(:scope, *) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  align-content: center;
  min-width: 0;
}

.iotclass-dashboard-unit-cell:where(:scope, *) {
  position: relative;
  flex: 0 0 auto;
  color: inherit;
  text-decoration: none;
}

.iotclass-dashboard-unit-cell:hover:where(:scope, *) {
  border-color: var(--dashboard-text);
  transform: none;
}

.iotclass-dashboard-unit-cell:focus-visible:where(:scope, *) {
  z-index: 1;
  outline: 3px solid color-mix(in srgb, var(--dashboard-accent) 42%, transparent);
  outline-offset: 2px;
}

.iotclass-dashboard-module-fraction:where(:scope, *) {
  justify-self: end;
  color: var(--dashboard-text);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.iotclass-dashboard-module-row.is-earned .iotclass-dashboard-module-fraction:where(:scope, *) {
  color: var(--dashboard-success);
}

.iotclass-dashboard-unit-tooltip:where(:scope, *) {
  position: fixed;
  z-index: 1100;
  max-width: min(17rem, calc(100vw - 1rem));
  padding: 0.45rem 0.6rem;
  color: var(--dashboard-surface);
  background: var(--dashboard-text);
  border: 1px solid var(--dashboard-text);
  border-radius: var(--dashboard-radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  pointer-events: none;
  text-align: center;
  transform: translate(-50%, -100%);
}

.iotclass-dashboard-unit-tooltip[hidden]:where(:scope, *) {
  display: none;
}

.iotclass-dashboard-module-loading:where(:scope, *) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
  min-height: 4rem;
  padding: var(--spacing-lg);
  color: var(--dashboard-muted);
  background: var(--dashboard-surface-muted);
  border: 1px solid var(--dashboard-line);
  border-radius: var(--dashboard-radius-sm);
}

.iotclass-dashboard-module-loading span:where(:scope, *) {
  width: 0.85rem;
  height: 0.85rem;
  background: var(--dashboard-control);
  border: 1px solid var(--dashboard-line-strong);
  border-radius: 2px;
}

.iotclass-dashboard-module-loading span:nth-child(2):where(:scope, *),
.iotclass-dashboard-module-loading span:nth-child(3):where(:scope, *) {
  background: color-mix(in srgb, var(--dashboard-success) 42%, var(--dashboard-surface));
  border-color: var(--dashboard-success);
}

.iotclass-dashboard-module-loading strong:where(:scope, *) {
  margin-left: var(--spacing-sm);
  color: var(--dashboard-muted);
  font-size: var(--font-size-sm);
}

/* Learning paths */
.iotclass-dashboard-path-section:where(:scope, *) {
  display: grid;
  gap: var(--spacing-lg);
  padding-top: var(--spacing-md);
}

.iotclass-dashboard-path-section .iotclass-dashboard-panel-heading:where(:scope, *) {
  margin-bottom: 0;
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--dashboard-line);
}

.iotclass-dashboard-path-grid:where(:scope, *) {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--spacing-md);
}

.iotclass-dashboard-path-card:where(:scope, *) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--spacing-md);
  align-items: center;
  min-width: 0;
  min-height: 8rem;
  padding: var(--spacing-md);
  color: var(--dashboard-text);
  background: var(--dashboard-surface);
  border: 1px solid var(--dashboard-line);
  border-radius: var(--dashboard-radius);
  text-decoration: none;
}

.iotclass-dashboard-path-card:hover:where(:scope, *) {
  color: var(--dashboard-text);
  background: var(--dashboard-surface-muted);
  border-color: var(--dashboard-line-strong);
}

.iotclass-dashboard-path-card:focus-visible:where(:scope, *) {
  outline: 3px solid color-mix(in srgb, var(--dashboard-accent) 30%, transparent);
  outline-offset: 2px;
}

.iotclass-dashboard-path-card.is-active:where(:scope, *) {
  border-color: var(--dashboard-accent);
}

.iotclass-dashboard-ring:where(:scope, *) {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: 4.5rem;
  aspect-ratio: 1;
  place-items: center;
}

.iotclass-dashboard-ring svg:where(:scope, *) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
}

.iotclass-dashboard-ring circle:where(:scope, *) {
  fill: none;
  stroke-width: 4;
}

.iotclass-dashboard-ring-track:where(:scope, *) {
  stroke: var(--dashboard-control);
}

.iotclass-dashboard-ring-value:where(:scope, *) {
  stroke: var(--dashboard-accent);
  stroke-linecap: round;
}

.iotclass-dashboard-ring > span:where(:scope, *) {
  position: relative;
  z-index: 1;
  color: var(--dashboard-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.iotclass-dashboard-path-copy:where(:scope, *) {
  display: grid;
  gap: var(--spacing-xs);
  min-width: 0;
}

.iotclass-dashboard-path-copy strong:where(:scope, *),
.iotclass-dashboard-path-copy small:where(:scope, *) {
  overflow-wrap: anywhere;
}

.iotclass-dashboard-path-copy strong:where(:scope, *) {
  color: var(--dashboard-text);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
}

.iotclass-dashboard-path-copy small:where(:scope, *) {
  color: var(--dashboard-muted);
  font-size: var(--font-size-xs);
}

/* Badges */
.iotclass-dashboard-badge-grid:where(:scope, *),
.dashboard-badge-grid:where(:scope, *) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-md);
}

.iotclass-dashboard-badge:where(:scope, *),
.dashboard-badge-card:where(:scope, *) {
  display: grid;
  gap: var(--spacing-sm);
  justify-items: center;
  min-width: 0;
  padding: var(--spacing-lg) var(--spacing-md);
  text-align: center;
  background: var(--dashboard-surface-muted);
  border: 1px solid var(--dashboard-line);
  border-radius: var(--dashboard-radius-sm);
}

.iotclass-dashboard-badge img:where(:scope, *),
.dashboard-badge-card img:where(:scope, *) {
  display: block;
  width: min(7rem, 100%);
  height: 7rem;
  margin-bottom: var(--spacing-xs);
  object-fit: contain;
}

/* Same badge-art-404 fallback as the module badge slot: the onerror handler
   in user-profile.js removes the broken <img> and adds this class so a
   neutral placeholder glyph fills the icon's spot instead of nothing. */
.iotclass-dashboard-badge.iotclass-badge-art-missing:where(:scope, *)::before {
  content: "";
  display: block;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--spacing-xs);
  background: var(--dashboard-line-strong);
  border-radius: var(--radius-full);
}

.iotclass-dashboard-badge strong:where(:scope, *),
.dashboard-badge-card strong:where(:scope, *) {
  color: var(--dashboard-text);
  font-size: var(--font-size-base);
  line-height: var(--line-height-snug);
}

.iotclass-dashboard-badge small:where(:scope, *),
.dashboard-badge-card small:where(:scope, *) {
  color: var(--dashboard-muted);
  font-size: var(--font-size-xs);
}

.iotclass-dashboard-badge-empty:where(:scope, *) {
  display: grid;
  gap: var(--spacing-sm);
  justify-items: start;
  padding: var(--spacing-xl);
  color: var(--dashboard-muted);
  background: var(--dashboard-surface-muted);
  border: 1px dashed var(--dashboard-line-strong);
  border-radius: var(--dashboard-radius-sm);
}

.iotclass-dashboard-badge-empty strong:where(:scope, *) {
  color: var(--dashboard-text);
  font-size: var(--font-size-lg);
}

.iotclass-dashboard-badge-empty a:where(:scope, *) {
  margin-top: var(--spacing-sm);
  color: var(--dashboard-accent);
  font-weight: var(--font-weight-semibold);
}

/* Next step, recent activity, and mix */
.iotclass-dashboard-focus-grid:where(:scope, *) {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--spacing-md);
}

.iotclass-dashboard-next-best:where(:scope, *) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-left: 4px solid var(--dashboard-accent);
}

.iotclass-dashboard-next-title:where(:scope, *) {
  margin: 0 !important;
  color: var(--dashboard-text) !important;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.iotclass-dashboard-next-link:where(:scope, *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: var(--touch-target-min);
  margin-top: auto;
  padding: 0.6rem 0.9rem;
  color: #fff;
  background: var(--dashboard-accent);
  border: 1px solid var(--dashboard-accent);
  border-radius: var(--dashboard-radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.iotclass-dashboard-next-link:hover:where(:scope, *) {
  color: #fff;
  background: color-mix(in srgb, var(--dashboard-accent) 88%, black);
}

.iotclass-dashboard-next-link:focus-visible:where(:scope, *) {
  outline: 3px solid color-mix(in srgb, var(--dashboard-accent) 30%, transparent);
  outline-offset: 2px;
}

.iotclass-dashboard-activity:where(:scope, *),
.dashboard-activity-list:where(:scope, *) {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.iotclass-dashboard-activity li:where(:scope, *),
.dashboard-activity-list li:where(:scope, *) {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--spacing-md);
  align-items: center;
  min-width: 0;
  padding: var(--spacing-md) 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--dashboard-line);
  border-radius: 0;
}

.iotclass-dashboard-activity li:first-child:where(:scope, *),
.dashboard-activity-list li:first-child:where(:scope, *) {
  padding-top: 0;
  border-top: 0;
}

.iotclass-dashboard-activity-type:where(:scope, *) {
  width: fit-content;
  padding: 0.25rem 0.45rem;
  color: var(--dashboard-muted);
  background: var(--dashboard-surface-muted);
  border: 1px solid var(--dashboard-line);
  border-radius: var(--dashboard-radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
}

.iotclass-dashboard-activity strong:where(:scope, *),
.iotclass-dashboard-activity small:where(:scope, *) {
  display: block;
}

.iotclass-dashboard-activity strong:where(:scope, *) {
  color: var(--dashboard-text);
}

.iotclass-dashboard-activity small:where(:scope, *) {
  margin-top: var(--spacing-xs);
  color: var(--dashboard-muted);
  font-size: var(--font-size-sm);
}

.iotclass-dashboard-empty-row:where(:scope, *) {
  grid-template-columns: minmax(0, 1fr) !important;
  color: var(--dashboard-muted);
}

.iotclass-dashboard-meter-grid:where(:scope, *) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-lg);
}

.iotclass-dashboard-meter-row:where(:scope, *) {
  display: grid;
  gap: var(--spacing-sm);
  margin: 0;
}

.iotclass-dashboard-meter-label:where(:scope, *) {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-sm);
  color: var(--dashboard-muted);
  font-size: var(--font-size-sm);
}

.iotclass-dashboard-meter-label strong:where(:scope, *) {
  color: var(--dashboard-text);
}

.iotclass-dashboard-meter-track:where(:scope, *) {
  height: 0.5rem;
}

/* Shortcuts and earning panel */
.iotclass-dashboard-actions:where(:scope, *) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xl);
}

.iotclass-dashboard-actions h3:where(:scope, *) {
  margin: 0 !important;
  font-size: var(--font-size-xl) !important;
}

.iotclass-dashboard-actions nav:where(:scope, *),
.dashboard-shortcuts:where(:scope, *) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-sm);
}

.iotclass-dashboard-actions nav:where(:scope, *) {
  flex: 1 1 38rem;
  max-width: 44rem;
}

.iotclass-dashboard-actions a:where(:scope, *),
.dashboard-shortcuts a:where(:scope, *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  padding: 0.55rem 0.75rem;
  color: var(--dashboard-text);
  background: var(--dashboard-surface-muted);
  border: 1px solid var(--dashboard-line-strong);
  border-radius: var(--dashboard-radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  text-decoration: none;
}

.iotclass-dashboard-actions a:hover:where(:scope, *),
.dashboard-shortcuts a:hover:where(:scope, *) {
  color: var(--dashboard-text);
  background: var(--dashboard-control);
  border-color: var(--dashboard-text);
}

.iotclass-dashboard-actions a:focus-visible:where(:scope, *),
.dashboard-shortcuts a:focus-visible:where(:scope, *) {
  outline: 3px solid color-mix(in srgb, var(--dashboard-accent) 30%, transparent);
  outline-offset: 2px;
}

.dashboard-earn-panel:where(:scope, *) {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--spacing-2xl);
  align-items: center;
  margin-top: var(--spacing-3xl);
  padding: var(--spacing-2xl);
  background: var(--dashboard-surface-muted);
  border: 1px solid var(--dashboard-line);
  border-radius: var(--dashboard-radius);
}

.dashboard-earn-panel h2:where(:scope, *) {
  margin: 0 0 var(--spacing-sm) !important;
  font-size: var(--font-size-2xl) !important;
}

.dashboard-earn-panel p:where(:scope, *) {
  margin: 0;
  color: var(--dashboard-muted);
}

.dashboard-earn-panel ul:where(:scope, *) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dashboard-earn-panel li:where(:scope, *) {
  display: grid;
  gap: var(--spacing-xs);
  min-height: 6.5rem;
  padding: var(--spacing-md);
  background: var(--dashboard-surface);
  border: 1px solid var(--dashboard-line);
  border-radius: var(--dashboard-radius-sm);
}

.dashboard-earn-panel li strong:where(:scope, *) {
  color: var(--dashboard-accent);
  font-size: var(--font-size-lg);
}

.dashboard-earn-panel li span:where(:scope, *) {
  color: var(--dashboard-muted);
  font-size: var(--font-size-sm);
}

/* OJS fallback */
.dashboard-ojs-shell:where(:scope, *) {
  display: grid;
  gap: var(--spacing-xl);
}

.dashboard-ojs-profile:where(:scope, *) {
  padding: var(--spacing-xl);
  background: var(--dashboard-surface-muted);
  border: 1px solid var(--dashboard-line);
  border-left: 4px solid var(--dashboard-accent);
  border-radius: var(--dashboard-radius);
}

.dashboard-ojs-avatar:where(:scope, *) {
  width: 6rem;
  height: 6rem;
  border: 1px solid var(--dashboard-line-strong);
}

.dashboard-activity-list li:where(:scope, *) {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.dashboard-activity-mark:where(:scope, *) {
  width: 0.75rem;
  height: 0.75rem;
  background: var(--dashboard-accent);
  border-radius: var(--radius-full);
}

.dashboard-activity-list strong:where(:scope, *),
.dashboard-activity-list small:where(:scope, *) {
  display: block;
  text-transform: capitalize;
}

.dashboard-activity-list small:where(:scope, *) {
  color: var(--dashboard-muted);
}

.dashboard-xp-chip:where(:scope, *) {
  color: var(--dashboard-accent);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.dashboard-shortcuts:where(:scope, *) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1000px) {
  .iotclass-dashboard-path-grid:where(:scope, *) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .iotclass-dashboard-badge-grid:where(:scope, *),
  .dashboard-badge-grid:where(:scope, *) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-earn-panel:where(:scope, *) {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  #quarto-content.page-layout-full:where(:scope, *) {
    display: block !important;
    width: 100%;
  }

  #quarto-document-content:where(:scope, *) {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  #title-block-header.quarto-title-block:where(:scope, *) {
    margin-bottom: var(--spacing-xl);
  }

  .iotclass-dashboard-shell:where(:scope, *) {
    gap: var(--spacing-md);
  }

  .iotclass-dashboard-signin:where(:scope, *),
  .dashboard-signin-card:where(:scope, *),
  .iotclass-dashboard-hero:where(:scope, *),
  .iotclass-dashboard-overview-grid:where(:scope, *),
  .iotclass-dashboard-focus-grid:where(:scope, *) {
    grid-template-columns: 1fr;
  }

  .iotclass-dashboard-signin:where(:scope, *),
  .dashboard-signin-card:where(:scope, *) {
    gap: var(--spacing-xl);
    min-height: auto;
    padding: var(--spacing-xl);
  }

  .iotclass-dashboard-signin-preview:where(:scope, *),
  .dashboard-signin-preview:where(:scope, *) {
    min-height: 11rem;
  }

  .iotclass-dashboard-status:where(:scope, *) {
    min-height: auto;
    padding: var(--spacing-lg) 0 0;
    border-top: 1px solid var(--dashboard-line);
    border-left: 0;
  }

  .iotclass-dashboard-stats:where(:scope, *),
  .dashboard-stat-grid:where(:scope, *) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .iotclass-dashboard-meter-grid:where(:scope, *) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .iotclass-dashboard-fresh-list:where(:scope, *) {
    grid-template-columns: 1fr;
  }

  .iotclass-dashboard-module-row:where(:scope, *) {
    grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr) 3.5rem;
    gap: var(--spacing-md);
  }

  .iotclass-dashboard-actions:where(:scope, *) {
    align-items: stretch;
    flex-direction: column;
  }

  .iotclass-dashboard-actions nav:where(:scope, *),
  .dashboard-shortcuts:where(:scope, *) {
    flex: 0 0 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: none;
  }

  .dashboard-earn-panel:where(:scope, *) {
    gap: var(--spacing-xl);
    margin-top: var(--spacing-2xl);
    padding: var(--spacing-xl);
  }

  .dashboard-earn-panel ul:where(:scope, *) {
    grid-template-columns: 1fr;
  }

  .dashboard-earn-panel li:where(:scope, *) {
    min-height: auto;
  }
}

@media (max-width: 520px) {
  #quarto-document-content:where(:scope, *) {
    padding-inline: var(--spacing-md);
  }

  #title-block-header.quarto-title-block .title:where(:scope, *) {
    font-size: 2.15rem !important;
  }

  .iotclass-dashboard-hero:where(:scope, *),
  .iotclass-dashboard-panel:where(:scope, *),
  .iotclass-dashboard-actions:where(:scope, *),
  .iotclass-dashboard-modules:where(:scope, *),
  .dashboard-panel:where(:scope, *) {
    padding: var(--spacing-lg);
  }

  .iotclass-dashboard-modules-heading:where(:scope, *) {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .iotclass-dashboard-module-summary:where(:scope, *) {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
    justify-items: start;
  }

  .iotclass-dashboard-module-summary span:where(:scope, *) {
    max-width: none;
  }

  .iotclass-dashboard-fresh-panel:where(:scope, *) {
    padding: var(--spacing-md);
  }

  .iotclass-dashboard-fresh-heading p:where(:scope, *) {
    max-width: 15rem !important;
  }

  .iotclass-dashboard-fresh-heading h4:where(:scope, *) {
    font-size: 1.1rem !important;
  }

  .iotclass-dashboard-fresh-list li:where(:scope, *) {
    align-items: flex-start;
  }

  .iotclass-dashboard-fresh-list strong:where(:scope, *) {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .iotclass-dashboard-module-row:where(:scope, *) {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--spacing-sm) var(--spacing-md);
    padding: var(--spacing-md) 0 var(--spacing-lg);
  }

  .iotclass-dashboard-module-identity:where(:scope, *) {
    grid-template-columns: 3.25rem minmax(0, 1fr);
  }

  .iotclass-dashboard-module-badge:where(:scope, *) {
    width: 3rem;
    height: 3rem;
  }

  .iotclass-dashboard-unit-grid:where(:scope, *) {
    grid-column: 1 / -1;
    gap: 0.3rem;
    padding-left: 0.1rem;
  }

  .iotclass-dashboard-unit-cell:where(:scope, *) {
    width: 0.95rem;
    height: 0.95rem;
  }

  .iotclass-dashboard-profile:where(:scope, *) {
    align-items: flex-start;
  }

  .iotclass-dashboard-avatar-chip:where(:scope, *) {
    width: 5rem;
    height: 5rem;
  }

  .iotclass-dashboard-profile h2:where(:scope, *) {
    font-size: 1.65rem !important;
  }

  .iotclass-avatar-dialog:where(:scope, *) {
    width: calc(100vw - 1rem);
    max-height: calc(100vh - 1rem);
  }

  .iotclass-avatar-dialog-surface:where(:scope, *) {
    max-height: calc(100vh - 1rem);
  }

  .iotclass-avatar-dialog-header:where(:scope, *),
  .iotclass-avatar-picker-panel:where(:scope, *) {
    padding: var(--spacing-md);
  }

  .iotclass-avatar-grid:where(:scope, *) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-sm);
  }

  .iotclass-avatar-choice:where(:scope, *) {
    min-height: 7.5rem;
    padding: var(--spacing-sm);
  }

  .iotclass-dashboard-stat:where(:scope, *),
  .dashboard-stat:where(:scope, *) {
    min-height: 7rem;
    padding: var(--spacing-md);
  }

  .iotclass-dashboard-path-grid:where(:scope, *) {
    grid-template-columns: 1fr;
  }

  .iotclass-dashboard-path-card:where(:scope, *) {
    min-height: 6.5rem;
  }

  .iotclass-dashboard-badge-grid:where(:scope, *),
  .dashboard-badge-grid:where(:scope, *) {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
  }

  .iotclass-dashboard-badge:where(:scope, *),
  .dashboard-badge-card:where(:scope, *) {
    padding: var(--spacing-md) var(--spacing-sm);
  }

  .iotclass-dashboard-badge img:where(:scope, *),
  .dashboard-badge-card img:where(:scope, *) {
    width: 5.5rem;
    height: 5.5rem;
  }

  .iotclass-dashboard-panel-heading:where(:scope, *),
  .dashboard-section-heading:where(:scope, *) {
    gap: var(--spacing-sm);
  }

  .iotclass-dashboard-activity li:where(:scope, *),
  .dashboard-activity-list li:where(:scope, *) {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }

  .iotclass-dashboard-meter-grid:where(:scope, *) {
    grid-template-columns: 1fr;
  }

  .iotclass-dashboard-streak-values:where(:scope, *) {
    grid-template-columns: 1fr;
  }

  .iotclass-dashboard-streak-values div + div:where(:scope, *) {
    border-top: 1px solid var(--dashboard-line);
    border-left: 0;
  }

  .dashboard-earn-panel:where(:scope, *) {
    padding: var(--spacing-lg);
  }
}


/* ==== CANONICAL COMPONENT: Badge components ==== */
/* IoTClass learner badge showcase
 *
 * This page uses the same flat platform tokens and chrome as the admin portal
 * while preserving the badge application's existing JS-facing classes.
 */

:root:where(:scope) {
  --badge-accent: var(--flat-accent);
  --badge-text: var(--flat-text);
  --badge-muted: var(--flat-text-muted);
  --badge-subtle: var(--flat-text-subtle);
  --badge-line: var(--flat-border);
  --badge-line-strong: var(--flat-border-strong);
  --badge-surface: var(--flat-surface);
  --badge-surface-alt: var(--flat-surface-muted);
  --badge-radius: var(--flat-radius-lg);
  --badge-radius-sm: var(--flat-radius-md);
}

html:where(:scope),
body:where(:scope, *) {
  max-width: 100%;
  overflow-x: clip;
}

body:where(:scope, *),
#quarto-content:where(:scope, *) {
  color: var(--badge-text) !important;
  background: var(--badge-surface) !important;
}

.navbar:where(:scope, *) {
  background: var(--ieee-navy) !important;
}

.iotclass-user-status:where(:scope, *) {
  color: #fff !important;
  background: var(--ieee-navy) !important;
}

/* The public "last updated" notice is useful on learning chapters but is not
 * application chrome. Keep the badge application aligned with admin pages. */
.iotclass-dashboard-enhanced #last-edited-banner:where(:scope, *) {
  display: none !important;
}

#quarto-document-content:where(:scope, *) {
  width: min(100%, 1500px);
  max-width: 1500px;
  min-width: 0;
  margin-inline: auto;
}

#title-block-header.quarto-title-block:where(:scope, *) {
  margin-bottom: var(--spacing-xl);
  padding: 0 0 var(--spacing-lg) !important;
  overflow: visible;
  background: var(--badge-surface) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--badge-line) !important;
  border-radius: 0 !important;
}

#title-block-header.quarto-title-block .title:where(:scope, *) {
  margin: 0;
  color: var(--badge-text) !important;
  font-size: clamp(2rem, 4vw, 2.6rem) !important;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.025em;
  line-height: 1.2;
}

#title-block-header.quarto-title-block .subtitle:where(:scope, *) {
  display: block !important;
  margin-top: var(--spacing-sm);
  color: var(--badge-muted) !important;
  font-size: var(--font-size-lg);
}

#quarto-document-content .cell-code:where(:scope, *),
#quarto-document-content .cell > details:where(:scope, *),
#quarto-document-content [id^="ojs-cell"] .observablehq--inspect:where(:scope, *) {
  display: none !important;
}

.iot-nav-icon:where(:scope, *),
.iot-toc-nav-icon:where(:scope, *) {
  display: inline-flex;
  flex: 0 0 1rem;
  width: 1rem;
  height: 1rem;
  margin-right: var(--spacing-xs);
  color: var(--badge-subtle);
  vertical-align: -0.125em;
}

.iot-nav-icon svg:where(:scope, *),
.iot-toc-nav-icon svg:where(:scope, *) {
  display: block;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.badges-container:where(:scope, *) {
  box-sizing: border-box;
  width: 100%;
  max-width: 1500px;
  min-width: 0;
  margin-inline: auto;
  padding: 0;
}

/* Content panels on this application page use the same flat treatment as the
 * admin portal. Platform defaults intentionally retain richer chapter styling,
 * so override their gradients and elevated shadows locally. */
#quarto-document-content .callout:where(:scope, *),
#quarto-document-content table:where(:scope, *),
.badge-signin-panel:where(:scope, *),
.badge-empty-state:where(:scope, *),
.badge-notification:where(:scope, *) {
  color: var(--badge-text);
  background: var(--badge-surface) !important;
  background-image: none !important;
  border: 1px solid var(--badge-line) !important;
  border-radius: var(--badge-radius) !important;
  box-shadow: 0 1px 2px rgba(33, 36, 44, 0.06) !important;
}

#quarto-document-content .callout:where(:scope, *) {
  border-left: 3px solid var(--callout-color, var(--badge-accent)) !important;
  transform: none !important;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast) !important;
}

#quarto-document-content .callout:where(:scope, *)::before {
  display: none !important;
}

#quarto-document-content table:where(:scope, *) {
  overflow-x: auto;
  overflow-y: hidden;
}

.badge-signin-panel:where(:scope, *),
.badge-empty-state:where(:scope, *) {
  padding: var(--spacing-2xl) var(--spacing-lg);
  text-align: center;
}

.badge-signin-icon:where(:scope, *),
.badge-empty-state-icon:where(:scope, *) {
  margin-bottom: var(--spacing-lg);
  color: var(--badge-subtle);
  font-size: 3rem;
  line-height: 1;
}

.badge-inline-icon:where(:scope, *) {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.18em;
}

.badge-signin-title:where(:scope, *),
.badge-empty-state-title:where(:scope, *) {
  margin: 0 0 var(--spacing-md);
  color: var(--badge-text);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.badge-signin-copy:where(:scope, *),
.badge-empty-state-copy:where(:scope, *) {
  margin: 0 0 var(--spacing-lg);
  color: var(--badge-muted);
}

.badge-signin-btn:where(:scope, *) {
  min-height: 2.75rem;
  padding: 0.65rem 1rem;
  color: #fff;
  background: var(--badge-accent);
  border: 1px solid var(--badge-accent);
  border-radius: var(--badge-radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.badge-signin-btn:hover:where(:scope, *) {
  background: color-mix(in srgb, var(--badge-accent) 88%, black);
  border-color: color-mix(in srgb, var(--badge-accent) 88%, black);
}

.badge-signin-btn:focus-visible:where(:scope, *) {
  outline: 3px solid color-mix(in srgb, var(--badge-accent) 28%, transparent);
  outline-offset: 2px;
}

.badge-tabs:where(:scope, *),
.category-filter:where(:scope, *) {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xl);
}

.badge-tab:where(:scope, *),
.filter-btn:where(:scope, *),
.badge-action-btn:where(:scope, *) {
  min-height: 2.75rem;
  padding: 0.65rem 1rem;
  color: var(--badge-text);
  background: var(--badge-surface);
  border: 1px solid var(--badge-line-strong);
  border-radius: var(--badge-radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  cursor: pointer;
}

.badge-tab:hover:where(:scope, *),
.filter-btn:hover:where(:scope, *),
.badge-action-btn:hover:where(:scope, *) {
  color: var(--badge-text);
  background: var(--badge-surface-alt);
  border-color: var(--badge-text);
}

.badge-tab.active:where(:scope, *),
.filter-btn.active:where(:scope, *) {
  color: #fff;
  background: var(--badge-accent);
  border-color: var(--badge-accent);
}

.badge-tab:focus-visible:where(:scope, *),
.filter-btn:focus-visible:where(:scope, *),
.badge-action-btn:focus-visible:where(:scope, *) {
  outline: 3px solid color-mix(in srgb, var(--badge-accent) 28%, transparent);
  outline-offset: 2px;
}

.badges-grid:where(:scope, *) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-2xl);
}

.badge-card:where(:scope, *),
.progress-section:where(:scope, *) {
  color: var(--badge-text);
  background: var(--badge-surface);
  border: 1px solid var(--badge-line);
  border-radius: var(--badge-radius);
  box-shadow: none;
}

.badge-card:where(:scope, *) {
  position: relative;
  padding: var(--spacing-lg);
  overflow: hidden;
  text-align: center;
}

.badge-card--earned:where(:scope, *) {
  border-left: 3px solid var(--badge-rarity-color, var(--badge-line-strong));
}

.badge-card:hover:where(:scope, *) {
  border-color: var(--badge-line-strong);
}

.badge-card.locked:where(:scope, *) {
  opacity: 0.68;
  filter: grayscale(70%);
}

.badge-card.earned:where(:scope, *)::before {
  content: "✓";
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  display: grid;
  width: 2rem;
  height: 2rem;
  color: #fff;
  background: var(--success);
  border-radius: var(--radius-full);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  place-items: center;
}

.badge-emoji:where(:scope, *) {
  display: block;
  margin-bottom: var(--spacing-md);
  font-size: 4.5rem;
  line-height: 1;
}

.badge-emoji > .badge-inline-icon:where(:scope, *),
.badge-signin-icon > .badge-inline-icon:where(:scope, *) {
  width: 1em;
  height: 1em;
}

.badge-art-image:where(:scope, *) {
  display: block;
  width: min(10rem, 70%);
  height: auto;
  margin-inline: auto;
  border-radius: 50%;
}

.badge-notification-art:where(:scope, *) {
  display: block;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
}

.badge-card-title:where(:scope, *) {
  margin: 0 0 var(--spacing-sm);
  color: var(--badge-text);
  font-size: var(--font-size-lg);
}

.badge-card-description:where(:scope, *) {
  margin: 0 0 var(--spacing-md);
  color: var(--badge-muted);
  font-size: var(--font-size-sm);
}

.badge-card-date:where(:scope, *) {
  margin-bottom: var(--spacing-md);
  color: var(--badge-subtle);
  font-size: var(--font-size-xs);
}

.badge-card-rarity:where(:scope, *) {
  display: inline-block;
  margin-bottom: var(--spacing-sm);
  padding: 0.25rem 0.65rem;
  color: #102a43;
  background: var(--badge-rarity-color, var(--badge-subtle));
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.badge-card-xp:where(:scope, *) {
  margin-top: var(--spacing-sm);
  color: var(--badge-rarity-color, var(--badge-accent));
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.badge-card-status:where(:scope, *) {
  margin-top: var(--spacing-sm);
  color: var(--badge-muted);
  font-size: var(--font-size-sm);
}

.badge-locked-emoji:where(:scope, *) {
  opacity: 0.35;
  filter: grayscale(100%);
}

.badge-name:where(:scope, *) {
  margin: 0 0 var(--spacing-sm);
  color: var(--badge-text);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

.badge-category:where(:scope, *),
.badge-rarity:where(:scope, *),
.badge-xp-reward:where(:scope, *) {
  display: inline-block;
  margin: 0 var(--spacing-xs) var(--spacing-sm);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.badge-category:where(:scope, *) {
  color: #fff;
  text-transform: uppercase;
}

.category-learning-path:where(:scope, *) {
  background: var(--ieee-navy);
}

.category-engagement:where(:scope, *) {
  background: var(--ieee-teal);
}

.category-milestone:where(:scope, *) {
  background: var(--ieee-orange);
}

.rarity-common:where(:scope, *) {
  color: #fff;
  background: var(--badge-subtle);
}

.rarity-uncommon:where(:scope, *) {
  color: #fff;
  background: var(--success);
}

.rarity-rare:where(:scope, *) {
  color: #fff;
  background: var(--info);
}

.rarity-legendary:where(:scope, *) {
  color: var(--badge-text);
  background: color-mix(in srgb, var(--warning) 32%, white);
  border: 1px solid color-mix(in srgb, var(--warning) 55%, white);
}

.badge-xp-reward:where(:scope, *) {
  color: color-mix(in srgb, var(--success) 64%, black);
  background: color-mix(in srgb, var(--success) 10%, white);
}

.badge-criteria:where(:scope, *) {
  margin: 0 0 var(--spacing-md);
  color: var(--badge-muted);
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

.badge-earned-date:where(:scope, *) {
  margin-bottom: var(--spacing-md);
  color: var(--badge-subtle);
  font-size: var(--font-size-xs);
}

.badge-actions:where(:scope, *) {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.badge-render-grid:where(:scope, *) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(17.5rem, 100%), 1fr));
  gap: var(--spacing-lg);
}

.badge-render-grid--available:where(:scope, *) {
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
}

.badge-notification:where(:scope, *) {
  position: fixed;
  top: var(--spacing-lg);
  right: var(--spacing-lg);
  z-index: 10000;
  width: min(20rem, calc(100vw - 2 * var(--spacing-lg)));
  padding: var(--spacing-lg);
  border-left: 3px solid var(--badge-rarity-color, var(--badge-accent)) !important;
  animation: slideIn-733f921d4839e9da 0.3s ease-out;
}

.badge-notification-content:where(:scope, *) {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.badge-notification-icon:where(:scope, *) {
  font-size: 2.5rem;
}

.badge-notification-kicker:where(:scope, *) {
  color: var(--badge-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
}

.badge-notification-title:where(:scope, *) {
  margin: var(--spacing-xs) 0;
  color: var(--badge-text);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.badge-notification-xp:where(:scope, *) {
  color: var(--badge-rarity-color, var(--badge-accent));
  font-size: var(--font-size-sm);
}

.btn-download:where(:scope, *) {
  color: #fff;
  background: var(--badge-accent);
  border-color: var(--badge-accent);
}

.btn-share:where(:scope, *) {
  color: #fff;
  background: #0969a2;
  border-color: #0969a2;
}

.btn-json:where(:scope, *) {
  color: #fff;
  background: var(--badge-subtle);
  border-color: var(--badge-subtle);
}

.progress-section:where(:scope, *) {
  margin-bottom: var(--spacing-2xl);
  padding: var(--spacing-xl);
}

.progress-stats:where(:scope, *) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.progress-stat:where(:scope, *) {
  padding: var(--spacing-md);
  text-align: center;
  background: var(--badge-surface-alt);
  border: 1px solid var(--badge-line);
  border-radius: var(--badge-radius-sm);
}

.progress-stat-value:where(:scope, *) {
  margin-bottom: var(--spacing-xs);
  color: var(--badge-accent);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
}

.progress-stat-label:where(:scope, *) {
  color: var(--badge-muted);
  font-size: var(--font-size-sm);
}

@media (max-width: 768px) {
  #title-block-header.quarto-title-block:where(:scope, *) {
    padding-bottom: var(--spacing-md) !important;
  }

  .badges-grid:where(:scope, *),
  .progress-stats:where(:scope, *) {
    grid-template-columns: 1fr;
  }

  .progress-section:where(:scope, *),
  .badge-card:where(:scope, *),
  .badge-signin-panel:where(:scope, *) {
    padding: var(--spacing-md);
  }

  .badge-tab:where(:scope, *),
  .filter-btn:where(:scope, *) {
    flex: 1 1 9rem;
  }

  #quarto-document-content table.iot-stack-table tr:where(:scope, *) {
    margin: 0;
    background: var(--badge-surface);
    border: 0;
    border-bottom: 1px solid var(--badge-line);
    border-radius: 0;
    box-shadow: none;
  }

  #quarto-document-content table.iot-stack-table tr:last-child:where(:scope, *) {
    border-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .badge-card:where(:scope, *),
  .badge-tab:where(:scope, *),
  .filter-btn:where(:scope, *),
  .badge-action-btn:where(:scope, *) {
    transition: none;
  }
}


/* ==== CANONICAL COMPONENT: Onboarding nudge component ==== */
/**
 * IoTClass onboarding & sign-in nudges
 *
 * Styles for the lightweight, non-modal nudges that live outside the main
 * onboarding panel's own self-injected \3c style> (assets/js/onboarding.js
 * keeps that panel's original CSS inline by design -- see its file header):
 *
 *   - .iot-onboard-trigger   "Tour" relaunch link      (assets/js/onboarding.js)
 *   - .iot-chapter-hint      chapter first-visit toast (assets/js/onboarding.js)
 *   - .iot-signin-nudge      sign-in nudge toast        (assets/js/signin-nudge.js)
 *
 * Reuses the site's --flat-* design tokens (style/platform-base.css,
 * style/iotclass.css, style/platform.css) with safe hardcoded fallbacks so
 * nothing breaks if this file loads before those tokens are defined.
 */

:root:where(:scope) {
  --iot-nudge-accent: var(--flat-accent, #1865f2);
  --iot-nudge-text: var(--flat-text, #21242c);
  --iot-nudge-muted: var(--flat-text-muted, #475774);
  --iot-nudge-surface: var(--flat-surface, #ffffff);
  --iot-nudge-surface-muted: var(--flat-surface-muted, #f7f8fa);
  --iot-nudge-control: var(--flat-control-bg, #f1f3f5);
  --iot-nudge-control-hover: var(--flat-control-hover, #e7ebf0);
  --iot-nudge-border: var(--flat-border, #dbdcdd);
  --iot-nudge-border-strong: var(--flat-border-strong, #c7c9cc);
}

/* ---------------------------------------------------------------------- */
/* "Tour" relaunch trigger                                                */
/* ---------------------------------------------------------------------- */

.iot-onboard-trigger:where(:scope, *) {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: calc(max(1.25rem, env(safe-area-inset-bottom)) + var(--iot-onboard-footer-clearance, 0px));
  margin: 0;
  z-index: 1300;
  min-height: 44px;
  padding: 0.45rem 0.9rem;
  color: var(--iot-nudge-muted);
  background: var(--iot-nudge-surface);
  border: 1px solid var(--iot-nudge-border);
  border-radius: var(--radius-full, 9999px);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
  font-family: var(
    --font-family-base,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif
  );
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.iot-onboard-trigger:hover:where(:scope, *) {
  color: var(--iot-nudge-text);
  background: var(--iot-nudge-control-hover);
  border-color: var(--iot-nudge-border-strong);
}

.iot-onboard-trigger:focus-visible:where(:scope, *) {
  outline: 3px solid color-mix(in srgb, var(--iot-nudge-accent) 32%, transparent);
  outline-offset: 2px;
}

/* A fixed relaunch control must yield while its corner is occupied by real
   reading or feedback controls. The scroll handler restores it immediately
   when the corner is clear, retaining the floating placement without hiding
   page copy beneath it. */
.iot-onboard-trigger--occluded:where(:scope, *) {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 520px) {
  .iot-onboard-trigger:where(:scope, *) {
    right: calc(0.75rem + env(safe-area-inset-right));
    bottom: calc(4.75rem + env(safe-area-inset-bottom) + var(--iot-onboard-footer-clearance, 0px));
  }
}

/* ---------------------------------------------------------------------- */
/* Shared toast shell (chapter hint + sign-in nudge)                      */
/* ---------------------------------------------------------------------- */

.iot-chapter-hint:where(:scope, *),
.iot-signin-nudge:where(:scope, *) {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  z-index: 1300;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: min(23rem, calc(100vw - 2.5rem));
  padding: 0.9rem 1rem;
  color: var(--iot-nudge-text);
  background: var(--iot-nudge-surface);
  border: 1px solid var(--iot-nudge-border);
  border-left: 4px solid var(--iot-nudge-accent);
  border-radius: var(--radius-lg, 0.5rem);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
  font-family: var(
    --font-family-base,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif
  );
  font-size: 0.875rem;
  line-height: 1.45;
}

.iot-chapter-hint *:where(:scope, *),
.iot-signin-nudge *:where(:scope, *) {
  box-sizing: border-box;
}

.iot-chapter-hint:focus-visible:where(:scope, *),
.iot-signin-nudge:focus-visible:where(:scope, *) {
  outline: 0;
  box-shadow:
    0 12px 32px rgba(15, 23, 42, 0.14),
    inset 0 0 0 2px color-mix(in srgb, var(--iot-nudge-accent) 25%, transparent);
}

@media (max-width: 520px) {
  .iot-chapter-hint:where(:scope, *),
  .iot-signin-nudge:where(:scope, *) {
    right: 0.75rem;
    bottom: 0.75rem;
    left: 0.75rem;
    width: auto;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .iot-chapter-hint:where(:scope, *),
  .iot-signin-nudge:where(:scope, *) {
    animation: iot-nudge-rise-fa37d6cd2221c2e5 0.18s ease-out;
  }
}

@keyframes iot-nudge-rise-fa37d6cd2221c2e5 {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (forced-colors: active) {
  .iot-onboard-trigger:where(:scope, *),
  .iot-chapter-hint:where(:scope, *),
  .iot-signin-nudge:where(:scope, *) {
    border-color: CanvasText;
  }
}

/* ---------------------------------------------------------------------- */
/* Chapter first-visit hint                                               */
/* ---------------------------------------------------------------------- */

.iot-chapter-hint__text:where(:scope, *) {
  flex: 1 1 auto;
  margin: 0;
  color: var(--iot-nudge-text);
}

/* The first-visit hint is inserted after first paint. Reserve its in-flow
   host only for a fresh chapter visit, as stamped in the chapter head. */
html:where(:scope)[data-chapter-hint-pending="on"] #iot-section-progress-hint-host[hidden] {
  display: block !important;
  visibility: hidden;
  box-sizing: border-box;
  min-height: 70px;
}
@media (max-width: 575.98px) {
  html:where(:scope)[data-chapter-hint-pending="on"] #iot-section-progress-hint-host[hidden] { min-height: 90px; }
}

.iot-chapter-hint__text a:where(:scope, *) {
  color: var(--iot-nudge-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.iot-chapter-hint__text a:hover:where(:scope, *) {
  color: color-mix(in srgb, var(--iot-nudge-accent) 88%, black);
}

.iot-chapter-hint__close:where(:scope, *) {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: -0.15rem -0.25rem 0 0;
  padding: 0;
  color: var(--iot-nudge-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-md, 0.375rem);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.iot-chapter-hint__close:hover:where(:scope, *) {
  color: var(--iot-nudge-text);
  background: var(--iot-nudge-control);
}

.iot-chapter-hint__close:focus-visible:where(:scope, *) {
  outline: 3px solid color-mix(in srgb, var(--iot-nudge-accent) 32%, transparent);
  outline-offset: 1px;
}

/* ---------------------------------------------------------------------- */
/* Sign-in nudge                                                          */
/* ---------------------------------------------------------------------- */

.iot-signin-nudge:where(:scope, *) {
  position: static;
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
  width: 100%;
  max-width: 48rem;
  margin: 1rem auto;
  box-shadow: none;
}

.iot-signin-nudge__text:where(:scope, *) {
  margin: 0;
  color: var(--iot-nudge-text);
}

.iot-signin-nudge__actions:where(:scope, *) {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.iot-signin-nudge__signin:where(:scope, *),
.iot-signin-nudge__dismiss:where(:scope, *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-lg, 0.5rem);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

.iot-signin-nudge__signin:where(:scope, *) {
  color: #ffffff;
  background: var(--iot-nudge-accent);
  border: 1px solid var(--iot-nudge-accent);
}

.iot-signin-nudge__signin:hover:where(:scope, *) {
  background: color-mix(in srgb, var(--iot-nudge-accent) 88%, black);
  border-color: color-mix(in srgb, var(--iot-nudge-accent) 88%, black);
}

.iot-signin-nudge__signin:disabled:where(:scope, *) {
  color: var(--iot-nudge-muted);
  background: var(--iot-nudge-control);
  border-color: var(--iot-nudge-border);
  cursor: not-allowed;
  opacity: 0.78;
}

.iot-signin-nudge__dismiss:where(:scope, *) {
  color: var(--iot-nudge-muted);
  background: transparent;
  border: 1px solid var(--iot-nudge-border-strong);
}

.iot-signin-nudge__dismiss:hover:where(:scope, *) {
  color: var(--iot-nudge-text);
  background: var(--iot-nudge-control-hover);
}

.iot-signin-nudge__signin:focus-visible:where(:scope, *),
.iot-signin-nudge__dismiss:focus-visible:where(:scope, *) {
  outline: 3px solid color-mix(in srgb, var(--iot-nudge-accent) 32%, transparent);
  outline-offset: 2px;
}


/* ==== CANONICAL COMPONENT: Top-bar links component ==== */
/**
 * Module bar quick links: "How it works" (everyone) and "Dashboard"
 * (signed-in learners only). Injected by assets/js/iotclass-ui.js
 * (initModuleBarQuickLinks) into the right side of .iotclass-user-status,
 * before the Search button. Kept as its own stylesheet so it can be loaded
 * on demand without touching the shared style/platform.css or
 * style/iotclass.css files (task #67, chrome part).
 *
 * The bar itself reserves height via min-height on .iotclass-user-status
 * (style/iotclass.css) -- these rules stay single-line/no-wrap so that
 * reservation is never exceeded.
 */

.module-bar-links:where(:scope, *) {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

.module-bar-link:where(:scope, *) {
  color: inherit;
  opacity: 0.82;
  font-size: 0.8rem;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: opacity 0.2s;
}

.module-bar-link:hover:where(:scope, *) {
  opacity: 1;
  color: inherit;
  text-decoration: underline;
}

.module-bar-link[hidden]:where(:scope, *) {
  display: none;
}

@media (max-width: 480px) {
  .module-bar-link-how-it-works:where(:scope, *) {
    display: none;
  }
}

/* ==== AST-HOTFIX1: recovered Design System selector families ==== */
/* These active selector families existed in the pre-AST-CSS1 cascade and
 * disappeared from both post-consolidation canonical files. They remain
 * component skin/typography, so Design System is their canonical owner. */
math:where(:scope, *) {
  font-family: "STIX Two Math", "Cambria Math", "Latin Modern Math", "Noto Sans Math", math, serif;
}

math mi:where(:scope, *) {
  text-transform: none;
  font-style: italic;
}

math mi[mathvariant="normal"]:where(:scope, *) {
  font-style: normal;
}

.module-bar-logo-link:where(:scope, *),
.platform-navbar__brand:where(:scope, *),
.landing-nav-logo:where(:scope, *) {
  cursor: pointer;
}

.module-bar-logo-link:focus-visible:where(:scope, *),
.platform-navbar__brand:focus-visible:where(:scope, *),
.landing-nav-logo:focus-visible:where(:scope, *),
.landing-nav-login-btn:focus-visible:where(:scope, *),
button.quarto-btn-toggle:focus-visible:where(:scope, *),
.module-bar-sidebar-toggle:focus-visible:where(:scope, *),
.module-bar-search:focus-visible:where(:scope, *),
button[onclick*="Auth.login"]:focus-visible:where(:scope, *),
button[onclick*="IoTClassAuth"]:focus-visible:where(:scope, *) {
  outline: 3px solid var(--flat-focus-ring, #1865f2) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 2px #ffffff !important;
}

#quarto-document-content h2.lab-step-heading:where(:scope, *) {
  border-left: 0;
  margin-top: 1.859375rem;
  margin-bottom: 0.903125rem;
  padding-left: 0;
  color: var(--flat-text, #1f2933);
  font-size: 1.434375rem !important;
  line-height: 1.25 !important;
}

#quarto-document-content h2.lab-step-heading:where(:scope, *)::before {
  content: none;
}

.iotclass-freshness-chip:where(:scope, *) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  width: fit-content;
  max-width: 100%;
  margin: -0.2rem 0 1.15rem;
  padding: 0.42rem 0.7rem;
  color: #075d45;
  background: #eefaf5;
  border: 1px solid #abdcca;
  border-radius: 999px;
  font-size: 0.78rem;
  line-height: 1.25;
}

.iotclass-freshness-chip > span:where(:scope, *) {
  width: 0.48rem;
  height: 0.48rem;
  flex: 0 0 auto;
  background: #087f5b;
  border-radius: 50%;
}

.iotclass-freshness-chip strong:where(:scope, *) {
  color: inherit;
  font-weight: 700;
}

.iotclass-freshness-chip small:where(:scope, *) {
  color: #3b6256;
  font-size: inherit;
}

@media (max-width: 575.98px) {
  .iotclass-freshness-chip:where(:scope, *) {
    border-radius: 10px;
  }

  .iotclass-freshness-chip small:where(:scope, *) {
    flex-basis: calc(100% - 1.05rem);
    margin-left: 1.05rem;
  }
}


/* ==== CANONICAL COMPONENT: Section progress component ==== */
.iot-section-progress-control:where(:scope, *) {
        display: inline-flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: .35rem;
        margin-inline-start: .65rem;
        vertical-align: .12em;
        font-size: .72rem;
        font-weight: 650;
        line-height: 1;
        white-space: nowrap;
      }
      .iot-section-progress-heading:where(:scope, *) {
        /* The signpost can be inserted between the heading and marker on
         * module guides. Reserve the same marker space on every section. */
        display: block;
        position: relative;
        min-block-size: 2rem;
        padding-inline-end: 2.75rem;
      }
      section:has(> .iot-section-progress-heading ~ .iot-section-progress-control):where(:scope, *) {
        position: relative;
      }
      .iot-section-progress-heading ~ .iot-section-progress-control:where(:scope, *) {
        position: absolute;
        inset-block-start: 0;
        inset-inline-end: 0;
        margin: 0;
      }
      .iot-section-progress-toggle:where(:scope, *) {
        min-height: 1.8rem;
        border: 1px solid transparent;
        border-radius: 999px;
        background: transparent;
        color: var(--bs-body-color, #243746);
        padding: .35rem .62rem;
        font: inherit;
        line-height: 1;
        cursor: pointer;
      }
      .iot-section-progress-toggle:where(:scope, *) {
        position: relative;
        display: inline-grid;
        place-items: center;
        flex: 0 0 2.75rem;
        inline-size: 2.75rem;
        block-size: 2.75rem;
        min-inline-size: 2.75rem;
        min-block-size: 2.75rem;
        padding: 0;
        white-space: nowrap;
      }
      .iot-section-progress-toggle-icon:where(:scope, *) {
        box-sizing: border-box;
        inline-size: 1.75rem;
        block-size: 1.75rem;
        display: block;
        padding: .32rem;
        border: 1px solid color-mix(in srgb, var(--bs-body-color, #243746) 24%, transparent);
        border-radius: 999px;
        background: var(--bs-body-bg, #fff);
        pointer-events: none;
      }
      .iot-section-progress-toggle:where(:scope, *)::after {
        content: attr(data-tooltip);
        position: absolute;
        z-index: 1080;
        inset-inline-start: 50%;
        inset-block-end: calc(100% + .45rem);
        translate: -50% .2rem;
        max-inline-size: 14rem;
        padding: .38rem .5rem;
        border-radius: .35rem;
        background: #243746;
        color: #fff;
        font-size: .72rem;
        font-weight: 600;
        line-height: 1.2;
        text-align: center;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity .12s ease, translate .12s ease;
      }
      .iot-section-progress-toggle:hover:where(:scope, *)::after,
      .iot-section-progress-toggle:focus-visible:where(:scope, *)::after {
        opacity: 1;
        translate: -50% 0;
      }
      .iot-section-progress-toggle:hover:where(:scope, *),
      .iot-section-progress-toggle:focus-visible:where(:scope, *) {
        border-color: transparent;
        outline: none;
      }
      .iot-section-progress-toggle:hover .iot-section-progress-toggle-icon:where(:scope, *),
      .iot-section-progress-toggle:focus-visible .iot-section-progress-toggle-icon:where(:scope, *) {
        border-color: #087f5b;
        box-shadow: 0 0 0 2px color-mix(in srgb, #087f5b 34%, transparent);
      }
      .iot-section-progress-toggle[aria-pressed="true"]:where(:scope, *) {
        color: #075d45;
      }
      .iot-section-progress-toggle[aria-pressed="true"] .iot-section-progress-toggle-icon:where(:scope, *) {
        border-color: #087f5b;
        background: #e7f7f0;
      }
      .iot-section-progress-toggle[data-manual="true"]:where(:scope, *) {
        box-shadow: none;
      }
      .iot-section-progress-toggle[data-manual="true"] .iot-section-progress-toggle-icon:where(:scope, *) {
        box-shadow: inset 0 0 0 1px color-mix(in srgb, #087f5b 36%, transparent);
      }
      .iot-section-progress-icon:where(:scope, *) {
        width: 1rem;
        height: 1rem;
        flex: 0 0 1rem;
        margin-inline-end: .38rem;
        color: #667781;
        vertical-align: -.12em;
      }
      .iot-section-progress-icon[data-state="partially-complete"]:where(:scope, *) {
        color: #b26a00;
      }
      .iot-section-progress-icon[data-state="fully-complete"]:where(:scope, *) {
        color: #087f5b;
      }
      /* AST-QA2: the sidebar's static nav icon and this invisible progress
         slot are response HTML, so the first styled paint has final link
         geometry. section-progress.js prepends the personalized SVG and
         stamps data-section-progress-unit in one task; the placeholder then
         disappears without changing the occupied width. */
      .iot-section-progress-placeholder:where(:scope, *) {
        display: block;
        width: 1rem;
        height: 1rem;
        flex: 0 0 1rem;
        margin-inline-end: .38rem;
        visibility: hidden;
      }
      #quarto-sidebar a.sidebar-link[data-iot-section-progress-shell]:where(:scope, *) {
        display: flex;
        align-items: center;
      }
      #quarto-sidebar a.sidebar-link[data-section-progress-unit]
        > .iot-section-progress-placeholder:where(:scope, *) {
        display: none;
      }
      #quarto-sidebar a.sidebar-link[data-section-progress-unit]:where(:scope, *) {
        display: flex;
        align-items: center;
      }
      #quarto-sidebar a.sidebar-link[data-section-progress-unit]
        > .iot-section-progress-icon:where(:scope, *) {
        animation: iot-section-progress-reveal-5620457ce0c5c5f8 .16s ease-out both;
      }
      @keyframes iot-section-progress-reveal-5620457ce0c5c5f8 {
        from { opacity: 0; }
        to { opacity: 1; }
      }
      .iot-section-progress-legend:where(:scope, *) {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: .3rem .5rem;
        margin: .15rem 0 .6rem;
        padding: 0 .4rem;
        color: color-mix(in srgb, var(--ds-ink-soft, var(--bs-body-color, #243746)) 88%, transparent);
        font-family: var(--ds-font, inherit);
        font-size: .68rem;
        font-weight: 600;
        letter-spacing: .01em;
        line-height: 1.3;
      }
      .iot-section-progress-legend-item:where(:scope, *) {
        display: inline-flex;
        align-items: center;
        gap: .28rem;
        white-space: nowrap;
      }
      .iot-section-progress-legend-item .iot-section-progress-icon:where(:scope, *) {
        width: .78rem;
        height: .78rem;
        margin-inline-end: 0;
        flex: 0 0 .78rem;
      }
      .iot-section-progress-legend-sep:where(:scope, *) {
        opacity: .55;
      }
      .iot-section-progress-hint:where(:scope, *) {
        position: static;
        display: flex;
        align-items: flex-start;
        gap: .4rem;
        inline-size: min(100%, 32rem);
        max-inline-size: 100%;
        margin: 0 0 1rem auto;
        padding: .55rem .6rem;
        border-radius: .5rem;
        background: #243746;
        color: #fff;
        font-size: .74rem;
        font-weight: 600;
        line-height: 1.3;
        text-align: start;
        white-space: normal;
        box-shadow: 0 6px 18px rgba(15, 23, 33, .28);
      }
      .iot-section-progress-hint-text:where(:scope, *) {
        flex: 1 1 auto;
      }
      .iot-section-progress-hint-dismiss:where(:scope, *) {
        flex: 0 0 auto;
        min-inline-size: 44px;
        min-block-size: 44px;
        border: 0;
        border-radius: .3rem;
        background: rgba(255, 255, 255, .16);
        color: #fff;
        font-size: .82rem;
        line-height: 1;
        cursor: pointer;
      }
      .iot-section-progress-hint-dismiss:hover:where(:scope, *),
      .iot-section-progress-hint-dismiss:focus-visible:where(:scope, *) {
        background: rgba(255, 255, 255, .3);
        outline: 2px solid rgba(255, 255, 255, .6);
        outline-offset: 1px;
      }
      @media (max-width: 575.98px) {
        .iot-section-progress-heading + .iot-section-progress-control:where(:scope, *) {
          display: inline-flex;
          width: auto;
          margin: 0;
        }
        .iot-section-progress-hint:where(:scope, *) { inline-size: 100%; }
      }
      @media (prefers-reduced-motion: no-preference) {
        .iot-section-progress-toggle:where(:scope, *),
        .iot-section-progress-icon:where(:scope, *) {
          transition: background-color .15s ease, border-color .15s ease, color .15s ease;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        #quarto-sidebar a.sidebar-link[data-section-progress-unit]
          > .iot-section-progress-icon:where(:scope, *) {
          animation: none;
        }
      }

/* ==== CANONICAL COMPONENT: Reading comfort and print ==== */
/**
 * Reading comfort (#71).
 *
 * Self-injected by assets/js/reading-time.js's ensureStylesheet() (id
 * iotclass-reading-comfort-stylesheet) on EVERY page load, chapter or not
 * -- the print rules below must reach every chapter regardless of whether
 * that script's reading-time chip itself renders.
 *
 * Two unrelated things share this one file only because they share one
 * loader:
 *   1. The reading-time chip's own styling.
 *   2. @media print rules that make a chapter page printable: force
 *      depth-hidden content visible, and hide toolbars/widgets that make
 *      sense on screen but not on paper.
 */

/* ============================================================
   Reading-time chip
   Mounts inside the server-rendered .iot-section-depth-toggle__heading
   (style/components.js's initSectionDepthToggle(), not owned here; see the
   baked markup in any docs/**\/*.html chapter) as a third line under the
   existing "Reading depth" kicker and "Choose how far to go" prompt.
   ============================================================ */
.iot-reading-time:where(:scope, *) {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-block-start: 2px;
  /* Fixed line box: the text changes on every iotclass:section-depth-change
     recompute ("~12 min read at this depth" <-> "a quick read"), but this
     element's own height never does, so the toolbar row never jumps when a
     reader switches depth. (A true zero-shift *first mount* would require
     this chip to exist in the server-rendered markup itself -- that markup
     is generated outside this task's file set, so this reserves the
     stable case: every recompute after the initial mount.) */
  min-block-size: 1rem;
  line-height: 1rem;
  color: var(--ds-ink-faint, #7b8794);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.iot-reading-time-icon:where(:scope, *) {
  width: 0.78rem;
  height: 0.78rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.iot-reading-time-text:where(:scope, *) {
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 575.98px) {
  .iot-reading-time:where(:scope, *) {
    white-space: normal;
  }
}

/* ============================================================
   Print (#71 task 2)
   Printing a chapter today silently drops every depth-hidden section and
   prints quiz widgets/toolbars verbatim. Two fixes:
   ============================================================ */
@media print {
  /* Show the FULL chapter regardless of the reader's on-screen depth
     choice. style/design-system.css / style/platform.css pre-hide
     section.depth-l2 (always) and section.depth-l1 (when the stored
     choice is "overview") via
       section.depth-l2:not([data-iot-depth-visible="true"]) { display: none; }
     unconditionally -- not inside any @media screen block -- so that hiding
     reaches print today too. style/components.js's applyDepth() also sets
     section.hidden on whichever sections the current on-screen choice
     excludes, which maps to the UA stylesheet's own low-specificity
     `[hidden] { display: none }`. The !important below outranks both. */
  #quarto-document-content section.depth-l0:where(:scope, *),
  #quarto-document-content section.depth-l1:where(:scope, *),
  #quarto-document-content section.depth-l2:where(:scope, *) {
    display: block !important;
  }

  /* Toolbars, interactive widgets, and injected chrome that make sense on
     screen but not on a printed page. */
  .iot-section-depth-toggle:where(:scope, *),
  .iot-section-progress-control:where(:scope, *),
  .inline-knowledge-check:where(:scope, *),
  iot-knowledge-check:where(:scope, *),
  iot-matching-quiz:where(:scope, *),
  iot-ordering-quiz:where(:scope, *),
  iot-label-quiz:where(:scope, *),
  iot-code-quiz:where(:scope, *),
  .iot-learner-feedback:where(:scope, *),
  iot-embed:where(:scope, *),
  .iot-embed-card:where(:scope, *),
  .iotclass-user-status:where(:scope, *),
  #quarto-sidebar:where(:scope, *),
  #quarto-margin-sidebar:where(:scope, *),
  .toc-mobile-toggle:where(:scope, *),
  .toc-mobile-drawer:where(:scope, *),
  .toc-mobile-backdrop:where(:scope, *),
  .iot-chapter-summary:where(:scope, *),
  .iot-signin-nudge:where(:scope, *),
  .iot-onboard-trigger:where(:scope, *),
  .iot-chapter-hint:where(:scope, *),
  #content-flag-btn:where(:scope, *),
  #content-flag-modal:where(:scope, *),
  #last-edited-banner:where(:scope, *) {
    display: none !important;
  }

  /* Page-break hygiene: never orphan a heading at the bottom of a page,
     never split a figure, table, or code block across the fold. */
  h1:where(:scope, *),
  h2:where(:scope, *),
  h3:where(:scope, *),
  h4:where(:scope, *),
  h5:where(:scope, *),
  h6:where(:scope, *) {
    break-after: avoid;
    page-break-after: avoid;
  }

  figure:where(:scope, *),
  img:where(:scope, *),
  table:where(:scope, *),
  pre.sourceCode:where(:scope, *),
  .sourceCode:where(:scope, *) {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* ============================================================
   Chapter pager
   ============================================================ */
body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) .nav-page:where(:scope, *),
body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) .nav-page:where(:scope, *) {
  background: none;
  border-top: 0;
}

.page-navigation:where(:scope, *) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
}

.nav-page:where(:scope, *) {
  flex: 0 1 48%;
  display: flex;
  min-width: 0;
  padding: 0;
}

.nav-page-next:where(:scope, *) {
  justify-content: flex-end;
  margin-left: auto;
}

.page-navigation .nav-page-next:has(> .cbn-next-card):where(:scope, *) {
  flex-direction: column;
  justify-content: flex-start;
}

.page-navigation .nav-page > a:not(.cbn-next-card):not(.cbn-catalog-link):where(:scope, *) {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  max-width: 100%;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--ds-line, #e6e8eb);
  border-radius: var(--ds-radius, 12px);
  background: var(--ds-surface, #ffffff);
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
}

.page-navigation .nav-page > a:not(.cbn-next-card):not(.cbn-catalog-link):hover:where(:scope, *),
.page-navigation .nav-page > a:not(.cbn-next-card):not(.cbn-catalog-link):focus-visible:where(:scope, *) {
  background: var(--ds-surface-alt, #f7f9fb);
  border-color: var(--pc-main, var(--ds-accent, #546e7a));
}

.page-navigation .nav-page > a:not(.cbn-next-card):not(.cbn-catalog-link) > i:where(:scope, *) {
  flex: 0 0 auto;
  font-size: 1.3rem;
  line-height: 1;
}

.page-navigation .nav-page-text:where(:scope, *) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-navigation .nav-page > .cbn-next-card:where(:scope, *) {
  flex: 1 1 auto;
  min-width: 0;
}

/* FIX-9-NAV: the real pager uses flex layout. A grid-template declaration on
 * this component cannot collapse its tracks, so switch the active layout
 * model to stacked, full-width rows at the phone breakpoint. Mirrored in
 * platform.css to preserve the shared column-geometry contract. */
@media (max-width: 520px) {
  body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) .page-navigation:where(:scope, *),
  body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) .page-navigation:where(:scope, *) {
    align-items: stretch;
    flex-direction: column;
  }

  body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) .page-navigation .nav-page:where(:scope, *),
  body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) .page-navigation .nav-page:where(:scope, *) {
    flex: 1 1 auto;
    margin-left: 0;
    width: 100%;
  }

  body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) .page-navigation .nav-page > a:where(:scope, *),
  body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) .page-navigation .nav-page > a:where(:scope, *) {
    box-sizing: border-box;
    width: 100%;
  }

  body.nav-sidebar:not(.iotclass-homepage):not(.iotclass-modules-landing) .page-navigation .nav-page-text:where(:scope, *),
  body.docked:not(.iotclass-homepage):not(.iotclass-modules-landing) .page-navigation .nav-page-text:where(:scope, *) {
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }
}

/* FIX-RESPONSIVE-1: shared overflow contracts. Landing's source-local phone
 * rule intentionally keeps two compact columns; zero-min tracks let long book
 * names wrap instead of enlarging those tracks. Chapter wide-figure breakout
 * classes may exceed the prose column, but never the space between their
 * actual centred grid start and the viewport inset. */
@media (max-width: 767px) {
  html:where(:scope) body.iotclass-modules-landing main .parts-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  body.iotclass-modules-landing .part-card:where(:scope, *) {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* landing-card-midword-break (QA B2-09, 2026-10-15): at phone widths two
 * ~110 px columns forced long book names to break inside words. Below 420 px
 * use one column, and break only at word boundaries (hyphenate if needed). */
@media (max-width: 420px) {
  html:where(:scope) body.iotclass-modules-landing main .parts-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.iotclass-modules-landing .part-card:where(:scope, *) {
    overflow-wrap: break-word;
    hyphens: auto;
  }
}

@media (min-width: 1100px) {
  main#quarto-document-content [class$="-breakout"]:where(:scope, *) {
    box-sizing: border-box;
    max-width: calc(50vw + 90px) !important;
  }
}

body.docked #last-edited-banner:where(:scope, *) {
  width: 100%;
  margin-right: 0;
  margin-left: 0;
}

/* IMG-ANCHOR-1: fragment arrival must make the reviewed embed immediately
 * legible in context. The static :target contract works before and without
 * JavaScript; the animation only softens the ring after arrival. */
:is(figure, img, .quarto-figure):target:where(:scope, *) {
  scroll-margin-block: clamp(5rem, 12vh, 8rem);
  border-radius: var(--ds-radius, 12px);
  outline: 4px solid var(--pc-main, var(--ds-accent, #546e7a));
  outline-offset: 6px;
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--pc-main, var(--ds-accent, #546e7a)) 18%, transparent);
  animation: iot-embed-target-arrival-361eb940c80e08e4 2.4s ease-out 1;
}

@keyframes iot-embed-target-arrival-361eb940c80e08e4 {
  0%, 55% {
    outline-width: 5px;
    box-shadow: 0 0 0 12px color-mix(in srgb, var(--pc-main, var(--ds-accent, #546e7a)) 28%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(figure, img, .quarto-figure):target:where(:scope, *) {
    animation: none;
  }
}
/* EIC-FIX-6: mobile chapter geometry. Keep this block mirrored verbatim in
   platform.css so the source and generated platform layers agree. */
@media (max-width: 520px) {
  .toc-mobile-drawer:not(.open):where(:scope, *) { display: none !important; }
  .toc-mobile-drawer.open:where(:scope, *) { display: flex !important; }
  body.page-sensor-calibration-lab #title-block-header:where(:scope, *),
  body.page-sensor-calibration-lab #title-block-header .quarto-title:where(:scope, *),
  body.page-sensor-calibration-lab #title-block-header .quarto-title-block:where(:scope, *) { height: fit-content !important; max-height: 6rem !important; }
  body.page-sensor-calibration-lab:where(:scope, *) { overflow-x: clip !important; }
  .iot-chapter-hint:where(:scope, *) { position: static !important; width: auto !important; margin: .75rem !important; }
}

/* EIC8-E/G: class-level list reset and non-occluding chapter hint. This block
 * is mirrored verbatim across both standard sheets because both participate
 * in the rendered navigation/chrome cascade. */
#quarto-sidebar ul.list-unstyled li:where(:scope, *) {
  list-style: none !important;
}

.iot-chapter-hint:where(:scope, *) {
  position: static;
  right: auto;
  left: auto;
  width: min(100%, 32rem);
  margin: 0 0 1rem auto;
}

/* A persistent sticky status bar lets body text scroll underneath it on
 * compact pages. It remains the first item in the page, but stays in flow. */
.iotclass-user-status:where(:scope, *) {
  position: static;
}

/* EIC10-G: reusable chapter figure breakout. Converted figures are nested in
 * main.content (and sometimes in a component grid), so first span that local
 * grid and then cross the equal 1.5rem gutters. This maps to the page grid's
 * body-start-outset / body-end lines without entering the live TOC track.
 * Keep this block mirrored verbatim in design-system.css. */
@media (min-width: 1100px) {
  main#quarto-document-content:has(.iot-wide-breakout):where(:scope, *) {
    overflow: visible;
  }

  main#quarto-document-content .iot-wide-breakout:where(:scope, *) {
    box-sizing: border-box;
    grid-column: 1 / -1;
    width: calc(100% + 3rem);
    max-width: calc(100% + 3rem) !important;
    min-width: 0;
    margin-left: -1.5rem !important;
    margin-right: 0 !important;
    overflow: visible;
  }
}
/* EIC10-S CANONICAL SECTION END: design system */

/* EIC10-S CANONICAL SECTION START: mobile overflow fixes */
/* FIX-8-MOBILE: focused mobile containment for shared learner chrome. */

@media (max-width: 767px) {
  /* Keep the progressively enhanced chapter disclosure legible even when a
     module's accent variables or chapter-local styles are unusually strong. */
  .iot-mobile-chapters-toggle > span:where(:scope, *),
  .iot-mobile-chapters-fallback:not([hidden]):where(:scope, *) {
    color: var(--iot-midnight, #172033) !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* The enhanced button replaces this no-JS anchor. Preserve the native
     hidden contract even though the visible fallback needs an !important
     display override against chapter-local styles. */
  .iot-mobile-chapters-fallback[hidden]:where(:scope, *) {
    display: none !important;
  }

  .iot-mobile-chapters-toggle > svg:where(:scope, *) {
    color: var(--iot-midnight, #172033) !important;
    display: block !important;
    flex: 0 0 20px;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* A reward should confirm an answer, not cover the answer controls. Keep
     the mobile toast in the header corner and cap its footprint. */
  .gamification-notification.xp-notification:where(:scope, *) {
    position: static;
    inset: auto;
    box-sizing: border-box;
    flex-wrap: wrap;
    gap: 0.15rem 0.5rem;
    width: 100%;
    max-width: 100%;
    margin: 0.75rem 0;
    padding: 0.65rem 0.8rem;
    pointer-events: none;
  }

  .gamification-notification.xp-notification .xp-amount:where(:scope, *) {
    flex: 0 0 auto;
    font-size: 1rem;
    line-height: 1.25;
  }

  .gamification-notification.xp-notification .xp-reason:where(:scope, *) {
    display: -webkit-box;
    flex: 1 1 7rem;
    min-width: 0;
    margin-left: 0;
    overflow: hidden;
    font-size: 0.75rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  /* Markdown tables and OJS tables opt into the same deliberate scroll box.
     The shadow on the inline edge is a quiet affordance, not decoration. */
  .iot-lab-table-scroll:where(:scope, *) {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    box-shadow: inset -10px 0 10px -12px rgba(23, 32, 51, 0.55);
  }

  .iot-lab-table-scroll > table:where(:scope, *) {
    min-width: max-content;
    margin-bottom: 0;
  }

  .iot-lab-capacity-grid:where(:scope, *) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Let the full destination label wrap instead of turning it into an
     ellipsis at the primary Start Here continuation. */
  body.how-it-works .page-navigation .nav-page-text:where(:scope, *) {
    display: block;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }
}

/* Footer headings sit on #212529/#272b30 charcoal across the public estate.
   This foreground remains comfortably above WCAG AA's 4.5:1 threshold. */
.site-footer .footer-column h3:where(:scope, *),
.site-footer .footer-column h4:where(:scope, *) {
  color: #f1f5f9 !important;
}

/* The small relaunch control replaces the dismissed onboarding panel, so it
   follows the same footer-clearance custom property instead of covering a
   legal link at the end of the page. */
.iot-onboard-trigger:where(:scope, *) {
  bottom: calc(max(1.25rem, env(safe-area-inset-bottom)) + var(--iot-onboard-footer-clearance, 0px));
}

@media (max-width: 520px) {
  .iot-onboard-trigger:where(:scope, *) {
    bottom: calc(4.75rem + env(safe-area-inset-bottom) + var(--iot-onboard-footer-clearance, 0px));
  }
}

.platform-header__signin:focus-visible:where(:scope, *),
.iotclass-auth-trigger:focus-visible:where(:scope, *) {
  outline: 3px solid #155eef;
  outline-offset: 2px;
}
/* EIC10-S CANONICAL SECTION END: mobile overflow fixes */

/* EIC10-S CANONICAL SECTION START: SEO accessibility fixes */
/* SEO-FIX-1: shared muted-copy contrast corrections from the launch axe tail. */
.iot-reading-time:where(:scope, *) {
  color: var(--ds-ink-soft, #52606d) !important;
}

.iot-lf-context:where(:scope, *) {
  color: var(--ds-ink-soft, #52606d) !important;
}

.iot-cs-eyebrow:where(:scope, *) {
  color: var(--ds-ink-soft, #52606d) !important;
}
/* EIC10-S CANONICAL SECTION END: SEO accessibility fixes */

/* EIC10-S CANONICAL SECTION START: cross-book navigation */
/**
 * cross-book-nav.css
 * Styling for the end-of-module navigation (assets/js/cross-book-navigation.js)
 * and the chapter-end related-content widget (assets/js/related-content.js).
 * TASK #63.
 *
 * Built on style/design-system.css's --ds-* tokens so both components match
 * the rest of chapter content (same ink/line/surface/radius scale) instead of
 * introducing a new palette. --cbn-accent, when set, comes from the *next*
 * module's own color (assets/data/course-catalog.json), matching the
 * per-module color coding used throughout the site (see
 * style/part-colors-include.html); it always falls back to the current
 * module's own --pc-main / the shared --ds-accent, so the card never renders
 * unstyled if a module color is missing or malformed.
 *
 * Both widgets render into space that is either already reserved by Quarto
 * (the empty .nav-page-next / .nav-page-previous slots) or strictly below the
 * fold (the related-content widget is appended after page-navigation, i.e.
 * after all chapter body content) -- see the TASK #63 report for why this
 * avoids the CLS this codebase has fought before.
 */

/* ---------------------------------------------------------------------- */
/* Next/previous module navigation (cross-book-navigation.js)             */
/* ---------------------------------------------------------------------- */

.cbn-next-card:where(:scope, *) {
  display: block;
  padding: 1.1rem 1.35rem;
  border: 1px solid var(--ds-line, #e6e8eb);
  border-left: 4px solid var(--cbn-accent, var(--pc-main, var(--ds-accent, #546E7A)));
  border-radius: var(--ds-radius, 12px);
  background: var(--ds-surface-alt, #f7f9fb);
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.cbn-next-card:hover:where(:scope, *),
.cbn-next-card:focus-visible:where(:scope, *) {
  background: var(--ds-surface, #ffffff);
  border-color: var(--cbn-accent, var(--pc-main, var(--ds-accent, #546E7A)));
}

.cbn-next-card--complete:where(:scope, *) {
  cursor: default;
  border-left-color: var(--ds-line-strong, #d2d6dc);
}

.cbn-finished-label:where(:scope, *) {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: var(--ds-ink-soft, #52606d);
}

.cbn-finished-label strong:where(:scope, *) {
  color: var(--ds-ink, #1f2933);
}

.cbn-next-eyebrow:where(:scope, *) {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ds-ink-soft, #46515c);
}

.cbn-next-title:where(:scope, *) {
  margin: 0.2rem 0 0.35rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ds-ink, #1f2933);
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.cbn-next-title i:where(:scope, *) {
  font-size: 1.4rem;
  line-height: 1;
}

.cbn-next-desc:where(:scope, *) {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ds-ink-soft, #52606d);
  line-height: 1.45;
}

.cbn-catalog-link:where(:scope, *) {
  display: inline-block;
  margin-top: 0.65rem;
  font-size: 0.85rem;
  color: var(--ds-accent-link, #6a1b9a);
  text-decoration: none;
}

.cbn-catalog-link:hover:where(:scope, *),
.cbn-catalog-link:focus-visible:where(:scope, *) {
  text-decoration: underline;
}

/* The "previous module" affordance intentionally reuses Quarto's native
   .pagination-link/.nav-page-text/.chapter-title markup and inherits its
   default styling; .cbn-prev-eyebrow is the only new visual element, a small
   label distinguishing it from a same-part chapter link. */
.cbn-prev-eyebrow:where(:scope, *) {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
}

@media (max-width: 640px) {
  nav.page-navigation:where(:scope, *) {
    flex-direction: column;
  }

  nav.page-navigation .nav-page:where(:scope, *),
  nav.page-navigation .nav-page > a:where(:scope, *) {
    flex-basis: auto;
    min-width: 0;
    width: 100%;
  }

  nav.page-navigation .nav-page-next:where(:scope, *) {
    margin-left: 0;
  }

  .cbn-next-card:where(:scope, *) {
    padding: 0.9rem 1.1rem;
  }

  .cbn-next-title:where(:scope, *) {
    font-size: 1.05rem;
  }
}

.quarto-dark .cbn-next-card:where(:scope, *) {
  background: #1f2937;
  border-color: #374151;
}

.quarto-dark .cbn-next-card--complete:where(:scope, *) {
  border-left-color: #4b5563;
}

.quarto-dark .cbn-next-title:where(:scope, *),
.quarto-dark .cbn-finished-label strong:where(:scope, *) {
  color: #f3f4f6;
}

.quarto-dark .cbn-finished-label:where(:scope, *),
.quarto-dark .cbn-next-desc:where(:scope, *),
.quarto-dark .cbn-next-eyebrow:where(:scope, *) {
  color: #9ca3af;
}

/* ---------------------------------------------------------------------- */
/* Chapter-end related content (related-content.js)                       */
/* ---------------------------------------------------------------------- */

.rc-container--pending:where(:scope, *) {
  min-block-size: 21rem;
}

.rc-widget:where(:scope, *) {
  --rc-accent: var(--pc-main, var(--ds-accent));
  margin: 2.25rem 0 0;
  color: var(--ds-ink);
  font-family: var(--ds-font);
}

.rc-heading:where(:scope, *) {
  position: relative;
  margin: 0 0 0.65rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--ds-line);
  color: var(--ds-ink);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.25;
}

.rc-heading:where(:scope, *)::before {
  content: none;
}

.rc-heading:where(:scope, *)::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-top: 0.4rem;
  margin-bottom: -0.42rem;
  background: var(--rc-accent);
}

.rc-kicker:where(:scope, *) {
  margin: 0 0 1rem;
  color: var(--ds-ink-soft);
  font-size: 0.875rem;
  font-weight: 750;
  letter-spacing: 0.075em;
  line-height: 1.4;
  text-transform: uppercase;
}

.rc-list:where(:scope, *) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.rc-card:where(:scope, *) {
  display: grid;
  min-width: 0;
  min-height: 7.75rem;
  align-content: start;
  gap: 0.45rem;
  padding: 1rem 1.05rem;
  border: 1px solid var(--ds-line);
  border-left: 4px solid color-mix(in srgb, var(--rc-accent) 60%, var(--ds-line));
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface-alt);
  color: var(--ds-ink);
  text-decoration: none;
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

.rc-card:hover:where(:scope, *) {
  border-color: color-mix(in srgb, var(--rc-accent) 38%, var(--ds-line));
  border-left-color: var(--rc-accent);
  background: var(--ds-surface);
  box-shadow: 0 0.3rem 0.75rem color-mix(in srgb, var(--ds-ink) 10%, transparent);
  color: var(--ds-ink);
  text-decoration: none;
  transform: translateY(-2px);
}

.rc-card:focus-visible:where(:scope, *) {
  border-color: color-mix(in srgb, var(--rc-accent) 38%, var(--ds-line));
  border-left-color: var(--rc-accent);
  outline: 3px solid color-mix(in srgb, var(--rc-accent) 28%, transparent);
  outline-offset: 3px;
  color: var(--ds-ink);
  text-decoration: none;
}

.rc-badge:where(:scope, *) {
  display: inline-flex;
  width: fit-content;
  min-height: 1.55rem;
  align-items: center;
  gap: 0.35rem;
  padding: 0.16rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--rc-accent) 24%, var(--ds-line));
  border-radius: 999px;
  background: var(--ds-surface);
  color: var(--ds-ink-soft);
  font-size: 0.875rem;
  font-weight: 750;
  line-height: 1.2;
}

.rc-badge-icon:where(:scope, *) {
  display: inline-grid;
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  place-items: center;
  color: var(--rc-accent);
}

.rc-badge-icon svg:where(:scope, *) {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.rc-card-title:where(:scope, *) {
  min-width: 0;
  color: var(--ds-ink);
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.3;
}

.rc-card-subtitle:where(:scope, *) {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--ds-ink-soft);
  font-size: 0.875rem;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .rc-container--pending:where(:scope, *) {
    min-block-size: 31rem;
  }

  .rc-list:where(:scope, *) {
    grid-template-columns: 1fr;
  }

  .rc-card:where(:scope, *) {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rc-card:where(:scope, *) {
    transition: none;
  }
}
/* EIC10-S CANONICAL SECTION END: cross-book navigation */

/* EIC10-S CANONICAL SECTION START: chapter progress */
/**
 * Chapter-end progress summary card (#65).
 *
 * Owned by assets/js/chapter-summary.js, which injects a <link> to this
 * stylesheet itself (self-contained -- does not depend on being wired into
 * _quarto.yml / scripts/generate-book-configs.py). Uses the same
 * design-system custom-property tokens as learner-feedback.js's injected
 * styles, with the same fallback chain, so it matches whichever surface it
 * renders on without needing platform.css.
 */

.iot-chapter-summary:where(:scope, *) {
  --cs-accent: var(--pc-main, var(--ds-accent, #087f5b));
  --cs-ink: var(--ds-ink, var(--bs-body-color, #243746));
  --cs-muted: var(--ds-ink-soft, #52606d);
  --cs-line: var(--ds-line, #e6e8eb);
  --cs-surface: var(--ds-surface, var(--bs-body-bg, #fff));
  --cs-surface-alt: var(--ds-surface-alt, #f7f9fb);

  box-sizing: border-box;
  margin: clamp(2.2rem, 6vw, 3.5rem) 0 1.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--cs-line);
  border-left: 4px solid color-mix(in srgb, var(--cs-accent) 60%, var(--cs-line));
  border-radius: var(--ds-radius-sm, 8px);
  background: var(--cs-surface-alt);
  color: var(--cs-muted);
  font: 500 .84rem/1.45 var(--ds-font, var(--font-family-base, system-ui, sans-serif));
}

.iot-chapter-summary *:where(:scope, *),
.iot-chapter-summary *:where(:scope, *)::before,
.iot-chapter-summary *:where(:scope, *)::after {
  box-sizing: border-box;
}

.iot-cs-head:where(:scope, *) {
  margin-bottom: .65rem;
}

.iot-cs-eyebrow:where(:scope, *) {
  color: color-mix(in srgb, var(--cs-muted) 85%, transparent);
  font-size: .875rem;
  font-weight: 750;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.iot-cs-body:where(:scope, *) {
  display: grid;
  gap: .9rem;
}

.iot-cs-stats:where(:scope, *) {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem 2rem;
}

.iot-cs-stat:where(:scope, *) {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-inline-size: 11rem;
}

.iot-cs-ring:where(:scope, *) {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  flex: 0 0 2.75rem;
  transform: rotate(-90deg);
}

.iot-cs-ring-track:where(:scope, *) {
  fill: none;
  stroke: color-mix(in srgb, var(--cs-line) 100%, transparent);
  stroke-width: 6;
}

.iot-cs-ring-fill:where(:scope, *) {
  fill: none;
  stroke: var(--cs-accent);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset .25s ease;
}

.iot-cs-stat-copy:where(:scope, *) {
  display: grid;
  gap: .1rem;
  font-variant-numeric: tabular-nums;
}

.iot-cs-stat-value:where(:scope, *) {
  color: var(--cs-ink);
  font-size: 1.05rem;
  font-weight: 750;
  line-height: 1.15;
}

.iot-cs-stat-label:where(:scope, *) {
  color: var(--cs-muted);
  font-size: .875rem;
  font-weight: 550;
}

.iot-cs-actions:where(:scope, *) {
  display: flex;
  align-items: center;
}

.iot-cs-complete-btn:where(:scope, *) {
  min-height: 2.75rem;
  padding: .4rem .8rem;
  color: color-mix(in srgb, var(--cs-accent) 38%, #17212b);
  background: var(--cs-surface);
  border: 1px solid color-mix(in srgb, var(--cs-accent) 46%, var(--cs-line));
  border-radius: .45rem;
  font: inherit;
  font-size: .875rem;
  font-weight: 650;
  cursor: pointer;
}

.iot-cs-complete-btn:hover:where(:scope, *),
.iot-cs-complete-btn:focus-visible:where(:scope, *) {
  background: color-mix(in srgb, var(--cs-accent) 9%, var(--cs-surface));
  border-color: var(--cs-accent);
}

.iot-cs-complete-btn:focus-visible:where(:scope, *) {
  outline: 2px solid color-mix(in srgb, var(--cs-accent) 42%, transparent);
  outline-offset: 2px;
}

.iot-cs-complete-btn:disabled:where(:scope, *) {
  color: var(--cs-muted);
  background: var(--cs-surface-alt);
  border-color: var(--cs-line);
  cursor: default;
}

.iot-cs-complete-btn[hidden]:where(:scope, *) {
  display: none;
}

@media (max-width: 575.98px) {
  .iot-chapter-summary:where(:scope, *) {
    margin-top: 2.2rem;
    padding: .85rem .9rem;
  }

  .iot-cs-stats:where(:scope, *) {
    gap: 1rem 1.4rem;
  }

  .iot-cs-stat:where(:scope, *) {
    min-inline-size: 0;
    flex: 1 1 10rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .iot-cs-ring-fill:where(:scope, *) {
    transition: none;
  }
}
/* EIC10-S CANONICAL SECTION END: chapter progress */

/* EIC10-S CANONICAL SECTION START: interactive embed */
iot-embed:where(:scope, *) {
  --iot-embed-accent: var(--pc-main, #e67e22);
  --iot-embed-tint: color-mix(in srgb, var(--iot-embed-accent) 10%, white);
  display: block;
  width: 100%;
  box-sizing: border-box;
}

iot-embed[data-iot-panel-category="game"]:where(:scope, *) {
  --iot-embed-accent: var(--pc-main, #e67e22);
}

iot-embed[data-iot-panel-category="simulation"]:where(:scope, *) {
  --iot-embed-accent: var(--pc-main, #e67e22);
}

iot-embed[data-iot-panel-category="animation"]:where(:scope, *) {
  --iot-embed-accent: var(--pc-main, #e67e22);
}

iot-embed[data-iot-panel-category="foundation"]:where(:scope, *) {
  --iot-embed-accent: #5c6873;
  --iot-embed-tint: #eef1f3;
  --iot-panel-accent: #5c6873;
  --iot-panel-tint: #eef1f3;
}

iot-embed[data-iot-panel-category="lab"]:where(:scope, *) {
  --iot-embed-accent: var(--pc-main, #e67e22);
}

iot-embed[data-iot-panel-category="hardware"]:where(:scope, *) {
  --iot-embed-accent: var(--pc-main, #e67e22);
}

iot-embed[data-iot-panel-category="check"]:where(:scope, *) {
  --iot-embed-accent: var(--pc-main, #e67e22);
}

.iot-embed-card:where(:scope, *) {
  display: flex;
  min-height: 6.25rem;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  box-sizing: border-box;
  margin: 1.4rem 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--iot-embed-accent) 24%, #e6e9ee);
  border-left: 4px solid var(--iot-embed-accent);
  border-radius: 12px;
  background: var(--iot-embed-tint);
  box-shadow: none;
}

.iot-embed-card__main:where(:scope, *) {
  flex: 1 1 300px;
  min-width: 0;
}

.iot-embed-card__title:where(:scope, *) {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #172033;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.iot-embed-card__title .iot-panel-icon:where(:scope, *) {
  display: inline-grid;
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 auto;
  place-items: center;
  color: var(--iot-embed-accent);
}

.iot-embed-card__title .iot-panel-icon svg:where(:scope, *) {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.iot-embed-card__prompt:where(:scope, *) {
  margin-top: 0.2rem;
  color: #5b6470;
  font-size: 0.88rem;
  line-height: 1.4;
}

.iot-embed-card__actions:where(:scope, *) {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.iot-embed-card__open:where(:scope, *) {
  flex: 0 0 auto;
  min-height: 2.75rem;
  border: 0;
  border-radius: 8px;
  padding: 0.6rem 1.2rem;
  background: color-mix(in srgb, var(--iot-embed-accent) 50%, black);
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.iot-embed-card__open:hover:where(:scope, *) {
  filter: brightness(0.93);
}

.iot-embed-card__newtab:where(:scope, *) {
  min-height: 2.5rem;
  box-sizing: border-box;
  border: 1px solid #e6e9ee;
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  color: #172033;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.iot-embed-card__newtab:hover:where(:scope, *) {
  background: #f7f9fc;
}

.iot-embed-card__newtab[aria-disabled="true"]:where(:scope, *) {
  color: #8b96a5;
  pointer-events: none;
}

.iot-embed-card__open:focus-visible:where(:scope, *),
.iot-embed-card__newtab:focus-visible:where(:scope, *),
.iot-embed-close:focus-visible:where(:scope, *),
.iot-embed-fullscreen:focus-visible:where(:scope, *) {
  outline: 3px solid rgba(59, 130, 246, 0.5);
  outline-offset: 2px;
}

.iot-embed-overlay:where(:scope, *) {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.4vmin;
  background: rgba(15, 23, 42, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.iot-embed-overlay[hidden]:where(:scope, *) {
  display: none;
}

.iot-embed-overlay.is-open:where(:scope, *) {
  opacity: 1;
  pointer-events: auto;
}

.iot-embed-modal:where(:scope, *) {
  display: flex;
  width: min(1400px, 97vw);
  height: min(90vh, 900px);
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
  transform: translateY(10px);
  transition: transform 0.18s ease;
}

.iot-embed-overlay.is-open .iot-embed-modal:where(:scope, *) {
  transform: none;
}

.iot-embed-bar:where(:scope, *) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.55rem 0.7rem 1.1rem;
  border-bottom: 1px solid #eef1f5;
}

.iot-embed-bar h2:where(:scope, *) {
  min-width: 0;
  margin: 0;
  color: #172033;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.iot-embed-actions:where(:scope, *) {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.2rem;
}

.iot-embed-fullscreen:where(:scope, *) {
  border-radius: 6px;
  padding: 0.3rem 0.5rem;
  color: #5b6470;
  font-size: 0.8rem;
  line-height: 1.2;
  text-decoration: none;
}

.iot-embed-close:where(:scope, *) {
  border: 0;
  border-radius: 6px;
  padding: 0.15rem 0.55rem;
  background: none;
  color: #5b6470;
  cursor: pointer;
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
}

.iot-embed-close:hover:where(:scope, *),
.iot-embed-fullscreen:hover:where(:scope, *) {
  background: #f1f4f8;
}

.iot-embed-frame-shell:where(:scope, *) {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
  background: #fff;
}

.iot-embed-frame:where(:scope, *) {
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
  min-height: 0;
  border: 0;
  background: #fff;
}

.iot-embed-frame-shell[data-state="loading"] .iot-embed-frame:where(:scope, *),
.iot-embed-frame-shell[data-state="error"] .iot-embed-frame:where(:scope, *) {
  opacity: 0.35;
}

.iot-embed-status:where(:scope, *) {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.9);
  color: #172033;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  pointer-events: none;
  text-align: center;
}

.iot-embed-status[hidden]:where(:scope, *) {
  display: none;
}

.iot-embed-status:where(:scope, *)::before {
  content: "";
  width: 2rem;
  height: 2rem;
  box-sizing: border-box;
  border: 3px solid #cbd5e1;
  border-top-color: var(--pc-main, #e67e22);
  border-radius: 50%;
  animation: iot-embed-spin-ad23a0cfe3f00e8d 0.8s linear infinite;
}

.iot-embed-frame-shell[data-state="error"] .iot-embed-status:where(:scope, *)::before {
  content: "!";
  display: grid;
  place-items: center;
  border-color: #c2410c;
  background: #fff4f0;
  color: #9a3412;
  font-weight: 800;
  animation: none;
}

.iot-embed-status__retry:where(:scope, *) {
  min-height: 2.4rem;
  border: 0;
  border-radius: 8px;
  padding: 0.55rem 0.95rem;
  background: color-mix(in srgb, var(--iot-embed-accent) 50%, black);
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  pointer-events: auto;
}

.iot-embed-status__retry:hover:where(:scope, *) {
  filter: brightness(0.93);
}

.iot-embed-status__retry:focus-visible:where(:scope, *) {
  outline: 3px solid rgba(59, 130, 246, 0.5);
  outline-offset: 2px;
}

@keyframes iot-embed-spin-ad23a0cfe3f00e8d {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .iot-embed-overlay:where(:scope, *),
  .iot-embed-modal:where(:scope, *) {
    transition: none;
  }

  .iot-embed-status:where(:scope, *)::before {
    animation: none;
  }
}

@media (max-width: 640px) {
  .iot-embed-overlay:where(:scope, *) {
    padding: 0;
  }

  .iot-embed-modal:where(:scope, *) {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }

  .iot-embed-card__actions:where(:scope, *) {
    width: 100%;
  }
}
/* EIC10-S CANONICAL SECTION END: interactive embed */

/* EIC10-S authoring vocabulary: shared presentation capabilities. Chapter
 * CSS may skin a component, but shared layout/overflow behavior uses these
 * names so a page never takes ownership of main.content, the page grid, or
 * the TOC rail. */
.iot-responsive-grid:where(:scope, *),
.iot-comparison-grid:where(:scope, *),
.iot-card-grid:where(:scope, *) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
  min-width: 0;
}

.iot-layered-diagram:where(:scope, *) {
  position: relative;
  width: 100%;
  min-width: 0;
}

.iot-layered-diagram__layer:where(:scope, *) {
  position: absolute;
  inset: 0;
}

.iot-table-scroll:where(:scope, *) {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.iot-table-scroll > table:where(:scope, *) {
  min-width: max-content;
  margin-bottom: 0;
}

.iot-figure-wide:where(:scope, *) {
  display: block;
  width: 100%;
  max-width: min(100%, 70rem);
  height: auto;
  margin-inline: auto;
}

@media (max-width: 767px) {
  :is(figure, .quarto-figure).iot-figure-scroll:where(:scope, *),
  :is(figure, .quarto-figure):has(.iot-figure-scroll):where(:scope, *) {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  :is(figure, .quarto-figure).iot-figure-scroll img:where(:scope, *),
  :is(figure, .quarto-figure):has(.iot-figure-scroll) img.iot-figure-scroll:where(:scope, *) {
    display: block;
    width: 45rem !important;
    max-width: none !important;
    height: auto;
  }
}

.iot-mobile-stack:where(:scope, *) {
  display: flex;
  gap: 1rem;
  min-width: 0;
}

@media (max-width: 767px) {
  .iot-mobile-stack:where(:scope, *) {
    flex-direction: column;
  }
}

/* Story strips pair generated narrative panels with accessible HTML captions.
 * The component is intentionally global: approved pilots can reuse the same
 * responsive and dark-mode contract without chapter-local presentation CSS. */
.story-strip:where(:scope, *) {
  --story-strip-surface: #f5f7fa;
  --story-strip-panel: #ffffff;
  --story-strip-border: #cbd5e1;
  --story-strip-ink: #1f2937;
  --story-strip-muted: #526173;
}

#quarto-document-content figure.story-strip:where(:scope, *) {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 1.25rem 0 1.5rem !important;
  padding: clamp(0.65rem, 1.5vw, 1rem) !important;
  border: 1px solid var(--story-strip-border) !important;
  border-radius: 0.75rem !important;
  background: var(--story-strip-surface) !important;
  color: var(--story-strip-ink);
}

/* A lone panel (misconception busters) must not sit in one narrow grid column:
   give it the full row so the art stays legible. Class-level fix, never per-page. */
.story-strip__panels:has(> .story-strip__panel:only-child):where(:scope, *) {
  grid-template-columns: minmax(0, 1fr);
  max-width: 640px;
  margin-inline: auto;
}

.story-strip__panels:where(:scope, *) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.65rem, 1.25vw, 0.9rem);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.story-strip__panel:where(:scope, *) {
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid var(--story-strip-border);
  border-radius: 0.6rem;
  background: var(--story-strip-panel);
}

.story-strip__panel img:where(:scope, *) {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 0 !important;
  border-radius: 0 !important;
  background: #e7edf2;
  box-shadow: none !important;
}

.story-strip__caption:where(:scope, *) {
  flex: 1;
  margin: 0;
  padding: 0.75rem 0.8rem 0.85rem;
  color: var(--story-strip-ink);
  font-size: 0.9rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.story-strip__number:where(:scope, *) {
  display: inline-grid;
  width: 1.45rem;
  height: 1.45rem;
  margin-right: 0.35rem;
  border-radius: 999px;
  place-items: center;
  background: var(--pc-main, #425b70);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
  vertical-align: 0.05rem;
}

#quarto-document-content figure.story-strip > figcaption:where(:scope, *) {
  margin-top: 0.8rem;
  color: var(--story-strip-muted) !important;
  font-size: 0.85rem;
  line-height: 1.45;
  text-align: center;
}

#quarto-document-content figure.story-strip > figcaption:where(:scope, *)::before {
  color: var(--story-strip-muted) !important;
}

.quarto-dark .story-strip:where(:scope, *),
html:where(:scope)[data-theme="dark"] .story-strip {
  --story-strip-surface: #17212d;
  --story-strip-panel: #202d3b;
  --story-strip-border: #4b6074;
  --story-strip-ink: #f1f5f9;
  --story-strip-muted: #c6d3df;
}

@media (min-width: 1280px) {
  .story-strip__panels:where(:scope, *) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .story-strip__panels:where(:scope, *) {
    grid-template-columns: minmax(0, 1fr);
  }

  .story-strip__caption:where(:scope, *) {
    font-size: 0.95rem;
  }
}

:root:where(:scope) { --iot-presentation-generation: 17; }

/* LABS-NAV-1: in-body invitation shared by legacy and prepared labs. */
.iot-lab-banner:where(:scope, *) {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  margin: 1.25rem 0;
  padding: 1rem 1.15rem;
  background: var(--flat-surface-muted, #f7f8fa);
  border: 0;
  border-left: 4px solid var(--lab-accent);
  border-radius: 10px;
  box-shadow: none;
}
.iot-lab-banner .iot-lab-banner__guide:where(:scope, *) { width: 56px; height: 56px; object-fit: contain; margin: 0; border: 0; box-shadow: none; }
.iot-lab-banner__text:where(:scope, *) { min-width: 0; }
.iot-lab-banner .iot-lab-banner__eyebrow:where(:scope, *) { margin: 0 0 .35rem; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ds-ink-soft); }
.iot-lab-banner .iot-lab-banner__title:where(:scope, *) { margin: 0 0 .35rem; font-size: 1.08rem; font-weight: 700; color: var(--ds-ink); }
.iot-lab-banner .iot-lab-banner__invite:where(:scope, *) { margin: 0; font-size: .95rem; color: var(--ds-ink-soft); }
.iot-lab-banner a.iot-lab-banner__open:where(:scope, *) { display: block; padding: .6rem 1rem; border: 0; border-radius: 8px; background: var(--ds-ink); color: white; text-decoration: none; text-align: center; white-space: nowrap; box-shadow: none; transition: filter .15s; }
.iot-lab-banner a.iot-lab-banner__open:hover:where(:scope, *) { filter: brightness(.85); }
.iot-lab-banner a.iot-lab-banner__open:focus-visible:where(:scope, *) { outline: 3px solid var(--lab-accent); outline-offset: 3px; }
@media (max-width: 639px) {
  .iot-lab-banner:where(:scope, *) { grid-template-columns: 56px minmax(0, 1fr); }
  .iot-lab-banner .iot-lab-banner__open:where(:scope, *) { grid-column: 1 / -1; width: 100%; box-sizing: border-box; }
}
@media print {
  .iot-lab-banner:where(:scope, *) { display: block; background: white; border: 1px solid #666; border-radius: 0; padding: .75rem; break-inside: avoid; }
  .iot-lab-banner .iot-lab-banner__guide:where(:scope, *), .iot-lab-banner .iot-lab-banner__open:where(:scope, *) { display: none; }
  .iot-lab-banner .iot-lab-banner__title:where(:scope, *)::after { content: " (" attr(data-lab-url) ")"; font-size: .85rem; font-weight: 400; }
}
/* Draft MQTT character appearances follow the learner feature switch. */
html:where(:scope)[data-feat-characters-asides="off"] [data-character-job] { display: none !important; }
.bex-chip[data-character-job]:where(:scope, *)::before,
.bex-card[data-character-job]:where(:scope, *)::before {
  content: "Teaching job: " attr(data-character-job);
  display: block;
  width: 100%;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #315b49;
}

/* P-023 Option A: learner figure text; purpose chips stay in the admin overlay. */
.iot-activity-purpose-label:where(:scope, *) { display: none; width: fit-content; padding: .1rem .5rem; border-radius: 999px; background: var(--pc-main, #138d75); color: #fff; font-size: .75rem; line-height: 1.4; font-weight: 650; }
.iot-figure-purpose-chips:where(:scope, *) { display: none; flex-wrap: wrap; gap: .4rem; margin: .35rem 0; }
#admin-bar .iot-figure-purpose-chips:where(:scope, *) { display: flex; }
#admin-bar .iot-activity-purpose-label:where(:scope, *) { display: inline-flex; }
#admin-bar .iot-activity-purpose-label--muted:where(:scope, *) { background: #eaf0f4; color: #526371; }
#admin-bar .iot-figure-purpose-audit:where(:scope, *) { margin: .5rem 0; padding: .55rem .7rem; border: 1px solid #d3dbe2; border-radius: .625rem; background: #f4f6f8; }
#admin-bar .iot-figure-purpose-audit strong:where(:scope, *) { display: block; font-size: .8rem; }
#admin-bar .iot-figure-purpose-weak:where(:scope, *) { margin: .2rem 0 0; color: #8a4300; font-size: .8rem; }
.iot-figure-text-toggle:where(:scope, *), .iot-figure-text-version:where(:scope, *) { display: none; }
html:where(:scope)[data-feat-activities="on"][data-feat-activities-media="on"] .iot-figure-text-toggle { display: inline-block; min-height: 44px; margin: .25rem 0 .6rem; padding: .45rem .75rem; border: 1px solid #cbd5e1; border-radius: .5rem; background: #fff; color: var(--pc-fg, #243746); font: inherit; font-size: .9rem; cursor: pointer; }
html:where(:scope)[data-feat-activities="on"][data-feat-activities-media="on"] .iot-figure-text-version:not([hidden]) { display: block; margin: .25rem 0 .75rem; padding: .6rem .75rem; border-radius: .625rem; background: #eaf0f4; color: var(--pc-fg, #243746); }
.iot-figure-text-toggle:focus-visible:where(:scope, *), .iot-analogy-limit-toggle:focus-visible:where(:scope, *) { outline: 3px solid #155eef; outline-offset: 2px; }
.iot-analogy-option-a[hidden]:where(:scope, *) { display: none !important; }
.iot-analogy-option-a:where(:scope, *) { margin: .8rem 0; padding: .55rem .7rem; border-radius: .625rem; background: #eaf0f4; color: var(--pc-fg, #243746); }
.iot-analogy-option-a p:where(:scope, *) { margin: .15rem 0 .4rem; }
.iot-analogy-limit-toggle:where(:scope, *) { min-height: 44px; padding: .4rem .7rem; border: 1px solid #cbd5e1; border-radius: .5rem; background: #fff; color: inherit; font: inherit; font-size: .9rem; cursor: pointer; }
.iot-analogy-limit-text:not([hidden]):where(:scope, *) { display: block; margin-top: .5rem; }
.iot-analogy-question:where(:scope, *) { margin: .7rem 0 .2rem !important; }
.iot-analogy-question a:where(:scope, *) { text-underline-offset: .15em; }

.iot-activity-panel[hidden]:where(:scope, *),
html:where(:scope):not([data-feat-activities="on"]) .iot-activity-panel[data-activity-arm="b"],
html:where(:scope):not([data-feat-activities-task-card="on"]) .iot-activity-panel[data-activity-arm="b"] { display: none !important; }
.iot-activity-panel:where(:scope, *) { margin: 1.5rem 0; padding: 1rem 1.25rem; border: 1px solid #bfd2dc; border-radius: 14px; background: #f3f8fa; color: #233b48; }
.iot-activity-panel h3:where(:scope, *) { margin: .15rem 0 .7rem; font-size: 1.15rem; }
.iot-activity-panel-eyebrow:where(:scope, *) { margin: 0; color: #315d70; font-size: .73rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.iot-activity-panel-strip:where(:scope, *) { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .8rem; }
.iot-activity-panel-strip span:where(:scope, *) { padding: .3rem .6rem; border-radius: 999px; background: #e0edf1; font-size: .8rem; }
.iot-activity-panel-choices:where(:scope, *) { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.iot-activity-panel-choices strong:where(:scope, *) { width: 100%; }
.iot-activity-panel-choices a:where(:scope, *) { display: inline-block; max-width: 100%; overflow-wrap: anywhere; padding: .4rem .65rem; border: 1px solid #a8c5d1; border-radius: 8px; background: white; }
.iot-activity-panel-lab-link:where(:scope, *) { margin: .6rem 0 0; }
.iot-activity-panel-lab-link a:where(:scope, *) { font-weight: 650; text-underline-offset: .15em; }
.iot-activity-panel-lab-fallback:where(:scope, *), .iot-activity-panel-handoff:where(:scope, *) { margin: .5rem 0 0; font-size: .9rem; }

/* Keyboard focus remains visible on the shared sign-in control even where
   component styles reset :focus-visible outlines. */
.platform-header__signin:focus:where(:scope, *),
.iotclass-auth-trigger:focus:where(:scope, *) {
  outline: 3px solid #155eef !important;
  outline-offset: 2px !important;
}

/* Chapter cards reset the global content heading rhythm, which otherwise
   creates a large empty band between each card's padding and its title. */
#quarto-document-content .iot-chapter-route > h2:where(:scope, *),
#quarto-document-content .iot-route-panel > h2:where(:scope, *),
#quarto-document-content .mqtt-support-help-line > h2:where(:scope, *),
#quarto-document-content .peer-pair-prompt > h2:where(:scope, *) {
  margin-top: 0 !important;
}

.peer-pair-prompt:where(:scope, *) { margin: 2rem 0; padding: 1.25rem; border: 1px solid #8296a6; border-radius: .75rem; background: #f5f8fa; }
.peer-pair-prompt[hidden]:where(:scope, *) { display: none; }
#quarto-document-content .peer-pair-prompt h2:where(:scope, *) { margin: 0 0 .75rem !important; }
.peer-pair-prompt label:where(:scope, *) { display: block; margin: .75rem 0 .25rem; font-weight: 600; }
.peer-pair-prompt textarea:where(:scope, *) { box-sizing: border-box; width: 100%; max-width: 48rem; padding: .65rem; font: inherit; }
.peer-pair-prompt fieldset:where(:scope, *) { margin: 1rem 0; padding: .75rem; }
.peer-pair-prompt fieldset label:where(:scope, *) { display: inline-flex; align-items: center; gap: .45rem; min-block-size: 44px; margin: .4rem 1rem .2rem 0; }
.peer-pair-prompt summary:where(:scope, *) { cursor: pointer; font-weight: 650; }
.peer-pair-prompt details:where(:scope, *) { margin-top: 1rem; }
.peer-pair-prompt .peer-solo-route:where(:scope, *) { margin-bottom: 1rem; }
.peer-pair-prompt :focus-visible:where(:scope, *) { outline: 3px solid #155eef; outline-offset: 3px; }
#quarto-document-content .peer-pair-prompt .peer-privacy-note:where(:scope, *) { position: relative; clear: both; margin: .75rem 0 0; padding: 0; border: 0 !important; border-left: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #465663; font-size: .9rem; }
@media (max-width: 480px) { .peer-pair-prompt:where(:scope, *) { padding: 1rem; } }

/* Character callouts (<iot-character>), moved from style/iot-character.css so chapters load one presentation sheet. */
/* Shared character asides use catalogue data and one job-aware frame. */
iot-character:where(:scope, *) {
  display: block;
  margin: 1rem 0 1.25rem;
  min-width: 0;
}

iot-character[hidden]:where(:scope, *) {
  display: none;
}

.iot-character__panel:where(:scope, *) {
  box-sizing: border-box;
  border: 1px solid rgba(26, 40, 54, 0.16);
  border-left: 4px solid #2e7d32;
  border-radius: 0.65rem;
  background: #fff;
  box-shadow: 0 1px 3px rgba(26, 40, 54, 0.08);
  padding: 0.9rem 1rem;
  overflow-wrap: anywhere;
}

.iot-character__panel--frame:where(:scope, *) {
  border: 0;
  border-left: 5px solid var(--color-secondary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--gray-100);
  box-shadow: none;
}

.iot-character__panel--model:where(:scope, *) {
  border: 1px solid var(--color-secondary);
  border-radius: var(--radius-md);
  box-shadow: none;
}

.iot-character__panel--move-on:where(:scope, *) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: .4rem;
  border: 2px dashed var(--color-secondary);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: none;
}

.iot-character__panel--move-on .iot-character__header:where(:scope, *) {
  margin: 0;
}

.iot-character__panel--move-on .iot-character__name:where(:scope, *) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.iot-character__panel--move-on .iot-character__portrait:where(:scope, *) {
  display: none;
}

.iot-character__panel--feedback:where(:scope, *) {
  border: 1px solid var(--color-warning, #d4700f);
  border-radius: var(--radius-md);
  background: var(--color-warning-bg, #fff8e8);
  box-shadow: none;
}

.iot-character__panel--feedback .iot-character__portrait:where(:scope, *) { display: none; }
.iot-character__panel--feedback .iot-character__header:where(:scope, *) { margin-bottom: .25rem; }
.iot-character__panel--feedback .iot-character__job:where(:scope, *) {
  background: var(--color-secondary);
  color: #fff;
}

.iot-character__header:where(:scope, *) {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.65rem;
}

.iot-character__panel--frame .iot-character__portrait:where(:scope, *),
.iot-character__panel--model .iot-character__portrait:where(:scope, *) { display: none; }
.iot-character__header > div:where(:scope, *) { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; }
.iot-character__panel--frame .iot-character__header:where(:scope, *),
.iot-character__panel--model .iot-character__header:where(:scope, *) { margin-bottom: .25rem; }
.iot-character__panel--move-on .iot-character__body:where(:scope, *) { display: contents; }
/* The chapter typography gives paragraphs a trailing margin; these compact
   jobs need the same inset below their last line as above the job row. */
#quarto-document-content .iot-character__panel--frame .iot-character__body > p:where(:scope, *),
#quarto-document-content .iot-character__panel--move-on .iot-character__body > p:where(:scope, *) { margin-block: 0 !important; }
.iot-character__action:where(:scope, *) { display: inline-flex; align-items: center; justify-content: center; justify-self: end; min-height: 2.75rem; padding: .35rem .8rem; border-radius: var(--radius-md); background: var(--color-primary); color: #fff !important; font-weight: 700; text-decoration: none; }
.iot-character__action:hover:where(:scope, *) { filter: brightness(.9); }
.iot-character__action:focus-visible:where(:scope, *), .iot-character__hide input:focus-visible:where(:scope, *) { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.iot-character__hide:where(:scope, *) { display: flex; align-items: center; gap: .5rem; width: fit-content; min-height: 2.75rem; margin: .8rem 0 .2rem; color: var(--ds-ink, #1d2a36); font-size: .875rem; cursor: pointer; }
.iot-character__hide + iot-character:where(:scope, *) { margin-top: .2rem; }
.iot-character__hide input:where(:scope, *) { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--color-secondary); }

.iot-character__portrait:where(:scope, *) {
  display: block;
  width: 4rem;
  height: 4rem;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
}

.iot-character__name:where(:scope, *) {
  display: block;
  color: #205d30;
  font-weight: 700;
  text-underline-offset: 0.15em;
}

.iot-character__job:where(:scope, *) {
  display: inline-block;
  margin-top: 0;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.iot-character__body > :first-child:where(:scope, *) {
  margin-top: 0;
}

.iot-character__body > :last-child:where(:scope, *) {
  margin-bottom: 0;
}

.iot-character__line:where(:scope, *) {
  font-style: italic;
}

.iot-character__note-title:where(:scope, *) {
  color: #205d30;
}

.iot-character__steps:where(:scope, *) {
  margin: 0.55rem 0 0;
  padding-left: 1.4rem;
}

.iot-character__steps li:where(:scope, *) {
  padding-left: 0.2rem;
}

.iot-character__steps li + li:where(:scope, *) {
  margin-top: 0.4rem;
}

@media (max-width: 520px) {
  .iot-character__panel:where(:scope, *) {
    padding: 0.8rem;
  }

  .iot-character__panel--move-on:where(:scope, *) {
    align-items: start;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .iot-character__panel--move-on .iot-character__action:where(:scope, *) { grid-column: 1 / -1; justify-self: start; }

  .iot-character__portrait:where(:scope, *) {
    width: 3.5rem;
    height: 3.5rem;
  }
}

/* Device voice is mounted asynchronously. Its closed details row occupies 32px.
   Reserve it from the feature prepaint stamp so repeated auth/feature refreshes
   cannot move the chapter title, Reading depth, or following prose. */
html:where(:scope)[data-feat-audio-read="on"] #title-block-header [data-audio-toolbar-slot] { min-block-size: 32px; }
#title-block-header [data-audio-toolbar-slot]:where(:scope, *) { display: flow-root; }
#title-block-header [data-audio-toolbar-slot] > .iot-narration-device:where(:scope, *) { margin: 0; }

/* Chapter feature styles, moved from \3c style is:global> blocks in Chapter.astro: Astro bundles
   those into /_astro/*.css once they pass its inline limit, which the CSS architecture gate refuses. */
.iot-audio-toolbar:where(:scope, *) {
  display: grid; justify-items: start; gap: .4rem; box-sizing: border-box;
  width: min(100%, 56rem); margin: .75rem 0 1rem; padding: .7rem .85rem;
  border: 1px solid #d5dce3; border-radius: 12px; background: #fff;
  box-shadow: 0 3px 12px rgba(20, 35, 50, .08); color: #2c3e50; font-size: .9rem;
}
.iot-audio-toolbar__info:where(:scope, *) { display: flex; flex-direction: column; gap: .1rem; color: #2c3e50; }
.iot-audio-toolbar__position:where(:scope, *) { color: #526477; font-size: .82rem; }
.iot-audio-toolbar__progress:where(:scope, *) { width: 100%; height: 6px; border-radius: 999px; background: #e5eef0; overflow: hidden; }
.iot-audio-toolbar__progress > span:where(:scope, *) { display: block; width: 0; height: 100%; background: #0b6657; }
.iot-audio-toolbar .iot-audio-control--main:first-child:where(:scope, *) {
  width: 44px; min-width: 44px; height: 44px; padding: 0; font-size: 0;
  display: inline-grid; place-items: center;
}
.iot-audio-toolbar .iot-audio-control--main:first-child:where(:scope, *)::before {
  content: ''; display: block; width: 12px; height: 14px; background: #fff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
#title-block-header .iot-audio-toolbar .iot-audio-control--main:first-child:where(:scope, *)::before { background: #fff !important; }
.iot-audio-toolbar .iot-audio-control--main:first-child[aria-label="Pause read-aloud"]:where(:scope, *)::before {
  clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0);
}
.iot-audio-toolbar__controls:where(:scope, *) { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.iot-audio-device-credit:where(:scope, *) { margin: 0; color: #526477; font-size: .82rem; background: transparent; border: 0; box-shadow: none; }
.iot-audio-speed-label:where(:scope, *) { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; color: #334b5e; font-weight: 600; }
.iot-audio-speed:where(:scope, *) { min-height: 44px; border: 1px solid #8799a8; border-radius: 8px; background: #f4f7f8; color: #203443; padding: .2rem .55rem; }
.iot-audio-part-controls:where(:scope, *) {
  display: inline-flex; position: absolute; inset-inline-end: 0; gap: .2rem;
  padding: 2px; border: 1px solid #d5dce3; border-radius: 999px;
  background: #fff; box-shadow: 0 3px 12px rgba(20, 35, 50, .12);
  opacity: 0; transition: opacity .15s ease; z-index: 2;
}
:is(p,h1,h2,h3,h4,h5,h6,li,blockquote,table):hover + .iot-audio-part-controls:where(:scope, *),
p:hover > .iot-audio-part-controls:where(:scope, *), p:focus-within > .iot-audio-part-controls:where(:scope, *),
.iot-audio-part-controls:hover:where(:scope, *), .iot-audio-part-controls:focus-within:where(:scope, *),
.iot-audio-playing + .iot-audio-part-controls:where(:scope, *) { opacity: 1; }
#quarto-document-content p:has(> .iot-audio-part-controls):where(:scope, *) { position: relative; padding-inline-end: 3rem; }
.iot-audio-control:where(:scope, *) {
  min-width: 44px; min-height: 44px; border: 1px solid #9cabb8; border-radius: 999px;
  background: #f2f5f7; color: #0b6657; cursor: pointer; font: inherit;
}
.iot-audio-control:hover:where(:scope, *) { border-color: #0b6657; background: #e7f4f0; }
.iot-audio-control--main:where(:scope, *) { min-width: 5.5rem; padding: .45rem 1rem; border-color: #0b6657; background: #0b6657; color: #fff; font-weight: 700; }
.iot-audio-control--main:hover:where(:scope, *) { background: #084e43; color: #fff; }
.iot-audio-control--stop:where(:scope, *) { border-color: #0b6657; background: #fff; color: #0b6657; }
.iot-audio-control--stop:hover:where(:scope, *) { background: #e7f4f0; color: #0b6657; }
#title-block-header .iot-audio-control--main:where(:scope, *) { border: 1px solid #0b6657 !important; background: #0b6657 !important; color: #fff !important; }
#title-block-header .iot-audio-control--main:hover:where(:scope, *) { background: #084e43 !important; }
#title-block-header .iot-audio-control--stop:where(:scope, *) { border-color: #0b6657 !important; background: #fff !important; color: #0b6657 !important; }
#title-block-header .iot-audio-speed:where(:scope, *) { border: 1px solid #8799a8 !important; background: #f4f7f8 !important; color: #203443 !important; }
.iot-audio-part-controls .iot-audio-control:where(:scope, *) { min-width: 44px; min-height: 44px; border: 0; background: transparent; }
.iot-audio-part-controls .iot-audio-control:where(:scope, *) { width: 44px; height: 44px; padding: 0; font-size: .9rem; border-radius: 50%; }
.iot-audio-part-controls:has(+ .iot-audio-transcript):where(:scope, *) { position: static; opacity: 1; margin: .35rem 0; }
.iot-audio-part-controls .iot-audio-control:hover:where(:scope, *) { background: #e7f4f0; }
.iot-audio-control[hidden]:where(:scope, *) { display: none !important; }
.iot-audio-speed:where(:scope, *) { min-height: 44px; padding-inline: .5rem; }
.iot-audio-control:focus-visible:where(:scope, *), .iot-audio-speed:focus-visible:where(:scope, *) { outline: 3px solid #1865f2; outline-offset: 2px; }
.iot-audio-playing:where(:scope, *) { background-color: #e7f4f0; outline: 2px solid #77bbaa; outline-offset: 2px; }
@media (hover: none) { .iot-audio-part-controls:where(:scope, *) { opacity: 1; } }
@media (max-width: 900px) {
  .iot-audio-part-controls:where(:scope, *) { position: relative; float: right; margin: 0 0 .25rem .45rem; z-index: 4; }
  #quarto-document-content p:has(> .iot-audio-part-controls):where(:scope, *) { padding-inline-end: 0; }
}
@media (prefers-reduced-motion: reduce) { .iot-audio-part-controls:where(:scope, *) { transition: none; } }
/* P-002 recorded narration: in-flow article player and quiet per-part tools. */
.iot-narration-player:where(:scope, *) {
  box-sizing: border-box; margin: 1rem 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .9rem;
  padding: .5rem 1rem; background: var(--flat-surface); color: var(--color-primary);
  border: 1px solid var(--gray-300); border-radius: var(--radius-md); font-size: .85rem;
}
.iot-narration-player__controls:where(:scope, *), .iot-narration-player__settings:where(:scope, *), .iot-narration-player__identity:where(:scope, *), .iot-narration-player__status:where(:scope, *) { display: flex; align-items: center; gap: .45rem; }
.iot-narration-player__status:where(:scope, *) { flex: none; }
.iot-narration-player__identity:where(:scope, *) { flex: 1 1 15rem; min-width: 0; }
.iot-narration-player__identity img:where(:scope, *) { flex: none; width: 2.75rem; height: 2.75rem; object-fit: contain; border-radius: var(--radius-full); background: var(--gray-100); }
.iot-narration-player__copy:where(:scope, *) { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.iot-narration-player__copy strong:where(:scope, *) { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iot-narration-player__meta:where(:scope, *), .iot-narration-player__disclosure:where(:scope, *) { color: var(--gray-600); font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iot-narration-player__preview:where(:scope, *) { flex: none; padding: .15rem .5rem; border-radius: var(--radius-full); background: var(--color-accent); color: white; font-size: .72rem; font-weight: 700; }
.iot-narration-button:where(:scope, *) { min-height: 44px; border: 1px solid var(--gray-300); border-radius: var(--radius-md); background: var(--gray-50); color: var(--color-primary); cursor: pointer; font: inherit; display: inline-flex; align-items: center; justify-content: center; }
.iot-narration-button svg:where(:scope, *) { width: 20px; height: 20px; flex: none; }
.iot-narration-button--settings:where(:scope, *) { display: none; }
.iot-narration-button:hover:where(:scope, *) { border-color: var(--color-secondary); background: var(--gray-100); }
.iot-narration-button--round:where(:scope, *) { width: 44px; border-radius: var(--radius-full); font-size: 1rem; }
.iot-narration-button--play:where(:scope, *) { width: 44px; border-radius: var(--radius-full); background: var(--color-secondary); color: white; border-color: var(--color-secondary); font-size: 1rem; }
.iot-narration-button--play:hover:where(:scope, *) { background: var(--color-secondary); color: white; filter: brightness(.9); }
.iot-narration-player__settings:where(:scope, *) { flex-wrap: wrap; }
.iot-narration-player__settings label:where(:scope, *) { display: inline-flex; align-items: center; gap: .25rem; color: var(--gray-600); font-size: .8rem; }
.iot-narration-player__settings select:where(:scope, *) { min-height: 44px; max-width: 9rem; border: 1px solid var(--gray-300); border-radius: var(--radius-md); background: var(--gray-100); color: var(--color-primary); padding: .2rem .4rem; }
.iot-narration-player__follow input:where(:scope, *) { width: 18px; height: 18px; accent-color: var(--color-secondary); }
.iot-narration-player__progress:where(:scope, *) { order: 10; flex: 1 1 100%; height: 6px; border-radius: var(--radius-full); overflow: hidden; background: var(--gray-100); }
.iot-narration-player__progress span:where(:scope, *) { display: block; height: 100%; background: var(--color-secondary); }
.iot-narration-player__transcript:where(:scope, *) { color: var(--gray-600); font-size: .75rem; }
.iot-narration-player__transcript summary:where(:scope, *) { cursor: pointer; }
.iot-narration-player__transcript p:where(:scope, *) { max-height: 6rem; overflow: auto; margin: .25rem 0; }
.iot-narration-player__unavailable:where(:scope, *) { color: var(--color-accent); font-size: .75rem; }
.iot-narration-player__unavailable:empty:where(:scope, *) { display: none; }
.iot-narration-part-controls:where(:scope, *) { position: absolute; inset-inline-end: .2rem; display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--gray-300); border-radius: var(--radius-full); background: var(--flat-surface); box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; z-index: 4; transition: opacity .15s; }
.iot-narration-part-controls .iot-narration-button:where(:scope, *) { min-width: 44px; width: 44px; min-height: 44px; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--color-secondary); }
.iot-narration-part-controls .iot-narration-button:hover:where(:scope, *) { background: var(--gray-100); }
:is(h2,h3,h4,h5,h6,p,li,blockquote,table):hover + .iot-narration-part-controls:where(:scope, *),
:is(p,li):hover > .iot-narration-part-controls:where(:scope, *),
.iot-narration-part-controls:hover:where(:scope, *), .iot-narration-part-controls:focus-within:where(:scope, *),
.iot-narration-playing + .iot-narration-part-controls:where(:scope, *) { opacity: 1; pointer-events: auto; }
#quarto-document-content :is(p,li):has(> .iot-narration-part-controls):where(:scope, *), #quarto-document-content section:has(> .iot-narration-part-controls):where(:scope, *) { position: relative; }
.iot-narration-playing:where(:scope, *) { background: color-mix(in srgb, var(--color-secondary) 12%, transparent); border-radius: var(--radius-md); }
.iot-narration-device:where(:scope, *) { margin: .3rem 0; color: var(--gray-600); font-size: .8rem; }
.iot-narration-device summary:where(:scope, *) { cursor: pointer; }
.iot-narration-device p:where(:scope, *) { margin: .3rem 0; }
.iot-narration-device .iot-narration-button:where(:scope, *) { padding: .25rem .5rem; margin: .15rem; }
.iot-narration-button:focus-visible:where(:scope, *), .iot-narration-player :focus-visible:where(:scope, *), .iot-narration-device :focus-visible:where(:scope, *) { outline: 3px solid var(--color-secondary); outline-offset: 2px; }
@media (hover: none) { .iot-narration-part-controls:where(:scope, *) { opacity: 1; pointer-events: auto; } .iot-narration-part-controls .iot-narration-button:not(:first-child):where(:scope, *) { display: none; } .iot-narration-playing + .iot-narration-part-controls .iot-narration-button:where(:scope, *) { display: inline-block; } }
@media (max-width: 640px) {
  .iot-narration-player:where(:scope, *) { gap: .25rem .4rem; padding: .4rem .6rem; }
  .iot-narration-player__controls:where(:scope, *) { order: 1; gap: .15rem; }
  .iot-narration-player__identity:where(:scope, *) { order: 2; flex: 1 1 0; min-width: 0; gap: .25rem; }
  .iot-narration-player__identity img:where(:scope, *) { width: 2rem; height: 2rem; }
  .iot-narration-player__copy:where(:scope, *) { flex: 1 1 0; }
  .iot-narration-player__copy strong:where(:scope, *) { white-space: nowrap; }
  .iot-narration-player__meta:where(:scope, *) { display: none; }
  .iot-narration-button--settings:where(:scope, *) { order: 3; display: inline-flex; width: 44px; flex: none; }
  .iot-narration-player__progress:where(:scope, *) { order: 4; flex: 1 1 100%; margin-top: .15rem; }
  .iot-narration-player__status:where(:scope, *) { order: 5; flex: 1 1 100%; justify-content: space-between; min-width: 0; gap: .3rem; white-space: nowrap; }
  .iot-narration-player__preview:where(:scope, *) { padding: .1rem .35rem; font-size: .65rem; }
  .iot-narration-player__disclosure:where(:scope, *) { font-size: .65rem; overflow: visible; }
  .iot-narration-player__settings:where(:scope, *) { display: none; order: 6; flex: 1 1 100%; padding: 1rem; flex-wrap: wrap; background: var(--flat-surface); border: 1px solid var(--gray-300); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
  .iot-narration-player__settings[data-open="true"]:where(:scope, *) { display: flex; }
  .iot-narration-player__settings label:where(:scope, *) { min-height: 44px; }
  .iot-narration-player__transcript:where(:scope, *) { flex: 1 1 100%; }
  .iot-narration-player__unavailable:where(:scope, *) { order: 6; flex: 1 1 100%; }
  .iot-narration-part-controls:where(:scope, *) { position: relative; float: right; margin: -.5rem 0 .25rem .25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .iot-narration-part-controls:where(:scope, *),
  .iot-narration-device:where(:scope, *),
  .iot-narration-device *:where(:scope, *) { animation: none !important; transition: none !important; }
}
.mqtt-support-help-line:where(:scope, *) {
  display: none;
  margin: 0.75rem 0;
  padding: 0.7rem 1.15rem;
  border: 1px solid var(--pc-border, #cbd5e1);
  border-left: 4px solid var(--pc-main, #1b5e20);
  border-radius: 0.65rem;
  background: #f7fafc;
  overflow-wrap: anywhere;
}
html:where(:scope)[data-feat-support-help-routes="on"] .mqtt-support-help-line { display: block; }
#quarto-document-content .mqtt-support-help-line h2:where(:scope, *) { margin: 0 0 0.4rem !important; font-size: 1.2rem; }
.mqtt-support-help-line p:where(:scope, *) { margin: 0.4rem 0; }
.mqtt-support-help-line ul:where(:scope, *) { display: block; margin: 0.65rem 0; padding-left: 1.25rem; }
.mqtt-support-help-line li + li:where(:scope, *) { margin-top: 0.35rem; }
.mqtt-support-help-line a:where(:scope, *) { color: var(--ds-accent-link); text-underline-offset: 0.15em; }
.mqtt-support-help-line a:focus-visible:where(:scope, *) { outline: 3px solid #155eef; outline-offset: 3px; border-radius: 2px; }
.mqtt-support-help-line .mqtt-support-presence:where(:scope, *) { color: #475569; font-size: 0.92rem; }
.iot-chapter-route:where(:scope, *) { display: none; margin: 1.2rem 0; padding: 1rem 1.15rem; border: 1px solid #a4c5ac; border-left: 4px solid #287848; border-radius: .65rem; background: #f6fbf7; }
.iot-chapter-route h2:where(:scope, *) { margin: 0 0 .35rem; font-size: 1.15rem; }
.iot-chapter-route p:where(:scope, *) { margin: .35rem 0; }
.iot-chapter-route a:where(:scope, *) { text-underline-offset: .16em; }
.iot-chapter-route a:focus-visible:where(:scope, *) { outline: 3px solid #155eef; outline-offset: 3px; }
.iot-chapter-route[data-ready]:where(:scope, *) { display: block; }
html:where(:scope)[data-feat-route-suggested="on"] .iot-chapter-route[data-ready] { display: none; }
.iot-chapter-route [data-route-transition]:where(:scope, *) { display: none; }
html:where(:scope)[data-feat-route="on"][data-feat-route-signposts-transitions="on"] .iot-chapter-route[data-ready] [data-route-transition] { display: block; }
@media (max-width: 500px) { .iot-chapter-route:where(:scope, *) { padding: .8rem; } }
.iot-route-panel:where(:scope, *) { display: none; margin: 1.2rem 0; padding: 1rem 1.15rem; border: 1px solid #9dbbc7; border-left: 4px solid #17647a; border-radius: .65rem; background: #f5fafc; overflow-wrap: anywhere; }
.iot-route-panel[data-ready]:where(:scope, *) { display: block; }
.iot-route-panel:not([data-expanded]):where(:scope, *) { padding: .55rem .75rem; }
.iot-route-panel-summary:where(:scope, *) { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.iot-route-panel-summary-text:where(:scope, *) { min-width: 0; }
.iot-route-panel [data-route-details][hidden]:where(:scope, *) { display: none; }
.iot-route-panel [data-route-details]:where(:scope, *) { margin-top: .75rem; }
.iot-route-panel h2:where(:scope, *) { margin: 0 0 .4rem; font-size: 1.15rem; }
.iot-route-panel p:where(:scope, *) { margin: .4rem 0; }
.iot-route-panel ol:where(:scope, *) { margin: .75rem 0; padding-left: 1.6rem; }
.iot-route-panel li:where(:scope, *) { margin: .4rem 0; }
.iot-route-panel [aria-current="step"]:where(:scope, *) { font-weight: 700; }
.iot-route-panel small:where(:scope, *) { color: #405665; }
.iot-route-panel a:where(:scope, *) { text-underline-offset: .16em; }
.iot-route-panel button:where(:scope, *) { min-height: 44px; margin: .25rem 0; padding: .4rem .7rem; border: 1px solid #17647a; border-radius: .35rem; background: #fff; color: #124b5b; font: inherit; cursor: pointer; }
.iot-route-panel-summary button:where(:scope, *) { margin: 0; }
.iot-route-panel :focus-visible:where(:scope, *) { outline: 3px solid #155eef; outline-offset: 3px; }
.iot-route-panel progress:where(:scope, *) { width: 100%; max-width: 24rem; height: .75rem; accent-color: #17647a; }
#quarto-document-content .iot-route-panel-summary h2:where(:scope, *) { margin: 0 !important; padding: 0 !important; font-size: 1rem !important; line-height: 1.25 !important; }
#quarto-document-content .iot-route-panel-summary p:where(:scope, *) { margin: .12rem 0 0 !important; font-size: .85rem; line-height: 1.25; }
@media (max-width: 500px) { .iot-route-panel[data-expanded]:where(:scope, *) { padding: .8rem; } }

/* P-021 Option A: content is in the first response, so neither component shifts the chapter after paint. */
.iot-route-start:where(:scope, *) { display: none; margin: 1rem 0 1.25rem; padding: .85rem 1rem; border: 1px solid var(--pc-border, #a4c5ac); border-radius: .65rem; background: var(--pc-light, #f6fbf7); color: var(--pc-fg, #243746); }
.iot-route-start p:where(:scope, *) { margin: 0; line-height: 1.55; }
.iot-route-start strong:where(:scope, *) { font-weight: 750; }
.iot-route-start span:where(:scope, *) { white-space: normal; }
html:where(:scope)[data-feat-route="on"][data-feat-route-start-here="on"] .iot-route-start:not([hidden]) { display: block; }
html:where(:scope)[data-feat-route-suggested="on"] .iot-route-start { display: none !important; }
.iot-route-signpost:where(:scope, *) { display: none; margin: .45rem 0 1rem; padding: .35rem 0 .35rem .8rem; border-inline-start: 3px solid var(--pc-main, #2e7d32); color: var(--pc-fg, #243746); line-height: 1.5; }
.iot-route-signpost strong:where(:scope, *) { font-weight: 750; }
.iot-route-signpost span:where(:scope, *) { color: #526371; white-space: nowrap; }
html:where(:scope)[data-feat-route="on"][data-feat-route-signposts-transitions="on"]:not([data-feat-route-suggested="on"]) .iot-route-signpost { display: block; }

/* P-017 Option A: one tinted line in the same footer as the feedback control. */
.mqtt-chapter-help-footer:where(:scope, *) { margin: 1rem 0; }
.mqtt-chapter-help-footer .mqtt-support-help-line:where(:scope, *) { display: none; margin: 0 0 .65rem; padding: .55rem .8rem; border: 0; border-radius: .35rem; background: var(--pc-light, #f6fbf7); color: var(--pc-fg, #243746); font-size: .92rem; line-height: 1.5; }
html:where(:scope)[data-feat-support-help-routes="on"] .mqtt-chapter-help-footer .mqtt-support-help-line:not([hidden]) { display: block; }
.mqtt-chapter-help-footer .mqtt-support-help-line a:where(:scope, *) { color: var(--ds-accent-link); text-underline-offset: .14em; }
@media (max-width: 500px) { .iot-route-start:where(:scope, *) { padding: .75rem .85rem; } .iot-route-signpost span:where(:scope, *) { white-space: normal; } }

/* REPAIR-150B: Keep the final chapter shell cascade formerly supplied by the
   cached critical sheet. Its other declarations already win in this file. */
body:where(:scope, *) {
  color: var(--ds-ink) !important;
  overflow-x: hidden;
}
#quarto-content:where(:scope, *) {
  padding: 2rem 1rem 6rem;
  gap: 0.5rem;
}
.iot-honest-badge-note:where(:scope, *) {
  display: block;
  margin-top: 0.35rem;
  color: var(--color-text-muted, #4b5563);
  font-size: 0.82rem;
  line-height: 1.4;
}
.iot-section-progress-toggle .iot-honest-progress-tooltip:where(:scope, *) {
  position: absolute;
  z-index: 1081;
  inset-inline-end: 0;
  inset-block-end: calc(100% + .5rem);
  width: min(17rem, calc(100vw - 2rem));
  padding: .55rem .7rem;
  border-radius: var(--ds-radius-sm, .4rem);
  background: var(--ds-ink, #243746);
  color: #fff;
  font: 600 .8rem/1.4 var(--ds-font, inherit);
  text-align: start;
  white-space: normal;
  box-shadow: 0 6px 18px rgba(15, 23, 33, .28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.iot-section-progress-toggle:hover .iot-honest-progress-tooltip:where(:scope, *),
.iot-section-progress-toggle:focus-visible .iot-honest-progress-tooltip:where(:scope, *) {
  opacity: 1;
  visibility: visible;
}
.iot-section-progress-toggle:has(.iot-honest-progress-tooltip):where(:scope, *)::after {
  display: none;
}
/* Optional chapter explanation controls keep the original chapter available. */
/* The server renders optional section chrome at its final position. Match the
   head feature stamp before its controller binds, including the parent gate. */
html:where(:scope):not([data-feat-activities="on"][data-feat-activities-explain="on"][data-feat-chapter-signposts="on"]) .iot-section-signpost { display: none !important; }
html:where(:scope):not([data-feat-activities="on"][data-feat-activities-explain="on"][data-feat-chapter-chunk-view="on"]) .iot-chunk-controls { display: none !important; }
.iot-section-signpost:where(:scope, *) {
  border-inline-start: 3px solid var(--pc-main, #16a085);
  background: #f3f8f7;
  color: #243746;
  padding: .55rem .8rem;
  margin: .6rem 0 1rem;
  line-height: 1.5;
}
.iot-chunk-controls:where(:scope, *) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .7rem;
  margin: 1rem 0;
  border: 1px solid #b8c9ce;
  border-radius: .5rem;
  background: #f6fafb;
}
.iot-chunk-controls button:where(:scope, *) {
  min-height: 44px;
  border: 1px solid #526b76;
  border-radius: .35rem;
  background: #fff;
  color: #243746;
  padding: .45rem .7rem;
  cursor: pointer;
}
.iot-chunk-controls button:focus-visible:where(:scope, *) { outline: 3px solid #e67e22; outline-offset: 2px; }
.iot-chunk-controls button:disabled:where(:scope, *) { opacity: .5; cursor: default; }
.iot-chunk-controls [role="status"]:where(:scope, *) { padding: 0 .35rem; }
.iot-section-signpost[hidden]:where(:scope, *), .iot-chunk-controls[hidden]:where(:scope, *),
#quarto-document-content section.level2[hidden]:where(:scope, *) { display: none !important; }

/* MQTT access toolkit routes; the runtime only inserts these when enabled. */
.access-format:where(:scope, *), .access-response:where(:scope, *), .access-light-route:where(:scope, *) {
  max-width: 920px;
  margin: 1rem 0;
  padding: .8rem 1rem;
  border: 1px solid #9dbbc7;
  border-left: 4px solid #167d80;
  border-radius: .5rem;
  background: #f6fafb;
  color: #173d53;
  overflow-wrap: anywhere;
}
.access-format summary:where(:scope, *), .access-response summary:where(:scope, *), .access-sketch summary:where(:scope, *) { cursor: pointer; font-weight: 700; }
.access-table-scroll:where(:scope, *) { max-width: 100%; overflow-x: auto; }
#quarto-document-content .access-format table:where(:scope, *) { display: table; width: max(100%, 550px) !important; max-width: none !important; min-width: 550px; overflow: visible; overflow-wrap: normal; border-collapse: collapse; margin-top: .75rem; }
.access-format caption:where(:scope, *) { text-align: left; font-weight: 700; margin-bottom: .4rem; }
.access-scroll-hint:where(:scope, *) { display: none; }
.access-format th:where(:scope, *), .access-format td:where(:scope, *) { padding: .45rem .6rem; border: 1px solid #a8bdc5; text-align: left; vertical-align: top; }
.access-response label:where(:scope, *) { display: block; font-weight: 650; }
.access-choice:where(:scope, *) { min-width: 0; max-width: 100%; margin: .75rem 0; padding: .6rem; border: 1px solid #a8bdc5; border-radius: .35rem; }
.access-choice legend:where(:scope, *) { font-weight: 700; }
.access-choice label:where(:scope, *) { display: flex; align-items: flex-start; gap: .5rem; margin: .5rem 0; font-weight: 400; }
.access-choice input:where(:scope, *) { flex: 0 0 auto; margin-top: .35rem; }
.access-response textarea:where(:scope, *) { display: block; box-sizing: border-box; width: 100%; margin: .4rem 0; padding: .6rem; font: inherit; }
.access-response button:where(:scope, *), .access-light-route button:where(:scope, *) { min-height: 44px; margin: .35rem .4rem .35rem 0; padding: .45rem .7rem; border: 1px solid #17647a; border-radius: .35rem; background: #fff; color: #124b5b; font: inherit; cursor: pointer; }
.access-response :focus-visible:where(:scope, *), .access-light-route :focus-visible:where(:scope, *), .access-format :focus-visible:where(:scope, *) { outline: 3px solid #155eef; outline-offset: 3px; }
.access-response canvas:where(:scope, *) { display: block; width: min(100%, 560px); height: auto; background: #fff; border: 1px solid #637e8a; touch-action: none; }
.access-response audio:where(:scope, *) { display: block; max-width: 100%; }
.access-pending:where(:scope, *) { font-weight: 650; }
.access-typing .ikc-options:where(:scope, *), .access-typing .ikc-instruction:where(:scope, *), .access-typing .ikc-submit-btn:where(:scope, *) { display: none !important; }
.access-typed-response:where(:scope, *) { margin: .6rem 0 1rem; }
.access-typed-response label:where(:scope, *) { display: block; font-weight: 650; }
.access-typed-response input:where(:scope, *) { display: block; box-sizing: border-box; width: 100%; min-height: 2.75rem; margin: .4rem 0; padding: .5rem .65rem; border: 1px solid var(--gray-300); border-radius: var(--radius-md); font: inherit; }
.access-typed-response button:where(:scope, *) { min-height: 2.75rem; margin: .3rem .4rem .3rem 0; padding: .45rem .75rem; border: 1px solid var(--color-secondary); border-radius: var(--radius-md); background: #fff; color: var(--color-primary); font: inherit; cursor: pointer; }
.access-typed-response :focus-visible:where(:scope, *) { outline: 3px solid var(--color-secondary); outline-offset: 2px; }
.access-light-active .content figure img:where(:scope, *), .access-light-active .content video:where(:scope, *), .access-light-active .content iframe:where(:scope, *), .access-light-active .content iot-animation:where(:scope, *), .access-light-active .content iot-embed:where(:scope, *) { display: none !important; }
.access-light-active .content figure:where(:scope, *)::before { content: 'Media paused to save data. Turn off Save data on a weak connection in Ways to work to view it.'; display: block; font-size: .9rem; }
@media (max-width: 500px) { .access-format:where(:scope, *), .access-response:where(:scope, *), .access-light-route:where(:scope, *) { padding: .7rem; } .access-scroll-hint:where(:scope, *) { display: block; font-size: .9rem; } }

/* Required hardware check. The prepaint attributes hide the step before JS runs. */
html:where(:scope)[data-feat-hardware="on"][data-feat-hardware-safety="on"] .hardware-power-step:not([data-safety-complete]) { display: none; }
iot-hardware-safety:where(:scope, *) { display: block; }
.hardware-safety-check:where(:scope, *) { margin: 1.2rem 0; padding: 1rem 1.2rem; border: 2px solid #b85f1b; border-radius: .7rem; background: #fff8ec; color: #263747; }
.hardware-safety-check h3:where(:scope, *) { margin: 0 0 .5rem; font-size: 1.2rem; }
.hardware-safety-check p:where(:scope, *) { margin: .4rem 0 .8rem; }
.hardware-safety-check fieldset:where(:scope, *) { margin: 0; padding: 0; border: 0; }
.hardware-safety-check legend:where(:scope, *) { margin-bottom: .5rem; font-weight: 700; }
.hardware-safety-check label:where(:scope, *) { display: flex; align-items: flex-start; gap: .65rem; margin: .4rem 0; padding: .35rem 0; }
.hardware-safety-check input:where(:scope, *) { width: 1.3rem; height: 1.3rem; margin: .1rem 0 0; flex: none; accent-color: #17647a; }
.hardware-safety-check button:where(:scope, *) { min-height: 44px; margin-top: .65rem; padding: .5rem .8rem; border: 1px solid #17647a; border-radius: .4rem; background: #17647a; color: white; font: inherit; cursor: pointer; }
#quarto-document-content .hardware-safety-check button:disabled:where(:scope, *) { border-color: #c9d1d9; background: #f4f6f8; color: #34424e; cursor: not-allowed; }
.hardware-safety-check :focus-visible:where(:scope, *) { outline: 3px solid #155eef; outline-offset: 3px; }
.hardware-safety-character:where(:scope, *) { margin: .8rem 0; padding: .8rem; border: 1px solid #17647a; border-radius: .5rem; background: #eef8fa; color: #263747; overflow-wrap: anywhere; }
.hardware-safety-character button:where(:scope, *) { display: block; width: 100%; text-align: left; white-space: normal; }
@media (max-width: 500px) { .hardware-safety-check:where(:scope, *) { padding: .8rem; } }
/* P-014 access toolkit: notification choices and admin repair log. */
.access-toolkit:where(:scope, *) { box-sizing: border-box; max-width: 52rem; margin: 1rem 0 1.5rem; padding: 1rem; border: 1px solid #abc5bb; border-left: .3rem solid #26755c; border-radius: .6rem; background: #f7fbf9; color: #173d32; overflow-wrap: anywhere; }
.access-toolkit h2:where(:scope, *) { margin: 0 0 .5rem; font-size: 1.35rem; }
.access-toolkit summary:where(:scope, *) { font-size: 1.2rem; font-weight: 700; cursor: pointer; }
.access-toolkit h3:where(:scope, *) { margin: 0 0 .4rem; font-size: 1.05rem; }
.access-toolkit p:where(:scope, *) { margin: .4rem 0 .8rem; }
.access-toolkit__form:where(:scope, *) { display: grid; gap: .75rem; }
.access-toolkit__field:where(:scope, *) { display: grid; gap: .3rem; margin: .6rem 0; max-width: 36rem; }
.access-toolkit__field input:where(:scope, *), .access-toolkit__field textarea:where(:scope, *), .access-toolkit__field select:where(:scope, *) { box-sizing: border-box; width: 100%; max-width: 100%; min-height: 2.75rem; padding: .5rem; border: 1px solid #55766a; border-radius: .35rem; background: #fff; color: #173d32; font: inherit; }
.access-toolkit__field textarea:where(:scope, *) { min-height: 5rem; resize: vertical; }
.access-toolkit button:where(:scope, *) { min-height: 2.75rem; padding: .5rem .85rem; border: 1px solid #27644f; border-radius: .35rem; background: #fff; color: #164d39; font: inherit; cursor: pointer; }
.access-toolkit :focus-visible:where(:scope, *) { outline: 3px solid #155eef; outline-offset: 3px; }
.access-toolkit__records:where(:scope, *) { padding-left: 1.5rem; }
.access-toolkit__records li:where(:scope, *) { margin: 1rem 0; padding: .75rem; border: 1px solid #c1d5cd; border-radius: .35rem; }
.access-toolkit__status:where(:scope, *) { color: #873700; font-weight: 600; }
@media (max-width: 480px) { .access-toolkit:where(:scope, *) { padding: .75rem; } .access-toolkit__records:where(:scope, *) { padding-left: 1.25rem; } }

/* Workroom authoring quality forms and debt snapshot. */
#pv-authoring-quality-view .aq-card:where(:scope, *) {
  margin-block: 1.25rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid #dbe1e8;
  border-radius: .75rem;
  background: #fff;
}
#pv-authoring-quality-view .aq-card h2:where(:scope, *) { margin: 0 0 .4rem; font-size: 1.25rem; }
#pv-authoring-quality-view .aq-card p:where(:scope, *) { line-height: 1.5; }
#pv-authoring-quality-view .aq-grid:where(:scope, *) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem 1rem;
  margin-top: 1rem;
}
#pv-authoring-quality-view .aq-field:where(:scope, *),
#pv-authoring-quality-view .aq-check:where(:scope, *) { display: flex; gap: .5rem; min-width: 0; }
#pv-authoring-quality-view .aq-field:where(:scope, *) { flex-direction: column; font-weight: 650; }
#pv-authoring-quality-view .aq-check:where(:scope, *) { align-items: flex-start; line-height: 1.4; }
#pv-authoring-quality-view .aq-check input:where(:scope, *) { margin: .2rem 0 0; flex: none; }
#pv-authoring-quality-view .aq-field input:where(:scope, *),
#pv-authoring-quality-view .aq-field textarea:where(:scope, *) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: .55rem;
  border: 1px solid #aab5c2;
  border-radius: .4rem;
  background: #fff;
  color: #1b2d40;
  font: inherit;
}
#pv-authoring-quality-view .aq-field textarea:where(:scope, *) { min-height: 5rem; resize: vertical; }
#pv-authoring-quality-view .aq-grid .pv-btn:where(:scope, *) { justify-self: start; align-self: end; }
#pv-authoring-quality-view .aq-debt-list:where(:scope, *) { padding-left: 1.4rem; }
#pv-authoring-quality-view .aq-debt-list li:where(:scope, *) { margin-block: .8rem; }
#pv-authoring-quality-view .aq-debt-list p:where(:scope, *) { margin: .2rem 0; }
@media (max-width: 650px) {
#pv-authoring-quality-view .aq-grid:where(:scope, *) { grid-template-columns: minmax(0, 1fr); }
}

/* Chapter study deck: one blocking skin, including its pre-upgrade footprint. */
/* Slides · Study Deck banner — light grey panel with the same geometry as the other chapter banners
   (founder 2026-09-04: "lighter grey slide deck banner, same length as any other banner across the page").
   Wrapper rules share the canonical chapter banner width policy. */

/* Quarto wraps custom elements in a prose <p>; the phone prose measure is deliberately narrower
   than the chapter column, but this banner is not prose. */
#quarto-document-content p:has(> slides-banner[deck-url]:only-child):where(:scope, *) {
  box-sizing: border-box;
  width: 100%;
  max-width: none !important;
  margin: 0;
  margin-inline: 0;
}

@media (max-width: 760px) {
  /* Keep the deck border inside the same chapter column as depth and Watch. */
  #quarto-document-content p:has(> slides-banner[deck-url]:only-child):where(:scope, *) {
    width: 100%;
    margin-inline: 0;
  }
}

#quarto-document-content slides-banner[deck-url]:where(:scope, *) {
  display: grid;
  grid-template-columns: var(--chapter-top-icon-size) minmax(0, 1fr) auto;
  gap: var(--chapter-top-card-gap);
  align-items: center;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 1rem 0 1.5rem;
  padding: var(--chapter-top-card-padding);
  border: 1px solid #d2d6dc;
  border-left: 6px solid #9aa3ad;
  border-radius: 0.9rem;
  background: linear-gradient(118deg, #f6f8f9 0%, #eef1f4 100%);
  color: #21242c;
  min-height: 91px;
}

.slides-banner__badge:where(:scope, *) {
  display: grid;
  width: var(--chapter-top-icon-size);
  height: var(--chapter-top-icon-size);
  place-items: center;
  border: 1px solid #c9cfd6;
  border-radius: 14px;
  background: #e6eaee;
  color: #3a4048;
  font: 800 1rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
}

.slides-banner__copy:where(:scope, *) {
  display: grid;
  min-width: 0;
  gap: 0.14rem;
  line-height: 1.35;
}

.slides-banner__eyebrow:where(:scope, *) {
  color: #5a6470;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.slides-banner__copy strong:where(:scope, *) {
  color: #21242c;
  font-size: 1.04rem;
}

.slides-banner__description:where(:scope, *) {
  color: #4a5361;
  font-size: 0.9rem;
}

.slides-banner__action:where(:scope, *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.6rem 0.9rem;
  border: 1px solid #21242c;
  border-radius: 999px;
  background: #2b2f3a;
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.slides-banner__action:hover:where(:scope, *),
.slides-banner__action:focus-visible:where(:scope, *) {
  background: #1b1e26;
  color: #ffffff;
}

@media (max-width: 650px) {
  #quarto-document-content slides-banner[deck-url]:where(:scope, *) {
    grid-template-columns: var(--chapter-top-icon-size) minmax(0, 1fr);
    gap: var(--chapter-top-card-gap);
    padding: var(--chapter-top-card-padding);
    min-height: 165px;
  }

  .slides-banner__badge:where(:scope, *) {
    width: var(--chapter-top-icon-size);
    height: var(--chapter-top-icon-size);
    border-radius: 12px;
    grid-column: 1;
    grid-row: 1;
  }

  .slides-banner__copy:where(:scope, *) { grid-column: 2; grid-row: 1; }

  .slides-banner__actions:where(:scope, *) {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
  }
}

.slides-banner__actions:where(:scope, *) { display: flex; flex-direction: column; width: 10rem; gap: .5rem; }
.slides-banner__action:where(:scope, *) { cursor: pointer; font-family: inherit; }
.slides-banner__panel:where(:scope, *) {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  border-top: 1px solid #c9cfd6;
  padding-top: 1rem;
  overflow-anchor: none;
}
.slides-banner__panel[hidden]:where(:scope, *) { display: none; }
.slides-banner__viewport:where(:scope, *) {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #fff;
}
.slides-banner__panel iframe:where(:scope, *) {
  position: absolute;
  inset: 0 auto auto 0;
  display: block;
  width: 1280px;
  height: 720px;
  max-width: none;
  border: 0;
  transform-origin: top left;
  background: #fff;
}
.slides-banner__navigation:where(:scope, *) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .75rem;
}
.slides-banner__navigation .slides-banner__action:where(:scope, *) { white-space: normal; }
.slides-banner__navigation .slides-banner__action:disabled:where(:scope, *) { opacity: .6; cursor: wait; }
.slides-banner__counter:where(:scope, *) { font-size: .85rem; font-weight: 700; }
@media (max-width: 600px) {
  .slides-banner__counter:where(:scope, *) { flex-basis: 100%; order: -1; text-align: center; }
  .slides-banner__navigation .slides-banner__action:where(:scope, *) { flex: 1; }
}
.slides-banner__panel:focus-visible:where(:scope, *) { outline: 3px solid #16806f; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .slides-banner__panel:where(:scope, *) { scroll-behavior: auto; transition: none; }
}

:root:where(:scope) {
  --chapter-top-icon-size: 58px;
  --chapter-top-card-gap: .9rem;
  --chapter-top-card-padding: .85rem .95rem;
}
@media (max-width: 650px) {
  :root:where(:scope) {
    --chapter-top-icon-size: 48px;
    --chapter-top-card-gap: .7rem;
    --chapter-top-card-padding: .75rem;
  }
}
.iot-watch-panel:where(:scope, *) {
  box-sizing: border-box; width: 100%; margin: 1rem 0 1.5rem;
  border: 1px solid #d2d6dc; border-left: 6px solid #9aa3ad; border-radius: .9rem;
  background: linear-gradient(118deg, #f6f8f9 0%, #eef1f4 100%); color: #21242c;
}
.iot-watch-panel__item:where(:scope, *) {
  display: grid; grid-template-columns: var(--chapter-top-icon-size) minmax(0, 1fr) auto;
  gap: var(--chapter-top-card-gap); align-items: center; padding: var(--chapter-top-card-padding);
}
.iot-watch-panel__item + .iot-watch-panel__item:where(:scope, *) { border-top: 1px solid #d2d6dc; }
.iot-watch-panel__mark:where(:scope, *) {
  display: grid; width: var(--chapter-top-icon-size); height: var(--chapter-top-icon-size); place-items: center;
  border: 1px solid #c9cfd6; border-radius: 14px; background: #e6eaee;
  color: #3a4048; font-size: 1rem;
}
.iot-watch-panel__copy:where(:scope, *) { display: grid; min-width: 0; gap: .14rem; line-height: 1.35; }
.iot-watch-panel__eyebrow:where(:scope, *) { color: #5a6470; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.iot-watch-panel__copy strong:where(:scope, *) { color: #21242c; font-size: 1.04rem; }
.iot-watch-panel__description:where(:scope, *) { color: #4a5361; font-size: .9rem; }
.iot-watch-panel .iot-lecture-button:where(:scope, *) {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px;
  padding: .6rem .9rem; border: 1px solid #21242c; border-radius: 999px;
  background: #2b2f3a; color: #fff; font: inherit; font-size: .86rem;
  font-weight: 800; white-space: nowrap; cursor: pointer;
}
.iot-watch-panel .iot-lecture-button:hover:where(:scope, *),
.iot-watch-panel .iot-lecture-button[aria-expanded="true"]:where(:scope, *) { background: #1b1e26; }
.iot-watch-panel .iot-lecture-button:focus-visible:where(:scope, *) { outline: 3px solid #1865f2; outline-offset: 3px; }
.iot-watch-panel .iot-media-preview-badge:where(:scope, *) { justify-self: start; margin: .25rem 0 0; }
@media (max-width: 650px) {
  .iot-watch-panel__item:where(:scope, *) { grid-template-columns: var(--chapter-top-icon-size) minmax(0, 1fr); gap: var(--chapter-top-card-gap); padding: var(--chapter-top-card-padding); }
  .iot-watch-panel__mark:where(:scope, *) { width: var(--chapter-top-icon-size); height: var(--chapter-top-icon-size); border-radius: 12px; }
  .iot-watch-panel .iot-lecture-button:where(:scope, *) { grid-column: 2; justify-self: start; }
}
@media (max-width: 760px) {
  #quarto-document-content > [data-media-lecture-slot]:where(:scope, *) {
    box-sizing: border-box;
    width: 100%;
    margin-inline: 0;
  }
}

/* Inline explainers reuse the Watch card hierarchy inside the taught section. */
.iot-inline-explainer:where(:scope, *) { margin: 1.2rem 0 1.5rem; }
.iot-inline-explainer .iot-watch-panel__item:where(:scope, *) { grid-template-columns: 104px minmax(0, 1fr) auto; }
.iot-inline-explainer .iot-watch-panel__mark:where(:scope, *) {
  width: 104px; height: 59px; border-radius: 8px; object-fit: cover;
  background: #e6eaee; aspect-ratio: 16 / 9;
}
@media (max-width: 650px) {
  .iot-inline-explainer .iot-watch-panel__item:where(:scope, *) { grid-template-columns: 84px minmax(0, 1fr); }
  .iot-inline-explainer .iot-watch-panel__mark:where(:scope, *) { width: 84px; height: 54px; }
}
.iot-lecture-panel[hidden]:where(:scope, *) { display: none !important; }
.iot-watch-panel .iot-lecture-panel:where(:scope, *) { grid-column: 1 / -1; }
.iot-lecture-panel:where(:scope, *) {
  box-sizing: border-box; width: min(100%, 56rem); margin: .4rem auto 1rem; padding: .75rem;
  border: 1px solid #d5dce3; border-radius: 12px; background: #fff;
  box-shadow: 0 3px 12px rgba(20, 35, 50, .08);
}
.iot-lecture-video:where(:scope, *) { display: block; width: 100%; max-width: 100%; margin-inline: auto; border-radius: 8px; }
.iot-media-preview-badge:where(:scope, *) {
  display: inline-block; margin: .25rem 0 .5rem; padding: .2rem .5rem;
  border: 1px solid #855800; border-radius: .35rem; background: #fff4d6;
  color: #563900; font-size: .8rem; font-weight: 700;
}
.iot-model-viewer:where(:scope, *) {
  display: block; width: 100%; height: 20rem;
  background: #f1f5f9; border-radius: .7rem;
}
.iot-model-viewer:focus:where(:scope, *) { outline: 3px solid #1865f2; outline-offset: 2px; }
.iot-model-layout:where(:scope, *) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; align-items: start; }
.iot-model-stage:where(:scope, *) { min-width: 0; }
@media (max-width: 640px) { .iot-model-layout:where(:scope, *) { grid-template-columns: minmax(0, 1fr); } }
.iot-model-hint:where(:scope, *) { margin: .5rem 0 !important; color: #526477; font-size: .9rem; }
.iot-model-controls:where(:scope, *) { display: flex; align-items: center; gap: .5rem; margin: .5rem 0; }
.iot-model-controls input:where(:scope, *) { flex: 1; min-width: 0; min-height: 44px; accent-color: #1865f2; }
.iot-model-controls button:where(:scope, *), .iot-model-spin:where(:scope, *) {
  min-height: 44px; padding: .5rem .75rem; border: 1px solid #cbd5df;
  border-radius: .5rem; background: #fff; color: #23364a; font: inherit; cursor: pointer;
}
.iot-model-controls button:focus-visible:where(:scope, *), .iot-model-controls input:focus-visible:where(:scope, *),
.iot-model-spin:focus-visible:where(:scope, *) { outline: 3px solid #1865f2; outline-offset: 2px; }
.iot-model-spin:where(:scope, *) { margin-bottom: .5rem; }
.iot-model-spin-row:where(:scope, *) { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.iot-model-spin-help:where(:scope, *) { color: #526477; font-size: .8rem; }
.iot-model-spin[disabled]:where(:scope, *) { cursor: not-allowed; opacity: .65; }
.iot-model-parts:where(:scope, *) { margin: .5rem 0; }
.iot-model-parts h3:where(:scope, *), .iot-model-parts h3:hover:where(:scope, *) { margin: .5rem 0; padding: 0; border: 0; color: var(--color-primary); font-family: var(--font-family-heading); font-size: 1rem; font-weight: 700; }
.iot-model-parts ul:where(:scope, *) { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.iot-model-parts li:where(:scope, *) { margin: 0; }
.iot-model-parts li button:where(:scope, *) { width: 100%; min-height: 44px; padding: .5rem .65rem; text-align: left; border: 1px solid var(--gray-300); border-radius: var(--radius-lg); background: #fff; color: var(--color-primary); font: inherit; cursor: pointer; }
.iot-model-parts li button[aria-pressed="true"]:where(:scope, *) { border-color: var(--color-secondary); background: var(--gray-100); font-weight: 700; }
.iot-model-parts li button:focus-visible:where(:scope, *) { outline: 3px solid #1865f2; outline-offset: 2px; }
.iot-model-part-line:where(:scope, *) { display: flex; align-items: flex-start; gap: .55rem; min-height: 2.5rem; margin: .65rem 0 0; padding: .65rem .8rem; border-radius: var(--radius-lg); background: var(--gray-100); color: var(--color-primary); }
.iot-model-part-line:empty:where(:scope, *) { display: none; }
.iot-model-part-line > div:where(:scope, *) { min-width: 0; }
.iot-model-part-line strong:where(:scope, *) { display: block; font-size: .9rem; line-height: 1.3; }
.iot-model-part-line p:where(:scope, *) { margin: .15rem 0 0; line-height: 1.45; }
.iot-model-part-avatar:where(:scope, *) { display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: var(--radius-full); background: var(--color-primary); color: #fff; font-size: .72rem; font-weight: 700; }
.iot-lecture-panel details:where(:scope, *) { margin: .6rem auto 0; text-align: left; color: #2c3e50; }
.iot-lecture-panel summary:where(:scope, *) { min-height: 44px; padding: .45rem .2rem; cursor: pointer; }
.iot-lecture-panel summary:focus-visible:where(:scope, *) { outline: 3px solid #1865f2; outline-offset: 2px; }

/* Approved audio is mounted by the shared media component on chapters and character pages. */
.iot-media-panel:where(:scope, *), .iot-character-voice:where(:scope, *) {
  box-sizing: border-box; width: min(100%, 56rem); min-width: 0; margin: 1rem 0;
  padding: 0; border: 0; background: transparent; text-align: left;
}
.iot-media-panel h2:where(:scope, *), .iot-character-voice h2:where(:scope, *) {
  margin: 0 0 .5rem !important; padding: 0; color: #2c3e50; font-size: 1.1rem;
}
#quarto-document-content .iot-media-panel h2:where(:scope, *),
#quarto-document-content .iot-character-voice h2:where(:scope, *) {
  margin: 0 0 .5rem !important; padding: 0 !important;
  border-bottom: 0 !important; font-size: 1.1rem !important;
}
.iot-character-voice:where(:scope, *) { text-align: left; }
.iot-character-voice__play:where(:scope, *) {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px;
  margin: .25rem 0 .7rem; padding: .45rem 1rem; border: 1px solid #0b6657;
  border-radius: 999px; background: #0b6657; color: #fff; font: inherit;
  font-weight: 700; cursor: pointer;
}
.iot-character-voice__play:where(:scope, *)::before {
  content: ''; display: inline-block; flex: none; width: .55rem; height: .65rem;
  background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.iot-character-voice__play:hover:where(:scope, *) { background: #084e43; }
.iot-character-voice__play:focus-visible:where(:scope, *) { outline: 3px solid #1865f2; outline-offset: 2px; }
.iot-character-voice--compact:where(:scope, *) { width: auto; margin: .45rem 0 0; }
.iot-character-voice--compact .iot-character-voice__play:where(:scope, *) { margin: 0; }
.iot-character-voice--compact .iot-character-voice__play[aria-pressed="true"]:where(:scope, *)::before { clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0); }
.iot-character-voice--compact details:where(:scope, *) { font-size: .85rem; max-width: 30rem; }
.iot-character-voice--compact small:where(:scope, *) { display: block; color: var(--gray-600); font-size: .75rem; }
.iot-character-voice--tap:where(:scope, *) { text-align: center; }
.iot-character-voice--tap .iot-character-voice__play:where(:scope, *) { display: flex; flex-direction: column; justify-content: center; width: 6.5rem; height: 6.5rem; margin: .5rem auto; padding: .5rem; border-radius: var(--radius-full); font-size: 1rem; }
.iot-character-voice--tap .iot-character-voice__play:where(:scope, *)::before { width: 1.1rem; height: 1.2rem; }
/* P-011 pages use the Feature Book card width inside Quarto's full-page grid. */
body.fullcontent #quarto-content:has(.character-profile, .character-hello, .character-index) main.content:where(:scope, *) {
  grid-column: screen-start / screen-end;
  width: 100%;
  max-width: none;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#quarto-document-content .character-profile:where(:scope, *) { width: 100% !important; max-width: 55rem; }
#quarto-document-content .character-hello:where(:scope, *),
#quarto-document-content .character-index:where(:scope, *) { width: 100% !important; }
#quarto-document-content .character-profile h2:where(:scope, *),
#quarto-document-content .character-index h2:where(:scope, *) {
  margin: 1.4rem 0 .5rem !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-size: 1.1rem !important;
}
#quarto-document-content .character-index h2:where(:scope, *) { font-size: 1.15rem !important; }
#quarto-document-content .character-profile h2:where(:scope, *)::before,
#quarto-document-content .character-profile h2:where(:scope, *)::after,
#quarto-document-content .character-index h2:where(:scope, *)::before,
#quarto-document-content .character-index h2:where(:scope, *)::after { content: none !important; display: none !important; }
#quarto-document-content .character-profile__job:where(:scope, *) { box-sizing: border-box; width: 100%; max-width: none !important; }
#quarto-document-content .character-index > p:where(:scope, *) { margin: .55rem 0 1rem !important; }
.iot-media-audio:where(:scope, *) {
  display: none;
}
.iot-player:where(:scope, *) {
  box-sizing: border-box; width: min(100%, 56rem); min-width: 0;
  padding: .85rem 1rem; border: 1px solid #d5dce3; border-radius: 12px;
  background: #fff; box-shadow: 0 3px 12px rgba(20, 35, 50, .06);
  color: #2c3e50;
}
.iot-player__audio:where(:scope, *) { display: none; }
.iot-player__header:where(:scope, *) { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.iot-player__copy:where(:scope, *) { display: grid; min-width: 0; }
.iot-player__title:where(:scope, *) { font-size: .96rem; line-height: 1.35; }
.iot-player__hint:where(:scope, *) { color: #526477; font-size: .82rem; }
.iot-player__play:where(:scope, *) {
  flex: none; width: 44px; height: 44px; padding: 0; display: grid; place-items: center;
  border: 1px solid #0b6657; border-radius: 50%; background: #0b6657; color: #fff; cursor: pointer;
}
.iot-player__play:where(:scope, *)::before { content: ''; width: 12px; height: 14px; margin-left: 2px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.iot-player__play[aria-pressed="true"]:where(:scope, *)::before { margin-left: 0; clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0); }
.iot-player__play:hover:where(:scope, *) { background: #084e43; }
.iot-player__timeline:where(:scope, *) { display: flex; align-items: center; gap: .6rem; margin-top: .6rem; color: #526477; font-size: .78rem; font-variant-numeric: tabular-nums; }
.iot-player__seek:where(:scope, *) {
  flex: 1; width: 100%; min-width: 2rem; height: 44px; margin: 0; appearance: none; background: transparent; cursor: pointer;
}
.iot-player__seek:where(:scope, *)::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(to right, #0b6657 var(--iot-player-progress), #e5eef0 var(--iot-player-progress)); }
.iot-player__seek:where(:scope, *)::-moz-range-track { height: 6px; border-radius: 999px; background: #e5eef0; }
.iot-player__seek:where(:scope, *)::-moz-range-progress { height: 6px; border-radius: 999px; background: #0b6657; }
.iot-player__seek:where(:scope, *)::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; margin-top: -5px; border: 2px solid #fff; border-radius: 50%; background: #0b6657; box-shadow: 0 0 0 1px #0b6657; }
.iot-player__seek:where(:scope, *)::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; background: #0b6657; box-shadow: 0 0 0 1px #0b6657; }
.iot-player__footer:where(:scope, *) { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: .2rem; }
.iot-player__footer label:where(:scope, *) { display: inline-flex; align-items: center; gap: .4rem; color: #334b5e; font-size: .85rem; font-weight: 600; }
.iot-player__speed:where(:scope, *) { min-height: 44px; padding: .2rem .55rem; border: 1px solid #8799a8; border-radius: 8px; background: #f4f7f8; color: #203443; font: inherit; }
.iot-player details:where(:scope, *) { margin-top: .45rem; }
.iot-player summary:where(:scope, *) { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.iot-player summary:where(:scope, *)::before { content: '▸'; display: inline-block; margin-right: .4rem; color: #0b6657; }
.iot-player details[open] summary:where(:scope, *)::before { content: '▾'; }
.iot-player :is(button,input,select,summary):focus-visible:where(:scope, *) { outline: 3px solid #1865f2; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .iot-player *:where(:scope, *), .iot-audio-toolbar__progress > span:where(:scope, *) { animation: none !important; transition: none !important; } }
.iot-media-panel details:where(:scope, *), .iot-character-voice details:where(:scope, *) { margin-top: .55rem; color: #334b5e; }
.iot-media-panel summary:where(:scope, *), .iot-character-voice summary:where(:scope, *) { min-height: 44px; padding: .45rem .15rem; cursor: pointer; }
.iot-media-panel summary:focus-visible:where(:scope, *), .iot-character-voice summary:focus-visible:where(:scope, *) { outline: 3px solid #1865f2; outline-offset: 2px; }
.iot-media-following-transcript:where(:scope, *) { margin: .65rem 0 .25rem; color: #334b5e; }
.iot-compact-header:where(:scope, *) {
  margin: .35rem 0 .75rem;
  padding: .45rem .55rem;
  border: 1px solid #cbd8e1;
  border-radius: .65rem;
  background: #f8fbfd;
}
html:where(:scope)[data-feat-chapter-header-compact="on"] main[data-iot-module="mqtt"] > :is(.iot-chapter-route, .iot-route-panel) {
  display: none;
}
.iot-compact-header__row:where(:scope, *) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem;
}
.iot-compact-header__row > [data-compact-chunk]:empty:where(:scope, *) { display: none; }
.iot-compact-header__row button:where(:scope, *),
.iot-compact-header__row summary:where(:scope, *),
.iot-compact-header__row .iot-compact-header__deck:where(:scope, *) {
  box-sizing: border-box;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #658399;
  border-radius: .45rem;
  padding: .48rem .5rem;
  background: #fff;
  color: #18394e;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.iot-compact-header__row summary:where(:scope, *) { list-style: none; }
.iot-compact-header__row summary:where(:scope, *)::-webkit-details-marker { display: none; }
.iot-compact-header__info > summary:where(:scope, *) { min-width: 44px; }
.iot-compact-header__info > summary span:where(:scope, *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-weight: 700;
  font-family: Georgia, serif;
  font-style: italic;
}
.iot-compact-header__row > .iot-audio-control--main:where(:scope, *) {
  border-color: #0b6657;
  background: #0b6657;
  color: #fff;
}
.iot-compact-header__row :focus-visible:where(:scope, *),
.iot-compact-header__route :focus-visible:where(:scope, *) {
  outline: 3px solid #155eef;
  outline-offset: 3px;
}
.iot-compact-header__row details:where(:scope, *) { position: relative; }
.iot-compact-header__row details[open] > summary:where(:scope, *) { background: #e8f3f8; }
.iot-compact-header__row [data-compact-more-content]:where(:scope, *),
.iot-compact-header__row [data-compact-depth-content]:where(:scope, *),
.iot-compact-header__info > p:where(:scope, *),
.iot-compact-header__info > [data-compact-hint]:where(:scope, *) {
  box-sizing: border-box;
  position: absolute;
  z-index: 30;
  width: min(22rem, calc(100vw - 2rem));
  max-height: 65vh;
  overflow: auto;
  margin: .3rem 0 0;
  padding: .65rem;
  border: 1px solid #a8bfcc;
  border-radius: .5rem;
  background: #fff;
  box-shadow: 0 .5rem 1.25rem #0e304233;
}
.iot-compact-header__row [data-compact-more-content]:where(:scope, *) { left: 0; }
.iot-compact-header__row [data-compact-depth-content]:where(:scope, *) { right: 0; }
.iot-compact-header__info > p:where(:scope, *) { right: 0; }
.iot-compact-header__info > [data-compact-hint]:where(:scope, *) { display: none; }
.iot-compact-header__more [data-compact-more-content] > *:where(:scope, *) { margin: .3rem 0; }
.iot-compact-header__more [data-compact-more-content] .iot-audio-control:where(:scope, *) { min-width: 44px; }
.iot-compact-header__audio-parts summary:where(:scope, *) { width: 100%; justify-content: flex-start; }
.iot-compact-header__audio-parts > div:where(:scope, *) { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; }
.iot-compact-header__audio-parts .iot-audio-part-controls:where(:scope, *) { display: inline-flex; }
.iot-compact-header [data-compact-depth-content] .iot-section-depth-toggle:where(:scope, *) {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  min-height: 0;
  background: #fff;
}
.iot-compact-header [data-compact-depth-content] .iot-section-depth-toggle__controls:where(:scope, *) { display: grid; gap: .3rem; }
.iot-compact-header [data-compact-depth-content] .iot-section-depth-toggle__button:where(:scope, *) { min-height: 44px; max-width: none; }
html:where(:scope)[data-feat-chapter-header-compact="on"] #quarto-document-content > #title-block-header {
  padding-bottom: .35rem;
  margin-bottom: .45rem !important;
}
.iot-compact-header .iot-chunk-controls:where(:scope, *) { display: contents; }
.iot-compact-header__route:empty:where(:scope, *) { display: none; }
.iot-compact-header__route:not(:has([data-ready])):where(:scope, *) { display: none; }
.iot-compact-header__route:where(:scope, *) { margin-top: .35rem; }
.iot-compact-header__start-route:where(:scope, *) { display: none; }
.iot-compact-header__start-route:has(.iot-chapter-route[data-ready]):where(:scope, *) { display: block; }
html:where(:scope)[data-feat-route-suggested="on"] .iot-compact-header__start-route { display: none; }
.iot-compact-header__start-route > summary:where(:scope, *),
.iot-compact-header__route .iot-route-panel:where(:scope, *) {
  min-height: 44px;
  box-sizing: border-box;
  padding: .35rem .65rem;
  border: 1px solid #a8c3ce;
  border-radius: .45rem;
  background: #f1f8fa;
}
.iot-compact-header__start-route > summary:where(:scope, *) { display: flex; align-items: center; justify-content: space-between; gap: .75rem; cursor: pointer; }
.iot-compact-header__start-route:not([open]) .iot-chapter-route:where(:scope, *) { display: none; }
.iot-compact-header__route .iot-route-panel:where(:scope, *) { margin: 0; }
.iot-compact-header__route .iot-route-panel-summary:where(:scope, *) { min-height: 44px; }
.iot-compact-header__route .iot-route-panel-summary-text p:where(:scope, *) { display: none; }
@media (max-width: 500px) {
  .iot-compact-header:where(:scope, *) { margin-inline: 0; }
  .iot-compact-header__row:where(:scope, *) { gap: .3rem; }
  .iot-compact-header__row button:where(:scope, *),
  .iot-compact-header__row summary:where(:scope, *),
  .iot-compact-header__row .iot-compact-header__deck:where(:scope, *) { padding-inline: .5rem; }
}

/* Character card labels are repeated across chapter-local cards. The original
   orange is 3.08:1 on their white surface at the rendered text size. */
.max-chip .max-name:where(:scope, *),
.max-card .max-card-title:where(:scope, *) { color: #a13e18; }
.eddie-chip .eddie-name:where(:scope, *),
.eddie-card .eddie-card-title:where(:scope, *),
.bina-chip .bina-name:where(:scope, *),
.bina-card .bina-card-title:where(:scope, *) { color: #765500; }

/* Depth boundaries are empty structural markers, not headings for readers. */
:is(h1, h2, h3, h4, h5, h6).depth-boundary:where(:scope, *) { display: none; }

/* LAYOUT-SHIFT-2: platform header rules available before chapter first paint. */
/* Shared PLATFORM-HEADER-1 chrome. This is the sole header skin for Astro,
   Svelte, static tools, admin, foundations, and the kids-books bridge. */
iotclass-platform-header:where(:scope, *) { display: block; position: relative; z-index: 1100; min-height: 124px; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.skip-link:where(:scope, *) { position: fixed; z-index: 9999; top: 8px; left: 8px; transform: translateY(-160%); padding: 8px 12px; border-radius: 6px; background: #fff; color: #17303f; font-weight: 800; }
.skip-link:focus:where(:scope, *) { transform: translateY(0); }
.platform-header:where(:scope, *) { display: grid; grid-template-columns: minmax(150px,1fr) minmax(420px,40vw) minmax(150px,1fr); grid-template-areas: "brand search auth" ". links ."; align-items: center; gap: 8px 24px; box-sizing: border-box; width: 100%; min-height: 124px; height: 124px; padding: 12px clamp(18px,3vw,48px) 10px; border-top: 3px solid #1865f2; border-bottom: 1px solid #dbdcdd; background: #fff; color: #21242c; box-shadow: none; }
.platform-header a:where(:scope, *) { color: #334155; text-decoration: none; }
.platform-header__brand:where(:scope, *) { grid-area: brand; display: inline-flex; width: max-content; min-height: 44px; align-items: center; gap: 9px; color: #17303f !important; font-size: 1rem; font-weight: 800; }
/* Founder 2026-09-08: the logo is square; no corner rounding from the global img rule. */
.platform-header__brand img:where(:scope, *) { flex: none; display: block; width: 40px; height: 40px; object-fit: contain; box-shadow: none; border-radius: 0; }
.platform-header__search:where(:scope, *) { grid-area: search; display: flex; width: 100%; min-height: 44px; align-items: center; gap: 10px; padding: 9px 14px; border: 1px solid #cbd5e1; border-radius: 8px; background: #f7f8fa; color: #475569; font: inherit; font-size: .92rem; cursor: pointer; }
.platform-header__search:hover:where(:scope, *) { border-color: #1865f2; background: #f1f5f9; }
.platform-header__search svg:where(:scope, *) { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex: none; }
.platform-header__search span:where(:scope, *) { flex: 1; text-align: left; }
.platform-header__search kbd:where(:scope, *) { padding: 2px 6px; border: 1px solid #cbd5e1; border-radius: 4px; background: #fff; color: #64748b; font: 700 .72rem/1.4 inherit; }
.platform-header .platform-header__auth:where(:scope, *) { grid-area: auth; display: flex; flex: 0 0 150px; width: 150px; min-width: 150px; max-width: 150px; height: 44px; justify-self: end; justify-content: flex-end; align-items: center; gap: 8px; }
.platform-header__signin:where(:scope, *),.platform-header .iotclass-profile-presence-signout:where(:scope, *) { min-height: 44px; padding: 8px 14px; border: 1px solid #cbd5e1; border-radius: 7px; background: #fff; color: #17303f; font: inherit; font-size: .84rem; font-weight: 800; white-space: nowrap; cursor: pointer; }
.platform-header__links:where(:scope, *) { grid-area: links; display: flex; justify-content: center; align-items: center; gap: clamp(16px,2vw,30px); min-width: 0; }
.platform-header__links a:where(:scope, *) { padding: 5px 2px 7px; border-bottom: 2px solid transparent; font-size: .88rem; font-weight: 700; white-space: nowrap; }
.platform-header__links a:hover:where(:scope, *),.platform-header__links a.platform-header__nav-active:where(:scope, *) { border-bottom-color: #1865f2; color: #1251c5; }
.platform-header__toggle:where(:scope, *) { display: none; grid-area: toggle; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid #cbd5e1; border-radius: 7px; background: #fff; color: #17303f; }
.platform-header #iot-feature-controls-root:where(:scope, *) { position: absolute; width: 0; height: 0; }
.platform-header__toggle span:where(:scope, *),.platform-header__toggle span:where(:scope, *)::before,.platform-header__toggle span:where(:scope, *)::after { display: block; width: 18px; height: 2px; background: currentColor; content: ""; }
.platform-header__toggle span:where(:scope, *) { position: relative; }.platform-header__toggle span:where(:scope, *)::before { position: absolute; top: -6px; }.platform-header__toggle span:where(:scope, *)::after { position: absolute; top: 6px; }
.platform-header :focus-visible:where(:scope, *) { outline: 3px solid rgba(24,101,242,.28); outline-offset: 2px; }
.platform-header .iotclass-profile-presence:where(:scope, *) { position: relative; }
.platform-header__auth > .iotclass-auth-trigger:where(:scope, *),
.platform-header__auth > .iotclass-profile-presence:where(:scope, *) { box-sizing: border-box; width: 150px; margin: 0; }
.platform-header__auth > .iotclass-profile-presence .iotclass-profile-presence-trigger:where(:scope, *) { box-sizing: border-box; width: 100%; justify-content: center; }
.platform-header .iotclass-profile-presence-trigger:where(:scope, *) { display: flex; min-height: 44px; align-items: center; gap: 7px; padding: 4px 8px; border: 1px solid #cbd5e1; border-radius: 7px; background: #fff; color: #17303f; font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; }
.platform-header .iotclass-profile-presence-avatar:where(:scope, *) { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; box-shadow: none; }
.platform-header .iotclass-profile-presence-menu:where(:scope, *) { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; width: 210px; padding: 8px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; box-shadow: 0 12px 28px rgba(15,23,42,.14); }
.platform-header .iotclass-profile-presence-menu[hidden]:where(:scope, *) { display: none; }
.platform-header .iotclass-profile-presence-menu a:where(:scope, *),.platform-header .iotclass-profile-presence-menu button:where(:scope, *),.platform-header .iotclass-profile-presence-progress:where(:scope, *) { display: block; box-sizing: border-box; width: 100%; margin: 0; padding: 8px; text-align: left; font-size: .82rem; }
.platform-header .iotclass-profile-presence-progress:where(:scope, *) { color: #64748b; }
/* Match assets/js/toc-mobile-toggle.js BREAKPOINT: the TOC can join
   the auth slot throughout the tablet band, before the phone header starts. */
@media (max-width: 992px) {
  /* Reserve both auth and TOC cells before either owner hydrates. The TOC
     shares this slot and must never push the sign-in/profile control left. */
  .platform-header .platform-header__auth:where(:scope, *) { display: grid; grid-template-columns: 150px 44px; flex-basis: 202px; width: 202px; min-width: 202px; max-width: 202px; }
  .platform-header__auth > .iotclass-auth-trigger:where(:scope, *),
  .platform-header__auth > .iotclass-profile-presence:where(:scope, *) { grid-column: 1; grid-row: 1; box-sizing: border-box; width: 150px; margin: 0; }
  .platform-header__auth > .iotclass-profile-presence .iotclass-profile-presence-trigger:where(:scope, *) { box-sizing: border-box; width: 100%; justify-content: center; }
  .platform-header__auth > .toc-mobile-toggle-inline:where(:scope, *) { grid-column: 2; grid-row: 1; }
}
@media (min-width: 861px) and (max-width: 992px) {
  /* The 202px auth slot can extend left of its grid track. Cap only the
     search's right edge at auth's left: 50vw - 3vw padding + 210px - 202px.
     The normal 420px width already fits from 877px; other geometry stays put. */
  .platform-header__search:where(:scope, *) { min-width: 0; max-width: calc(47vw + 8px); }
}
@media (max-width: 860px) {
  iotclass-platform-header:where(:scope, *) { min-height: 154px; }
  .platform-header:where(:scope, *) { grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-areas: "brand auth controls toggle" "search search search search"; min-height: 154px; height: 154px; gap: 10px 12px; padding: 10px 16px 12px; }
  .platform-header #iot-feature-controls-root:where(:scope, *) { position: static; grid-area: controls; width: 44px; height: 44px; }
  .platform-header__search:where(:scope, *) { width: 100%; min-width: 0; }
  .platform-header__toggle:where(:scope, *) { display: inline-flex; }
  .platform-header__links:where(:scope, *) { display: none; position: absolute; top: 100%; right: 0; left: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 16px 14px; border-bottom: 1px solid #dbdcdd; background: #fff; box-shadow: 0 12px 24px rgba(15,23,42,.12); }
  .platform-header[data-menu-open="true"] .platform-header__links:where(:scope, *) { display: flex; }
  .platform-header__links a:where(:scope, *) { min-height: 42px; padding: 11px 8px; }
  .platform-header__auth .iotclass-profile-presence-label:where(:scope, *) { display: none; }
  .platform-header .platform-header__auth:where(:scope, *) { grid-template-columns: 70px 44px; flex-basis: 122px; width: 122px; min-width: 122px; max-width: 122px; }
  .platform-header__auth > .iotclass-auth-trigger:where(:scope, *),
  .platform-header__auth > .iotclass-profile-presence:where(:scope, *) { width: 70px; }
  .platform-header__brand:where(:scope, *) { min-width: 0; width: auto; }
  .platform-header__brand span:where(:scope, *) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 430px) {
  .platform-header:where(:scope, *) { grid-template-columns: minmax(0, 1fr) auto auto auto; padding-inline: 12px; }
  .platform-header__brand span:where(:scope, *) { font-size: .9rem; }
  .platform-header__brand img:where(:scope, *) { width: 34px; height: 34px; }
  .platform-header__search kbd:where(:scope, *) { display: none; }
  .platform-header__signin:where(:scope, *) { padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) { .platform-header *:where(:scope, *) { scroll-behavior: auto !important; } }
/* Phone table-of-contents toggle lives in the header's auth row (it used to sit in the module bar). */
.platform-header .toc-mobile-toggle-inline:where(:scope, *) { display: inline-flex; width: 44px; min-width: 44px; min-height: 44px; padding: 0; align-items: center; justify-content: center; border: 1px solid #cbd5e1; border-radius: 7px; background: #fff; color: #17303f; box-shadow: none; }
.platform-header .toc-mobile-toggle-inline .toc-toggle-text:where(:scope, *) { display: none; }
.platform-header .toc-mobile-toggle-inline:hover:where(:scope, *), .platform-header .toc-mobile-toggle-inline.active:where(:scope, *) { border-color: #1865f2; color: #1251c5; background: #f1f5f9; }
/* P-029 Find it fast: the same grouped result hierarchy in the site box and page. */
#search-modal .search-modal-content:where(:scope, *),
.study-search-page:where(:scope, *) {
  background: var(--surface, #fff);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-xl);
  color: var(--color-primary);
}
#search-modal .study-search-heading:where(:scope, *) {
  padding: 16px 16px 0;
  font-size: 1rem;
  font-weight: 700;
}
#search-modal .study-search-heading span:where(:scope, *) {
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  color: var(--gray-600);
  font-size: .75rem;
  font-weight: 600;
}
#search-modal .search-input-container:where(:scope, *) {
  flex-wrap: wrap;
  gap: 4px 8px !important;
  padding: 12px 16px !important;
  border-bottom: 0 !important;
}
#search-modal .search-input-container label:where(:scope, *),
.study-search-page label:where(:scope, *) {
  display: block;
  width: 100%;
  color: var(--gray-600);
  font-size: .83rem;
}
#search-modal #search-input:where(:scope, *),
.study-search-page input[type="search"]:where(:scope, *) {
  box-sizing: border-box;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--gray-300) !important;
  border-radius: var(--radius-md);
  background: var(--gray-50);
  color: var(--color-primary);
  font: inherit;
}
#search-modal #search-input:focus-visible:where(:scope, *),
.study-search-page input[type="search"]:focus-visible:where(:scope, *) {
  outline: 3px solid var(--color-accent) !important;
  outline-offset: 1px;
}
#search-modal #search-close-btn:where(:scope, *) { min-height: 44px; }
#search-modal #search-results:where(:scope, *) { padding: 0 16px 12px !important; }
.study-search-page:where(:scope, *) { padding: 16px; }
.study-search-page input[type="search"]:where(:scope, *) { width: 100%; margin: 6px 0 8px; }
.study-search-count:where(:scope, *) { min-height: 1.4em; margin: 0 0 8px; color: var(--gray-600); font-size: .82rem; }
.study-search-results:where(:scope, *) { min-height: 12rem; }
.study-search-group:where(:scope, *) { margin: 0 0 8px; }
#study-search-page .study-search-group h3:where(:scope, *),
#search-modal .study-search-group h3:where(:scope, *) {
  margin: 8px 0 2px !important;
  padding: 0;
  border: 0;
  color: var(--gray-600) !important;
  font-size: .75rem !important;
  font-weight: 700;
  line-height: 1.5 !important;
  letter-spacing: .025em;
}
#study-search-page .study-search-link:where(:scope, *),
#search-modal .study-search-link:where(:scope, *) {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 8px;
  box-sizing: border-box;
  min-height: 28px;
  padding: 2px 0;
  border-radius: var(--radius-md);
  color: var(--color-primary);
  font-size: .94rem;
  line-height: 1.5;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.study-search-link__location:where(:scope, *) { color: var(--gray-600); font-size: .8rem; text-decoration: none; }
.study-search-link:focus-visible:where(:scope, *),
.study-search-all:focus-visible:where(:scope, *) { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.study-search-all:where(:scope, *) { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.study-search-more-button:where(:scope, *) { display: block; min-height: 28px; margin: 2px 0 0; padding: 2px 0; border: 0; background: transparent; color: var(--color-primary); font: inherit; font-size: .84rem; font-weight: 700; text-align: left; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.study-search-more-button:focus-visible:where(:scope, *) { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.study-search-more[hidden]:where(:scope, *) { display: none; }
.study-search-honesty:where(:scope, *),
.study-search-empty:where(:scope, *) { color: var(--gray-600); font-size: .83rem; }
#search-modal .search-footer:where(:scope, *) { gap: 12px; align-items: center; padding: 12px 16px !important; }
@media (max-width: 480px) {
  #search-modal:where(:scope, *) { padding: 4vh 16px 8px !important; }
  #search-modal .search-modal-content:where(:scope, *) { max-height: 90vh !important; }
  #search-modal #search-results:where(:scope, *) { padding: 0 12px 8px !important; }
  .study-search-page:where(:scope, *) { padding: 12px; }
  .study-search-link:where(:scope, *) { align-items: flex-start; flex-direction: column; justify-content: center; }
}

/* P-007: compact, action-led resume card, matching the Feature Book home design. */
body.iotclass-homepage .iot-continue-card:where(:scope, *) {max-width:none;margin:auto;padding:1rem;border:1px solid #b7cfd1;background:#f7fafb}
body.iotclass-homepage .iot-continue-card__heading h2:where(:scope, *) {font-size:1.12rem!important}
body.iotclass-homepage .iot-continue-card__last:where(:scope, *) {margin:.35rem 0 .5rem;color:#52687b;font-size:.85rem}
body.iotclass-homepage .iot-continue-card__time:where(:scope, *) {display:inline-block;padding:.16rem .5rem;border-radius:20px;background:#e7eff3;color:#52687b;font-size:.78rem;white-space:nowrap}
body.iotclass-homepage .iot-continue-card__primary:where(:scope, *) {display:inline-flex;align-items:center;min-height:40px;padding:.45rem .8rem;border:0;border-radius:8px;background:#0f766e;color:#fff;cursor:pointer;font-size:.93rem;font-weight:700}
body.iotclass-homepage .iot-continue-card__primary:hover:where(:scope, *) {background:#0d6d60}
body.iotclass-homepage .iot-continue-card h3:where(:scope, *) {margin:.8rem 0 .2rem;font-size:.92rem;color:#34495e}
body.iotclass-homepage .iot-continue-card__more:where(:scope, *) {display:block;margin:.2rem 0 0;padding:0}
body.iotclass-homepage .iot-continue-card__more li:where(:scope, *) {display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:.5rem;padding:.4rem 0;border-bottom:1px solid #d7e1e5}
body.iotclass-homepage .iot-continue-card__more li a:where(:scope, *) {min-width:0;color:#253d4d;font-size:.86rem}
body.iotclass-homepage .iot-continue-card__more li .iot-continue-card__time:where(:scope, *) {flex:none}
body.iotclass-homepage .iot-continue-card button:focus-visible:where(:scope, *) {outline:3px solid #155eef;outline-offset:2px}

/* Chapter prose rules have ID specificity; keep the P-007 card compact. */
#quarto-document-content .iot-welcome-back h2:where(:scope, *) {margin:0 0 .2rem!important;padding:0!important;font-size:1.2rem!important;line-height:1.3!important}
#quarto-document-content .iot-welcome-back h3:where(:scope, *) {margin:.65rem 0 .2rem!important;padding:0!important;border:0!important;font-size:.78rem!important;font-weight:700!important;letter-spacing:.04em!important;text-transform:uppercase!important;color:#52687b!important;line-height:1.3!important}
#quarto-document-content .iot-welcome-back p:where(:scope, *) {margin:.2rem 0!important;font-size:.9rem!important;line-height:1.4!important}
#quarto-document-content .iot-welcome-back__suggestion h3:where(:scope, *) {margin:0 0 .2rem!important;padding:0!important;border:0!important}
#quarto-document-content .iot-welcome-back__actions:where(:scope, *) {margin-top:.6rem}
#quarto-document-content .iot-welcome-back__answer:where(:scope, *),#quarto-document-content .iot-welcome-back__actions button:where(:scope, *){min-height:44px!important}
#iot-welcome-back-reserve:where(:scope, *){display:none}
html:where(:scope)[data-welcome-return="on"] #iot-welcome-back-reserve{display:block;height:614px}
@media(max-width:600px){html:where(:scope)[data-welcome-return="on"] #iot-welcome-back-reserve{height:860px}}
#quarto-document-content .daily-review-card:where(:scope, *){box-sizing:border-box;width:min(100% - 2rem,40rem)}
#quarto-document-content .daily-review-card h2:where(:scope, *){font-size:1.1rem!important;margin:0!important;padding:0!important;line-height:1.25!important}
#quarto-document-content .daily-review-card h3:where(:scope, *){font-size:.9rem!important;margin:0 0 .3rem!important;padding:0!important;line-height:1.25!important}
#quarto-document-content .iot-continue-card h2:where(:scope, *){font-size:1.08rem!important;margin:0!important;padding:0!important;line-height:1.3!important}
#quarto-document-content .iot-continue-card h3:where(:scope, *){font-size:.9rem!important;margin:.75rem 0 .2rem!important;padding:0!important;line-height:1.3!important}
#quarto-document-content .iot-welcome-back h2:after:where(:scope, *),#quarto-document-content .iot-welcome-back h3:before:where(:scope, *),
#quarto-document-content .daily-review-card h2:after:where(:scope, *),#quarto-document-content .daily-review-card h3:before:where(:scope, *),
#quarto-document-content .iot-continue-card h2:after:where(:scope, *),#quarto-document-content .iot-continue-card h3:before:where(:scope, *){display:none!important}
#quarto-document-content .iot-welcome-back__primary:where(:scope, *){background:#0f766e!important;border-color:#0f766e!important;color:#fff!important}
body.iotclass-homepage .iot-continue-card__lead:where(:scope, *){padding:.7rem;border:2px solid #0f766e;border-radius:9px;background:#fff}
body.iotclass-homepage .iot-continue-card__lead .iot-continue-card__last:where(:scope, *){margin:.3rem 0 .45rem}
body.iotclass-homepage .iot-continue-card__clear:where(:scope, *){display:block;margin:.45rem 0 0 auto;font-size:.78rem;padding:.25rem .4rem;border:0;text-decoration:underline;color:#52687b}
#quarto-document-content .daily-review-card h2:where(:scope, *),#quarto-document-content .daily-review-card h3:where(:scope, *),
#quarto-document-content .iot-continue-card h2:where(:scope, *),#quarto-document-content .iot-continue-card h3:where(:scope, *),
#quarto-document-content .iot-welcome-back h2:where(:scope, *),#quarto-document-content .iot-welcome-back h3:where(:scope, *){border:0!important;box-shadow:none!important}
#quarto-document-content .iot-welcome-back:where(:scope, *){padding:.75rem .85rem}
#quarto-document-content .iot-welcome-back h3:where(:scope, *){margin:.4rem 0 .15rem!important;padding:.25rem 0 0!important}
#quarto-document-content .iot-welcome-back__answer:where(:scope, *){min-height:34px;padding:.3rem .55rem}
#quarto-document-content .iot-welcome-back__suggestion:where(:scope, *){padding:.45rem .6rem}
#quarto-document-content .iot-welcome-back__actions:where(:scope, *){margin-top:.4rem}
#quarto-document-content .iot-welcome-back__actions button:where(:scope, *){min-height:36px;padding:.35rem .6rem}

/* Touch targets in interactive practice on narrow learner screens. */
@media (max-width: 500px) {
  form.oi-island input:is([type=number], [type=range]):where(:scope, *),
  form.oi-island > div > label:has(input:is([type=checkbox], [type=radio])):where(:scope, *),
  .imq-drop-zone:where(:scope, *),
  .imq-check-btn:where(:scope, *),
  .ioq-arrow-up:where(:scope, *),
  .ioq-arrow-down:where(:scope, *),
  .ioq-check-btn:where(:scope, *),
  .ilq-hotspot:where(:scope, *),
  .ilq-select:where(:scope, *),
  .ilq-check-btn:where(:scope, *),
  .icq-blank-select:where(:scope, *),
  .icq-check-btn:where(:scope, *) {
    min-width: 44px !important;
    min-height: 44px !important;
    box-sizing: border-box;
  }
}

/* P-011 character profile. Source is the character route; keep this in the canonical presentation sheet. */
.character-profile:where(:scope, *){box-sizing:border-box;width:calc(100% - 2rem);max-width:55rem;margin:2rem auto;padding:1.5rem;background:#fff;border:1px solid var(--gray-300);border-radius:var(--radius-2xl);color:var(--gray-800)}
.character-profile__hero:where(:scope, *){display:grid;grid-template-columns:7.5rem minmax(0,1fr);align-items:center;gap:1rem}
.character-profile__hero img:where(:scope, *){width:7.5rem;height:7.5rem;object-fit:contain}
html:where(:scope)[data-feat-character-voices="on"] .character-profile [data-character-voice-slot]{min-height:7.5rem}
.character-profile h1:where(:scope, *){margin:0;padding:0!important;border:0!important;border-radius:0;background:none!important;box-shadow:none;color:var(--color-primary);font-size:2rem;line-height:1.15}
.character-profile__role:where(:scope, *){margin:.25rem 0;color:var(--gray-600)}
.character-profile__quote:where(:scope, *){margin:.4rem 0;font-style:italic;line-height:1.5}
.character-profile section:where(:scope, *){margin-top:1.4rem}.character-profile h2:where(:scope, *){margin:0 0 .5rem;padding:0!important;border:0!important;background:none;color:var(--color-primary);font-size:1.1rem}.character-profile h2:where(:scope, *)::before{content:none}
.character-profile__job:where(:scope, *){margin:0;padding:.8rem 1rem;border-radius:var(--radius-xl);background:var(--gray-100);line-height:1.5}
.character-profile__chapters:where(:scope, *){display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.6rem}
.character-profile__tile:where(:scope, *){display:grid;align-content:start;gap:.2rem;padding:.5rem .625rem;border:1px solid var(--gray-300);border-radius:var(--radius-xl);background:#fff;color:var(--gray-800);text-decoration:none}
.character-profile__tile:hover:where(:scope, *),.character-profile__tile:focus-visible:where(:scope, *){border-color:var(--color-secondary);box-shadow:0 0 0 2px var(--gray-100)}
.character-profile__tile span:where(:scope, *){color:var(--gray-600);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase}.character-profile__tile strong:where(:scope, *){font-size:.95rem;line-height:1.35}
.character-profile__meet .character-profile__chapters:where(:scope, *){grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.6rem}
.character-profile__meet .character-profile__tile:where(:scope, *){min-height:0;padding:.5rem .625rem;gap:0}
.character-profile__meet .character-profile__tile strong:where(:scope, *){font-size:.85rem;font-weight:400;line-height:1.5}
.character-profile__context:where(:scope, *){color:var(--gray-600);font-size:.75rem;line-height:1.4}
.character-profile__meet [hidden]:where(:scope, *),.character-profile__tile[hidden]:where(:scope, *){display:none!important}
.character-profile__ask:where(:scope, *){box-sizing:border-box;width:100%;margin-top:1rem;border:1px dashed var(--color-secondary);border-radius:var(--radius-xl)}
.character-profile__ask .iot-ask-ai-control:where(:scope, *){display:block;margin:0;max-width:100%}
.character-profile__ask .iot-ask-ai-trigger:where(:scope, *){box-sizing:border-box;display:block;width:100%;min-height:2.75rem;padding:.625rem;text-align:left;white-space:normal;border:0;border-radius:var(--radius-xl);background:transparent;color:var(--gray-800);font-size:.875rem;font-weight:400;line-height:1.4}
.character-profile__ask .iot-ask-ai-trigger:where(:scope, *)::before{content:none}
.character-profile__ask .iot-ask-ai-trigger strong:where(:scope, *){font-weight:700}
html:where(:scope)[data-feat-characters-ask-ai="off"] .character-profile__ask,html:where(:scope)[data-feat-ask-ai="off"] .character-profile__ask{display:none}
html:where(:scope)[data-feat-characters-pages="off"] [data-character-feature="pages"]{display:none}
@media(max-width:560px){.character-profile:where(:scope, *){margin:.75rem auto;padding:1rem}.character-profile__hero:where(:scope, *){grid-template-columns:1fr;text-align:center;gap:.4rem}.character-profile__hero img:where(:scope, *){margin:auto;width:8rem;height:8rem}.character-profile h1:where(:scope, *){font-size:1.65rem}.character-profile__chapters:where(:scope, *),.character-profile__meet .character-profile__chapters:where(:scope, *){grid-template-columns:1fr}}

/* Admin actions belong to the profile menu; only status belongs in the strip. */
.iotclass-profile-presence-menu:has(.iotclass-profile-presence-admin):where(:scope, *) {
  max-height: calc(100dvh - 100px);
  overflow-y: auto;
}
#admin-tools-host .admin-bar__drawer:where(:scope, *) { z-index: 1300; }

/* Admin bar date inherits the strip, not the shared public banner surface. */
#admin-bar #last-edited-banner:where(:scope, *) {
  background: transparent !important;
  background-image: none !important;
  color: #212121 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* P-000 #1: optional learner widgets follow pre-paint feature attributes.
 * CSS also catches late custom elements and keeps local content hidden states.
 * last-edited-banner belongs entirely to the admin bar; it has no learner gate.
 */
html:where(:scope)[data-feat-chapter-reading-time="off"] .iot-reading-time,
html:where(:scope)[data-feat-chapter-related-content="off"] #related-content-container,
html:where(:scope)[data-feat-chapter-summary="off"] .iot-chapter-summary,
html:where(:scope)[data-feat-chapter-knowledge-freshness="off"] .iotclass-freshness-chip,
html:where(:scope)[data-feat-chapter-learner-feedback="off"] .iot-learner-feedback,
html:where(:scope)[data-feat-books-cross-navigation="off"] .cbn-next-card,
html:where(:scope)[data-feat-books-cross-navigation="off"] .cbn-catalog-link,
html:where(:scope)[data-feat-books-cross-navigation="off"] .cbn-prev-affordance,
html:where(:scope)[data-feat-chapter-research-paper-banner="off"] research-paper-banner,
html:where(:scope)[data-feat-chapter-research-papers="off"] .scholarly-references[data-chapter],
html:where(:scope)[data-feat-characters-story-strip="off"] .story-strip,
html:where(:scope)[data-feat-characters-story-strip="off"] .iot-story-strip-lead,
html:where(:scope)[data-feat-books-kids-link="off"] iot-kids-book-link,
html:where(:scope)[data-feat-route-learning-paths="off"] .iot-learning-paths-widget,
html:where(:scope)[data-feat-peer-kit-solo-route="off"] .peer-solo-route { display: none !important; }
/* P-000 #1: pre-paint and dynamic fragments use the resolver's attributes. */
html:where(:scope)[data-feat-progress-xp="off"] :is([data-feature-gate="progress.xp"], .xp-notification, .level-notification, .challenge-notification, #daily-challenge-widget, #progress-badge, .ikc-xp, .ikc-celebration, .imq-xp, .ioq-xp, .ilq-xp, .icq-xp, .iotclass-freshness-chip small, .gn-xp, .badge-notification-xp, .badge-card-xp, .badge-xp-reward, #xp-and-levels-briefly, .dashboard-earn-card, #progress-mine .dashboard-stat:nth-child(2)),
html:where(:scope)[data-feat-progress-streaks="off"] :is([data-feature-gate="progress.streaks"], #streak-indicator, #streaks, #daily-challenge-widget[data-challenge-type="streak"], #progress-mine .dashboard-stat:nth-child(3)),
html:where(:scope)[data-feat-badges="off"] :is([data-feature-gate="badges"], #progress-badges, a[href="#progress-badges"], .badge-notification, .milestone-notification, .badge-showcase, .badge-card),
html:where(:scope)[data-feat-leaderboard="off"] :is([data-feature-gate="leaderboard"], #leaderboard, .leaderboard) {
  display: none !important;
}
html:where(:scope)[data-feat-progress-streaks="off"] :is(.badge-card:has(img[src*="/streak-"]), .badge-notification:has(img[src*="/streak-"]), [data-category-filter="streak"]) {
  display: none !important;
}
/* Progress-page subtitle lists rewards; hide it when one is out of view. */
html:where(:scope):is([data-feat-progress-xp="off"], [data-feat-progress-streaks="off"], [data-feat-badges="off"]) body:has(#progress-mine) #title-block-header .subtitle {
  display: none !important;
}


/* QA-FIX-1 B2-01/B2-02: dark surfaces must scope the heading ink token.
   The global h1..h5 rule is !important, so a normal component color alone
   cannot protect headings on a dark card. Keep light button surfaces separate. */
:root:where(:scope) { --ds-on-dark: #f5f8fc; }
:is(.cls-auth-gate, .cls-continue-card, .pj-header, .ivid-poster):where(:scope, *) {
  --ds-ink: var(--ds-on-dark);
}

/* The poster's orange stop formerly gave white labels less than 2:1.
   Retain the blue/teal/orange palette with text-safe lightness at every stop. */
.iot-video-embed .ivid-poster:where(:scope, *) {
  background: linear-gradient(135deg, #14324a 0%, #175c73 55%, #7a4904 100%) !important;
  color: var(--ds-on-dark) !important;
}

/* Shared legacy OJS result-card palette. Opaque bases let the runtime
   contrast helper recognize gradients and select light inline ink. Darken
   each authored hue at both stops, including translucent result panels. */
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) :is(:is([style*="linear-gradient(135deg, #1f2937" i], [style*="linear-gradient(135deg, rgb(31, 41, 55)"],
  [style*="linear-gradient(135deg, #0f766e" i], [style*="linear-gradient(135deg, rgb(15, 118, 110)"],
  [style*="linear-gradient(135deg, #4b5563" i], [style*="linear-gradient(135deg, rgb(75, 85, 99)"],
  [style*="linear-gradient(135deg, #6d28d9" i], [style*="linear-gradient(135deg, rgb(109, 40, 217)"],
  [style*="linear-gradient(135deg, #1d4ed8" i], [style*="linear-gradient(135deg, rgb(29, 78, 216)"],
  [style*="linear-gradient(135deg, #b45309" i], [style*="linear-gradient(135deg, rgb(180, 83, 9)"],
  [style*="linear-gradient(135deg, #b91c1c" i], [style*="linear-gradient(135deg, rgb(185, 28, 28)"],
  [style*="linear-gradient(135deg, #4c1d95" i], [style*="linear-gradient(135deg, rgb(76, 29, 149)"],
  [style*="linear-gradient(135deg, #7c3aed" i], [style*="linear-gradient(135deg, rgb(124, 58, 237)"],
  [style*="linear-gradient(135deg, #1a1a2e" i], [style*="linear-gradient(135deg, rgb(26, 26, 46)"],
  [style*="linear-gradient(135deg, #16213e" i], [style*="linear-gradient(135deg, rgb(22, 33, 62)"],
  [style*="linear-gradient(135deg, #203241" i], [style*="linear-gradient(135deg, rgb(32, 50, 65)"],
  [style*="linear-gradient(135deg, #2a5260" i], [style*="linear-gradient(135deg, rgb(42, 82, 96)"],
  [style*="linear-gradient(135deg, #2c3e50" i],
  [style*="linear-gradient(135deg, rgb(44, 62, 80)"],
  [style*="linear-gradient(135deg, #34495e" i],
  [style*="linear-gradient(135deg, rgb(52, 73, 94)"],
  [style*="linear-gradient(135deg, #16a085" i],
  [style*="linear-gradient(135deg, rgb(22, 160, 133)"],
  [style*="linear-gradient(135deg, #117a65" i],
  [style*="linear-gradient(135deg, rgb(17, 122, 101)"],
  [style*="linear-gradient(135deg, #3498db" i],
  [style*="linear-gradient(135deg, rgb(52, 152, 219)"],
  [style*="linear-gradient(135deg, #2980b9" i],
  [style*="linear-gradient(135deg, rgb(41, 128, 185)"],
  [style*="linear-gradient(135deg, #9b59b6" i],
  [style*="linear-gradient(135deg, rgb(155, 89, 182)"],
  [style*="linear-gradient(135deg, #8e44ad" i],
  [style*="linear-gradient(135deg, rgb(142, 68, 173)"],
  [style*="linear-gradient(135deg, #e67e22" i],
  [style*="linear-gradient(135deg, rgb(230, 126, 34)"],
  [style*="linear-gradient(135deg, #e74c3c" i],
  [style*="linear-gradient(135deg, rgb(231, 76, 60)"],
  [style*="linear-gradient(135deg, #7f8c8d" i],
  [style*="linear-gradient(135deg, rgb(127, 140, 141)"],
  [style*="linear-gradient(135deg, #d35400" i],
  [style*="linear-gradient(135deg, rgb(211, 84, 0)"],
  [style*="linear-gradient(135deg, #1abc9c" i],
  [style*="linear-gradient(135deg, rgb(26, 188, 156)"],
  [style*="linear-gradient(135deg, #f39c12" i],
  [style*="linear-gradient(135deg, rgb(243, 156, 18)"],
  [style*="linear-gradient(135deg, #123c4a" i],
  [style*="linear-gradient(135deg, rgb(18, 60, 74)"],
  [style*="linear-gradient(135deg, #1b8a78" i],
  [style*="linear-gradient(135deg, rgb(27, 138, 120)"]), :is([style*="background: #2c3e50" i], [style*="background:#2c3e50" i], [style*="background: rgb(44, 62, 80)"], .wearable-battery-results)):where(:scope, *) {
  --ds-ink: var(--ds-on-dark);
  --ds-ink-soft: var(--ds-on-dark);
  --ds-ink-faint: var(--ds-on-dark);
  --bs-body-color: var(--ds-on-dark);
  background-color: var(--qa-result-start, #2c3e50) !important;
  color: var(--ds-on-dark) !important;
}
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) :is([style*="linear-gradient(135deg, #1f2937" i], [style*="linear-gradient(135deg, rgb(31, 41, 55)"],
  [style*="linear-gradient(135deg, #0f766e" i], [style*="linear-gradient(135deg, rgb(15, 118, 110)"],
  [style*="linear-gradient(135deg, #4b5563" i], [style*="linear-gradient(135deg, rgb(75, 85, 99)"],
  [style*="linear-gradient(135deg, #6d28d9" i], [style*="linear-gradient(135deg, rgb(109, 40, 217)"],
  [style*="linear-gradient(135deg, #1d4ed8" i], [style*="linear-gradient(135deg, rgb(29, 78, 216)"],
  [style*="linear-gradient(135deg, #b45309" i], [style*="linear-gradient(135deg, rgb(180, 83, 9)"],
  [style*="linear-gradient(135deg, #b91c1c" i], [style*="linear-gradient(135deg, rgb(185, 28, 28)"],
  [style*="linear-gradient(135deg, #4c1d95" i], [style*="linear-gradient(135deg, rgb(76, 29, 149)"],
  [style*="linear-gradient(135deg, #7c3aed" i], [style*="linear-gradient(135deg, rgb(124, 58, 237)"],
  [style*="linear-gradient(135deg, #1a1a2e" i], [style*="linear-gradient(135deg, rgb(26, 26, 46)"],
  [style*="linear-gradient(135deg, #16213e" i], [style*="linear-gradient(135deg, rgb(22, 33, 62)"],
  [style*="linear-gradient(135deg, #203241" i], [style*="linear-gradient(135deg, rgb(32, 50, 65)"],
  [style*="linear-gradient(135deg, #2a5260" i], [style*="linear-gradient(135deg, rgb(42, 82, 96)"],
  [style*="linear-gradient(135deg, #2c3e50" i],
  [style*="linear-gradient(135deg, rgb(44, 62, 80)"],
  [style*="linear-gradient(135deg, #34495e" i],
  [style*="linear-gradient(135deg, rgb(52, 73, 94)"],
  [style*="linear-gradient(135deg, #16a085" i],
  [style*="linear-gradient(135deg, rgb(22, 160, 133)"],
  [style*="linear-gradient(135deg, #117a65" i],
  [style*="linear-gradient(135deg, rgb(17, 122, 101)"],
  [style*="linear-gradient(135deg, #3498db" i],
  [style*="linear-gradient(135deg, rgb(52, 152, 219)"],
  [style*="linear-gradient(135deg, #2980b9" i],
  [style*="linear-gradient(135deg, rgb(41, 128, 185)"],
  [style*="linear-gradient(135deg, #9b59b6" i],
  [style*="linear-gradient(135deg, rgb(155, 89, 182)"],
  [style*="linear-gradient(135deg, #8e44ad" i],
  [style*="linear-gradient(135deg, rgb(142, 68, 173)"],
  [style*="linear-gradient(135deg, #e67e22" i],
  [style*="linear-gradient(135deg, rgb(230, 126, 34)"],
  [style*="linear-gradient(135deg, #e74c3c" i],
  [style*="linear-gradient(135deg, rgb(231, 76, 60)"],
  [style*="linear-gradient(135deg, #7f8c8d" i],
  [style*="linear-gradient(135deg, rgb(127, 140, 141)"],
  [style*="linear-gradient(135deg, #d35400" i],
  [style*="linear-gradient(135deg, rgb(211, 84, 0)"],
  [style*="linear-gradient(135deg, #1abc9c" i],
  [style*="linear-gradient(135deg, rgb(26, 188, 156)"],
  [style*="linear-gradient(135deg, #f39c12" i],
  [style*="linear-gradient(135deg, rgb(243, 156, 18)"],
  [style*="linear-gradient(135deg, #123c4a" i],
  [style*="linear-gradient(135deg, rgb(18, 60, 74)"],
  [style*="linear-gradient(135deg, #1b8a78" i],
  [style*="linear-gradient(135deg, rgb(27, 138, 120)"]):where(:scope, *) {
  background-image: linear-gradient(135deg, var(--qa-result-start, #2c3e50) 0%, var(--qa-result-stop, #34495e) 100%) !important;
}
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) :is([style*="linear-gradient(135deg, #1f2937" i], [style*="linear-gradient(135deg, rgb(31, 41, 55)"],
  [style*="linear-gradient(135deg, #0f766e" i], [style*="linear-gradient(135deg, rgb(15, 118, 110)"],
  [style*="linear-gradient(135deg, #4b5563" i], [style*="linear-gradient(135deg, rgb(75, 85, 99)"],
  [style*="linear-gradient(135deg, #6d28d9" i], [style*="linear-gradient(135deg, rgb(109, 40, 217)"],
  [style*="linear-gradient(135deg, #1d4ed8" i], [style*="linear-gradient(135deg, rgb(29, 78, 216)"],
  [style*="linear-gradient(135deg, #b45309" i], [style*="linear-gradient(135deg, rgb(180, 83, 9)"],
  [style*="linear-gradient(135deg, #b91c1c" i], [style*="linear-gradient(135deg, rgb(185, 28, 28)"],
  [style*="linear-gradient(135deg, #4c1d95" i], [style*="linear-gradient(135deg, rgb(76, 29, 149)"],
  [style*="linear-gradient(135deg, #7c3aed" i], [style*="linear-gradient(135deg, rgb(124, 58, 237)"],
  [style*="linear-gradient(135deg, #1a1a2e" i], [style*="linear-gradient(135deg, rgb(26, 26, 46)"],
  [style*="linear-gradient(135deg, #16213e" i], [style*="linear-gradient(135deg, rgb(22, 33, 62)"],
  [style*="linear-gradient(135deg, #203241" i], [style*="linear-gradient(135deg, rgb(32, 50, 65)"],
  [style*="linear-gradient(135deg, #2a5260" i], [style*="linear-gradient(135deg, rgb(42, 82, 96)"],
  [style*="linear-gradient(135deg, #2c3e50" i], [style*="linear-gradient(135deg, rgb(44, 62, 80)"]):where(:scope, *) { --qa-result-start: #2c3e50; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) [style*="linear-gradient"]:is([style*="#2c3e50 100%)" i], [style*="rgb(44, 62, 80) 100%)"], [style*=", #2c3e50)" i], [style*=", rgb(44, 62, 80))"]):where(:scope, *) { --qa-result-stop: #2c3e50; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) :is([style*="linear-gradient(135deg, #34495e" i], [style*="linear-gradient(135deg, rgb(52, 73, 94)"]):where(:scope, *) { --qa-result-start: #34495e; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) [style*="linear-gradient"]:is([style*="#34495e 100%)" i], [style*="rgb(52, 73, 94) 100%)"], [style*=", #34495e)" i], [style*=", rgb(52, 73, 94))"]):where(:scope, *) { --qa-result-stop: #34495e; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) :is([style*="linear-gradient(135deg, #16a085" i], [style*="linear-gradient(135deg, rgb(22, 160, 133)"]):where(:scope, *) { --qa-result-start: #0d594b; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) [style*="linear-gradient"]:is([style*="#16a085 100%)" i], [style*="rgb(22, 160, 133) 100%)"], [style*=", #16a085)" i], [style*=", rgb(22, 160, 133))"]):where(:scope, *) { --qa-result-stop: #0d594b; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) :is([style*="linear-gradient(135deg, #117a65" i], [style*="linear-gradient(135deg, rgb(17, 122, 101)"]):where(:scope, *) { --qa-result-start: #0d594b; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) [style*="linear-gradient"]:is([style*="#117a65 100%)" i], [style*="rgb(17, 122, 101) 100%)"], [style*=", #117a65)" i], [style*=", rgb(17, 122, 101))"]):where(:scope, *) { --qa-result-stop: #0d594b; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) :is([style*="linear-gradient(135deg, #3498db" i], [style*="linear-gradient(135deg, rgb(52, 152, 219)"]):where(:scope, *) { --qa-result-start: #16496c; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) [style*="linear-gradient"]:is([style*="#3498db 100%)" i], [style*="rgb(52, 152, 219) 100%)"], [style*=", #3498db)" i], [style*=", rgb(52, 152, 219))"]):where(:scope, *) { --qa-result-stop: #16496c; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) :is([style*="linear-gradient(135deg, #2980b9" i], [style*="linear-gradient(135deg, rgb(41, 128, 185)"]):where(:scope, *) { --qa-result-start: #16496c; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) [style*="linear-gradient"]:is([style*="#2980b9 100%)" i], [style*="rgb(41, 128, 185) 100%)"], [style*=", #2980b9)" i], [style*=", rgb(41, 128, 185))"]):where(:scope, *) { --qa-result-stop: #16496c; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) :is([style*="linear-gradient(135deg, #9b59b6" i], [style*="linear-gradient(135deg, rgb(155, 89, 182)"]):where(:scope, *) { --qa-result-start: #572d67; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) [style*="linear-gradient"]:is([style*="#9b59b6 100%)" i], [style*="rgb(155, 89, 182) 100%)"], [style*=", #9b59b6)" i], [style*=", rgb(155, 89, 182))"]):where(:scope, *) { --qa-result-stop: #572d67; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) :is([style*="linear-gradient(135deg, #8e44ad" i], [style*="linear-gradient(135deg, rgb(142, 68, 173)"]):where(:scope, *) { --qa-result-start: #572d67; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) [style*="linear-gradient"]:is([style*="#8e44ad 100%)" i], [style*="rgb(142, 68, 173) 100%)"], [style*=", #8e44ad)" i], [style*=", rgb(142, 68, 173))"]):where(:scope, *) { --qa-result-stop: #572d67; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) :is([style*="linear-gradient(135deg, #e67e22" i], [style*="linear-gradient(135deg, rgb(230, 126, 34)"]):where(:scope, *) { --qa-result-start: #6e3b0d; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) [style*="linear-gradient"]:is([style*="#e67e22 100%)" i], [style*="rgb(230, 126, 34) 100%)"], [style*=", #e67e22)" i], [style*=", rgb(230, 126, 34))"]):where(:scope, *) { --qa-result-stop: #6e3b0d; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) :is([style*="linear-gradient(135deg, #e74c3c" i], [style*="linear-gradient(135deg, rgb(231, 76, 60)"]):where(:scope, *) { --qa-result-start: #76231a; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) [style*="linear-gradient"]:is([style*="#e74c3c 100%)" i], [style*="rgb(231, 76, 60) 100%)"], [style*=", #e74c3c)" i], [style*=", rgb(231, 76, 60))"]):where(:scope, *) { --qa-result-stop: #76231a; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) :is([style*="linear-gradient(135deg, #7f8c8d" i], [style*="linear-gradient(135deg, rgb(127, 140, 141)"]):where(:scope, *) { --qa-result-start: #414b4d; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) [style*="linear-gradient"]:is([style*="#7f8c8d 100%)" i], [style*="rgb(127, 140, 141) 100%)"], [style*=", #7f8c8d)" i], [style*=", rgb(127, 140, 141))"]):where(:scope, *) { --qa-result-stop: #414b4d; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) :is([style*="linear-gradient(135deg, #d35400" i], [style*="linear-gradient(135deg, rgb(211, 84, 0)"]):where(:scope, *) { --qa-result-start: #6e2b00; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) [style*="linear-gradient"]:is([style*="#d35400 100%)" i], [style*="rgb(211, 84, 0) 100%)"], [style*=", #d35400)" i], [style*=", rgb(211, 84, 0))"]):where(:scope, *) { --qa-result-stop: #6e2b00; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) :is([style*="linear-gradient(135deg, #1abc9c" i], [style*="linear-gradient(135deg, rgb(26, 188, 156)"]):where(:scope, *) { --qa-result-start: #0d594b; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) [style*="linear-gradient"]:is([style*="#1abc9c 100%)" i], [style*="rgb(26, 188, 156) 100%)"], [style*=", #1abc9c)" i], [style*=", rgb(26, 188, 156))"]):where(:scope, *) { --qa-result-stop: #0d594b; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) :is([style*="linear-gradient(135deg, #f39c12" i], [style*="linear-gradient(135deg, rgb(243, 156, 18)"]):where(:scope, *) { --qa-result-start: #714707; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) [style*="linear-gradient"]:is([style*="#f39c12 100%)" i], [style*="rgb(243, 156, 18) 100%)"], [style*=", #f39c12)" i], [style*=", rgb(243, 156, 18))"]):where(:scope, *) { --qa-result-stop: #714707; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) :is([style*="linear-gradient(135deg, #123c4a" i], [style*="linear-gradient(135deg, rgb(18, 60, 74)"]):where(:scope, *) { --qa-result-start: #123c4a; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) [style*="linear-gradient"]:is([style*="#123c4a 100%)" i], [style*="rgb(18, 60, 74) 100%)"], [style*=", #123c4a)" i], [style*=", rgb(18, 60, 74))"]):where(:scope, *) { --qa-result-stop: #123c4a; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) :is([style*="linear-gradient(135deg, #1b8a78" i], [style*="linear-gradient(135deg, rgb(27, 138, 120)"]):where(:scope, *) { --qa-result-start: #105448; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) [style*="linear-gradient"]:is([style*="#1b8a78 100%)" i], [style*="rgb(27, 138, 120) 100%)"], [style*=", #1b8a78)" i], [style*=", rgb(27, 138, 120))"]):where(:scope, *) { --qa-result-stop: #105448; }

:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) :is([style*="linear-gradient(135deg, #1f2937" i], [style*="linear-gradient(135deg, rgb(31, 41, 55)"]):where(:scope, *) { --qa-result-start: #1f2937; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) [style*="linear-gradient"]:is([style*="#1f2937 100%)" i], [style*="rgb(31, 41, 55) 100%)"], [style*=", #1f2937)" i], [style*=", rgb(31, 41, 55))"]):where(:scope, *) { --qa-result-stop: #1f2937; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) :is([style*="linear-gradient(135deg, #0f766e" i], [style*="linear-gradient(135deg, rgb(15, 118, 110)"]):where(:scope, *) { --qa-result-start: #0c554f; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) [style*="linear-gradient"]:is([style*="#0f766e 100%)" i], [style*="rgb(15, 118, 110) 100%)"], [style*=", #0f766e)" i], [style*=", rgb(15, 118, 110))"]):where(:scope, *) { --qa-result-stop: #0c554f; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) :is([style*="linear-gradient(135deg, #4b5563" i], [style*="linear-gradient(135deg, rgb(75, 85, 99)"]):where(:scope, *) { --qa-result-start: #38404a; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) [style*="linear-gradient"]:is([style*="#4b5563 100%)" i], [style*="rgb(75, 85, 99) 100%)"], [style*=", #4b5563)" i], [style*=", rgb(75, 85, 99))"]):where(:scope, *) { --qa-result-stop: #38404a; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) :is([style*="linear-gradient(135deg, #6d28d9" i], [style*="linear-gradient(135deg, rgb(109, 40, 217)"]):where(:scope, *) { --qa-result-start: #4d1c99; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) [style*="linear-gradient"]:is([style*="#6d28d9 100%)" i], [style*="rgb(109, 40, 217) 100%)"], [style*=", #6d28d9)" i], [style*=", rgb(109, 40, 217))"]):where(:scope, *) { --qa-result-stop: #4d1c99; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) :is([style*="linear-gradient(135deg, #1d4ed8" i], [style*="linear-gradient(135deg, rgb(29, 78, 216)"]):where(:scope, *) { --qa-result-start: #163a9f; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) [style*="linear-gradient"]:is([style*="#1d4ed8 100%)" i], [style*="rgb(29, 78, 216) 100%)"], [style*=", #1d4ed8)" i], [style*=", rgb(29, 78, 216))"]):where(:scope, *) { --qa-result-stop: #163a9f; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) :is([style*="linear-gradient(135deg, #b45309" i], [style*="linear-gradient(135deg, rgb(180, 83, 9)"]):where(:scope, *) { --qa-result-start: #783706; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) [style*="linear-gradient"]:is([style*="#b45309 100%)" i], [style*="rgb(180, 83, 9) 100%)"], [style*=", #b45309)" i], [style*=", rgb(180, 83, 9))"]):where(:scope, *) { --qa-result-stop: #783706; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) :is([style*="linear-gradient(135deg, #b91c1c" i], [style*="linear-gradient(135deg, rgb(185, 28, 28)"]):where(:scope, *) { --qa-result-start: #821414; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) [style*="linear-gradient"]:is([style*="#b91c1c 100%)" i], [style*="rgb(185, 28, 28) 100%)"], [style*=", #b91c1c)" i], [style*=", rgb(185, 28, 28))"]):where(:scope, *) { --qa-result-stop: #821414; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) :is([style*="linear-gradient(135deg, #4c1d95" i], [style*="linear-gradient(135deg, rgb(76, 29, 149)"]):where(:scope, *) { --qa-result-start: #4c1d95; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) [style*="linear-gradient"]:is([style*="#4c1d95 100%)" i], [style*="rgb(76, 29, 149) 100%)"], [style*=", #4c1d95)" i], [style*=", rgb(76, 29, 149))"]):where(:scope, *) { --qa-result-stop: #4c1d95; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) :is([style*="linear-gradient(135deg, #7c3aed" i], [style*="linear-gradient(135deg, rgb(124, 58, 237)"]):where(:scope, *) { --qa-result-start: #5427a1; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) [style*="linear-gradient"]:is([style*="#7c3aed 100%)" i], [style*="rgb(124, 58, 237) 100%)"], [style*=", #7c3aed)" i], [style*=", rgb(124, 58, 237))"]):where(:scope, *) { --qa-result-stop: #5427a1; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) :is([style*="linear-gradient(135deg, #1a1a2e" i], [style*="linear-gradient(135deg, rgb(26, 26, 46)"]):where(:scope, *) { --qa-result-start: #1a1a2e; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) [style*="linear-gradient"]:is([style*="#1a1a2e 100%)" i], [style*="rgb(26, 26, 46) 100%)"], [style*=", #1a1a2e)" i], [style*=", rgb(26, 26, 46))"]):where(:scope, *) { --qa-result-stop: #1a1a2e; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) :is([style*="linear-gradient(135deg, #16213e" i], [style*="linear-gradient(135deg, rgb(22, 33, 62)"]):where(:scope, *) { --qa-result-start: #16213e; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) [style*="linear-gradient"]:is([style*="#16213e 100%)" i], [style*="rgb(22, 33, 62) 100%)"], [style*=", #16213e)" i], [style*=", rgb(22, 33, 62))"]):where(:scope, *) { --qa-result-stop: #16213e; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) :is([style*="linear-gradient(135deg, #203241" i], [style*="linear-gradient(135deg, rgb(32, 50, 65)"]):where(:scope, *) { --qa-result-start: #203241; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) [style*="linear-gradient"]:is([style*="#203241 100%)" i], [style*="rgb(32, 50, 65) 100%)"], [style*=", #203241)" i], [style*=", rgb(32, 50, 65))"]):where(:scope, *) { --qa-result-stop: #203241; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) :is([style*="linear-gradient(135deg, #2a5260" i], [style*="linear-gradient(135deg, rgb(42, 82, 96)"]):where(:scope, *) { --qa-result-start: #234450; }
:is(.observablehq, .ojs-in-a-box-waiting-for-module-import) [style*="linear-gradient"]:is([style*="#2a5260 100%)" i], [style*="rgb(42, 82, 96) 100%)"], [style*=", #2a5260)" i], [style*=", rgb(42, 82, 96))"]):where(:scope, *) { --qa-result-stop: #234450; }

/* Small citation text must pass at the banner's darkest gradient stop. */
.research-paper-banner .rpb__meta:where(:scope, *) { color: #52606d; }

/* The About cards use the same brand hues for type and decoration. Give the
   type its own darker shade; borders, portraits and guide dots keep the accent. */
body.iotclass-about-page #quarto-document-content .ab-aside__label:where(:scope, *) { color: #0b6b5b !important; }
body.iotclass-about-page #quarto-document-content .ab-btn--solid:where(:scope, *) {
  background: #0f7c68;
  border-color: #0f7c68;
}
body.iotclass-about-page #quarto-document-content .ab-guide[style*="#c99500" i] .ab-guide__body h3:where(:scope, *) {
  color: #856200 !important;
}

/* B2 contrast follow-up: the flat shared pre surface overrides authored dark
   backgrounds, so its direct text needs the matching shared ink as well. */
#quarto-document-content pre:where(:not(.sourceCode, .astro-code, .iot-worked-example, .cdqs-layer > pre, #practitioner-ado-zscore-persistence > pre)):where(:scope, *) {
  color: #1f2933 !important;
}

/* About's closing gradient needs an opaque button base: the runtime link
   normalizer reads background-color, not gradient stops. */
body.iotclass-about-page #quarto-document-content .ab-btn--solid:where(:scope, *) {
  background: #0b6b5b !important;
  border-color: #0b6b5b !important;
}
body.iotclass-about-page #quarto-document-content .ab-close .ab-btn--light:where(:scope, *) {
  background-color: #1f2c38 !important;
}

/* The compact processing-pattern cards keep their hue on mobile, with
   darker surfaces for white labels and descriptions. */
#quarto-document-content .edge-processing-pattern-card.is-filter:where(:scope, *) { background: #0f7562 !important; }
#quarto-document-content .edge-processing-pattern-card.is-aggregate:where(:scope, *) { background: #246a99 !important; }
#quarto-document-content .edge-processing-pattern-card.is-infer:where(:scope, *) { background: #8b580a !important; }
#quarto-document-content .edge-processing-pattern-card.is-store-forward:where(:scope, *) { background: #804396 !important; }

/* Shared inline knowledge-check difficulty badges use 11px white type. */
.knowledge-check-ojs > span[style*="background: rgb(39, 174, 96)"]:where(:scope, *) { background: #176b3b !important; }
.knowledge-check-ojs > span[style*="background: rgb(243, 156, 18)"]:where(:scope, *) { background: #8b580a !important; }
.knowledge-check-ojs > span[style*="background: rgb(231, 76, 60)"]:where(:scope, *) { background: #ae2c20 !important; }

/* Branded authentication hero and recurring Remi character labels. */
.hero-banner:is([style*="#123c4a" i], [style*="rgb(18, 60, 74)"]):where(:scope, *) {
  --ds-ink: var(--ds-on-dark);
  background: linear-gradient(135deg, #123c4a 0%, #105448 100%) !important;
}
#quarto-document-content :is(.remi-name, .remi-card-title):where(:scope, *) { color: #2e7d32 !important; }

/* Complete the shared light-surface syntax palette and muted table ink. */
#quarto-document-content pre.astro-code span[style*="color:#FDAEB7" i]:where(:scope, *) { color: #9e1c2e !important; }
.observablehq td:is([style*="color: #bdc3c7" i], [style*="color: rgb(189, 195, 199)"]):where(:scope, *) { color: #606a72 !important; }

/* Security-overhead bars also carry text, unlike decorative chart fills. */
.observablehq :is([style*="linear-gradient(to right, rgb(231, 76, 60)"], [style*="linear-gradient(to right, #e74c3c" i]):where(:scope, *) {
  background-color: #76231a !important;
  background-image: linear-gradient(to right, #76231a, #6c2018) !important;
  color: var(--ds-on-dark) !important;
}

/* Use opaque dark stops for the packet-game header's teal glow. */
.packet-journey-game .pj-header:where(:scope, *) {
  background: radial-gradient(circle at top right, #1d645d, #203241 60%) !important;
}
.packet-journey-game .pj-button:where(:scope, *) { background-color: #11695c !important; }

/* Shared rounded status chips use the same text-safe brand shades as badges. */
#quarto-document-content span[style*="border-radius: 999px"][style*="background: #f39c12" i]:where(:scope, *) { background: #8b580a !important; }
#quarto-document-content span[style*="border-radius: 999px"][style*="background: #e74c3c" i]:where(:scope, *) { background: #ae2c20 !important; }
#quarto-document-content span[style*="border-radius: 999px"][style*="background: #16a085" i]:where(:scope, *) { background: #0b6b5b !important; }

/* Homepage accent ink is distinct from its decorative border/tint tokens. */
body.iotclass-homepage .segment-practice .gallery-card :is(.gallery-icon, .gallery-link):where(:scope, *) { color: #145da5 !important; }
body.iotclass-homepage .segment-guides-strip .platform-kicker:where(:scope, *) { color: #a34509; }
body.iotclass-homepage .segment-apply .platform-kicker:where(:scope, *) { color: #7f5b00; }

/* Inline device addresses keep their authored dark chip surface despite
   the general light inline-code rule. */
#quarto-document-content .observablehq code:is([style*="background: #2c3e50" i], [style*="background: rgb(44, 62, 80)"]):where(:scope, *) {
  background: #2c3e50 !important;
  color: var(--ds-on-dark) !important;
}
.category-header[style*="background: #e67e22" i]:where(:scope, *) { background: #9c4f0c !important; }

/* Topic headings inherit the header's light ink; translucent category tags
   shade the same header hue instead of washing it out behind white type. */
.topic-header:where(:scope, *) { --ds-ink: var(--ds-on-dark); }
.topic-header .topic-tag:where(:scope, *) { background: rgba(0, 0, 0, .6) !important; color: #fff !important; }

/* Legacy inline-accent rules have higher specificity than base headings.
   Headings must use their surface's ink token on both light and dark cards. */
#quarto-document-content :is(.observablehq, .ojs-in-a-box-waiting-for-module-import) :is(h1, h2, h3, h4, h5)[style]:where(:scope, *) {
  color: var(--ds-ink) !important;
}

/* Very small legacy result captions need less fading on coloured cards. */
.observablehq div[style*="font-size: 0.75em"][style*="opacity: 0.7"]:where(:scope, *) { opacity: .9 !important; }

/* Reusable snippet controls need the same white-on-teal button contrast. */
#quarto-document-content .snippet-code .copy-btn:where(:scope, *) { background-color: #0b6b5b !important; }
#quarto-document-content .snippet-code .copy-btn:hover:where(:scope, *) { background-color: #095c4e !important; }

/* QA-FIX-1c: estate contrast follow-up. Keep the first-round palette and
   restore readable caption ink on the shared legacy OJS result cards. */
#quarto-document-content :is(.observablehq, .ojs-in-a-box-waiting-for-module-import)
  :is(div, p, span, small)[style*="font-size"]:is(
    [style*="opacity: 0.7"], [style*="opacity:0.7"],
    [style*="opacity: 0.8"], [style*="opacity:0.8"],
    [style*="opacity: 0.9"], [style*="opacity:0.9"]):where(:scope, *) {
  opacity: 1 !important;
}

/* Flat result/status surfaces need the same text-safe shades as gradients.
   An opaque base also lets the existing runtime choose light text correctly. */
#quarto-document-content :is(.observablehq, .ojs-in-a-box-waiting-for-module-import)
  :is([style*="background: #16a085" i],
    [style*="background:#16a085" i],
    [style*="background: rgb(22, 160, 133)" i],
    [style*="background:rgb(22, 160, 133)" i],
    [style*="background-color: #16a085" i],
    [style*="background-color:#16a085" i],
    [style*="background-color: rgb(22, 160, 133)" i],
    [style*="background-color:rgb(22, 160, 133)" i]):where(:scope, *) {
  background-color: #0b6b5b !important;
  color: var(--ds-on-dark) !important;
  --ds-ink: var(--ds-on-dark);
  --bs-body-color: var(--ds-on-dark);
}
#quarto-document-content :is(.observablehq, .ojs-in-a-box-waiting-for-module-import)
  :is([style*="background: #9b59b6" i],
    [style*="background:#9b59b6" i],
    [style*="background: rgb(155, 89, 182)" i],
    [style*="background:rgb(155, 89, 182)" i],
    [style*="background-color: #9b59b6" i],
    [style*="background-color:#9b59b6" i],
    [style*="background-color: rgb(155, 89, 182)" i],
    [style*="background-color:rgb(155, 89, 182)" i]):where(:scope, *) {
  background-color: #572d67 !important;
  color: var(--ds-on-dark) !important;
  --ds-ink: var(--ds-on-dark);
  --bs-body-color: var(--ds-on-dark);
}
#quarto-document-content :is(.observablehq, .ojs-in-a-box-waiting-for-module-import)
  :is([style*="background: #e74c3c" i],
    [style*="background:#e74c3c" i],
    [style*="background: rgb(231, 76, 60)" i],
    [style*="background:rgb(231, 76, 60)" i],
    [style*="background-color: #e74c3c" i],
    [style*="background-color:#e74c3c" i],
    [style*="background-color: rgb(231, 76, 60)" i],
    [style*="background-color:rgb(231, 76, 60)" i]):where(:scope, *) {
  background-color: #ae2c20 !important;
  color: var(--ds-on-dark) !important;
  --ds-ink: var(--ds-on-dark);
  --bs-body-color: var(--ds-on-dark);
}
#quarto-document-content :is(.observablehq, .ojs-in-a-box-waiting-for-module-import)
  :is([style*="background: #e67e22" i],
    [style*="background:#e67e22" i],
    [style*="background: rgb(230, 126, 34)" i],
    [style*="background:rgb(230, 126, 34)" i],
    [style*="background-color: #e67e22" i],
    [style*="background-color:#e67e22" i],
    [style*="background-color: rgb(230, 126, 34)" i],
    [style*="background-color:rgb(230, 126, 34)" i]):where(:scope, *) {
  background-color: #9c4f0c !important;
  color: var(--ds-on-dark) !important;
  --ds-ink: var(--ds-on-dark);
  --bs-body-color: var(--ds-on-dark);
}

/* Global table chrome paints pale header cells even inside a dark widget.
   Scope their ink back to the light surface instead of inheriting card ink. */
#quarto-document-content :is(.observablehq, .ojs-in-a-box-waiting-for-module-import) thead th:where(:scope, *) {
  --ds-ink: #1f2933;
  color: #1f2933 !important;
}

/* The small protocol eyebrow sits on a pale blue/green result gradient. */
#quarto-document-content .observablehq [style*="color: #5e768e" i]:where(:scope, *) { color: #4d6379 !important; }

/* Legacy chapter-local banner CSS uses !important, so keep this override
   specific to the shared component's eyebrow on its violet surface. */
#quarto-document-content .math-bridge-banner .math-bridge-banner__eyebrow:where(:scope, *) {
  width: fit-content;
  padding: .1em .3em;
  border-radius: .2rem;
  background: #f5f3ff !important;
  color: #4c1d95 !important;
}

/* Repeated chapter-local sensor widgets share these semantic classes. */
#quarto-document-content :is(.spm-value, .spm-card strong, .scal-good):where(:scope, *) { color: #0b6b5b !important; }
#quarto-document-content .stad-chip[style*="background:#2c7fb8" i]:where(:scope, *) { background-color: #205f8a !important; }

/* Red table readouts use the same hue at text-safe lightness. */
#quarto-document-content .observablehq td:is([style*="color: #e74c3c" i], [style*="color:#e74c3c" i]):where(:scope, *) { color: #ae2c20 !important; }

/* The horizontal payload bars use the result-card teal palette as well. */
#quarto-document-content .observablehq :is([style*="linear-gradient(to right, rgb(22, 160, 133)"], [style*="linear-gradient(to right, #16a085" i]):where(:scope, *) {
  background-color: #0b6b5b !important;
  background-image: linear-gradient(to right, #0b6b5b, #0d594b) !important;
  color: var(--ds-on-dark) !important;
}

/* Allow grid-item chapter sections to shrink to their authored track. */
#quarto-document-content :is(.datagramdepth-shell, .ipv4depth-copy, .rplconstruct-copy) > section:is(.level2, .level3):where(:scope, *) {
  min-width: 0;
}

/* assessment-design#q2: bounded practice task, including narrow screens. */
iot-performance-task:where(:scope, *) { display: block; }
iot-performance-task[hidden]:where(:scope, *) { display: none; }
.assessment-task-panel:where(:scope, *) { border: 1px solid var(--bs-border-color, #767676); border-radius: .5rem; padding: 1rem; margin-block: 1.5rem; }
.assessment-task-panel textarea:where(:scope, *) { display: block; width: 100%; box-sizing: border-box; margin-top: .5rem; font: inherit; }
.assessment-task-panel label:where(:scope, *) { display: block; }
.task-evidence-label:where(:scope, *) { display: block; font-size: .875rem; line-height: 1.4; overflow-wrap: anywhere; margin-top: .4rem; }

/* Summary controls stay quiet until the learner focuses or points at the player. */
.iot-audio-summary-controls:where(:scope, *) { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (hover: hover) {
  .iot-audio-summary-controls:where(:scope, *) { opacity: 0; }
  .iot-audio-summary:hover .iot-audio-summary-controls:where(:scope, *),
  .iot-audio-summary:focus-within .iot-audio-summary-controls:where(:scope, *) { opacity: 1; }
}
/* P-017: build-owned responsive help instances; runtime only binds search. */
.iot-support-findable:where(:scope, *) { border: 1px solid var(--bs-border-color, #ccc); border-radius: 8px; padding: 1rem; margin-block: 1rem; overflow-wrap: anywhere; min-width: 0; }
.iot-support-findable h2:where(:scope, *) { font-size: 1.15rem; }
.iot-support-findable input:where(:scope, *) { display: block; width: 100%; max-width: 100%; box-sizing: border-box; margin-block: .5rem; min-height: 44px; }
.iot-support-findable summary:where(:scope, *) { cursor: pointer; padding-block: .5rem; }
.iot-support-findable time:where(:scope, *) { white-space: nowrap; }

/* Animation tour integration: transport styles (source-identical). */
/* CONTROLS-01. Theme tokens inherit from the nearest explicit theme. */
:root:where(:scope),
[data-theme="light"]:where(:scope, *) {
  --iot-transport-panel: #fff;
  --iot-transport-ink: #20343d;
  --iot-transport-primary: #0b6657;
  --iot-transport-primary-ink: #fff;
  --iot-transport-border: #b8c8cd;
  --iot-transport-secondary: #fff;
  --iot-transport-hover: #e5efed;
  --iot-transport-focus: #1865f2;
  --iot-transport-disabled-fill: #e4eaed;
  --iot-transport-disabled-ink: #62727b;
  --iot-transport-disabled-border: #b8c8cd;
}

@media (prefers-color-scheme: dark) {
  :root:where(:scope):not([data-theme="light"]) {
    --iot-transport-panel: #1c2d35;
    --iot-transport-ink: #edf5f6;
    --iot-transport-primary: #78dcca;
    --iot-transport-primary-ink: #102e28;
    --iot-transport-border: #718790;
    --iot-transport-secondary: #243b44;
    --iot-transport-hover: #324b55;
    --iot-transport-focus: #9dbfff;
    --iot-transport-disabled-fill: #293b43;
    --iot-transport-disabled-ink: #91a4ad;
    --iot-transport-disabled-border: #566c75;
  }
}

[data-theme="dark"]:where(:scope, *) {
  --iot-transport-panel: #1c2d35;
  --iot-transport-ink: #edf5f6;
  --iot-transport-primary: #78dcca;
  --iot-transport-primary-ink: #102e28;
  --iot-transport-border: #718790;
  --iot-transport-secondary: #243b44;
  --iot-transport-hover: #324b55;
  --iot-transport-focus: #9dbfff;
  --iot-transport-disabled-fill: #293b43;
  --iot-transport-disabled-ink: #91a4ad;
  --iot-transport-disabled-border: #566c75;
}

.iot-transport:where(:scope, *) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  color: var(--iot-transport-ink);
  background: var(--iot-transport-panel);
  font: 600 14px/20px system-ui, sans-serif;
}

.iot-transport__controls:where(:scope, *) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  max-width: 100%;
}

.iot-transport .iot-transport__button:where(:scope, *) {
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  min-width: 88px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--iot-transport-border);
  border-radius: 8px;
  background: var(--iot-transport-secondary);
  color: var(--iot-transport-ink);
  font: 600 14px/20px system-ui, sans-serif;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transform: none;
  transition: none;
}

.iot-transport .iot-transport__button--primary:where(:scope, *) {
  /* Reserve the width of Pause as well as Play: toggling never shifts siblings. */
  width: 104px;
  min-width: 104px;
  border-color: var(--iot-transport-primary);
  background: var(--iot-transport-primary);
  color: var(--iot-transport-primary-ink);
}

.iot-transport__button svg:where(:scope, *) {
  display: block;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}

.iot-transport .iot-transport__button:enabled:hover:where(:scope, *) {
  background: var(--iot-transport-hover);
}

.iot-transport .iot-transport__button--primary:enabled:hover:where(:scope, *) {
  background: var(--iot-transport-primary);
  filter: brightness(.9);
}

.iot-transport .iot-transport__button:enabled:active:where(:scope, *) {
  box-shadow: inset 0 0 0 2px currentColor;
}

.iot-transport .iot-transport__button:focus-visible:where(:scope, *) {
  outline: 3px solid var(--iot-transport-focus);
  outline-offset: 3px;
}

.iot-transport .iot-transport__button:disabled:where(:scope, *) {
  background: var(--iot-transport-disabled-fill);
  color: var(--iot-transport-disabled-ink);
  border-color: var(--iot-transport-disabled-border);
  opacity: 1;
  filter: none;
  cursor: not-allowed;
  box-shadow: none;
}

.iot-transport__status:where(:scope, *) {
  flex: 1 1 160px;
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  .iot-transport .iot-transport__button:where(:scope, *) { padding: 0 12px; }
  .iot-transport .iot-transport__button--primary:where(:scope, *) { min-width: 104px; }
  .iot-transport__status:where(:scope, *) { flex-basis: 100%; }
}

/* Animation tour integration: narrated-tour styles (reviewed). */
.iot-narrated-tour:where(:scope, *) {
  color: var(--iot-nudge-text);
  background: var(--iot-nudge-surface);
  border: 1px solid var(--iot-nudge-border);
  border-radius: 0.5rem;
  padding: 1rem;
}

.iot-narrated-tour__player:where(:scope, *) { color: var(--iot-text-dark); }
.iot-narrated-tour__mode:where(:scope, *),
.iot-narrated-tour__status:where(:scope, *) { color: var(--iot-muted); }
.iot-narrated-tour__caption:where(:scope, *) {
  color: var(--iot-nudge-text);
  font-size: max(1rem, 1em);
  line-height: 1.5;
}
.iot-narrated-tour__beats:where(:scope, *) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.iot-narrated-tour__beats button:where(:scope, *) {
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  color: var(--iot-nudge-text);
  background: var(--iot-nudge-surface-muted);
  border: 1px solid var(--iot-nudge-border-strong);
  border-radius: 0.25rem;
  cursor: pointer;
}
.iot-narrated-tour__beats:where(:scope, *) { margin: 0.75rem 0 0; padding: 0; list-style: none; }
.iot-narrated-tour__beats li:where(:scope, *) { min-width: 0; }
.iot-narrated-tour__motion:where(:scope, *) { min-height: 44px; display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.75rem 0; }
.iot-narrated-tour__player input[type="range"]:where(:scope, *) { min-height: 44px; display: block; width: 100%; }
.iot-narrated-tour__beats button:focus-visible:where(:scope, *),
.iot-narrated-tour__motion input:focus-visible:where(:scope, *),
.iot-narrated-tour__player input[type="range"]:focus-visible:where(:scope, *) {
  outline: 3px solid var(--iot-nudge-muted);
  outline-offset: 2px;
}
.iot-narrated-tour__transcript:where(:scope, *) {
  margin-top: 1rem;
  padding: 0.75rem;
  color: var(--iot-nudge-text);
  background: var(--iot-depth-layer-bg);
  border: 1px solid var(--iot-depth-layer-border);
  border-radius: 0.25rem;
}
.iot-narrated-tour__transcript summary:where(:scope, *) { cursor: pointer; }
.iot-narrated-tour__transcript[open]:where(:scope, *) { border-color: var(--iot-border); }

.iot-embed-modal:has(.iot-narrated-tour__player--docked):where(:scope, *) {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: calc(100dvh - 2rem);
  max-height: calc(100dvh - 2rem);
  max-width: calc(100vw - 2rem);
  min-width: 0;
  overflow: hidden;
}
.iot-narrated-tour__player--docked:where(:scope, *) {
  box-sizing: border-box;
  flex: 0 1 auto;
  min-width: 0;
  min-height: 0;
  max-height: 38vh;
  padding: 0.5rem;
  overflow: auto;
  background: var(--iot-nudge-surface);
  border: 1px solid var(--iot-nudge-border);
  border-radius: 0.5rem;
  overflow-wrap: anywhere;
}
.iot-embed-modal:has(.iot-narrated-tour__player--docked) .iot-embed-frame-shell:where(:scope, *) {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  width: 100%;
}
.iot-embed-modal:has(.iot-narrated-tour__player--docked) .iot-embed-frame-shell iframe:where(:scope, *) {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}
.iot-narrated-tour__player--docked .iot-narrated-tour__beats:where(:scope, *) {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 0.25rem;
}
.iot-narrated-tour__player--docked .iot-narrated-tour__beats li:where(:scope, *) {
  flex: 0 0 auto;
}
.iot-narrated-tour__player--docked .iot-narrated-tour__beats button:where(:scope, *) {
  white-space: nowrap;
}
.iot-narrated-tour__player--docked .iot-narrated-tour__caption:where(:scope, *) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin-block: 0.5rem;
}
.iot-narrated-tour__player--docked .iot-narrated-tour__beats button:where(:scope, *) {
  min-width: 44px;
}
.iot-narrated-tour__player--docked .iot-narrated-tour__motion:where(:scope, *),
.iot-narrated-tour__player--docked input[type="range"]:where(:scope, *) {
  min-height: 44px;
}
.iot-narrated-tour__player--docked :focus-visible:not(.iot-transport__button):where(:scope, *) {
  outline: 3px solid var(--iot-nudge-muted);
  outline-offset: 2px;
}
@media (min-width: 1024px) {
  .iot-embed-modal:has(.iot-narrated-tour__player--docked):where(:scope, *) {
    display: grid;
    grid-template-columns: 22rem minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0.75rem;
  }
  .iot-embed-modal:has(.iot-narrated-tour__player--docked) > :not(.iot-narrated-tour__player--docked):not(.iot-embed-frame-shell):where(:scope, *) {
    grid-column: 1 / -1;
  }
  .iot-narrated-tour__player--docked:where(:scope, *) {
    grid-column: 1;
    grid-row: 2;
    max-height: none;
    height: 100%;
  }
  .iot-embed-modal:has(.iot-narrated-tour__player--docked) .iot-embed-frame-shell:where(:scope, *) {
    grid-column: 2;
    grid-row: 2;
    height: 100%;
  }
  .iot-narrated-tour__player--docked .iot-narrated-tour__beats:where(:scope, *) {
    flex-wrap: wrap;
    overflow-x: visible;
  }
  .iot-narrated-tour__player--docked .iot-narrated-tour__beats li:where(:scope, *) {
    flex: 0 1 auto;
  }
  .iot-narrated-tour__player--docked .iot-narrated-tour__beats button:where(:scope, *) {
    white-space: normal;
  }
  .iot-narrated-tour__player--docked .iot-narrated-tour__caption:where(:scope, *) {
    display: block;
    overflow: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  .iot-narrated-tour *:where(:scope, *),
  .iot-narrated-tour *:where(:scope, *)::before,
  .iot-narrated-tour *:where(:scope, *)::after { transition: none !important; animation: none !important; }
}
.iot-narrated-tour[data-reduced-motion="true"] *:where(:scope, *),
.iot-narrated-tour[data-reduced-motion="true"] *:where(:scope, *)::before,
.iot-narrated-tour[data-reduced-motion="true"] *:where(:scope, *)::after {
  transition: none !important;
  animation: none !important;
}
.iot-watchdog-anim:where(:scope, *) {
  width: 100%;
  min-width: 0;
}
.iot-watchdog-anim svg:where(:scope, *) {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}
.iot-watchdog-anim .watchdog-frame:where(:scope, *) { fill: #334155; stroke: none; }
.iot-watchdog-anim :is(rect, line, path).wd-axis:where(:scope, *) { fill: none; stroke: #475569; }
.iot-watchdog-anim rect.wd-other:where(:scope, *) { fill: #64748b; stroke: #475569; }
.iot-watchdog-anim rect.wd-card:where(:scope, *) { fill: #fbbf24; stroke: #b45309; }
.iot-watchdog-anim line.wd-safe:where(:scope, *) { fill: none; stroke: #dc2626; stroke-dasharray: 6 4; }
.iot-watchdog-anim line.wd-candidate:where(:scope, *) { fill: none; stroke: #7e22ce; stroke-dasharray: 6 4; }
.iot-watchdog-anim path.wd-brace:where(:scope, *) { fill: none; stroke: #7c3aed; }
.iot-watchdog-anim :is(rect, line).wd-redesign:where(:scope, *) { fill: #99f6e4; stroke: #0f766e; stroke-width: 2; }
.iot-watchdog-anim rect.wd-queue:where(:scope, *) { fill: #94a3b8; stroke: #475569; }
.iot-watchdog-anim rect.wd-background:where(:scope, *) { fill: #99f6e4; stroke: #0f766e; }
.iot-watchdog-anim rect.wd-proof:where(:scope, *) { fill: #0f766e; stroke: #115e59; }
.iot-watchdog-anim line.wd-kick:where(:scope, *) { fill: none; stroke: #15803d; stroke-width: 2; }
.iot-watchdog-anim line.wd-playhead:where(:scope, *) { fill: none; stroke: #1f2937; stroke-width: 2; }
.iot-watchdog-anim rect.wd-progress:where(:scope, *) { fill: #2563eb; fill-opacity: 0.18; stroke: none; }
.iot-watchdog-anim text:where(:scope, *) {
  fill: #0f172a;
  stroke: none;
  stroke-dasharray: none;
  font-size: var(--wd-font-size, 14px);
}
.iot-watchdog-anim text.wd-title:where(:scope, *) { font-size: var(--wd-title-size, 15px); }
.iot-watchdog-anim text.wd-proof:where(:scope, *) { fill: #fff; }

/* FMCW tour: fixed light drawing surface preserves signal/text contrast in all themes. */
.iot-fmcw-anim:where(:scope, *) { width: 100%; min-width: 0; margin-block: 1rem; }
.iot-fmcw-anim svg:where(:scope, *) {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  background: #f8fafc;
  border-radius: 0.5rem;
  font-family: system-ui, sans-serif;
}
.iot-fmcw-anim :is(path, line, rect, circle):where(:scope, *) {
  fill: none;
  stroke: #475569;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.iot-fmcw-anim .fr-axis:where(:scope, *) { fill: none; stroke: #64748b; }
.iot-fmcw-anim .fr-bracket:where(:scope, *) { fill: none; stroke: #475569; }
.iot-fmcw-anim .fr-bay:where(:scope, *) { fill: #e2e8f0; stroke: #94a3b8; }
.iot-fmcw-anim .fr-floor:where(:scope, *) { fill: none; stroke: #ffffff; stroke-width: 5; }
.iot-fmcw-anim .fr-radar:where(:scope, *) { fill: #dbeafe; stroke: #1d4ed8; }
.iot-fmcw-anim .fr-reflector:where(:scope, *) { fill: #e2e8f0; stroke: #334155; }
.iot-fmcw-anim .fr-camera-body:where(:scope, *) { fill: #cbd5e1; stroke: #475569; }
.iot-fmcw-anim .fr-camera-lens:where(:scope, *) { fill: #f8fafc; stroke: #475569; }
.iot-fmcw-anim .fr-dust-cloud:where(:scope, *) { fill: #b8a68b; fill-opacity: 0.48; stroke: none; }
.iot-fmcw-anim .fr-tx:where(:scope, *) { fill: none; stroke: #1d4ed8; stroke-width: 3; }
.iot-fmcw-anim .fr-echo:where(:scope, *) { fill: none; stroke: #9a3412; stroke-width: 3; stroke-dasharray: 7 5; }
.iot-fmcw-anim .fr-gap:where(:scope, *) { fill: none; stroke: #7e22ce; stroke-width: 3; }
.iot-fmcw-anim .fr-mixer:where(:scope, *) { fill: #f1f5f9; stroke: #334155; }
.iot-fmcw-anim .fr-beat:where(:scope, *) { fill: none; stroke: #0f766e; stroke-width: 2.5; }
.iot-fmcw-anim .fr-sample:where(:scope, *) { fill: #0f172a; stroke: #f8fafc; stroke-width: 1; }
.iot-fmcw-anim .fr-bin:where(:scope, *) { fill: #e2e8f0; stroke: #64748b; }
.iot-fmcw-anim .fr-chosen-bin:where(:scope, *) { fill: #ccfbf1; stroke: #0f766e; stroke-width: 3; }
.iot-fmcw-anim .fr-phase:where(:scope, *) { fill: none; stroke: #0f172a; stroke-width: 3; }
.iot-fmcw-anim .fr-doppler:where(:scope, *) { fill: none; stroke: #7e22ce; }
.iot-fmcw-anim .fr-band:where(:scope, *) { fill: #ccfbf1; stroke: #0f766e; }
.iot-fmcw-anim .fr-outside:where(:scope, *) { fill: #f1f5f9; stroke: #64748b; stroke-dasharray: 4 4; }
.iot-fmcw-anim .fr-boundary:where(:scope, *) { fill: none; stroke: #334155; stroke-width: 3; }
.iot-fmcw-anim .fr-unsupported:where(:scope, *) { fill: none; stroke: #9f1239; }
.iot-fmcw-anim text:where(:scope, *) {
  fill: #0f172a;
  stroke: none;
  stroke-dasharray: none;
  font-size: var(--fr-font-size, 14px);
  font-weight: 400;
}
.iot-fmcw-anim text.fr-title:where(:scope, *) { font-size: var(--fr-title-size, 15px); font-weight: 650; }
.iot-fmcw-anim .fr-tx-legend text:where(:scope, *) { fill: #1d4ed8; }
.iot-fmcw-anim .fr-echo-legend text:where(:scope, *) { fill: #9a3412; }
.iot-fmcw-anim .fr-false-claim.is-crossed text:where(:scope, *) {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  fill: #9f1239;
}
@media (prefers-reduced-motion: reduce) {
  .iot-fmcw-anim *:where(:scope, *) { animation: none !important; transition: none !important; }
}
.iot-narrated-tour[data-reduced-motion="true"] .iot-fmcw-anim *:where(:scope, *) {
  animation: none !important;
  transition: none !important;
}
/* Clip paint is explicit too; this rectangle reveals the growing dashed echo. */
.iot-fmcw-anim .fr-echo-clip:where(:scope, *) { fill: #ffffff; stroke: none; }
.iot-fmcw-anim .fr-stage:where(:scope, *) { fill: #e0f2fe; stroke: #075985; }
.iot-fmcw-anim .fr-flow:where(:scope, *) { fill: none; stroke: #0f766e; stroke-dasharray: 3 4; }
.iot-fmcw-anim .fr-flow-dot:where(:scope, *) { fill: #0f766e; stroke: #f8fafc; }
.iot-fmcw-anim .fr-doppler-bin:where(:scope, *) { fill: #f3e8ff; stroke: #7e22ce; }

/* Acquisition timing: SVG text scales to 14px rendered; all paint is explicit. */
.iot-acq-anim:where(:scope, *) { width: 100%; min-width: 0; background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 8px; }
.iot-acq-anim svg.iot-acq-diagram:where(:scope, *) { display: block; width: 100%; height: auto; max-width: none; font-family: system-ui, sans-serif; }
.iot-acq-anim text:where(:scope, *) { fill: #1e293b; stroke: none; font-size: var(--acq-font-size, 14px); font-weight: 400; }
.iot-acq-anim text.acq-title:where(:scope, *) { font-size: var(--acq-title-size, 15px); font-weight: 650; }
.iot-acq-anim .acq-axis:where(:scope, *) { fill: none; stroke: #64748b; stroke-width: 2; }
.iot-acq-anim .acq-signal:where(:scope, *) { fill: none; stroke: #075985; stroke-width: 3; }
.iot-acq-anim .acq-sample:where(:scope, *) { fill: #075985; stroke: #f8fafc; stroke-width: 1; }
.iot-acq-anim .acq-event:where(:scope, *) { fill: none; stroke: #9a3412; stroke-width: 3; }
.iot-acq-anim .acq-arrival:where(:scope, *) { fill: none; stroke: #075985; stroke-width: 3; stroke-dasharray: 5 4; }
.iot-acq-anim .acq-jolt:where(:scope, *) { fill: #9a3412; stroke: #f8fafc; stroke-width: 2; }
.iot-acq-anim .acq-receipt:where(:scope, *) { fill: #075985; stroke: #f8fafc; stroke-width: 2; }
.iot-acq-anim .acq-delay:where(:scope, *) { fill: none; stroke: #7e22ce; stroke-width: 2; }
.iot-acq-anim .acq-offline:where(:scope, *) { fill: none; stroke: #9f1239; stroke-width: 3; stroke-dasharray: 7 5; }
.iot-acq-anim .acq-loss:where(:scope, *) { fill: none; stroke: #9f1239; stroke-width: 3; }
.iot-acq-anim .acq-buffer:where(:scope, *) { fill: #e2e8f0; stroke: #475569; stroke-width: 2; }
.iot-acq-anim .acq-queue:where(:scope, *), .iot-acq-anim .acq-ingress-slot:where(:scope, *), .iot-acq-anim .acq-retained-slot:where(:scope, *) { fill: #0f766e; stroke: #115e59; }
.iot-acq-anim .acq-flow:where(:scope, *) { fill: none; stroke: #075985; stroke-width: 2; stroke-dasharray: 5 4; }
.iot-acq-anim .acq-incoming:where(:scope, *), .iot-acq-anim .acq-replay-packet:where(:scope, *) { fill: #075985; stroke: #f8fafc; }
.iot-acq-anim .acq-fill:where(:scope, *), .iot-acq-anim .acq-retained:where(:scope, *) { fill: #0f766e; stroke: #115e59; }
.iot-acq-anim .acq-demand:where(:scope, *) { fill: #ffe4e6; stroke: #9f1239; stroke-width: 2; }
.iot-acq-anim .acq-missing:where(:scope, *) { fill: #ffe4e6; stroke: #9f1239; stroke-width: 2; }
.iot-acq-anim .acq-hatch:where(:scope, *) { fill: none; stroke: #9f1239; stroke-width: 2; }
.iot-acq-anim .acq-evicted:where(:scope, *) { fill: #9f1239; stroke: #881337; }
.iot-acq-anim .acq-newest:where(:scope, *) { fill: #0f766e; stroke: #115e59; }
.iot-acq-anim .acq-urgent-line:where(:scope, *) { fill: none; stroke: #9a3412; stroke-width: 2; }
.iot-acq-anim .acq-urgent-packet:where(:scope, *) { fill: #9a3412; stroke: #f8fafc; }
.iot-acq-anim .acq-key-bg:where(:scope, *) { fill: #e0f2fe; stroke: #075985; }
@media (prefers-reduced-motion: reduce) {
  .iot-acq-anim *:where(:scope, *) { animation: none !important; transition: none !important; }
}
.iot-narrated-tour[data-reduced-motion="true"] .iot-acq-anim *:where(:scope, *) { animation: none !important; transition: none !important; }

/* Matter: viewBox units equal rendered pixels, including mobile text. */
.iot-matter-anim:where(:scope, *) { width: 100%; min-width: 0; margin-block: 1rem; background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 8px; }
.iot-matter-anim svg.iot-matter-diagram:where(:scope, *) { display: block; width: 100%; height: auto; max-width: none; font-family: system-ui, sans-serif; }
.iot-matter-anim text:where(:scope, *) { stroke: none; }
.iot-matter-anim :is(path, line, rect, circle):where(:scope, *) { vector-effect: non-scaling-stroke; }
@media (prefers-reduced-motion: reduce) {
  .iot-matter-anim *:where(:scope, *) { animation: none !important; transition: none !important; }
}
.iot-narrated-tour[data-reduced-motion="true"] .iot-matter-anim *:where(:scope, *) { animation: none !important; transition: none !important; }
/* SDN failover: explicit SVG paint, 14px rendered type, clock-driven motion only. */
.iot-sdn-anim:where(:scope, *) { width: 100%; min-width: 0; background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 8px; }
.iot-sdn-anim svg.iot-sdn-diagram:where(:scope, *) { display: block; width: 100%; height: auto; max-width: none; font-family: system-ui, sans-serif; }
.iot-sdn-anim text:where(:scope, *) { stroke: none; fill: #172b42; font-size: var(--sdn-font, 14px); font-weight: 400; }
.iot-sdn-anim text.sdn-title:where(:scope, *) { font-weight: 650; }
@media (prefers-reduced-motion: reduce) {
  .iot-sdn-anim *:where(:scope, *) { animation: none !important; transition: none !important; }
}
.iot-narrated-tour[data-reduced-motion="true"] .iot-sdn-anim *:where(:scope, *) { animation: none !important; transition: none !important; }
/* Nyquist tour: explicit light plotting surface and screen-sized SVG type. */
.iot-nyquist-anim:where(:scope, *) { width: 100%; min-width: 0; margin-block: 1rem; }
.iot-nyquist-anim svg:where(:scope, *) {
  display: block;
  width: 100%;
  height: auto;
  background: #ffffff;
  border-radius: 8px;
  font-family: system-ui, sans-serif;
}
.iot-nyquist-anim :is(path, line, rect, circle):where(:scope, *) { vector-effect: non-scaling-stroke; }
.iot-nyquist-anim text:where(:scope, *) { fill: #172b43; stroke: none; font-size: var(--ny-font-size, 14px); }
.iot-narrated-tour[data-reduced-motion="true"] .iot-nyquist-anim *:where(:scope, *) { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .iot-nyquist-anim *:where(:scope, *) { animation: none !important; transition: none !important; }
}

/* Module audio packaging; only mounted when audio.playlists is enabled. */
.iot-audio-playlists:where(:scope, *) { min-width: 0; overflow-wrap: anywhere; }
.iot-audio-playlists__controls:where(:scope, *) { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: .75rem; }
.iot-audio-playlists button:where(:scope, *) { font: inherit; min-height: 44px; }
.iot-audio-playlists li:where(:scope, *) { margin-block: .5rem; }
.iot-audio-playlists li button:where(:scope, *) { max-width: 100%; text-align: start; }
.iot-audio-playlists [aria-current="true"]:where(:scope, *) { font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
  .iot-audio-playlists__controls:where(:scope, *) { opacity: 0; }
  .iot-audio-playlists:hover .iot-audio-playlists__controls:where(:scope, *),
  .iot-audio-playlists:focus-within .iot-audio-playlists__controls:where(:scope, *) { opacity: 1; }
}
/* P-014: learner-requested recovery beside the original lesson. */
.access-recovery:where(:scope, *) { box-sizing: border-box; max-width: 100%; margin: 1rem 0; padding: 1rem; border: 1px solid #a8bdc5; border-radius: .75rem; background: #f3f8fa; color: #193540; overflow-wrap: anywhere; }
.access-recovery h2:where(:scope, *) { margin-top: 0; font-size: 1.25rem; }
.access-recovery label:where(:scope, *) { display: block; font-weight: 700; margin-bottom: .4rem; }
.access-recovery select:where(:scope, *) { box-sizing: border-box; width: 100%; min-height: 44px; padding: .5rem; font: inherit; background: white; color: #193540; }
.access-recovery li:where(:scope, *) { margin: .6rem 0; }
.access-recovery a:where(:scope, *) { color: #164e78; }
.access-recovery :focus-visible:where(:scope, *) { outline: 3px solid #155eef; outline-offset: 3px; }
/* support.load: staff aggregate review, including narrow admin drawers. */
.support-load:where(:scope, *) { margin-block: 1rem; padding: 1rem; border: 1px solid #697786; border-radius: .5rem; }
.support-load form:where(:scope, *) { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; }
.support-load label:where(:scope, *) { display: grid; gap: .3rem; max-width: 100%; }
.support-load input:where(:scope, *) { width: 10rem; max-width: 100%; padding: .5rem; }
.support-load button:where(:scope, *) { padding: .6rem; }
/* Optional calibration relationship and revision exercises (P-023). */
iot-rework-map[hidden]:where(:scope, *) { display: none !important; }
iot-rework-map:where(:scope, *) { display: block; min-width: 0; margin: 1rem 0; }
.iot-rework-card:where(:scope, *) { border: 1px solid currentColor; border-radius: .5rem; padding: 1rem; overflow-wrap: anywhere; }
.iot-rework-card h3:where(:scope, *) { margin-top: 0; }
.iot-rework-card fieldset:where(:scope, *) { min-width: 0; padding: .75rem; border: 1px solid currentColor; }
.iot-rework-card legend:where(:scope, *) { float: none; width: auto; font-size: 1rem; padding: 0 .25rem; }
.iot-rework-card label:where(:scope, *) { display: block; margin: .75rem 0; }
.iot-rework-card select:where(:scope, *), .iot-rework-card textarea:where(:scope, *) { display: block; box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; margin-top: .4rem; padding: .5rem; font: inherit; color: inherit; background: var(--bs-body-bg, white); border: 1px solid currentColor; border-radius: .25rem; }
.iot-rework-card select:where(:scope, *) { min-height: 44px; }
.iot-rework-card textarea:where(:scope, *) { resize: vertical; }
.iot-rework-card button:where(:scope, *) { min-height: 44px; padding: .5rem .75rem; font: inherit; color: inherit; background: var(--bs-body-bg, white); border: 1px solid currentColor; border-radius: .25rem; white-space: normal; }
.iot-rework-card summary:where(:scope, *) { cursor: pointer; padding: .6rem 0; min-height: 44px; }
.iot-rework-card :is(button, select, textarea, summary):focus-visible:where(:scope, *) { outline: 3px solid #2673c6; outline-offset: 3px; }
/* P-017 support-level class draft; elements exist only while enabled. */
.support-levels:where(:scope, *) { margin: 1.5rem 0; padding: 1rem; border: 1px solid #d2d6dc; border-radius: 8px; overflow-wrap: anywhere; }
.support-levels-form:where(:scope, *) { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.support-levels-form label:where(:scope, *) { display: grid; gap: .25rem; }
.support-levels-form input:where(:scope, *) { width: 100%; min-width: 0; box-sizing: border-box; font: inherit; padding: .5rem; }
.support-levels button:where(:scope, *) { min-height: 44px; }
.support-levels-results article:where(:scope, *) { margin-top: 1rem; border-top: 1px solid #d2d6dc; }

/* Build-owned chrome uses the settled flex geometry, without first-paint controls. */
[data-narration-reservation]:where(:scope, *) { visibility: hidden; }
html:where(:scope):not([data-feat-audio-read="on"]) [data-narration-reservation] { display: none; }
/* Both placements stay outside layout and tab order without a prepaint grant. */
html:where(:scope):not([data-feat-support="on"]) .iot-support-findable,
html:where(:scope):not([data-feat-support-help-routes="on"]) .iot-support-findable,
html:where(:scope):not([data-feat-support-findable="on"]) .iot-support-findable { display: none !important; }
.iot-support-findable--rail:where(:scope, *) { display: none; }
@media (min-width: 1200px) {
  .iot-support-findable--rail:where(:scope, *) { display: block; }
  .iot-support-findable--fallback:where(:scope, *) { display: none; }
}

html:where(:scope):not([data-feat-support="on"]) main > .iot-support-findable,
html:where(:scope):not([data-feat-support-help-routes="on"]) main > .iot-support-findable,
html:where(:scope):not([data-feat-support-findable="on"]) main > .iot-support-findable { display: none; }

/* Sparse or learner-hidden TOCs use the existing end-of-article help location. */
@media (min-width: 1200px) {
  body.iot-toc-hidden .iot-support-findable--fallback:where(:scope, *),
  html:where(:scope):not([data-iot-stored-depth="overview"]):not([data-iot-stored-depth="under-the-hood"]):has(#quarto-margin-sidebar[data-iot-toc-sparse-l1="true"]) .iot-support-findable--fallback,
  html:where(:scope)[data-iot-stored-depth="overview"]:has(#quarto-margin-sidebar[data-iot-toc-sparse-l0="true"]) .iot-support-findable--fallback,
  html:where(:scope)[data-iot-stored-depth="under-the-hood"]:has(#quarto-margin-sidebar[data-iot-toc-sparse-l2="true"]) .iot-support-findable--fallback { display: block; }
}
html:where(:scope):not([data-feat-support="on"]) main > .iot-support-findable--fallback,
html:where(:scope):not([data-feat-support-help-routes="on"]) main > .iot-support-findable--fallback,
html:where(:scope):not([data-feat-support-findable="on"]) main > .iot-support-findable--fallback { display: none !important; }

/* Direct support links remain identifiable without color. */
.support-contacts > a:where(:scope, *),
.iot-support-you-said > a:where(:scope, *) { text-decoration: underline; }

/* Option A phone prototype: one shared dialog, authored SVG dimensions. */
@media (max-width: 768px) {
  .iot-figure-dialog[open]:where(:scope, *) {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    margin: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100dvh;
    max-width: 100%;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
  }
  .iot-figure-dialog[open] .iot-figure-dialog__bar:where(:scope, *) {
    flex: none;
    padding-top: max(0.75rem, env(safe-area-inset-top));
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-left: max(1rem, env(safe-area-inset-left));
    touch-action: manipulation;
  }
  .iot-figure-dialog[open] .iot-figure-dialog__close:where(:scope, *) {
    min-width: 44px;
    min-height: 44px;
  }
  .iot-figure-dialog[open] .iot-figure-dialog__viewport:where(:scope, *) {
    flex: 1;
    min-height: 0;
    min-width: 0;
    height: auto;
    box-sizing: border-box;
    overflow: auto;
    touch-action: pinch-zoom;
    text-align: left;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
  .iot-figure-dialog[open] .iot-figure-dialog__art:where(:scope, *) {
    display: block;
    width: var(--iot-figure-design-width) !important;
    min-width: var(--iot-figure-design-width) !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden;
    background: white;
  }
  .iot-figure-dialog[open] .iot-figure-dialog__caption:where(:scope, *) {
    position: sticky;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    margin-top: 1rem;
    font-size: 1rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
  figure[data-iot-figure-ready]:where(:scope, *) { cursor: zoom-in; }
  figure[data-iot-figure-ready]:focus-visible:where(:scope, *) {
    outline: 3px solid #2563eb;
    outline-offset: 3px;
  }
}


/* FIG-DESKTOP-01 / D-282: the embedding, not the artwork. JS selects diagrams
 * and supplies a symmetric safe width around the existing column centre.
 * These rules deliberately follow the generated per-image width caps. */
@media (min-width: 769px) {
  :is(main, #quarto-document-content) :is(figure, .quarto-figure, .iot-figure).iot-figure-breakout:where(:scope, *) {
    box-sizing: border-box;
    width: min(1000px, calc(100vw - 64px), var(--iot-figure-desktop-width, 100%)) !important;
    max-width: min(1000px, calc(100vw - 64px), var(--iot-figure-desktop-width, 100%)) !important;
    min-width: 0 !important;
    margin-inline: calc((100% - min(1000px, calc(100vw - 64px), var(--iot-figure-desktop-width, 100%))) / 2) !important;
    justify-self: start;
    cursor: zoom-in;
  }
  :is(main, #quarto-document-content) .iot-figure-breakout.iot-figure-maxheight :is(img[src], svg):where(:scope, *) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    object-fit: contain;
    transform: none;
  }
  :is(main, #quarto-document-content) .iot-figure-maxheight :is(img, svg):where(:scope, *) {
    max-height: 80vh !important;
    object-fit: contain;
  }
  :is(main, #quarto-document-content) .iot-figure-breakout:focus-visible:where(:scope, *) {
    outline: 3px solid #155eef;
    outline-offset: 3px;
  }
}

/* EIC10-S CANONICAL SECTION START: compact link spacing */
/* Compact chapter links and linked list rows need at least 24 CSS px of
 * space, including when local type or mobile rules shrink their contents.
 * Size the list row rather than changing inline links' text layout: prose
 * and wrapped references keep their authored line boxes. Anim tour pages
 * and the separately owned players are outside this rule's scope. */
body:not(:has(.anim, .tour-block, math-bridge, .math-bridge-banner, explainer-player, .explainer-player))
  :is(a.iotclass-dashboard-unit-cell, #quarto-document-content li:has(> a[href])):where(:scope, *) {
  min-inline-size: 24px;
  min-block-size: 24px;
}
/* EIC10-S CANONICAL SECTION END: compact link spacing */


/* Shared Ask AI controls; chapter and platform pages use the canonical bundle. */
/* Ask AI Option A: a quiet heading pill and an anchored overlay. */
.iot-ask-ai-slot:where(:scope, *) { display: none; }
html:where(:scope)[data-feat-ask-ai="on"][data-feat-ask-ai-placement-section="on"] .iot-ask-ai-slot {
  display: inline-flex;
  box-sizing: border-box;
  inline-size: 4.56rem;
  min-block-size: 44px;
  vertical-align: middle;
  margin: 0 .15rem 0 .55rem;
}
.iot-ask-ai-slot > .iot-ask-ai-control:where(:scope, *) { margin: 0; }
.iot-ask-ai-control:where(:scope, *) { display: inline-flex; vertical-align: middle; margin: 0 .15rem 0 .55rem; }
.iot-ask-ai-trigger:where(:scope, *) {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: .1rem .62rem;
  border: 0; border-radius: 999px;
  background: transparent; color: #087e6d;
  font: inherit; font-size: .8rem; font-weight: 600; line-height: 1.1; white-space: nowrap;
  cursor: pointer;
}
.iot-ask-ai-trigger:where(:scope, *)::before {
  content: ''; position: absolute; z-index: -1; inset: 50% 0 auto;
  height: 26px; transform: translateY(-50%); box-sizing: border-box;
  border: 1px solid var(--ieee-teal); border-radius: 999px; background: var(--flat-surface);
}
.iot-ask-ai-trigger:hover:where(:scope, *) { color: #075e53; }
.iot-ask-ai-trigger:hover:where(:scope, *)::before { background: #e6f6f2; }
.iot-ask-ai-panel:where(:scope, *) {
  --ask-ai-action-teal: color-mix(in srgb, var(--ieee-teal) 72%, black);
  box-sizing: border-box; display: grid; gap: .85rem;
  position: fixed; z-index: 3001; width: min(28rem, calc(100vw - 16px)); max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; margin: 0;
  padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--flat-border-strong);
  border-radius: var(--flat-radius-lg); background: var(--flat-surface);
  color: var(--flat-text); box-shadow: 0 12px 32px rgba(20,35,50,.18);
  font-size: 16px; line-height: 1.45; white-space: normal;
}
.iot-ask-ai-panel[hidden]:where(:scope, *), .iot-ask-ai-scrim[hidden]:where(:scope, *), .iot-ask-ai-after-answer[hidden]:where(:scope, *) { display: none; }
.iot-ask-ai-panel-header:where(:scope, *) { display: flex; justify-content: space-between; align-items: start; gap: .6rem; }
.iot-ask-ai-panel-header h3:where(:scope, *) { margin: 0; font-size: 1.05rem; line-height: 1.3; font-weight: 700; }
#quarto-document-content .iot-ask-ai-panel-header h3:where(:scope, *) { margin: 0; font-size: 1.05rem; }
/* Site heading colors can fall below contrast on the white panel surface. */
.iot-ask-ai-panel[data-ask-ai-owner="glossary"] .iot-ask-ai-panel-header h3:where(:scope, *) { color: #102a43; }
.iot-ask-ai-about:where(:scope, *) { margin: .1rem 0 0; color: var(--flat-text-muted); font-size: .85rem; }
.iot-ask-ai-close:where(:scope, *) { flex: none; min-width: 2.75rem; min-height: 2.75rem; margin: -.55rem -.55rem 0 0; border: 0; background: transparent; color: var(--flat-text-muted); border-radius: 6px; font-size: 1.2rem; cursor: pointer; }
.iot-ask-ai-field:where(:scope, *) { display: grid; gap: .3rem; }
.iot-ask-ai-legend:where(:scope, *) { color: var(--flat-text-muted); text-transform: uppercase; letter-spacing: .05em; font-size: .78rem; font-weight: 700; }
.iot-ask-ai-field select:where(:scope, *) { box-sizing: border-box; width: 100%; min-height: 2.75rem; padding: .45rem .5rem; border: 1px solid var(--flat-border-strong); border-radius: var(--flat-radius-md); background: var(--flat-control-bg); color: var(--flat-text); font: inherit; }
.iot-ask-ai-chips:where(:scope, *) { display: flex; flex-wrap: wrap; gap: .35rem; }
.iot-ask-ai-chip:where(:scope, *) { min-height: 2.75rem; padding: .2rem .55rem; border: 1px solid var(--flat-border-strong); border-radius: 999px; background: var(--flat-control-bg); color: var(--flat-text); font: inherit; font-size: .85rem; line-height: 1.15; cursor: pointer; }
.iot-ask-ai-chip[aria-checked="true"]:where(:scope, *) { background: var(--ask-ai-action-teal); border-color: var(--ask-ai-action-teal); color: #fff; }
.iot-ask-ai-tiles:where(:scope, *) { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .45rem; }
.iot-ask-ai-tile:where(:scope, *) { display: flex; flex-direction: column; align-items: center; gap: .25rem; min-width: 0; min-height: 5.9rem; padding: .45rem .15rem; border: 1px solid var(--flat-border-strong); border-radius: var(--flat-radius-lg); background: var(--flat-control-bg); color: var(--flat-text); font: inherit; font-size: .78rem; line-height: 1.2; cursor: pointer; }
.iot-ask-ai-tile[aria-checked="true"]:where(:scope, *) { border-color: var(--ieee-teal); box-shadow: inset 0 0 0 2px var(--ieee-teal); }
.iot-ask-ai-tile small:where(:scope, *) { color: var(--flat-text-muted); font-size: .68rem; }
.iot-ask-ai-logo:where(:scope, *) { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: #fff; font-weight: 800; font-size: .85rem; }
.iot-ask-ai-logo-chatgpt:where(:scope, *) { background: #10a37f; }.iot-ask-ai-logo-claude:where(:scope, *) { background: #d97757; }.iot-ask-ai-logo-gemini:where(:scope, *) { background: #8e71b4; }.iot-ask-ai-logo-grok:where(:scope, *) { background: #111; }
[data-ask-ai-owner="lab"] .iot-ask-ai-logo-chatgpt:where(:scope, *) { background: #087e6d; }
.iot-ask-ai-preview summary:where(:scope, *) { display: flex; align-items: center; min-height: 2.75rem; color: var(--flat-text-muted); font-size: .85rem; cursor: pointer; }
.iot-ask-ai-preview summary:where(:scope, *)::before { content: '▸'; margin-right: .35rem; }
.iot-ask-ai-preview[open] summary:where(:scope, *)::before { content: '▾'; }
.iot-ask-ai-preview textarea:where(:scope, *) { box-sizing: border-box; display: block; width: 100%; min-height: 9rem; margin-top: .4rem; padding: .5rem; border: 1px solid var(--flat-border-strong); border-radius: var(--flat-radius-md); background: var(--flat-control-bg); color: var(--flat-text); font: inherit; font-size: .82rem; line-height: 1.4; resize: vertical; }
.iot-ask-ai-actions:where(:scope, *) { display: flex; gap: .5rem; }
.iot-ask-ai-actions button:where(:scope, *) { min-height: 2.75rem; padding: .65rem .9rem; border-radius: var(--flat-radius-lg); font: inherit; cursor: pointer; }
.iot-ask-ai-actions .iot-ask-ai-primary:where(:scope, *) { flex: 1 1 auto; border: 1px solid var(--ask-ai-action-teal); background: var(--ask-ai-action-teal); color: #fff; font-weight: 700; }
.iot-ask-ai-secondary:where(:scope, *) { flex: none; border: 1px solid var(--flat-border-strong); background: var(--flat-surface); color: var(--flat-text); }
.iot-ask-ai-status:where(:scope, *) { margin: 0; color: #165b35; font-size: .8rem; }.iot-ask-ai-status:empty:where(:scope, *) { display: none; }
.iot-ask-ai-privacy:where(:scope, *) { margin: 0; color: var(--flat-text-muted); font-size: .74rem; line-height: 1.55; }
.iot-ask-ai-hide:where(:scope, *) { justify-self: start; min-height: 2.75rem; padding: .25rem 0; border: 0; background: transparent; color: var(--flat-text-muted); font: inherit; font-size: .75rem; text-decoration: underline; cursor: pointer; }
.iot-ask-ai-extra:where(:scope, *) { margin: .5rem 0; }
.iot-ask-ai-continue:where(:scope, *) { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: .6rem; margin: 1.2rem 0; padding: .7rem 1rem; border: 1px dashed var(--ieee-teal); border-radius: var(--flat-radius-lg); background: var(--flat-surface); }
.iot-ask-ai-continue p:where(:scope, *) { margin: 0; color: var(--flat-text-muted); font-size: .92rem; }
.iot-ask-ai-continue .iot-ask-ai-control:where(:scope, *) { margin: 0; }

.iot-ask-ai-trigger:focus-visible:where(:scope, *), .iot-ask-ai-panel :is(button,select,textarea,summary):focus-visible:where(:scope, *) { outline: 3px solid var(--flat-focus-ring); outline-offset: 2px; }
 .iot-ask-ai-scrim:where(:scope, *) { position: fixed; inset: 0; z-index: 3000; background: rgba(16, 42, 67, .48); }
@media (max-width: 640px) {
  .iot-ask-ai-panel:where(:scope, *) { inset: auto 0 0; width: 100%; max-width: 100%; max-height: min(90dvh, 760px); border-radius: 16px 16px 0 0; padding-bottom: max(1.1rem, env(safe-area-inset-bottom)); }
  .iot-ask-ai-control:where(:scope, *) { margin-left: .3rem; }
  .iot-ask-ai-continue:where(:scope, *) { grid-template-columns: 1fr; }
  .iot-ask-ai-continue .iot-ask-ai-control:where(:scope, *) { justify-self: start; }
  .iot-ask-ai-tile:where(:scope, *) { font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) { .iot-ask-ai-panel:where(:scope, *) { scroll-behavior: auto; } }

.iot-ask-ai-chapter-tools:where(:scope, *) {
  margin: 0.5rem 0 1rem;
}

.iot-ask-ai-drawer-backdrop:where(:scope, *) {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(16, 42, 67, 0.38);
}
.iot-ask-ai-drawer-backdrop[hidden]:where(:scope, *) { display: none; }
.iot-ask-ai-drawer:where(:scope, *) {
  position: fixed;
  z-index: 2001;
  inset: 0 0 0 auto;
  display: grid;
  align-content: start;
  gap: 0.8rem;
  width: min(30rem, 94vw);
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  padding: 1.25rem;
  border-left: 1px solid #9aaabd;
  background: #fff;
  color: var(--ieee-navy, #102a43);
  box-shadow: -0.5rem 0 1.5rem rgba(16, 42, 67, 0.2);
  box-sizing: border-box;
}
.iot-ask-ai-drawer[hidden]:where(:scope, *) { display: none; }
.iot-ask-ai-drawer .iot-ask-ai-providers:where(:scope, *) { display: flex; flex-wrap: wrap; gap: .5rem; }
.iot-ask-ai-drawer .iot-ask-ai-providers button:where(:scope, *) {
  min-height: 2.75rem; padding: .6rem .9rem; border: 1px solid color-mix(in srgb, var(--ieee-teal) 72%, black);
  border-radius: var(--flat-radius-md); background: color-mix(in srgb, var(--ieee-teal) 72%, black); color: #fff;
  font: inherit; font-weight: 600; cursor: pointer;
}
.iot-ask-ai-drawer .iot-ask-ai-hide:where(:scope, *) {
  min-height: 2.75rem; padding: .5rem 0; border: 0; background: transparent;
  color: var(--flat-text-muted); font: inherit; text-decoration: underline; cursor: pointer;
}
.iot-ask-ai-drawer-header:where(:scope, *) { display: flex; align-items: start; justify-content: space-between; gap: 0.75rem; }
.iot-ask-ai-drawer h2:where(:scope, *) { margin: 0; font-size: 1.3rem; }
.iot-ask-ai-drawer h3:where(:scope, *) { margin: 0; font-size: 1rem; }
.iot-ask-ai-drawer label:where(:scope, *) { display: grid; gap: 0.35rem; font-weight: 600; }
.iot-ask-ai-drawer select:where(:scope, *),
.iot-ask-ai-drawer textarea:where(:scope, *) {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid #75879a;
  border-radius: var(--radius-sm, 0.25rem);
  padding: 0.55rem;
  color: inherit;
  background: #fff;
  font: inherit;
}
.iot-ask-ai-drawer select:where(:scope, *) { min-height: 2.75rem; }
.iot-ask-ai-drawer textarea:where(:scope, *) { resize: vertical; font-size: 0.875rem; line-height: 1.45; }
.iot-ask-ai-drawer-close:where(:scope, *),
.iot-ask-ai-history li button:where(:scope, *) {
  min-height: 2.75rem;
  border: 1px solid #75879a;
  border-radius: var(--radius-sm, 0.25rem);
  background: #fff;
  color: inherit;
  padding: 0.5rem 0.75rem;
  font: inherit;
  cursor: pointer;
}
.iot-ask-ai-history:where(:scope, *) { display: grid; gap: 0.5rem; padding-top: 0.75rem; border-top: 1px solid #d5dce3; }
.iot-ask-ai-history p:where(:scope, *) { margin: 0; font-size: 0.875rem; }
.iot-ask-ai-history ul:where(:scope, *) { display: grid; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.iot-ask-ai-history li button:where(:scope, *) { width: 100%; text-align: left; overflow-wrap: anywhere; }
.iot-ask-ai-drawer button:focus-visible:where(:scope, *),
.iot-ask-ai-drawer select:focus-visible:where(:scope, *),
.iot-ask-ai-drawer textarea:focus-visible:where(:scope, *) { outline: 3px solid var(--focus-ring-color, rgba(59, 130, 246, 0.5)); outline-offset: 2px; }

@media (max-width: 480px) {
  .iot-ask-ai-providers:where(:scope, *) { display: grid; }
  .iot-ask-ai-providers button:where(:scope, *) { width: 100%; text-align: left; }
  .iot-ask-ai-drawer:where(:scope, *) { width: 100vw; padding: 1rem; }
}

.iot-ask-ai-attempt-first:where(:scope, *) { display: grid; gap: .4rem; }
.iot-ask-ai-attempt-first label:where(:scope, *) { display: block; }
.iot-ask-ai-attempt-first label:has(input[type="checkbox"]):where(:scope, *) {
  display: flex; align-items: center; min-height: 44px; gap: .25rem;
}
.iot-ask-ai-attempt-first textarea:where(:scope, *) {
  display: block; box-sizing: border-box; width: 100%; padding: .5rem;
  border: 1px solid #75879a; border-radius: .25rem; background: #fff;
  color: #102a43; font: inherit; resize: vertical;
}
.iot-ask-ai-attempt-first p:where(:scope, *) { margin: 0; font-size: .8rem; }
.iot-ask-ai-attempt-first button:where(:scope, *) { justify-self: start; min-height: 44px; font: inherit; }


/* Page-stable chapter panel visibility. Header placement is owned by chapter-header-compact.js. */
#quarto-document-content [hidden]:where(:scope, *),
.platform-header [hidden]:where(:scope, *) { display: none; }
html:where(:scope)[data-feat-access-toolkit-reading-depth="off"] #quarto-document-content .iot-section-depth-toggle { display: none; }
html:where(:scope)[data-feat-chapter-study-deck="off"] #quarto-document-content slides-banner[deck-url],
html:where(:scope)[data-feat-chapter-header-compact="on"] #quarto-document-content slides-banner[deck-url],
html:where(:scope)[data-feat-chapter-header-compact="on"] #quarto-document-content > .iot-section-depth-toggle,
html:where(:scope)[data-feat-chapter-header-compact="on"] #quarto-document-content > .iot-chunk-controls { display: none; }

/* Classroom-authorized print entry and shared welcome card. */

  html:where(:scope)[data-feat-teacher-kit="off"] .teacher-kit-print-entry,
  html:where(:scope)[data-feat-teacher-kit-run-sheet="off"] .teacher-kit-print-entry,
  html:where(:scope)[data-feat-teacher-kit-print="off"] .teacher-kit-print-entry { display: none; }
  .teacher-kit-print-entry[data-feature-visibility-owner="classroom"]:not([data-classroom-owner="verified"]):where(:scope, *) { display: none; }
  .teacher-kit-print-entry:where(:scope, *) { margin: 0 0 1rem; }
  .teacher-kit-print-entry a:where(:scope, *) { display: inline-flex; align-items: center; padding: .55rem .85rem; border: 1px solid #2e7d32; border-radius: 6px; color: #245b2c; font-weight: 650; text-decoration: none; }
  .teacher-kit-print-entry a:hover:where(:scope, *) { background: #f1f8f1; }
  .iot-welcome-back:where(:scope, *) { box-sizing:border-box;width:min(100%,600px);margin:1rem 0 1.5rem;padding:.75rem .85rem;border:1px solid #cbd5e1;border-left:5px solid #0f766e;border-radius:.8rem;background:#fff;box-shadow:0 5px 18px #183b2414;overflow-wrap:anywhere;color:#1e293b; }
  .iot-welcome-back h2:where(:scope, *) { margin:0;font-size:1.25rem; }
  .iot-welcome-back h3:where(:scope, *) { margin:.65rem 0 .2rem;padding:0;border:0;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#52687b; }
  .iot-welcome-back p:where(:scope, *) { margin:.25rem 0;font-size:.94rem;line-height:1.45; }
  .iot-welcome-back__intro:where(:scope, *){color:#52687b}
  .iot-welcome-back__recap:where(:scope, *){padding:.55rem .7rem;border-left:3px solid #d97706;border-radius:0 8px 8px 0;background:#eaf0f3}
  .iot-welcome-back__recall:where(:scope, *){display:grid;gap:.3rem;margin-top:.45rem}
  .iot-welcome-back__answer:where(:scope, *){min-height:44px;text-align:left;padding:.45rem .55rem;border:1px solid #cbd5e1;border-radius:8px;background:white;color:#1e293b;cursor:pointer}
  .iot-welcome-back__answer.is-selected:where(:scope, *){border-color:#0f766e;background:#e9f6f2}
  .iot-welcome-back__suggestion:where(:scope, *){margin-top:.5rem;padding:.45rem .6rem;border:1px solid #0f766e;border-radius:8px}
  .iot-welcome-back__suggestion h3:where(:scope, *){margin:0;padding:0;border:0}
  .iot-welcome-back__actions:where(:scope, *){display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.4rem}
  .iot-welcome-back__actions button:where(:scope, *){min-height:44px;padding:.45rem .6rem;border:1px solid #cbd5e1;border-radius:8px;background:white;color:#1e293b;cursor:pointer}
  .iot-welcome-back__actions .iot-welcome-back__primary:where(:scope, *){background:#0f766e;border-color:#0f766e;color:white}
  .iot-welcome-back :focus-visible:where(:scope, *){outline:3px solid #155eef;outline-offset:2px}
  @media print { .teacher-kit-print-entry:where(:scope, *) { display: none; } }


/* Ideator bridge: canonical chapter banner styles. */
/* Fixed IoT Ideator product identity: deliberately does not inherit --pc-main. */
iot-ideator-bridge:where(:scope, *),
.iot-ideator-bridge:where(:scope, *) {
  display: block;
  margin: 1.35rem 0;
  min-width: 0;
}

/* Quarto wraps custom elements in a prose <p>; the phone prose measure is
   deliberately narrower than the chapter column, but this banner is not prose. */
#quarto-document-content p:has(> iot-ideator-bridge):where(:scope, *) {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline-end: 0;
}

/* Device speech and recorded narration prepend controls to prose paragraphs.
   Keep chapter playback, but do not overlay paragraph controls on the card. */
#quarto-document-content p:has(> iot-ideator-bridge) > .iot-audio-part-controls:where(:scope, *),
#quarto-document-content p:has(> iot-ideator-bridge) > .iot-narration-part-controls:where(:scope, *) {
  display: none;
}

@media (max-width: 760px) {
  /* The chapter shell adds 0.85rem inline padding at this breakpoint. The
     bridge deliberately spans that padded chapter column edge to edge. */
  #quarto-document-content p:has(> iot-ideator-bridge):where(:scope, *) {
    width: calc(100% + 1.7rem);
    margin-inline: -0.85rem;
  }
}

.iot-ideator-bridge__banner:where(:scope, *) {
  --ideator-accent: #16a085;
  --ideator-action: #0d7067;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 1.05rem 1.15rem;
  border: 1px solid #294b5d;
  border-left: 6px solid var(--ideator-accent);
  border-radius: 10px;
  box-sizing: border-box;
  background: linear-gradient(118deg, #102c3b 0%, #17394a 67%, #144b50 100%);
  box-shadow: 0 8px 20px rgba(17, 44, 59, 0.16);
  color: #fff;
}

#quarto-document-content .iot-ideator-bridge__character:where(:scope, *) {
  display: block;
  width: 58px;
  height: 58px;
  border: 2px solid rgba(169, 238, 228, 0.78);
  border-radius: 50%;
  box-sizing: border-box;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(3, 20, 28, 0.28);
}

.iot-ideator-bridge__copy:where(:scope, *) {
  min-width: 0;
}

.iot-ideator-bridge__eyebrow:where(:scope, *) {
  display: block;
  margin-bottom: 0.2rem;
  color: #a9eee4;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.iot-ideator-bridge__copy p:where(:scope, *) {
  margin: 0;
  color: #f5fbfc;
  font-size: 0.98rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.iot-ideator-bridge__copy strong:where(:scope, *) {
  color: #fff;
  font-weight: 800;
}

.iot-ideator-bridge__copy em:where(:scope, *) {
  color: #c8f6ef;
  font-weight: 700;
}

.iot-ideator-bridge__action:where(:scope, *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 154px;
  min-height: 46px;
  padding: 0.65rem 0.95rem;
  border: 1px solid #8be7da;
  border-radius: 7px;
  box-sizing: border-box;
  background: var(--ideator-action);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: box-shadow 0.16s ease, transform 0.16s ease, background-color 0.16s ease;
}

#quarto-document-content .iot-ideator-bridge__action:where(:scope, *),
#quarto-document-content .iot-ideator-bridge__action:visited:where(:scope, *),
#quarto-document-content .iot-ideator-bridge__action:hover:where(:scope, *),
#quarto-document-content .iot-ideator-bridge__action:focus:where(:scope, *) {
  color: #fff;
}

.iot-ideator-bridge__action:where(:scope, *)::after {
  margin-left: 0.4rem;
  content: "→";
}

.iot-ideator-bridge__action:hover:where(:scope, *) {
  background: #095c55;
  color: #fff;
  box-shadow: 0 7px 16px rgba(3, 20, 28, 0.28);
  transform: translateY(-1px);
}

/* Chapter link-reset rules remove every hovered link's ::after content.
   Keep this component's arrow stable and suppress the generic underline. */
.iot-ideator-bridge__action:hover:where(:scope, *)::after {
  position: static;
  width: auto;
  height: auto;
  margin-left: 0.4rem;
  background: none;
  content: "→";
  animation: none;
}

.iot-ideator-bridge__action:focus-visible:where(:scope, *) {
  outline: 3px solid #f4d35e;
  outline-offset: 3px;
}

.iot-ideator-bridge__action[aria-disabled="true"]:where(:scope, *) {
  opacity: 0.65;
}

@media (max-width: 640px) {
  .iot-ideator-bridge__banner:where(:scope, *) {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.9rem;
    border-left-width: 5px;
  }

  #quarto-document-content .iot-ideator-bridge__character:where(:scope, *) {
    width: 48px;
    height: 48px;
  }

  .iot-ideator-bridge__action:where(:scope, *) {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .iot-ideator-bridge__action:where(:scope, *) {
    transition: none;
  }
}


/* Research paper banner: canonical chapter banner styles. */
/* Research Paper banner — light grey family, citation-strip structure.
   One CSS file owns ALL styling for <research-paper-banner>; change colors here only. */
/* Quarto wraps a prose-only custom element in a paragraph. The banner owns
   the chapter-column width, so the wrapper must not keep the prose measure. */
p:has(> research-paper-banner:only-child):where(:scope, *) {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

@media (max-width: 760px) {
  p:has(> research-paper-banner:only-child):where(:scope, *) {
    width: calc(100% + 1.7rem);
    max-width: calc(100vw - 3rem);
    margin-inline: -0.85rem;
  }
}

.research-paper-banner:where(:scope, *) {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-areas: "badge copy" "actions actions" "hint hint";
  gap: 1rem;
  align-items: center;
  width: 100%;
  min-width: 0;
  margin: 1.35rem 0;
  padding: 1.05rem 1.15rem;
  border: 1px solid #c9d2d9;
  border-left: 6px solid #5b6b7a;
  border-radius: 10px;
  box-sizing: border-box;
  background: linear-gradient(118deg, #f2f4f6 0%, #e9edf0 67%, #e2e7eb 100%);
  box-shadow: 0 8px 20px rgba(32, 50, 66, 0.10);
  color: #203242;
}
.rpb__badge:where(:scope, *) { grid-area: badge; display: flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border: 2px solid #8a99a8; border-radius: 14px;
  box-sizing: border-box; background: rgba(91, 107, 122, 0.08);
  box-shadow: 0 4px 12px rgba(32, 50, 66, 0.10); }
.rpb__copy:where(:scope, *) { grid-area: copy; min-width: 0; }
.rpb__eyebrow:where(:scope, *) { display: block; margin-bottom: .2rem; color: #52606d; font-size: .72rem;
  font-weight: 800; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; }
#quarto-document-content .rpb__copy strong:where(:scope, *) { display: block; color: #203242;
  font-size: 1.02rem; font-weight: 800; line-height: 1.35; }
.rpb__meta:where(:scope, *) { display: block; margin-top: .15rem; color: #5b6b7a; font-size: .78rem;
  font-weight: 600; line-height: 1.4; letter-spacing: .01em; }
.rpb__desc:where(:scope, *) { display: block; margin-top: .25rem; color: #33424f; font-size: .96rem;
  line-height: 1.5; overflow-wrap: anywhere; }
.rpb__actions:where(:scope, *) { grid-area: actions; display: flex; flex-direction: row; gap: .65rem;
  margin-top: .35rem; border-top: 1px solid #c9d2d9; padding-top: .75rem; }
.rpb__btn:where(:scope, *) { display: inline-flex; flex: 1; align-items: center; justify-content: center;
  min-height: 46px; padding: .6rem .95rem; border-radius: 7px; box-sizing: border-box;
  font-size: .88rem; font-weight: 800; line-height: 1.25; text-align: center;
  text-decoration: none; }
.rpb__btn:where(:scope, *)::after { margin-left: .4rem; content: "\2192"; }
/* Solid background-colors are LOAD-BEARING: iotclass-ui.js normalizeContentLinkContrast()
   recolors any content link whose contrast vs the nearest solid background is < 4.5,
   and it cannot see gradient banner backgrounds. Never make these transparent. */
.rpb__btn--official:where(:scope, *) { border: 1px solid #2c3e50; background: #2c3e50; color: #ffffff; }
#quarto-document-content .rpb__btn--official:where(:scope, *) { color: #ffffff; }
.rpb__btn--public:where(:scope, *) { border: 1px solid #8a99a8; background: #ffffff; color: #2c3e50; }
#quarto-document-content .rpb__btn--public:where(:scope, *) { color: #2c3e50; }
.rpb__hint:where(:scope, *) { grid-area: hint; display: block; color: #52606d; font-size: .72rem;
  font-weight: 600; text-align: right; }
.research-paper-banner:hover:where(:scope, *) { box-shadow: 0 10px 24px rgba(32, 50, 66, 0.16); transform: translateY(-1px); }
.rpb__btn:focus-visible:where(:scope, *) { outline: 3px solid #f4d35e; outline-offset: 3px; }
@media (max-width: 640px) {
  .research-paper-banner:where(:scope, *) { grid-template-columns: 48px minmax(0, 1fr); gap: .75rem;
    max-width: calc(100vw - 3rem);
    padding: .9rem; border-left-width: 5px; }
  .rpb__badge:where(:scope, *) { width: 48px; height: 48px; }
  .rpb__actions:where(:scope, *) { flex-direction: column; }
  .rpb__btn:where(:scope, *) { width: 100%; }
  .rpb__hint:where(:scope, *) { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .research-paper-banner:where(:scope, *) { transition: none; } }


/* Math bridge banner: canonical chapter banner styles. */
/* Math Bridge banner — flat, same geometry as the slides banner (founder 2026-09-05: "make them look
   like other banners, don't make it 3D looking"). Purple stays only as the accent and the button. */
.math-bridge-banner:where(:scope, *) {
  --math-bridge-accent: #7c5cbf;
  --math-bridge-action: #5d3b91;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  width: 100%;
  min-width: 0;
  margin: 1.35rem 0;
  padding: 0.85rem 0.95rem;
  border: 1px solid #d2d6dc;
  border-left: 6px solid var(--math-bridge-accent);
  border-radius: 0.9rem;
  box-sizing: border-box;
  background: linear-gradient(118deg, #f6f8f9 0%, #eef1f4 100%);
  box-shadow: none;
  color: #21242c;
  text-decoration: none;
  transition: border-color 120ms ease;
}
#quarto-document-content .math-bridge-banner__character:where(:scope, *) { display:block; width:58px; height:58px; border:1px solid #c9cfd6; border-radius:50%; box-sizing:border-box; object-fit:cover; background:#fff; box-shadow:none; }
.math-bridge-banner__copy:where(:scope, *) { min-width:0; }
.math-bridge-banner__eyebrow:where(:scope, *) { display:block; margin-bottom:.2rem; color:var(--math-bridge-action); font-size:.72rem; font-weight:800; letter-spacing:.08em; line-height:1.3; text-transform:uppercase; }
#quarto-document-content .math-bridge-banner__copy strong:where(:scope, *) { display:block; color:#17303f; font-size:1.02rem; font-weight:800; line-height:1.35; }
.math-bridge-banner__copy span:last-child:where(:scope, *) { display:block; margin-top:.2rem; color:#3d4650; font-size:.96rem; line-height:1.5; overflow-wrap:anywhere; }
.math-bridge-banner__action:where(:scope, *) { display:inline-flex; align-items:center; justify-content:center; min-width:166px; min-height:46px; padding:.6rem .9rem; border:1px solid var(--math-bridge-action); border-radius:999px; box-sizing:border-box; background:var(--math-bridge-action); color:#fff; font-size:.9rem; font-weight:800; line-height:1.25; text-align:center; box-shadow:none; }
.math-bridge-banner__action:where(:scope, *)::after { margin-left:.4rem; content:"\2192"; }
.math-bridge-banner:hover:where(:scope, *) { color:#21242c; border-color:#b9bfc7; box-shadow:none; transform:none; }
.math-bridge-banner:hover .math-bridge-banner__action:where(:scope, *) { background:#4a2f75; border-color:#4a2f75; }
.math-bridge-banner:hover:where(:scope, *)::after { display:none; }
.math-bridge-banner:focus-visible:where(:scope, *) { outline:3px solid rgba(24,101,242,.28); outline-offset:3px; }
@media (max-width:640px) {
  .math-bridge-banner:where(:scope, *) { grid-template-columns:48px minmax(0,1fr); gap:.75rem; padding:.85rem; border-left-width:5px; }
  #quarto-document-content .math-bridge-banner__character:where(:scope, *) { width:48px; height:48px; }
  .math-bridge-banner__action:where(:scope, *) { grid-column:1/-1; width:100%; }
}
@media (prefers-color-scheme:dark) {
  .math-bridge-banner:where(:scope, *) { background:linear-gradient(118deg, #20252c 0%, #1b2026 100%); border-color:#3a4149; color:#e6eaee; }
  #quarto-document-content .math-bridge-banner__copy strong:where(:scope, *) { color:#f3f5f7; }
  .math-bridge-banner__copy span:last-child:where(:scope, *) { color:#c9d1d9; }
  .math-bridge-banner__eyebrow:where(:scope, *) { color:#c4b0ff; }
  .math-bridge-banner__action:where(:scope, *) { background:#8b6cd6; border-color:#8b6cd6; color:#17131f; }
  .math-bridge-banner:hover .math-bridge-banner__action:where(:scope, *) { background:#9d82e0; border-color:#9d82e0; }
}
@media (prefers-reduced-motion:reduce) { .math-bridge-banner:where(:scope, *) { transition:none; } }


/* Authorization remains restrictive even when a generic feature is shown. */
[data-feature-visibility-owner="classroom"]:not([data-classroom-owner="verified"]):where(:scope, *) { display: none; }

/* Shared learner-feedback controls, loaded before paint. */

      .iot-learner-feedback:where(:scope, *) {
        --lf-accent: var(--pc-main, var(--ds-accent, #087f5b));
        --lf-ink: var(--ds-ink, var(--bs-body-color, #243746));
        --lf-muted: var(--ds-ink-soft, #52606d);
        --lf-line: var(--ds-line, #e6e8eb);
        --lf-surface: var(--ds-surface, var(--bs-body-bg, #fff));
        --lf-surface-alt: var(--ds-surface-alt, #f7f9fb);
        box-sizing: border-box;
        color: var(--lf-muted);
        font: 500 .84rem/1.45 var(--ds-font, var(--font-family-base, system-ui, sans-serif));
      }
      .iot-learner-feedback *:where(:scope, *),
      .iot-learner-feedback *:where(:scope, *)::before,
      .iot-learner-feedback *:where(:scope, *)::after { box-sizing: border-box; }
      .iot-learner-feedback--unit:where(:scope, *) {
        margin: clamp(2.6rem, 7vw, 5rem) 0 1.5rem;
        padding: 1rem 1.05rem;
        border: 1px solid var(--lf-line);
        border-left: 4px solid color-mix(in srgb, var(--lf-accent) 72%, var(--lf-line));
        border-radius: var(--ds-radius-sm, 8px);
        background: var(--lf-surface-alt);
      }
      .iot-learner-feedback--interactive:where(:scope, *) {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        margin: .35rem 0 1.35rem;
        padding: .68rem .75rem;
        border: 1px solid var(--lf-line);
        border-left: 3px solid color-mix(in srgb, var(--lf-accent) 62%, var(--lf-line));
        border-radius: var(--ds-radius-sm, 8px);
        background: color-mix(in srgb, var(--lf-surface-alt) 72%, var(--lf-surface));
      }
      .iot-lf-question:where(:scope, *),
      .iot-lf-thumbs:where(:scope, *),
      .iot-lf-thanks:where(:scope, *),
      .iot-lf-actions:where(:scope, *) {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: .45rem;
      }
      .iot-lf-question:where(:scope, *) {
        justify-content: space-between;
        gap: .7rem 1rem;
      }
      .iot-lf-copy:where(:scope, *) {
        display: grid;
        gap: .08rem;
        min-width: min(100%, 12rem);
      }
      .iot-lf-context:where(:scope, *) {
        color: color-mix(in srgb, var(--lf-muted) 82%, transparent);
        font-size: .68rem;
        font-weight: 750;
        letter-spacing: .075em;
        line-height: 1.25;
        text-transform: uppercase;
      }
      .iot-lf-prompt:where(:scope, *) {
        color: var(--lf-ink);
        font-size: .88rem;
        font-weight: 680;
      }
      .iot-lf-thumb:where(:scope, *) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .42rem;
        min-height: 2.75rem;
        padding: .5rem .72rem;
        color: var(--lf-muted);
        background: var(--lf-surface);
        border: 1px solid var(--lf-line);
        border-radius: var(--ds-radius-sm, 8px);
        font: inherit;
        font-weight: 650;
        line-height: 1;
        cursor: pointer;
      }
      .iot-lf-thumb i:where(:scope, *) {
        font-size: .98rem;
        line-height: 1;
      }
      .iot-learner-feedback--interactive .iot-lf-question:where(:scope, *) {
        gap: .55rem .8rem;
      }
      .iot-learner-feedback--interactive .iot-lf-copy:where(:scope, *) {
        min-width: min(100%, 10rem);
      }
      .iot-learner-feedback--interactive .iot-lf-context:where(:scope, *) {
        font-size: .62rem;
      }
      .iot-learner-feedback--interactive .iot-lf-prompt:where(:scope, *) {
        font-size: .82rem;
      }
      .iot-learner-feedback--interactive .iot-lf-thumb:where(:scope, *) {
        min-height: 2.75rem;
        padding: .38rem .58rem;
        font-size: .8rem;
      }
      .iot-learner-feedback--interactive .iot-lf-thumb i:where(:scope, *) {
        font-size: .9rem;
      }
      .iot-lf-thumb:hover:where(:scope, *),
      .iot-lf-thumb:focus-visible:where(:scope, *),
      .iot-lf-thumb[aria-pressed="true"]:where(:scope, *) {
        color: var(--lf-accent);
        border-color: color-mix(in srgb, var(--lf-accent) 50%, var(--lf-line));
        background: color-mix(in srgb, var(--lf-accent) 7%, var(--lf-surface));
      }
      .iot-lf-thumb:focus-visible:where(:scope, *),
      .iot-lf-chip:focus-visible:where(:scope, *),
      .iot-lf-send:focus-visible:where(:scope, *),
      .iot-lf-change:focus-visible:where(:scope, *),
      .iot-lf-review-action:focus-visible:where(:scope, *),
      .iot-lf-review-note:focus-visible:where(:scope, *) {
        outline: 2px solid color-mix(in srgb, var(--lf-accent) 42%, transparent);
        outline-offset: 2px;
      }
      .iot-lf-panel:where(:scope, *) {
        margin-top: .9rem;
        padding-top: .85rem;
        border-top: 1px solid var(--lf-line);
      }
      .iot-lf-chip-label:where(:scope, *) { margin: 0 0 .4rem; color: var(--lf-muted); font-size: .76rem; }
      .iot-lf-chips:where(:scope, *) { display: flex; flex-wrap: wrap; gap: .38rem; }
      .iot-lf-chip:where(:scope, *) {
        min-height: 1.8rem;
        padding: .3rem .62rem;
        color: var(--lf-muted);
        background: var(--bs-body-bg, #fff);
        border: 1px solid var(--lf-line);
        border-radius: 999px;
        font: inherit;
        cursor: pointer;
      }
      .iot-lf-chip[aria-pressed="true"]:where(:scope, *) {
        color: color-mix(in srgb, var(--lf-accent) 82%, black);
        border-color: color-mix(in srgb, var(--lf-accent) 50%, var(--lf-line));
        background: color-mix(in srgb, var(--lf-accent) 9%, white);
      }
      .iot-lf-comment-label:where(:scope, *) {
        display: block;
        margin: .75rem 0 .3rem;
        color: var(--lf-muted);
        font-size: .76rem;
      }
      .iot-lf-comment:where(:scope, *) {
        display: block;
        width: min(100%, 38rem);
        min-height: 4.4rem;
        padding: .6rem .7rem;
        resize: vertical;
        color: var(--lf-ink);
        background: var(--bs-body-bg, #fff);
        border: 1px solid var(--lf-line);
        border-radius: .45rem;
        font: inherit;
      }
      .iot-lf-actions:where(:scope, *) { margin-top: .55rem; }
      .iot-lf-send:where(:scope, *),
      .iot-lf-change:where(:scope, *) {
        min-height: 2rem;
        padding: .38rem .75rem;
        color: #fff;
        background: var(--lf-accent);
        border: 1px solid var(--lf-accent);
        border-radius: .4rem;
        font: inherit;
        font-weight: 650;
        cursor: pointer;
      }
      .iot-lf-change:where(:scope, *) {
        min-height: auto;
        padding: .15rem .25rem;
        color: var(--lf-accent);
        background: transparent;
        border-color: transparent;
      }
      .iot-lf-send:disabled:where(:scope, *) { cursor: wait; opacity: .65; }
      .iot-lf-status:where(:scope, *) { min-height: 1.1rem; color: var(--lf-muted); }
      .iot-lf-status[data-error="true"]:where(:scope, *) { color: var(--danger, #b42318); }
      .iot-lf-signin:where(:scope, *) {
        width: fit-content;
        margin-top: .6rem;
        padding: .28rem 0 .28rem .65rem;
        color: var(--lf-muted);
        background: transparent;
        border-left: 2px solid color-mix(in srgb, var(--lf-accent) 52%, var(--lf-line));
      }
      .iot-lf-thanks:where(:scope, *) { color: var(--lf-muted); }
      .iot-lf-thanks .iot-lf-thumb:where(:scope, *) { min-height: 2.25rem; padding: .4rem .6rem; }
      .iot-lf-reviewer:where(:scope, *) {
        --lf-rev-accent: #3a6ea5;
        margin: 1.4rem 0 1.5rem;
        background: var(--lf-surface);
        border: 1px solid color-mix(in srgb, var(--lf-rev-accent) 42%, var(--lf-line));
        border-radius: var(--ds-radius-sm, 8px);
        overflow: hidden;
      }
      .iot-lf-reviewer-head:where(:scope, *) {
        display: flex;
        align-items: center;
        gap: .48rem;
        padding: .55rem .75rem;
        color: color-mix(in srgb, var(--lf-rev-accent) 92%, black);
        background: color-mix(in srgb, var(--lf-rev-accent) 13%, var(--lf-surface));
        border-bottom: 1px solid color-mix(in srgb, var(--lf-rev-accent) 32%, var(--lf-line));
      }
      .iot-lf-reviewer-icon:where(:scope, *) {
        flex: 0 0 auto;
        width: 1.05rem;
        height: 1.05rem;
      }
      .iot-lf-reviewer-title:where(:scope, *) {
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .09em;
        text-transform: uppercase;
      }
      .iot-lf-reviewer-body:where(:scope, *) {
        display: grid;
        grid-template-columns: minmax(10rem, 1fr) auto;
        align-items: center;
        gap: .5rem .55rem;
        padding: .7rem .75rem .75rem;
      }
      .iot-lf-review-note:where(:scope, *) {
        min-width: 0;
        min-height: 2rem;
        padding: .38rem .55rem;
        color: var(--lf-ink);
        font: inherit;
      }
      /* The class name "iot-lf-review-note" incidentally contains "-note",
         which #quarto-document-content [class*="-note"] (design-system.css /
         platform.css; a deep-author "note callout" convention, unrelated to
         this control) forcibly restyles with !important. Neutralize it here,
         at matching ID+selector specificity, rather than renaming the class
         and breaking its existing test coverage. */
      #quarto-document-content .iot-lf-review-note:where(:scope, *) {
        background: var(--bs-body-bg, #fff) !important;
        border: 1px solid var(--lf-line) !important;
        border-radius: .38rem !important;
        box-shadow: none !important;
      }
      .iot-lf-review-actions:where(:scope, *) { display: flex; flex-wrap: wrap; gap: .35rem; }
      .iot-lf-review-action:where(:scope, *) {
        min-height: 2rem;
        padding: .35rem .58rem;
        color: var(--lf-muted);
        background: var(--bs-body-bg, #fff);
        border: 1px solid var(--lf-line);
        border-radius: .38rem;
        font: inherit;
        font-weight: 650;
        cursor: pointer;
      }
      .iot-lf-review-action[data-verdict="confirmed"]:where(:scope, *) {
        color: color-mix(in srgb, var(--lf-accent) 85%, black);
      }
      .iot-lf-review-action[data-verdict="needs_work"]:where(:scope, *) { color: #9d3128; }
      .iot-lf-review-action:disabled:where(:scope, *) { cursor: wait; opacity: .6; }
      .iot-lf-review-status:where(:scope, *) {
        grid-column: 1 / -1;
        min-height: 1rem;
        color: var(--lf-muted);
        font-size: .72rem;
      }
      .iot-lf-review-status[data-error="true"]:where(:scope, *) { color: var(--danger, #b42318); }
      .iot-learner-feedback[data-state="idle"] .iot-lf-panel:where(:scope, *),
      .iot-learner-feedback[data-state="idle"] .iot-lf-thanks:where(:scope, *),
      .iot-learner-feedback[data-state="expanded"] .iot-lf-thanks:where(:scope, *),
      .iot-learner-feedback[data-state="submitted"] .iot-lf-question:where(:scope, *),
      .iot-learner-feedback[data-state="submitted"] .iot-lf-panel:where(:scope, *) { display: none; }
      .iot-learner-feedback[data-state="submitted"] .iot-lf-thanks:where(:scope, *) { display: flex; }
      /* Idle and submitted copy differ by a fractional line-box height. Keep
         both interactive state rows in one reserved slot so loading saved
         feedback cannot move any following chapter geometry. visibility
         removes the inactive row from interaction and the accessibility tree
         while preserving its contribution to the shared track size. */
      .iot-learner-feedback--interactive > .iot-lf-question:where(:scope, *),
      .iot-learner-feedback--interactive > .iot-lf-thanks:where(:scope, *) {
        grid-area: 1 / 1;
      }
      .iot-learner-feedback--interactive > .iot-lf-signin:where(:scope, *),
      .iot-learner-feedback--interactive > .iot-lf-panel:where(:scope, *) {
        grid-column: 1;
      }
      .iot-learner-feedback--interactive[data-state="idle"] > .iot-lf-thanks:where(:scope, *),
      .iot-learner-feedback--interactive[data-state="expanded"] > .iot-lf-thanks:where(:scope, *),
      .iot-learner-feedback--interactive[data-state="submitted"] > .iot-lf-question:where(:scope, *) {
        display: flex;
        visibility: hidden;
        pointer-events: none;
      }
      @media (max-width: 575.98px) {
        .iot-learner-feedback--unit:where(:scope, *) { margin-top: 2.6rem; }
        .iot-lf-question:where(:scope, *) { align-items: flex-start; }
        .iot-learner-feedback--unit .iot-lf-thumbs:where(:scope, *) { width: 100%; }
        .iot-learner-feedback--unit .iot-lf-thumb:where(:scope, *) { flex: 1 1 8rem; }
        .iot-learner-feedback--interactive .iot-lf-thumbs:where(:scope, *) { flex: 0 0 auto; }
        .iot-learner-feedback--interactive .iot-lf-thumb:where(:scope, *) { flex: 0 0 auto; }
        .iot-lf-panel:where(:scope, *) { padding-top: .1rem; }
        .iot-lf-comment:where(:scope, *) { min-height: 5.2rem; }
        .iot-lf-reviewer-body:where(:scope, *) { grid-template-columns: 1fr; }
        .iot-lf-review-status:where(:scope, *) { grid-column: 1; }
        .iot-lf-review-action:where(:scope, *) { flex: 1; }
      }


/* Shared content-review controls, loaded before paint. */

        .content-review-flag:where(:scope, *) {
          margin-left: .4rem;
          padding: .2rem .55rem;
          border: 1px solid #c0392b;
          border-radius: .35rem;
          background: #fff;
          color: #a93226;
          cursor: pointer;
          font: 600 .72rem/1.25 system-ui, sans-serif;
          vertical-align: middle;
          white-space: nowrap;
        }
        .content-review-flag:hover:where(:scope, *),
        .content-review-flag:focus-visible:where(:scope, *) {
          background: #fbeee6;
          outline: 2px solid transparent;
        }
        .content-review-flag:disabled:where(:scope, *) {
          cursor: wait;
          opacity: .65;
        }


/* Shared portfolio controls. */
.assessment-portfolio:where(:scope, *){border:1px solid #777;border-radius:8px;padding:16px;margin:24px 0;overflow-wrap:anywhere}.assessment-portfolio input:where(:scope, *),.assessment-portfolio textarea:where(:scope, *){box-sizing:border-box;width:100%;max-width:42rem;font:inherit}.assessment-portfolio button:where(:scope, *){font:inherit;margin:4px;padding:8px}.assessment-portfolio li:where(:scope, *){margin-block:16px}.assessment-portfolio .portfolio-evidence:where(:scope, *){white-space:pre-wrap}

/* Observable input fallback skin. */
.ojs-island:where(:scope, *){margin:1rem 0}.ojs-island__cell:where(:scope, *){margin:0 0 .5rem}form.oi-island:where(:scope, *){display:flex;flex-wrap:wrap;align-items:flex-start;gap:.5rem .75rem;margin:.5rem 0;width:100%;box-sizing:border-box}form.oi-island > label:where(:scope, *){flex:1 1 clamp(10rem,20vw,15rem);margin:0;line-height:1.35;font-weight:600}form.oi-island > .oi-island-input:where(:scope, *){display:flex;align-items:center;gap:.6rem;flex:1 1 12rem;min-width:min(12rem,100%);max-width:100%}form.oi-island input[type=number]:where(:scope, *),form.oi-island input[type=text]:where(:scope, *),form.oi-island select:where(:scope, *){min-height:2.25rem;padding:.35rem .5rem}form.oi-island input[type=number]:where(:scope, *),form.oi-island input[type=text]:where(:scope, *){flex:0 0 min(10rem,45%)}form.oi-island input[type=range]:where(:scope, *),form.oi-island select:where(:scope, *){flex:1 1 auto;width:100%;max-width:100%}form.oi-island > div > label:where(:scope, *){display:inline-flex;align-items:center;gap:.25rem;margin-right:1rem}.ojs-inputs__description:where(:scope, *){flex:1 1 100%;font-size:.8rem;opacity:.75}.ojs-island__error:where(:scope, *){color:#b00020;font-size:.85rem;margin:.25rem 0}.ojs-island__cell--unhandled:where(:scope, *){border:1px dashed #c9ccd1;border-radius:6px;padding:.75rem 1rem;background:#fafbfc}.ojs-island__unhandled-label:where(:scope, *){margin:0 0 .25rem;font-size:.9rem}.ojs-island__unhandled-reason:where(:scope, *){margin:0 0 .5rem;font-size:.8rem;opacity:.8}.ojs-island__unhandled-source pre:where(:scope, *){overflow-x:auto;font-size:.75rem}

/* Shared runtime skin: auth */
.iotclass-account-state-notice:where(:scope, *){max-width:72rem;margin:1rem auto;padding:.8rem 1rem;color:#4b5563;background:#f8fafc;border:1px solid #d8dee7;border-left:4px solid #b7791f;border-radius:.5rem;font-size:.92rem;line-height:1.5}.iotclass-account-state-notice--suspended:where(:scope, *){border-left-color:#a52a2a}.iotclass-account-state-notice strong:where(:scope, *){color:#25313c}.iotclass-account-state-notice a:where(:scope, *){font-weight:600}

/* Shared runtime skin: onboarding */

    #iotclass-onboarding:where(:scope, *) {
      --onboard-accent: var(--flat-accent, #1865f2);
      --onboard-text: var(--flat-text, #21242c);
      --onboard-muted: var(--flat-text-muted, #475774);
      --onboard-subtle: var(--flat-text-subtle, #646b7a);
      --onboard-surface: var(--flat-surface, #ffffff);
      --onboard-surface-muted: var(--flat-surface-muted, #f7f8fa);
      --onboard-control: var(--flat-control-bg, #f1f3f5);
      --onboard-control-hover: var(--flat-control-hover, #e7ebf0);
      --onboard-border: var(--flat-border, #dbdcdd);
      --onboard-border-strong: var(--flat-border-strong, #c7c9cc);
      position: relative;
      box-sizing: border-box;
      width: min(100%, 72rem);
      max-height: none;
      min-height: 0 !important;
      margin: 0.4rem auto;
      padding: 0 !important;
      overflow: visible;
      color: var(--onboard-text);
      background: var(--onboard-surface);
      border: 1px solid var(--onboard-border);
      border-left: 4px solid var(--onboard-accent);
      border-radius: var(--radius-xl, 0.75rem);
      box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
      font-family: var(
        --font-family-base,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif
      );
      font-size: 1rem;
      line-height: 1.5;
      overscroll-behavior: contain;
    }

    body.iot-onboard-modal-open:where(:scope, *) {
      overflow: hidden !important;
    }

    #iotclass-onboarding:where(:scope, *),
    #iotclass-onboarding *:where(:scope, *) {
      box-sizing: border-box;
    }

    #iotclass-onboarding:focus-visible:where(:scope, *) {
      outline: 0;
      box-shadow:
        0 12px 32px rgba(15, 23, 42, 0.14),
        inset 0 0 0 2px color-mix(in srgb, var(--onboard-accent) 25%, transparent);
    }

    .iot-onboard__header:where(:scope, *) {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1rem 1.25rem 0;
    }

    .iot-onboard__compact:where(:scope, *) {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      min-height: 0;
      padding: 0.4rem 0.65rem;
    }

    .iot-onboard__compact-copy:where(:scope, *) {
      flex: 1 1 auto;
      min-width: 0;
    }

    #iotclass-onboarding .iot-onboard__compact .iot-onboard__title:where(:scope, *) {
      margin: 0 !important;
      padding: 0 !important;
      white-space: nowrap;
      font-size: 0.9rem !important;
      line-height: 1.15 !important;
    }

    #iotclass-onboarding .iot-onboard__compact .iot-onboard__description:where(:scope, *) {
      max-width: none;
      margin: 0.15rem 0 0 !important;
      font-size: 0.7rem !important;
      line-height: 1.2 !important;
    }

    .iot-onboard__compact .iot-onboard__button:where(:scope, *) {
      flex: 0 0 auto;
      min-height: 2.35rem;
      padding: 0.45rem 0.7rem;
      font-size: 0.78rem;
    }

    .iot-onboard__compact .iot-onboard__dismiss:where(:scope, *) {
      flex: 0 0 auto;
      width: 2rem;
      min-height: 2rem;
      padding: 0;
      font-size: 1.1rem;
      text-decoration: none;
    }

    #iotclass-onboarding[data-returning-toast="true"]:where(:scope, *) {
      position: fixed;
      right: max(16px, env(safe-area-inset-right));
      bottom: max(16px, env(safe-area-inset-bottom));
      left: auto;
      z-index: 1200;
      width: min(360px, calc(100vw - 32px));
      max-width: 360px;
      max-height: 120px;
      margin: 0;
      overflow: visible;
      animation: iot-onboard-toast-enter-672fcf82861e649e 240ms ease-out;
    }

    @keyframes iot-onboard-toast-enter-672fcf82861e649e {
      from {
        opacity: 0;
        transform: translateY(0.75rem);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .iot-onboard__modal-layer:where(:scope, *) {
      position: fixed;
      inset: 0;
      z-index: 1400;
      display: grid;
      place-items: center;
      width: 100vw;
      height: 100dvh;
      padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
        max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
      background: rgba(15, 23, 42, 0.58);
    }

    .iot-onboard__modal:where(:scope, *) {
      width: min(48rem, 100%);
      max-height: calc(100dvh - 2rem);
      overflow: auto;
      color: var(--onboard-text);
      background: var(--onboard-surface);
      border: 1px solid var(--onboard-border);
      border-left: 4px solid var(--onboard-accent);
      border-radius: var(--radius-xl, 0.75rem);
      box-shadow: 0 24px 64px rgba(15, 23, 42, 0.32);
      overscroll-behavior: contain;
    }

    .iot-onboard__modal .iot-onboard__header:where(:scope, *) {
      padding-top: 0.75rem;
    }

    .iot-onboard__modal-close:where(:scope, *) {
      width: 2.5rem;
      min-height: 2.5rem;
      padding: 0;
      font-size: 1.35rem;
      text-decoration: none;
    }

    .iot-onboard__brand:where(:scope, *) {
      color: var(--onboard-accent);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      line-height: 1.2;
      text-transform: uppercase;
    }

    .iot-onboard__dismiss:where(:scope, *) {
      min-height: 2.75rem;
      padding: 0.4rem 0;
      color: var(--onboard-muted);
      background: transparent;
      border: 0;
      border-radius: var(--radius-md, 0.375rem);
      font: inherit;
      font-size: 0.8125rem;
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 0.16em;
      cursor: pointer;
    }

    .iot-onboard__dismiss:hover:where(:scope, *) {
      color: var(--onboard-text);
    }

    .iot-onboard__body:where(:scope, *) {
      padding: 0.5rem 1.25rem 1.25rem;
    }

    .iot-onboard__steps:where(:scope, *) {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.4rem;
      margin: 0 0 1rem;
      padding: 0;
      list-style: none;
    }

    .iot-onboard__step:where(:scope, *) {
      height: 0.25rem;
      overflow: hidden;
      background: var(--onboard-control);
      border-radius: var(--radius-full, 9999px);
      color: transparent;
      font-size: 0;
    }

    .iot-onboard__step[aria-current="step"]:where(:scope, *),
    .iot-onboard__step[data-complete="true"]:where(:scope, *) {
      background: var(--onboard-accent);
    }

    #iotclass-onboarding .iot-onboard__title:where(:scope, *) {
      margin: 0 !important;
      padding: 0 !important;
      color: var(--onboard-text);
      border: 0 !important;
      font: inherit;
      font-size: 1.45rem !important;
      font-weight: 700;
      letter-spacing: -0.025em;
      line-height: 1.2 !important;
    }

    #iotclass-onboarding .iot-onboard__title:focus:where(:scope, *) {
      outline: 0;
    }

    #iotclass-onboarding .iot-onboard__title:where(:scope, *)::before,
    #iotclass-onboarding .iot-onboard__title:where(:scope, *)::after {
      display: none;
    }

    #iotclass-onboarding .iot-onboard__description:where(:scope, *) {
      max-width: none;
      margin: 0.5rem 0 1rem !important;
      color: var(--onboard-muted);
      font-size: 0.9375rem !important;
      line-height: 1.5 !important;
    }

    .iot-onboard__choices:where(:scope, *) {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.625rem;
      margin: 0;
      padding: 0;
      border: 0;
    }

    .iot-onboard__choice:where(:scope, *) {
      min-width: 0;
      min-height: 5.25rem;
      padding: 0.8rem;
      color: var(--onboard-text);
      background: var(--onboard-surface);
      border: 1px solid var(--onboard-border);
      border-radius: var(--radius-lg, 0.5rem);
      font: inherit;
      text-align: left;
      cursor: pointer;
    }

    .iot-onboard__choice:hover:where(:scope, *) {
      background: var(--onboard-surface-muted);
      border-color: var(--onboard-border-strong);
    }

    .iot-onboard__choice[aria-pressed="true"]:where(:scope, *) {
      background: color-mix(in srgb, var(--onboard-accent) 7%, white);
      border-color: var(--onboard-accent);
      box-shadow: inset 3px 0 0 var(--onboard-accent);
    }

    .iot-onboard__choice strong:where(:scope, *),
    .iot-onboard__choice small:where(:scope, *) {
      display: block;
    }

    .iot-onboard__choice strong:where(:scope, *) {
      color: inherit;
      font-size: 0.9rem;
      line-height: 1.3;
    }

    .iot-onboard__choice small:where(:scope, *) {
      margin-top: 0.3rem;
      color: var(--onboard-muted);
      font-size: 0.78rem;
      line-height: 1.4;
    }

    .iot-onboard__progress-note:where(:scope, *) {
      margin: 0 0 1rem;
      padding: 1rem;
      color: var(--onboard-text);
      background: var(--onboard-surface-muted);
      border: 1px solid var(--onboard-border);
      border-radius: var(--radius-lg, 0.5rem);
      font-size: 0.9375rem;
      line-height: 1.5;
    }

    .iot-onboard__progress-note strong:where(:scope, *) {
      color: var(--onboard-accent);
    }

    .iot-onboard__progress-note a:where(:scope, *) {
      color: var(--onboard-accent);
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 0.16em;
    }

    .iot-onboard__progress-note a:hover:where(:scope, *) {
      color: color-mix(in srgb, var(--onboard-accent) 88%, black);
    }

    .iot-onboard__signin-note:where(:scope, *) {
      margin: 0 0 1rem;
      color: var(--onboard-muted);
      font-size: 0.875rem;
      line-height: 1.45;
    }

    .iot-onboard__actions:where(:scope, *) {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 0.625rem;
      margin-top: 1rem;
    }

    .iot-onboard__button:where(:scope, *) {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 2.75rem;
      padding: 0.65rem 1rem;
      color: var(--onboard-text);
      background: var(--onboard-surface);
      border: 1px solid var(--onboard-border-strong);
      border-radius: var(--radius-lg, 0.5rem);
      font: inherit;
      font-size: 0.875rem;
      font-weight: 600;
      line-height: 1.2;
      text-align: center;
      text-decoration: none;
      cursor: pointer;
    }

    .iot-onboard__button:hover:where(:scope, *) {
      color: var(--onboard-text);
      background: var(--onboard-control-hover);
      text-decoration: none;
    }

    .iot-onboard__button--primary:where(:scope, *) {
      color: #ffffff;
      background: var(--onboard-accent);
      border-color: var(--onboard-accent);
    }

    .iot-onboard__button--primary:hover:where(:scope, *) {
      color: #ffffff;
      background: color-mix(in srgb, var(--onboard-accent) 88%, black);
      border-color: color-mix(in srgb, var(--onboard-accent) 88%, black);
    }

    .iot-onboard__button:disabled:where(:scope, *) {
      color: var(--onboard-subtle);
      background: var(--onboard-control);
      border-color: var(--onboard-border);
      cursor: not-allowed;
      opacity: 0.78;
    }

    .iot-onboard__button:focus-visible:where(:scope, *),
    .iot-onboard__choice:focus-visible:where(:scope, *),
    .iot-onboard__dismiss:focus-visible:where(:scope, *) {
      outline: 3px solid color-mix(in srgb, var(--onboard-accent) 32%, transparent);
      outline-offset: 2px;
    }

    .iot-onboard__status:where(:scope, *) {
      min-height: 1.25rem;
      margin: 0.625rem 0 0;
      color: var(--onboard-muted);
      font-size: 0.8125rem;
    }

    @media (max-width: 520px) {
      #iotclass-onboarding:where(:scope, *) {
        position: relative;
        width: 100%;
        max-height: none;
        margin: 0.35rem 0;
        border-radius: var(--radius-xl, 0.75rem);
      }

      #iotclass-onboarding:where(:scope, *)::before {
        display: block;
        width: 2.5rem;
        height: 0.25rem;
        margin: 0.55rem auto 0;
        background: var(--onboard-border-strong);
        border-radius: var(--radius-full, 9999px);
        content: "";
      }

      #iotclass-onboarding[data-compact="true"]:where(:scope, *) {
        width: 100%;
        border: 1px solid var(--onboard-border);
        border-left: 4px solid var(--onboard-accent);
        border-radius: var(--radius-xl, 0.75rem);
      }

      #iotclass-onboarding[data-compact="true"]:where(:scope, *)::before {
        display: none;
      }

      #iotclass-onboarding[data-returning-toast="true"]:where(:scope, *) {
        right: 16px;
        width: calc(100vw - 32px);
        max-width: calc(100vw - 32px);
        margin: 0;
      }

      .iot-onboard__header:where(:scope, *) {
        padding-top: 0.55rem;
      }

      .iot-onboard__compact:where(:scope, *) {
        gap: 0.45rem;
        padding: 0.35rem 0.45rem;
      }

      #iotclass-onboarding .iot-onboard__compact .iot-onboard__description:where(:scope, *) {
        max-width: 9rem;
      }

      .iot-onboard__compact .iot-onboard__button:where(:scope, *) {
        padding-inline: 0.55rem;
      }

      .iot-onboard__modal-layer:where(:scope, *) {
        padding: 0.5rem;
      }

      .iot-onboard__modal:where(:scope, *) {
        max-height: calc(100dvh - 1rem);
      }

      .iot-onboard__choices:where(:scope, *) {
        grid-template-columns: 1fr;
      }

      .iot-onboard__choice:where(:scope, *) {
        min-height: 0;
      }

      .iot-onboard__actions:where(:scope, *) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .iot-onboard__actions > :only-child:where(:scope, *) {
        grid-column: 2;
      }

      .iot-onboard__actions > .iot-onboard__button--primary:nth-child(3):where(:scope, *) {
        grid-column: 1 / -1;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #iotclass-onboarding[data-returning-toast="true"]:where(:scope, *) {
        animation: none;
      }

      #iotclass-onboarding *:where(:scope, *),
      #iotclass-onboarding *:where(:scope, *)::before,
      #iotclass-onboarding *:where(:scope, *)::after {
        scroll-behavior: auto !important;
        transition: none !important;
      }
    }

    @media (forced-colors: active) {
      #iotclass-onboarding:where(:scope, *),
      .iot-onboard__choice[aria-pressed="true"]:where(:scope, *) {
        border-color: CanvasText;
      }

      .iot-onboard__step[aria-current="step"]:where(:scope, *),
      .iot-onboard__step[data-complete="true"]:where(:scope, *) {
        background: Highlight;
      }
    }


/* Shared runtime skin: private-check-notes */

      .private-check-note:where(:scope, *), .private-notes-progress:where(:scope, *) { margin: 1rem 0; padding: 1rem; border: 1px solid #b9c9d7; border-radius: .65rem; background: #f5f9fc; color: #1f2933; }
      .private-check-note h3:where(:scope, *), .private-notes-progress h2:where(:scope, *) { margin: 0 0 .45rem; font-size: 1.05rem; }
      .private-check-note p:where(:scope, *), .private-notes-progress p:where(:scope, *) { margin: .35rem 0 .75rem; }
      .private-check-note textarea:where(:scope, *) { box-sizing: border-box; display: block; width: 100%; min-height: 5rem; padding: .65rem; border: 1px solid #667788; border-radius: .35rem; font: inherit; }
      .private-check-note button:where(:scope, *), .private-notes-progress button:where(:scope, *) { min-height: 2.75rem; margin-top: .55rem; padding: .45rem .85rem; border: 1px solid #23527c; border-radius: .35rem; background: #fff; color: #173b59; font: inherit; cursor: pointer; }
      .private-check-note__tap:where(:scope, *) { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .75rem; }
      .private-check-note__tap button:where(:scope, *) { margin-top: 0; }
      .private-check-note__tap button[aria-pressed="true"]:where(:scope, *) { background: #173b59; color: #fff; }
      .private-check-note__status:empty:where(:scope, *) { display: none; }
      .private-notes-progress li:where(:scope, *) { margin: .75rem 0; overflow-wrap: anywhere; }
      .private-notes-progress__text:where(:scope, *) { display: block; margin-top: .25rem; white-space: pre-wrap; }
      @media (max-width: 480px) { .private-check-note:where(:scope, *), .private-notes-progress:where(:scope, *) { padding: .75rem; } }


/* Shared runtime skin: section-progress (injected-only) */
}@scope (html[data-site-runtime-skins~="section-progress"]) {
.iot-section-progress-control:where(:scope, *) {
        display: inline-flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: .35rem;
        margin-inline-start: .65rem;
        vertical-align: .12em;
        font-size: .72rem;
        font-weight: 650;
        line-height: 1;
        white-space: nowrap;
      }
      .iot-section-progress-heading:where(:scope, *) {
        position: relative;
        min-block-size: 2rem;
        padding-inline-end: 2.75rem;
      }
      .iot-section-progress-heading > .iot-section-progress-control:where(:scope, *) {
        position: absolute;
        inset-block-start: 0;
        inset-inline-end: 0;
        margin: 0;
      }
      .iot-section-progress-toggle:where(:scope, *) {
        min-height: 1.8rem;
        border: 1px solid transparent;
        border-radius: 999px;
        background: transparent;
        color: var(--bs-body-color, #243746);
        padding: .35rem .62rem;
        font: inherit;
        line-height: 1;
        cursor: pointer;
      }
      .iot-section-progress-toggle:where(:scope, *) {
        position: relative;
        display: inline-grid;
        place-items: center;
        flex: 0 0 2.75rem;
        inline-size: 2.75rem;
        block-size: 2.75rem;
        min-inline-size: 2.75rem;
        min-block-size: 2.75rem;
        padding: 0;
        white-space: nowrap;
      }
      .iot-section-progress-toggle-icon:where(:scope, *) {
        box-sizing: border-box;
        inline-size: 1.75rem;
        block-size: 1.75rem;
        display: block;
        padding: .32rem;
        border: 1px solid color-mix(in srgb, var(--bs-body-color, #243746) 24%, transparent);
        border-radius: 999px;
        background: var(--bs-body-bg, #fff);
        pointer-events: none;
      }
      .iot-section-progress-toggle:where(:scope, *)::after {
        content: attr(data-tooltip);
        position: absolute;
        z-index: 1080;
        inset-inline-start: 50%;
        inset-block-end: calc(100% + .45rem);
        translate: -50% .2rem;
        max-inline-size: 14rem;
        padding: .38rem .5rem;
        border-radius: .35rem;
        background: #243746;
        color: #fff;
        font-size: .72rem;
        font-weight: 600;
        line-height: 1.2;
        text-align: center;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity .12s ease, translate .12s ease;
      }
      .iot-section-progress-toggle:hover:where(:scope, *)::after,
      .iot-section-progress-toggle:focus-visible:where(:scope, *)::after {
        opacity: 1;
        translate: -50% 0;
      }
      .iot-section-progress-toggle:hover:where(:scope, *),
      .iot-section-progress-toggle:focus-visible:where(:scope, *) {
        border-color: transparent;
        outline: none;
      }
      .iot-section-progress-toggle:hover .iot-section-progress-toggle-icon:where(:scope, *),
      .iot-section-progress-toggle:focus-visible .iot-section-progress-toggle-icon:where(:scope, *) {
        border-color: #087f5b;
        box-shadow: 0 0 0 2px color-mix(in srgb, #087f5b 34%, transparent);
      }
      .iot-section-progress-toggle[aria-pressed="true"]:where(:scope, *) {
        color: #075d45;
      }
      .iot-section-progress-toggle[aria-pressed="true"] .iot-section-progress-toggle-icon:where(:scope, *) {
        border-color: #087f5b;
        background: #e7f7f0;
      }
      .iot-section-progress-toggle[data-manual="true"]:where(:scope, *) {
        box-shadow: none;
      }
      .iot-section-progress-toggle[data-manual="true"] .iot-section-progress-toggle-icon:where(:scope, *) {
        box-shadow: inset 0 0 0 1px color-mix(in srgb, #087f5b 36%, transparent);
      }
      .iot-section-progress-icon:where(:scope, *) {
        width: 1rem;
        height: 1rem;
        flex: 0 0 1rem;
        margin-inline-end: .38rem;
        color: #667781;
        vertical-align: -.12em;
      }
      .iot-section-progress-icon[data-state="partially-complete"]:where(:scope, *) {
        color: #b26a00;
      }
      .iot-section-progress-icon[data-state="fully-complete"]:where(:scope, *) {
        color: #087f5b;
      }
      #quarto-sidebar a.sidebar-link[data-section-progress-unit]:where(:scope, *) {
        display: flex;
        align-items: center;
      }
      .iot-section-progress-legend:where(:scope, *) {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: .3rem .5rem;
        margin: .15rem 0 .6rem;
        padding: 0 .4rem;
        color: color-mix(in srgb, var(--ds-ink-soft, var(--bs-body-color, #243746)) 88%, transparent);
        font-family: var(--ds-font, inherit);
        font-size: .68rem;
        font-weight: 600;
        letter-spacing: .01em;
        line-height: 1.3;
      }
      .iot-section-progress-legend-item:where(:scope, *) {
        display: inline-flex;
        align-items: center;
        gap: .28rem;
        white-space: nowrap;
      }
      .iot-section-progress-legend-item .iot-section-progress-icon:where(:scope, *) {
        width: .78rem;
        height: .78rem;
        margin-inline-end: 0;
        flex: 0 0 .78rem;
      }
      .iot-section-progress-legend-sep:where(:scope, *) {
        opacity: .55;
      }
      .iot-persona-route-status:where(:scope, *) {
        flex: 1 0 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        margin-block-end: .65rem;
        padding: .65rem .8rem;
        border: 1px solid var(--ds-line, #e6e8eb);
        border-inline-start: 4px solid var(--pc-main, var(--ds-accent, #546e7a));
        border-radius: var(--ds-radius-sm, 8px);
        background: var(--ds-surface-alt, #f7f9fb);
      }
      .page-navigation[data-persona-route]:where(:scope, *) {
        flex-wrap: wrap;
      }
      .iot-persona-route-copy:where(:scope, *) {
        min-inline-size: 0;
        color: var(--ds-ink-soft, #52606d);
        font-size: .82rem;
        line-height: 1.35;
      }
      .iot-persona-route-copy strong:where(:scope, *) {
        display: block;
        overflow: hidden;
        color: var(--ds-ink, #1f2933);
        font-size: .9rem;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .iot-persona-route-exit:where(:scope, *) {
        flex: 0 0 auto;
        border: 0;
        background: transparent;
        color: var(--ds-accent, #365f91);
        padding: .35rem;
        font: inherit;
        font-size: .8rem;
        font-weight: 650;
        cursor: pointer;
      }
      .iot-persona-route-exit:hover:where(:scope, *),
      .iot-persona-route-exit:focus-visible:where(:scope, *) {
        text-decoration: underline;
        text-underline-offset: 2px;
      }
      .iot-section-progress-hint:where(:scope, *) {
        position: absolute;
        z-index: 1090;
        inset-block-start: calc(100% + .5rem);
        inset-inline-end: 0;
        display: flex;
        align-items: flex-start;
        gap: .4rem;
        inline-size: max-content;
        max-inline-size: 15rem;
        padding: .55rem .6rem;
        border-radius: .5rem;
        background: #243746;
        color: #fff;
        font-size: .74rem;
        font-weight: 600;
        line-height: 1.3;
        text-align: start;
        white-space: normal;
        box-shadow: 0 6px 18px rgba(15, 23, 33, .28);
      }
      .iot-section-progress-hint-text:where(:scope, *) {
        flex: 1 1 auto;
      }
      .iot-section-progress-hint-dismiss:where(:scope, *) {
        flex: 0 0 auto;
        min-inline-size: 2.75rem;
        min-block-size: 2.75rem;
        border: 0;
        border-radius: .3rem;
        background: rgba(255, 255, 255, .16);
        color: #fff;
        font-size: .82rem;
        line-height: 1;
        cursor: pointer;
      }
      .iot-section-progress-hint-dismiss:hover:where(:scope, *),
      .iot-section-progress-hint-dismiss:focus-visible:where(:scope, *) {
        background: rgba(255, 255, 255, .3);
        outline: 2px solid rgba(255, 255, 255, .6);
        outline-offset: 1px;
      }
      @media (max-width: 575.98px) {
        .iot-section-progress-heading > .iot-section-progress-control:where(:scope, *) {
          display: inline-flex;
          width: auto;
          margin: 0;
        }
        .iot-section-progress-hint:where(:scope, *) {
          max-inline-size: 11.5rem;
        }
        .iot-persona-route-status:where(:scope, *) {
          align-items: flex-start;
        }
        .iot-persona-route-copy strong:where(:scope, *) {
          white-space: normal;
        }
      }
      @media (prefers-reduced-motion: no-preference) {
        .iot-section-progress-toggle:where(:scope, *),
        .iot-section-progress-icon:where(:scope, *) {
          transition: background-color .15s ease, border-color .15s ease, color .15s ease;
        }
      }
}@scope (html[data-site-styles~="cca7b644b4c23886"]) {

/* Shared runtime skin: persona-route (injected-only) */
}@scope (html[data-site-runtime-skins~="persona-route"]) {
.page-navigation[data-persona-route]:where(:scope, *) { flex-wrap: wrap; }
      .iot-persona-route-status:where(:scope, *) {
        flex: 1 0 100%; display: flex; align-items: center; justify-content: space-between;
        gap: .75rem; margin-block-end: .65rem; padding: .65rem .8rem;
        border: 1px solid var(--ds-line, #e6e8eb);
        border-inline-start: 4px solid var(--pc-main, var(--ds-accent, #546e7a));
        border-radius: var(--ds-radius-sm, 8px); background: var(--ds-surface-alt, #f7f9fb);
      }
      .iot-persona-route-copy:where(:scope, *) {
        min-inline-size: 0; color: var(--ds-ink-soft, #52606d);
        font-size: .82rem; line-height: 1.35;
      }
      .iot-persona-route-copy strong:where(:scope, *) {
        display: block; overflow: hidden; color: var(--ds-ink, #1f2933);
        font-size: .9rem; text-overflow: ellipsis; white-space: nowrap;
      }
      .iot-persona-route-exit:where(:scope, *) {
        flex: 0 0 auto; border: 0; background: transparent;
        color: var(--ds-accent, #365f91); padding: .35rem;
        font: inherit; font-size: .8rem; font-weight: 650; cursor: pointer;
      }
      .iot-persona-route-exit:hover:where(:scope, *), .iot-persona-route-exit:focus-visible:where(:scope, *) {
        text-decoration: underline; text-underline-offset: 2px;
      }
      @media (max-width: 575.98px) {
        .iot-persona-route-status:where(:scope, *) { align-items: flex-start; }
        .iot-persona-route-copy strong:where(:scope, *) { white-space: normal; }
      }


}@scope (html[data-site-styles~="cca7b644b4c23886"]) {

/* Shared runtime skin: support-template */

    .support-notice-template:where(:scope, *){max-width:42rem;margin:1rem 0;padding:1rem;border:1px solid #94a3b8;border-radius:8px;color:#1f2933;background:#fff}
    .support-notice-template label:where(:scope, *){display:block;font-weight:600;margin-top:1rem}
    .support-notice-template textarea:where(:scope, *),.support-notice-template input:where(:scope, *){display:block;box-sizing:border-box;width:100%;max-width:100%;font:inherit;padding:.6rem;border:1px solid #64748b;border-radius:4px;color:#1f2933;background:#fff}
    .support-notice-template button:where(:scope, *){font:inherit;padding:.6rem;margin:.5rem .5rem 0 0;cursor:pointer}
    .support-notice-template :focus-visible:where(:scope, *){outline:3px solid #1865f2;outline-offset:2px}


/* Shared runtime skin: support-roles */

      .support-roles:where(:scope, *){max-width:54rem;padding:1rem;border:1px solid #767676;border-radius:.5rem;color:inherit}
      .support-roles label:where(:scope, *){display:block;margin:.75rem 0}
      .support-roles input:where(:scope, *){display:block;width:100%;max-width:32rem;box-sizing:border-box;padding:.5rem;font:inherit}
      .support-roles table:where(:scope, *){width:100%;border-collapse:collapse;table-layout:fixed}
      .support-roles th:where(:scope, *),.support-roles td:where(:scope, *){padding:.5rem;text-align:left;vertical-align:top;border-bottom:1px solid #767676;overflow-wrap:anywhere}
      @media print{.support-roles form:where(:scope, *),.support-roles button:where(:scope, *){display:none}}


/* Shared runtime skin: support-recovery */
#support-recovery-print:where(:scope, *){display:none}@media print{#support-recovery-print:where(:scope, *){display:block}#support-recovery-card label:where(:scope, *),#support-recovery-failure:where(:scope, *),#support-recovery-action:where(:scope, *),#support-recovery-card button:where(:scope, *){display:none}#support-recovery-card:where(:scope, *){break-inside:avoid}}

@scope (.iotclass-admin-modal) {
/* Shared runtime skin: iotclass-ui */

          .coverage-dashboard { max-height: 70vh; overflow-y: auto; padding-right: 8px; }
          .coverage-header { margin-bottom: 16px; }
          .coverage-header h3 { margin: 0 0 8px 0; color: #2c3e50; }
          .coverage-meta { font-size: 12px; color: #7f8c8d; display: flex; flex-wrap: wrap; gap: 8px; }

          .coverage-summary-cards {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            margin-bottom: 16px;
          }
          .coverage-card {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 12px;
            text-align: center;
          }
          .coverage-card-number {
            font-size: 24px;
            font-weight: bold;
            color: #2c3e50;
          }
          .coverage-card-label {
            font-size: 11px;
            color: #7f8c8d;
            text-transform: uppercase;
          }

          .coverage-legend {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 16px;
            padding: 8px 12px;
            background: #f8f9fa;
            border-radius: 4px;
          }
          .legend-item { display: flex; align-items: center; font-size: 11px; }
          .legend-color {
            width: 14px;
            height: 14px;
            border-radius: 3px;
            margin-right: 4px;
          }

          .coverage-by-source { margin-bottom: 20px; }
          .coverage-by-source h4 { margin: 0 0 12px 0; color: #34495e; font-size: 14px; }

          .source-coverage-row {
            display: flex;
            align-items: center;
            padding: 10px 12px;
            border: 1px solid #e9ecef;
            border-radius: 6px;
            margin-bottom: 4px;
            background: #fff;
            cursor: pointer;
            transition: background 0.2s;
          }
          .source-coverage-row:hover { background: #f8f9fa; }
          .source-coverage-row.expanded { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; border-bottom: none; }

          .source-info { flex: 0 0 180px; min-width: 140px; }
          .source-name { font-weight: 600; color: #2c3e50; font-size: 13px; }
          .source-type { font-size: 10px; color: #7f8c8d; }
          .source-status {
            font-size: 9px;
            padding: 2px 6px;
            border-radius: 10px;
            display: inline-block;
            margin-top: 2px;
          }
          .status-foundation { background: #d5f5e3; color: #1e8449; }
          .status-processed { background: #d6eaf8; color: #2471a3; }
          .status-pending { background: #fadbd8; color: #943126; }

          .coverage-bar-container {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 0 12px;
          }
          .coverage-bar {
            flex: 1;
            height: 18px;
            background: #ecf0f1;
            border-radius: 4px;
            overflow: hidden;
          }
          .coverage-segment {
            height: 100%;
            transition: width 0.3s ease;
          }
          .coverage-percent {
            font-weight: bold;
            font-size: 14px;
            min-width: 45px;
            text-align: right;
          }

          .depth-label {
            font-size: 11px;
            font-weight: 500;
            min-width: 90px;
            text-align: center;
          }

          .expand-btn {
            background: #e9ecef;
            border: none;
            border-radius: 4px;
            width: 24px;
            height: 24px;
            cursor: pointer;
            font-size: 14px;
            color: #7f8c8d;
            margin-left: 8px;
          }
          .expand-btn:hover { background: #dee2e6; }
          .source-coverage-row.expanded + .source-details { display: block; }

          .source-details {
            display: none;
            padding: 12px 16px;
            background: #fafbfc;
            border: 1px solid #e9ecef;
            border-top: none;
            border-radius: 0 0 6px 6px;
            margin-bottom: 8px;
            font-size: 12px;
          }
          .source-details strong { color: #34495e; }
          .source-strengths, .source-weaknesses { margin-bottom: 10px; }
          .source-details ul { margin: 4px 0 0 16px; padding: 0; color: #5d6d7e; }
          .source-details li { margin-bottom: 2px; }

          .category-scores { margin-top: 12px; }
          .category-bars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 8px; }
          .cat-bar-row { display: flex; align-items: center; gap: 8px; }
          .cat-name { font-size: 10px; color: #7f8c8d; min-width: 100px; }
          .cat-bar { flex: 1; height: 12px; background: #ecf0f1; border-radius: 3px; overflow: hidden; }
          .cat-fill { height: 100%; }
          .cat-score { font-size: 10px; font-weight: 600; min-width: 30px; text-align: right; }

          .coverage-by-category { margin-top: 20px; }
          .coverage-by-category h4 { margin: 0 0 12px 0; color: #34495e; font-size: 14px; }

          .topic-source-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
          }
          .topic-source-item {
            display: flex;
            justify-content: space-between;
            padding: 8px 10px;
            background: #f8f9fa;
            border-radius: 4px;
            font-size: 11px;
          }
          .topic-label { color: #34495e; font-weight: 500; text-transform: capitalize; }
          .best-sources { color: #16a085; font-weight: 600; }

          .admin-tabs {
            display: flex;
            gap: 4px;
            margin-bottom: 16px;
            border-bottom: 2px solid #e9ecef;
            padding-bottom: 8px;
          }
          .admin-tab {
            padding: 8px 16px;
            background: none;
            border: none;
            border-radius: 4px 4px 0 0;
            cursor: pointer;
            font-size: 13px;
            color: #7f8c8d;
            transition: all 0.2s;
          }
          .admin-tab:hover { background: #f8f9fa; color: #2c3e50; }
          .admin-tab.active {
            background: #16a085;
            color: #fff;
            font-weight: 600;
          }

          @media (max-width: 768px) {
            .coverage-summary-cards { grid-template-columns: repeat(2, 1fr); }
            .source-coverage-row { flex-wrap: wrap; }
            .source-info { flex: 1 1 100%; margin-bottom: 8px; }
            .coverage-bar-container { flex: 1 1 100%; margin: 0; }
            .category-bars { grid-template-columns: 1fr; }
            .topic-source-grid { grid-template-columns: 1fr; }
          }


/* Shared runtime skin: iotclass-ui */

        :scope {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0,0,0,0.6);
          z-index: 10000;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 20px;
          box-sizing: border-box;
        }
        .admin-modal-content {
          background: #fff;
          border-radius: 12px;
          max-width: 900px;
          width: 100%;
          max-height: 85vh;
          display: flex;
          flex-direction: column;
          box-shadow: 0 20px 60px rgba(0,0,0,0.3);
          transition: all 0.3s ease;
        }
        :scope.fullscreen .admin-modal-content {
          max-width: 100%;
          width: 100%;
          max-height: 100%;
          height: 100%;
          border-radius: 0;
          margin: 0;
        }
        :scope.fullscreen {
          padding: 0;
        }
        .admin-modal-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 16px 20px;
          border-bottom: 1px solid #e9ecef;
          background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
          color: #fff;
          border-radius: 12px 12px 0 0;
          flex-shrink: 0;
        }
        :scope.fullscreen .admin-modal-header {
          border-radius: 0;
        }
        .admin-modal-header h2 {
          margin: 0;
          font-size: 18px;
          font-weight: 600;
        }
        .admin-modal-controls {
          display: flex;
          gap: 8px;
        }
        .admin-close-btn, .admin-fullscreen-btn {
          background: rgba(255,255,255,0.1);
          border: none;
          color: #fff;
          font-size: 20px;
          cursor: pointer;
          padding: 4px 10px;
          border-radius: 4px;
          transition: background 0.2s;
        }
        .admin-close-btn:hover, .admin-fullscreen-btn:hover {
          background: rgba(255,255,255,0.2);
        }
        .admin-fullscreen-btn {
          font-size: 16px;
        }
        .admin-modal-body {
          padding: 20px;
          overflow-y: auto;
          flex: 1;
        }
        :scope.fullscreen .admin-modal-body {
          padding: 24px 40px;
        }
        .stats-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
          gap: 12px;
          margin-bottom: 20px;
        }
        .stat-card {
          background: #f8f9fa;
          border-radius: 8px;
          padding: 16px;
          text-align: center;
        }
        .stat-number {
          font-size: 28px;
          font-weight: bold;
          color: #2c3e50;
        }
        .stat-label {
          font-size: 12px;
          color: #7f8c8d;
          text-transform: uppercase;
          margin-top: 4px;
        }
        .stat-card.stat-up { background: #d5f5e3; }
        .stat-card.stat-up .stat-number { color: #1e8449; }
        .stat-card.stat-down { background: #fadbd8; }
        .stat-card.stat-down .stat-number { color: #943126; }
        .feedback-item {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 10px;
          border-radius: 6px;
          margin-bottom: 8px;
          background: #f8f9fa;
          font-size: 13px;
        }
        .feedback-item.up { border-left: 3px solid #1e8449; }
        .feedback-item.down { border-left: 3px solid #943126; }
        .feedback-vote { font-size: 18px; }
        .feedback-chapter { font-weight: 600; color: #2c3e50; }
        .feedback-section { color: #7f8c8d; }
        .feedback-comment { color: #5d6d7e; font-style: italic; flex: 1; }
        .feedback-time { color: #adb5bd; font-size: 11px; }
        .empty-message { color: #7f8c8d; text-align: center; padding: 20px; }
        .admin-footer {
          text-align: center;
          padding-top: 16px;
          border-top: 1px solid #e9ecef;
          color: #adb5bd;
          margin-top: 20px;
        }
        .admin-error {
          color: #943126;
          background: #fadbd8;
          padding: 16px;
          border-radius: 8px;
          text-align: center;
        }
        .admin-loading {
          text-align: center;
          padding: 40px;
          color: #7f8c8d;
        }



}

/* Shared runtime skin: iot-sonification */
.iot-sonification .iot-sonification-extra:where(:scope, *){opacity:0}.iot-sonification:hover .iot-sonification-extra:where(:scope, *),.iot-sonification:focus-within .iot-sonification-extra:where(:scope, *),.iot-sonification[data-playing] .iot-sonification-extra:where(:scope, *){opacity:1}.iot-sonification [aria-current]:where(:scope, *){outline:2px solid currentColor}.iot-sonification table:where(:scope, *){border-spacing:1rem .3rem;max-width:100%}

/* Tour presentation skins; lifetime follows their DOM readiness markers. */
}@scope (html:has(#iot-tour-audio-sensing-workbench-still)) {#audioSensingLab *:where(:scope, *), #audioSensingLab *:where(:scope, *)::before, #audioSensingLab *:where(:scope, *)::after { transition: none !important; animation: none !important; }
}@scope (html:has(#iot-tour-ble-connection-still)) {#bleConnectionLab *:where(:scope, *), #bleConnectionLab *:where(:scope, *)::before, #bleConnectionLab *:where(:scope, *)::after { transition: none !important; animation: none !important; }
}@scope (html:has(#iot-tour-ble-mesh-still)) {#bleMeshRelayLab *:where(:scope, *), #bleMeshRelayLab *:where(:scope, *)::before, #bleMeshRelayLab *:where(:scope, *)::after { transition: none !important; animation: none !important; }
}@scope (html:has(#iot-tour-ble-pairing-still)) {#blePairingLab *:where(:scope, *), #blePairingLab *:where(:scope, *)::before, #blePairingLab *:where(:scope, *)::after { transition: none !important; animation: none !important; }
}@scope (html:has(#iot-tour-can-bus-bridging-still)) {#canBusLab *:where(:scope, *), #canBusLab *:where(:scope, *)::before, #canBusLab *:where(:scope, *)::after { transition: none !important; animation: none !important; }
}@scope (html:has(#iot-tour-certificate-lifecycle-still)) {#certLifecycleLab *:where(:scope, *), #certLifecycleLab *:where(:scope, *)::before, #certLifecycleLab *:where(:scope, *)::after { transition: none !important; animation: none !important; }
}@scope (html:has(#iot-tour-coap-blockwise-still)) {#coapBlockLab *:where(:scope, *), #coapBlockLab *:where(:scope, *)::before, #coapBlockLab *:where(:scope, *)::after { transition: none !important; animation: none !important; }
}@scope (html:has(#iot-tour-coap-observe-still)) {#coapObserveLab *:where(:scope, *), #coapObserveLab *:where(:scope, *)::before, #coapObserveLab *:where(:scope, *)::after { transition: none !important; animation: none !important; }
}@scope (html:has(#iot-tour-edge-fog-cloud-arch-still)) {#edgeFogCloudFlowLab *:where(:scope, *), #edgeFogCloudFlowLab *:where(:scope, *)::before, #edgeFogCloudFlowLab *:where(:scope, *)::after { transition: none !important; animation: none !important; }
}@scope (html:has(#iot-tour-eflow-crop)) {
        #edgeFogCloudFlowLab > :not(.eflow-shell):where(:scope, *),
        #edgeFogCloudFlowLab .eflow-sidebar:where(:scope, *),
        #edgeFogCloudFlowLab .eflow-main > :not(:first-child):where(:scope, *),
        #edgeFogCloudFlowLab .eflow-stat-row:where(:scope, *),
        #edgeFogCloudFlowLab .eflow-caption-strip:where(:scope, *) { display: none !important; }
        #edgeFogCloudFlowLab .eflow-shell:where(:scope, *) { display: block; }
        #edgeFogCloudFlowLab[data-tour-caption-only]:where(:scope, *) { display: none !important; }
        #iot-tour-eflow-card[hidden]:where(:scope, *) { display: none !important; }
}@scope (html:has(#iot-tour-energy-harvest-still)) {#harvestConcepts *:where(:scope, *), #harvestConcepts *:where(:scope, *)::before, #harvestConcepts *:where(:scope, *)::after { transition: none !important; animation: none !important; }
}@scope (html:has(#iot-tour-event-vs-processing-time-still)) {#eventTimeLab *:where(:scope, *), #eventTimeLab *:where(:scope, *)::before, #eventTimeLab *:where(:scope, *)::after { transition: none !important; animation: none !important; }
}@scope (html:has(#iot-tour-field-testing-tradeoffs-still)) {#tradeLab *:where(:scope, *), #tradeLab *:where(:scope, *)::before, #tradeLab *:where(:scope, *)::after { transition: none !important; animation: none !important; }
}@scope (html:has(#iot-tour-iot-dashboard-still)) {#cityLab *:where(:scope, *), #cityLab *:where(:scope, *)::before, #cityLab *:where(:scope, *)::after { transition: none !important; animation: none !important; }
}@scope (html:has(#iot-tour-latency-budgets-still)) {#latencyWorkbench *:where(:scope, *), #latencyWorkbench *:where(:scope, *)::before, #latencyWorkbench *:where(:scope, *)::after { transition: none !important; animation: none !important; }
}@scope (html:has(#iot-tour-lwm2m-lifecycle-still)) {*:where(:scope, *) { animation: none !important; transition: none !important; }
}@scope (html:has(#iot-tour-matter-bridge-still)) {#matterBridgeLab *:where(:scope, *), #matterBridgeLab *:where(:scope, *)::before, #matterBridgeLab *:where(:scope, *)::after { transition: none !important; animation: none !important; }
}@scope (html:has(#iot-tour-mcu-interrupts-still)) {#interruptLab *:where(:scope, *), #interruptLab *:where(:scope, *)::before, #interruptLab *:where(:scope, *)::after { transition: none !important; animation: none !important; }
}@scope (html:has(#iot-tour-motor-control-simulator-still)) {#motorControlLab *:where(:scope, *), #motorControlLab *:where(:scope, *)::before, #motorControlLab *:where(:scope, *)::after { transition: none !important; animation: none !important; }
}@scope (html:has(#iot-tour-nbiot-coverage-still)) {*:where(:scope, *) { animation: none !important; transition: none !important; }
}@scope (html:has(#iot-tour-nbiot-psm-still)) {*:where(:scope, *) { animation: none !important; transition: none !important; }
}@scope (html:has(#iot-tour-network-segmentation-still)) {#segLab *:where(:scope, *), #segLab *:where(:scope, *)::before, #segLab *:where(:scope, *)::after { transition: none !important; animation: none !important; }
}@scope (html:has(#iot-tour-ota-update-flow-still)) {#flowLab *:where(:scope, *), #flowLab *:where(:scope, *)::before, #flowLab *:where(:scope, *)::after { transition: none !important; animation: none !important; }
}@scope (html:has(#iot-tour-packet-capture-still)) {#captureLab *:where(:scope, *), #captureLab *:where(:scope, *)::before, #captureLab *:where(:scope, *)::after { transition: none !important; animation: none !important; }
}@scope (html:has(#iot-tour-privacy-preserving-still)) {*:where(:scope, *) { animation: none !important; transition: none !important; }
}@scope (html:has(#iot-tour-pwm-motor-still)) {#pwmLab *:where(:scope, *), #pwmLab *:where(:scope, *)::before, #pwmLab *:where(:scope, *)::after { transition: none !important; animation: none !important; }
}@scope (html:has(#iot-tour-query-still[data-active="true"])) {#queryPerformanceLab *:where(:scope, *), #queryPerformanceLab *:where(:scope, *)::before, #queryPerformanceLab *:where(:scope, *)::after { transition: none !important; animation: none !important; }
}@scope (html:has(#iot-tour-rpl-card-style)) {#rplLab[data-tour-caption-only]:where(:scope, *), #iot-tour-rpl-card[hidden]:where(:scope, *) { display: none !important; }
}@scope (html:has(#iot-tour-rpl-dodag-forming-still)) {#rplLab *:where(:scope, *), #rplLab *:where(:scope, *)::before, #rplLab *:where(:scope, *)::after { transition: none !important; animation: none !important; }
}@scope (html:has(#sensor-pipeline-tour-motion[data-active="true"])) {#edgeFogCloudFlowLab *:where(:scope, *), #edgeFogCloudFlowLab *:where(:scope, *)::before, #edgeFogCloudFlowLab *:where(:scope, *)::after { transition: none !important; animation: none !important; }
}@scope (html:has(#iot-tour-tsdb-write-path-still)) {#tsdbWritePathLab *:where(:scope, *), #tsdbWritePathLab *:where(:scope, *)::before, #tsdbWritePathLab *:where(:scope, *)::after { transition: none !important; animation: none !important; }
}@scope (html:has(#iot-tour-tsn-time-aware-shaper-still)) {#tsnWorkbench *:where(:scope, *), #tsnWorkbench *:where(:scope, *)::before, #tsnWorkbench *:where(:scope, *)::after { transition: none !important; animation: none !important; }
}@scope (html:has(#iot-tour-uwb-aoa-indoor-still)) {#uaSpacingReflector *:where(:scope, *), #uaSpacingReflector *:where(:scope, *)::before, #uaSpacingReflector *:where(:scope, *)::after { transition: none !important; animation: none !important; }
}@scope (html:has(#iot-tour-wifi-4way-handshake-still)) {#wifiHandshakeLab *:where(:scope, *), #wifiHandshakeLab *:where(:scope, *)::before, #wifiHandshakeLab *:where(:scope, *)::after { transition: none !important; animation: none !important; }
}@scope (html:has(#iot-tour-wifi-csma-ca-still)) {#wifiCsmaWorkbench *:where(:scope, *), #wifiCsmaWorkbench *:where(:scope, *)::before, #wifiCsmaWorkbench *:where(:scope, *)::after { transition: none !important; animation: none !important; }
}@scope (html:has(#iot-tour-wirelesshart-still)) {#whartWorkbench *:where(:scope, *), #whartWorkbench *:where(:scope, *)::before, #whartWorkbench *:where(:scope, *)::after { transition: none !important; animation: none !important; }
}@scope (html[data-site-styles~="cca7b644b4c23886"]) {

/* FIG-PHONE-02: static controls are out of flow, including late admin grants. */
@media (max-width: 900px), (pointer: coarse) {
  html:where(:scope)[data-feat-figure-enlarge="on"] [data-iot-figure-host] { position: relative; }
}
.iot-figure-trigger:where(:scope, *) { display: none; }
@media (max-width: 900px), (pointer: coarse) {
  html:where(:scope)[data-feat-figure-enlarge="on"] .iot-figure-trigger {
    display: grid;
    place-items: center;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #526174;
    border-radius: 6px;
    background: #fff;
    color: #17212b;
    font: 700 26px/1 system-ui, sans-serif;
    cursor: zoom-in;
  }
  html:where(:scope)[data-feat-figure-enlarge="on"] [data-iot-figure] { cursor: zoom-in; }
}
.iot-figure-trigger:focus-visible:where(:scope, *) { outline: 3px solid #1269b0; outline-offset: 2px; }
.iot-figure-viewer.iot-photo-lightbox:where(:scope, *) { box-sizing: border-box; overflow: hidden; }
@media (max-width: 900px), (pointer: coarse) {
  .iot-figure-viewer.iot-photo-lightbox:where(:scope, *) {
    width: 100vw;
    height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
}
.iot-figure-viewer[open]:where(:scope, *) { display: flex; flex-direction: column; }
.iot-figure-viewer .iot-photo-lightbox__bar:where(:scope, *) { flex: none; }
.iot-figure-viewer .iot-photo-lightbox__viewport:where(:scope, *) {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  height: auto;
  overflow: hidden;
  touch-action: none;
  padding: 0;
  background: #fff;
}
.iot-figure-viewer__image:where(:scope, *) { width: 100%; height: 100%; min-height: 0; transform-origin: center; }
.iot-figure-viewer .iot-photo-lightbox__image:where(:scope, *) {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: auto;
  cursor: grab;
}
.iot-figure-viewer .iot-photo-lightbox__caption:where(:scope, *) {
  flex: none;
  box-sizing: border-box;
  width: 100%;
  max-height: 22dvh;
  max-width: none;
  overflow: auto;
  padding: 8px 16px;
  background: #fff;
  color: #17212b;
}
.iot-figure-viewer .iot-photo-lightbox__caption p:where(:scope, *) { margin: 0 0 4px; }

.iot-figure-viewer__svg:where(:scope, *) { width: 100%; height: 100%; }
.iot-figure-viewer__svg:where(:scope, *)::part(figure-art) { width: 100%; height: 100%; display: block; }
/* The existing phone scroll mode remains intact when the preview is off. */
@media (max-width: 900px), (pointer: coarse) {
  html:where(:scope)[data-feat-figure-enlarge="on"] .iot-figure-expand { visibility: hidden; }
}
}