:root {
    --bg: #FFFFFF; --side: #F7F7F5; --ink: #37352F; --dim: rgba(55,53,47,0.65); --faint: rgba(55,53,47,0.45);
    --line: rgba(55,53,47,0.12); --hover: rgba(55,53,47,0.06); --sel: rgba(55,53,47,0.08); --call: #F1F1EF; --cell: rgba(55,53,47,0.16); --th: #F7F7F5;
    --c-bg: #E7F3F8; --c-fg: #337EA9; --p-bg: #F6F3F9; --p-fg: #9065B0; --w-bg: #FBECDD; --w-fg: #D9730D; --e-bg: #FDEBEC; --e-fg: #D44C47; --t-bg: #EDF3EC; --t-fg: #448361;
    --ui: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --title: "Jost", ui-sans-serif, -apple-system, sans-serif;
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #191919; --side: #202020; --ink: rgba(255,255,255,0.81); --dim: rgba(255,255,255,0.52); --faint: rgba(255,255,255,0.32);
      --line: rgba(255,255,255,0.12); --hover: rgba(255,255,255,0.055); --sel: rgba(255,255,255,0.08); --call: #252525; --cell: rgba(255,255,255,0.13); --th: #202020;
      --c-bg: #1F3A4D; --c-fg: #82B8DE; --p-bg: #382D47; --p-fg: #B392D6; --w-bg: #4A3020; --w-fg: #E6A060; --e-bg: #4A2626; --e-fg: #E58E8A; --t-bg: #233A2B; --t-fg: #7CBF8E;
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --bg: #191919; --side: #202020; --ink: rgba(255,255,255,0.81); --dim: rgba(255,255,255,0.52); --faint: rgba(255,255,255,0.32);
    --line: rgba(255,255,255,0.12); --hover: rgba(255,255,255,0.055); --sel: rgba(255,255,255,0.08); --call: #252525; --cell: rgba(255,255,255,0.13); --th: #202020;
    --c-bg: #1F3A4D; --c-fg: #82B8DE; --p-bg: #382D47; --p-fg: #B392D6; --w-bg: #4A3020; --w-fg: #E6A060; --e-bg: #4A2626; --e-fg: #E58E8A; --t-bg: #233A2B; --t-fg: #7CBF8E;
    color-scheme: dark;
  }
  /* Jost, the presentation's title face (SIL Open Font License), ties the site to the slides. */
  @font-face { font-family: "Jost"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/jost-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
  @font-face { font-family: "Jost"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/jost-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
  html, body { height: 100%; background: var(--bg); color: var(--ink); }
  body { display: flex; flex-direction: column; font-family: var(--ui); font-size: 16px; line-height: 1.5; }
  a { color: inherit; }
  svg { display: block; }
  .app { flex: 1; display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 0; }

  /* Sidebar tree: chevrons, indentation, and guide lines carry the hierarchy. */
  .side { background: var(--side); overflow-y: auto; font-size: 14px; padding: 12px 0 40px; }
  .grp { margin: 0 0 4px; }
  .grp > .row { display: flex; align-items: center; gap: 2px; margin: 0 6px; border-radius: 5px; }
  .grp > .row:hover { background: var(--hover); }
  .grp > .row.on { background: var(--sel); }
  .chev { width: 22px; height: 24px; display: flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--dim); cursor: pointer; border-radius: 4px; padding: 0; flex: none; }
  .chev:hover { background: var(--hover); color: var(--ink); }
  .chev svg { width: 10px; height: 10px; transition: transform 0.12s; }
  .grp.open > .row .chev svg { transform: rotate(90deg); }
  .grp > .row a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 2px; color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .grp > .row a:hover, .kids a:hover { text-decoration: none; }
  .grp > .row a svg { width: 16px; height: 16px; color: var(--dim); flex: none; }
  .kids { display: none; margin: 2px 0 8px 23px; padding-left: 10px; border-left: 1px solid var(--line); }
  .grp.open > .kids { display: block; }
  .kids a { display: flex; align-items: center; gap: 8px; padding: 3px 8px; margin: 1px 8px 1px 0; color: var(--dim); border-radius: 4px; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kids a:hover { background: var(--hover); color: var(--ink); }
  .kids a.on { background: var(--sel); color: var(--ink); font-weight: 500; }
  .kids a svg { width: 14px; height: 14px; flex: none; }

  main { overflow-y: auto; }
  .top { position: sticky; top: 0; background: var(--bg); display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; font-size: 14px; color: var(--dim); z-index: 5; }
  .crumb a { color: var(--dim); }
  .crumb .sep { margin: 0 6px; color: var(--faint); }
  .tools { display: flex; align-items: center; gap: 10px; font-size: 13px; }
  .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
  .seg span { padding: 2px 9px; cursor: pointer; color: var(--dim); }
  .seg span + span { border-left: 1px solid var(--line); }
  .seg span.on { background: var(--sel); color: var(--ink); }
  #theme { background: none; border: 1px solid var(--line); color: var(--dim); border-radius: 5px; padding: 2px 9px; font: inherit; font-size: 13px; cursor: pointer; }
  #theme:hover, .seg span:hover { background: var(--hover); }

  .page { max-width: 760px; margin: 0 auto; padding: 36px 60px 140px; }
  .pic { margin-bottom: 12px; }
  .pic svg { width: 46px; height: 46px; }
  .page h1 { font-family: var(--title); font-size: 42px; font-weight: 600; line-height: 1.15; letter-spacing: -0.005em; margin: 0 0 14px; }
  .page h3 { font-family: var(--title); font-size: 21px; font-weight: 500; margin: 26px 0 4px; }
  .props { margin: 0 0 18px; font-size: 14px; }
  .props .row { display: grid; grid-template-columns: 160px 1fr; align-items: start; padding: 5px 0; }
  .props .k { color: var(--dim); }
  .sel { display: inline-block; border-radius: 3px; padding: 0 6px; font-size: 14px; line-height: 1.6; margin: 0 4px 2px 0; }
  .t-Concept { background: var(--c-bg); color: var(--c-fg); } .t-Person { background: var(--p-bg); color: var(--p-fg); } .t-Work { background: var(--w-bg); color: var(--w-fg); }
  .t-Event { background: var(--e-bg); color: var(--e-fg); } .t-Tool { background: var(--t-bg); color: var(--t-fg); }
  .c-Concept { color: var(--c-fg); } .c-Person { color: var(--p-fg); } .c-Work { color: var(--w-fg); } .c-Event { color: var(--e-fg); } .c-Tool { color: var(--t-fg); } .c-Section { color: var(--dim); }
  .d-Concept { background: var(--c-fg); } .d-Person { background: var(--p-fg); } .d-Work { background: var(--w-fg); } .d-Event { background: var(--e-fg); } .d-Tool { background: var(--t-fg); } .d-Section { background: var(--faint); }

  /* Links: internal links are underlined text; external links carry an arrow and open a new tab. */
  .lk { color: var(--ink); }
  .lk .tx { border-bottom: 1px solid var(--cell); }
  a.lk:hover { text-decoration: none; }
  a.lk:hover .tx { border-bottom-color: var(--ink); }
  a.ext { color: var(--ink); border-bottom: 1px solid var(--cell); white-space: nowrap; }
  a.ext::after { content: "\2197"; margin-left: 3px; font-size: 0.85em; color: var(--dim); }
  a.ext:hover { text-decoration: none; border-bottom-color: var(--ink); }
  /* The site title heads the sidebar, with the talk's sections beneath it. */
  .site { display: block; margin: 0 6px 2px; padding: 4px 10px 6px; border-radius: 5px; color: var(--ink); font-family: var(--title); font-weight: 600; font-size: 17px; line-height: 1.25; }
  .site:hover { background: var(--hover); text-decoration: none; }
  .site.on { background: var(--sel); }
  .home { margin: 0 0 12px 16px; padding-left: 10px; border-left: 1px solid var(--line); }
  .home a { display: flex; align-items: center; gap: 8px; padding: 3px 8px; margin: 1px 8px 1px 0; color: var(--dim); border-radius: 4px; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .home a:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
  .home a.on { background: var(--sel); color: var(--ink); font-weight: 500; }
  .home a svg { width: 14px; height: 14px; flex: none; }
  .rel { margin-right: 12px; }
  .mention { display: flex; align-items: baseline; gap: 8px; padding: 4px 6px; border-radius: 4px; }
  .mention:hover { background: var(--hover); text-decoration: none; }
  .mention .lk { flex: none; align-self: center; font-weight: 500; }
  .mention .d { color: var(--dim); font-size: 14px; }

  hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0 18px; }
  .callout { display: flex; gap: 10px; background: var(--call); border-radius: 4px; padding: 14px 16px; margin: 6px 0 12px; }
  .callout svg { width: 18px; height: 18px; margin-top: 3px; flex: none; }
  .tog { margin: 2px 0; }
  .tog > .th { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 3px 2px; border-radius: 4px; }
  .tog > .th:hover { background: var(--hover); }
  .tog > .th .chev { width: 20px; height: 22px; }
  .tog.open > .th .chev svg { transform: rotate(90deg); }
  .tog > .tb { display: none; padding: 2px 0 8px 26px; }
  .tog.open > .tb { display: block; }
  .tog .ttl { font-weight: 600; }
  .bl { font-size: 14px; color: var(--dim); margin: -6px 0 14px; }
  .dbv { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 18px 0 0; font-size: 14px; overflow-x: auto; }
  .dbv span { padding: 6px 10px; color: var(--dim); cursor: pointer; white-space: nowrap; }
  .dbv span.on { color: var(--ink); border-bottom: 2px solid var(--ink); }
  table.db { width: 100%; border-collapse: collapse; font-size: 14px; }
  table.db th { text-align: left; font-weight: 500; color: var(--dim); padding: 6px 8px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
  table.db td { padding: 6px 8px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); vertical-align: top; }
  table.db th:last-child, table.db td:last-child { border-right: 0; }
  table.db td.nm .lk { font-weight: 500; }
  table.db tr:hover td { background: var(--hover); }
  table.simple { border-collapse: collapse; font-size: 15px; margin: 8px 0 14px; }
  table.simple td, table.simple th { border: 1px solid var(--cell); padding: 6px 10px; text-align: left; color: var(--ink); }
  table.simple th { background: var(--th); font-weight: 600; }
  figure { margin: 12px 0; } figure img { border: 0; border-radius: 4px; } figcaption { color: var(--dim); font-size: 14px; }
  ol.src { font-size: 15px; } ol.src li { margin: 3px 0; }
  /* Pairing (the companion site): the code screen, the session pill, the section the talk is on. */
  [hidden] { display: none !important; }
  /* The code screen: the museum listing's photo at the width of the text, the title, the code. */
  #join { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px 24px 80px; overflow-y: auto; }
  /* Two columns on a laptop, the photo beside the title and the code; stacked on a phone. */
  #join .card { max-width: 1120px; width: 100%; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: center; }
  #join .card figure { margin: 0; }
  #join .card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 4px; background: var(--call); }
  #join .card figcaption { text-align: right; font-size: 12px; color: var(--faint); margin-top: 6px; }
  /* As on the deck's title: the line, then its aside in parentheses, a third its size, light and dim. */
  #join h1 { font-family: var(--title); font-weight: 400; font-size: min(56px, 3.9vw); line-height: 1.1; letter-spacing: 0.005em; white-space: nowrap; margin: 0; }
  #join h1 .aside { display: block; font-weight: 300; font-size: 0.31em; line-height: 1.3; letter-spacing: 0.01em; color: var(--dim); margin-top: 0.3em; }
  #join p { margin: 0 0 14px; }
  #join .prompt { margin-top: 34px; }
  #join input { display: block; width: 12ch; margin: 18px 0 10px; font: 600 34px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.28em; text-transform: uppercase; text-align: center; padding: 10px 6px 10px 14px; border: 1px solid var(--cell); border-radius: 6px; background: var(--bg); color: var(--ink); }
  #join input:focus { outline: 2px solid var(--c-fg); outline-offset: 1px; }
  #join input { caret-color: transparent; }  /* centered, so a caret would sit mid-box; the outline shows focus */
  #join input:disabled { opacity: 0.6; }
  #join .err { color: var(--e-fg); min-height: 1.5em; }
  #join .back { color: var(--dim); font-size: 14px; }
  .pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 1px 10px; color: var(--dim); white-space: nowrap; }
  .pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--t-fg); animation: breathe 2.4s ease-in-out infinite; }
  .pill a { color: var(--ink); }
  @keyframes breathe { 50% { opacity: 0.35; } }
  .home a .now, .tog .now { margin-left: auto; flex: none; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-fg); background: var(--c-bg); border-radius: 3px; padding: 0 5px; }
  .tog .now { margin-left: 8px; }
  .more { color: var(--faint); font-size: 14px; margin-top: 18px; }
  @media (prefers-reduced-motion: reduce) { .pill .dot { animation: none; } }
  @media (max-width: 860px) { .tools .lbl { display: none; } }
  @media (max-width: 760px) { #join .card { grid-template-columns: minmax(0, 1fr); gap: 28px; } #join h1 { font-size: min(56px, 11vw); } }
  @media (max-width: 760px) { .app { grid-template-columns: minmax(0, 1fr); } .side { display: none; } .page { padding: 24px 20px 100px; } .props .row { grid-template-columns: 120px 1fr; } .seg { display: none; } }