/* inline */
@scope (html[data-site-styles~="004fc1b49f1a5a5b"]) {
  /* =========================================================================
     About page. Self-contained: every colour is defined here from the platform
     palette (--ieee-navy / --ieee-teal / --ieee-orange and the grey ramp in
     style/platform.css), so this page cannot drift when a module stylesheet
     changes. Motion is decorative only and is switched off wholesale under
     prefers-reduced-motion.
     ========================================================================= */
  /* The layout hands an article column (802px) and chapter chrome to every page.
     This page is a full-bleed public page, so the column is released here and the
     chapter decorations that would otherwise land on its headings, images and
     lists are switched off. Scoped to this body class only. */
  /* Founder 2026-09-08: every coloured band reaches the browser edges. The
     platform container pads 16px each side; a full-bleed page zeroes it. */
  body.iotclass-about-page #quarto-content.page-columns:where(:scope, *) { display: block; padding: 0 !important; }
  body.iotclass-about-page #quarto-document-content:where(:scope, *) { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; }
  body.iotclass-about-page .site-footer:where(:scope, *) { margin-top: 0 !important; }
  body.iotclass-about-page #quarto-document-content.content:where(:scope, *) {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    grid-column: 1 / -1;
  }
  body.iotclass-about-page #title-block-header:where(:scope, *),
  body.iotclass-about-page .quarto-title-block:where(:scope, *),
  body.iotclass-about-page #quarto-margin-sidebar:where(:scope, *),
  body.iotclass-about-page .iotclass-last-updated:where(:scope, *),
  body.iotclass-about-page #quarto-document-content > div.is-populated:where(:scope, *) { display: none !important; }

  body.iotclass-about-page #quarto-document-content .about h1:where(:scope, *),
  body.iotclass-about-page #quarto-document-content .about h2:where(:scope, *),
  body.iotclass-about-page #quarto-document-content .about h3:where(:scope, *) {
    background: none !important;
    border: 0 !important;
    border-bottom: 0 !important;
    padding: 0 !important;
    max-width: none;
    text-transform: none;
    counter-increment: none;
  }
  body.iotclass-about-page #quarto-document-content .about p:where(:scope, *),
  body.iotclass-about-page #quarto-document-content .about li:where(:scope, *),
  body.iotclass-about-page #quarto-document-content .about ul:where(:scope, *),
  body.iotclass-about-page #quarto-document-content .about ol:where(:scope, *) {
    max-width: none;
  }
  body.iotclass-about-page #quarto-document-content .about h2:where(:scope, *)::before,
  body.iotclass-about-page #quarto-document-content .about h3:where(:scope, *)::before,
  body.iotclass-about-page #quarto-document-content .about h2:where(:scope, *)::after,
  body.iotclass-about-page #quarto-document-content .about h3:where(:scope, *)::after { content: none !important; }
  body.iotclass-about-page #quarto-document-content .about img:where(:scope, *) {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
  body.iotclass-about-page #quarto-document-content .about ul:where(:scope, *),
  body.iotclass-about-page #quarto-document-content .about ol:where(:scope, *) { margin: 0; }
  body.iotclass-about-page #quarto-document-content .about li:where(:scope, *)::marker { content: none; }
  body.iotclass-about-page #quarto-document-content .about a:where(:scope, *) { text-decoration: none; }

  body.iotclass-about-page #quarto-document-content .about:where(:scope, *) {
    --ab-navy: #2c3e50;
    --ab-navy-deep: #1f2c38;
    --ab-teal: #16a085;
    --ab-teal-deep: #0f7c68;
    --ab-orange: #e67e22;
    --ab-ink: #21242c;
    --ab-ink-soft: #475774;
    --ab-ink-faint: #646b7a;
    --ab-line: #dfe3e8;
    --ab-surface: #ffffff;
    --ab-tint: #f4f7f9;
    --ab-shell: min(1160px, 100% - 3rem);
    /* Centring is done with section padding rather than auto margins. */
    --ab-gutter: max(1.5rem, (100% - 1160px) / 2);

    color: var(--ab-ink);
    font-family: var(--ds-font, "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif);
    line-height: 1.6;
  }

  body.iotclass-about-page #quarto-document-content .about *:where(:scope, *),
  body.iotclass-about-page #quarto-document-content .about *:where(:scope, *)::before,
  body.iotclass-about-page #quarto-document-content .about *:where(:scope, *)::after { box-sizing: border-box; }

  body.iotclass-about-page #quarto-document-content .about h1:where(:scope, *),
  body.iotclass-about-page #quarto-document-content .about h2:where(:scope, *),
  body.iotclass-about-page #quarto-document-content .about h3:where(:scope, *) {
    color: var(--ab-navy) !important;
    letter-spacing: -0.02em;
    line-height: 1.18;
    margin: 0;
    text-wrap: balance;
  }

  body.iotclass-about-page #quarto-document-content .about p:where(:scope, *) { margin: 0; }

  /* ---------- shared section frame ---------- */
  body.iotclass-about-page #quarto-document-content .ab-section:where(:scope, *) {
    padding: clamp(3.25rem, 7vw, 5.5rem) var(--ab-gutter);
  }
  body.iotclass-about-page #quarto-document-content .ab-section > *:where(:scope, *) {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
  body.iotclass-about-page #quarto-document-content .ab-section--tint:where(:scope, *) { background: var(--ab-tint); }
  body.iotclass-about-page #quarto-document-content .ab-section h2:where(:scope, *) {
    font-size: clamp(1.65rem, 3.4vw, 2.4rem);
    margin-bottom: 0.85rem;
  }
  body.iotclass-about-page #quarto-document-content .ab-kicker:where(:scope, *) {
    text-transform: uppercase;
    letter-spacing: 0.13em;
    font-size: 0.735rem;
    font-weight: 700;
    color: var(--ab-teal-deep);
    margin-bottom: 0.6rem;
  }
  body.iotclass-about-page #quarto-document-content .ab-kicker--light:where(:scope, *) { color: #7fd8c6; }
  body.iotclass-about-page #quarto-document-content .ab-section > .ab-lede:where(:scope, *),
  body.iotclass-about-page #quarto-document-content .ab-lede:where(:scope, *) {
    font-size: clamp(1rem, 1.55vw, 1.115rem);
    color: var(--ab-ink-soft);
    width: min(100%, 62ch);
    margin-bottom: 2.25rem;
  }
  body.iotclass-about-page #quarto-document-content .ab-section > .ab-lede--light:where(:scope, *),
  body.iotclass-about-page #quarto-document-content .ab-lede--light:where(:scope, *) { color: #c6d3dd; }
  /* Asides. Named "aside", not "note": platform.css styles any class containing
     "-note" as a boxed callout with !important borders, which is what made the
     first version's closing lines look like stray panels. */
  body.iotclass-about-page #quarto-document-content .ab-section > .ab-aside:where(:scope, *),
  body.iotclass-about-page #quarto-document-content .ab-aside:where(:scope, *) {
    margin: 2.4rem 0 0;
    padding: 0;
    width: min(100%, 64ch);
    font-size: 1.04rem;
    line-height: 1.55;
    color: var(--ab-ink-soft);
  }
  body.iotclass-about-page #quarto-document-content .ab-aside__label:where(:scope, *) {
    display: inline-block;
    margin-right: 0.6rem;
    padding: 0.14rem 0.6rem;
    border-radius: 999px;
    background: rgba(22, 160, 133, 0.12);
    color: var(--ab-teal-deep);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    vertical-align: 0.14em;
  }

  /* ---------- hero ---------- */
  body.iotclass-about-page #quarto-document-content .ab-hero:where(:scope, *) {
    position: relative;
    overflow: hidden;
    padding-inline: var(--ab-gutter);
    background:
      radial-gradient(circle at 78% 12%, rgba(22, 160, 133, 0.16), transparent 46%),
      radial-gradient(circle at 12% 78%, rgba(230, 126, 34, 0.12), transparent 44%),
      linear-gradient(168deg, #f7fbfc 0%, #eef4f7 58%, #ffffff 100%);
    border-bottom: 1px solid var(--ab-line);
    padding-block: clamp(3rem, 8vw, 5.75rem) 0;
  }
  body.iotclass-about-page #quarto-document-content .ab-hero__glow:where(:scope, *) {
    position: absolute;
    inset: -30% 40% 45% -20%;
    background: radial-gradient(circle, rgba(44, 62, 80, 0.08), transparent 62%);
    pointer-events: none;
  }
  body.iotclass-about-page #quarto-document-content .ab-hero__inner:where(:scope, *) {
    position: relative;
    width: 100%;
    max-width: 46rem;
  }
  body.iotclass-about-page #quarto-document-content .ab-eyebrow:where(:scope, *) {
    display: inline-block;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ab-teal-deep);
    background: rgba(22, 160, 133, 0.11);
    border-radius: 999px;
    padding: 0.34rem 0.8rem;
    margin-bottom: 1.1rem;
  }
  body.iotclass-about-page #quarto-document-content .ab-hero__title:where(:scope, *) {
    font-size: clamp(2.05rem, 5.4vw, 3.5rem);
    font-weight: 800;
  }
  /* Highlighter rather than a positioned bar: a background gradient repeats on
     every line the phrase wraps onto, and never sits behind the hero backdrop. */
  body.iotclass-about-page #quarto-document-content .ab-underline:where(:scope, *) {
    color: var(--ab-teal-deep);
    background-image: linear-gradient(transparent 63%, rgba(22, 160, 133, 0.24) 63%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: abDraw-e9ed86e291c09619 900ms 320ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }
  @keyframes abDraw-e9ed86e291c09619 { from { background-size: 0 100%; } to { background-size: 100% 100%; } }

  body.iotclass-about-page #quarto-document-content .ab-hero__lead:where(:scope, *) {
    margin-top: 1.15rem;
    font-size: clamp(1.02rem, 1.7vw, 1.19rem);
    color: var(--ab-ink-soft);
    max-width: 46ch;
  }
  body.iotclass-about-page #quarto-document-content .ab-hero__cta:where(:scope, *) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.75rem;
  }
  body.iotclass-about-page #quarto-document-content .ab-btn:where(:scope, *) {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.72rem 1.35rem;
    font-weight: 700;
    font-size: 0.955rem;
    text-decoration: none;
    transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease;
  }
  body.iotclass-about-page #quarto-document-content .ab-btn--solid:where(:scope, *) {
    background: var(--ab-teal);
    color: #ffffff !important;
    border: 2px solid var(--ab-teal);
  }
  body.iotclass-about-page #quarto-document-content .ab-btn--solid:hover:where(:scope, *) { background: var(--ab-teal-deep); border-color: var(--ab-teal-deep); transform: translateY(-2px); }
  body.iotclass-about-page #quarto-document-content .ab-btn--ghost:where(:scope, *) {
    background: transparent;
    color: var(--ab-navy) !important;
    border: 2px solid rgba(44, 62, 80, 0.24);
  }
  body.iotclass-about-page #quarto-document-content .ab-btn--ghost:hover:where(:scope, *) { border-color: var(--ab-navy); transform: translateY(-2px); }

  /* hero cast: a calm floating row, one of them waving hello */
  body.iotclass-about-page #quarto-document-content .ab-cast:where(:scope, *) {
    position: relative;
    align-items: end;
    width: 100%;
    margin: clamp(2rem, 5vw, 3.25rem) 0 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: clamp(0.5rem, 3.5vw, 2.5rem);
    padding-bottom: clamp(1.5rem, 4vw, 2.75rem);
  }
  body.iotclass-about-page #quarto-document-content .ab-cast__item:where(:scope, *) {
    margin: 0;
    text-align: center;
  }
  body.iotclass-about-page #quarto-document-content .ab-cast__item img:where(:scope, *) {
    display: block;
    /* Portraits are drawn at different aspect ratios (Sammy is tall, the object
       mascots are square), so each sits in one box and is scaled to fit. */
    width: clamp(72px, 12vw, 136px);
    height: clamp(80px, 13vw, 150px);
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(0 12px 20px rgba(31, 44, 56, 0.16));
  }

  /* ---------- vision + mission: two editorial statements, no boxes ---------- */
  body.iotclass-about-page #quarto-document-content .ab-direction:where(:scope, *) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    column-gap: clamp(2.5rem, 6vw, 5.5rem);
    row-gap: 2.75rem;
    margin-top: 0.5rem;
  }
  body.iotclass-about-page #quarto-document-content .ab-statement:where(:scope, *) {
    position: relative;
    padding-top: 1.35rem;
    display: grid;
    gap: 0.9rem;
    align-content: start;
  }
  body.iotclass-about-page #quarto-document-content .ab-statement:where(:scope, *)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3.25rem;
    height: 4px;
    border-radius: 2px;
    background: var(--ab-teal);
  }
  body.iotclass-about-page #quarto-document-content .ab-statement--mission:where(:scope, *)::before { background: var(--ab-orange); }
  body.iotclass-about-page #quarto-document-content .ab-statement__label:where(:scope, *) {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ab-teal-deep);
  }
  body.iotclass-about-page #quarto-document-content .ab-statement--mission .ab-statement__label:where(:scope, *) { color: #a5560f; }
  body.iotclass-about-page #quarto-document-content .ab-statement__label span:where(:scope, *) {
    margin-right: 0.45rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 600;
    letter-spacing: 0.02em;
    opacity: 0.7;
  }
  body.iotclass-about-page #quarto-document-content .ab-statement__big:where(:scope, *) {
    margin: 0;
    font-size: clamp(1.22rem, 2.1vw, 1.55rem);
    font-weight: 650;
    color: var(--ab-navy) !important;
    line-height: 1.38;
    letter-spacing: -0.012em;
    text-wrap: balance;
  }
  body.iotclass-about-page #quarto-document-content .ab-statement__body:where(:scope, *) {
    margin: 0;
    color: var(--ab-ink-soft);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 44ch;
  }

  body.iotclass-about-page #quarto-document-content .ab-pills:where(:scope, *) {
    list-style: none;
    padding: 0;
    margin: 2.6rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
  }
  body.iotclass-about-page #quarto-document-content .ab-pills li:where(:scope, *) {
    background: rgba(22, 160, 133, 0.1);
    color: var(--ab-teal-deep);
    border-radius: 999px;
    padding: 0.4rem 0.95rem;
    font-weight: 700;
    font-size: 0.86rem;
  }

  /* ---------- why now ---------- */
  body.iotclass-about-page #quarto-document-content .ab-three:where(:scope, *) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 1.35rem;
  }
  body.iotclass-about-page #quarto-document-content .ab-why:where(:scope, *) {
    background: var(--ab-surface);
    border: 1px solid var(--ab-line);
    border-radius: 14px;
    padding: 1.5rem;
    display: grid;
    gap: 0.6rem;
    align-content: start;
  }
  body.iotclass-about-page #quarto-document-content .ab-why__n:where(:scope, *) {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--ab-navy);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.95rem;
  }
  body.iotclass-about-page #quarto-document-content .ab-why h3:where(:scope, *) { font-size: 1.075rem; }
  body.iotclass-about-page #quarto-document-content .ab-why p:where(:scope, *) { color: var(--ab-ink-soft); font-size: 0.96rem; }

  /* ---------- routes ---------- */
  body.iotclass-about-page #quarto-document-content .ab-routes:where(:scope, *) {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
    gap: 0.9rem;
  }
  body.iotclass-about-page #quarto-document-content .ab-route:where(:scope, *) {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    background: var(--ab-surface);
    border: 1px solid var(--ab-line);
    border-radius: 12px;
    padding: 1.05rem 1.15rem;
    transition: border-color 170ms ease, transform 170ms ease;
  }
  body.iotclass-about-page #quarto-document-content .ab-route:hover:where(:scope, *) { border-color: var(--ab-teal); transform: translateY(-2px); }
  body.iotclass-about-page #quarto-document-content .ab-route__icon:where(:scope, *) {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 9px;
    background: rgba(22, 160, 133, 0.11);
    color: var(--ab-teal-deep);
  }
  body.iotclass-about-page #quarto-document-content .ab-route__body:where(:scope, *) { display: grid; gap: 0.16rem; }
  body.iotclass-about-page #quarto-document-content .ab-route__body strong:where(:scope, *) { color: var(--ab-navy); font-size: 1rem; }
  body.iotclass-about-page #quarto-document-content .ab-route__body span:where(:scope, *) { color: var(--ab-ink-faint); font-size: 0.895rem; }

  /* ---------- audiences ---------- */
  body.iotclass-about-page #quarto-document-content .ab-audience:where(:scope, *) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(292px, 1fr));
    gap: 1.05rem;
  }
  body.iotclass-about-page #quarto-document-content .ab-aud:where(:scope, *) {
    display: flex;
    gap: 0.95rem;
    align-items: flex-start;
    background: var(--ab-surface);
    border: 1px solid var(--ab-line);
    border-radius: 13px;
    padding: 1.15rem 1.2rem;
  }
  body.iotclass-about-page #quarto-document-content .ab-aud img:where(:scope, *) { flex: none; width: 58px; height: auto; }
  body.iotclass-about-page #quarto-document-content .ab-aud h3:where(:scope, *) { font-size: 1.02rem; margin-bottom: 0.28rem; }
  body.iotclass-about-page #quarto-document-content .ab-aud p:where(:scope, *) { color: var(--ab-ink-soft); font-size: 0.94rem; }

  /* ---------- responsible AI ---------- */
  body.iotclass-about-page #quarto-document-content .ab-section--dark:where(:scope, *) {
    background: linear-gradient(165deg, var(--ab-navy) 0%, var(--ab-navy-deep) 100%);
  }
  body.iotclass-about-page #quarto-document-content .ab-section--dark h2:where(:scope, *) { color: #ffffff !important; }
  body.iotclass-about-page #quarto-document-content .ab-loop:where(:scope, *) {
    list-style: none;
    padding: 0;
    counter-reset: abloop;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(214px, 1fr));
    gap: 0.95rem;
  }
  body.iotclass-about-page #quarto-document-content .ab-loop li:where(:scope, *) {
    counter-increment: abloop;
    position: relative;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 13px;
    padding: 1.25rem 1.2rem 1.2rem;
    display: grid;
    gap: 0.42rem;
    align-content: start;
  }
  body.iotclass-about-page #quarto-document-content .ab-loop li:where(:scope, *)::before {
    content: counter(abloop);
    position: absolute;
    top: 1.15rem;
    right: 1.15rem;
    font-size: 1.6rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.16);
    line-height: 1;
  }
  body.iotclass-about-page #quarto-document-content .ab-loop__step:where(:scope, *) {
    font-weight: 800;
    color: #7fd8c6;
    font-size: 1.02rem;
    letter-spacing: -0.01em;
  }
  body.iotclass-about-page #quarto-document-content .ab-loop__text:where(:scope, *) { color: #c6d3dd; font-size: 0.935rem; }
  body.iotclass-about-page #quarto-document-content .ab-section > .ab-boundary:where(:scope, *),
  body.iotclass-about-page #quarto-document-content .ab-boundary:where(:scope, *) {
    margin-top: 1.8rem;
    color: #c6d3dd;
    font-size: 0.985rem;
    width: min(100%, 68ch);
  }
  body.iotclass-about-page #quarto-document-content .ab-boundary strong:where(:scope, *) { color: #ffffff; }

  /* ---------- roadmap: reads top to bottom, earliest first ---------- */
  body.iotclass-about-page #quarto-document-content .ab-section > .ab-timeline:where(:scope, *) { width: min(100%, 52rem); }
  body.iotclass-about-page #quarto-document-content .ab-timeline:where(:scope, *) {
    list-style: none;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;   /* February 2027 first, later horizons below */
    gap: 1.1rem;
  }
  body.iotclass-about-page #quarto-document-content .ab-timeline:where(:scope, *)::before {
    content: "";
    position: absolute;
    left: 0.68rem;
    top: 0.9rem;
    bottom: 0.9rem;
    width: 2px;
    background: linear-gradient(to bottom, var(--ab-orange) 0%, var(--ab-teal) 45%, var(--ab-line) 100%);
    border-radius: 2px;
  }
  body.iotclass-about-page #quarto-document-content .ab-tl:where(:scope, *) {
    position: relative;
    padding-left: 2.6rem;
  }
  body.iotclass-about-page #quarto-document-content .ab-tl__marker:where(:scope, *) {
    position: absolute;
    left: 0.235rem;
    top: 0.55rem;
    width: 0.92rem;
    height: 0.92rem;
    border-radius: 50%;
    background: var(--ab-surface);
    border: 3px solid var(--ab-line);
  }
  body.iotclass-about-page #quarto-document-content .ab-tl--next .ab-tl__marker:where(:scope, *) {
    border-color: var(--ab-orange);
    background: var(--ab-orange);
    animation: abPulse-617508cda0d9532e 2.4s ease-in-out infinite;
  }
  @keyframes abPulse-617508cda0d9532e {
    0%, 100% { box-shadow: 0 0 0 0 rgba(230, 126, 34, 0.42); }
    60%      { box-shadow: 0 0 0 9px rgba(230, 126, 34, 0); }
  }
  body.iotclass-about-page #quarto-document-content .ab-tl__body:where(:scope, *) {
    background: var(--ab-surface);
    border: 1px solid var(--ab-line);
    border-radius: 13px;
    padding: 1.05rem 1.25rem 1.15rem;
  }
  body.iotclass-about-page #quarto-document-content .ab-tl--planned .ab-tl__body:where(:scope, *) { background: var(--ab-tint); border-style: dashed; }
  body.iotclass-about-page #quarto-document-content .ab-tl__when:where(:scope, *) {
    font-size: 0.775rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ab-ink-faint);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.3rem;
  }
  body.iotclass-about-page #quarto-document-content .ab-tag:where(:scope, *) {
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 0.72rem;
    border-radius: 999px;
    padding: 0.16rem 0.55rem;
  }
  body.iotclass-about-page #quarto-document-content .ab-tag--next:where(:scope, *) { background: rgba(230, 126, 34, 0.15); color: #a5560f; }
  body.iotclass-about-page #quarto-document-content .ab-tag--planned:where(:scope, *) { background: rgba(44, 62, 80, 0.1); color: var(--ab-ink-soft); }
  body.iotclass-about-page #quarto-document-content .ab-tl h3:where(:scope, *) { font-size: 1.115rem; margin-bottom: 0.35rem; }
  body.iotclass-about-page #quarto-document-content .ab-tl p:not(.ab-tl__when):where(:scope, *) { color: var(--ab-ink-soft); font-size: 0.955rem; }


  /* ---------- character motion: one signature per guide ----------
     Each guide moves the way its object would. The portrait (not its caption)
     animates, transform-origin sits where the object would pivot, and every
     rule is switched off under prefers-reduced-motion below. */
  body.iotclass-about-page #quarto-document-content .ab-motion img:where(:scope, *) { will-change: transform; }
  body.iotclass-about-page #quarto-document-content .ab-motion--wave img:where(:scope, *)     { transform-origin: 62% 90%; animation: abWave-7fae1c7a002d9ffd 5.2s ease-in-out infinite; }
  body.iotclass-about-page #quarto-document-content .ab-motion--sway img:where(:scope, *)     { transform-origin: 50% 96%; animation: abSway-778dcd39ef28a045 3.6s ease-in-out infinite; }
  body.iotclass-about-page #quarto-document-content .ab-motion--jolt img:where(:scope, *)     { animation: abJolt-6a46a7fc15335b19 4.8s steps(1, end) infinite; }
  body.iotclass-about-page #quarto-document-content .ab-motion--spin img:where(:scope, *)     { transform-origin: 50% 60%; animation: abSpin-1225240a892c706d 6s ease-in-out infinite; }
  body.iotclass-about-page #quarto-document-content .ab-motion--hop img:where(:scope, *)      { animation: abHop-c1406576f159b46c 3.4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
  body.iotclass-about-page #quarto-document-content .ab-motion--nod img:where(:scope, *)      { transform-origin: 50% 100%; animation: abNod-09c9c0f364eb55a9 4.4s ease-in-out infinite; }
  body.iotclass-about-page #quarto-document-content .ab-motion--shake img:where(:scope, *)    { transform-origin: 50% 30%; animation: abShake-e3169cd84b691a95 5s ease-in-out infinite; }
  body.iotclass-about-page #quarto-document-content .ab-motion--tilt img:where(:scope, *)     { transform-origin: 50% 100%; animation: abTilt-abd1a173d6564783 6.5s ease-in-out infinite; }
  body.iotclass-about-page #quarto-document-content .ab-motion--sidestep img:where(:scope, *) { animation: abSidestep-6a8a9d7ba9417cf1 5.6s ease-in-out infinite; }
  body.iotclass-about-page #quarto-document-content .ab-motion--drift img:where(:scope, *)    { animation: abDrift-5c16bfc71d1324b3 6.8s ease-in-out infinite; }
  body.iotclass-about-page #quarto-document-content .ab-motion--breathe img:where(:scope, *)  { transform-origin: 50% 100%; animation: abBreathe-f321cab6ba967719 5.4s ease-in-out infinite; }
  body.iotclass-about-page #quarto-document-content .ab-motion--pulse img:where(:scope, *)    { transform-origin: 50% 60%; animation: abPulse2-4b2ce077bdc374f9 2.6s ease-in-out infinite; }
  body.iotclass-about-page #quarto-document-content .ab-motion--block img:where(:scope, *)    { transform-origin: 50% 70%; animation: abBlock-37f0d8abdb86d694 5.8s ease-out infinite; }
  body.iotclass-about-page #quarto-document-content .ab-motion--peek img:where(:scope, *)     { animation: abPeek-f25c599226da8c5a 6.2s ease-in-out infinite; }
  body.iotclass-about-page #quarto-document-content .ab-motion--bounce img:where(:scope, *)   { animation: abBounce-3549dc333044dce8 2.9s ease-in-out infinite; }
  body.iotclass-about-page #quarto-document-content .ab-motion--charge img:where(:scope, *)   { animation: abCharge-bd0c9ba1f70e82e6 4.6s ease-in-out infinite; }
  body.iotclass-about-page #quarto-document-content .ab-motion--tick img:where(:scope, *)     { transform-origin: 50% 100%; animation: abTick-9b13118a8ee15632 4.2s ease-out infinite; }
  body.iotclass-about-page #quarto-document-content .ab-motion:hover img:where(:scope, *)     { animation-duration: 1.4s; }
  @keyframes abWave-7fae1c7a002d9ffd     { 0%, 58%, 100% { transform: rotate(0); } 66% { transform: rotate(-8deg); } 74% { transform: rotate(6deg); } 82% { transform: rotate(-5deg); } 90% { transform: rotate(3deg); } }
  @keyframes abSway-778dcd39ef28a045     { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
  @keyframes abJolt-6a46a7fc15335b19     { 0%, 88%, 100% { transform: translate(0, 0); } 90% { transform: translate(-3px, 1px); } 92% { transform: translate(3px, -1px); } 94% { transform: translate(-2px, 0); } 96% { transform: translate(2px, 0); } }
  @keyframes abSpin-1225240a892c706d     { 0%, 70%, 100% { transform: rotate(0); } 85% { transform: rotate(14deg); } }
  @keyframes abHop-c1406576f159b46c      { 0%, 60%, 100% { transform: translateY(0); } 75% { transform: translateY(-14px); } 88% { transform: translateY(0); } 94% { transform: translateY(-5px); } }
  @keyframes abNod-09c9c0f364eb55a9      { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(3deg); } 60% { transform: rotate(-2deg); } }
  @keyframes abShake-e3169cd84b691a95    { 0%, 80%, 100% { transform: rotate(0); } 84% { transform: rotate(-5deg); } 88% { transform: rotate(5deg); } 92% { transform: rotate(-4deg); } 96% { transform: rotate(3deg); } }
  @keyframes abTilt-abd1a173d6564783     { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(-5deg); } 55% { transform: rotate(-5deg); } }
  @keyframes abSidestep-6a8a9d7ba9417cf1 { 0%, 100% { transform: translateX(0); } 40% { transform: translateX(-8px); } 60% { transform: translateX(8px); } }
  @keyframes abDrift-5c16bfc71d1324b3    { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(6px, -8px); } 66% { transform: translate(-5px, -3px); } }
  @keyframes abBreathe-f321cab6ba967719  { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04) rotate(1.5deg); } }
  @keyframes abPulse2-4b2ce077bdc374f9   { 0%, 100% { transform: scale(1); } 22% { transform: scale(1.06); } 34% { transform: scale(1); } 46% { transform: scale(1.04); } }
  @keyframes abBlock-37f0d8abdb86d694    { 0%, 70%, 100% { transform: scale(1) rotate(0); } 78% { transform: scale(1.07) rotate(-4deg); } 90% { transform: scale(1) rotate(0); } }
  @keyframes abPeek-f25c599226da8c5a     { 0%, 100% { transform: translateX(0); } 35% { transform: translateX(-10px); } 45% { transform: translateX(-10px); } }
  @keyframes abBounce-3549dc333044dce8   { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-9px); } 50% { transform: translateY(0); } 65% { transform: translateY(-4px); } }
  @keyframes abCharge-bd0c9ba1f70e82e6   { 0%, 100% { transform: translateY(0); filter: brightness(1); } 50% { transform: translateY(-3px); filter: brightness(1.12); } }
  @keyframes abTick-9b13118a8ee15632     { 0%, 65%, 100% { transform: rotate(0); } 72% { transform: rotate(6deg); } 80% { transform: rotate(0); } }

  /* ---------- what we provide ---------- */
  body.iotclass-about-page #quarto-document-content .ab-provide:where(:scope, *) {
    background: var(--ab-navy);
    color: #ffffff;
    padding: 1.6rem var(--ab-gutter);
  }
  body.iotclass-about-page #quarto-document-content .ab-provide p:where(:scope, *) {
    max-width: 68ch;
    margin: 0 auto;
    text-align: center;
    font-size: clamp(1rem, 1.5vw, 1.1rem);
    line-height: 1.6;
    color: #dbe4ec;
  }
  body.iotclass-about-page #quarto-document-content .ab-provide strong:where(:scope, *) { color: #ffffff; }

  /* ---------- the guides: a centre line, panels alternating left and right ---------- */
  body.iotclass-about-page #quarto-document-content .ab-guides:where(:scope, *) {
    list-style: none;
    padding: 0;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 4.5rem;
    row-gap: 1.25rem;
  }
  body.iotclass-about-page #quarto-document-content .ab-guides:where(:scope, *)::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 3px;
    transform: translateX(-50%);
    border-radius: 3px;
    background: linear-gradient(to bottom, var(--ab-teal), rgba(22, 160, 133, 0.35) 55%, var(--ab-orange));
  }
  body.iotclass-about-page #quarto-document-content .ab-guide:where(:scope, *) { position: relative; }
  body.iotclass-about-page #quarto-document-content .ab-guide--left:where(:scope, *)  { grid-column: 1; }
  body.iotclass-about-page #quarto-document-content .ab-guide--right:where(:scope, *) { grid-column: 2; margin-top: 3.5rem; }
  body.iotclass-about-page #quarto-document-content .ab-guide__dot:where(:scope, *) {
    position: absolute;
    top: 2.1rem;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    background: var(--c);
    border: 3px solid #ffffff;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 40%, transparent);
    z-index: 1;
  }
  body.iotclass-about-page #quarto-document-content .ab-guide--left .ab-guide__dot:where(:scope, *)  { right: calc(-2.25rem - 0.525rem); }
  body.iotclass-about-page #quarto-document-content .ab-guide--right .ab-guide__dot:where(:scope, *) { left: calc(-2.25rem - 0.525rem); }
  body.iotclass-about-page #quarto-document-content .ab-guide__card:where(:scope, *) {
    position: relative;
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 1.1rem;
    align-items: start;
    background: var(--ab-surface);
    border: 1px solid var(--ab-line);
    border-top: 4px solid var(--c);
    border-radius: 14px;
    padding: 1.2rem 1.25rem 1.15rem;
    transition: transform 200ms ease, box-shadow 200ms ease;
  }
  body.iotclass-about-page #quarto-document-content .ab-guide__card:hover:where(:scope, *) { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(31, 44, 56, 0.1); }
  /* the speech-bubble tail from the card to the line */
  body.iotclass-about-page #quarto-document-content .ab-guide__card:where(:scope, *)::after {
    content: "";
    position: absolute;
    top: 2.15rem;
    width: 0.9rem;
    height: 0.9rem;
    background: var(--ab-surface);
    border: 1px solid var(--ab-line);
    transform: rotate(45deg);
  }
  body.iotclass-about-page #quarto-document-content .ab-guide--left .ab-guide__card:where(:scope, *)::after  { right: -0.5rem; border-left: 0; border-bottom: 0; }
  body.iotclass-about-page #quarto-document-content .ab-guide--right .ab-guide__card:where(:scope, *)::after { left: -0.5rem; border-right: 0; border-top: 0; }
  body.iotclass-about-page #quarto-document-content .ab-guide__portrait:where(:scope, *) {
    display: grid;
    place-items: end center;
    width: 112px;
    height: 118px;
    border-radius: 14px;
    background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--c) 18%, transparent), transparent 70%);
  }
  body.iotclass-about-page #quarto-document-content .ab-guide__portrait img:where(:scope, *) {
    width: 104px;
    height: 110px;
    object-fit: contain;
    object-position: bottom center;
  }
  body.iotclass-about-page #quarto-document-content .ab-guide__body h3:where(:scope, *) { font-size: 1.12rem; color: var(--c) !important; margin-bottom: 0.4rem; }
  body.iotclass-about-page #quarto-document-content .ab-guide__intro:where(:scope, *) { font-size: 0.975rem; color: var(--ab-ink); line-height: 1.55; }
  body.iotclass-about-page #quarto-document-content .ab-guide__meta:where(:scope, *) {
    margin-top: 0.7rem;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ab-ink-faint);
  }
  body.iotclass-about-page #quarto-document-content .ab-guide__parts:where(:scope, *) {
    list-style: none;
    padding: 0;
    margin: 0.45rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }
  body.iotclass-about-page #quarto-document-content .ab-guide__parts li:where(:scope, *) {
    margin: 0;
    line-height: 1.3;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--c);
    background: color-mix(in srgb, var(--c) 10%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
  }
  @media (max-width: 860px) {
    body.iotclass-about-page #quarto-document-content .ab-guides:where(:scope, *) { grid-template-columns: 1fr; padding-left: 2.2rem; row-gap: 1rem; }
    body.iotclass-about-page #quarto-document-content .ab-guides:where(:scope, *)::before { left: 0.55rem; transform: none; }
    body.iotclass-about-page #quarto-document-content .ab-guide--left:where(:scope, *), body.iotclass-about-page #quarto-document-content .ab-guide--right:where(:scope, *) { grid-column: 1; margin-top: 0; }
    body.iotclass-about-page #quarto-document-content .ab-guide--left .ab-guide__dot:where(:scope, *), body.iotclass-about-page #quarto-document-content .ab-guide--right .ab-guide__dot:where(:scope, *) { left: calc(-2.2rem + 0.05rem); right: auto; }
    body.iotclass-about-page #quarto-document-content .ab-guide--left .ab-guide__card:where(:scope, *)::after, body.iotclass-about-page #quarto-document-content .ab-guide--right .ab-guide__card:where(:scope, *)::after { left: -0.5rem; right: auto; border: 1px solid var(--ab-line); border-right: 0; border-top: 0; }
    body.iotclass-about-page #quarto-document-content .ab-guide__card:where(:scope, *) { grid-template-columns: 84px 1fr; gap: 0.85rem; padding: 1rem; }
    body.iotclass-about-page #quarto-document-content .ab-guide__portrait:where(:scope, *) { width: 84px; height: 90px; }
    body.iotclass-about-page #quarto-document-content .ab-guide__portrait img:where(:scope, *) { width: 78px; height: 84px; }
  }

  /* ---------- closing banner: same navy as the footer it hands over to ---------- */
  body.iotclass-about-page #quarto-document-content .ab-close:where(:scope, *) {
    background: linear-gradient(165deg, var(--ab-navy) 0%, var(--ab-navy-deep) 100%);
    padding: clamp(3rem, 6vw, 4.5rem) var(--ab-gutter);
    color: #ffffff;
  }
  body.iotclass-about-page #quarto-document-content .ab-close__inner:where(:scope, *) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: center;
  }
  body.iotclass-about-page #quarto-document-content .ab-close h2:where(:scope, *) { color: #ffffff !important; font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-bottom: 0.7rem; }
  body.iotclass-about-page #quarto-document-content .ab-close__text > p:not(.ab-kicker):where(:scope, *) { color: #c6d3dd; max-width: 54ch; font-size: 1.02rem; }
  body.iotclass-about-page #quarto-document-content .ab-btn--light:where(:scope, *) { background: transparent; color: #ffffff !important; border: 2px solid rgba(255, 255, 255, 0.45); }
  body.iotclass-about-page #quarto-document-content .ab-btn--light:hover:where(:scope, *) { border-color: #ffffff; transform: translateY(-2px); }
  body.iotclass-about-page #quarto-document-content .ab-close__cast:where(:scope, *) { display: flex; align-items: flex-end; gap: 0.5rem; }
  body.iotclass-about-page #quarto-document-content .ab-close__cast img:where(:scope, *) { width: clamp(84px, 9vw, 128px); height: clamp(92px, 10vw, 140px); object-fit: contain; object-position: bottom center; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.35)); }
  @media (max-width: 760px) {
    body.iotclass-about-page #quarto-document-content .ab-close__inner:where(:scope, *) { grid-template-columns: 1fr; }
    body.iotclass-about-page #quarto-document-content .ab-close__cast:where(:scope, *) { justify-content: center; }
  }

  /* ---------- scroll reveal ---------- */
  body.iotclass-about-page #quarto-document-content .reveal:where(:scope, *) {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1), transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  body.iotclass-about-page #quarto-document-content .reveal.is-in:where(:scope, *) { opacity: 1; transform: none; }
  /* Without JavaScript nothing may stay invisible. */
  body.iotclass-about-page.no-js #quarto-document-content .reveal:where(:scope, *),
  html:where(:scope).no-js body.iotclass-about-page #quarto-document-content .reveal { opacity: 1; transform: none; }

  @media (max-width: 640px) {
    body.iotclass-about-page #quarto-document-content .about:where(:scope, *) { --ab-gutter: 1rem; }
    body.iotclass-about-page #quarto-document-content .ab-cast:where(:scope, *) { gap: 0.35rem; }
    body.iotclass-about-page #quarto-document-content .ab-cast__name:where(:scope, *) { font-size: 0.875rem; }
    body.iotclass-about-page #quarto-document-content .ab-aud:where(:scope, *) { flex-direction: column; }
  }

  /* ---------- motion preferences ---------- */
  @media (prefers-reduced-motion: reduce) {
    body.iotclass-about-page #quarto-document-content .about *:where(:scope, *),
    body.iotclass-about-page #quarto-document-content .about *:where(:scope, *)::before,
    body.iotclass-about-page #quarto-document-content .about *:where(:scope, *)::after {
      animation: none !important;
      transition-duration: 1ms !important;
    }
    body.iotclass-about-page #quarto-document-content .reveal:where(:scope, *) { opacity: 1; transform: none; }
  }
}