<!--
  =====================================================================
  Author      : Victor J. Quinones
  Company     : FutureTranz, Inc.
  License     : Proprietary (All Rights Reserved)
  Warranty    : Provided "AS IS" without warranty of any kind, express
                or implied. Use at your own risk.
  Privacy     : This artifact runs entirely client-side. No personal
                data is collected, transmitted, or persisted.
  Filename    : periodic_table.html
  Platform    : Modern web browsers (Chromium, Firefox, Safari, Edge)
  Requirements: HTML5, CSS Grid, ES2020 JavaScript. No build step.
  Version     : 1.4.2
  Synopsis    : An interactive periodic table of the elements featuring
                full IUPAC layout, eleven categorical color groups,
                live search, category filtering, four data overlay
                modes (standard, electronegativity, atomic radius,
                discovery era), an inspection drawer with detailed
                element properties, a per-element Bohr-model
                infographic that zooms to full size, slots for
                element-specific audio briefs and video explainers,
                authoritative "Common Uses" curriculum content for
                ALL 118 elements (synthetic transactinides included
                with honest research-only entries), keyboard
                navigation, an expandable Element Categories
                field-notes section with NotebookLM-generated JPEG
                infographics per major category, and a Class
                Materials section that surfaces a 24-min audio
                deep-dive (hosted on Cloudflare R2) plus the
                study-guide, quiz, flashcards, and mind-map
                generated by the public NotebookLM class.
  Changelog   :
    1.0.0 - 2026-05-05 - Initial release.
    1.1.0 - 2026-05-06 - Added Element Categories — Field Notes
                         section: ten expandable cards with inline
                         SVG infographics, three-paragraph pedagogy
                         per category, and representative-element
                         chips that route into the existing detail
                         drawer. New analytics events
                         category_explore and category_engagement.
    1.2.0 - 2026-05-06 - Per-element educational layer: programmatic
                         Bohr-shell SVG infographic for every
                         element (zoomable thumbnail in the drawer);
                         new "Common uses" section with real
                         curricular content for the most-taught
                         anchor elements; honest media slots for
                         audio briefs and video explainers (HTML5
                         native, "production pending" state when
                         no asset URL is set); zoom modal with
                         keyboard + backdrop dismissal. New
                         analytics events element_infographic_zoom,
                         element_audio_play, element_video_play,
                         element_uses_view.
    1.3.0 - 2026-05-06 - Extended authoritative "Common Uses"
                         curriculum from 31 anchor elements to all
                         118 — including honest research-only
                         entries for synthetic transactinides
                         (104–118) where no industrial use exists.
                         Every element now renders the structured
                         bullet-list "Common uses" section in the
                         drawer instead of the single-line desc
                         fallback. Audio/video media slots remain
                         honest "production pending" until real
                         self-hosted assets are wired in.
    1.4.0 - 2026-05-06 - Integrated all 15 NotebookLM-generated
                         class artifacts into the live deployed
                         site: 10 category JPEG infographics now
                         render in the corresponding category cards
                         (replacing the inline SVG placeholders);
                         new "Class Materials" section surfaces the
                         24-min "Hidden Logic of the Periodic
                         Table" audio deep-dive (hosted on
                         Cloudflare R2 because the 45 MB file
                         exceeds the 25 MiB per-file limit on
                         Workers Static Assets); four document
                         cards link to the study-guide, quiz,
                         flashcards, and mind-map markdown/JSON
                         files served from /assets/notebooklm/.
                         Three new analytics events:
                         class_audio_play, class_material_open,
                         class_infographic_view. Public NotebookLM
                         class share URL:
                         https://notebooklm.google.com/notebook/b11fa8a4-ff32-4581-8a70-2f936931d4f1
    1.4.1 - 2026-05-06 - Bound the R2 media bucket to a branded
                         custom domain (media.ai-demo-tpt.futuretranz.com).
                         Audio player <src> now points at the
                         polished custom-domain URL instead of the
                         pub-...r2.dev managed-domain placeholder.
                         No functional change; pure infra polish
                         for stable production-grade asset URLs.
    1.4.2 - 2026-05-08 - Vaporware removal per feedback_no_vaporware.md.
                         The drawer's per-element "Audio & video
                         briefs" section and the zoom-modal video
                         block previously rendered "Production
                         pending — set EXTRA_DATA[Z].audio_url"
                         placeholders for every one of the 118
                         elements (none of which have real audio or
                         video). That UI was misleading AND leaked
                         developer-internal variable names into the
                         user-facing experience. Fix: audio/video
                         slots and the entire enclosing section now
                         render ONLY when real media is wired in;
                         render nothing otherwise. Also stripped
                         "· open explainer" from the infographic
                         zoom CTA (the CTA text implied an explainer
                         that didn't exist; the click only zooms the
                         Bohr SVG). Cleaned up the dead "Detailed
                         common-uses pending" fallback in the uses
                         section (since v1.3.0 covers all 118
                         elements, the fallback was unreachable).
                         Architecture is unchanged: drop a real URL
                         into EXTRA_DATA[z].audio_url or .video_url
                         and the corresponding slot reappears
                         automatically.
  =====================================================================
-->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Periodic Table of the Elements · FutureTranz</title>
  <meta name="description" content="An interactive periodic table of the elements — 118 elements, IUPAC layout, four view modes, full element detail drawer. A FutureTranz, Inc. demo." />
  <meta name="theme-color" content="#0a0b10" />
  <link rel="canonical" href="https://ai-demo-tpt.futuretranz.com/" />
  <link rel="icon" type="image/x-icon" href="/assets/brand/favicon.ico" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,300;0,500;0,700;1,400&family=JetBrains+Mono:wght@400;500;700&family=DM+Sans:wght@400;500;600&display=swap" rel="stylesheet">
  <style>
    :root {
      --bg: #0a0b10;
      --bg-2: #11131c;
      --surface: #181b27;
      --surface-2: #1f2330;
      --line: #262a39;
      --text: #e9eaf3;
      --text-dim: #9aa0b4;
      --text-faint: #5a607a;
      --accent: #f5d365;

      /* Category palette - considered, not rainbow */
      --c-alkali:          #ff7a90;
      --c-alkaline-earth:  #ffa86b;
      --c-transition:      #f5d365;
      --c-post-transition: #9bc1ff;
      --c-metalloid:       #b08cff;
      --c-nonmetal:        #6ee7b7;
      --c-halogen:         #5dd6c5;
      --c-noble:           #c4b5fd;
      --c-lanthanide:      #fb7185;
      --c-actinide:        #f59e0b;
      --c-unknown:         #6b7184;
    }

    * { box-sizing: border-box; }

    html, body {
      margin: 0; padding: 0;
      background: var(--bg);
      color: var(--text);
      font-family: "DM Sans", system-ui, sans-serif;
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* Atmospheric background */
    body::before {
      content: "";
      position: fixed; inset: 0;
      background:
        radial-gradient(ellipse 60% 40% at 20% 0%, rgba(245,211,101,0.06), transparent 60%),
        radial-gradient(ellipse 50% 50% at 90% 100%, rgba(176,140,255,0.05), transparent 60%),
        radial-gradient(ellipse 40% 30% at 50% 50%, rgba(110,231,183,0.03), transparent 60%);
      pointer-events: none;
      z-index: 0;
    }

    body::after {
      content: "";
      position: fixed; inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
      background-size: 40px 40px;
      pointer-events: none;
      z-index: 0;
    }

    .app {
      position: relative;
      z-index: 1;
      max-width: 1480px;
      margin: 0 auto;
      padding: 36px 28px 60px;
    }

    /* Header */
    header {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: end;
      gap: 32px;
      margin-bottom: 28px;
      border-bottom: 1px solid var(--line);
      padding-bottom: 24px;
    }
    .title {
      font-family: "Fraunces", serif;
      font-weight: 300;
      font-size: clamp(34px, 5vw, 56px);
      line-height: 1;
      letter-spacing: -0.02em;
      margin: 0;
    }
    .title em {
      font-style: italic;
      color: var(--accent);
      font-weight: 500;
    }
    .subtitle {
      font-family: "JetBrains Mono", monospace;
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--text-faint);
      margin-top: 14px;
    }
    .meta {
      text-align: right;
      font-family: "JetBrains Mono", monospace;
      font-size: 11px;
      letter-spacing: 0.12em;
      color: var(--text-dim);
      line-height: 1.8;
    }
    .meta .v { color: var(--accent); }

    /* Controls */
    .controls {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 16px;
      margin-bottom: 28px;
      align-items: center;
    }
    .search {
      position: relative;
    }
    .search input {
      width: 100%;
      padding: 14px 18px 14px 44px;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 2px;
      color: var(--text);
      font-family: "JetBrains Mono", monospace;
      font-size: 14px;
      letter-spacing: 0.04em;
      transition: border-color 160ms, background 160ms;
    }
    .search input:focus {
      outline: none;
      border-color: var(--accent);
      background: var(--surface-2);
    }
    .search input::placeholder { color: var(--text-faint); }
    .search svg {
      position: absolute;
      left: 16px; top: 50%;
      transform: translateY(-50%);
      color: var(--text-faint);
    }

    .views {
      display: flex;
      gap: 0;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 2px;
      padding: 3px;
    }
    .views button {
      padding: 9px 14px;
      background: transparent;
      border: none;
      color: var(--text-dim);
      font-family: "JetBrains Mono", monospace;
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      cursor: pointer;
      border-radius: 2px;
      transition: all 160ms;
      white-space: nowrap;
    }
    .views button:hover { color: var(--text); }
    .views button.active {
      background: var(--bg);
      color: var(--accent);
      box-shadow: inset 0 0 0 1px var(--line);
    }

    /* Filter pills */
    .filters {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 24px;
    }
    .pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 999px;
      font-family: "JetBrains Mono", monospace;
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-dim);
      cursor: pointer;
      transition: all 160ms;
      user-select: none;
    }
    .pill:hover { color: var(--text); border-color: var(--text-faint); }
    .pill.active {
      color: var(--bg);
      background: var(--accent);
      border-color: var(--accent);
    }
    .pill .swatch {
      width: 10px; height: 10px;
      border-radius: 50%;
      background: var(--swatch, var(--text-dim));
    }
    .pill.active .swatch { display: none; }

    /* Periodic table grid */
    .table-wrap {
      overflow-x: auto;
      padding-bottom: 6px;
      margin: 0 -28px;
      padding-left: 28px;
      padding-right: 28px;
    }
    .ptable {
      display: grid;
      grid-template-columns: repeat(18, minmax(58px, 1fr));
      grid-auto-rows: minmax(58px, auto);
      gap: 4px;
      min-width: 1100px;
    }
    .lan-act {
      display: grid;
      grid-template-columns: repeat(18, minmax(58px, 1fr));
      gap: 4px;
      min-width: 1100px;
      margin-top: 14px;
    }

    /* Period and group labels */
    .label {
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: "JetBrains Mono", monospace;
      font-size: 10px;
      letter-spacing: 0.1em;
      color: var(--text-faint);
    }

    /* Element cell */
    .el {
      position: relative;
      aspect-ratio: 1;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 2px;
      padding: 4px 5px;
      display: flex;
      flex-direction: column;
      cursor: pointer;
      transition: transform 160ms, background 160ms, border-color 160ms, box-shadow 160ms, opacity 220ms;
      overflow: hidden;
      color: var(--text);
    }
    .el::before {
      content: "";
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 2px;
      background: var(--cat, transparent);
      transition: width 160ms;
    }
    .el:hover {
      transform: translateY(-2px);
      background: var(--surface-2);
      border-color: var(--cat, var(--accent));
      box-shadow: 0 8px 24px -8px rgba(0,0,0,0.6), 0 0 0 1px var(--cat, var(--accent));
      z-index: 5;
    }
    .el:hover::before { width: 100%; opacity: 0.12; }
    .el.dim { opacity: 0.18; pointer-events: none; }
    .el.match { box-shadow: 0 0 0 1.5px var(--accent), 0 8px 24px -8px rgba(245,211,101,0.4); }

    .el .num {
      font-family: "JetBrains Mono", monospace;
      font-size: 9px;
      color: var(--text-dim);
      letter-spacing: 0.04em;
    }
    .el .sym {
      font-family: "Fraunces", serif;
      font-weight: 500;
      font-size: clamp(16px, 2.2vw, 22px);
      line-height: 1;
      margin-top: 2px;
      color: var(--cat, var(--text));
    }
    .el .name {
      font-size: 8.5px;
      color: var(--text-dim);
      margin-top: auto;
      letter-spacing: 0.02em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .el .mass {
      font-family: "JetBrains Mono", monospace;
      font-size: 8px;
      color: var(--text-faint);
      margin-top: 1px;
    }

    /* View overlays change appearance */
    .view-electroneg .el { background: var(--bg-2); }
    .view-radius .el { background: var(--bg-2); }
    .view-discovery .el { background: var(--bg-2); }

    /* Lanthanide/Actinide placeholder cells */
    .placeholder {
      background: transparent;
      border: 1px dashed var(--line);
      border-radius: 2px;
      display: flex; align-items: center; justify-content: center;
      font-family: "JetBrains Mono", monospace;
      font-size: 10px;
      color: var(--text-faint);
      aspect-ratio: 1;
    }

    /* Detail drawer */
    .drawer-backdrop {
      position: fixed; inset: 0;
      background: rgba(5,6,10,0.6);
      backdrop-filter: blur(4px);
      opacity: 0; pointer-events: none;
      transition: opacity 240ms;
      z-index: 90;
    }
    .drawer-backdrop.open { opacity: 1; pointer-events: auto; }

    .drawer {
      position: fixed;
      top: 0; right: 0; bottom: 0;
      width: min(520px, 100%);
      background: var(--bg-2);
      border-left: 1px solid var(--line);
      transform: translateX(100%);
      transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
      z-index: 100;
      overflow-y: auto;
      padding: 32px 36px 48px;
    }
    .drawer.open { transform: translateX(0); }

    .drawer .close {
      position: absolute;
      top: 18px; right: 18px;
      width: 36px; height: 36px;
      border: 1px solid var(--line);
      background: var(--surface);
      color: var(--text-dim);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: all 160ms;
    }
    .drawer .close:hover { color: var(--text); border-color: var(--accent); }

    .d-header {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 24px;
      align-items: center;
      padding-bottom: 24px;
      border-bottom: 1px solid var(--line);
    }
    .d-symbol {
      width: 120px; height: 120px;
      border: 2px solid var(--cat, var(--accent));
      border-radius: 2px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 10px 12px;
      position: relative;
      background: var(--surface);
    }
    .d-symbol .n {
      font-family: "JetBrains Mono", monospace;
      font-size: 13px;
      color: var(--text-dim);
    }
    .d-symbol .s {
      font-family: "Fraunces", serif;
      font-weight: 500;
      font-size: 56px;
      line-height: 1;
      color: var(--cat, var(--text));
      align-self: center;
      margin: 4px 0;
    }
    .d-symbol .m {
      font-family: "JetBrains Mono", monospace;
      font-size: 11px;
      color: var(--text-dim);
      text-align: right;
    }

    .d-title h2 {
      font-family: "Fraunces", serif;
      font-weight: 300;
      font-size: 36px;
      letter-spacing: -0.02em;
      margin: 0 0 8px;
    }
    .d-title .cat {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 5px 11px;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 999px;
      font-family: "JetBrains Mono", monospace;
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-dim);
    }
    .d-title .cat .swatch {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--cat, var(--text-dim));
    }

    .d-grid {
      margin-top: 28px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1px;
      background: var(--line);
      border: 1px solid var(--line);
    }
    .d-grid > div {
      background: var(--bg-2);
      padding: 14px 16px;
    }
    .d-grid dt {
      font-family: "JetBrains Mono", monospace;
      font-size: 9px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text-faint);
      margin-bottom: 4px;
    }
    .d-grid dd {
      margin: 0;
      font-family: "JetBrains Mono", monospace;
      font-size: 14px;
      color: var(--text);
    }
    .d-grid dd small {
      color: var(--text-dim);
      font-size: 11px;
    }

    .d-section {
      margin-top: 28px;
    }
    .d-section h3 {
      font-family: "JetBrains Mono", monospace;
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--text-faint);
      margin: 0 0 10px;
    }
    .d-section p {
      margin: 0;
      font-size: 14px;
      line-height: 1.65;
      color: var(--text-dim);
    }

    /* View legends */
    .legend {
      margin-top: 18px;
      padding: 14px 18px;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 2px;
      display: none;
      align-items: center;
      gap: 18px;
      font-family: "JetBrains Mono", monospace;
      font-size: 11px;
      color: var(--text-dim);
      letter-spacing: 0.06em;
    }
    .legend.show { display: flex; }
    .legend .gradient {
      flex: 1;
      height: 8px;
      border-radius: 4px;
      background: linear-gradient(90deg, var(--g-from), var(--g-to));
    }

    /* Footer */
    footer {
      margin-top: 36px;
      padding-top: 18px;
      border-top: 1px solid var(--line);
      font-family: "JetBrains Mono", monospace;
      font-size: 10px;
      letter-spacing: 0.1em;
      color: var(--text-faint);
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
    }
    footer a {
      color: inherit;
      text-decoration: none;
      border-bottom: 1px dotted currentColor;
      transition: color 120ms ease, border-color 120ms ease;
    }
    footer a:hover,
    footer a:focus-visible {
      color: var(--text);
      border-bottom-color: var(--text);
      outline: none;
    }
    footer .footer-nav {
      display: flex;
      gap: 16px;
      align-items: center;
    }
    footer .socials {
      display: flex;
      gap: 12px;
      align-items: center;
    }
    footer .socials a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      color: var(--text-faint);
      border: 0;
      transition: color 120ms ease, transform 120ms ease;
    }
    footer .socials a:hover,
    footer .socials a:focus-visible {
      color: #0066FF;
      border-bottom: 0;
      transform: translateY(-1px);
    }
    footer .socials svg {
      width: 14px;
      height: 14px;
      display: block;
      fill: currentColor;
    }

    /* ============================================================
     * Element Categories — Field Notes (v1.1.0)
     * Reuses existing --c-* category palette; no new color tokens.
     * ============================================================ */
    .cat-explorer {
      margin-top: 56px;
      padding-top: 28px;
      border-top: 1px solid var(--line);
    }
    .cat-explorer .section-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 22px;
      flex-wrap: wrap;
    }
    .cat-explorer .section-head h2 {
      font-family: "Fraunces", serif;
      font-weight: 300;
      font-size: clamp(24px, 3vw, 34px);
      letter-spacing: -0.02em;
      margin: 0;
    }
    .cat-explorer .section-head h2 em {
      font-style: italic;
      color: var(--accent);
      font-weight: 500;
    }
    .cat-explorer .section-head .hint {
      font-family: "JetBrains Mono", monospace;
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text-faint);
    }

    .cat-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 12px;
    }

    .cat-card {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 2px;
      overflow: hidden;
      transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
      position: relative;
    }
    .cat-card::before {
      content: "";
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 2px;
      background: var(--cat, transparent);
      transition: width 220ms ease;
    }
    .cat-card:hover {
      border-color: var(--cat, var(--accent));
      transform: translateY(-1px);
      box-shadow: 0 8px 24px -10px rgba(0,0,0,0.55);
    }
    .cat-card.open {
      border-color: var(--cat, var(--accent));
      background: var(--surface-2);
    }
    .cat-card.open::before { width: 4px; }

    .cat-card .cat-summary {
      width: 100%;
      display: grid;
      grid-template-columns: 64px 1fr auto;
      align-items: center;
      gap: 14px;
      padding: 14px 18px 14px 22px;
      background: transparent;
      border: 0;
      color: inherit;
      cursor: pointer;
      text-align: left;
      font-family: inherit;
    }
    .cat-card .cat-summary:focus-visible {
      outline: none;
      box-shadow: inset 0 0 0 1px var(--cat, var(--accent));
    }
    .cat-card .cat-svg {
      width: 56px; height: 56px;
      border-radius: 2px;
      background: var(--bg-2);
      border: 1px solid var(--line);
      display: flex; align-items: center; justify-content: center;
      color: var(--cat, var(--text-dim));
      transition: border-color 220ms ease;
    }
    .cat-card.open .cat-svg { border-color: var(--cat, var(--accent)); }
    .cat-card .cat-svg svg { width: 100%; height: 100%; display: block; }

    .cat-card .cat-meta .label {
      font-family: "Fraunces", serif;
      font-weight: 500;
      font-size: 18px;
      color: var(--cat, var(--text));
      letter-spacing: -0.01em;
      line-height: 1.1;
    }
    .cat-card .cat-meta .tagline {
      font-family: "JetBrains Mono", monospace;
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-faint);
      margin-top: 4px;
    }
    .cat-card .cat-count {
      font-family: "JetBrains Mono", monospace;
      font-size: 11px;
      letter-spacing: 0.08em;
      color: var(--text-dim);
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .cat-card .cat-count .chev {
      width: 12px; height: 12px;
      transition: transform 220ms ease;
      color: var(--text-faint);
    }
    .cat-card.open .cat-count .chev { transform: rotate(90deg); color: var(--cat, var(--accent)); }

    .cat-card .cat-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 360ms ease;
    }
    .cat-card.open .cat-body { max-height: 1400px; }

    .cat-card .cat-body-inner {
      padding: 4px 22px 22px;
      display: grid;
      grid-template-columns: minmax(0, 240px) 1fr;
      gap: 22px;
      align-items: start;
    }

    .cat-card .cat-hero {
      background: var(--bg-2);
      border: 1px solid var(--line);
      border-radius: 2px;
      padding: 18px;
      color: var(--cat, var(--text-dim));
      aspect-ratio: 16 / 10;
      display: flex; align-items: center; justify-content: center;
    }
    .cat-card .cat-hero svg { width: 100%; height: 100%; display: block; }

    .cat-card .cat-prose h4 {
      font-family: "JetBrains Mono", monospace;
      font-size: 9.5px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--text-faint);
      margin: 0 0 6px;
    }
    .cat-card .cat-prose p {
      margin: 0 0 14px;
      font-size: 13.5px;
      line-height: 1.65;
      color: var(--text-dim);
    }
    .cat-card .cat-prose p strong { color: var(--text); font-weight: 500; }

    .cat-card .cat-chips {
      margin-top: 6px;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .cat-card .chip {
      display: inline-flex;
      align-items: baseline;
      gap: 6px;
      padding: 5px 10px 5px 9px;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 999px;
      font-family: "JetBrains Mono", monospace;
      font-size: 10.5px;
      letter-spacing: 0.06em;
      color: var(--text-dim);
      cursor: pointer;
      transition: all 160ms ease;
    }
    .cat-card .chip:hover {
      color: var(--text);
      border-color: var(--cat, var(--accent));
      background: var(--surface-2);
    }
    .cat-card .chip .chip-z {
      font-size: 9px;
      color: var(--text-faint);
    }
    .cat-card .chip .chip-sym {
      font-family: "Fraunces", serif;
      font-size: 12px;
      font-weight: 500;
      color: var(--cat, var(--text));
    }

    /* ============================================================
     * Per-element educational layer (v1.2.0)
     * Bohr-shell thumbnail, common-uses list, media slots, zoom.
     * ============================================================ */
    .d-infographic {
      margin-top: 28px;
      background: var(--bg-2);
      border: 1px solid var(--line);
      border-radius: 2px;
      padding: 14px 16px 16px;
      display: grid;
      grid-template-columns: 120px 1fr;
      gap: 14px;
      align-items: center;
    }
    .d-infographic .thumb {
      width: 120px;
      height: 120px;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 2px;
      cursor: zoom-in;
      transition: border-color 160ms ease, transform 160ms ease;
      color: var(--cat, var(--accent));
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .d-infographic .thumb:hover {
      border-color: var(--cat, var(--accent));
      transform: translateY(-1px);
    }
    .d-infographic .thumb svg { width: 100%; height: 100%; display: block; }
    .d-infographic .meta {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .d-infographic .meta h3 {
      font-family: "JetBrains Mono", monospace;
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--text-faint);
      margin: 0;
    }
    .d-infographic .meta p {
      margin: 0;
      font-size: 13px;
      line-height: 1.55;
      color: var(--text-dim);
    }
    .d-infographic .meta .zoom-cta {
      font-family: "JetBrains Mono", monospace;
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--cat, var(--accent));
      margin-top: 4px;
    }

    .d-uses ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .d-uses li {
      position: relative;
      padding: 8px 0 8px 18px;
      font-size: 13.5px;
      line-height: 1.55;
      color: var(--text-dim);
      border-bottom: 1px dashed var(--line);
    }
    .d-uses li:last-child { border-bottom: 0; }
    .d-uses li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 16px;
      width: 8px;
      height: 1px;
      background: var(--cat, var(--accent));
    }
    .d-uses li strong { color: var(--text); font-weight: 500; }

    .d-media {
      margin-top: 8px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .d-media .slot {
      background: var(--bg-2);
      border: 1px solid var(--line);
      border-radius: 2px;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-height: 92px;
    }
    .d-media .slot .slot-label {
      font-family: "JetBrains Mono", monospace;
      font-size: 9.5px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--text-faint);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .d-media .slot .slot-label .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--text-faint);
    }
    .d-media .slot.ready .slot-label .dot { background: var(--cat, var(--accent)); }
    .d-media .slot.ready .slot-label { color: var(--cat, var(--accent)); }
    .d-media .slot audio,
    .d-media .slot video {
      width: 100%;
      max-width: 100%;
      display: block;
      background: #000;
      border-radius: 2px;
    }
    .d-media .slot.pending .slot-body {
      font-family: "JetBrains Mono", monospace;
      font-size: 10.5px;
      line-height: 1.55;
      color: var(--text-dim);
      letter-spacing: 0.04em;
    }
    .d-media .slot.pending .slot-body small {
      display: block;
      margin-top: 4px;
      color: var(--text-faint);
      font-size: 9.5px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    /* Zoom modal — full-size infographic + optional video */
    .zoom-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(5, 6, 10, 0.85);
      backdrop-filter: blur(8px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 240ms ease;
      z-index: 200;
    }
    .zoom-backdrop.open {
      opacity: 1;
      pointer-events: auto;
    }
    .zoom-shell {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 48px 28px;
      pointer-events: none;
      z-index: 210;
    }
    .zoom-frame {
      position: relative;
      width: min(960px, 100%);
      max-height: calc(100vh - 96px);
      background: var(--bg-2);
      border: 1px solid var(--line);
      border-radius: 2px;
      padding: 32px 36px 28px;
      transform: scale(0.92);
      opacity: 0;
      transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 240ms ease;
      pointer-events: auto;
      overflow-y: auto;
    }
    .zoom-backdrop.open ~ .zoom-shell .zoom-frame,
    .zoom-shell .zoom-frame.open {
      transform: scale(1);
      opacity: 1;
    }
    .zoom-frame .zoom-close {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 36px;
      height: 36px;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 50%;
      color: var(--text-dim);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 160ms ease;
    }
    .zoom-frame .zoom-close:hover {
      color: var(--text);
      border-color: var(--cat, var(--accent));
    }
    .zoom-frame .zoom-head {
      display: flex;
      align-items: baseline;
      gap: 14px;
      margin-bottom: 18px;
      flex-wrap: wrap;
    }
    .zoom-frame .zoom-head h3 {
      font-family: "Fraunces", serif;
      font-weight: 300;
      font-size: clamp(22px, 3vw, 30px);
      margin: 0;
      letter-spacing: -0.02em;
    }
    .zoom-frame .zoom-head .sym {
      font-family: "Fraunces", serif;
      font-weight: 500;
      font-size: 28px;
      color: var(--cat, var(--accent));
    }
    .zoom-frame .zoom-head .tag {
      font-family: "JetBrains Mono", monospace;
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text-faint);
    }
    .zoom-frame .zoom-svg {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 2px;
      padding: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--cat, var(--accent));
    }
    .zoom-frame .zoom-svg svg {
      width: 100%;
      max-width: 520px;
      height: auto;
      display: block;
    }
    .zoom-frame .zoom-caption {
      margin-top: 14px;
      font-size: 13px;
      line-height: 1.6;
      color: var(--text-dim);
    }
    .zoom-frame .zoom-video {
      margin-top: 18px;
    }
    .zoom-frame .zoom-video video {
      width: 100%;
      background: #000;
      border-radius: 2px;
      border: 1px solid var(--line);
    }
    .zoom-frame .zoom-video .pending {
      padding: 14px 16px;
      background: var(--surface);
      border: 1px dashed var(--line);
      border-radius: 2px;
      font-family: "JetBrains Mono", monospace;
      font-size: 11px;
      letter-spacing: 0.06em;
      color: var(--text-dim);
    }
    .zoom-frame .zoom-video .pending small {
      display: block;
      margin-top: 4px;
      color: var(--text-faint);
      font-size: 9.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    /* ============================================================
     * Class Materials section + JPEG category hero (v1.4.0)
     * Surfaces the NotebookLM-generated artifacts.
     * ============================================================ */
    .class-materials {
      margin-top: 56px;
      padding-top: 28px;
      border-top: 1px solid var(--line);
    }
    .class-materials .section-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 22px;
      flex-wrap: wrap;
    }
    .class-materials .section-head h2 {
      font-family: "Fraunces", serif;
      font-weight: 300;
      font-size: clamp(24px, 3vw, 34px);
      letter-spacing: -0.02em;
      margin: 0;
    }
    .class-materials .section-head h2 em {
      font-style: italic;
      color: var(--accent);
      font-weight: 500;
    }
    .class-materials .section-head .hint {
      font-family: "JetBrains Mono", monospace;
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text-faint);
    }

    .audio-hero {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 2px;
      padding: 24px 26px;
      margin-bottom: 16px;
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
      position: relative;
    }
    .audio-hero::before {
      content: "";
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 3px;
      background: var(--accent);
    }
    .audio-hero .audio-meta {
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 12px;
    }
    .audio-hero .audio-meta h3 {
      font-family: "Fraunces", serif;
      font-weight: 500;
      font-size: 22px;
      letter-spacing: -0.01em;
      margin: 0;
      color: var(--text);
    }
    .audio-hero .audio-meta .audio-tag {
      font-family: "JetBrains Mono", monospace;
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--accent);
    }
    .audio-hero .audio-meta .audio-sub {
      font-family: "JetBrains Mono", monospace;
      font-size: 11px;
      letter-spacing: 0.04em;
      color: var(--text-dim);
      flex-basis: 100%;
    }
    .audio-hero audio {
      width: 100%;
      max-width: 100%;
      display: block;
      filter: invert(0.92) hue-rotate(180deg);
      border-radius: 2px;
    }
    .audio-hero .audio-host {
      font-family: "JetBrains Mono", monospace;
      font-size: 9.5px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-faint);
      text-align: right;
    }
    .audio-hero .audio-host code {
      color: var(--text-dim);
      background: var(--bg-2);
      padding: 1px 6px;
      border-radius: 2px;
      font-size: 10px;
    }

    .doc-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 10px;
    }
    .doc-card {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 16px 18px;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 2px;
      text-decoration: none;
      color: inherit;
      transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
      position: relative;
    }
    .doc-card::before {
      content: "";
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 2px;
      background: var(--doc-color, var(--accent));
      transition: width 200ms;
    }
    .doc-card:hover {
      border-color: var(--doc-color, var(--accent));
      background: var(--surface-2);
      transform: translateY(-1px);
      box-shadow: 0 6px 18px -8px rgba(0,0,0,0.45);
    }
    .doc-card:hover::before { width: 4px; }
    .doc-card .doc-icon {
      width: 38px;
      height: 38px;
      border: 1px solid var(--line);
      border-radius: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--doc-color, var(--accent));
      flex-shrink: 0;
      background: var(--bg-2);
    }
    .doc-card .doc-icon svg { width: 18px; height: 18px; }
    .doc-card .doc-text {
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 0;
    }
    .doc-card .doc-label {
      font-family: "Fraunces", serif;
      font-weight: 500;
      font-size: 15px;
      color: var(--text);
      letter-spacing: -0.01em;
    }
    .doc-card .doc-meta {
      font-family: "JetBrains Mono", monospace;
      font-size: 9.5px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-faint);
    }

    /* JPEG hero replacing inline SVG in cat-cards */
    .cat-card .cat-hero {
      padding: 0;
      overflow: hidden;
    }
    .cat-card .cat-hero-img {
      display: block;
      width: 100%;
      height: 100%;
      cursor: zoom-in;
      border: 0;
      padding: 0;
      background: transparent;
      overflow: hidden;
      position: relative;
    }
    .cat-card .cat-hero-img img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      border-radius: 2px;
      transition: transform 280ms ease, opacity 280ms ease;
    }
    .cat-card .cat-hero-img:hover img {
      transform: scale(1.03);
    }
    .cat-card .cat-hero-img .zoom-pip {
      position: absolute;
      right: 8px;
      bottom: 8px;
      background: rgba(10, 11, 16, 0.7);
      color: var(--accent);
      font-family: "JetBrains Mono", monospace;
      font-size: 9px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 4px 8px;
      border-radius: 2px;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      opacity: 0;
      transition: opacity 200ms ease;
    }
    .cat-card .cat-hero-img:hover .zoom-pip {
      opacity: 1;
    }

    @media (max-width: 720px) {
      header { grid-template-columns: 1fr; }
      .meta { text-align: left; }
      .controls { grid-template-columns: 1fr; }
      .views { overflow-x: auto; }
      .drawer { padding: 24px 22px 36px; }
      .d-header { grid-template-columns: 1fr; }
      .cat-card .cat-body-inner { grid-template-columns: 1fr; }
      .cat-card .cat-hero { aspect-ratio: 16 / 9; }
      .d-infographic { grid-template-columns: 1fr; }
      .d-infographic .thumb { width: 100%; height: 200px; }
      .d-media { grid-template-columns: 1fr; }
      .zoom-frame { padding: 28px 22px 22px; }
      .audio-hero { padding: 20px 22px; }
      .audio-hero .audio-host { text-align: left; }
      .doc-grid { grid-template-columns: 1fr 1fr; }
    }
  </style>
</head>
<body>
  <div class="app">
    <header>
      <div>
        <h1 class="title">The Periodic <em>Table</em></h1>
        <div class="subtitle">118 elements · IUPAC layout · interactive</div>
      </div>
      <div class="meta">
        <div>FUTURETRANZ · INTERACTIVE</div>
        <div>v<span class="v">1.0.0</span> · 2026</div>
      </div>
    </header>

    <div class="controls">
      <div class="search">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
        <input id="search" placeholder="Search by name, symbol, or atomic number  ⌘K" autocomplete="off" />
      </div>
      <div class="views" role="tablist">
        <button data-view="standard" class="active">Standard</button>
        <button data-view="electroneg">Electronegativity</button>
        <button data-view="radius">Atomic Radius</button>
        <button data-view="discovery">Discovery Era</button>
      </div>
    </div>

    <div class="filters" id="filters"></div>

    <div class="legend" id="legend">
      <span id="legend-label">—</span>
      <span id="legend-min">—</span>
      <div class="gradient" id="legend-gradient"></div>
      <span id="legend-max">—</span>
    </div>

    <div class="table-wrap">
      <div class="ptable" id="ptable"></div>
      <div class="lan-act" id="lan-act"></div>
    </div>

    <section class="cat-explorer" id="cat-explorer" aria-labelledby="cat-explorer-heading">
      <div class="section-head">
        <h2 id="cat-explorer-heading">Element <em>Categories</em> · Field Notes</h2>
        <span class="hint">Click any card to expand · representative elements open the detail drawer</span>
      </div>
      <div class="cat-grid" id="cat-grid"></div>
    </section>

    <section class="class-materials" id="class-materials" aria-labelledby="class-materials-heading">
      <div class="section-head">
        <h2 id="class-materials-heading">Class <em>Materials</em></h2>
        <span class="hint">NotebookLM-generated learning resources for the entire periodic table · <a href="https://notebooklm.google.com/notebook/b11fa8a4-ff32-4581-8a70-2f936931d4f1" target="_blank" rel="noopener" style="color:var(--accent);text-decoration:none;border-bottom:1px dotted currentColor">view source notebook</a></span>
      </div>

      <div class="audio-hero" id="audio-hero">
        <div class="audio-meta">
          <h3>The Hidden Logic of the Periodic Table</h3>
          <span class="audio-tag">Audio Deep-Dive · 24 min</span>
          <span class="audio-sub">A conversational exploration of the table's organization, the 10 major element categories, real-world uses, and the history that brought us from Mendeleev's predictions to oganesson.</span>
        </div>
        <audio id="class-audio" controls preload="none" src="https://media.ai-demo-tpt.futuretranz.com/notebooklm/audio-deep-dive.m4a"></audio>
        <div class="audio-host">Hosted on Cloudflare R2 · <code>media.ai-demo-tpt.futuretranz.com</code></div>
      </div>

      <div class="doc-grid" id="doc-grid">
        <a class="doc-card" data-material="study-guide" href="/assets/notebooklm/study-guide.md" target="_blank" rel="noopener" style="--doc-color: var(--c-nonmetal)" aria-label="Open the Periodic Table study guide in a new tab">
          <span class="doc-icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2Z"/><path d="M9 7h7"/><path d="M9 11h7"/></svg>
          </span>
          <span class="doc-text">
            <span class="doc-label">Study Guide</span>
            <span class="doc-meta">Markdown · 10 KB · ~10 min read</span>
          </span>
        </a>
        <a class="doc-card" data-material="quiz" href="/assets/notebooklm/quiz.md" target="_blank" rel="noopener" style="--doc-color: var(--c-halogen)" aria-label="Open the chemistry quiz in a new tab">
          <span class="doc-icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12" y2="17.5"/></svg>
          </span>
          <span class="doc-text">
            <span class="doc-label">Quiz</span>
            <span class="doc-meta">Markdown · 4.7 KB · medium difficulty</span>
          </span>
        </a>
        <a class="doc-card" data-material="flashcards" href="/assets/notebooklm/flashcards.md" target="_blank" rel="noopener" style="--doc-color: var(--c-alkali)" aria-label="Open the chemistry flashcards in a new tab">
          <span class="doc-icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="14" height="14" rx="1.5"/><path d="M7 2h14v14"/></svg>
          </span>
          <span class="doc-text">
            <span class="doc-label">Flashcards</span>
            <span class="doc-meta">Markdown · 12 KB · spaced-repetition</span>
          </span>
        </a>
        <a class="doc-card" data-material="mind-map" href="/assets/notebooklm/mind-map.json" target="_blank" rel="noopener" style="--doc-color: var(--c-metalloid)" aria-label="Open the periodic table mind map JSON in a new tab">
          <span class="doc-icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="2.4"/><circle cx="4" cy="6" r="1.8"/><circle cx="4" cy="18" r="1.8"/><circle cx="20" cy="6" r="1.8"/><circle cx="20" cy="18" r="1.8"/><path d="M5.6 7l4.6 3.6"/><path d="M5.6 17l4.6-3.6"/><path d="M18.4 7l-4.6 3.6"/><path d="M18.4 17l-4.6-3.6"/></svg>
          </span>
          <span class="doc-text">
            <span class="doc-label">Mind Map</span>
            <span class="doc-meta">JSON · 4.8 KB · hierarchical</span>
          </span>
        </a>
      </div>
    </section>

    <footer>
      <span>Click any element for full properties · ⌘K to search · ESC to close</span>
      <nav class="footer-nav" aria-label="Site sections">
        <a href="/research/">Research</a>
        <a href="/sitemap.xml">Sitemap</a>
      </nav>
      <span class="socials" aria-label="FutureTranz on the web">
        <a href="https://github.com/orgs/FutureTranz-Inc" target="_blank" rel="noopener noreferrer" aria-label="FutureTranz on GitHub" title="GitHub">
          <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg>
        </a>
        <a href="https://www.linkedin.com/company/futuretranz" target="_blank" rel="noopener noreferrer" aria-label="FutureTranz on LinkedIn" title="LinkedIn">
          <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M13.632 13.635h-2.37V9.922c0-.886-.018-2.025-1.234-2.025-1.235 0-1.424.964-1.424 1.961v3.778h-2.37V6h2.276v1.043h.03c.318-.6 1.092-1.234 2.247-1.234 2.4 0 2.845 1.58 2.845 3.637v4.188ZM3.558 4.957a1.376 1.376 0 1 1 0-2.751 1.376 1.376 0 0 1 0 2.751ZM4.745 13.635h-2.37V6h2.37v7.635ZM14.816 0H1.18C.528 0 0 .516 0 1.153v13.694C0 15.484.528 16 1.18 16h13.635C15.467 16 16 15.484 16 14.847V1.153C16 .516 15.467 0 14.816 0Z"/></svg>
        </a>
      </span>
      <span>© 2026 <a href="https://futuretranz.com" target="_blank" rel="noopener noreferrer">FUTURETRANZ, INC.</a></span>
    </footer>
  </div>

  <div class="drawer-backdrop" id="backdrop"></div>
  <aside class="drawer" id="drawer" aria-hidden="true">
    <button class="close" id="close" aria-label="Close">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12"/></svg>
    </button>
    <div id="drawer-body"></div>
  </aside>

  <div class="zoom-backdrop" id="zoom-backdrop"></div>
  <div class="zoom-shell" id="zoom-shell" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="zoom-heading">
    <div class="zoom-frame" id="zoom-frame">
      <button type="button" class="zoom-close" id="zoom-close" aria-label="Close zoom view">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12"/></svg>
      </button>
      <div id="zoom-body"></div>
    </div>
  </div>

  <script>
    /* ============================================================
     * FTI Analytics Passthrough
     * ============================================================ */
    function fti_track(eventName, detail) {
      const payload = {
        source: 'fti-periodic-table',
        event: eventName,
        detail: detail,
        timestamp: new Date().toISOString()
      };
      if (window.parent && window.parent !== window) {
        window.parent.postMessage(payload, '*');
      }
      console.debug(`[FTI-Analytics] ${eventName}`, detail);
    }

    let drawerTimer = null;

    /* ============================================================
     * Element data set. Properties marked null are unknown / not
     * applicable. Atomic mass values for synthetic elements use the
     * mass number of the most stable isotope, shown in brackets.
     * ============================================================ */
    const CATEGORIES = {
      "alkali":          { label: "Alkali Metal",         color: "var(--c-alkali)" },
      "alkaline-earth":  { label: "Alkaline Earth",       color: "var(--c-alkaline-earth)" },
      "transition":      { label: "Transition Metal",     color: "var(--c-transition)" },
      "post-transition": { label: "Post-Transition Metal",color: "var(--c-post-transition)" },
      "metalloid":       { label: "Metalloid",            color: "var(--c-metalloid)" },
      "nonmetal":        { label: "Reactive Nonmetal",    color: "var(--c-nonmetal)" },
      "halogen":         { label: "Halogen",              color: "var(--c-halogen)" },
      "noble":           { label: "Noble Gas",            color: "var(--c-noble)" },
      "lanthanide":      { label: "Lanthanide",           color: "var(--c-lanthanide)" },
      "actinide":        { label: "Actinide",             color: "var(--c-actinide)" },
      "unknown":         { label: "Unknown / Synthetic",  color: "var(--c-unknown)" }
    };

    // [Z, Symbol, Name, Mass, Cat, Period, Group, Phase, Electroneg, AtomicRadius(pm), DiscYear, Config, Description]
    const ELEMENTS = [
      [1,"H","Hydrogen",1.008,"nonmetal",1,1,"gas",2.20,53,1766,"1s¹","The most abundant element in the universe; primary fuel of stars."],
      [2,"He","Helium",4.0026,"noble",1,18,"gas",null,31,1868,"1s²","Inert, second-lightest element; discovered in the solar spectrum before Earth."],
      [3,"Li","Lithium",6.94,"alkali",2,1,"solid",0.98,167,1817,"[He] 2s¹","Lightest metal; central to modern rechargeable batteries."],
      [4,"Be","Beryllium",9.0122,"alkaline-earth",2,2,"solid",1.57,112,1798,"[He] 2s²","Stiff, light, and toxic; used in aerospace alloys and X-ray windows."],
      [5,"B","Boron",10.81,"metalloid",2,13,"solid",2.04,87,1808,"[He] 2s² 2p¹","Hard semi-metal; key in borosilicate glass and high-strength fibers."],
      [6,"C","Carbon",12.011,"nonmetal",2,14,"solid",2.55,67,-3750,"[He] 2s² 2p²","Backbone of organic chemistry; forms diamond, graphite, graphene, and life."],
      [7,"N","Nitrogen",14.007,"nonmetal",2,15,"gas",3.04,56,1772,"[He] 2s² 2p³","Comprises 78% of Earth's atmosphere; essential to amino acids and DNA."],
      [8,"O","Oxygen",15.999,"nonmetal",2,16,"gas",3.44,48,1774,"[He] 2s² 2p⁴","Most abundant element in Earth's crust; powers respiration and combustion."],
      [9,"F","Fluorine",18.998,"halogen",2,17,"gas",3.98,42,1886,"[He] 2s² 2p⁵","Most electronegative and reactive of all elements; forms enamel-protecting fluorides."],
      [10,"Ne","Neon",20.180,"noble",2,18,"gas",null,38,1898,"[He] 2s² 2p⁶","Inert noble gas; produces the iconic red-orange glow of advertising tubes."],
      [11,"Na","Sodium",22.990,"alkali",3,1,"solid",0.93,190,1807,"[Ne] 3s¹","Soft silvery metal; partner of chloride in everyday salt."],
      [12,"Mg","Magnesium",24.305,"alkaline-earth",3,2,"solid",1.31,145,1755,"[Ne] 3s²","Burns with brilliant white light; central atom of chlorophyll."],
      [13,"Al","Aluminium",26.982,"post-transition",3,13,"solid",1.61,118,1825,"[Ne] 3s² 3p¹","Lightweight, corrosion-resistant; the most abundant metal in Earth's crust."],
      [14,"Si","Silicon",28.085,"metalloid",3,14,"solid",1.90,111,1824,"[Ne] 3s² 3p²","Backbone of microelectronics and the digital age."],
      [15,"P","Phosphorus",30.974,"nonmetal",3,15,"solid",2.19,98,1669,"[Ne] 3s² 3p³","Essential to DNA, ATP, and bone; the first element discovered by name."],
      [16,"S","Sulfur",32.06,"nonmetal",3,16,"solid",2.58,88,-2000,"[Ne] 3s² 3p⁴","Yellow nonmetal known since antiquity; key to vulcanization and proteins."],
      [17,"Cl","Chlorine",35.45,"halogen",3,17,"gas",3.16,79,1774,"[Ne] 3s² 3p⁵","Pungent yellow-green gas; partners in salt and powerful disinfectants."],
      [18,"Ar","Argon",39.948,"noble",3,18,"gas",null,71,1894,"[Ne] 3s² 3p⁶","Third-most abundant gas in Earth's atmosphere; used in welding shields."],
      [19,"K","Potassium",39.098,"alkali",4,1,"solid",0.82,243,1807,"[Ar] 4s¹","Soft, violet-flame metal; vital electrolyte in living cells."],
      [20,"Ca","Calcium",40.078,"alkaline-earth",4,2,"solid",1.00,194,1808,"[Ar] 4s²","Structural element of bone, teeth, and shells; fifth-most abundant in the crust."],
      [21,"Sc","Scandium",44.956,"transition",4,3,"solid",1.36,184,1879,"[Ar] 3d¹ 4s²","Light, expensive metal used in aerospace alloys and metal-halide lamps."],
      [22,"Ti","Titanium",47.867,"transition",4,4,"solid",1.54,176,1791,"[Ar] 3d² 4s²","Strength-to-weight champion; biocompatible for implants and prosthetics."],
      [23,"V","Vanadium",50.942,"transition",4,5,"solid",1.63,171,1801,"[Ar] 3d³ 4s²","Hardens steel; recently prominent in grid-scale flow batteries."],
      [24,"Cr","Chromium",51.996,"transition",4,6,"solid",1.66,166,1797,"[Ar] 3d⁵ 4s¹","Provides the corrosion-resistant shine of stainless steel and chrome plating."],
      [25,"Mn","Manganese",54.938,"transition",4,7,"solid",1.55,161,1774,"[Ar] 3d⁵ 4s²","Hardens steel; essential trace nutrient and key in dry-cell batteries."],
      [26,"Fe","Iron",55.845,"transition",4,8,"solid",1.83,156,-5000,"[Ar] 3d⁶ 4s²","Most-used metal on Earth; the dense core of our planet and carrier of oxygen in blood."],
      [27,"Co","Cobalt",58.933,"transition",4,9,"solid",1.88,152,1735,"[Ar] 3d⁷ 4s²","Source of vivid blue pigments; central atom of vitamin B12."],
      [28,"Ni","Nickel",58.693,"transition",4,10,"solid",1.91,149,1751,"[Ar] 3d⁸ 4s²","Tough, magnetic, and corrosion-resistant; used in coinage and superalloys."],
      [29,"Cu","Copper",63.546,"transition",4,11,"solid",1.90,145,-9000,"[Ar] 3d¹⁰ 4s¹","Excellent conductor; the principal metal of electrical wiring."],
      [30,"Zn","Zinc",65.38,"transition",4,12,"solid",1.65,142,1746,"[Ar] 3d¹⁰ 4s²","Galvanizes steel against rust; essential trace nutrient."],
      [31,"Ga","Gallium",69.723,"post-transition",4,13,"solid",1.81,136,1875,"[Ar] 3d¹⁰ 4s² 4p¹","Melts in the palm; essential to LEDs and high-frequency semiconductors."],
      [32,"Ge","Germanium",72.630,"metalloid",4,14,"solid",2.01,125,1886,"[Ar] 3d¹⁰ 4s² 4p²","Predicted by Mendeleev before discovery; used in fiber optics and infrared lenses."],
      [33,"As","Arsenic",74.922,"metalloid",4,15,"solid",2.18,114,1250,"[Ar] 3d¹⁰ 4s² 4p³","Notorious historical poison; doping agent in semiconductors."],
      [34,"Se","Selenium",78.971,"nonmetal",4,16,"solid",2.55,103,1817,"[Ar] 3d¹⁰ 4s² 4p⁴","Photoconductive nonmetal; essential trace element in glutathione enzymes."],
      [35,"Br","Bromine",79.904,"halogen",4,17,"liquid",2.96,94,1826,"[Ar] 3d¹⁰ 4s² 4p⁵","One of only two liquid elements at room temperature; deep red-brown."],
      [36,"Kr","Krypton",83.798,"noble",4,18,"gas",3.00,88,1898,"[Ar] 3d¹⁰ 4s² 4p⁶","Once defined the meter; used in high-performance lighting and lasers."],
      [37,"Rb","Rubidium",85.468,"alkali",5,1,"solid",0.82,265,1861,"[Kr] 5s¹","Soft, silver-white metal; used in atomic clocks and research lasers."],
      [38,"Sr","Strontium",87.62,"alkaline-earth",5,2,"solid",0.95,219,1790,"[Kr] 5s²","Produces the brilliant red of fireworks and signal flares."],
      [39,"Y","Yttrium",88.906,"transition",5,3,"solid",1.22,212,1794,"[Kr] 4d¹ 5s²","Found in rare-earth minerals; key in red-phosphor displays and superconductors."],
      [40,"Zr","Zirconium",91.224,"transition",5,4,"solid",1.33,206,1789,"[Kr] 4d² 5s²","Corrosion-resistant; used in nuclear cladding and gem-quality cubic zirconia."],
      [41,"Nb","Niobium",92.906,"transition",5,5,"solid",1.6,198,1801,"[Kr] 4d⁴ 5s¹","Soft, ductile, superconducting; used in MRI magnets and jet-engine alloys."],
      [42,"Mo","Molybdenum",95.95,"transition",5,6,"solid",2.16,190,1781,"[Kr] 4d⁵ 5s¹","Strengthens steel under heat; vital cofactor in nitrogenase enzymes."],
      [43,"Tc","Technetium",98,"transition",5,7,"solid",1.9,183,1937,"[Kr] 4d⁵ 5s²","First synthetic element; its medical isotope images millions of patients yearly."],
      [44,"Ru","Ruthenium",101.07,"transition",5,8,"solid",2.2,178,1844,"[Kr] 4d⁷ 5s¹","Hard platinum-group metal; catalyst in fine chemicals and electronics."],
      [45,"Rh","Rhodium",102.91,"transition",5,9,"solid",2.28,173,1803,"[Kr] 4d⁸ 5s¹","Among the rarest and most expensive metals; the heart of catalytic converters."],
      [46,"Pd","Palladium",106.42,"transition",5,10,"solid",2.20,169,1803,"[Kr] 4d¹⁰","Lustrous platinum-group metal; absorbs hydrogen and catalyzes coupling reactions."],
      [47,"Ag","Silver",107.87,"transition",5,11,"solid",1.93,165,-5000,"[Kr] 4d¹⁰ 5s¹","Highest electrical conductivity of any metal; antimicrobial and reflective."],
      [48,"Cd","Cadmium",112.41,"transition",5,12,"solid",1.69,161,1817,"[Kr] 4d¹⁰ 5s²","Toxic heavy metal; once common in pigments and rechargeable cells."],
      [49,"In","Indium",114.82,"post-transition",5,13,"solid",1.78,156,1863,"[Kr] 4d¹⁰ 5s² 5p¹","Soft and ductile; transparent conductor in nearly every touchscreen as ITO."],
      [50,"Sn","Tin",118.71,"post-transition",5,14,"solid",1.96,145,-3000,"[Kr] 4d¹⁰ 5s² 5p²","Combined with copper to launch the Bronze Age; coats steel as tinplate."],
      [51,"Sb","Antimony",121.76,"metalloid",5,15,"solid",2.05,133,815,"[Kr] 4d¹⁰ 5s² 5p³","Used since antiquity in cosmetics; flame-retardant in plastics and fabrics."],
      [52,"Te","Tellurium",127.60,"metalloid",5,16,"solid",2.1,123,1782,"[Kr] 4d¹⁰ 5s² 5p⁴","Brittle silver-white; alloyed in solar cells and rewritable optical media."],
      [53,"I","Iodine",126.90,"halogen",5,17,"solid",2.66,115,1811,"[Kr] 4d¹⁰ 5s² 5p⁵","Sublimes from violet crystals; essential for thyroid hormone synthesis."],
      [54,"Xe","Xenon",131.29,"noble",5,18,"gas",2.6,108,1898,"[Kr] 4d¹⁰ 5s² 5p⁶","Heavy noble gas; powers ion thrusters and dazzling arc lamps."],
      [55,"Cs","Caesium",132.91,"alkali",6,1,"solid",0.79,298,1860,"[Xe] 6s¹","Defines the second through atomic-clock transitions; melts near room temperature."],
      [56,"Ba","Barium",137.33,"alkaline-earth",6,2,"solid",0.89,253,1808,"[Xe] 6s²","Sulfate form is the contrast agent in medical imaging."],
      [57,"La","Lanthanum",138.91,"lanthanide",6,3,"solid",1.10,195,1839,"[Xe] 5d¹ 6s²","First of the lanthanides; used in camera lenses and battery electrodes."],
      [58,"Ce","Cerium",140.12,"lanthanide",6,3,"solid",1.12,185,1803,"[Xe] 4f¹ 5d¹ 6s²","Most abundant rare-earth element; polishes glass and lights flint igniters."],
      [59,"Pr","Praseodymium",140.91,"lanthanide",6,3,"solid",1.13,247,1885,"[Xe] 4f³ 6s²","Tints welder's goggles vivid green and strengthens magnesium alloys."],
      [60,"Nd","Neodymium",144.24,"lanthanide",6,3,"solid",1.14,206,1885,"[Xe] 4f⁴ 6s²","Forms the world's strongest permanent magnets, central to motors and drives."],
      [61,"Pm","Promethium",145,"lanthanide",6,3,"solid",null,205,1945,"[Xe] 4f⁵ 6s²","Only naturally radioactive lanthanide; once powered glowing dial paint."],
      [62,"Sm","Samarium",150.36,"lanthanide",6,3,"solid",1.17,238,1879,"[Xe] 4f⁶ 6s²","High-temperature samarium-cobalt magnets resist demagnetization."],
      [63,"Eu","Europium",151.96,"lanthanide",6,3,"solid",1.2,231,1901,"[Xe] 4f⁷ 6s²","Activates red phosphors in displays and authenticates Euro banknotes."],
      [64,"Gd","Gadolinium",157.25,"lanthanide",6,3,"solid",1.20,233,1880,"[Xe] 4f⁷ 5d¹ 6s²","Strongly paramagnetic; brightens MRI scans as a contrast agent."],
      [65,"Tb","Terbium",158.93,"lanthanide",6,3,"solid",1.2,225,1843,"[Xe] 4f⁹ 6s²","Sourced for green phosphors and magnetostrictive sensors."],
      [66,"Dy","Dysprosium",162.50,"lanthanide",6,3,"solid",1.22,228,1886,"[Xe] 4f¹⁰ 6s²","Stabilizes neodymium magnets at high temperatures in EVs and turbines."],
      [67,"Ho","Holmium",164.93,"lanthanide",6,3,"solid",1.23,226,1878,"[Xe] 4f¹¹ 6s²","Produces the strongest known magnetic moment of any element."],
      [68,"Er","Erbium",167.26,"lanthanide",6,3,"solid",1.24,226,1843,"[Xe] 4f¹² 6s²","Amplifies signals in fiber-optic networks across the globe."],
      [69,"Tm","Thulium",168.93,"lanthanide",6,3,"solid",1.25,222,1879,"[Xe] 4f¹³ 6s²","Rarest of the stable lanthanides; lases in portable medical devices."],
      [70,"Yb","Ytterbium",173.05,"lanthanide",6,3,"solid",1.1,222,1878,"[Xe] 4f¹⁴ 6s²","Foundation of the most accurate optical atomic clocks ever built."],
      [71,"Lu","Lutetium",174.97,"lanthanide",6,3,"solid",1.27,217,1907,"[Xe] 4f¹⁴ 5d¹ 6s²","Densest, hardest lanthanide; used in PET scanner detectors."],
      [72,"Hf","Hafnium",178.49,"transition",6,4,"solid",1.3,208,1923,"[Xe] 4f¹⁴ 5d² 6s²","Strong neutron absorber; controls fission in submarine reactors."],
      [73,"Ta","Tantalum",180.95,"transition",6,5,"solid",1.5,200,1802,"[Xe] 4f¹⁴ 5d³ 6s²","Corrosion-proof and biocompatible; densely packed into capacitors in every phone."],
      [74,"W","Tungsten",183.84,"transition",6,6,"solid",2.36,193,1783,"[Xe] 4f¹⁴ 5d⁴ 6s²","Highest melting point of any metal; the classic incandescent filament."],
      [75,"Re","Rhenium",186.21,"transition",6,7,"solid",1.9,188,1925,"[Xe] 4f¹⁴ 5d⁵ 6s²","One of the rarest elements in Earth's crust; superalloys for jet turbines."],
      [76,"Os","Osmium",190.23,"transition",6,8,"solid",2.2,185,1803,"[Xe] 4f¹⁴ 5d⁶ 6s²","Densest naturally occurring element; harder than diamond in alloy form."],
      [77,"Ir","Iridium",192.22,"transition",6,9,"solid",2.20,180,1803,"[Xe] 4f¹⁴ 5d⁷ 6s²","Most corrosion-resistant metal; its global anomaly marked the dinosaur extinction."],
      [78,"Pt","Platinum",195.08,"transition",6,10,"solid",2.28,177,1735,"[Xe] 4f¹⁴ 5d⁹ 6s¹","Defining catalytic converter metal; standard for jewelry and lab apparatus."],
      [79,"Au","Gold",196.97,"transition",6,11,"solid",2.54,174,-6000,"[Xe] 4f¹⁴ 5d¹⁰ 6s¹","Universally treasured; chemically inert and the most malleable of metals."],
      [80,"Hg","Mercury",200.59,"transition",6,12,"liquid",2.00,171,-1500,"[Xe] 4f¹⁴ 5d¹⁰ 6s²","The only metal liquid at room temperature; toxic and once central to thermometers."],
      [81,"Tl","Thallium",204.38,"post-transition",6,13,"solid",1.62,156,1861,"[Xe] 4f¹⁴ 5d¹⁰ 6s² 6p¹","Highly toxic; once a notorious poison and now used in low-temperature thermometers."],
      [82,"Pb","Lead",207.2,"post-transition",6,14,"solid",2.33,154,-7000,"[Xe] 4f¹⁴ 5d¹⁰ 6s² 6p²","Dense and soft; ancient plumbing material now restricted for its neurotoxicity."],
      [83,"Bi","Bismuth",208.98,"post-transition",6,15,"solid",2.02,143,1753,"[Xe] 4f¹⁴ 5d¹⁰ 6s² 6p³","Forms iridescent rainbow crystals; used in low-melt alloys and stomach remedies."],
      [84,"Po","Polonium",209,"metalloid",6,16,"solid",2.0,135,1898,"[Xe] 4f¹⁴ 5d¹⁰ 6s² 6p⁴","Discovered by Marie Curie and named for Poland; intensely radioactive."],
      [85,"At","Astatine",210,"halogen",6,17,"solid",2.2,127,1940,"[Xe] 4f¹⁴ 5d¹⁰ 6s² 6p⁵","Rarest naturally occurring element; less than 30 grams exist on Earth at any moment."],
      [86,"Rn","Radon",222,"noble",6,18,"gas",2.2,120,1900,"[Xe] 4f¹⁴ 5d¹⁰ 6s² 6p⁶","Radioactive noble gas; seeps from soil and a leading cause of indoor radiation exposure."],
      [87,"Fr","Francium",223,"alkali",7,1,"solid",0.7,348,1939,"[Rn] 7s¹","One of the rarest natural elements; only minutes-long isotopes exist."],
      [88,"Ra","Radium",226,"alkaline-earth",7,2,"solid",0.9,283,1898,"[Rn] 7s²","Glows pale blue; once added to glow-in-the-dark paint with disastrous health results."],
      [89,"Ac","Actinium",227,"actinide",7,3,"solid",1.1,260,1899,"[Rn] 6d¹ 7s²","First of the actinides; promising in targeted alpha-particle cancer therapies."],
      [90,"Th","Thorium",232.04,"actinide",7,3,"solid",1.3,237,1828,"[Rn] 6d² 7s²","Mildly radioactive; proposed fuel for next-generation molten-salt reactors."],
      [91,"Pa","Protactinium",231.04,"actinide",7,3,"solid",1.5,243,1913,"[Rn] 5f² 6d¹ 7s²","Among the rarest and most expensive natural elements."],
      [92,"U","Uranium",238.03,"actinide",7,3,"solid",1.38,240,1789,"[Rn] 5f³ 6d¹ 7s²","Heaviest naturally occurring element; fuel of nuclear fission and weapons."],
      [93,"Np","Neptunium",237,"actinide",7,3,"solid",1.36,221,1940,"[Rn] 5f⁴ 6d¹ 7s²","First transuranic element synthesized; named for the planet beyond Uranus."],
      [94,"Pu","Plutonium",244,"actinide",7,3,"solid",1.28,243,1940,"[Rn] 5f⁶ 7s²","Powers deep-space probes via radioisotope thermoelectric generators."],
      [95,"Am","Americium",243,"actinide",7,3,"solid",1.13,244,1944,"[Rn] 5f⁷ 7s²","Tiny amounts in household smoke detectors ionize the air it monitors."],
      [96,"Cm","Curium",247,"actinide",7,3,"solid",1.28,245,1944,"[Rn] 5f⁷ 6d¹ 7s²","Named for the Curies; glows purple-pink in the dark from intense radioactivity."],
      [97,"Bk","Berkelium",247,"actinide",7,3,"solid",1.3,244,1949,"[Rn] 5f⁹ 7s²","Synthesized at Berkeley; used to discover heavier elements."],
      [98,"Cf","Californium",251,"actinide",7,3,"solid",1.3,245,1950,"[Rn] 5f¹⁰ 7s²","Powerful neutron emitter; used to start nuclear reactors and image cargo."],
      [99,"Es","Einsteinium",252,"actinide",7,3,"solid",1.3,245,1952,"[Rn] 5f¹¹ 7s²","Discovered in fallout from the first hydrogen-bomb test."],
      [100,"Fm","Fermium",257,"actinide",7,3,"solid",1.3,null,1952,"[Rn] 5f¹² 7s²","Heaviest element produced by neutron bombardment, named for Enrico Fermi."],
      [101,"Md","Mendelevium",258,"actinide",7,3,"solid",1.3,null,1955,"[Rn] 5f¹³ 7s²","Honors Mendeleev, who first arranged the periodic table."],
      [102,"No","Nobelium",259,"actinide",7,3,"solid",1.3,null,1966,"[Rn] 5f¹⁴ 7s²","Named for Alfred Nobel; only minute quantities have ever been synthesized."],
      [103,"Lr","Lawrencium",266,"actinide",7,3,"solid",1.3,null,1961,"[Rn] 5f¹⁴ 7s² 7p¹","Last of the actinides; named after cyclotron inventor Ernest Lawrence."],
      [104,"Rf","Rutherfordium",267,"transition",7,4,"solid",null,null,1964,"[Rn] 5f¹⁴ 6d² 7s²","Honors Ernest Rutherford; existed for seconds in the laboratory."],
      [105,"Db","Dubnium",268,"transition",7,5,"solid",null,null,1967,"[Rn] 5f¹⁴ 6d³ 7s²","Named for Dubna, Russia; subject of historic discovery disputes."],
      [106,"Sg","Seaborgium",269,"transition",7,6,"solid",null,null,1974,"[Rn] 5f¹⁴ 6d⁴ 7s²","First element named after a living person, Glenn Seaborg."],
      [107,"Bh","Bohrium",270,"transition",7,7,"solid",null,null,1981,"[Rn] 5f¹⁴ 6d⁵ 7s²","Honors Niels Bohr, founder of quantum atomic theory."],
      [108,"Hs","Hassium",269,"transition",7,8,"solid",null,null,1984,"[Rn] 5f¹⁴ 6d⁶ 7s²","Named for the German state of Hesse, where it was synthesized."],
      [109,"Mt","Meitnerium",278,"unknown",7,9,"solid",null,null,1982,"[Rn] 5f¹⁴ 6d⁷ 7s²","Named for Lise Meitner, co-discoverer of nuclear fission."],
      [110,"Ds","Darmstadtium",281,"unknown",7,10,"solid",null,null,1994,"[Rn] 5f¹⁴ 6d⁸ 7s²","Synthesized in Darmstadt, Germany; existed for milliseconds."],
      [111,"Rg","Roentgenium",282,"unknown",7,11,"solid",null,null,1994,"[Rn] 5f¹⁴ 6d⁹ 7s²","Honors Wilhelm Röntgen, discoverer of X-rays."],
      [112,"Cn","Copernicium",285,"transition",7,12,"unknown",null,null,1996,"[Rn] 5f¹⁴ 6d¹⁰ 7s²","Honors Nicolaus Copernicus; predicted to be a volatile liquid metal."],
      [113,"Nh","Nihonium",286,"unknown",7,13,"solid",null,null,2003,"[Rn] 5f¹⁴ 6d¹⁰ 7s² 7p¹","First element discovered in Asia; nihon means Japan."],
      [114,"Fl","Flerovium",289,"unknown",7,14,"solid",null,null,1998,"[Rn] 5f¹⁴ 6d¹⁰ 7s² 7p²","Named for the Flerov Laboratory in Russia."],
      [115,"Mc","Moscovium",290,"unknown",7,15,"solid",null,null,2003,"[Rn] 5f¹⁴ 6d¹⁰ 7s² 7p³","Honors the Moscow region of Russia."],
      [116,"Lv","Livermorium",293,"unknown",7,16,"solid",null,null,2000,"[Rn] 5f¹⁴ 6d¹⁰ 7s² 7p⁴","Named for Lawrence Livermore National Laboratory."],
      [117,"Ts","Tennessine",294,"halogen",7,17,"solid",null,null,2010,"[Rn] 5f¹⁴ 6d¹⁰ 7s² 7p⁵","Honors Tennessee; the second-newest element in the table."],
      [118,"Og","Oganesson",294,"noble",7,18,"unknown",null,null,2002,"[Rn] 5f¹⁴ 6d¹⁰ 7s² 7p⁶","Named for Yuri Oganessian; the heaviest known element."]
    ];

    /* ============================================================
     * Per-element educational extras (v1.2.0)
     *
     * Optional fields layered on top of the canonical ELEMENTS rows.
     * - uses: array of bullet strings shown in the drawer "Common
     *   uses" section. Real curricular content for the most-taught
     *   anchor elements. Elements not listed here fall back to the
     *   single-line desc field already in ELEMENTS.
     * - audio_url: HTML5-playable URL for an audio brief. NULL =
     *   honest "production pending" UI state. NEVER use a fake URL.
     * - video_url: HTML5-playable URL for a video explainer. Same
     *   null-or-real contract as audio_url.
     * - infographic_caption: short prose shown beside the Bohr-shell
     *   thumbnail. When absent, falls back to the desc field.
     *
     * To wire a real audio or video asset for an element, drop the
     * URL into the matching atomic-number key below. Self-hosted
     * MP3/MP4 served from /assets/elements/<symbol>/ is the
     * recommended pattern; no external embeds without an
     * architectural review per CLAUDE.md.
     * ============================================================ */
    const EXTRA_DATA = {
      1: { // Hydrogen
        uses: [
          "<strong>Ammonia synthesis</strong> via the Haber-Bosch process — the foundation of synthetic fertilizer and roughly half of the nitrogen in the food supply.",
          "<strong>Petroleum refining</strong> — hydrocracking and desulfurization clean and lighten crude into diesel and gasoline.",
          "<strong>Hydrogen fuel cells</strong> in forklifts, transit buses, and a growing fleet of long-haul trucks; combines with oxygen to produce only water and electricity.",
          "<strong>Rocket propulsion</strong> — liquid hydrogen + liquid oxygen powered the Space Shuttle main engines and the upper stages of the Saturn V."
        ],
        infographic_caption: "Hydrogen has one proton and one electron — the simplest possible atom and the lightest element in the universe."
      },
      2: { // Helium
        uses: [
          "<strong>MRI superconducting magnets</strong> — liquid helium at 4 K keeps the niobium-titanium coils superconducting; a single MRI machine consumes thousands of liters per year.",
          "<strong>Welding shield gas</strong> for aluminum, magnesium, and titanium where argon is reactive at high temperatures.",
          "<strong>Leak detection</strong> — its tiny atomic size lets it find pinholes in pressure vessels, vacuum chambers, and semiconductor lines.",
          "<strong>Lighter-than-air flight</strong> — non-flammable lift gas for blimps, scientific high-altitude balloons, and parade floats."
        ],
        infographic_caption: "Helium's full 1s² shell makes it the most stable element on the table — and the second-lightest."
      },
      3: { // Lithium
        uses: [
          "<strong>Lithium-ion batteries</strong> in every smartphone, laptop, EV, and grid-storage installation; the dominant rechargeable chemistry of our era.",
          "<strong>Mood stabilizer</strong> — lithium carbonate has been first-line treatment for bipolar disorder since the 1970s.",
          "<strong>High-temperature greases</strong> — lithium soaps thicken lubricants for aerospace and heavy industry.",
          "<strong>Aluminum-lithium alloys</strong> — a few percent lithium drops aircraft frame mass without losing strength."
        ],
        infographic_caption: "One outer-shell electron makes lithium spectacularly reactive — and the lightest metal on the table."
      },
      4: { // Beryllium
        uses: [
          "<strong>Aerospace alloys</strong> — beryllium-copper is six times stiffer than steel by mass; used in satellite structures and James Webb Space Telescope mirrors.",
          "<strong>X-ray windows</strong> — beryllium is transparent to X-rays, making it the standard window material in X-ray tubes and detectors.",
          "<strong>Nuclear neutron reflectors</strong> in reactor designs and weapons cores.",
          "<strong>Non-sparking tools</strong> for petrochemical and explosives-handling environments — beryllium-copper striking surfaces don't ignite vapors."
        ],
        infographic_caption: "Stiff, light, and toxic — beryllium is one of the most dangerous elements to machine despite its useful properties."
      },
      5: { // Boron
        uses: [
          "<strong>Borosilicate glass</strong> (Pyrex, lab glassware, telescope mirrors) — boron's low thermal expansion lets it survive hot-cold cycles.",
          "<strong>Detergents and bleach</strong> — sodium perborate is a stain-removing oxygen source in many laundry products.",
          "<strong>Boron-fiber composites</strong> stiffen the F-14 and B-1 fuselages, golf shafts, and bicycle frames.",
          "<strong>Neutron capture</strong> — boron-10 absorbs neutrons strongly, making boric acid a control-rod material and a therapeutic agent in BNCT cancer treatment."
        ]
      },
      6: { // Carbon
        uses: [
          "<strong>Steel</strong> — carbon content (0.05–2%) is what makes iron into the dominant structural material of civilization.",
          "<strong>Plastics, fuels, and pharmaceuticals</strong> — every organic molecule humans synthesize industrially is a carbon framework.",
          "<strong>Diamond</strong> for cutting tools, abrasives, semiconductor heat spreaders, and (occasionally) jewelry.",
          "<strong>Graphite</strong> in pencil leads, lithium-ion battery anodes, electric-arc furnace electrodes, and nuclear moderators.",
          "<strong>Graphene and carbon nanotubes</strong> — emerging in flexible electronics, ultrastrong composites, and biosensors."
        ],
        infographic_caption: "Carbon's four bonding electrons let it form longer, more varied molecular chains than any other element — the basis of all known life."
      },
      7: { // Nitrogen
        uses: [
          "<strong>Synthetic fertilizer</strong> — Haber-Bosch fixes atmospheric N₂ into ammonia, feeding ~50% of the modern human population.",
          "<strong>Inert atmosphere</strong> for food packaging, electronics manufacturing, and oil-tank blanketing.",
          "<strong>Liquid nitrogen</strong> at 77 K cools superconductors, cryopreserves biological samples, and freezes warts in dermatology.",
          "<strong>Explosives</strong> — TNT, nitroglycerin, and ammonium nitrate all rely on nitrogen's energetic redox chemistry."
        ]
      },
      8: { // Oxygen
        uses: [
          "<strong>Steel production</strong> — basic oxygen furnaces inject pure O₂ into molten iron to remove carbon impurities.",
          "<strong>Medical respiration</strong> — concentrated oxygen for hospitals, ICUs, and home therapy for COPD patients.",
          "<strong>Aerospace propulsion</strong> — liquid oxygen is the universal oxidizer in chemical rockets.",
          "<strong>Water and sewage treatment</strong> — ozone (O₃) disinfects municipal water and breaks down organic pollutants."
        ],
        infographic_caption: "Eight protons, eight electrons, six in the outer shell — oxygen needs only two more for a full octet, which makes it ferociously reactive."
      },
      9: { // Fluorine
        uses: [
          "<strong>Fluoridation</strong> of municipal drinking water — fluoride hardens tooth enamel and is one of the most studied public-health interventions in history.",
          "<strong>Teflon (PTFE)</strong> non-stick coatings for cookware, gaskets, and chemical-resistant tubing.",
          "<strong>Uranium hexafluoride (UF₆)</strong> is the gas-phase compound used to enrich uranium for reactors and weapons.",
          "<strong>Pharmaceuticals</strong> — about 25% of all prescribed drugs (Prozac, Lipitor, Cipro) contain at least one fluorine atom."
        ]
      },
      10: { // Neon
        uses: [
          "<strong>Neon signs</strong> — the iconic red-orange glow of mid-century commercial signage; pure neon emits this single dominant color.",
          "<strong>High-voltage indicator lamps</strong> in test equipment and old TV power-on lights.",
          "<strong>Cryogenic refrigerant</strong> — liquid neon between hydrogen and oxygen on the cold-end ladder, ~40 times more refrigerating capacity per unit volume than helium.",
          "<strong>Excimer lasers</strong> — argon-fluoride and krypton-fluoride lasers used in semiconductor lithography and corrective eye surgery use neon as a buffer gas."
        ]
      },
      11: { // Sodium
        uses: [
          "<strong>Table salt (NaCl)</strong> — the world's oldest food preservative and a fundamental flavor enhancer.",
          "<strong>Sodium-vapor street lamps</strong> — the orange glow that once defined urban nights worldwide.",
          "<strong>Caustic soda (NaOH)</strong> manufactured by chlor-alkali electrolysis; a backbone industrial chemical for soap, paper, and aluminum refining.",
          "<strong>Sodium-cooled fast reactors</strong> — molten sodium is a candidate coolant for next-generation nuclear designs.",
          "<strong>Sodium-ion batteries</strong> — emerging cheaper alternative to lithium for stationary grid storage."
        ],
        infographic_caption: "Sodium's single 3s electron is loosely held — it readily gives up to a halogen, forming the salts that built the chemical industry."
      },
      12: { // Magnesium
        uses: [
          "<strong>Aircraft and automotive components</strong> — magnesium alloys are the lightest structural metals in industrial use; common in steering columns, transmission cases, and laptop housings.",
          "<strong>Photosynthesis</strong> — every chlorophyll molecule has a magnesium atom at its center; without it, no plant on Earth captures sunlight.",
          "<strong>Pyrotechnics and flares</strong> — magnesium burns at 3,100 °C with brilliant white light.",
          "<strong>Sacrificial anodes</strong> — bolted onto steel ship hulls and underground pipelines to corrode preferentially and protect the steel."
        ]
      },
      13: { // Aluminium
        uses: [
          "<strong>Aircraft structures</strong> — the workhorse alloy of commercial aviation since the 1930s; a Boeing 737 is roughly 80% aluminum by mass.",
          "<strong>Beverage cans, foil, packaging</strong> — recyclable, lightweight, corrosion-resistant.",
          "<strong>Power transmission lines</strong> — aluminum-conductor steel-reinforced (ACSR) cables span every major grid; cheaper and lighter than copper at equivalent conductance.",
          "<strong>Smartphone and laptop chassis</strong> — anodized aluminum gives MacBook and iPhone shells their distinctive feel and color."
        ],
        infographic_caption: "Aluminum is the most abundant metal in the crust, but it took until 1886 (Hall-Héroult electrolysis) to make it cheap."
      },
      14: { // Silicon
        uses: [
          "<strong>Microchips and CPUs</strong> — every general-purpose computer ever built runs on silicon transistors; Silicon Valley is named for this element.",
          "<strong>Solar photovoltaics</strong> — crystalline silicon is the dominant solar-cell material at >90% global market share.",
          "<strong>Glass and ceramics</strong> — silica (SiO₂) is the basis of window glass, bottles, fiber optics, and silica gel desiccants.",
          "<strong>Silicone polymers</strong> — caulk, medical implants, cookware, and lubricants."
        ],
        infographic_caption: "Silicon's four bonding electrons mirror carbon's, but its semiconductor bandgap (1.12 eV) is what made the digital age possible."
      },
      15: { // Phosphorus
        uses: [
          "<strong>DNA and RNA backbones</strong> — phosphate groups are the structural rungs of every genetic molecule on Earth.",
          "<strong>ATP — the universal energy currency</strong> of cells; every muscle contraction, every nerve impulse releases a phosphate bond.",
          "<strong>Fertilizer</strong> — phosphate rock is mined globally and is the limiting nutrient in most agricultural soils.",
          "<strong>Match heads and incendiaries</strong> — red phosphorus on the strike strip; white phosphorus in military munitions."
        ]
      },
      16: { // Sulfur
        uses: [
          "<strong>Sulfuric acid (H₂SO₄)</strong> — the most produced industrial chemical on Earth; consumption per capita is a classic measure of an economy's industrial scale.",
          "<strong>Vulcanization of rubber</strong> — Charles Goodyear's 1839 discovery; sulfur cross-links turn sticky natural rubber into tires, hoses, and gaskets.",
          "<strong>Gunpowder</strong> — the original explosive composition was 75% saltpeter, 15% charcoal, 10% sulfur.",
          "<strong>Pharmaceuticals and biology</strong> — sulfur is in every cysteine and methionine amino acid; disulfide bonds give protein structure its rigidity."
        ]
      },
      17: { // Chlorine
        uses: [
          "<strong>Drinking water disinfection</strong> — chlorination is one of the most successful public-health interventions in human history; it ended waterborne typhoid and cholera in the developed world.",
          "<strong>PVC plastic</strong> — pipes, vinyl flooring, electrical insulation; chloride accounts for ~57% of PVC by mass.",
          "<strong>Bleach (NaOCl)</strong> for textiles, paper pulp, and household sanitation.",
          "<strong>Solvents and refrigerants</strong> — modern HFCs are mostly chlorine-free, but chlorinated hydrocarbons still dominate dry cleaning and degreasing."
        ]
      },
      18: { // Argon
        uses: [
          "<strong>Welding shield gas</strong> — argon's inertness and density make it the universal cover gas for TIG and MIG welding of steel and aluminum.",
          "<strong>Incandescent bulbs</strong> — argon fill prevents the tungsten filament from oxidizing.",
          "<strong>Insulating gas in double-paned windows</strong> — lower thermal conductivity than air improves window U-value.",
          "<strong>Plasma cutting and ICP-MS</strong> — argon plasmas reach 10,000 K and ionize nearly any element for trace analysis."
        ]
      },
      19: { // Potassium
        uses: [
          "<strong>Fertilizer (potash)</strong> — one of the three macronutrients in NPK; potassium chloride is mined from ancient evaporite deposits.",
          "<strong>Cellular biology</strong> — the K⁺/Na⁺ gradient across every cell membrane in your body powers nerve impulses and muscle contraction.",
          "<strong>Glassmaking</strong> — potassium oxide raises the working temperature of optical and laboratory glass.",
          "<strong>Black powder propellant</strong> — saltpeter (KNO₃) is the oxidizer in classical gunpowder."
        ]
      },
      20: { // Calcium
        uses: [
          "<strong>Concrete and cement</strong> — Portland cement is roughly 65% calcium oxide; concrete is the most-used construction material on Earth after water.",
          "<strong>Bone and teeth</strong> — hydroxyapatite (Ca₅(PO₄)₃OH) is the structural mineral of every vertebrate skeleton.",
          "<strong>Antacids and supplements</strong> — calcium carbonate (Tums, Rolaids) neutralizes stomach acid and supplements dietary intake.",
          "<strong>Steel deoxidation</strong> — calcium-silicon wires injected into molten steel scavenge oxygen and sulfur impurities."
        ]
      },
      21: { // Scandium
        uses: [
          "<strong>Aluminum-scandium alloys</strong> — adds strength and weldability to aluminum at fractions of a percent; used in MiG-29 fighter jets, baseball bats, and high-end bicycle frames.",
          "<strong>Metal-halide stadium lamps</strong> — scandium iodide produces a high-intensity, sun-spectrum white light favored for stadium lighting and film production.",
          "<strong>Solid-oxide fuel cells</strong> — scandia-stabilized zirconia electrolytes operate at lower temperatures than yttria-stabilized variants, extending fuel-cell stack life.",
          "<strong>Mercury-vapor lamp additive</strong> — small scandium additions improve color rendering of UV-rich industrial mercury lamps."
        ]
      },
      22: { // Titanium
        uses: [
          "<strong>Aerospace structural alloys</strong> — Ti-6Al-4V is the workhorse alloy of jet-engine compressor blades, fuselage frames, and the SR-71 Blackbird airframe.",
          "<strong>Biomedical implants</strong> — biocompatible and corrosion-proof; used in hip replacements, dental implants, and spinal hardware.",
          "<strong>Titanium dioxide (TiO₂) pigment</strong> — the most-used white pigment on Earth; in paint, sunscreen, food coloring (E171), and toothpaste.",
          "<strong>Consumer products</strong> — premium golf clubs, watches, eyeglass frames, and Apple's titanium iPhone Pro chassis.",
          "<strong>Desalination and chemical plants</strong> — titanium tubing resists seawater and chlorine corrosion."
        ],
        infographic_caption: "Strength-to-weight champion of the metals: 60% denser than aluminum but twice as strong, and almost as light as steel."
      },
      23: { // Vanadium
        uses: [
          "<strong>High-strength steel</strong> — vanadium steel is standard for tools, springs, gears, and rebar; about 85% of vanadium production goes to steel alloying.",
          "<strong>Vanadium redox flow batteries</strong> — emerging grid-scale storage for solar and wind farms; effectively unlimited cycle life.",
          "<strong>Sulfuric-acid catalysis</strong> — vanadium pentoxide (V₂O₅) is the catalyst in the contact process that produces sulfuric acid, the most-made industrial chemical on Earth.",
          "<strong>Aerospace alloys</strong> — Ti-6Al-4V titanium alloy contains 4% vanadium; also alloyed in jet-engine castings and rocket components."
        ]
      },
      24: { // Chromium
        uses: [
          "<strong>Stainless steel</strong> — chromium content above 10.5% gives steel its passive oxide layer; the defining alloy of modern kitchens, surgical tools, and architecture.",
          "<strong>Chrome plating</strong> — bright, hard, corrosion-proof finish on car bumpers, tools, plumbing fixtures, and motorcycles.",
          "<strong>Leather tanning</strong> — chromium-tanned leather dominates global leather production; faster and more durable than vegetable tanning.",
          "<strong>Refractory bricks</strong> — chromite ore (FeCr₂O₄) lines high-temperature furnaces in steelmaking and glass production.",
          "<strong>Pigments</strong> — chrome yellow, chrome green, and chrome oxide green for paints, plastics, and traffic signage."
        ]
      },
      25: { // Manganese
        uses: [
          "<strong>Steel alloying</strong> — about 90% of manganese is consumed by steelmaking; ferromanganese deoxidizes molten steel and adds strength to rails, armor, and machinery.",
          "<strong>Dry-cell batteries</strong> — manganese dioxide is the cathode in zinc-carbon and alkaline batteries; tens of billions produced annually.",
          "<strong>Lithium-ion battery cathodes</strong> — LiMn₂O₄ and NMC (nickel-manganese-cobalt) chemistries power most EVs and consumer electronics.",
          "<strong>Beverage-can aluminum</strong> — manganese hardens 3000-series aluminum used in beverage and food cans.",
          "<strong>Essential micronutrient</strong> — cofactor for manganese-superoxide-dismutase and other enzymes; trace mineral in human and plant nutrition."
        ]
      },
      26: { // Iron
        uses: [
          "<strong>Steel</strong> — the structural backbone of bridges, skyscrapers, ships, cars, rail, rebar, and most heavy machinery.",
          "<strong>Hemoglobin</strong> — iron in your red blood cells binds oxygen in the lungs and releases it in tissues; severe deficiency causes anemia.",
          "<strong>Earth's magnetic field</strong> — convection in the planet's molten iron-nickel outer core generates the geomagnetic field that shields the surface from solar wind.",
          "<strong>Magnets and magnetic storage</strong> — iron alloys (alnico, ferrite, NdFeB) span the spectrum from refrigerator magnets to electric-motor cores."
        ],
        infographic_caption: "Iron is the most thermodynamically stable nucleus — the end of the line for stellar fusion and the beginning of supernova ejecta."
      },
      27: { // Cobalt
        uses: [
          "<strong>Lithium-ion battery cathodes</strong> — cobalt is the most expensive component of NMC and NCA cathodes powering EVs and laptops; supply pressure drives ongoing cobalt-free chemistry research (LFP).",
          "<strong>Superalloys</strong> — cobalt-based alloys (Stellite, Haynes 25) tolerate jet-engine turbine temperatures and erosive environments.",
          "<strong>Vitamin B12 (cobalamin)</strong> — cobalt is the central atom of B12; the only metal known to be metabolically essential as part of a vitamin.",
          "<strong>Permanent magnets</strong> — samarium-cobalt and Alnico magnets retain magnetization at temperatures where neodymium magnets fail.",
          "<strong>Cobalt-blue pigments</strong> — used in stained glass, ceramics, and oil paints since antiquity (Egyptian cobalt blue, Ming porcelain underglaze)."
        ]
      },
      28: { // Nickel
        uses: [
          "<strong>Stainless steel</strong> — nickel content (~8% in 304 stainless) gives the alloy its formability, weldability, and corrosion resistance.",
          "<strong>Rechargeable batteries</strong> — NiMH (nickel-metal-hydride) hybrid car batteries; NiCd (nickel-cadmium) power tools (legacy).",
          "<strong>Hydrogenation catalysis</strong> — Raney nickel converts vegetable oils to margarine and shortening; central to petroleum refining.",
          "<strong>Coinage</strong> — US 5¢ nickel (75% Cu, 25% Ni); modern Euro coins; resistant to wear and corrosion.",
          "<strong>Superalloys</strong> — nickel-based superalloys (Inconel, Hastelloy) line jet-engine combustion chambers and chemical reactors."
        ]
      },
      29: { // Copper
        uses: [
          "<strong>Electrical wiring</strong> — copper's conductivity (second only to silver) makes it the universal choice for power and signal cables.",
          "<strong>Plumbing</strong> — copper pipes are durable, biostatic, and easily soldered.",
          "<strong>Bronze (Cu + Sn) and brass (Cu + Zn)</strong> — alloys that defined an entire age of human civilization.",
          "<strong>Antimicrobial surfaces</strong> — copper hospital fixtures kill bacteria on contact; an EPA-registered antimicrobial."
        ]
      },
      30: { // Zinc
        uses: [
          "<strong>Galvanizing steel</strong> — a thin zinc coating prevents rust by sacrificially corroding before the steel does; ~50% of all zinc produced goes to galvanizing.",
          "<strong>Brass</strong> — 60–70% copper + 30–40% zinc; musical instruments, plumbing fixtures, decorative hardware.",
          "<strong>Sunscreens and ointments</strong> — zinc oxide blocks UV-A and UV-B without absorbing into the skin.",
          "<strong>Dietary supplement</strong> — essential trace nutrient for ~300 enzymes; deficiency impairs immune function and wound healing."
        ]
      },
      31: { // Gallium
        uses: [
          "<strong>Gallium nitride (GaN) semiconductors</strong> — high-frequency, high-efficiency power electronics; revolutionizing chargers, 5G base stations, and EV inverters.",
          "<strong>LED lighting</strong> — blue and UV LEDs use indium gallium nitride (InGaN); the foundation of all white LED bulbs and modern displays.",
          "<strong>Solar cells</strong> — gallium-arsenide cells achieve >30% efficiency; standard for spacecraft, Mars rovers, and concentrator photovoltaics.",
          "<strong>Liquid metal at room temperature</strong> — gallium melts at 30 °C; used in non-toxic mercury-replacement thermometers, liquid CPU cooling, and dramatic chemistry-class demonstrations.",
          "<strong>Mirror manufacture</strong> — gallium amalgams coat large astronomical mirrors (e.g., Vera Rubin Observatory)."
        ]
      },
      32: { // Germanium
        uses: [
          "<strong>Fiber-optic cables</strong> — germanium oxide raises the refractive index of silica cores; enables long-haul telecom (~30% of all germanium production).",
          "<strong>Infrared optics</strong> — germanium lenses transmit IR for thermal-imaging cameras, military targeting systems, and night-vision scopes.",
          "<strong>Triple-junction solar cells</strong> — germanium substrates host GaAs cells used on satellites and Mars rovers.",
          "<strong>PET-bottle catalysis</strong> — polyester (PET) plastic production uses germanium-dioxide polymerization catalysts.",
          "<strong>Transistor history</strong> — the very first transistor (Bell Labs, 1947) was germanium; silicon displaced it in the 1960s."
        ],
        infographic_caption: "Mendeleev predicted germanium ('eka-silicon') in 1871, before it was discovered in 1886 — a triumphant validation of his periodic system."
      },
      33: { // Arsenic
        uses: [
          "<strong>Gallium-arsenide semiconductors</strong> — high-frequency RF chips for cell phones, radar, and satellite electronics.",
          "<strong>Wood preservation (legacy)</strong> — chromated copper arsenate (CCA) treated lumber dominated outdoor construction until the 2003 phase-out for residential use due to leaching concerns.",
          "<strong>Arsenic-trioxide (ATO) chemotherapy</strong> — first-line treatment for acute promyelocytic leukemia (APL); FDA-approved 2000.",
          "<strong>LED phosphors and laser diodes</strong> — aluminum gallium arsenide (AlGaAs) powers CD/DVD readers and many laser pointers.",
          "<strong>Animal-feed additive (legacy)</strong> — roxarsone and related growth promoters in poultry feed; largely phased out under regulatory pressure."
        ]
      },
      34: { // Selenium
        uses: [
          "<strong>Photoconductor drums</strong> — selenium drums in laser printers and photocopiers convert light into electrical charge; Xerox's foundational technology.",
          "<strong>Glass manufacturing</strong> — selenium decolorizes greenish iron-tinted glass and produces ruby-red art glass.",
          "<strong>CIGS thin-film solar</strong> — copper indium gallium selenide cells; a niche flexible-substrate alternative to silicon.",
          "<strong>Dietary supplement</strong> — essential trace mineral; selenium is a cofactor in glutathione peroxidase, the body's main antioxidant enzyme.",
          "<strong>Anti-dandruff shampoo</strong> — selenium sulfide (Selsun Blue) treats seborrheic dermatitis."
        ]
      },
      35: { // Bromine
        uses: [
          "<strong>Flame retardants</strong> in textiles, electronics, and aircraft interiors — bromine compounds interrupt combustion radical chains.",
          "<strong>Photographic film</strong> — silver bromide was the light-sensitive emulsion in nearly all film and print photography.",
          "<strong>Drilling fluids</strong> — high-density brominated brines stabilize deep oil and gas wells.",
          "<strong>Pharmaceuticals</strong> — sedatives, antihistamines, and a few veterinary drugs."
        ]
      },
      36: { // Krypton
        uses: [
          "<strong>High-performance lighting</strong> — krypton-filled incandescent bulbs run brighter and longer than argon-filled; used in airport runway lights and movie projectors.",
          "<strong>Excimer lasers</strong> — krypton-fluoride (KrF) lasers etched sub-100-nm features in semiconductor lithography (predecessor to ArF DUV).",
          "<strong>Window insulation</strong> — krypton-filled triple-pane windows have lower thermal conductivity than argon; used in passive-house construction.",
          "<strong>Length-standard history</strong> — krypton-86 spectral lines defined the SI meter from 1960 to 1983.",
          "<strong>Krypton-85 leak detection</strong> — radioactive Kr-85 is added to industrial gases to find tiny leaks via Geiger counter."
        ]
      },
      37: { // Rubidium
        uses: [
          "<strong>Atomic clocks</strong> — rubidium clocks are the most cost-effective frequency standards; used in cellular base stations, GPS satellites, and lab instrumentation.",
          "<strong>Photoelectric cells</strong> — rubidium's low ionization energy makes it useful in vacuum-tube photodetectors.",
          "<strong>Specialty glass</strong> — rubidium carbonate produces glasses with excellent fiber-optic clarity.",
          "<strong>Research lasers</strong> — rubidium vapor cells are common in laser cooling, magnetometry, and Bose-Einstein condensate experiments.",
          "<strong>Magnetometers</strong> — Rb-vapor cells detect submarine and geophysical magnetic anomalies."
        ]
      },
      38: { // Strontium
        uses: [
          "<strong>Red fireworks and flares</strong> — strontium nitrate and strontium chloride produce the brightest, purest reds in pyrotechnics.",
          "<strong>Glow-in-the-dark paints</strong> — strontium aluminate (modern non-radioactive replacement for radium) on watch dials and emergency exit signs.",
          "<strong>CRT television glass (legacy)</strong> — strontium oxide blocked X-rays in cathode-ray-tube faceplates for decades.",
          "<strong>Bone-density treatment</strong> — strontium ranelate (Protelos) was prescribed for osteoporosis until safety concerns paused EU sales.",
          "<strong>Sr-90 thermoelectric generators</strong> — powered remote Soviet-era lighthouses and weather stations; lingering legacy hazard."
        ]
      },
      39: { // Yttrium
        uses: [
          "<strong>YAG lasers</strong> — yttrium-aluminum-garnet doped with neodymium (Nd:YAG) is the workhorse industrial laser for cutting, welding, and dermatology.",
          "<strong>Red phosphor in displays</strong> — Y₂O₃:Eu produces the red pixels in CRT TVs and trichromatic fluorescent lamps.",
          "<strong>YBCO superconductors</strong> — yttrium-barium-copper-oxide superconducts above liquid-nitrogen temperature (77 K); used in research magnets and prototype power lines.",
          "<strong>Microwave filters</strong> — yttrium-iron garnet (YIG) tunes RF in radar and satellite communications.",
          "<strong>Cancer therapy</strong> — Y-90 microspheres deliver targeted radiation to liver tumors (TheraSphere, SIR-Spheres)."
        ]
      },
      40: { // Zirconium
        uses: [
          "<strong>Nuclear-fuel cladding</strong> — Zircaloy tubes hold uranium-fuel pellets in light-water reactors; low neutron absorption, corrosion-proof at 300 °C.",
          "<strong>Cubic zirconia gemstones</strong> — synthetic ZrO₂ crystals are the most common diamond simulants in jewelry.",
          "<strong>Dental crowns and implants</strong> — zirconia ceramics offer tooth-colored, biocompatible alternatives to porcelain-fused-to-metal.",
          "<strong>Refractory ceramics</strong> — zirconia lines crucibles and continuous-casting nozzles in steelmaking; thermal-barrier coatings in jet turbines.",
          "<strong>Oxygen sensors</strong> — zirconia-based lambda sensors measure exhaust oxygen in every modern car's emissions control."
        ]
      },
      41: { // Niobium
        uses: [
          "<strong>Superconducting magnets</strong> — niobium-titanium (NbTi) wire is in every MRI scanner, MRI research magnet, and the LHC's 8.3-tesla dipoles.",
          "<strong>Jet-engine alloys</strong> — niobium-stabilized superalloys reduce weight and increase service life in turbine blades.",
          "<strong>Pipeline steel</strong> — micro-alloying with niobium produces high-strength low-alloy (HSLA) steels for oil and gas pipelines.",
          "<strong>Capacitors</strong> — niobium-oxide capacitors are a tantalum substitute in some electronics applications.",
          "<strong>Surgical implants</strong> — niobium and Nb-Zr alloys are MRI-compatible and biocompatible alternatives to stainless steel."
        ]
      },
      42: { // Molybdenum
        uses: [
          "<strong>High-temperature steel</strong> — moly steel maintains hardness at red heat; used in aircraft components, oil-and-gas pipelines, and high-pressure boilers.",
          "<strong>Solid lubricants</strong> — molybdenum disulfide (MoS₂) lubricates vacuum and high-temperature environments where oils fail.",
          "<strong>Hydrocracking and desulfurization catalysts</strong> — molybdenum-based catalysts crack heavy crude into gasoline and remove sulfur in petroleum refining.",
          "<strong>Enzyme cofactor</strong> — nitrogenase (nitrogen fixation in legumes), xanthine oxidase, and sulfite oxidase all depend on molybdenum.",
          "<strong>Mammography X-ray tubes</strong> — molybdenum anodes produce the soft X-rays optimized for breast-tissue imaging."
        ]
      },
      43: { // Technetium
        uses: [
          "<strong>Tc-99m medical imaging</strong> — technetium-99m is the most-used radiotracer in nuclear medicine; injected daily into ~30 million patients per year worldwide for bone, cardiac, and tumor scans.",
          "<strong>Corrosion inhibitor (research)</strong> — pertechnetate ions inhibit steel corrosion at very low concentrations; restricted to closed nuclear systems due to radioactivity.",
          "<strong>Superconductivity research</strong> — pure technetium superconducts below 7.7 K — the highest of any pure element among the non-niobium superconductors.",
          "<strong>Geochemical tracer</strong> — Tc-99 from atmospheric nuclear tests is used to date groundwater and ocean-circulation patterns."
        ],
        infographic_caption: "First synthetic element ever made (1937) — proved that elements with no stable isotopes could still be created in cyclotrons."
      },
      44: { // Ruthenium
        uses: [
          "<strong>Hard-disk drives</strong> — a 3-atom-thick ruthenium spacer (antiferromagnetically coupled media) doubled HDD storage density when introduced in 2001.",
          "<strong>Platinum hardening</strong> — small ruthenium additions strengthen platinum jewelry and electrical contacts.",
          "<strong>Catalysis</strong> — ruthenium catalysts are central to ammonia synthesis, olefin metathesis (2005 Nobel Prize, Grubbs catalyst), and water splitting for green hydrogen.",
          "<strong>Dye-sensitized solar cells</strong> — ruthenium-dye complexes drove the early Grätzel-cell research.",
          "<strong>Resistor manufacturing</strong> — ruthenium oxide is the standard resistive element in surface-mount thick-film resistors."
        ]
      },
      45: { // Rhodium
        uses: [
          "<strong>Catalytic converters</strong> — rhodium reduces NOx emissions to nitrogen and oxygen in three-way catalysts; the most expensive component of every gasoline car's exhaust.",
          "<strong>White-gold plating</strong> — a thin rhodium layer gives white-gold jewelry its bright finish and prevents tarnishing.",
          "<strong>Optical and laboratory equipment</strong> — rhodium-plated mirrors for searchlights and crucibles for high-purity glass.",
          "<strong>Hydroformylation catalysis</strong> — rhodium catalysts produce billions of pounds of aldehydes used in plasticizers and surfactants annually.",
          "<strong>Investment commodity</strong> — rhodium spot prices have spiked above $25,000/oz multiple times — the most volatile precious metal."
        ]
      },
      46: { // Palladium
        uses: [
          "<strong>Catalytic converters</strong> — palladium oxidizes hydrocarbons and CO in gasoline-car exhaust; supplanting platinum in three-way catalysts since the 2010s.",
          "<strong>Hydrogen storage and purification</strong> — palladium absorbs up to 900 times its volume in hydrogen; basis of laboratory hydrogen purifiers and prototype storage tanks.",
          "<strong>Cross-coupling catalysts</strong> — palladium-catalyzed Suzuki, Heck, and Negishi reactions (2010 Nobel Prize) build most modern pharmaceutical molecules.",
          "<strong>Dental restorations</strong> — palladium-silver alloys for crowns and bridges; biocompatible and stronger than gold alloys.",
          "<strong>Multilayer ceramic capacitors</strong> — palladium electrodes are in every smartphone and computer."
        ]
      },
      47: { // Silver
        uses: [
          "<strong>Highest electrical conductivity</strong> of any metal — used in printed-circuit-board contacts, RF connectors, and high-end audio cables.",
          "<strong>Antibacterial coatings</strong> — silver nanoparticles in wound dressings, water filters, and athletic clothing.",
          "<strong>Photovoltaic finger contacts</strong> — silver paste collects current on the front face of crystalline silicon solar cells.",
          "<strong>Coinage, jewelry, and cutlery</strong> — sterling silver (92.5% Ag, 7.5% Cu) has been the standard for fine tableware for centuries."
        ]
      },
      48: { // Cadmium
        uses: [
          "<strong>NiCd batteries (legacy)</strong> — nickel-cadmium rechargeables powered consumer electronics for decades; phased out under the EU's RoHS directive.",
          "<strong>Cadmium pigments</strong> — cadmium yellow, orange, and red are the most lightfast warm pigments available; restricted but still used by professional artists.",
          "<strong>CdTe thin-film solar cells</strong> — First Solar manufactures gigawatts of cadmium-telluride panels annually; lower-cost alternative to silicon.",
          "<strong>Quantum dots</strong> — CdSe and CdS nanocrystals tune fluorescence by particle size; used in QLED displays and biological imaging.",
          "<strong>Aerospace electroplating</strong> — cadmium plating on aerospace fasteners resists salt-spray corrosion; in long-term phaseout."
        ]
      },
      49: { // Indium
        uses: [
          "<strong>Indium-tin oxide (ITO)</strong> — the transparent conductive coating on every smartphone touchscreen, LCD/OLED display, and most photovoltaic cells.",
          "<strong>Low-temperature solders</strong> — indium melts at 156 °C; used in low-temperature electronic assembly and cryogenic seals.",
          "<strong>Semiconductor doping</strong> — indium-gallium-nitride (InGaN) drives blue/UV LEDs; indium-phosphide (InP) for high-speed RF chips.",
          "<strong>Mirror coatings</strong> — indium produces bright, durable mirrors with exceptional adhesion to glass.",
          "<strong>Reactor control rods</strong> — silver-indium-cadmium alloys absorb neutrons in pressurized-water reactors."
        ]
      },
      50: { // Tin
        uses: [
          "<strong>Solder</strong> — tin-lead and now lead-free Sn-Ag-Cu solders join nearly every electronic component; tens of millions of tons consumed annually.",
          "<strong>Tinplate cans</strong> — a thin tin coating on steel cans resists food acids; the food-can industry consumes ~16% of global tin.",
          "<strong>Bronze</strong> — copper-tin alloy launched the Bronze Age (~3300 BCE); still used for bearings, ship propellers, and bells.",
          "<strong>Float-glass production</strong> — modern flat glass is poured onto a bath of molten tin (Pilkington process); responsible for the perfect flatness of windows and screens.",
          "<strong>Organotin compounds</strong> — PVC heat stabilizers, biocides, and historical antifouling boat paints (now largely restricted)."
        ]
      },
      51: { // Antimony
        uses: [
          "<strong>Flame retardants</strong> — antimony trioxide synergizes with brominated flame retardants in plastics, electronics, and aircraft interior materials.",
          "<strong>Lead-acid batteries</strong> — antimony hardens lead grid plates in conventional car starter batteries.",
          "<strong>Babbitt-metal bearings</strong> — Sn-Sb-Cu alloy is the standard material for plain bearings in steam turbines, large engines, and pumps.",
          "<strong>Pewter and type metal</strong> — antimony hardens tin-based alloys; was the standard composition of letterpress printing type for 500 years.",
          "<strong>Semiconductor doping</strong> — antimony is an n-type dopant for silicon and a constituent of infrared-detector InSb."
        ]
      },
      52: { // Tellurium
        uses: [
          "<strong>CdTe thin-film solar panels</strong> — cadmium-telluride is the second-most-deployed solar-cell technology after crystalline silicon; First Solar's specialty.",
          "<strong>Phase-change optical media</strong> — tellurium alloys (GeSbTe) are the rewritable layer in DVDs, Blu-rays, and phase-change RAM (PCM).",
          "<strong>Steel and copper alloying</strong> — small additions of tellurium improve machinability of free-cutting steels and copper.",
          "<strong>Vulcanization</strong> — tellurium accelerates rubber curing; produces heat- and abrasion-resistant tires and conveyor belts.",
          "<strong>Thermoelectric materials</strong> — bismuth-telluride generators convert heat to electricity in spacecraft RTGs and Peltier coolers."
        ]
      },
      53: { // Iodine
        uses: [
          "<strong>Thyroid hormone synthesis</strong> — every thyroxine (T4) and triiodothyronine (T3) molecule contains iodine; deficiency causes goiter and developmental problems.",
          "<strong>Topical antiseptics</strong> — povidone-iodine for surgical scrubs and wound disinfection.",
          "<strong>Iodized salt</strong> — adding KI or KIO₃ to table salt eliminated endemic goiter across most of the world in the 20th century.",
          "<strong>Photographic emulsions and X-ray contrast agents</strong> — iodinated compounds make blood vessels and organs visible in CT scans."
        ]
      },
      54: { // Xenon
        uses: [
          "<strong>Ion thrusters</strong> — xenon-plasma thrusters propel SMART-1, Dawn, BepiColombo, and most modern deep-space probes; ~10× more fuel-efficient than chemical rockets.",
          "<strong>High-intensity lighting</strong> — xenon arc lamps in IMAX projectors, automotive HID headlights, searchlights, and 35-mm cinema projectors.",
          "<strong>Anesthesia</strong> — xenon is a potent, non-addictive general anesthetic with rapid recovery; expensive and used mainly in research and high-end veterinary medicine.",
          "<strong>Excimer lasers</strong> — xenon-fluoride and xenon-chloride lasers are used in eye surgery and photolithography.",
          "<strong>Dark-matter detectors</strong> — multi-tonne liquid-xenon time-projection chambers (XENONnT, LUX-ZEPLIN) are the world's most sensitive direct dark-matter searches."
        ]
      },
      55: { // Caesium
        uses: [
          "<strong>SI second definition</strong> — the second is defined as 9,192,631,770 oscillations of the Cs-133 hyperfine transition; cesium clocks are the world's primary frequency standard.",
          "<strong>Atomic clocks</strong> — beam and fountain cesium clocks underpin GPS, telecom networks, and the international time scale (UTC).",
          "<strong>Oil-drilling fluids</strong> — high-density cesium-formate brines stabilize deep oil and gas wells without damaging reservoirs.",
          "<strong>Photoelectric cells</strong> — cesium's low work function makes it useful in night-vision tubes and image intensifiers.",
          "<strong>Cs-137 medical and industrial sources</strong> — gamma irradiation for blood sterilization, food preservation, and density measurement (legacy use; phaseout underway)."
        ]
      },
      56: { // Barium
        uses: [
          "<strong>Medical imaging contrast</strong> — barium-sulfate suspensions outline the GI tract in fluoroscopic exams; opaque to X-rays and biologically inert.",
          "<strong>Drilling muds</strong> — barite (BaSO₄) is the densest common mineral and the standard weighting agent in oil and gas drilling fluids.",
          "<strong>Glass and ceramics</strong> — barium oxide raises refractive index in optical glass; CRT-faceplate glass blocked X-rays for decades.",
          "<strong>Pyrotechnics</strong> — barium nitrate and barium chlorate produce green flames in fireworks and signal flares.",
          "<strong>Permanent magnets</strong> — barium ferrite is used in motors, speakers, and refrigerator magnets."
        ]
      },
      57: { // Lanthanum
        uses: [
          "<strong>Camera and binocular lenses</strong> — lanthanum oxide raises refractive index without dispersion; used in high-end Leica, Nikon, and Canon optics.",
          "<strong>Nickel-metal-hydride (NiMH) batteries</strong> — lanthanum is in the AB₅ alloy hydrogen-storage anodes of every Toyota Prius and other hybrid.",
          "<strong>Petroleum cracking catalysts</strong> — fluid catalytic cracking (FCC) zeolites contain ~1% lanthanum; consumes most global lanthanum production.",
          "<strong>Carbon-arc lights (legacy)</strong> — lanthanum-cored carbon rods produced intense white light for film projection.",
          "<strong>Pool & aquarium phosphate removal</strong> — lanthanum salts bind phosphate ions, preventing algae blooms."
        ]
      },
      58: { // Cerium
        uses: [
          "<strong>Glass polishing</strong> — cerium oxide is the gold-standard polishing compound for camera lenses, telescope optics, and smartphone screens.",
          "<strong>Self-cleaning ovens</strong> — cerium oxide catalyzes oxidation of food residues at lower temperatures than required for pyrolytic cleaning.",
          "<strong>Mischmetal lighter flints</strong> — Ce-La-Nd alloy sparks readily under friction; the active material in every disposable lighter wheel.",
          "<strong>Catalytic converters</strong> — cerium oxide serves as an oxygen-buffer in three-way exhaust catalysts.",
          "<strong>Welder's goggles</strong> — cerium-doped glass blocks UV and IR while staying optically clear."
        ]
      },
      59: { // Praseodymium
        uses: [
          "<strong>Welder's and glassblower's goggles</strong> — praseodymium glass selectively absorbs the bright sodium-yellow light of molten glass and welding arcs.",
          "<strong>Neodymium-magnet additive</strong> — Pr substitutes for Nd in some NdFeB magnets, lowering cost and improving high-temperature performance.",
          "<strong>Aircraft-engine alloys</strong> — praseodymium strengthens magnesium for the lightest aerospace alloys.",
          "<strong>Studio carbon-arc lights</strong> — Pr-Nd cores produced high-intensity light formerly used in film production.",
          "<strong>Yellow ceramic pigments</strong> — Pr-doped zircon yellow is a stable high-temperature ceramic colorant."
        ]
      },
      60: { // Neodymium
        uses: [
          "<strong>NdFeB permanent magnets</strong> — the world's strongest commercial magnets; in every wind turbine, EV motor, hard-disk drive, headphone, and MRI scanner.",
          "<strong>Nd:YAG industrial lasers</strong> — neodymium-doped yttrium-aluminum-garnet is the workhorse cutting and welding laser at 1064 nm.",
          "<strong>Microphone capsules</strong> — neodymium magnets gave a generation of high-fidelity recording microphones their compact size.",
          "<strong>Glass coloring</strong> — Nd-doped glass appears purple but shifts to blue under fluorescent light; used in art glass and photographic filters.",
          "<strong>Speakers and earbuds</strong> — neodymium magnets enable the tiny-but-loud transducers in wireless earbuds and high-end audio."
        ],
        infographic_caption: "Neodymium magnets are the strongest commercial permanent magnets ever made — they enabled the modern wind turbine and the EV revolution."
      },
      61: { // Promethium
        uses: [
          "<strong>Pacemaker batteries (historical)</strong> — Pm-147 betavoltaic cells powered some early implantable pacemakers; replaced by lithium-iodide.",
          "<strong>Glow-in-the-dark dial paint (historical)</strong> — Pm-147 plus zinc sulfide produced safer dial illumination than radium; phased out for tritium and strontium aluminate.",
          "<strong>Beta-source thickness gauges</strong> — Pm-147 measures sheet thickness in paper and plastic-film manufacturing.",
          "<strong>Research only for most uses</strong> — promethium has no stable isotopes; less than a kilogram exists worldwide at any time."
        ]
      },
      62: { // Samarium
        uses: [
          "<strong>SmCo permanent magnets</strong> — samarium-cobalt magnets retain magnetization above 300 °C; used in jet-engine generators, military radar, and specialty motors where neodymium fails.",
          "<strong>Reactor control rods</strong> — samarium isotopes absorb thermal neutrons.",
          "<strong>Carbon-arc lighting</strong> — samarium-doped electrodes produced intense white light in film projection.",
          "<strong>Cancer therapy</strong> — Sm-153 lexidronam (Quadramet) treats bone-metastasis pain in prostate and breast cancer.",
          "<strong>Synthetic-organic catalysis</strong> — samarium iodide (SmI₂, Kagan's reagent) is a versatile single-electron reductant in pharmaceutical chemistry."
        ]
      },
      63: { // Europium
        uses: [
          "<strong>Red phosphor in displays</strong> — europium(III)-activated phosphors produce the red pixels in CRT TVs, fluorescent lamps, and many LED displays.",
          "<strong>Blue phosphor</strong> — europium(II)-activated barium-magnesium aluminate emits blue in trichromatic fluorescent lighting.",
          "<strong>Euro banknote security</strong> — europium-based fluorescent inks glow under UV; standard authentication feature on every euro bill since 2002.",
          "<strong>Anti-counterfeiting tags</strong> — europium-based markers verify currency, passports, and high-value goods.",
          "<strong>Reactor control</strong> — europium absorbs neutrons; experimental in some reactor designs."
        ]
      },
      64: { // Gadolinium
        uses: [
          "<strong>MRI contrast agents</strong> — gadolinium chelates (Gd-DTPA, Gd-DOTA) are injected into ~30 million MRI exams per year; brighten blood vessels and tumors.",
          "<strong>Neutron capture</strong> — gadolinium-157 has the highest thermal-neutron capture cross-section of any stable nuclide; used in reactor control rods and shielding.",
          "<strong>Magnetocaloric refrigeration</strong> — gadolinium heats up when magnetized; emerging cryocooler technology with no compressor.",
          "<strong>YIG and GGG crystals</strong> — gadolinium-gallium-garnet is the standard substrate for magnetic-bubble memory and microwave devices.",
          "<strong>Submarine reactor control</strong> — gadolinium-burnable poison rods control reactivity in nuclear submarines."
        ]
      },
      65: { // Terbium
        uses: [
          "<strong>Green phosphors</strong> — terbium-activated phosphors produce the green pixels in trichromatic fluorescent lamps and display technology.",
          "<strong>Magnetostrictive Terfenol-D</strong> — TbDyFe alloy expands and contracts in magnetic fields; used in sonar transducers, precision actuators, and Naval research.",
          "<strong>Solid-state laser materials</strong> — terbium-doped sodium borate is a long-lifetime green-emitting laser medium.",
          "<strong>Magneto-optical storage</strong> — terbium-iron-cobalt films were the recording layer in MO disks.",
          "<strong>X-ray scintillators</strong> — terbium-doped detectors in medical imaging plates."
        ]
      },
      66: { // Dysprosium
        uses: [
          "<strong>EV-motor magnets</strong> — dysprosium added to NdFeB magnets prevents demagnetization at high temperatures; critical for Tesla, Toyota, and most EV traction motors.",
          "<strong>Wind-turbine generators</strong> — direct-drive permanent-magnet generators in offshore turbines depend on Dy-stabilized magnets.",
          "<strong>Reactor control rods</strong> — dysprosium-titanate absorbs neutrons in some PWR control assemblies.",
          "<strong>Magnetostrictive sensors</strong> — Terfenol-D actuators in precision positioning and Naval sonar.",
          "<strong>Hard-disk drives</strong> — dysprosium-iron alloys in heat-assisted magnetic-recording (HAMR) media."
        ]
      },
      67: { // Holmium
        uses: [
          "<strong>Ho:YAG medical lasers</strong> — high-power holmium lasers fragment kidney stones (lithotripsy), cut soft tissue, and treat enlarged prostates (HoLEP procedure).",
          "<strong>Highest magnetic moment</strong> — holmium has the strongest known magnetic moment of any element; used as flux concentrators in research magnets.",
          "<strong>Reactor control alloys</strong> — holmium absorbs neutrons; alloyed in specialty control rods.",
          "<strong>Glass coloring</strong> — holmium gives glass a distinctive yellow-pink tint; used in spectrophotometer calibration standards.",
          "<strong>Microwave isolators</strong> — holmium-iron garnet (HoIG) is a magneto-optical material in microwave isolators."
        ]
      },
      68: { // Erbium
        uses: [
          "<strong>Erbium-doped fiber amplifiers (EDFAs)</strong> — every long-haul fiber-optic network on Earth uses EDFAs to boost 1550-nm signals; the backbone of intercontinental internet cables.",
          "<strong>Er:YAG dermatology lasers</strong> — erbium lasers at 2940 nm are absorbed strongly by water; used in skin resurfacing, scar treatment, and dental drilling.",
          "<strong>Reactor fuel</strong> — erbium oxide is mixed into uranium-dioxide fuel as a burnable poison in some PWR designs.",
          "<strong>Pink colorant</strong> — erbium oxide produces pink in glass and ceramic glazes.",
          "<strong>Emerging fusion alloys</strong> — vanadium-erbium and similar alloys are being investigated for fusion-reactor structural materials."
        ],
        infographic_caption: "Without erbium-doped fiber amplifiers, intercontinental fiber-optic internet wouldn't exist — every transatlantic data packet has been amplified by erbium."
      },
      69: { // Thulium
        uses: [
          "<strong>Portable medical lasers</strong> — Tm:YAG and Tm-doped fiber lasers at 2 µm are used in urology and soft-tissue surgery.",
          "<strong>Field-portable X-ray sources</strong> — Tm-170 isotope provides X-rays for industrial radiography in locations without grid power.",
          "<strong>Banknote security</strong> — thulium-based phosphors glow blue under UV; one of several anti-counterfeiting markers.",
          "<strong>Specialty ferrite magnets</strong> — thulium additions enhance some ceramic magnetic materials.",
          "<strong>Research only for most isotopes</strong> — rarest stable lanthanide; minute global production."
        ]
      },
      70: { // Ytterbium
        uses: [
          "<strong>Optical atomic clocks</strong> — Yb-171 lattice clocks are the most accurate timekeepers ever built; uncertainty ~1 part in 10¹⁸ — better than cesium.",
          "<strong>Yb-doped fiber lasers</strong> — high-power fiber lasers at 1030 nm dominate industrial cutting and welding (the IPG Photonics platform).",
          "<strong>Stress gauges</strong> — ytterbium's electrical resistance is highly pressure-sensitive; used in deep-Earth and shock-physics measurements.",
          "<strong>Cancer brachytherapy</strong> — Yb-169 seeds for some solid-tumor treatments.",
          "<strong>Stainless-steel additive</strong> — small Yb additions improve grain refinement in specialty alloys."
        ]
      },
      71: { // Lutetium
        uses: [
          "<strong>PET scanner detectors</strong> — lutetium-oxyorthosilicate (LSO/LYSO) is the standard scintillator crystal in modern positron-emission-tomography scanners.",
          "<strong>Lu-177 targeted radiotherapy</strong> — Lutathera (Lu-177 dotatate) treats neuroendocrine tumors; Pluvicto treats metastatic prostate cancer (FDA 2022).",
          "<strong>Petroleum cracking catalysts</strong> — lutetium-zeolite catalysts in specialty refining streams.",
          "<strong>Specialty optics</strong> — densest, hardest, and highest-melting lanthanide; research-grade single crystals.",
          "<strong>Geochemical age dating</strong> — Lu-Hf radioactive dating system dates ancient zircons and lunar samples."
        ]
      },
      72: { // Hafnium
        uses: [
          "<strong>Submarine-reactor control rods</strong> — hafnium's high neutron absorption and corrosion resistance to hot water make it the standard for naval pressurized-water reactors.",
          "<strong>Sub-45-nm CMOS gate dielectrics</strong> — hafnium oxide (high-κ dielectric) replaced silicon dioxide as the transistor gate insulator starting at the 45-nm node (Intel, 2007).",
          "<strong>Plasma-cutting electrodes</strong> — hafnium emits electrons readily under thermal stress; used in high-power plasma torches.",
          "<strong>Superalloys</strong> — small hafnium additions to nickel- and cobalt-based superalloys improve high-temperature creep resistance in turbine blades.",
          "<strong>Refractory ceramics</strong> — hafnium carbide and hafnium nitride have among the highest melting points of any compound (~3900 °C)."
        ]
      },
      73: { // Tantalum
        uses: [
          "<strong>Smartphone capacitors</strong> — tantalum capacitors are densely packed in every iPhone, Android, laptop, and pacemaker; tantalum's volumetric efficiency is unmatched.",
          "<strong>Surgical implants</strong> — biocompatible and corrosion-proof; used in cranial mesh, hip replacements, and vascular stents.",
          "<strong>Chemical-reactor linings</strong> — tantalum vessels handle hot acids that would dissolve any other metal except platinum.",
          "<strong>Aerospace alloys</strong> — Ta-W and Ta-Hf alloys for rocket-nozzle tips and high-temperature aerospace structures.",
          "<strong>Cutting-tool coatings</strong> — tantalum carbide enhances wear resistance of cemented-carbide drill bits."
        ]
      },
      74: { // Tungsten
        uses: [
          "<strong>Incandescent-bulb filaments</strong> — tungsten's 3422 °C melting point made it the universal light-bulb filament for over a century.",
          "<strong>Cutting-tool tips</strong> — tungsten carbide (WC) is the dominant cutting, drilling, and machining material; harder than every metal except diamond and a few exotics.",
          "<strong>X-ray tube targets</strong> — every medical and dental X-ray tube uses a tungsten target struck by accelerated electrons.",
          "<strong>Kinetic-energy penetrators</strong> — tungsten and depleted-uranium long-rod penetrators in tank ammunition (Sabot rounds).",
          "<strong>Counterweights and radiation shielding</strong> — tungsten's density (19.3 g/cm³) makes it ideal where compact mass is needed."
        ]
      },
      75: { // Rhenium
        uses: [
          "<strong>Jet-engine turbine alloys</strong> — single-crystal nickel superalloys (CMSX-4, René N6) contain 3–6% rhenium for creep resistance; used in F-22, Boeing 787, and most modern jet engines.",
          "<strong>Petroleum-reforming catalysts</strong> — Pt-Re bimetallic catalysts reform naphtha into high-octane gasoline; consumes ~20% of global rhenium.",
          "<strong>High-temperature thermocouples</strong> — W-Re thermocouples measure temperatures up to 2300 °C in furnaces and rocket engines.",
          "<strong>Mass-spectrometry filaments</strong> — rhenium ribbon filaments are the standard ion source in isotope-ratio mass spectrometers.",
          "<strong>Mining co-product</strong> — rhenium has no ore of its own; recovered as a byproduct of molybdenum mining."
        ]
      },
      76: { // Osmium
        uses: [
          "<strong>Fountain-pen tips</strong> — osmium-iridium alloy tips on the highest-end fountain-pen nibs resist wear for decades.",
          "<strong>Electrical contacts</strong> — osmium-iridium contacts in instrument switches and small-arms firing pins.",
          "<strong>Phonograph styli (legacy)</strong> — osmium tips on classical phonograph needles before diamond replaced them.",
          "<strong>Hardness reference</strong> — pure osmium is among the hardest known metals at ambient conditions; some osmium alloys exceed diamond hardness.",
          "<strong>Histological staining</strong> — osmium tetroxide fixes fatty tissue for electron microscopy; one of the most-cited stains in cell biology."
        ]
      },
      77: { // Iridium
        uses: [
          "<strong>Spark-plug tips</strong> — iridium-tipped spark plugs last 100,000+ miles in modern engines; resistant to erosion at 700+ °C.",
          "<strong>High-temperature crucibles</strong> — iridium crucibles grow YAG and other oxide single crystals above 2000 °C.",
          "<strong>K-Pg boundary marker</strong> — the global iridium anomaly at the 66-Ma layer is the foundational evidence for the Chicxulub asteroid impact that ended the dinosaurs.",
          "<strong>Pacemaker electrodes</strong> — iridium-oxide coatings on pacemaker leads are biocompatible and electrochemically stable.",
          "<strong>Compass bearings (historical)</strong> — Pt-Ir alloy pivot points for the most precise marine and surveying instruments."
        ]
      },
      78: { // Platinum
        uses: [
          "<strong>Catalytic converters</strong> — platinum oxidizes hydrocarbons and CO in diesel exhaust; the largest single industrial use of the metal.",
          "<strong>Jewelry</strong> — wedding rings, watches, and high-end jewelry; platinum is denser, harder, and more durable than gold.",
          "<strong>Cisplatin chemotherapy</strong> — cis-diamminedichloroplatinum(II) treats testicular, ovarian, and several other cancers; one of the most-prescribed chemotherapy drugs in oncology.",
          "<strong>Laboratory crucibles and electrodes</strong> — platinum's chemical inertness makes it standard for high-temperature gravimetric analysis and electrochemistry.",
          "<strong>Hydrogen fuel-cell electrodes</strong> — platinum nanoparticles catalyze H₂ oxidation and O₂ reduction in PEM fuel cells; cost is the main barrier to widespread adoption."
        ]
      },
      79: { // Gold
        uses: [
          "<strong>Reserve currency</strong> — central banks hold ~35,000 tonnes of gold as monetary backing; gold has been a store of value across every culture in recorded history.",
          "<strong>Electronics</strong> — gold-plated connector contacts in CPUs, RAM, and PCB edge fingers resist corrosion forever.",
          "<strong>Dentistry and medical implants</strong> — biocompatible, non-corroding crowns and inlays.",
          "<strong>Jewelry</strong> — typically alloyed with copper, silver, or palladium for hardness; karat numbers (24K = pure) measure gold mass fraction."
        ],
        infographic_caption: "Relativistic effects on gold's 6s electrons give it its yellow color and its remarkable chemical inertness."
      },
      80: { // Mercury
        uses: [
          "<strong>Compact fluorescent lamps and HID lighting</strong> — mercury vapor emits UV that excites phosphor coatings; being phased out in favor of LED.",
          "<strong>Switches and tilt sensors</strong> — historical use; banned in most consumer products since the 2000s.",
          "<strong>Chlor-alkali production</strong> — the mercury-cell process is being retired worldwide due to environmental contamination.",
          "<strong>Gold mining (legacy)</strong> — amalgamation extracts gold from ore; still practiced informally despite severe ecological damage."
        ],
        infographic_caption: "The only metal liquid at room temperature — and one of the most environmentally persistent toxins on the table."
      },
      81: { // Thallium
        uses: [
          "<strong>Tl-201 cardiac stress imaging</strong> — thallium-201 chloride is injected during cardiac stress tests to image myocardial perfusion; standard nuclear cardiology procedure.",
          "<strong>Low-temperature thermometers</strong> — mercury-thallium amalgam stays liquid down to −60 °C; used in Arctic and lab cryogenics.",
          "<strong>Infrared optics</strong> — thallium-bromide-iodide (KRS-5) lenses transmit far-infrared wavelengths in chemistry FTIR spectrometers.",
          "<strong>High-temperature superconductors</strong> — thallium-based cuprates (Tl-Ba-Ca-Cu-O) hold some of the highest known superconducting transition temperatures (~127 K).",
          "<strong>Rat poison and pesticides (banned)</strong> — thallium sulfate killed rodents and ants until banned in most countries due to extreme human toxicity."
        ]
      },
      82: { // Lead
        uses: [
          "<strong>Lead-acid batteries</strong> — every internal-combustion-engine starter battery; cheap, recyclable, and the dominant chemistry for stationary backup power.",
          "<strong>Radiation shielding</strong> — lead aprons in dental and medical X-ray rooms, gamma-spectroscopy enclosures, and reactor containment.",
          "<strong>Solder (legacy)</strong> — Sn-Pb solder dominated electronics until RoHS forced lead-free alternatives in 2006.",
          "<strong>Ammunition and fishing weights</strong> — lead's density makes it ideal for projectiles; tungsten and bismuth are increasingly substituted for environmental reasons."
        ]
      },
      83: { // Bismuth
        uses: [
          "<strong>Pepto-Bismol</strong> — bismuth subsalicylate is the active ingredient in the iconic pink antacid; treats heartburn, nausea, and traveler's diarrhea.",
          "<strong>Lead-free solder</strong> — Sn-Bi solders replace lead in plumbing, food-contact equipment, and consumer electronics under RoHS regulations.",
          "<strong>Low-melt safety alloys</strong> — Wood's metal (Bi-Pb-Sn-Cd) melts at 70 °C; used in fire-sprinkler fusible plugs and electrical fuses.",
          "<strong>Cosmetic pearlescents</strong> — bismuth oxychloride is the iridescent shimmer in lipstick, nail polish, and shampoo.",
          "<strong>Iridescent crystals</strong> — bismuth's stair-step hopper crystals are popular with mineral collectors; a chemistry-class staple."
        ]
      },
      84: { // Polonium
        uses: [
          "<strong>Static eliminators</strong> — Po-210 alpha sources neutralize electrostatic charges in textile mills, paper plants, and photographic-film production.",
          "<strong>RTG heat sources (decommissioned)</strong> — Po-210 powered Soviet Lunokhod lunar rovers and some early space missions before being phased out for Pu-238.",
          "<strong>Brush ionizers</strong> — Po-210 brushes remove dust from camera lenses and laboratory instruments.",
          "<strong>Historical assassinations</strong> — Po-210's identification in the 2006 Litvinenko poisoning brought worldwide attention to the isotope's lethality.",
          "<strong>Research only for most uses</strong> — extreme radioactivity and short half-life (138 days) limit applications."
        ]
      },
      85: { // Astatine
        uses: [
          "<strong>Targeted alpha-particle radiotherapy (research/clinical)</strong> — At-211 is being clinically investigated for glioblastoma, leukemia, and metastatic cancers; alpha range matches a single cell.",
          "<strong>No commercial use</strong> — astatine is the rarest naturally occurring element; less than 30 grams exist on Earth at any moment.",
          "<strong>Tracer-level chemistry research</strong> — chemistry studied via cyclotron-produced samples.",
          "<strong>Halogen-homolog studies</strong> — astatine completes Group 17; teaches periodic trends in electronegativity and bond energies."
        ]
      },
      86: { // Radon
        uses: [
          "<strong>Public-health hazard, not utility</strong> — radon is the second-leading cause of lung cancer in the US (after smoking); EPA-recommended action level is 4 pCi/L.",
          "<strong>Geological prospecting</strong> — soil-gas radon measurements help locate uranium deposits and active fault zones.",
          "<strong>Earthquake-precursor research</strong> — radon spikes in groundwater have sometimes been correlated with seismic activity.",
          "<strong>Historical 'radon spas'</strong> — early-20th-century health resorts in Bad Gastein, Austria, claimed therapeutic radon-water benefits; largely discredited.",
          "<strong>Mitigation industry</strong> — radon-mitigation contractors install sub-slab depressurization in millions of homes annually."
        ]
      },
      87: { // Francium
        uses: [
          "<strong>Research only</strong> — francium has no commercial use; only minutes-long isotopes exist and total Earth-crust inventory is estimated at less than 30 grams.",
          "<strong>Atomic-physics research</strong> — laser-trapped francium atoms test parity violation in atomic structure with high precision.",
          "<strong>Periodic-table teaching</strong> — francium's existence completes Group 1 and demonstrates the limit of natural alkali-metal chemistry."
        ]
      },
      88: { // Radium
        uses: [
          "<strong>Glow-in-the-dark watch dials (banned)</strong> — radium-226 luminous paint was used until the 1960s; the 'Radium Girls' watch-painting scandal exposed lethal occupational poisoning.",
          "<strong>Cancer brachytherapy (replaced)</strong> — radium needles were the first targeted radiation cancer treatment (~1900s–1950s); replaced by Co-60 and Cs-137.",
          "<strong>Ra-223 (Xofigo) prostate cancer treatment</strong> — modern targeted alpha therapy for bone-metastatic prostate cancer; FDA-approved 2013.",
          "<strong>Quack medicine (historical)</strong> — radium-water tonics like Radithor caused fatalities in the 1920s–30s; spurred the FDA's modern drug-safety regime."
        ]
      },
      89: { // Actinium
        uses: [
          "<strong>Ac-225 targeted alpha therapy</strong> — actinium-225 conjugated to tumor-targeting molecules treats metastatic prostate cancer, neuroendocrine tumors, and acute myeloid leukemia; one of the hottest oncology frontiers.",
          "<strong>Research neutron sources</strong> — Ac-Be mixtures emit neutrons via (α,n) reactions.",
          "<strong>Periodic-table teaching</strong> — first actinide; defines the f-block transition row of period 7.",
          "<strong>Severely supply-limited</strong> — global Ac-225 production is just a few grams per year; major bottleneck to expanding cancer trials."
        ]
      },
      90: { // Thorium
        uses: [
          "<strong>Molten-salt reactor fuel (proposed)</strong> — thorium-232 is fertile (breeds U-233); proposed as fuel for next-generation small modular reactors with reduced proliferation risk.",
          "<strong>TIG welding electrodes</strong> — thoriated tungsten electrodes (2% ThO₂) ignite easily and last long; being replaced by lanthanated and ceriated alternatives for safety.",
          "<strong>Gas-mantle lighting (legacy)</strong> — Welsbach mantles used thorium dioxide in lantern lamps for 100+ years; phased out for safety.",
          "<strong>Aerospace alloys (legacy)</strong> — Mg-Th alloys for high-temperature aerospace structures; mostly replaced.",
          "<strong>High-refractive-index optics (legacy)</strong> — thoriated camera lenses replaced by lanthanum and barium oxides."
        ]
      },
      91: { // Protactinium
        uses: [
          "<strong>Research only</strong> — protactinium has no commercial use; among the rarest and most expensive naturally occurring elements (~$280,000 per gram in the 1960s).",
          "<strong>Pa-Th age-dating</strong> — Pa-231/Th-230 ratios date marine sediments and corals over 175,000-year timescales.",
          "<strong>Nuclear research</strong> — Pa-231 is a fission product in some research reactors; trace quantities recovered for radiochemistry."
        ]
      },
      92: { // Uranium
        uses: [
          "<strong>Nuclear reactor fuel</strong> — fission of U-235 generates ~10% of global electricity (and ~70% in France).",
          "<strong>Nuclear weapons</strong> — both the 'gun-type' Hiroshima device and modern thermonuclear secondaries depend on highly enriched uranium.",
          "<strong>Depleted uranium</strong> in armor-piercing munitions and tank armor — its density (~19 g/cm³) and self-sharpening behavior make it a uniquely effective kinetic penetrator.",
          "<strong>Radioisotope dating</strong> — U-238 → Pb-206 decay (4.5 Gyr half-life) anchors most measurements of Earth's age and the geologic time scale."
        ],
        infographic_caption: "Uranium is the heaviest naturally occurring element on Earth — and the only one whose isotopes will sustain a chain reaction."
      },
      93: { // Neptunium
        uses: [
          "<strong>First synthetic transuranic element</strong> — synthesized 1940 (McMillan & Abelson, Berkeley); named for Neptune, the planet beyond Uranus.",
          "<strong>Np-237 neutron detectors</strong> — large-area neutron-flux monitors in nuclear research facilities.",
          "<strong>Research RTG heat-source feedstock</strong> — Np-237 produces Pu-238 via neutron capture; one of the few practical sources of RTG fuel.",
          "<strong>Nuclear weapons research</strong> — Np-237's small critical mass has been studied as an alternate weapons material (declassified).",
          "<strong>Spent-fuel waste component</strong> — long-lived Np isotopes are a major reason high-level nuclear waste needs 100,000-year geological isolation."
        ]
      },
      94: { // Plutonium
        uses: [
          "<strong>Nuclear weapons</strong> — Pu-239 was the fissile material in the Trinity test and the Nagasaki bomb; remains the standard for modern warhead pits.",
          "<strong>Radioisotope thermoelectric generators (RTGs)</strong> — Pu-238 powers Voyager 1 & 2, the Mars rovers, New Horizons, and most other deep-space probes that can't rely on solar.",
          "<strong>Mixed-oxide (MOX) reactor fuel</strong> — recycled plutonium from spent nuclear fuel is fissioned in a small fraction of European and Japanese reactors.",
          "<strong>Cardiac pacemakers (historical)</strong> — Pu-238 RTGs powered ~150 implants in the 1970s; replaced by lithium-iodide cells."
        ]
      },
      95: { // Americium
        uses: [
          "<strong>Smoke detectors</strong> — Am-241 ionization chambers in residential smoke alarms; about 1 microcurie per detector, billions sold worldwide.",
          "<strong>Industrial gauges</strong> — Am-Be neutron sources for moisture and density measurement in oil drilling, road construction, and steel mills.",
          "<strong>Glass-thickness gauges</strong> — Am-241 alpha sources measure paper, plastic, and metal sheet thickness inline.",
          "<strong>Future RTG fuel</strong> — Am-241 is being researched as a long-lived heat source for European spacecraft RTGs (~432-year half-life vs Pu-238's 88 years).",
          "<strong>Heavy-element synthesis</strong> — americium has been the starting target for synthesizing berkelium and californium."
        ]
      },
      96: { // Curium
        uses: [
          "<strong>Mars-rover X-ray spectrometers</strong> — Cm-244 alpha-particle X-ray spectrometers (APXS) on Sojourner, Spirit, Opportunity, and Curiosity analyze Martian rock chemistry.",
          "<strong>Research neutron sources</strong> — Cm-Be sources for nuclear reactor startup and well-logging.",
          "<strong>Self-luminous</strong> — curium emits enough internal radiation to glow purple-pink visibly; one of the few self-luminous transuranic elements.",
          "<strong>Heavy-element synthesis</strong> — used as a target for synthesizing berkelium, californium, and elements 113–116."
        ]
      },
      97: { // Berkelium
        uses: [
          "<strong>Heavy-element synthesis</strong> — Bk-249 was the target material bombarded with calcium-48 to create tennessine (element 117) at Oak Ridge in 2010.",
          "<strong>Research only</strong> — berkelium has no industrial use; the chemistry of an element produced in milligram quantities is necessarily academic.",
          "<strong>Periodic-table extension</strong> — every confirmed transactinide above 113 has used berkelium or californium targets at some point.",
          "<strong>Synthesized at Berkeley</strong> — discovered 1949; named for the lab and the city, in the tradition of europium and americium."
        ]
      },
      98: { // Californium
        uses: [
          "<strong>Portable neutron sources</strong> — Cf-252 spontaneously fissions, emitting ~3 neutrons per fission; used for oil-well logging and reactor startup.",
          "<strong>Cargo neutron radiography</strong> — Cf-252 sources image dense cargo for explosives and nuclear-material smuggling detection.",
          "<strong>Cancer brachytherapy (limited)</strong> — Cf-252 needles for some advanced radiation-resistant tumors.",
          "<strong>Heavy-element synthesis target</strong> — Cf-249 has been used in attempts to create elements 119 and 120.",
          "<strong>Most expensive standard element</strong> — historically priced at ~$27 million per gram; produced only at Oak Ridge and Dimitrovgrad."
        ]
      },
      99: { // Einsteinium
        uses: [
          "<strong>Research only</strong> — einsteinium was first identified in fallout from the 1952 'Ivy Mike' thermonuclear test; produced today only in milligram quantities at Oak Ridge.",
          "<strong>Heavy-element synthesis</strong> — Es-254 has been used as a target in attempted synthesis of elements 119 and 120.",
          "<strong>Actinide-chemistry research</strong> — first actinide whose macroscopic chemistry could be studied; significant for f-block periodicity research.",
          "<strong>Named for Einstein</strong> — both Einsteinium and Fermium were named for living physicists when discovered; identities classified until 1955."
        ]
      },
      100: { // Fermium
        uses: [
          "<strong>Research only</strong> — fermium has no commercial use; most-studied isotopes have half-lives under 100 days.",
          "<strong>Heaviest neutron-bombardment element</strong> — Fm-257 is the heaviest nuclide producible by ordinary neutron capture; everything heavier requires cyclotron synthesis.",
          "<strong>Spontaneous-fission research</strong> — fermium isotopes split symmetrically during decay, providing data for nuclear-structure models.",
          "<strong>Named for Enrico Fermi</strong> — discovered in the same 1952 thermonuclear-test debris as einsteinium."
        ]
      },
      101: { // Mendelevium
        uses: [
          "<strong>Research only</strong> — mendelevium is produced one atom at a time by alpha bombardment of einsteinium targets.",
          "<strong>Honors Mendeleev</strong> — named for the chemist who first arranged the periodic table; among the most fitting element names in the catalog.",
          "<strong>Nuclear-structure research</strong> — mendelevium isotopes' decay modes test models of fission barriers in the heaviest elements."
        ]
      },
      102: { // Nobelium
        uses: [
          "<strong>Research only</strong> — nobelium is produced atom-at-a-time in heavy-ion accelerators; has no industrial application.",
          "<strong>Last element where chemistry has been confirmed</strong> — gas-phase chemistry experiments on No-255 atoms confirmed the actinide-series pattern; few elements above No have had chemistry directly observed.",
          "<strong>Named for Alfred Nobel</strong> — discovery credited to the Nobel Institute for Physics in Stockholm (later disputed; reassigned to Dubna)."
        ]
      },
      103: { // Lawrencium
        uses: [
          "<strong>Research only</strong> — lawrencium is the last actinide; has no industrial use.",
          "<strong>Ends the f-block</strong> — lawrencium completes filling the 5f subshell; period 7 transitions to the d-block at element 104 (rutherfordium).",
          "<strong>Named for Ernest Lawrence</strong> — inventor of the cyclotron, which made transactinide synthesis possible.",
          "<strong>First-ionization-energy measurement (2015)</strong> — confirmed lawrencium's IP is smaller than for any other actinide."
        ]
      },
      104: { // Rutherfordium
        uses: [
          "<strong>Research only</strong> — rutherfordium is the first transactinide and first 6d element; only a few hundred atoms have ever been produced.",
          "<strong>Group 4 chemistry verification</strong> — gas-chromatography experiments confirmed Rf behaves chemically like zirconium and hafnium, validating periodic-table predictions.",
          "<strong>Named for Ernest Rutherford</strong> — the New Zealand physicist who discovered the atomic nucleus and identified radioactive decay families."
        ]
      },
      105: { // Dubnium
        uses: [
          "<strong>Research only</strong> — dubnium has been produced one atom at a time in just a handful of experiments worldwide.",
          "<strong>Named for Dubna, Russia</strong> — site of the Joint Institute for Nuclear Research, where many superheavy elements have been synthesized.",
          "<strong>Discovery-priority dispute</strong> — element 105 was at the center of the 'Transfermium Wars' between Berkeley and Dubna; IUPAC settled the naming in 1997."
        ]
      },
      106: { // Seaborgium
        uses: [
          "<strong>Research only</strong> — seaborgium has half-lives of seconds; no industrial use.",
          "<strong>First element named for a living person</strong> — Glenn Seaborg, co-discoverer of plutonium and ten other transuranic elements; the naming was controversial in 1997 but accepted by IUPAC.",
          "<strong>Group 6 chemistry verification</strong> — Sg behaves chemically like molybdenum and tungsten in gas-phase experiments, confirming relativistic-effect predictions for the heaviest elements."
        ]
      },
      107: { // Bohrium
        uses: [
          "<strong>Research only</strong> — bohrium has been produced in only a few experiments; Bh-270 has the longest half-life at ~60 seconds.",
          "<strong>Named for Niels Bohr</strong> — founder of quantum atomic theory and namesake of the Bohr model, the simplest correct picture of an atom.",
          "<strong>Group 7 chemistry verification</strong> — gas-chromatography experiments at GSI Darmstadt confirmed Bh forms volatile oxychlorides like rhenium and technetium."
        ]
      },
      108: { // Hassium
        uses: [
          "<strong>Research only</strong> — hassium isotopes have half-lives of seconds; no industrial use.",
          "<strong>Named for Hesse</strong> — the German state where GSI Darmstadt synthesized the element in 1984.",
          "<strong>Group 8 chemistry verification</strong> — Hs forms a volatile tetroxide (HsO₄) like osmium, confirming its placement in the periodic table."
        ]
      },
      109: { // Meitnerium
        uses: [
          "<strong>Research only</strong> — meitnerium has been produced atom-at-a-time; longest-lived isotope (Mt-278) has a half-life of ~7 seconds.",
          "<strong>Named for Lise Meitner</strong> — the physicist who, with Otto Hahn, discovered nuclear fission; her contribution was overlooked by the 1944 Nobel Committee.",
          "<strong>Periodic-table teaching</strong> — meitnerium continues the d-block transition row in period 7, between hassium and darmstadtium."
        ]
      },
      110: { // Darmstadtium
        uses: [
          "<strong>Research only</strong> — darmstadtium has been observed for milliseconds at a time; no chemistry has been directly studied.",
          "<strong>Named for Darmstadt, Germany</strong> — home of the GSI Helmholtz Centre, where the element was synthesized in 1994.",
          "<strong>Group 10 placement</strong> — predicted to behave like platinum and palladium based on relativistic-corrected calculations."
        ]
      },
      111: { // Roentgenium
        uses: [
          "<strong>Research only</strong> — roentgenium isotopes decay in seconds; no chemistry has been observed.",
          "<strong>Named for Wilhelm Röntgen</strong> — discoverer of X-rays in 1895, which earned him the first Nobel Prize in Physics (1901).",
          "<strong>Group 11 placement</strong> — predicted to be a noble metal like silver and gold; relativistic effects may make it more inert than gold."
        ]
      },
      112: { // Copernicium
        uses: [
          "<strong>Research only</strong> — copernicium has been observed only in fleeting amounts; predicted to be a volatile liquid metal at room temperature.",
          "<strong>Named for Nicolaus Copernicus</strong> — astronomer who placed the Sun (rather than Earth) at the center of the solar system in 1543.",
          "<strong>Group 12 chemistry verification</strong> — Cn was found to behave somewhere between mercury (its lighter analog) and noble gases in gas-phase chromatography — confirming relativistic-effect predictions."
        ]
      },
      113: { // Nihonium
        uses: [
          "<strong>Research only</strong> — nihonium isotopes have half-lives under 10 seconds; no commercial application.",
          "<strong>First Asian-synthesized element</strong> — discovered at RIKEN, Japan, in 2003; naming in 2016 was the first IUPAC acceptance of an East Asian elemental discovery.",
          "<strong>Named for Japan</strong> — 'nihon' is one of two Japanese words for the country; the other (Nippon) was rejected to avoid spelling confusion."
        ]
      },
      114: { // Flerovium
        uses: [
          "<strong>Research only</strong> — flerovium is one of the most-studied superheavy elements; Fl-289 has a half-life of ~2 seconds.",
          "<strong>Named for Flerov Laboratory of Nuclear Reactions</strong> — at Dubna, Russia, where Georgy Flerov pioneered the synthesis of transuranic elements.",
          "<strong>'Island of stability' candidate</strong> — flerovium's nuclear configuration may be near a predicted stability island; longer-lived isotopes are an active research target."
        ]
      },
      115: { // Moscovium
        uses: [
          "<strong>Research only</strong> — moscovium has been observed for milliseconds at a time; no chemistry confirmed.",
          "<strong>Named for the Moscow region</strong> — joint discovery between Dubna (Russia) and Oak Ridge / Livermore (USA), 2003.",
          "<strong>Periodic-table teaching</strong> — fills the position below bismuth in Group 15, completing the pnictogens row."
        ]
      },
      116: { // Livermorium
        uses: [
          "<strong>Research only</strong> — livermorium isotopes decay in milliseconds; no industrial use.",
          "<strong>Named for Lawrence Livermore National Laboratory</strong> — the US national lab that co-discovered elements 113–118 with Dubna.",
          "<strong>Group 16 placement</strong> — fills the position below polonium in the chalcogen group; predicted to share polonium's metalloid character."
        ]
      },
      117: { // Tennessine
        uses: [
          "<strong>Research only</strong> — tennessine is the second-newest confirmed element (synthesized 2010, named 2016); only a handful of atoms have ever been produced.",
          "<strong>Named for Tennessee</strong> — honors Oak Ridge National Laboratory (which produced the Bk-249 target) and Vanderbilt University (which contributed to the discovery team).",
          "<strong>Halogen-group placement</strong> — fills the position below astatine in Group 17; theoretical predictions suggest it may be more metallic than halogenic."
        ]
      },
      118: { // Oganesson
        uses: [
          "<strong>Research only</strong> — oganesson is the heaviest known element; only a few atoms have ever been observed, each surviving milliseconds.",
          "<strong>Named for Yuri Oganessian</strong> — only element named for a living person at the time of naming (2016); honors the Russian physicist who led superheavy-element research at Dubna for over 50 years.",
          "<strong>Predicted to be solid, not gaseous</strong> — relativistic calculations predict that despite its Group 18 placement, oganesson is likely a reactive solid at room temperature with significant electron-correlation effects.",
          "<strong>Defines the limit of period 7</strong> — completes the periodic table as currently configured; element 119 (when synthesized) will start period 8."
        ],
        infographic_caption: "Heaviest known element. Each atom survives only milliseconds before decaying — a fundamental limit imposed by nuclear physics, not by what we can synthesize."
      }
    };

    // Convert array form to object form, merging EXTRA_DATA where present.
    // audio_url and video_url default to null for ALL elements — honest
    // "production pending" state until real assets are wired in.
    const els = ELEMENTS.map(e => {
      const z = e[0];
      const extras = EXTRA_DATA[z] || {};
      return {
        z: z, sym: e[1], name: e[2], mass: e[3], cat: e[4],
        period: e[5], group: e[6], phase: e[7], en: e[8],
        radius: e[9], year: e[10], cfg: e[11], desc: e[12],
        uses: extras.uses || null,
        audio_url: extras.audio_url || null,
        video_url: extras.video_url || null,
        infographic_caption: extras.infographic_caption || null
      };
    });

    // Group/period placement for the main table.
    // Periods 1-7 occupy rows 1-7. La/Ac sit in column 3 of periods 6/7 in main table.
    // Lanthanides 58-71 and Actinides 90-103 go in the lower block.
    function gridPosition(el) {
      // Main table includes: periods 1-7, columns 1-18.
      // Lanthanides (57-71) and Actinides (89-103) are removed from main grid
      // and shown in the dedicated block below; markers stand in their place.
      if ((el.z >= 57 && el.z <= 71) || (el.z >= 89 && el.z <= 103)) return null;
      return { col: el.group, row: el.period };
    }

    // ============================================================
    // RENDER
    // ============================================================
    const ptable = document.getElementById("ptable");
    const lanAct = document.getElementById("lan-act");

    // Group number labels (row 0)
    for (let g = 1; g <= 18; g++) {
      const lbl = document.createElement("div");
      lbl.className = "label";
      lbl.style.gridColumn = g;
      lbl.style.gridRow = 1;
      lbl.textContent = g;
      ptable.appendChild(lbl);
    }

    // Period labels (column 0 reused: we add labels via separate technique)
    // Cells: shift rows by 1 to accommodate group labels
    function placeMain(el) {
      const pos = gridPosition(el);
      if (!pos) return;
      const cell = makeCell(el);
      cell.style.gridColumn = pos.col;
      cell.style.gridRow = pos.row + 1;
      ptable.appendChild(cell);
    }

    // Lanthanide/Actinide block: 2 rows of 15 elements (column 3-17)
    function placeLnAn(el, row) {
      const cell = makeCell(el);
      let col;
      if (el.z >= 57 && el.z <= 71) col = 3 + (el.z - 57);     // 57 -> col 3 ... 71 -> col 17
      else if (el.z >= 89 && el.z <= 103) col = 3 + (el.z - 89);
      else return;
      cell.style.gridColumn = col;
      cell.style.gridRow = row;
      lanAct.appendChild(cell);
    }

    // Marker cells inside main grid pointing to Ln/An rows
    function placeMarker(symbol, period, color) {
      const m = document.createElement("div");
      m.className = "placeholder";
      m.style.gridColumn = 3;
      m.style.gridRow = period + 1;
      m.style.color = color;
      m.style.borderColor = color;
      m.textContent = symbol;
      ptable.appendChild(m);
    }

    function makeCell(el) {
      const c = document.createElement("button");
      c.className = "el";
      c.dataset.z = el.z;
      c.dataset.cat = el.cat;
      c.dataset.sym = el.sym.toLowerCase();
      c.dataset.name = el.name.toLowerCase();
      c.style.setProperty("--cat", `var(--c-${el.cat})`);
      c.innerHTML = `
        <div class="num">${el.z}</div>
        <div class="sym">${el.sym}</div>
        <div class="name">${el.name}</div>
        <div class="mass">${formatMass(el.mass)}</div>
      `;
      c.addEventListener("click", () => openDrawer(el));
      c.addEventListener("mouseenter", () => {/* hook for future tooltip */});
      return c;
    }

    function formatMass(m) {
      if (typeof m === "number") {
        // Show parentheses around mass numbers for synthetic elements (integer masses for unstable isotopes >= 209)
        if (m >= 209 && Number.isInteger(m)) return `(${m})`;
        return m.toFixed(m < 100 ? 3 : 2);
      }
      return m;
    }

    // Place all elements
    els.forEach(placeMain);
    els.filter(e => e.z >= 57 && e.z <= 71).forEach(e => placeLnAn(e, 1));
    els.filter(e => e.z >= 89 && e.z <= 103).forEach(e => placeLnAn(e, 2));

    // Markers in main grid for La and Ac rows
    placeMarker("57–71", 6, "var(--c-lanthanide)");
    placeMarker("89–103", 7, "var(--c-actinide)");

    // ============================================================
    // FILTERS
    // ============================================================
    const filtersEl = document.getElementById("filters");
    const activeCats = new Set();

    Object.entries(CATEGORIES).forEach(([key, val]) => {
      const p = document.createElement("button");
      p.className = "pill";
      p.dataset.cat = key;
      p.style.setProperty("--swatch", val.color);
      p.innerHTML = `<span class="swatch"></span>${val.label}`;
      p.addEventListener("click", () => {
        if (activeCats.has(key)) activeCats.delete(key);
        else activeCats.add(key);
        p.classList.toggle("active");
        applyFilter();
      });
      filtersEl.appendChild(p);
    });

    function applyFilter() {
      const q = document.getElementById("search").value.trim().toLowerCase();
      document.querySelectorAll(".el").forEach(cell => {
        const cat = cell.dataset.cat;
        const matchesCat = activeCats.size === 0 || activeCats.has(cat);
        const matchesQ = !q
          || cell.dataset.sym === q
          || cell.dataset.name.includes(q)
          || cell.dataset.z === q;
        cell.classList.toggle("dim", !(matchesCat && matchesQ));
        cell.classList.toggle("match", q && matchesQ && matchesCat);
      });
    }

    // ============================================================
    // SEARCH
    // ============================================================
    const searchEl = document.getElementById("search");
    searchEl.addEventListener("input", applyFilter);
    searchEl.addEventListener("keydown", e => {
      if (e.key === "Enter") {
        const visible = [...document.querySelectorAll(".el:not(.dim)")];
        if (visible.length === 1) {
          const z = parseInt(visible[0].dataset.z, 10);
          const el = els.find(x => x.z === z);
          if (el) openDrawer(el);
        }
      }
    });

    // Cmd/Ctrl + K to focus search
    // ESC closes the topmost overlay only — if the zoom modal is
    // open, the dedicated zoom-ESC handler (registered later) is
    // responsible; this handler only closes the drawer when the
    // zoom modal is NOT open.
    document.addEventListener("keydown", e => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
        e.preventDefault();
        searchEl.focus();
        searchEl.select();
      }
      if (e.key === "Escape") {
        const zoomOpen = document.getElementById("zoom-backdrop")?.classList.contains("open");
        if (!zoomOpen) closeDrawer();
      }
    });

    // ============================================================
    // VIEW MODES
    // ============================================================
    const viewBtns = document.querySelectorAll(".views button");
    const legend = document.getElementById("legend");
    let currentView = "standard";

    viewBtns.forEach(b => b.addEventListener("click", () => {
      viewBtns.forEach(x => x.classList.remove("active"));
      b.classList.add("active");
      currentView = b.dataset.view;
      applyView();
    }));

    function applyView() {
      document.body.className = `view-${currentView}`;
      legend.classList.remove("show");

      // Reset
      document.querySelectorAll(".el").forEach(cell => {
        const z = parseInt(cell.dataset.z, 10);
        const el = els.find(x => x.z === z);
        cell.style.background = "";
        const sym = cell.querySelector(".sym");
        sym.style.color = `var(--c-${el.cat})`;
      });

      if (currentView === "standard") return;

      let valFn, label, gFrom, gTo, fmt;
      if (currentView === "electroneg") {
        valFn = e => e.en;
        label = "ELECTRONEGATIVITY (Pauling)";
        gFrom = "#1a3a5e"; gTo = "#f5d365";
        fmt = v => v.toFixed(2);
      } else if (currentView === "radius") {
        valFn = e => e.radius;
        label = "ATOMIC RADIUS (pm)";
        gFrom = "#3d2a4e"; gTo = "#6ee7b7";
        fmt = v => Math.round(v) + " pm";
      } else if (currentView === "discovery") {
        valFn = e => e.year;
        label = "DISCOVERY ERA";
        gFrom = "#1a2a3a"; gTo = "#fb7185";
        fmt = v => v < 0 ? `${-v} BCE` : `${v}`;
      }

      const vals = els.map(valFn).filter(v => v !== null && v !== undefined);
      const min = Math.min(...vals);
      const max = Math.max(...vals);

      document.querySelectorAll(".el").forEach(cell => {
        const z = parseInt(cell.dataset.z, 10);
        const el = els.find(x => x.z === z);
        const v = valFn(el);
        if (v === null || v === undefined) {
          cell.style.background = "var(--surface)";
          cell.style.opacity = "0.35";
          return;
        }
        cell.style.opacity = "";
        const t = (v - min) / (max - min);
        cell.style.background = mix(gFrom, gTo, t);
        cell.querySelector(".sym").style.color = t > 0.6 ? "#0a0b10" : "var(--text)";
      });

      // Update legend
      document.getElementById("legend-label").textContent = label;
      document.getElementById("legend-min").textContent = fmt(min);
      document.getElementById("legend-max").textContent = fmt(max);
      const grad = document.getElementById("legend-gradient");
      grad.style.setProperty("--g-from", gFrom);
      grad.style.setProperty("--g-to", gTo);
      legend.classList.add("show");
    }

    function mix(c1, c2, t) {
      const a = hexToRgb(c1), b = hexToRgb(c2);
      const r = Math.round(a.r + (b.r - a.r) * t);
      const g = Math.round(a.g + (b.g - a.g) * t);
      const bl = Math.round(a.b + (b.b - a.b) * t);
      return `rgb(${r},${g},${bl})`;
    }
    function hexToRgb(h) {
      h = h.replace("#","");
      return { r: parseInt(h.slice(0,2),16), g: parseInt(h.slice(2,4),16), b: parseInt(h.slice(4,6),16) };
    }

    // ============================================================
    // DETAIL DRAWER
    // ============================================================
    const drawer = document.getElementById("drawer");
    const backdrop = document.getElementById("backdrop");
    const closeBtn = document.getElementById("close");
    const body = document.getElementById("drawer-body");

    /* ============================================================
     * Bohr-shell SVG — programmatic, real for every element.
     *
     * Distributes electrons via Madelung's rule (n+l ordering)
     * across principal-quantum-number shells. The result is the
     * canonical textbook K-L-M-N-O-P-Q shell count every student
     * learns. Renders as concentric rings with electron dots
     * placed evenly around each ring, plus a labeled nucleus.
     * Real for all 118 elements with no per-element content
     * production required.
     * ============================================================ */
    const MADELUNG_SUBSHELLS = [
      [1, 2],  [2, 2],  [2, 6],  [3, 2],  [3, 6],  [4, 2],  [3, 10],
      [4, 6],  [5, 2],  [4, 10], [5, 6],  [6, 2],  [4, 14], [5, 10],
      [6, 6],  [7, 2],  [5, 14], [6, 10], [7, 6]
    ];

    function shellsForZ(z) {
      const counts = [];
      let remaining = z;
      for (const [shell, cap] of MADELUNG_SUBSHELLS) {
        if (remaining <= 0) break;
        const add = Math.min(remaining, cap);
        counts[shell - 1] = (counts[shell - 1] || 0) + add;
        remaining -= add;
      }
      const out = [];
      for (let i = 0; i < counts.length; i++) {
        if (counts[i] !== undefined && counts[i] > 0) out.push(counts[i]);
      }
      return out;
    }

    function bohrShellSVG(el, opts) {
      opts = opts || {};
      const size = opts.size || 240;
      const cx = size / 2;
      const cy = size / 2;
      const shells = shellsForZ(el.z);
      const nucleusR = 26;
      const outerMargin = 14;
      const usable = (size / 2) - nucleusR - outerMargin;
      const ringStep = shells.length > 1 ? usable / shells.length : 0;

      const ringMarkup = shells.map((count, i) => {
        const r = nucleusR + ringStep * (i + 1);
        const electrons = [];
        for (let k = 0; k < count; k++) {
          const angle = (2 * Math.PI * k) / count - Math.PI / 2;
          const ex = cx + r * Math.cos(angle);
          const ey = cy + r * Math.sin(angle);
          electrons.push(`<circle cx="${ex.toFixed(2)}" cy="${ey.toFixed(2)}" r="3" fill="currentColor" />`);
        }
        return `
          <circle cx="${cx}" cy="${cy}" r="${r.toFixed(2)}" fill="none" stroke="currentColor" stroke-opacity="0.45" stroke-width="1" />
          ${electrons.join("")}
        `;
      }).join("");

      const shellLabel = shells.join("·");

      return `<svg viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        ${ringMarkup}
        <circle cx="${cx}" cy="${cy}" r="${nucleusR}" fill="currentColor" fill-opacity="0.15" stroke="currentColor" stroke-width="1.2" />
        <text x="${cx}" y="${cy + 1}" text-anchor="middle" dominant-baseline="middle" font-family="Fraunces, serif" font-size="22" font-weight="500" fill="currentColor">${el.sym}</text>
        <text x="${cx}" y="${size - 8}" text-anchor="middle" font-family="JetBrains Mono, monospace" font-size="9" letter-spacing="2" fill="currentColor" fill-opacity="0.65">${shellLabel}</text>
      </svg>`;
    }

    function openDrawer(el) {
      const cat = CATEGORIES[el.cat];

      fti_track('lead_capture_view', { z: el.z, name: el.name, cat: el.cat });

      if (drawerTimer) clearTimeout(drawerTimer);
      drawerTimer = setTimeout(() => {
        fti_track('lead_capture_complete', { z: el.z, name: el.name, duration: '10s' });
        drawerTimer = null;
      }, 10000);

      body.style.setProperty("--cat", `var(--c-${el.cat})`);

      const shells = shellsForZ(el.z);
      const shellLabel = shells.join(" · ");
      const captionText = el.infographic_caption
        ? el.infographic_caption
        : el.desc;

      const usesBlock = el.uses && el.uses.length
        ? `<div class="d-section d-uses">
             <h3>Common uses</h3>
             <ul>${el.uses.map(u => `<li>${u}</li>`).join("")}</ul>
           </div>`
        : `<div class="d-section">
             <h3>Notes</h3>
             <p>${el.desc}</p>
           </div>`;

      // Audio / video slots render ONLY when real media is wired in.
      // No placeholders, no "production pending" UI, no leaked variable
      // names. Per feedback_no_vaporware.md: implement it or leave it
      // out — never render a fake UI.
      const audioSlot = el.audio_url
        ? `<div class="slot ready" data-kind="audio">
             <span class="slot-label"><span class="dot"></span>Audio brief</span>
             <audio controls preload="none" src="${el.audio_url}" data-z="${el.z}"></audio>
           </div>`
        : "";

      const videoSlot = el.video_url
        ? `<div class="slot ready" data-kind="video">
             <span class="slot-label"><span class="dot"></span>Video explainer</span>
             <video controls preload="none" src="${el.video_url}" data-z="${el.z}"></video>
           </div>`
        : "";

      const mediaSection = (audioSlot || videoSlot)
        ? `<div class="d-section">
             <h3>Audio &amp; video briefs</h3>
             <div class="d-media">${audioSlot}${videoSlot}</div>
           </div>`
        : "";

      const drawerHTML = `
        <div class="d-header" style="--cat: var(--c-${el.cat})">
          <div class="d-symbol" style="--cat: var(--c-${el.cat})">
            <div class="n">${el.z}</div>
            <div class="s">${el.sym}</div>
            <div class="m">${formatMass(el.mass)}</div>
          </div>
          <div class="d-title">
            <h2>${el.name}</h2>
            <div class="cat" style="--cat: var(--c-${el.cat})">
              <span class="swatch"></span>${cat.label}
            </div>
          </div>
        </div>

        <div class="d-infographic" style="--cat: var(--c-${el.cat})">
          <button type="button" class="thumb" id="d-zoom-trigger" aria-label="Zoom Bohr-model infographic for ${el.name}">${bohrShellSVG(el, { size: 200 })}</button>
          <div class="meta">
            <h3>Bohr-shell infographic</h3>
            <p>${captionText}</p>
            <p style="margin-top:6px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.08em;color:var(--text-faint)">Shell counts · ${shellLabel}</p>
            <span class="zoom-cta">Click to zoom</span>
          </div>
        </div>

        <dl class="d-grid">
          <div>
            <dt>Atomic Number</dt>
            <dd>${el.z}</dd>
          </div>
          <div>
            <dt>Atomic Mass</dt>
            <dd>${formatMass(el.mass)} <small>u</small></dd>
          </div>
          <div>
            <dt>Period</dt>
            <dd>${el.period}</dd>
          </div>
          <div>
            <dt>Group</dt>
            <dd>${el.group}</dd>
          </div>
          <div>
            <dt>Phase at STP</dt>
            <dd>${capitalize(el.phase)}</dd>
          </div>
          <div>
            <dt>Electronegativity</dt>
            <dd>${el.en !== null ? el.en + " " : "—"}<small>${el.en !== null ? "Pauling" : ""}</small></dd>
          </div>
          <div>
            <dt>Atomic Radius</dt>
            <dd>${el.radius !== null ? el.radius + " " : "—"}<small>${el.radius !== null ? "pm" : ""}</small></dd>
          </div>
          <div>
            <dt>Year Known</dt>
            <dd>${formatYear(el.year)}</dd>
          </div>
        </dl>

        <div class="d-section">
          <h3>Electron Configuration</h3>
          <p style="font-family:'JetBrains Mono',monospace;color:var(--text)">${el.cfg}</p>
        </div>

        ${usesBlock}

        ${mediaSection}
      `;

      while (body.firstChild) body.removeChild(body.firstChild);
      body.appendChild(fragFromHTML(drawerHTML));

      // Wire the zoom trigger
      const zoomTrigger = body.querySelector("#d-zoom-trigger");
      if (zoomTrigger) {
        zoomTrigger.addEventListener("click", () => openZoomModal(el));
      }

      // Wire audio/video play analytics — only fires for ready slots
      body.querySelectorAll('.d-media .slot.ready audio').forEach(a => {
        a.addEventListener("play", () => {
          fti_track("element_audio_play", { z: el.z, name: el.name });
        }, { once: true });
      });
      body.querySelectorAll('.d-media .slot.ready video').forEach(v => {
        v.addEventListener("play", () => {
          fti_track("element_video_play", { z: el.z, name: el.name });
        }, { once: true });
      });

      // If real uses are present, fire a uses_view event once per open
      if (el.uses && el.uses.length) {
        fti_track("element_uses_view", { z: el.z, name: el.name, count: el.uses.length });
      }

      drawer.classList.add("open");
      backdrop.classList.add("open");
      drawer.setAttribute("aria-hidden", "false");
    }

    function closeDrawer() {
      drawer.classList.remove("open");
      backdrop.classList.remove("open");
      drawer.setAttribute("aria-hidden", "true");
    }

    closeBtn.addEventListener("click", closeDrawer);
    backdrop.addEventListener("click", closeDrawer);

    /* ============================================================
     * Zoom modal — full-size Bohr-shell infographic + optional
     * native HTML5 video. Opens from the drawer thumbnail.
     * ============================================================ */
    const zoomBackdrop = document.getElementById("zoom-backdrop");
    const zoomShell = document.getElementById("zoom-shell");
    const zoomFrame = document.getElementById("zoom-frame");
    const zoomBody = document.getElementById("zoom-body");
    const zoomCloseBtn = document.getElementById("zoom-close");

    function openZoomModal(el) {
      fti_track("element_infographic_zoom", { z: el.z, name: el.name });

      const cat = CATEGORIES[el.cat];
      zoomFrame.style.setProperty("--cat", `var(--c-${el.cat})`);

      const captionText = el.infographic_caption
        ? el.infographic_caption
        : el.desc;
      const shells = shellsForZ(el.z);

      // Zoom-modal video block renders ONLY when real video is wired
      // in. No placeholders, no leaked variable names. Per
      // feedback_no_vaporware.md.
      const videoBlock = el.video_url
        ? `<div class="zoom-video">
             <video controls preload="metadata" src="${el.video_url}" data-z="${el.z}"></video>
           </div>`
        : "";

      const html = `
        <div class="zoom-head">
          <span class="sym">${el.sym}</span>
          <h3 id="zoom-heading">${el.name}</h3>
          <span class="tag">${cat.label} · Period ${el.period} · Group ${el.group} · Shells ${shells.join("·")}</span>
        </div>
        <div class="zoom-svg">${bohrShellSVG(el, { size: 360 })}</div>
        <p class="zoom-caption">${captionText}</p>
        ${videoBlock}
      `;

      while (zoomBody.firstChild) zoomBody.removeChild(zoomBody.firstChild);
      zoomBody.appendChild(fragFromHTML(html));

      // Wire video play analytics for the modal
      zoomBody.querySelectorAll("video").forEach(v => {
        v.addEventListener("play", () => {
          fti_track("element_video_play", { z: el.z, name: el.name, surface: "zoom-modal" });
        }, { once: true });
      });

      zoomBackdrop.classList.add("open");
      zoomShell.setAttribute("aria-hidden", "false");
      zoomFrame.classList.add("open");
    }

    function closeZoomModal() {
      // Pause any playing video
      zoomBody.querySelectorAll("video, audio").forEach(media => {
        try { media.pause(); } catch (err) { /* ignore */ }
      });
      zoomBackdrop.classList.remove("open");
      zoomShell.setAttribute("aria-hidden", "true");
      zoomFrame.classList.remove("open");
    }

    zoomCloseBtn.addEventListener("click", closeZoomModal);
    zoomBackdrop.addEventListener("click", closeZoomModal);
    document.addEventListener("keydown", evt => {
      if (evt.key === "Escape" && zoomBackdrop.classList.contains("open")) {
        evt.stopPropagation();
        closeZoomModal();
      }
    });

    function capitalize(s) {
      if (!s) return "—";
      return s.charAt(0).toUpperCase() + s.slice(1);
    }
    function formatYear(y) {
      if (y === null || y === undefined) return "—";
      if (y < 0) return `c. ${-y} BCE`;
      if (y < 1500) return `c. ${y} CE`;
      return String(y);
    }

    /* ============================================================
     * Element Categories — Field Notes (v1.1.0)
     * Expandable cards per major category with inline SVG
     * infographics and representative-element chips that route
     * into the existing detail drawer. Markup is built with
     * Range.createContextualFragment + appendChild — the safe
     * insertion pattern established by the research viewer.
     * ============================================================ */
    const CATEGORY_FIELD_NOTES = {
      "alkali": {
        tagline: "Group 1 · soft, silvery, ferocious",
        properties_html: "<strong>Single valence electron</strong> in an s-orbital makes them the most reactive metals on the table. Soft enough to cut with a knife, low melting points, and they tarnish on air contact. Each one ignites or explodes with water; reactivity climbs as you go down the group, Li → Cs.",
        where_html: "Found bound up in seawater, brines, and silicate minerals — never free in nature. Lithium underpins modern batteries, sodium the brine that built chemical industry, potassium the fertilizer feeding most of agriculture. Cesium and rubidium are research metals; francium is essentially mythical (only ~30 g exist on Earth at any moment).",
        why_html: "These elements anchor the energy economy: lithium-ion cells in every phone and EV, sodium-ion as the lower-cost grid alternative now scaling. Biologically, sodium and potassium gradients power every nerve impulse you've ever had.",
        representatives: [3, 11, 19, 55]
      },
      "alkaline-earth": {
        tagline: "Group 2 · structural, luminous, vital",
        properties_html: "<strong>Two valence electrons</strong>, harder and denser than the alkali metals next door, with higher melting points. Still reactive but more controlled — they form +2 cations and bond avidly with oxygen, halogens, and chalcogens. Many burn with characteristic flame colors (Mg white, Sr red, Ba green) — the chemistry of fireworks.",
        where_html: "Calcium and magnesium are abundant in the crust; calcium dominates limestone, marble, bone, and teeth, while magnesium sits at the heart of every chlorophyll molecule. Beryllium is rare and toxic; strontium colors flares; barium contrasts MRIs; radium glows pale blue and was a 20th-century cautionary tale.",
        why_html: "These are the structural metals of biology and the built environment — concrete, drywall, gypsum, bone, shells, plant photosynthesis. Magnesium alloys are the lightest structural metals in industrial use; calcium signaling is one of the most universal regulatory mechanisms in cells.",
        representatives: [4, 12, 20, 38, 56]
      },
      "transition": {
        tagline: "d-block · the working metals",
        properties_html: "<strong>Partially filled d-orbitals</strong> let these elements adopt multiple oxidation states, form colored complexes, and act as catalysts for nearly every important industrial reaction. Hard, dense, high-melting, lustrous — the metals you picture when you say 'metal.' Many are magnetic (Fe, Co, Ni); a few are catalytic noble metals (Pt, Pd, Rh).",
        where_html: "Iron is the spine of civilization (steel, the planet's core, hemoglobin in your blood). Copper wires the world; titanium pins broken bones; tungsten lights filaments and tips drills; platinum cleans car exhaust; gold and silver hold value across every culture in history.",
        why_html: "If you remove the transition metals from civilization, the lights go out, the cars stop, the buildings fall, and the chemical industry dies. They are the catalysts behind ammonia synthesis (fertilizer), polymer production, and most pharmaceutical manufacturing.",
        representatives: [22, 26, 29, 47, 74, 78, 79]
      },
      "post-transition": {
        tagline: "p-block metals · soft, malleable, useful",
        properties_html: "<strong>Metallic but with a softer edge</strong> than the transition metals — lower melting points, lower mechanical strength, more covalent character in their bonds. They sit between the d-block workhorses and the metalloids and inherit traits from both. Some (gallium, indium) melt near or just above body temperature.",
        where_html: "Aluminum is the most abundant metal in the crust and the workhorse of lightweight alloys (aircraft, cans, foil). Tin gave the Bronze Age its name and still coats steel cans. Lead built ancient plumbing and modern car batteries. Bismuth forms iridescent rainbow crystals; gallium and indium quietly enable LEDs and the touchscreen on every phone (as ITO).",
        why_html: "These are the metals of <em>convenience</em> — light packaging, low-melt solders, transparent conductors, lightweight structures. Indium tin oxide alone enables the entire touchscreen industry; gallium nitride is reshaping high-efficiency power electronics.",
        representatives: [13, 31, 49, 50, 82, 83]
      },
      "metalloid": {
        tagline: "Hybrid · semiconductors and stewards",
        properties_html: "<strong>Half metal, half nonmetal</strong> — appearance lustrous like metals, but with brittle, semiconducting electrical behavior. They sit on the staircase that divides the periodic table and inherit a foot in each camp. Their bandgaps are what make them useful: small enough to conduct under stimulus, large enough to switch.",
        where_html: "Silicon is the second-most abundant element in the crust and the substrate of essentially every microchip ever fabricated. Boron strengthens borosilicate glass and high-performance fibers. Germanium pioneered the transistor before silicon took over and now lives in fiber-optic cores. Arsenic, antimony, and tellurium dope and alloy in semiconductors.",
        why_html: "The entire digital age — every chip, sensor, solar cell, LED, and laser diode — runs on metalloid semiconductor physics. Silicon Valley is named after element 14 for a reason.",
        representatives: [5, 14, 32, 33, 51, 52]
      },
      "nonmetal": {
        tagline: "p-block nonmetals · the chemistry of life",
        properties_html: "<strong>High electronegativity, poor conductors</strong>, generally gas or brittle solid at room temperature. They form covalent bonds with each other and with metals, and they specialize in molecular complexity rather than metallic networks. The chemistry of life is essentially nonmetal chemistry — H, C, N, O, P, S in endless combinations.",
        where_html: "Hydrogen is the most abundant element in the universe; oxygen the most abundant in the crust; carbon the backbone of every organic molecule. Nitrogen makes up 78% of the atmosphere and feeds crops as fixed ammonia. Sulfur is yellow and ancient; phosphorus is the limiting nutrient in most ecosystems and the energy currency of ATP.",
        why_html: "Every protein, every strand of DNA, every fuel you've ever burned, every breath you've ever taken — that's reactive-nonmetal chemistry. They are the elements you and your food are mostly made of.",
        representatives: [1, 6, 7, 8, 15, 16]
      },
      "halogen": {
        tagline: "Group 17 · diatomic and demanding",
        properties_html: "<strong>One electron short of a noble-gas configuration</strong>, halogens are the most reactive nonmetals — they crave the missing electron and strip it off almost anything. They exist as diatomic molecules (F₂, Cl₂, Br₂, I₂) and progress from pale-yellow gas to violet solid as you descend the group. Fluorine is the most electronegative element on the table.",
        where_html: "Bound as halide salts in seawater (chloride dominates), in evaporite minerals (fluorite, halite), and in seaweed (iodine). Free halogens are made industrially by electrolysis. Astatine and tennessine are vanishingly rare — astatine has the smallest natural abundance of any non-transuranic element.",
        why_html: "Halogens disinfect water, brighten teeth (fluoride), make plastics (PVC, Teflon), and tag thyroid hormones (iodine). The chlor-alkali industry — chlorine, sodium hydroxide, hydrogen from brine — is one of the largest in chemistry.",
        representatives: [9, 17, 35, 53]
      },
      "noble": {
        tagline: "Group 18 · the unreactive ideal",
        properties_html: "<strong>Full valence shell, complete octet</strong> — the chemistry textbook's gold standard for stability. Colorless, odorless, monatomic gases at room temperature, with vanishingly low reactivity. Helium is the second-lightest element; xenon the heaviest stable noble gas; oganesson the heaviest known element of any kind, predicted to behave more like a solid than a gas.",
        where_html: "Helium escapes from the Earth and hides in natural-gas wells. Argon is 0.93% of the atmosphere — the third-most-abundant atmospheric gas. Neon, krypton, and xenon are extracted from liquefied air. Radon seeps from uranium-bearing rock and is the leading cause of indoor radiation exposure in many regions.",
        why_html: "Helium cools MRI superconducting magnets; argon shields welding arcs and incandescent filaments; neon defines the look of mid-century signage; xenon powers ion thrusters on deep-space probes; krypton once defined the meter.",
        representatives: [2, 10, 18, 36, 54, 86, 118]
      },
      "lanthanide": {
        tagline: "f-block · the rare earths",
        properties_html: "<strong>Filling the 4f subshell</strong> gives this row remarkably similar chemistry — all form +3 ions, all are silvery, soft, reactive metals — but distinct optical and magnetic properties that make each one technologically unique. They are misnamed 'rare earths': most are more abundant than silver, just hard to separate.",
        where_html: "Co-mined from monazite, bastnäsite, and ion-adsorption clays — separation is the bottleneck, not abundance. China currently dominates global supply. Each lanthanide finds a niche: Nd in permanent magnets, Eu in red phosphors, Gd in MRI contrast, Er in fiber-optic amplifiers, Yb in atomic clocks.",
        why_html: "Modern technology — wind turbines, EV motors, displays, lasers, MRI scanners, fiber networks — runs on rare-earth magnetism and luminescence. Geopolitics around lanthanide supply is now a first-tier industrial-policy concern.",
        representatives: [57, 58, 60, 63, 64, 68]
      },
      "actinide": {
        tagline: "f-block · radioactive and powerful",
        properties_html: "<strong>Filling the 5f subshell</strong>, the actinides are all radioactive. Only thorium and uranium are abundant enough to mine; everything past uranium is synthetic, produced in cyclotrons or reactors and present in vanishingly small quantities. Their chemistry is rich (uranium alone has +3 to +6 states), but their decay defines them.",
        where_html: "Uranium and thorium are widely distributed in the crust at low concentrations. Plutonium occurs in trace amounts in uranium ores and is bred in reactors. Americium powers smoke detectors; californium is a portable neutron source for nuclear well-logging; einsteinium and beyond exist mostly as research curiosities.",
        why_html: "Actinide fission powered the 20th-century nuclear age and remains roughly 10% of global electricity today. Plutonium-238 RTGs run Voyager and Curiosity. Targeted alpha therapies using actinium-225 are an active oncology frontier.",
        representatives: [89, 90, 92, 94, 95]
      }
    };

    /* Inline SVG library — small icon shown on each card summary.
     * Uses stroke="currentColor" so the per-card --cat token sets
     * the accent color. */
    const CATEGORY_ICONS = {
      "alkali": `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3c1 2.5 3 4 3 6.5a3 3 0 0 1-6 0C9 7 11 5.5 12 3Z"/><path d="M8 14c1.2 1 2.5 1.6 4 1.6S14.8 15 16 14"/><path d="M12 16.5c-1.6 0-3 1.2-3 2.7S10.4 22 12 22s3-1.2 3-2.8c0-1.5-1.4-2.7-3-2.7Z"/></svg>`,
      "alkaline-earth": `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5.5"/><circle cx="12" cy="12" r="2"/></svg>`,
      "transition": `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3 4 12l8 9 8-9-8-9Z"/><path d="M4 12h16"/><path d="M12 3v18"/></svg>`,
      "post-transition": `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="6" width="18" height="3" rx="0.5"/><rect x="3" y="11" width="18" height="3" rx="0.5"/><rect x="3" y="16" width="18" height="3" rx="0.5"/></svg>`,
      "metalloid": `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="1"/><path d="M3 21 21 3" stroke-dasharray="2 2"/><path d="M3 3h9v9H3Z" fill="currentColor" fill-opacity="0.18" stroke="none"/></svg>`,
      "nonmetal": `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3 4.5 7.5v9L12 21l7.5-4.5v-9L12 3Z"/><path d="M12 7.5v9"/><path d="M8 9.75v4.5"/><path d="M16 9.75v4.5"/></svg>`,
      "halogen": `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="7" cy="12" r="3.4"/><circle cx="17" cy="12" r="3.4"/><path d="M10.4 12h3.2"/></svg>`,
      "noble": `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="2"/><circle cx="12" cy="12" r="8" stroke-dasharray="0.5 2.2"/></svg>`,
      "lanthanide": `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 19c2-7 7-11 9-11s7 4 9 11"/><circle cx="6" cy="14.5" r="0.9" fill="currentColor"/><circle cx="9" cy="11.5" r="0.9" fill="currentColor"/><circle cx="12" cy="9.5" r="0.9" fill="currentColor"/><circle cx="15" cy="11.5" r="0.9" fill="currentColor"/><circle cx="18" cy="14.5" r="0.9" fill="currentColor"/></svg>`,
      "actinide": `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="2.2" fill="currentColor"/><path d="M12 4v3.5"/><path d="M19 8.5l-3 1.7"/><path d="M19 15.5l-3-1.7"/><path d="M12 20v-3.5"/><path d="M5 15.5l3-1.7"/><path d="M5 8.5l3 1.7"/></svg>`
    };

    /* Hero SVGs — shown in the expanded body. 16:10 aspect. */
    const CATEGORY_HERO = {
      "alkali": `<svg viewBox="0 0 320 200" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><g opacity="0.35"><path d="M20 170h280" stroke-dasharray="2 4"/></g><path d="M160 30c8 22 26 36 26 56a26 26 0 1 1-52 0c0-20 18-34 26-56Z" stroke-width="1.6"/><path d="M150 80c4 4 7 6 10 6s6-2 10-6"/><path d="M155 92c2 2 3 3 5 3s3-1 5-3"/><g><circle cx="60" cy="150" r="3" fill="currentColor"/><text x="50" y="178" font-family="JetBrains Mono, monospace" font-size="10" fill="currentColor" opacity="0.8">Li</text></g><g><circle cx="120" cy="155" r="4" fill="currentColor"/><text x="110" y="178" font-family="JetBrains Mono, monospace" font-size="10" fill="currentColor" opacity="0.8">Na</text></g><g><circle cx="180" cy="155" r="5" fill="currentColor"/><text x="172" y="178" font-family="JetBrains Mono, monospace" font-size="10" fill="currentColor" opacity="0.8">K</text></g><g><circle cx="240" cy="153" r="6" fill="currentColor"/><text x="231" y="178" font-family="JetBrains Mono, monospace" font-size="10" fill="currentColor" opacity="0.8">Cs</text></g><text x="160" y="20" text-anchor="middle" font-family="JetBrains Mono, monospace" font-size="9" letter-spacing="2" fill="currentColor" opacity="0.5">REACTIVITY ↑ DOWN GROUP</text></svg>`,
      "alkaline-earth": `<svg viewBox="0 0 320 200" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="160" cy="100" r="80"/><circle cx="160" cy="100" r="55"/><circle cx="160" cy="100" r="32"/><circle cx="160" cy="100" r="10" fill="currentColor"/><g font-family="JetBrains Mono, monospace" font-size="10" fill="currentColor"><text x="160" y="32" text-anchor="middle" opacity="0.85">Ca</text><text x="160" y="172" text-anchor="middle" opacity="0.6">Mg</text><text x="86" y="104" text-anchor="middle" opacity="0.6">Be</text><text x="232" y="104" text-anchor="middle" opacity="0.6">Ba</text></g><text x="160" y="195" text-anchor="middle" font-family="JetBrains Mono, monospace" font-size="9" letter-spacing="2" fill="currentColor" opacity="0.5">+2 CATIONS · STRUCTURAL</text></svg>`,
      "transition": `<svg viewBox="0 0 320 200" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><g opacity="0.6"><path d="M160 30 70 100l90 70 90-70-90-70Z" stroke-width="1.6"/></g><circle cx="160" cy="100" r="10" fill="currentColor"/><g><circle cx="160" cy="40" r="5"/><line x1="160" y1="50" x2="160" y2="90"/></g><g><circle cx="160" cy="160" r="5"/><line x1="160" y1="150" x2="160" y2="110"/></g><g><circle cx="80" cy="100" r="5"/><line x1="90" y1="100" x2="150" y2="100"/></g><g><circle cx="240" cy="100" r="5"/><line x1="230" y1="100" x2="170" y2="100"/></g><g><circle cx="100" cy="50" r="5"/><line x1="107" y1="57" x2="153" y2="93"/></g><g><circle cx="220" cy="150" r="5"/><line x1="213" y1="143" x2="167" y2="107"/></g><text x="160" y="20" text-anchor="middle" font-family="JetBrains Mono, monospace" font-size="9" letter-spacing="2" fill="currentColor" opacity="0.5">OCTAHEDRAL · d-BLOCK</text><text x="160" y="195" text-anchor="middle" font-family="JetBrains Mono, monospace" font-size="9" letter-spacing="2" fill="currentColor" opacity="0.5">VARIABLE OXIDATION STATES</text></svg>`,
      "post-transition": `<svg viewBox="0 0 320 200" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="40" y="50" width="240" height="14" rx="1"/><rect x="40" y="74" width="240" height="14" rx="1"/><rect x="40" y="98" width="240" height="14" rx="1"/><rect x="40" y="122" width="240" height="14" rx="1"/><g font-family="JetBrains Mono, monospace" font-size="9" fill="currentColor" opacity="0.85"><text x="50" y="61">Al</text><text x="50" y="85">Sn</text><text x="50" y="109">In</text><text x="50" y="133">Pb</text></g><text x="160" y="170" text-anchor="middle" font-family="JetBrains Mono, monospace" font-size="9" letter-spacing="2" fill="currentColor" opacity="0.5">SOFT · MALLEABLE · LIGHT</text></svg>`,
      "metalloid": `<svg viewBox="0 0 320 200" fill="none" stroke="currentColor" stroke-width="1.2" aria-hidden="true"><rect x="60" y="30" width="200" height="140" rx="2" stroke="currentColor" fill="none"/><path d="M60 170 L260 30" stroke="currentColor" stroke-dasharray="3 3"/><path d="M60 30 L260 30 L60 170 Z" fill="currentColor" fill-opacity="0.18" stroke="none"/><g font-family="JetBrains Mono, monospace" font-size="9" fill="currentColor"><text x="100" y="80" opacity="0.85">METAL</text><text x="100" y="95" opacity="0.6">lustrous</text><text x="100" y="108" opacity="0.6">conductive</text><text x="195" y="135" opacity="0.85">NONMETAL</text><text x="195" y="150" opacity="0.6">brittle</text><text x="195" y="163" opacity="0.6">covalent</text></g><text x="160" y="195" text-anchor="middle" font-family="JetBrains Mono, monospace" font-size="9" letter-spacing="2" fill="currentColor" opacity="0.5">SEMICONDUCTORS · Si · Ge · B</text></svg>`,
      "nonmetal": `<svg viewBox="0 0 320 200" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><g opacity="0.85"><path d="M160 40 100 75v60l60 35 60-35V75l-60-35Z" stroke-width="1.6"/></g><g><circle cx="100" cy="75" r="4" fill="currentColor"/><circle cx="100" cy="135" r="4" fill="currentColor"/><circle cx="160" cy="40" r="4" fill="currentColor"/><circle cx="160" cy="170" r="4" fill="currentColor"/><circle cx="220" cy="75" r="4" fill="currentColor"/><circle cx="220" cy="135" r="4" fill="currentColor"/></g><g font-family="JetBrains Mono, monospace" font-size="10" fill="currentColor" opacity="0.9"><text x="160" y="32" text-anchor="middle">C</text><text x="86" y="78" text-anchor="end">N</text><text x="86" y="138" text-anchor="end">O</text><text x="234" y="78">H</text><text x="234" y="138">P</text><text x="160" y="186" text-anchor="middle">S</text></g><text x="160" y="200" text-anchor="middle" font-family="JetBrains Mono, monospace" font-size="9" letter-spacing="2" fill="currentColor" opacity="0.4">CHEMISTRY OF LIFE</text></svg>`,
      "halogen": `<svg viewBox="0 0 320 200" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><g><circle cx="120" cy="100" r="32" stroke-width="1.6"/><circle cx="200" cy="100" r="32" stroke-width="1.6"/><line x1="152" y1="100" x2="168" y2="100" stroke-width="1.8"/></g><g font-family="Fraunces, serif" font-size="22" font-weight="500" fill="currentColor" text-anchor="middle"><text x="120" y="108">X</text><text x="200" y="108">X</text></g><g font-family="JetBrains Mono, monospace" font-size="9" fill="currentColor" opacity="0.7"><text x="160" y="160" text-anchor="middle">DIATOMIC · ONE e⁻ FROM NOBLE</text><text x="60" y="40">F₂</text><text x="60" y="55" opacity="0.5">pale yellow gas</text><text x="260" y="40" text-anchor="end">I₂</text><text x="260" y="55" text-anchor="end" opacity="0.5">violet solid</text></g></svg>`,
      "noble": `<svg viewBox="0 0 320 200" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="160" cy="100" r="78" opacity="0.5"/><circle cx="160" cy="100" r="58" stroke-dasharray="2 3"/><circle cx="160" cy="100" r="38" stroke-dasharray="1 3"/><circle cx="160" cy="100" r="8" fill="currentColor"/><g><circle cx="218" cy="100" r="2.5" fill="currentColor"/><circle cx="102" cy="100" r="2.5" fill="currentColor"/><circle cx="160" cy="42" r="2.5" fill="currentColor"/><circle cx="160" cy="158" r="2.5" fill="currentColor"/><circle cx="201" cy="59" r="2.5" fill="currentColor"/><circle cx="119" cy="141" r="2.5" fill="currentColor"/><circle cx="201" cy="141" r="2.5" fill="currentColor"/><circle cx="119" cy="59" r="2.5" fill="currentColor"/></g><text x="160" y="195" text-anchor="middle" font-family="JetBrains Mono, monospace" font-size="9" letter-spacing="2" fill="currentColor" opacity="0.5">FULL OCTET · INERT</text></svg>`,
      "lanthanide": `<svg viewBox="0 0 320 200" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M30 160c20-70 80-110 130-110s110 40 130 110" opacity="0.4"/><g fill="currentColor"><circle cx="40" cy="148" r="3"/><circle cx="58" cy="124" r="3"/><circle cx="78" cy="102" r="3"/><circle cx="100" cy="84" r="3"/><circle cx="124" cy="70" r="3"/><circle cx="148" cy="60" r="3"/><circle cx="172" cy="56" r="3"/><circle cx="196" cy="60" r="3"/><circle cx="220" cy="70" r="3"/><circle cx="244" cy="84" r="3"/><circle cx="266" cy="102" r="3"/><circle cx="286" cy="124" r="3"/></g><g font-family="JetBrains Mono, monospace" font-size="9" fill="currentColor" opacity="0.85"><text x="40" y="178" text-anchor="middle">La</text><text x="100" y="178" text-anchor="middle">Nd</text><text x="172" y="178" text-anchor="middle">Eu</text><text x="244" y="178" text-anchor="middle">Er</text><text x="286" y="178" text-anchor="middle">Lu</text></g><text x="160" y="30" text-anchor="middle" font-family="JetBrains Mono, monospace" font-size="9" letter-spacing="2" fill="currentColor" opacity="0.5">4f SHELL · 14 ELEMENTS</text></svg>`,
      "actinide": `<svg viewBox="0 0 320 200" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="160" cy="100" r="14" fill="currentColor"/><g opacity="0.85" stroke-width="1.4"><path d="M160 86 V40"/><path d="M160 114 V160"/><path d="M146 100 H100"/><path d="M174 100 H220"/><path d="M150 90 L120 60"/><path d="M170 90 L200 60"/><path d="M150 110 L120 140"/><path d="M170 110 L200 140"/></g><g><circle cx="100" cy="60" r="2.5" fill="currentColor"/><circle cx="220" cy="60" r="2.5" fill="currentColor"/><circle cx="100" cy="140" r="2.5" fill="currentColor"/><circle cx="220" cy="140" r="2.5" fill="currentColor"/><circle cx="160" cy="40" r="3" fill="currentColor"/><circle cx="160" cy="160" r="3" fill="currentColor"/></g><text x="160" y="20" text-anchor="middle" font-family="JetBrains Mono, monospace" font-size="9" letter-spacing="2" fill="currentColor" opacity="0.5">5f SHELL · ALL RADIOACTIVE</text><text x="160" y="190" text-anchor="middle" font-family="JetBrains Mono, monospace" font-size="9" letter-spacing="2" fill="currentColor" opacity="0.5">Th · U · Pu</text></svg>`
    };

    /* Safe DOM-fragment helper — same pattern as the research
     * viewer (see TASK_LOG entry 20260506074800). Avoids direct
     * innerHTML assignment per the project's security hook. */
    function fragFromHTML(html) {
      return document.createRange().createContextualFragment(html);
    }

    function renderCategoryExplorer() {
      const grid = document.getElementById("cat-grid");
      if (!grid) return;
      const exploredCats = new Set();
      const engagementTimers = new Map();

      Object.entries(CATEGORY_FIELD_NOTES).forEach(([key, note]) => {
        const meta = CATEGORIES[key];
        if (!meta) return;
        const count = els.filter(e => e.cat === key).length;

        const card = document.createElement("article");
        card.className = "cat-card";
        card.dataset.cat = key;
        card.style.setProperty("--cat", `var(--c-${key})`);

        const chips = note.representatives.map(z => {
          const el = els.find(e => e.z === z);
          if (!el) return "";
          return `<button type="button" class="chip" data-z="${el.z}" aria-label="Open ${el.name} details"><span class="chip-z">${el.z}</span><span class="chip-sym">${el.sym}</span><span>${el.name}</span></button>`;
        }).join("");

        const cardHTML = `
          <button type="button" class="cat-summary" aria-expanded="false" aria-controls="cat-body-${key}">
            <span class="cat-svg" aria-hidden="true">${CATEGORY_ICONS[key] || ""}</span>
            <span class="cat-meta">
              <span class="label">${meta.label}s</span>
              <span class="tagline">${note.tagline}</span>
            </span>
            <span class="cat-count">
              <span>${count} elements</span>
              <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg>
            </span>
          </button>
          <div class="cat-body" id="cat-body-${key}" role="region">
            <div class="cat-body-inner">
              <div class="cat-hero">
                <a class="cat-hero-img" href="/assets/notebooklm/infographics/${key}.jpg" target="_blank" rel="noopener" aria-label="View full-size ${meta.label} infographic">
                  <img src="/assets/notebooklm/infographics/${key}.jpg" alt="${meta.label} category infographic generated by NotebookLM" loading="lazy" />
                  <span class="zoom-pip" aria-hidden="true">View full</span>
                </a>
              </div>
              <div class="cat-prose">
                <h4>Signature properties</h4>
                <p>${note.properties_html}</p>
                <h4>Where you find them</h4>
                <p>${note.where_html}</p>
                <h4>Why they matter</h4>
                <p>${note.why_html}</p>
                <h4>Representative elements</h4>
                <div class="cat-chips">${chips}</div>
              </div>
            </div>
          </div>
        `;
        card.appendChild(fragFromHTML(cardHTML));

        const summary = card.querySelector(".cat-summary");
        summary.addEventListener("click", () => {
          const willOpen = !card.classList.contains("open");
          card.classList.toggle("open", willOpen);
          summary.setAttribute("aria-expanded", String(willOpen));

          if (willOpen) {
            if (!exploredCats.has(key)) {
              exploredCats.add(key);
              fti_track("category_explore", { category: key, label: meta.label, count: count });
            }
            const t = setTimeout(() => {
              fti_track("category_engagement", { category: key, label: meta.label, duration: "8s" });
              engagementTimers.delete(key);
            }, 8000);
            engagementTimers.set(key, t);
          } else if (engagementTimers.has(key)) {
            clearTimeout(engagementTimers.get(key));
            engagementTimers.delete(key);
          }
        });

        const heroLink = card.querySelector(".cat-hero-img");
        if (heroLink) {
          heroLink.addEventListener("click", () => {
            fti_track("class_infographic_view", { category: key, label: meta.label, surface: "category-card" });
          });
        }

        card.querySelectorAll(".chip").forEach(chip => {
          chip.addEventListener("click", evt => {
            evt.stopPropagation();
            const z = parseInt(chip.dataset.z, 10);
            const el = els.find(e => e.z === z);
            if (el) openDrawer(el);
          });
        });

        grid.appendChild(card);
      });
    }

    renderCategoryExplorer();

    /* ============================================================
     * Class Materials section — wire analytics on the audio player
     * and the four document cards. (v1.4.0)
     * ============================================================ */
    (function wireClassMaterials() {
      const audio = document.getElementById("class-audio");
      if (audio) {
        audio.addEventListener("play", () => {
          fti_track("class_audio_play", {
            title: "The Hidden Logic of the Periodic Table",
            duration_seconds: Math.round(audio.duration || 1477),
            host: "cloudflare-r2"
          });
        }, { once: true });
      }

      document.querySelectorAll(".doc-card[data-material]").forEach(card => {
        card.addEventListener("click", () => {
          fti_track("class_material_open", {
            material: card.dataset.material,
            href: card.getAttribute("href")
          });
        });
      });
    })();
  </script>
</body>
</html>