.replay-page { --replay-paper: #f4f2ec; background: var(--replay-paper); color: #252a2c; }
.replay-header { background: #08090b; color: #f2f1ee; padding: 30px 48px; display: flex; align-items: center; gap: 30px; }
.replay-header .wordmark { font-size: 36px; text-decoration: none; }
.replay-header nav { display: flex; align-items: center; gap: 30px; margin-left: auto; font-size: 17px; }
.replay-header nav a { text-decoration: none; padding: 10px 0; }
.replay-header nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
.replay-header .replay-workspace { border-bottom: 1px solid #777; }
.replay-header .preference { border-color: #494c50; background: #101214; }
.replay-header .preference button { color: #b5b8bd; }
.replay-header .preference [aria-pressed="true"] { color: #f2f1ee; background: #ffffff14; }
.replay-opening { background: #08090b; color: #f2f1ee; padding: 64px max(28px, 8vw) 42px; }
.replay-title-row { max-width: 1240px; margin: 0 auto 52px; display: grid; grid-template-columns: 1.6fr 1fr; gap: 60px; align-items: end; }
.replay-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 15px; margin: 0 0 24px; color: #aeb5b0; }
.replay-eyebrow > span:first-child:empty { width: 6px; height: 6px; border-radius: 50%; background: #aec2ac; }
.replay-opening h1 { font: 400 clamp(60px, 6.6vw, 100px)/.98 "Instrument Serif", Georgia, serif; letter-spacing: -.035em; margin: 0; }
.replay-opening h1 span { display: block; }
.replay-intro { max-width: 310px; margin: 0 0 7px auto; color: #b8bcbd; font-size: 19px; line-height: 1.7; }
.replay-intro p { margin: 0 0 24px; }
.replay-intro a { font-size: 17px; color: #f2f1ee; text-underline-offset: 7px; }
.replay-film { max-width: 1100px; margin: 0 auto; scroll-margin-top: 24px; }
.film-bar { display: flex; justify-content: space-between; gap: 18px; padding: 14px 20px; border: 1px solid #383d40; border-bottom: 0; border-radius: 10px 10px 0 0; background: #151719; color: #c0c5c3; font-size: 15px; }
.film-bar span:last-child { color: #9da69f; }
.replay-film video { display: block; width: 100%; max-height: 610px; aspect-ratio: 16 / 9; object-fit: contain; background: #101214; border: 1px solid #383d40; }
.replay-film figcaption { text-align: center; font-size: 15px; color: #929a96; line-height: 1.6; max-width: 650px; margin: 18px auto 0; }
.replay-conversation { max-width: 1440px; margin: auto; padding: 86px max(28px, 8vw) 64px; scroll-margin-top: 28px; }
.conversation-heading { display: grid; grid-template-columns: 1.3fr 1fr; gap: 50px; align-items: end; }
.conversation-heading h2, .replay-closing h2 { font: 400 clamp(40px, 4.1vw, 60px)/1.07 "Instrument Serif", Georgia, serif; margin: 0; letter-spacing: -.025em; }
.conversation-heading p { margin: 0; font-size: 18px; color: #646964; max-width: 310px; justify-self: end; }
#demo-status { font-size: 15px; color: #727a71; margin: 24px 0 36px; }
.conversation-layout { display: grid; grid-template-columns: 225px minmax(0, 1fr); gap: 50px; align-items: start; }
.replay-timeline { position: sticky; top: 30px; display: flex; flex-direction: column; }
.replay-timeline button { display: flex; position: relative; gap: 14px; align-items: center; text-align: left; min-height: 56px; padding: 8px 0; color: #70796e; font-size: 17px; }
.replay-timeline button::before { content: ""; position: absolute; top: 40px; bottom: -11px; left: 14px; width: 1px; background: #c8cec2; }
.replay-timeline button:last-child::before { display: none; }
.replay-timeline button span:first-child { display: grid; place-items: center; flex: 0 0 29px; height: 29px; border: 1px solid #c8cec2; border-radius: 50%; background: var(--replay-paper); font-size: 14px; }
.replay-timeline button[aria-current="step"] { color: #263f2e; font-weight: 600; }
.replay-timeline button[aria-current="step"] span:first-child { background: #344b3f; border-color: #344b3f; color: #fff; }
.conversation-detail { min-width: 0; }
.replay-stage { padding: 32px 38px 36px; background: #fbfaf6; border: 1px solid #d5d9ce; border-radius: 3px; min-height: 380px; }
.replay-stage .replay-eyebrow { color: #5c7160; margin-bottom: 18px; }
#step-title { font: 400 clamp(30px, 3.2vw, 44px)/1.1 "Instrument Serif", Georgia, serif; margin: 0 0 24px; overflow-wrap: anywhere; }
#step-body { font-size: 18px; line-height: 1.8; overflow-wrap: anywhere; }
#step-body > p:first-child { margin-top: 0; }
#step-body h4 { font-size: 18px; font-weight: 500; margin: 24px 0 8px; }
#step-body ul { padding-left: 20px; }
#step-body li + li { margin-top: 8px; }
#step-body a { color: #3b654a; text-underline-offset: 3px; }
#step-body small { display: block; color: #697363; margin-top: 6px; }
.replay-member { border-top: 1px solid #dbe0d4; padding-top: 18px; margin-top: 20px; }
.replay-member summary { font-weight: 500; cursor: pointer; }
.replay-member summary span { font-size: 15px; font-weight: 400; color: #75816e; margin-left: 14px; }
.replay-member > p { margin: 12px 0 0; }
#step-body .replay-dialogue { list-style: none; padding: 0; margin: 30px 0; }
#step-body .replay-turn { padding: 20px 0; border-top: 1px solid #dbe0d4; margin: 0; }
.replay-turn strong { display: block; font-size: 15px; color: #344b3f; letter-spacing: .025em; }
.replay-turn p { margin: 8px 0 0; }
#step-body .replay-turn-guide { border-left: 3px solid #a8b7a1; border-top: 0; padding: 16px 20px; margin: 12px 0; background: #eef0e8; }
.replay-assessment-note { color: #5b6659; font-size: 15px; }
.replay-outcome { border-top: 2px solid #708369; padding-top: 4px; margin-top: 30px; }
.replay-outcome p { margin: 8px 0 0; }
.replay-controls { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 22px; }
.replay-controls button { min-height: 44px; margin: 0; }
.replay-controls .primary-button { border-radius: 3px; background: #344b3f; color: #fff; }
#step-position { color: #727a71; font-size: 15px; }
.replay-notes { margin-top: 56px; padding: 24px 0 0; border-top: 1px solid #d0d5c9; font-size: 17px; color: #646964; }
.replay-notes summary { cursor: pointer; color: #354336; padding: 4px 0; }
.replay-notes p { max-width: 760px; line-height: 1.8; }
.replay-closing { padding: 66px 24px 74px; background: #e8e9e1; text-align: center; }
.replay-closing > p { color: #64705e; font-size: 17px; margin: 0 0 18px; }
.replay-closing h2 { margin-bottom: 32px; }
.replay-closing .cover-login { display: inline-flex; align-items: center; text-decoration: none; background: #344b3f; border-color: #344b3f; color: #fff; }
.replay-back { display: block; width: fit-content; margin: 20px auto 0; font-size: 15px; color: #64705e; text-underline-offset: 5px; }
.replay-page [tabindex="-1"]:focus { outline: none; }
html[lang="zh-CN"] .replay-opening h1, html[lang="zh-CN"] .conversation-heading h2, html[lang="zh-CN"] #step-title, html[lang="zh-CN"] .replay-closing h2 { font-family: "Noto Serif SC", serif; line-height: 1.3; }
@media (max-width: 900px) { .replay-title-row { gap: 35px; } .conversation-layout { grid-template-columns: 180px minmax(0, 1fr); gap: 26px; } .replay-stage { padding: 26px; } }
@media (max-width: 640px) {
  .replay-header { padding: 24px; flex-wrap: wrap; gap: 20px; }
  .replay-header .wordmark { font-size: 30px; }
  .replay-header .preference { margin-left: auto; }
  .replay-header nav { order: 3; flex-basis: 100%; justify-content: space-between; gap: 18px; }
  .replay-opening { padding: 40px 24px 32px; }
  .replay-title-row { display: block; margin-bottom: 34px; }
  .replay-opening h1 { font-size: clamp(51px, 12vw, 74px); }
  .replay-intro { max-width: 330px; margin: 26px 0 0; font-size: 18px; }
  .replay-intro p { margin-bottom: 16px; }
  .film-bar { padding: 12px; font-size: 14px; gap: 10px; }
  .film-bar span:last-child { display: none; }
  .replay-film video { aspect-ratio: 16 / 9; }
  .replay-film figcaption { font-size: 14px; text-align: left; }
  .replay-conversation { padding: 52px 24px 40px; }
  .conversation-heading { display: block; }
  .conversation-heading p { margin-top: 18px; }
  .conversation-layout { display: block; }
  .replay-timeline { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; padding-bottom: 24px; }
  .replay-timeline button { font-size: 14px; min-height: 44px; gap: 8px; }
  .replay-timeline button::before { display: none; }
  .replay-stage { padding: 24px 20px; min-height: 330px; }
  .replay-controls { gap: 8px; }
  .replay-notes { margin-top: 40px; }
  .replay-closing { padding: 48px 24px; }
}