/* 控制栏布局参考 Plyr 官方 controls：播放按钮、细进度轨道、时间、重播；本地画布时钟驱动。 */
body{background:#061523;color:#edf6ff}main{max-width:1280px;padding:20px}header.chapter-heading{display:flex;align-items:center;gap:14px;min-height:60px;padding:10px 14px;background:#0b2235;border:1px solid #25445d;border-radius:10px;margin-bottom:12px;overflow-x:auto;scrollbar-width:none}header.chapter-heading::-webkit-scrollbar{display:none}.chapter-switch{position:relative;display:flex;align-items:center;gap:8px;flex-shrink:0;padding:7px 9px;color:#55d0ff;background:#0d2b42;border:1px solid #23526b;border-radius:6px;cursor:pointer}.chapter-switch:hover,.chapter-switch:focus-within{border-color:#38c9ff;background:#12374e}.chapter-switch svg{width:12px;height:12px;stroke:currentColor;stroke-width:1.6;fill:none}.chapter-switch select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font:inherit;color:#edf6ff;background:#0b2235}.chapter-switch:focus-within{outline:2px solid #38c9ff;outline-offset:2px}#chapter-number{font-size:12px;letter-spacing:.03em;font-variant-numeric:tabular-nums;white-space:nowrap}h1{font-size:20px;line-height:1.5;margin:0;font-weight:650;letter-spacing:-.02em;white-space:nowrap;flex-shrink:0}#chapter-explanation{margin:0;color:#9db9d3;font-size:13px;line-height:1.5;white-space:nowrap;flex-shrink:0}canvas{border:1px solid #25445d}.transport{display:flex;align-items:center;gap:12px;padding:8px 4px;margin-top:4px;min-height:48px}.icon-control{display:grid;place-items:center;flex-shrink:0;width:34px;height:34px;padding:7px;border:0;border-radius:5px;color:#d1e4f2;background:transparent;cursor:pointer}.icon-control:hover{color:#fff;background:#1475a1}.icon-control svg{display:block;width:20px;height:20px;fill:currentColor}.icon-control:focus-visible{outline:2px solid #55d0ff;outline-offset:2px}.seek-track{position:relative;flex:1;min-width:40px;display:flex;align-items:center;height:30px}#timeline{appearance:none;display:block;position:relative;width:100%;height:20px;border:0;border-radius:2px;margin:0;padding:0;cursor:pointer;background:linear-gradient(to right,#38c9ff var(--played,0%),#345267 var(--played,0%)) center/100% 4px no-repeat}#timeline::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;border:0;box-shadow:0 1px 3px #0005;transition:transform .1s}#timeline::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff}#timeline:hover::-webkit-slider-thumb{transform:scale(1.15)}#timeline:focus-visible{outline:2px solid #55d0ff;outline-offset:7px}#chapter-markers{position:absolute;inset:0 6px;pointer-events:none}#chapter-markers button{position:absolute;top:50%;transform:translate(-50%,-50%);width:10px;height:20px;margin:0;padding:0;border:0;background:transparent;pointer-events:auto;cursor:pointer;border-radius:0}#chapter-markers button::before{content:'';display:block;width:2px;height:4px;margin:auto;background:#061523}#chapter-markers button:first-child{display:none}#chapter-markers button:hover::before{background:#fff}#seek-tooltip{position:absolute;bottom:30px;transform:translateX(-50%);padding:5px 7px;background:#edf6ff;color:#102536;font-size:11px;border-radius:4px;white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums}#seek-tooltip[hidden]{display:none}#time-display{flex-shrink:0;font-size:12px;color:#c1d3e1;font-variant-numeric:tabular-nums;white-space:nowrap}#error{color:#ffb4b4}@media(max-width:700px){main{padding:12px}header.chapter-heading{gap:10px;padding:9px 10px;min-height:50px}h1{font-size:16px}#chapter-explanation{font-size:11px}#chapter-number{font-size:11px}.chapter-switch{padding:6px 7px;gap:5px}.transport{gap:8px;padding:5px 0}.icon-control{width:30px;height:32px;padding:6px}#time-display{font-size:11px}}@media(prefers-reduced-motion:reduce){#timeline::-webkit-slider-thumb{transition:none}}
/* 章节编号沿进度条分界显示，数字本身也可点击定位。 */
.transport{padding-bottom:22px}#chapter-markers button:first-child{display:block}#chapter-markers button::after{content:attr(data-number);position:absolute;top:21px;left:50%;transform:translateX(-50%);font-size:10px;line-height:15px;color:#85a2b8;font-variant-numeric:tabular-nums}#chapter-markers button[aria-current=true]::after,#chapter-markers button:hover::after{color:#55d0ff;font-weight:600}#chapter-markers button{height:36px}#chapter-markers button::after{top:27px}@media(max-width:700px){.transport{padding-bottom:22px}#chapter-markers button::after{font-size:9px}}
/* 标题参考 Linear 的文字层级与留白：不使用卡片和按钮式标题。 */
header.chapter-heading{background:transparent;border:0;border-bottom:1px solid #263c4e;border-radius:0;padding:12px 0 16px;margin-bottom:16px;gap:16px;justify-content:flex-start;min-height:66px}#chapter-title{background:none;color:#f1f6fb;padding:0;border-radius:0;box-shadow:none;font-size:24px;font-weight:650;letter-spacing:-.035em;line-height:1.3}#chapter-explanation{color:#8fa4b5;font-size:12px;margin-left:auto}.chapter-switch{background:#0c2030;border-color:#2b4153;color:#b7ccdc;padding:6px 8px;border-radius:5px}@media(max-width:700px){header.chapter-heading{gap:12px;min-height:56px;padding:9px 0 13px;margin-bottom:12px}#chapter-title{font-size:18px;padding:0}#chapter-explanation{font-size:11px}.chapter-switch{padding:5px 6px}}
/* 主标题、章节选择、条件说明各自承担明确层级，保持紧凑单行。 */
header.chapter-heading{padding:16px 0 18px;gap:18px;min-height:70px;border-bottom-color:#294256}#chapter-title{font-size:24px;font-weight:700;letter-spacing:-.025em;display:flex;align-items:center;gap:12px}#chapter-title::before{content:'';display:block;width:3px;height:24px;border-radius:2px;background:#4fcfff;flex-shrink:0}.chapter-switch{border-color:#29465c;background:#0b2132;color:#cfe5f5;padding:7px 9px}#chapter-explanation{display:flex;align-items:center;gap:10px;color:#a8bccb;font-size:13px;letter-spacing:.01em}.chapter-condition{color:#8cddfa;font-weight:600}.chapter-condition.required{color:#f0c477}.chapter-detail{display:inline-flex;align-items:center;gap:10px}.chapter-detail::before{content:'';width:3px;height:3px;border-radius:50%;background:#526b7d}@media(max-width:700px){header.chapter-heading{min-height:60px;padding:12px 0 14px;gap:12px}#chapter-title{font-size:18px;gap:9px}#chapter-title::before{height:20px}#chapter-explanation{font-size:12px;gap:8px}.chapter-detail{gap:8px}.chapter-switch{padding:6px 7px}}
/* 顶部只保留普通章节标题，切换入口集中于进度条上方。 */
header.chapter-heading{min-height:0;padding:6px 0 12px;margin-bottom:12px;border:0;background:none;display:block}#chapter-title{display:block;font-size:20px;font-weight:600;line-height:1.5;letter-spacing:0;background:none;padding:0;box-shadow:none}#chapter-title::before{display:none}#chapter-navigation{display:flex;align-items:center;gap:6px;margin-top:12px;overflow-x:auto;scrollbar-width:thin;padding-bottom:4px}#chapter-navigation button{flex-shrink:0;padding:7px 10px;border:0;border-radius:5px;background:transparent;color:#8fa8bb;font-size:11px;white-space:nowrap}#chapter-navigation button:hover{background:#102d41;color:#d9efff}#chapter-navigation button[aria-current=true]{background:#12354b;color:#6cd5fa}#chapter-navigation button:focus-visible{outline:2px solid #55d0ff;outline-offset:-2px}.transport{margin-top:0;padding-top:4px}@media(max-width:700px){header.chapter-heading{min-height:0;padding:4px 0 10px}#chapter-title{font-size:18px}#chapter-navigation{gap:3px;margin-top:9px}#chapter-navigation button{font-size:10px;padding:6px 8px}}
/* 章节标题与进度轨道共用同一坐标系，宽度严格对应章节实际时长。 */
.transport{margin-top:34px;padding-bottom:8px}.seek-track #chapter-navigation{position:absolute;left:6px;right:6px;top:-24px;height:22px;display:block;margin:0;padding:0;overflow:visible;scrollbar-width:none}#chapter-navigation button{position:absolute;top:0;height:22px;display:flex;align-items:center;justify-content:flex-start;gap:5px;padding:0 5px;border:0;border-radius:0;background:transparent;font-size:10px;overflow:hidden;color:#8fa8bb}#chapter-navigation button:hover{background:#0c2a40}#chapter-navigation button[aria-current=true]{background:transparent;color:#68d7ff;font-weight:600}#chapter-navigation button .chapter-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#chapter-markers button::after{display:none}@media(max-width:700px){.transport{margin-top:31px;padding-bottom:8px}.seek-track #chapter-navigation{top:-22px}#chapter-navigation button{font-size:10px;justify-content:center;padding:0 2px}#chapter-navigation button .chapter-name{display:none}}
/* 章节轨道直接展示名称，不再用编号替代；窄屏允许名称分行。 */
#chapter-navigation button{justify-content:center;gap:0;padding:0 2px}#chapter-navigation button .chapter-name{display:block;text-align:center}@media(max-width:700px){.transport{margin-top:39px}.seek-track #chapter-navigation{top:-32px;height:28px}#chapter-navigation button{height:28px;font-size:9px;padding:0 1px}#chapter-navigation button .chapter-name{display:block;white-space:normal;word-break:break-all;line-height:12px;overflow:visible;text-overflow:clip}}@media(max-width:480px){.transport{margin-top:60px}.seek-track #chapter-navigation{top:-53px;height:48px}#chapter-navigation button{height:48px;font-size:9px}}
