/* 布局：单页播放器。电脑端 = 左侧章节栏 + 右侧"放映厅"（舞台 + 旁白 + 控制条）；手机端 = 顶部章节栏 + 全宽舞台。
   配色沿用 3Blue1Brown 的深色黑板，PRTS 的黄色只用于章节编号和关键按钮 */
:root {
  --bg: #0E1014; --bg2: #08090C; --surface: #14171C; --surface2: #1A1E24;
  --ink: #E7E5E0; --muted: #8D929A; --faint: #5B6069; --line: #23272E;
  --blue: #58C4DD; --yellow: #F2D06B; --gold: #F0AC5F; --green: #83C167; --red: #FC6255; --teal: #5CD0B3; --purple: #A98BC7;
  --code-bg: #0B0D10; --code-fg: #D6DAE0; --code-com: #6B727C; --code-str: #A5D18E; --code-kw: #7FD0E6; --code-num: #F2D06B;
  --f-display: "Noto Serif SC", "Songti SC", serif;
  --f-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --f-math: "Noto Serif SC", "Times New Roman", serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.8; -webkit-font-smoothing: antialiased; overflow: hidden; }
button { font: inherit; cursor: pointer; color: var(--ink); background: transparent; border: 1px solid #2E333B; border-radius: 8px; padding: 6px 14px; transition: border-color .15s, color .15s, background .15s, opacity .15s; }
button:hover { border-color: var(--blue); color: var(--blue); }
button:disabled { opacity: .35; cursor: default; }
button.primary { background: var(--yellow); border-color: var(--yellow); color: #121418; font-weight: 600; }
button.primary:hover { background: #F8DC86; color: #121418; }
button.ghost { border-color: transparent; color: var(--muted); }
button.ghost:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
code { font-family: var(--f-mono); font-size: .86em; background: var(--surface2); padding: .1em .4em; border-radius: 4px; font-variant-ligatures: none; }
b { font-weight: 500; color: #fff; }
.hl-b { color: var(--blue); } .hl-y { color: var(--yellow); } .hl-g { color: var(--green); } .hl-r { color: var(--red); }

/* ---------- 应用骨架 ---------- */
.app { height: 100%; display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.side { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; background: var(--bg); }
.side-head { padding: 20px 20px 14px; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.logo-mark { font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--yellow); border: 1px solid rgba(242, 208, 107, .5); padding: 0 6px; border-radius: 3px; line-height: 1.7; }
.logo-text { font-family: var(--f-display); font-weight: 600; font-size: 15px; }
.side-prog { padding: 0 20px 14px; font-size: 12px; color: var(--faint); font-family: var(--f-mono); }
.side-prog .bar { height: 2px; background: var(--line); margin-top: 6px; border-radius: 2px; overflow: hidden; }
.side-prog .bar i { display: block; height: 100%; background: var(--yellow); transition: width .4s; }
.chap-list { list-style: none; margin: 0; padding: 4px 10px 20px; overflow-y: auto; flex: 1; }
.chap-list li button { width: 100%; text-align: left; border: 0; border-radius: 8px; padding: 9px 10px; display: grid; grid-template-columns: 2.4em 1fr auto; gap: 4px; align-items: center; color: var(--muted); font-size: 14px; line-height: 1.45; }
.chap-list li button:hover:not(:disabled) { background: var(--surface); color: var(--ink); }
.chap-list li button.cur { background: var(--surface2); color: var(--ink); }
.chap-list .no { font-family: var(--f-mono); font-size: 11.5px; color: var(--faint); }
.chap-list button.cur .no { color: var(--yellow); }
.chap-list .st { font-size: 11px; color: var(--faint); font-family: var(--f-mono); }
.chap-list .st.done { color: var(--green); }
.chap-list button:disabled { opacity: .45; }
.side-foot { padding: 12px 20px 18px; border-top: 1px solid var(--line); display: flex; gap: 6px; flex-wrap: wrap; }
.side-foot button { font-size: 12.5px; padding: 4px 10px; }

.mbar { display: none; }

/* ---------- 放映厅 ---------- */
.theater { min-width: 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.th-head { display: flex; align-items: center; gap: 14px; padding: 16px clamp(16px, 3vw, 40px) 10px; flex-wrap: wrap; }
.th-op { font-family: var(--f-mono); font-size: 12px; color: var(--yellow); letter-spacing: .08em; }
.th-title { font-family: var(--f-display); font-weight: 600; font-size: 17px; }
.th-spacer { flex: 1; }
.dots { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: #2A2F37; cursor: pointer; transition: background .2s, transform .2s; }
.dots i.seen { background: #4A505A; }
.dots i.now { background: var(--yellow); transform: scale(1.35); }
.icon-btn { width: 34px; height: 34px; padding: 0; border-radius: 50%; display: grid; place-items: center; }
.icon-btn svg { width: 16px; height: 16px; }

.stage-wrap { padding: 0 clamp(16px, 3vw, 40px); }
.stage { position: relative; max-width: 1080px; margin: 0 auto; background: var(--bg2); border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px var(--line), 0 30px 80px -40px #000; }
.stage canvas { display: block; width: 100%; height: auto; }
.stage canvas.is-live { cursor: crosshair; }
.stage .skip { position: absolute; right: 12px; top: 10px; font-size: 12px; padding: 2px 10px; background: rgba(8, 9, 12, .6); border-color: #30353D; color: var(--muted); }
.stage .live-tag { position: absolute; left: 14px; top: 12px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; color: var(--yellow); background: rgba(8, 9, 12, .7); padding: 2px 8px; border-radius: 4px; border: 1px solid rgba(242, 208, 107, .35); }
.scrub { height: 3px; background: #1E2228; position: relative; cursor: pointer; }
.scrub i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--blue); }

.narr { max-width: 1080px; margin: 0 auto; width: 100%; padding: 18px clamp(16px, 3vw, 40px) 8px; min-height: 7.2em; }
.cap { font-size: 17px; line-height: 1.85; color: #DAD8D3; max-width: 60em; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; }
.cap.show { opacity: 1; transform: none; }
.status { margin-top: 8px; font-family: var(--f-mono); font-size: 13.5px; color: var(--muted); white-space: pre-wrap; }
.status.ok { color: var(--green); }
.play-ctl { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 12px; }
.play-ctl label { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.play-ctl input[type=range] { width: 180px; accent-color: var(--yellow); }
.play-ctl output { font-family: var(--f-mono); color: var(--yellow); min-width: 3em; }
.play-ctl .seg { display: flex; gap: 6px; flex-wrap: wrap; }
.play-ctl .seg button.sel { border-color: var(--yellow); color: var(--yellow); }

.ctrl { position: sticky; bottom: 0; margin-top: auto; background: linear-gradient(to top, var(--bg) 70%, rgba(14, 16, 20, 0)); padding: 18px clamp(16px, 3vw, 40px) 20px; }
.ctrl-in { max-width: 1080px; margin: 0 auto; display: flex; align-items: center; gap: 10px; }
.ctrl .next { margin-left: auto; min-width: 9em; padding: 9px 20px; font-size: 15px; }
.ctrl .next.ready { animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(242, 208, 107, .45); } 50% { box-shadow: 0 0 0 8px rgba(242, 208, 107, 0); } }
.ctrl .hint { font-size: 13px; color: var(--faint); }

/* ---------- 文字镜头 ---------- */
.talk { position: relative; aspect-ratio: 760 / 420; padding: clamp(20px, 5%, 56px) clamp(22px, 7%, 80px); display: flex; flex-direction: column; justify-content: center; gap: .9em; overflow: hidden; }
.talk canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.talk > *:not(canvas) { position: relative; z-index: 1; }
.talk .kick { font-family: var(--f-mono); font-size: clamp(11px, 1.2vw, 13px); letter-spacing: .12em; color: var(--yellow); }
.talk h2 { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(22px, 3.4vw, 38px); line-height: 1.3; text-wrap: balance; }
.talk p { margin: 0; font-size: clamp(14px, 1.7vw, 19px); line-height: 1.85; color: #D2D0CB; max-width: 40em; }
.talk .fx { font-family: var(--f-math); font-style: italic; font-size: clamp(17px, 2.4vw, 27px); color: var(--ink); text-align: center; padding: .2em 0; white-space: nowrap; overflow-x: auto; }
.talk .fx .v { color: var(--blue); } .talk .fx .w { color: var(--yellow); } .talk .fx .g { color: var(--green); } .talk .fx .r { color: var(--red); }
.talk ul { margin: 0; padding-left: 1.2em; font-size: clamp(14px, 1.6vw, 18px); color: #D2D0CB; display: grid; gap: .3em; }
.talk ul li::marker { color: var(--yellow); }
.talk .in { opacity: 0; transform: translateY(12px); filter: blur(4px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1), filter .7s; }
.talk .in.on { opacity: 1; transform: none; filter: none; }
.talk table { border-collapse: collapse; font-size: clamp(12.5px, 1.4vw, 15px); }
.talk th, .talk td { text-align: left; padding: 5px 16px 5px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.talk th { color: var(--faint); font-weight: 400; font-size: .9em; }

/* ---------- 答题镜头 ---------- */
.quizcard { aspect-ratio: 760 / 420; padding: clamp(20px, 5%, 52px) clamp(22px, 7%, 72px); display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.quizcard .kick { font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; color: var(--blue); }
.quizcard h3 { margin: 0; font-family: var(--f-display); font-size: clamp(18px, 2.6vw, 28px); line-height: 1.45; font-weight: 600; }
.quizcard .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quizcard .opts button { text-align: left; padding: 12px 16px; font-size: clamp(14px, 1.6vw, 16px); border-color: #2A2F37; background: var(--surface); line-height: 1.5; display: flex; gap: 12px; align-items: baseline; }
.quizcard .opts button .k { font-family: var(--f-mono); color: var(--faint); font-size: 12px; }
.quizcard .opts button.right { border-color: var(--green); color: var(--green); background: rgba(131, 193, 103, .1); }
.quizcard .opts button.wrong { border-color: var(--red); color: var(--red); background: rgba(252, 98, 85, .08); animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* ---------- 代码镜头 ---------- */
.codecard { padding: clamp(16px, 3%, 28px); display: grid; gap: 14px; }
.codecard .kick { font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; color: var(--green); }
.codecard h3 { margin: 0; font-family: var(--f-display); font-size: clamp(18px, 2.2vw, 24px); font-weight: 600; }
.codecard .desc { font-size: 15px; color: #CFCDC8; line-height: 1.8; }
.cb { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--code-bg); }
.cb-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: #0D0F13; }
.cb-bar button { font-size: 12.5px; padding: 3px 10px; }
.cb-file { font-family: var(--f-mono); font-size: 12px; color: var(--muted); }
.cb-save { font-size: 12px; color: var(--faint); margin-right: auto; }
.cb-edit { position: relative; height: clamp(260px, 42vh, 460px); }
.cb-edit pre, .cb-edit textarea { position: absolute; inset: 0; margin: 0; padding: 14px 16px; font-family: var(--f-mono); font-size: 13.5px; line-height: 1.7; white-space: pre; overflow: auto; tab-size: 4; font-variant-ligatures: none; border: 0; }
.cb-edit pre { color: var(--code-fg); pointer-events: none; }
.cb-edit textarea { background: transparent; color: transparent; caret-color: var(--yellow); resize: none; outline: none; }
.cb-edit textarea::selection { background: rgba(88, 196, 221, .3); color: transparent; }
.cb-out { margin: 0; padding: 12px 16px; max-height: 220px; min-height: 3.4em; overflow: auto; font-family: var(--f-mono); font-size: 13px; line-height: 1.6; color: #B9BEC6; border-top: 1px solid var(--line); white-space: pre-wrap; }
.cb-out.is-err { color: #F4A79E; }
.cb-out.is-pass { box-shadow: inset 3px 0 0 var(--green); }
.tok-com { color: var(--code-com); font-style: italic; } .tok-str { color: var(--code-str); } .tok-kw { color: var(--code-kw); } .tok-num { color: var(--code-num); }

/* ---------- 标题画面与过场 ---------- */
.cover { position: fixed; inset: 0; z-index: 50; background: var(--bg2); display: grid; place-items: center; transition: opacity .8s, visibility .8s; }
.cover.gone { opacity: 0; visibility: hidden; }
.cover canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cover-in { position: relative; text-align: center; padding: 24px; display: grid; gap: 14px; justify-items: center; }
.cover .mark { font-family: var(--f-mono); letter-spacing: .3em; font-size: 12px; color: var(--yellow); }
.cover h1 { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(34px, 7vw, 72px); line-height: 1.15; letter-spacing: .02em; }
.cover .en { font-family: var(--f-display); font-style: italic; color: var(--faint); font-size: clamp(14px, 1.8vw, 18px); }
.cover .sub { color: var(--muted); max-width: 32em; font-size: 15.5px; }
.cover .go { margin-top: 18px; font-size: 16px; padding: 12px 34px; border-radius: 999px; }
.cover .small { font-size: 12.5px; color: var(--faint); }
.cover .row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.cut { position: absolute; inset: 0; z-index: 5; }
.cut-ui { position: absolute; left: 0; right: 0; bottom: 4.5%; display: flex; justify-content: center; gap: 10px; z-index: 6; opacity: 0; transition: opacity .6s; }
.cut-ui.on { opacity: 1; }

/* 设置面板 */
.sheet { position: fixed; z-index: 40; inset: 0; background: rgba(5, 6, 8, .6); display: grid; place-items: center; }
.sheet[hidden] { display: none; }
.sheet-in { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; width: min(420px, calc(100% - 32px)); display: grid; gap: 14px; }
.sheet-in h3 { margin: 0; font-family: var(--f-display); font-size: 19px; }
.sheet-in label { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14.5px; color: var(--muted); }
.sheet-in input[type=range] { accent-color: var(--yellow); }
.sheet-in .row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- 手机 ---------- */
@media (max-width: 860px) {
  body { overflow: auto; }
  .app { display: block; height: auto; min-height: 100%; }
  .side { display: none; }
  .mbar { display: flex; position: sticky; top: 0; z-index: 20; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px; background: rgba(14, 16, 20, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
  .mbar .logo-mark { flex: none; }
  .mbar select { flex: 1; min-width: 0; font: inherit; font-size: 14px; background: var(--surface); color: var(--ink); border: 1px solid #2E333B; border-radius: 8px; padding: 6px 8px; }
  .theater { overflow: visible; min-height: calc(100vh - 52px); }
  .th-head { padding: 10px 12px 8px; }
  .th-title { font-size: 15px; }
  #mute { display: none; }
  .stage-wrap { padding: 0 8px; }
  .stage { border-radius: 12px; }
  .narr { padding: 14px 14px 6px; }
  .cap { font-size: 15.5px; }
  .ctrl { padding: 12px 12px calc(env(safe-area-inset-bottom, 0px) + 12px); }
  .ctrl .hint { display: none; }
  .talk { aspect-ratio: auto; min-height: 56vw; padding: 22px 18px; }
  .quizcard { aspect-ratio: auto; padding: 22px 16px; }
  .quizcard .opts { grid-template-columns: 1fr; }
  .play-ctl input[type=range] { width: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .talk .in { opacity: 1; transform: none; filter: none; }
}