:root {
  --night: #151519;
  --night-panel: #1e1e24;
  --stage-text: #f8f5ef;
  --stage-muted: #b7b3bb;
  --paper: #f5f3ed;
  --text: #232124;
  --muted: #605d61;
  --line: #d9d5cf;
  --accent: #ffa07c;
  --accent-ink: #934226;
  --sticky-offset: 138px;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --serif: "Songti SC", "Noto Serif CJK SC", "Noto Serif SC", "Source Han Serif SC", SimSun, Georgia, serif;
  --mono: "SFMono-Regular", Consolas, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--text); font-family: var(--sans); }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 4px; }
.masthead button:focus-visible, .stage button:focus-visible { outline-color: var(--accent); }
h1, h2, h3, h4, p { margin: 0; }
.wrap { width: min(1320px, calc(100% - 100px)); margin-inline: auto; }
.skip-link { position: fixed; top: -100px; left: 12px; z-index: 10; background: var(--paper); color: var(--text); padding: 10px 16px; }
.skip-link:focus { top: 8px; }
.masthead { position: sticky; top: 0; z-index: 5; color: var(--stage-text); background: var(--night); border-bottom: 1px solid #35343b; }
.masthead-row { display: flex; min-height: 65px; align-items: center; justify-content: space-between; gap: 16px; }
.wordmark { display: flex; align-items: center; gap: 11px; font-weight: 710; font-size: 15px; }
.event-mark { width: 15px; height: 15px; display: inline-block; border-radius: 50%; border: 1px solid var(--accent); background: linear-gradient(135deg, var(--accent) 49%, transparent 51%); }
.event-type { color: var(--stage-muted); border-left: 1px solid #49464d; padding-left: 11px; font-size: 12px; font-weight: 500; }
.event-date { color: var(--stage-muted); font-size: 12px; white-space: nowrap; }
.event-date span { margin: 0 4px; }
.event-date time { font-family: var(--mono); }
.session-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid #38363d; }
.session-tab {
  position: relative; display: flex; align-items: center; gap: 13px; min-width: 0;
  padding: 13px 17px; text-align: left; background: transparent; border: 0;
  border-right: 1px solid #38363d; color: var(--stage-muted);
  transition: background-color .2s, color .2s;
}
.session-tab:first-child { border-left: 1px solid #38363d; }
.session-tab::after {
  content: ""; position: absolute; inset: auto 0 0; height: 2px; background: var(--tab-accent);
  transform: scaleX(0); transform-origin: left; transition: transform .24s ease-out;
}
.session-tab:hover { background: #25242b; color: var(--stage-text); }
.session-tab[aria-selected="true"] { color: var(--stage-text); background: #25242b; }
.session-tab[aria-selected="true"]::after { transform: scaleX(1); }
.tab-no { color: var(--tab-accent); font: 12px var(--mono); }
.tab-text { display: grid; gap: 3px; min-width: 0; }
.tab-title { font-size: 14px; font-weight: 680; }
.tab-short { display: none; }
.tab-speaker { font-size: 11px; color: var(--stage-muted); }
#session-panel { min-height: 70vh; }
#session-panel:focus { outline: none; }
.stage { color: var(--stage-text); background: var(--night); padding: 27px 0 56px; }
.stage-meta, .talk-meta { display: flex; align-items: center; }
.stage-meta { justify-content: space-between; gap: 18px; }
.talk-meta { white-space: nowrap; gap: 15px; font: 12px var(--mono); color: var(--stage-muted); }
.session-number { color: var(--accent); }
.mode-switch { display: flex; padding: 3px; border: 1px solid #47434d; border-radius: 6px; }
.mode-switch button { color: var(--stage-muted); background: transparent; border: 0; border-radius: 4px; padding: 6px 12px; font-size: 12px; white-space: nowrap; }
.mode-switch button:hover { color: var(--stage-text); }
.mode-switch button[aria-pressed="true"] { color: var(--night); background: var(--stage-text); font-weight: 680; }
.stage-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .93fr); gap: clamp(32px, 6vw, 95px); align-items: center; margin-top: 35px; }
.stage h1 { font: 650 clamp(40px, 5.2vw, 76px)/1.14 var(--serif); letter-spacing: -.055em; text-wrap: balance; }
.stage h1 span { color: var(--accent); display: block; }
.speaker { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 13px; margin-top: 24px; font-size: 14px; }
.speaker span { color: var(--stage-muted); font-size: 12px; }
.stage-intro { max-width: 47ch; margin-top: 14px; color: var(--stage-muted); font-size: 15px; line-height: 1.9; }
.exhibit {
  background: var(--night-panel); color: var(--stage-text); border: 1px solid #403c47; border-radius: 10px;
  padding: 21px; min-width: 0; box-shadow: 0 12px 28px #08080b20;
}
.exhibit-header { display: flex; align-items: center; gap: 8px; padding-bottom: 15px; border-bottom: 1px solid #3b3842; }
.exhibit-icon { color: var(--accent); font-size: 19px; line-height: 1; }
.exhibit-header h3 { font-size: 14px; font-weight: 680; }
.exhibit-hint { margin-left: auto; color: var(--stage-muted); font-size: 11px; }
.choices { display: flex; flex-wrap: wrap; gap: 6px; margin: 15px 0 20px; }
.choices button {
  border: 1px solid #55515e; border-radius: 4px; color: var(--stage-text); background: transparent;
  padding: 6px 11px; font-size: 12px; transition: background .18s, color .18s, border-color .18s;
}
.choices button:hover { border-color: var(--accent); }
.choices button[aria-pressed="true"] { background: var(--accent); color: var(--night); border-color: var(--accent); font-weight: 680; }
.choice-result { min-height: 146px; }
.choice-caption { display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: start; }
.choice-caption > span { color: var(--accent); font: 32px/1 var(--mono); opacity: .82; }
.choice-caption h4 { font: 650 20px/1.4 var(--serif); }
.choice-caption p { color: var(--stage-muted); font-size: 13px; line-height: 1.8; margin-top: 5px; }
.chain { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 6px 15px; }
.chain li {
  position: relative; padding: 5px 8px; border: 1px solid #bbb5ae; border-radius: 4px;
  color: var(--accent-ink); font-size: 11px; font-weight: 650; line-height: 1.45;
}
.chain li + li::before { position: absolute; left: -12px; top: 50%; transform: translateY(-50%); content: "›"; }
.exhibit .chain li { border-color: #55505d; color: var(--accent); }
.reading-grid { display: grid; grid-template-columns: minmax(175px, .29fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 84px); padding-block: 43px 54px; }
.outline { align-self: start; position: sticky; top: var(--sticky-offset); }
.outline h2 { padding: 0 0 10px; border-bottom: 1px solid var(--line); font-size: 13px; }
.outline ol { margin: 0; padding: 7px 0; list-style: none; }
.outline button { text-align: left; display: flex; align-items: baseline; gap: 9px; border: 0; background: transparent; color: var(--muted); padding: 8px 0; font-size: 13px; line-height: 1.4; }
.outline button:hover { color: var(--accent-ink); }
.outline button span { color: var(--accent-ink); font: 11px var(--mono); }
.reading-column { min-width: 0; }
.note-section { display: grid; grid-template-columns: 45px minmax(0, 1fr); gap: 15px; padding-bottom: 30px; scroll-margin-top: var(--sticky-offset); }
.note-section + .note-section { border-top: 1px solid var(--line); padding-top: 29px; }
.section-number { padding-top: 5px; color: var(--accent-ink); font: 16px var(--mono); }
.section-copy h2, .transcript-chapter h2 { font: 700 clamp(22px, 2.55vw, 33px)/1.38 var(--serif); letter-spacing: -.035em; }
.section-copy p { max-width: 75ch; font-size: 15px; line-height: 1.95; margin-top: 12px; }
.section-copy .exhibit { margin-top: 20px; max-width: 650px; }
.section-copy .choice-caption p { font-size: 13px; margin-top: 5px; }
.comparison { margin-top: 18px; overflow-x: auto; }
.comparison table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; line-height: 1.65; }
.comparison caption { text-align: left; padding-bottom: 8px; color: var(--muted); font-size: 12px; }
.comparison th, .comparison td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.comparison thead { background: #e8e5de; }
.comparison tbody th { font-weight: 680; }
.reading-end { border-top: 1px solid var(--line); padding-top: 20px; }
.reading-end button { background: transparent; border: 1px solid var(--accent-ink); border-radius: 4px; color: var(--accent-ink); padding: 8px 12px; font-size: 13px; }
.reading-end button:hover { background: #e8e5de; }
.reading-end button span { margin-left: 8px; }
.stage-compact { padding-bottom: 30px; }
.stage-compact .stage-grid { display: block; margin-top: 17px; }
.stage-compact h1 { font-size: clamp(28px, 4.2vw, 50px); }
.stage-compact h1 span { display: inline; margin-left: .28em; }
.stage-compact .speaker { margin-top: 13px; }
.transcript-loading { min-height: 45vh; padding-block: 40px; color: var(--muted); }
.transcript-grid { padding-top: 24px; }
.reader-tools {
  position: sticky; top: calc(var(--sticky-offset) - 10px); z-index: 2; display: flex; align-items: center;
  flex-wrap: wrap; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); background: var(--paper);
}
.reader-tools label { font-size: 13px; font-weight: 680; }
.reader-tools input {
  min-width: 100px; flex: 1; max-width: 290px; padding: 7px 9px;
  border: 1px solid #bdb7ad; border-radius: 4px; background: #fffdfa; color: var(--text); font-size: 14px;
}
.reader-tools button { width: 31px; height: 31px; border: 1px solid #bdb7ad; border-radius: 4px; background: transparent; color: var(--text); }
.reader-tools button:disabled { opacity: .4; }
.match-status, .reader-note { color: var(--muted); font-size: 12px; }
.reader-note { margin: 15px 0 24px; }
.transcript-chapter { scroll-margin-top: calc(var(--sticky-offset) + 53px); }
.transcript-chapter h2 { margin-bottom: 14px; }
.transcript-chapter h2 span { font: 14px var(--mono); color: var(--accent-ink); margin-right: 10px; }
.transcript-chapter + .transcript-chapter { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.transcript-chapter p { max-width: 75ch; margin: 0 0 13px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.95; }
.transcript-chapter [lang="en"] p { font-family: Georgia, serif; font-size: 17px; line-height: 1.72; }
mark { background: #f2d58d; color: #222; }
mark.current-match { background: #ffae69; outline: 1px solid var(--accent-ink); }
.page-footer { border-top: 1px solid var(--line); padding-block: 17px; color: var(--muted); font-size: 12px; }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; }
.panel-enter .stage-copy, .panel-enter .stage .exhibit { animation: enter .33s cubic-bezier(.2,.75,.3,1) both; }
.panel-enter .stage .exhibit { animation-delay: .04s; }
.result-enter { animation: enter .2s ease-out both; }
@keyframes enter { from { opacity: .25; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1000px) {
  .wrap { width: calc(100% - 60px); }
  .stage-grid { gap: 30px; }
  .reading-grid { gap: 28px; }
}
@media (max-width: 720px) {
  :root { --sticky-offset: 124px; }
  .wrap { width: calc(100% - 34px); }
  .masthead-row { min-height: 52px; }
  .event-type { display: none; }
  .wordmark { font-size: 13px; gap: 7px; }
  .event-date { font-size: 10px; }
  .session-tab { padding: 8px 6px 10px; gap: 1px; display: flex; flex-direction: column; align-items: flex-start; }
  .tab-no { font-size: 10px; }
  .tab-title, .tab-speaker { display: none; }
  .tab-short { display: block; font-size: 11px; font-weight: 680; overflow-wrap: anywhere; }
  .talk-meta { gap: 7px; font-size: 11px; }
  .stage { padding: 19px 0 28px; }
  .stage-grid { grid-template-columns: minmax(0,1fr); gap: 20px; margin-top: 23px; }
  .stage h1 { font-size: clamp(34px, 8.3vw, 54px); }
  .stage-compact h1 { font-size: 29px; }
  .speaker { margin-top: 16px; }
  .stage-intro { margin-top: 8px; font-size: 14px; }
  .exhibit { padding: 15px; }
  .choice-result { min-height: 128px; }
  .choice-caption h4 { font-size: 18px; }
  .reading-grid { grid-template-columns: minmax(0,1fr); padding-block: 24px 36px; gap: 14px; }
  .outline { position: static; }
  .outline ol { display: flex; flex-wrap: wrap; gap: 0 13px; }
  .outline button { font-size: 12px; }
  .note-section { grid-template-columns: 25px minmax(0,1fr); gap: 6px; }
  .section-number { font-size: 12px; }
  .section-copy p { font-size: 14px; }
  .reader-tools { top: calc(var(--sticky-offset) - 16px); }
  .comparison table { min-width: 430px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* The programme stays in view while the page tracks the current chapter. */
body { -webkit-text-size-adjust: 100%; }
.wrap { padding-inline: env(safe-area-inset-left, 0) env(safe-area-inset-right, 0); }
.session-tabs { position: relative; }
.session-tab::after { display: none; }
.session-tabs::after {
  content: ""; position: absolute; bottom: 0; left: 0; width: 25%; height: 2px;
  background: var(--accent); pointer-events: none;
  transform: translateX(calc(var(--selected-tab, 0) * 100%));
  transition: transform .33s cubic-bezier(.2,.8,.3,1), background-color .22s;
}
.read-progress { height: 2px; position: absolute; left: 0; right: 0; bottom: -2px; pointer-events: none; }
.read-progress span { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.outline button[aria-current="location"] { color: var(--accent-ink); font-weight: 700; }
.mobile-outline, .reader-tools .chapter-picker, .comparison-cards { display: none; }
.reader-tools { display: block; }
.reader-search { display: flex; align-items: center; gap: 8px; }
.reader-search input { width: 0; font-size: 16px; }
.reader-search .match-status { white-space: nowrap; }
.reader-search button { flex: none; }
.note-section, .transcript-chapter { animation-fill-mode: both; }
.section-enter { animation: page-rise .4s cubic-bezier(.22,.72,.28,1); }

/* The accent colour follows the selected session and its interactive diagram. */
.stage { position: relative; isolation: isolate; overflow: hidden; }
.stage::before, .stage::after {
  position: absolute; z-index: -1; pointer-events: none; content: "";
}
.stage::before {
  inset: 0;
  background:
    radial-gradient(ellipse at 78% 45%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 59%),
    linear-gradient(120deg, #16161b 12%, #1c1b25 100%);
}
.stage::after {
  top: -72%; right: -8%; width: min(69%, 890px); aspect-ratio: 1;
  background: repeating-radial-gradient(circle at center, transparent 0 33px, color-mix(in srgb, var(--accent) 14%, transparent) 34px 35px, transparent 36px 58px);
  mask-image: radial-gradient(ellipse, #000 5%, transparent 70%);
  opacity: .64;
}
.panel-enter .stage::after { animation: orbit-in .95s cubic-bezier(.17,.76,.29,1) both; }
.stage h1 span { color: var(--accent); text-shadow: 0 0 35px color-mix(in srgb, var(--accent) 15%, transparent); }
.stage .exhibit {
  border: 1px solid color-mix(in srgb, var(--accent) 29%, #403c47);
  background: linear-gradient(155deg, #292734f2, #1c1b23f7 66%);
  box-shadow: 0 26px 62px #0a091067, inset 0 1px #ffffff10;
}
.choices button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
.choices button span { color: var(--accent); font: 9px var(--mono); }
.choices button[aria-pressed="true"] span { color: #322835; opacity: .74; }
.exhibit .chain { gap: 8px 17px; }
.exhibit .chain li {
  flex: 1 1 0; min-width: 0; min-height: 39px; display: grid; place-items: center; text-align: center;
  border-color: color-mix(in srgb, var(--accent) 28%, #393440);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.exhibit .chain li + li::before { left: -13px; color: var(--accent); font-size: 15px; }
.result-enter .chain li { animation: node-in .38s cubic-bezier(.2,.75,.3,1) both; }
.result-enter .chain li:nth-child(2) { animation-delay: .055s; }
.result-enter .chain li:nth-child(3) { animation-delay: .11s; }
@keyframes node-in { from { opacity: .2; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } }
@keyframes orbit-in { from { opacity: .06; transform: translate(5%, -6%) scale(.87); } to { opacity: .64; transform: none; } }
@keyframes page-rise { from { opacity: .48; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 720px) {
  :root { --sticky-offset: 67px; }
  .masthead { top: -52px; }
  .masthead-row { height: 52px; }
  .session-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .session-tab { justify-content: center; min-height: 53px; padding: 6px; }
  .tab-short { font-size: 12px; line-height: 1.25; }
  .stage { padding-top: 13px; }
  .stage-grid { margin-top: 14px; }
  .stage::after { top: -4%; right: -36%; width: 108%; }
  .stage-intro { font-size: 15px; line-height: 1.8; }
  .mode-switch button { min-height: 40px; }
  .stage .exhibit { border-radius: 12px; }
  .choices { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 5px; margin-block: 10px 16px; }
  .choices button { flex-direction: column; justify-content: center; gap: 2px; min-height: 45px; padding: 3px; }
  .choice-caption { gap: 8px; }
  .choice-caption > span { font-size: 26px; }
  .choice-result { min-height: 130px; }
  .exhibit .chain { margin-top: 13px; }
  .reading-grid { display: block; }
  .outline { display: none; }
  .mobile-outline { display: block; margin-bottom: 19px; }
  .chapter-picker, .reader-tools .chapter-picker { display: flex; gap: 10px; align-items: center; min-width: 0; }
  .chapter-picker span { flex: none; font-size: 12px; font-weight: 680; color: var(--muted); }
  .chapter-picker select {
    width: 100%; min-width: 0; min-height: 44px; padding: 5px 7px; border: 1px solid #c5beb7;
    border-radius: 6px; background: #fffcf7; color: var(--text); font-size: 16px;
  }
  .note-section { display: block; padding-bottom: 23px; }
  .note-section + .note-section { padding-top: 23px; }
  .section-number { margin-bottom: 5px; }
  .section-copy h2, .transcript-chapter h2 { font-size: 25px; }
  .section-copy p { font-size: 16px; line-height: 1.9; margin-top: 10px; }
  .comparison table { display: none; }
  .comparison-cards { display: block; margin: 0; }
  .comparison-cards div { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .comparison-cards dt { display: flex; flex-wrap: wrap; gap: 5px 9px; align-items: baseline; font-weight: 700; }
  .comparison-cards dt span { color: var(--accent-ink); font-size: 13px; }
  .comparison-cards dd { margin: 4px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
  .transcript-grid { padding-top: 8px; }
  .reader-tools { top: 58px; padding: 6px 0; }
  .reader-tools .chapter-picker { margin-bottom: 5px; }
  .reader-search { gap: 5px; }
  .reader-search input { max-width: none; min-width: 68px; min-height: 44px; }
  .reader-search button { width: 44px; height: 44px; }
  .reader-note { line-height: 1.65; }
  .transcript-chapter { scroll-margin-top: 166px; }
  .transcript-chapter p { font-size: 17px; line-height: 1.88; }
  .transcript-chapter [lang="en"] p { font-size: 18px; line-height: 1.76; }
  .page-footer { padding-bottom: max(17px, env(safe-area-inset-bottom, 0px)); }
}