/* Keynote companions, re-skinned to the Valley of the Commons light editorial
   design (see docs/style-guide.md). Self-contained: palette tokens mirror
   home.css so a companion page can render standalone. */
:root {
  --cream: #f5f0e8;
  --orange: #c4622d;
  --orange-dark: #a9521f;
  --ink: #1a1a1a;
  --green-dark: #2c3e2d;
  --green-soft: #7a9e7e;
  --amber: #8b6914;
  --muted: #666;
  --line: #e5e5e5;
  --bg-soft: #f8f8f8;
  --serif: 'Urbanist', system-ui, sans-serif;
  --sans: 'Inter', system-ui, sans-serif;
  --maxw: 1160px;
  --pad: clamp(20px, 5vw, 56px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--serif);
  color: var(--ink);
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 40px var(--pad) 72px; }
.back {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 12px/1 var(--sans); letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 32px;
}
.back:hover { color: var(--orange); }
.eyebrow {
  font: 600 12px/1.4 var(--sans); letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--orange);
}

/* ---------- Companion ---------- */
.companion { max-width: 760px; margin: 0 auto; }
.companion__head { margin-bottom: 40px; }
.companion__title {
  font-family: var(--serif); font-weight: 800; letter-spacing: -0.01em;
  font-size: clamp(1.9rem, 4.5vw, 3rem); line-height: 1.08; margin: 12px 0 10px;
}
.companion__speaker { font-size: 1.15rem; color: var(--muted); font-weight: 500; }
.companion__socials { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; }
.companion__socials a {
  font: 500 13px/1 var(--sans); color: var(--orange);
  border-bottom: 1px solid color-mix(in srgb, var(--orange) 40%, transparent);
  padding-bottom: 2px;
}
.companion__socials a:hover { color: var(--orange-dark); border-color: currentColor; }
.companion__watch {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  font: 600 14px/1 var(--sans); color: var(--cream); background: var(--orange);
  padding: 10px 16px; border-radius: 999px; text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}
.companion__watch:hover { background: var(--orange-dark); transform: translateY(-1px); }

.beats { display: flex; flex-direction: column; gap: 18px; }
.beat {
  background: var(--cream); border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  border-radius: 12px; padding: 22px 24px;
}
.beat__head { display: flex; align-items: baseline; gap: 12px; }
.beat__n { font: 700 13px/1 var(--sans); color: var(--orange); letter-spacing: 1px; }
.beat__title { font-family: var(--serif); font-weight: 700; font-size: 1.2rem; }
.beat__body { margin-top: 10px; color: #333; font-size: 1.02rem; }
.beat__links { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.beat__links a { font: 500 14px/1.4 var(--sans); color: var(--green-dark); }
.beat__links a::before { content: "\2197  "; color: var(--orange); }
.beat__links a:hover { color: var(--orange); }

.cta {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 40px; font: 600 13px/1 var(--sans); letter-spacing: 1.4px; text-transform: uppercase;
  padding: 15px 30px; border-radius: 2px; background: var(--orange); color: #fff;
  transition: background .2s ease, transform .15s ease;
}
.cta:hover { background: var(--orange-dark); transform: translateY(-1px); }

/* ---------- Index ---------- */
.index__head { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.index__title { font-family: var(--serif); font-weight: 800; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.06; margin: 12px 0 12px; }
.index__sub { color: var(--muted); font-size: 1.05rem; max-width: 46ch; margin: 0 auto; }
/* The one non-talk destination, mirroring learn-ai.london/valley: the AI course.
   A prominent link card sitting above the week list, accented in orange. */
.ai-course {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  text-decoration: none; color: var(--ink);
  background: color-mix(in srgb, var(--orange) 8%, var(--cream));
  border: 1px solid color-mix(in srgb, var(--orange) 35%, var(--line));
  border-left: 3px solid var(--orange);
  border-radius: 12px; padding: 22px 26px; margin: 0 0 40px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.ai-course:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -18px rgba(0,0,0,.35); }
.ai-course__title { font-family: var(--serif); font-weight: 800; font-size: 1.5rem; margin: 6px 0 4px; }
.ai-course__sub { color: var(--muted); font-size: .96rem; max-width: 52ch; }
.ai-course .card__arrow { color: var(--orange); font-size: 1.5rem; transition: transform .18s ease; flex-shrink: 0; }
.ai-course:hover .card__arrow { transform: translateX(4px); }

.week { margin-bottom: 40px; }
.week__label { font: 600 12px/1.4 var(--sans); letter-spacing: 2px; text-transform: uppercase; color: var(--orange); }
.week__theme { font-family: var(--serif); font-weight: 700; font-size: 1.5rem; margin: 4px 0 18px; }
.grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .grid { grid-template-columns: 1fr 1fr; } .card--wide { grid-column: 1 / -1; } }

.card {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--cream); border: 1px solid var(--line); border-left: 3px solid var(--spine, var(--orange));
  border-radius: 12px; padding: 18px 22px; transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -18px rgba(0,0,0,.35); }
.card__day { font: 600 11px/1.4 var(--sans); letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.card__speaker { font-family: var(--serif); font-weight: 700; font-size: 1.18rem; margin: 3px 0 2px; }
.card__talk { color: var(--muted); font-size: .96rem; }
.card__arrow { color: var(--spine, var(--orange)); font-size: 1.3rem; transition: transform .18s ease; flex-shrink: 0; }
.card:hover .card__arrow { transform: translateX(4px); }
/* Coming-soon cards are buttons; reset button chrome so they match .card. */
.card--soon { appearance: none; -webkit-appearance: none; font: inherit; color: inherit; text-align: left; width: 100%; cursor: pointer; }
.card__soonmsg { font: 700 11px/1.4 var(--sans); letter-spacing: 1.4px; text-transform: uppercase; color: var(--orange); }

/* ---------- Live quiz / survey ---------- */
.session { min-height: 40vh; }
.kq-center { text-align: center; padding: 40px 0; }
.kq-h { font-family: var(--serif); font-weight: 800; font-size: clamp(1.4rem, 3.5vw, 2rem); line-height: 1.12; margin: 8px 0; }
.kq-sub { color: var(--muted); }
.kq-err { color: #b3261e; font: 500 14px/1.4 var(--sans); margin-top: 10px; }
.kq-q { max-width: 640px; margin: 0 auto; }
.kq-opts { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.kq-opt {
  text-align: left; font: 500 1.05rem/1.4 var(--serif); color: var(--ink);
  background: var(--cream); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.kq-opt:hover:not(:disabled) { border-color: var(--orange); }
.kq-opt:active:not(:disabled) { transform: scale(.99); }
.kq-opt.is-mine { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 12%, var(--cream)); }
.kq-opt.is-correct { border-color: var(--green-soft); background: color-mix(in srgb, var(--green-soft) 24%, #fff); }
.kq-opt:disabled { cursor: default; }
.kq-join { display: flex; gap: 10px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.kq-input { font: 500 1rem var(--serif); padding: 12px 16px; border: 1px solid var(--line); border-radius: 8px; min-width: 200px; }
.kq-board { max-width: 560px; margin: 0 auto; }
.kq-list { list-style: none; margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.kq-list li { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 12px; padding: 12px 16px; background: var(--cream); border: 1px solid var(--line); border-radius: 10px; }
.kq-rank { font: 700 14px var(--sans); color: var(--orange); }
.kq-name { font-family: var(--serif); font-weight: 600; }
.kq-score { font: 700 15px var(--sans); }
.kq-bar { margin-top: 14px; }
.kq-bar__label { display: flex; justify-content: space-between; font: 500 14px/1.4 var(--sans); margin-bottom: 6px; }
.kq-bar__track { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; height: 12px; overflow: hidden; }
.kq-bar__fill { background: var(--orange); height: 100%; transition: width .4s ease; }
#kq-hostbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; background: #1a1a1a; color: #fff; padding: 10px 16px; }
.kq-hostbar__row { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.kq-hostbar__meta { font: 500 12px/1.4 var(--sans); color: #bbb; }
.kq-hostbar__btns { display: flex; gap: 8px; }
#kq-hostbar button { font: 600 12px/1 var(--sans); letter-spacing: .5px; text-transform: uppercase; padding: 9px 14px; border-radius: 4px; border: 1px solid #444; background: var(--orange); color: #fff; cursor: pointer; }
#kq-hostbar button[data-action="reset"] { background: transparent; color: #ccc; }

/* =====================================================================
   Keynote hub: frosted-glass collapsible cards (companion pages).
   Scoped to body.kn-glass so the index (/keynote) is untouched for now.
   A warm dusk backdrop gives the frosted glass something to refract.
   ===================================================================== */
body.kn-glass { background: #141009; color: #f3ece0; }
.kn-backdrop {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(58% 50% at 82% 6%, rgba(196,98,45,.24), transparent 60%),
    radial-gradient(55% 55% at 8% 94%, rgba(122,158,126,.17), transparent 62%),
    radial-gradient(42% 42% at 52% 48%, rgba(139,105,20,.10), transparent 70%),
    linear-gradient(162deg, #1c170f 0%, #141009 55%, #0d0a06 100%);
}

/* Header, restyled for the dark backdrop */
body.kn-glass .back { color: rgba(243,236,224,.58); }
body.kn-glass .back:hover { color: #e5915a; }
body.kn-glass .eyebrow { color: #e5915a; }
body.kn-glass .companion__title { color: #faf5ec; }
body.kn-glass .companion__speaker { color: rgba(243,236,224,.72); }
body.kn-glass .companion__socials a { color: #e5915a; border-color: color-mix(in srgb,#e5915a 40%,transparent); }
body.kn-glass .companion__socials a:hover { color: #f0a978; }
body.kn-glass .cta { background: #c4622d; }
body.kn-glass .cta:hover { background: #d97a44; }

/* The hub grid of tiles */
.kn-hub { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 4px 0 8px; }
@media (min-width: 640px) { .kn-hub { grid-template-columns: 1fr 1fr; } }

.kn-tile {
  display: flex; align-items: center; gap: 15px; width: 100%; text-align: left; cursor: pointer;
  padding: 19px 20px; border-radius: 20px; color: #f3ece0; appearance: none; -webkit-appearance: none;
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 1px 0 rgba(255,255,255,.10) inset, 0 20px 42px -28px rgba(0,0,0,.85);
  transition: transform .32s cubic-bezier(.22,1,.36,1), box-shadow .32s ease, border-color .32s ease, background .32s ease;
}
.kn-tile:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,.18));
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.05));
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 28px 54px -26px rgba(0,0,0,.9), 0 0 46px -18px var(--accent);
}
.kn-tile:active { transform: translateY(-1px) scale(.99); }
.kn-tile__icon {
  width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 13px;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}
.kn-tile__icon svg { width: 22px; height: 22px; }
.kn-tile__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.kn-tile__label { font: 700 1.12rem/1.15 var(--serif); letter-spacing: -.01em; color: #faf5ec; }
.kn-tile__hint { font: 500 .88rem/1.35 var(--sans); color: rgba(243,236,224,.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-tile__meta { font: 600 10.5px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--accent); flex: 0 0 auto; align-self: flex-start; padding-top: 4px; }
.kn-tile__open { flex: 0 0 auto; color: rgba(243,236,224,.38); transition: transform .3s cubic-bezier(.22,1,.36,1), color .3s ease; }
.kn-tile__open svg { width: 18px; height: 18px; }
.kn-tile:hover .kn-tile__open { color: var(--accent); transform: translate(2px,-2px); }

/* Sheet overlay (opens with a FLIP morph from the tile, in keynote.js) */
.kn-overlay {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 22px;
  background: rgba(9,7,4,.5); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
}
.kn-sheet {
  position: relative; width: min(760px, 100%); max-height: 88vh; overflow: hidden; border-radius: 22px;
  background: linear-gradient(180deg, rgba(32,26,18,.82), rgba(19,15,10,.9));
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(30px) saturate(1.35); -webkit-backdrop-filter: blur(30px) saturate(1.35);
  box-shadow: 0 44px 110px -30px rgba(0,0,0,.92), 0 1px 0 rgba(255,255,255,.15) inset;
  color: #f3ece0; transform-origin: center; will-change: transform, opacity;
}
.kn-sheet__close {
  position: absolute; top: 14px; right: 14px; z-index: 2; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: #f3ece0;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .2s ease;
}
.kn-sheet__close:hover { background: rgba(255,255,255,.18); }
.kn-sheet__close svg { width: 18px; height: 18px; }
.kn-sheet__scroll { max-height: 88vh; overflow-y: auto; padding: 40px clamp(22px,4vw,44px) 44px; }

/* Panel content */
.kn-panel__eyebrow { font: 600 12px/1.4 var(--sans); letter-spacing: 2.5px; text-transform: uppercase; color: #e5915a; }
.kn-panel__title { font: 800 clamp(1.5rem,3.4vw,2.1rem)/1.12 var(--serif); letter-spacing: -.01em; margin: 10px 0 6px; color: #faf5ec; }
.kn-panel__note { color: rgba(243,236,224,.62); font: 500 .96rem/1.5 var(--sans); margin-bottom: 22px; max-width: 56ch; }

/* Beats inside the sheet */
.kn-beats { display: flex; flex-direction: column; gap: 13px; margin-top: 18px; }
.kn-sheet .beat { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); border-left: 3px solid var(--accent); border-radius: 14px; padding: 17px 19px; }
.kn-sheet .beat__n { color: var(--accent); }
.kn-sheet .beat__title { color: #faf5ec; }
.kn-sheet .beat__body { color: rgba(243,236,224,.82); }
.kn-sheet .beat__links { border-top-color: rgba(255,255,255,.1); }
.kn-sheet .beat__links a { color: #a9c9ad; }
.kn-sheet .beat__links a::before { color: var(--accent); }
.kn-sheet .beat__links a:hover { color: #e5915a; }

/* Quiz / survey question cards */
.kn-qcards { display: flex; flex-direction: column; gap: 15px; margin-top: 6px; }
.kn-qcard { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 16px 18px; }
.kn-qcard__head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 13px; }
.kn-qcard__n { font: 700 12px/1 var(--sans); color: var(--accent); flex: 0 0 auto; }
.kn-qcard__q { font: 700 1.02rem/1.3 var(--serif); color: #faf5ec; }
.kn-opts { display: flex; flex-direction: column; gap: 9px; }
.kn-opt { display: grid; gap: 6px; }
.kn-opt__label { font: 500 .92rem/1.35 var(--sans); color: rgba(243,236,224,.84); }
.kn-opt__track { height: 7px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.kn-opt__fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .5s ease; }

/* Readings essay */
.kn-read__lede { font: 500 1.08rem/1.6 var(--serif); color: rgba(243,236,224,.82); margin: 6px 0 10px; }
.kn-read__h { font: 700 1.2rem/1.2 var(--serif); color: #faf5ec; margin: 32px 0 14px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.09); }
.kn-read__p { font: 400 1rem/1.66 var(--serif); color: rgba(243,236,224,.82); margin-bottom: 14px; }
.kn-read__intro { color: rgba(243,236,224,.72); }
.kn-read__quote { margin: 22px 0; padding: 16px 20px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 11%, transparent); border-radius: 0 14px 14px 0; font: 500 1.06rem/1.55 var(--serif); font-style: italic; color: #f6efe4; }
.kn-cases { display: flex; flex-direction: column; gap: 12px; }
.kn-case { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-left: 3px solid var(--accent); border-radius: 14px; padding: 16px 18px; }
.kn-case__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; flex-wrap: wrap; }
.kn-case__h { font: 700 1.02rem var(--serif); color: #faf5ec; }
.kn-case__era { font: 500 11px var(--sans); letter-spacing: .05em; color: var(--accent); }
.kn-mechs { display: flex; flex-direction: column; gap: 15px; }
.kn-mech { display: flex; gap: 12px; }
.kn-mech__dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; margin-top: 8px; background: var(--accent); box-shadow: 0 0 12px -1px var(--accent); }
.kn-mech__h { font: 700 1rem var(--serif); color: #faf5ec; margin-bottom: 3px; }

@media (prefers-reduced-motion: reduce) {
  .kn-tile, .kn-tile__open { transition: none; }
}

/* Result tallies + standings inside quiz/survey panels */
.kn-opt__pct { color: var(--accent); font-weight: 700; font-size: .82em; margin-left: 4px; }
.kn-standwrap { margin: 0 0 20px; padding: 16px 18px; border-radius: 14px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); }
.kn-standcap { font: 600 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.kn-stands { list-style: none; display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; }
.kn-stand { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 12px; }
.kn-stand__r { font: 700 13px var(--sans); color: var(--accent); }
.kn-stand__n { font: 600 1rem var(--serif); color: #faf5ec; }
.kn-stand__s { font: 700 14px var(--sans); color: rgba(243,236,224,.9); }

/* =====================================================================
   Index (/keynote) parity: the same warm dusk backdrop + frosted glass,
   so the index and the companion pages share one design language.
   ===================================================================== */
body.kn-glass .index__title { color: #faf5ec; }
body.kn-glass .index__sub { color: rgba(243,236,224,.66); }
body.kn-glass .week__label { color: #e5915a; }
body.kn-glass .week__theme { color: #faf5ec; }
body.kn-glass .card,
body.kn-glass .ai-course {
  color: #f3ece0;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.038));
  border: 1px solid rgba(255,255,255,.12);
  border-left: 3px solid var(--spine, #c4622d);
  backdrop-filter: blur(16px) saturate(1.25); -webkit-backdrop-filter: blur(16px) saturate(1.25);
  box-shadow: 0 1px 0 rgba(255,255,255,.09) inset, 0 20px 40px -28px rgba(0,0,0,.85);
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
body.kn-glass .ai-course { border-left-color: #c4622d; }
body.kn-glass .card:hover,
body.kn-glass .ai-course:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--spine, #c4622d) 55%, rgba(255,255,255,.18));
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.05));
  box-shadow: 0 1px 0 rgba(255,255,255,.13) inset, 0 28px 52px -26px rgba(0,0,0,.9), 0 0 44px -18px var(--spine, #c4622d);
}
body.kn-glass .card__speaker,
body.kn-glass .ai-course__title { color: #faf5ec; }
body.kn-glass .card__talk,
body.kn-glass .ai-course__sub { color: rgba(243,236,224,.62); }
body.kn-glass .card__soonmsg { color: #e5915a; }

/* =====================================================================
   Live session (kq-*) on the warm dusk backdrop. During an active session
   body.kn-glass is set, so these override the light editorial defaults with
   the same frosted-glass language as the hub. Scoped so nothing leaks to a
   light context. session.mjs re-renders the question view every second, so
   entrance keyframes live only on phases that render once (board), never on
   the ticking question.
   ===================================================================== */
body.kn-glass .kq-center { text-align: center; padding: 48px 0; }
body.kn-glass .kq-h { color: #faf5ec; }
body.kn-glass .kq-sub { color: rgba(243,236,224,.62); }
body.kn-glass .kq-err { color: #ff9c86; }

/* Answer options: frosted glass tiles that lift and glow on hover */
body.kn-glass .kq-q { max-width: 640px; margin: 0 auto; }
body.kn-glass .kq-opts { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
body.kn-glass .kq-opt {
  text-align: left; font: 500 1.05rem/1.4 var(--serif); color: #f3ece0;
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.12); border-radius: 15px; padding: 16px 20px;
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 16px 34px -26px rgba(0,0,0,.8);
  transition: transform .2s cubic-bezier(.22,1,.36,1), border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
body.kn-glass .kq-opt:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, #e5915a 55%, rgba(255,255,255,.2));
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 22px 42px -24px rgba(0,0,0,.85), 0 0 34px -16px #e5915a;
}
body.kn-glass .kq-opt:active:not(:disabled) { transform: translateY(0) scale(.99); }
body.kn-glass .kq-opt.is-mine {
  border-color: #e5915a; background: color-mix(in srgb, #e5915a 16%, rgba(255,255,255,.04));
  box-shadow: 0 0 0 1px #e5915a, 0 0 30px -12px #e5915a;
}
body.kn-glass .kq-opt.is-correct {
  border-color: #8fca94; background: color-mix(in srgb, #7a9e7e 26%, rgba(255,255,255,.04));
  box-shadow: 0 0 0 1px #8fca94, 0 0 40px -12px #8fca94; animation: kqCorrect 1.8s ease 1;
}
@keyframes kqCorrect {
  0% { box-shadow: 0 0 0 1px #8fca94, 0 0 0 -12px #8fca94; }
  40% { box-shadow: 0 0 0 1px #8fca94, 0 0 56px -4px #8fca94; }
  100% { box-shadow: 0 0 0 1px #8fca94, 0 0 40px -12px #8fca94; }
}
body.kn-glass .kq-opt:disabled { cursor: default; }

/* Join form */
body.kn-glass .kq-join { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
body.kn-glass .kq-input {
  font: 500 1rem var(--serif); color: #f3ece0; padding: 13px 18px; min-width: 220px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 12px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
body.kn-glass .kq-input::placeholder { color: rgba(243,236,224,.4); }
body.kn-glass .kq-input:focus { outline: none; border-color: #e5915a; box-shadow: 0 0 0 3px rgba(229,145,90,.18); }

/* Leaderboard */
body.kn-glass .kq-board { max-width: 560px; margin: 0 auto; animation: kqIn .5s cubic-bezier(.22,1,.36,1) both; }
@keyframes kqIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
body.kn-glass .kq-list { list-style: none; margin-top: 18px; display: flex; flex-direction: column; gap: 8px; padding: 0; }
body.kn-glass .kq-list li {
  display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 14px; padding: 13px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.1); border-radius: 13px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
body.kn-glass .kq-rank { font: 700 15px var(--sans); color: #e5915a; text-align: center; }
body.kn-glass .kq-name { font-family: var(--serif); font-weight: 600; color: #faf5ec; }
body.kn-glass .kq-score { font: 700 16px var(--sans); color: rgba(243,236,224,.92); }
body.kn-glass .kq-list li:nth-child(1) { border-color: color-mix(in srgb, #e5b45a 50%, rgba(255,255,255,.12)); box-shadow: 0 0 34px -18px #e5b45a; }
body.kn-glass .kq-list li:nth-child(1) .kq-rank { color: #f0c469; }
body.kn-glass .kq-list li:nth-child(2) .kq-rank { color: #d8d8e0; }
body.kn-glass .kq-list li:nth-child(3) .kq-rank { color: #d69a6a; }

/* Poll bars */
body.kn-glass .kq-bar { margin-top: 16px; }
body.kn-glass .kq-bar__label { display: flex; justify-content: space-between; font: 500 14px/1.4 var(--sans); color: rgba(243,236,224,.85); margin-bottom: 7px; }
body.kn-glass .kq-bar__label span { color: #e5915a; font-weight: 700; }
body.kn-glass .kq-bar__track { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; height: 12px; overflow: hidden; }
body.kn-glass .kq-bar__fill { background: linear-gradient(90deg, #c4622d, #e5915a); height: 100%; border-radius: 999px; box-shadow: 0 0 18px -4px #e5915a; transition: width .5s cubic-bezier(.22,1,.36,1); }

/* Host bar: frosted dark glass */
body.kn-glass #kq-hostbar {
  background: rgba(16,13,9,.72); border-top: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  color: #f3ece0; box-shadow: 0 -20px 50px -30px rgba(0,0,0,.9);
}
body.kn-glass #kq-hostbar .kq-hostbar__meta { color: rgba(243,236,224,.55); }
body.kn-glass #kq-hostbar button {
  background: #c4622d; border: 1px solid color-mix(in srgb, #e5915a 40%, transparent); color: #fff;
  border-radius: 8px; transition: background .18s ease, transform .12s ease;
}
body.kn-glass #kq-hostbar button:hover { background: #d97a44; transform: translateY(-1px); }
body.kn-glass #kq-hostbar button[data-action="reset"] { background: transparent; color: rgba(243,236,224,.6); border-color: rgba(255,255,255,.16); }
body.kn-glass #kq-hostbar button[data-action="reset"]:hover { color: #f3ece0; }

/* ============================================================================
   Constellation / Timeline view on the /keynote index (graph.mjs, keynote.js).
   Warm-dusk twin of the Learn AI London /valley 3D view.
   ========================================================================== */
.kn-timeline[hidden], .vg-wrap[hidden] { display: none; }

.vg-toggle {
  display: inline-flex;
  gap: 4px;
  margin: 22px auto 4px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid rgba(243, 236, 224, 0.14);
  background: rgba(20, 16, 9, 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}
.vg-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  font: 600 11px/1 var(--sans);
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: rgba(243, 236, 224, 0.6);
  transition: color .25s ease, background .25s ease, box-shadow .25s ease;
}
.vg-toggle__btn:hover { color: #faf5ec; }
.vg-toggle__btn.is-active {
  color: #241206;
  background: linear-gradient(100deg, #ffb454, #e5915a);
  box-shadow: 0 0 22px -6px rgba(229, 145, 90, 0.8);
}

.vg-wrap {
  position: relative;
  width: 100%;
  height: min(74vh, 680px);
  margin-top: 14px;
  overflow: hidden;
  touch-action: none;
}
.vg-wrap canvas { display: block; }
.vg-hint {
  position: absolute;
  bottom: 14px; left: 0; right: 0;
  text-align: center;
  font: 500 10.5px/1 var(--sans);
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: rgba(243, 236, 224, 0.5);
  pointer-events: none;
  z-index: 2;
}

.vg-pole {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
}
.vg-pole__emoji { font-size: 18px; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--pole) 70%, transparent)); }
.vg-pole__label {
  font: 600 9.5px/1 var(--sans);
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--pole) 78%, white 22%);
}

.vg-card {
  width: 190px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 11px 13px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background: rgba(20, 16, 9, 0.82);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 0 30px -8px color-mix(in srgb, var(--accent) 60%, transparent);
  transform: translateY(-6px);
  pointer-events: auto;
  user-select: none;
}
.vg-card__emojis { font-size: 15px; letter-spacing: 2px; }
.vg-card__title { font-family: var(--serif); font-weight: 700; font-size: 15px; line-height: 1.2; color: #faf5ec; }
.vg-card__speaker { font: 500 12px/1.2 var(--sans); color: rgba(243, 236, 224, 0.66); }
.vg-card__open {
  margin-top: 2px;
  font: 600 10px/1 var(--sans);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 82%, white 18%);
  border: 0;
}
.vg-card__open:hover { color: #fff; }
.vg-card__soon {
  margin-top: 2px;
  font: 600 9.5px/1 var(--sans);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(243, 236, 224, 0.5);
}