:root{ --ink:#efeae2; --dim:#9aa0a8; --hot:#ff7a3c; --line:rgba(238,232,224,.20); }
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#04060a;overflow:hidden;color:var(--ink);
  font-family:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased}
#scene{position:fixed;inset:0;width:100%;height:100%;display:block}
#ui{position:fixed;inset:0;pointer-events:none;z-index:5}
#ui button{pointer-events:auto}
#ui.pre .chapter,#ui.pre .bar{opacity:0!important;pointer-events:none}

/* ---------- 片头 / 片尾 ---------- */
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 45%,rgba(10,14,22,.72),rgba(3,5,9,.96));
  transition:opacity .9s ease, visibility .9s;pointer-events:auto}
.overlay.gone{opacity:0;visibility:hidden;pointer-events:none}
.endcard{opacity:0;visibility:hidden;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,rgba(8,10,16,.48),rgba(3,5,9,.82))}
.endcard.show{opacity:1;visibility:visible;pointer-events:auto}
.tc-inner{text-align:center;max-width:min(90vw,640px);padding:0 24px}
.tc-kicker{font-size:12px;letter-spacing:.42em;color:var(--dim);text-indent:.42em;margin-bottom:22px}
.tc-title{font-family:"Songti SC","Noto Serif SC","SimSun",serif;font-size:clamp(58px,11vw,124px);
  font-weight:600;margin:0;letter-spacing:.22em;text-indent:.22em;line-height:1;
  background:linear-gradient(180deg,#fff5e9 0%,#ffd7ae 38%,#ff8a3d 78%,#c94a12 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 34px rgba(255,110,40,.30))}
.tc-title.small{font-size:clamp(40px,7vw,74px)}
.tc-sub{font-size:clamp(11px,1.5vw,14px);letter-spacing:.72em;text-indent:.72em;color:#c9c2b8;margin-top:16px}
.tc-line{width:56px;height:1px;background:linear-gradient(90deg,transparent,var(--hot),transparent);margin:26px auto}
.tc-desc{font-size:13px;line-height:2;color:var(--dim);letter-spacing:.16em;margin:0 0 30px}
.ec-credit{font-size:12px;line-height:2.1;color:var(--dim);letter-spacing:.12em;margin:22px 0 28px}
.tc-btn{appearance:none;border:1px solid rgba(255,150,90,.45);background:rgba(255,110,50,.09);
  color:#ffd9bd;font-size:14px;letter-spacing:.34em;text-indent:.34em;padding:13px 34px;border-radius:2px;
  cursor:pointer;transition:.28s;font-family:inherit}
.tc-btn:hover:not(:disabled){background:rgba(255,110,50,.20);border-color:rgba(255,170,110,.8);color:#fff}
.tc-btn:disabled{opacity:.45;cursor:default;letter-spacing:.12em;text-indent:.12em}
.tc-hint{font-size:11px;color:#6d7480;letter-spacing:.2em;margin-top:20px}

/* ---------- 章节字幕 ---------- */
.chapter{position:absolute;left:clamp(22px,4.5vw,72px);top:clamp(60px,16vh,150px);
  transition:opacity 1.1s ease;opacity:0}
.chapter.show .ch-num{animation:slideIn .95s .02s cubic-bezier(.16,.8,.3,1) both}
.chapter.show .ch-zh{animation:slideIn .95s cubic-bezier(.16,.8,.3,1) both}
.chapter.show .ch-en{animation:slideIn .95s .09s cubic-bezier(.16,.8,.3,1) both}
.chapter.show .ch-note{animation:slideIn .95s .18s cubic-bezier(.16,.8,.3,1) both}
@keyframes slideIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ch-num{font-size:11px;letter-spacing:.4em;color:var(--hot);opacity:.85;margin-bottom:10px}
.ch-zh{font-family:"Songti SC","Noto Serif SC","SimSun",serif;font-size:clamp(30px,4.4vw,54px);
  font-weight:600;letter-spacing:.2em;text-indent:.2em;text-shadow:0 2px 26px rgba(0,0,0,.75)}
.ch-en{font-size:11px;letter-spacing:.44em;color:#cfc8bf;margin-top:10px;text-shadow:0 1px 12px rgba(0,0,0,.8)}
.ch-note{font-size:11.5px;letter-spacing:.13em;color:var(--dim);margin-top:14px;
  padding-left:11px;border-left:1px solid var(--line);line-height:1.7}

/* ---------- 控制条 ---------- */
.bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:16px;
  padding:0 clamp(16px,3vw,40px) 18px;height:64px;
  background:linear-gradient(to top,rgba(3,5,9,.72),transparent);
  transition:opacity .5s ease;opacity:1}
body.idle .bar{opacity:0}
body.idle{cursor:none}
.bar-left,.bar-right{display:flex;align-items:center;gap:10px}
.icon{appearance:none;border:0;background:transparent;color:var(--ink);opacity:.72;font-size:14px;
  width:30px;height:30px;border-radius:3px;cursor:pointer;transition:.2s;line-height:1}
.icon:hover{opacity:1;background:rgba(255,255,255,.09)}
.tcode{font:11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;color:var(--dim);min-width:96px}
.track{position:relative;flex:1;height:22px;display:flex;align-items:center;cursor:pointer;pointer-events:auto}
.track::before{content:"";position:absolute;left:0;right:0;height:2px;background:rgba(255,255,255,.16)}
.fill{position:absolute;left:0;height:2px;background:linear-gradient(90deg,#ff6a28,#ffb066);width:0;
  box-shadow:0 0 12px rgba(255,120,50,.55)}
.ticks i{position:absolute;top:50%;width:1px;height:9px;transform:translate(-50%,-50%);background:rgba(255,255,255,.34)}
@media (max-width:640px){ .ch-note{display:none} .tcode{min-width:0;font-size:10px} .bar{height:56px;gap:10px} }