:root {
  color-scheme: dark;
  --ink: #f3f6f4;
  --muted: #a8b6b6;
  --soft: #718185;
  --panel: #111b1f;
  --panel-2: #182428;
  --line: rgba(208, 226, 222, .12);
  --accent: #53c7bb;
  --accent-strong: #62e0d1;
  --bg: #0a1114;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body {
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  letter-spacing: .01em;
}
button, input { font: inherit; }
button { color: inherit; }

.app-shell {
  width: 100%; height: 100%; min-height: 520px;
  display: grid; grid-template-rows: 72px minmax(0, 1fr) 130px 30px;
  padding: 0 26px 10px;
  background: radial-gradient(ellipse at 50% -15%, #25363a 0, #10191d 46%, #0a1114 100%);
}
.topbar { display: flex; align-items: center; gap: 14px; min-width: 0; border-bottom: 1px solid var(--line); }
.brand-mark { display: flex; align-items: end; gap: 3px; width: 24px; height: 24px; padding: 4px 3px; border: 1px solid rgba(83,199,187,.42); border-radius: 7px; background: rgba(83,199,187,.08); }
.brand-mark span { flex: 1; border-radius: 2px 2px 1px 1px; background: var(--accent); }
.brand-mark span:nth-child(1) { height: 48%; opacity: .65; }
.brand-mark span:nth-child(2) { height: 78%; }
.brand-mark span:nth-child(3) { height: 100%; opacity: .78; }
.brand-copy { min-width: 0; }
.eyebrow { color: var(--accent); font-size: 10px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; }
h1 { margin: 3px 0 0; font-size: 18px; line-height: 1.15; font-weight: 620; letter-spacing: .045em; }
.topbar-note { margin-left: auto; display: flex; align-items: center; gap: 8px; color: #bcc8c7; font-size: 12px; }
.topbar-note i, .live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px rgba(83,199,187,.7); }
.topbar-note span { color: #647276; }

.viewer-stage { position: relative; min-height: 0; overflow: hidden; isolation: isolate; background: #cfd6d7; border: 1px solid rgba(236,247,243,.13); border-radius: 12px; box-shadow: 0 16px 50px rgba(0,0,0,.22); }
#sceneCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; }
.stage-vignette { position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(13,25,29,.46), transparent 16%, transparent 72%, rgba(12,22,26,.44)); }
.stage-meta { position: absolute; z-index: 3; top: 18px; left: 20px; right: 20px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.stage-pill, .view-mode { display: inline-flex; align-items: center; gap: 9px; min-height: 30px; padding: 0 11px; border: 1px solid rgba(227,241,237,.22); border-radius: 999px; background: rgba(12,24,28,.72); color: #ecf2ef; box-shadow: 0 5px 16px rgba(0,0,0,.10); backdrop-filter: blur(10px); font-size: 11px; }
.stage-pill { letter-spacing: .06em; }
.live-dot { width: 5px; height: 5px; }
.stage-divider { color: #627074; }
.view-mode { color: #bde4dd; }
.mode-icon { font-size: 13px; color: var(--accent-strong); }

.caption-card { position: absolute; z-index: 3; left: 20px; bottom: 20px; max-width: min(560px, 62%); padding: 12px 16px 14px; border: 1px solid rgba(232,243,239,.18); border-left: 2px solid var(--accent); border-radius: 5px 10px 10px 5px; background: rgba(12,24,28,.81); box-shadow: 0 9px 32px rgba(0,0,0,.16); backdrop-filter: blur(12px); pointer-events: none; transition: opacity .18s ease; }
.caption-kicker { margin-bottom: 5px; color: var(--accent-strong); font-size: 9px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.caption-title { font-size: 17px; line-height: 1.35; font-weight: 650; letter-spacing: .025em; }
.caption-body { margin-top: 4px; color: #c4d0cd; font-size: 12px; line-height: 1.45; }

.layer-callouts { position: absolute; z-index: 4; left: 18px; top: 41%; display: grid; gap: 7px; pointer-events: none; }
.layer-label { min-width: 128px; width: max-content; max-width: 180px; padding: 6px 9px 6px 7px; border: 1px solid rgba(141,209,202,.42); border-radius: 4px; color: #f5f9f7; background: rgba(14,34,39,.91); box-shadow: 0 4px 12px rgba(0,0,0,.16); font-size: 11px; line-height: 1.2; white-space: nowrap; }
.layer-label b { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; border-radius: 3px; color: #0e2427; background: var(--accent); font-size: 10px; }
.callout-lines { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.callout-lines line { stroke: #54cabe; stroke-width: 1.2; stroke-opacity: .86; vector-effect: non-scaling-stroke; }
.callout-lines circle { fill: #9af1dd; stroke: #143b3b; stroke-width: 1; vector-effect: non-scaling-stroke; }

.loading-card, .error-card { position: absolute; z-index: 8; top: 50%; left: 50%; width: min(330px, calc(100% - 40px)); transform: translate(-50%,-50%); padding: 24px; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; background: rgba(14,26,30,.92); text-align: center; box-shadow: 0 18px 50px rgba(0,0,0,.26); }
.loader-ring { width: 27px; height: 27px; margin: 0 auto 12px; border: 2px solid rgba(83,199,187,.2); border-top-color: var(--accent); border-radius: 50%; animation: spin .85s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-title { font-size: 14px; font-weight: 650; }
.loading-detail { margin-top: 7px; color: var(--muted); font-size: 11px; }
.loading-track { width: 100%; height: 3px; margin-top: 15px; overflow: hidden; border-radius: 3px; background: #26373a; }
.loading-track span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #49b7ad, #9bebd9); transition: width .2s ease; }
.error-icon { display: grid; place-items: center; width: 26px; height: 26px; margin: 0 auto 10px; border: 1px solid #e89771; border-radius: 50%; color: #ffb28b; font-weight: 700; }
.error-card p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

.stage-hint { position: absolute; z-index: 3; right: 19px; bottom: 23px; color: rgba(235,242,239,.78); font-size: 10px; text-shadow: 0 1px 5px rgba(0,0,0,.3); pointer-events: none; }
.stage-hint span { margin: 0 5px; color: rgba(235,242,239,.48); }
.hint-mouse { color: var(--accent-strong) !important; font-size: 14px; }
.stage-actions { position: absolute; z-index: 4; top: 60px; right: 19px; display: grid; gap: 7px; }
.icon-button { width: 33px; height: 33px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.42); border-radius: 8px; color: white; background: rgba(15,30,34,.68); box-shadow: 0 4px 12px rgba(0,0,0,.12); backdrop-filter: blur(8px); cursor: pointer; font-size: 17px; transition: background .16s, border-color .16s, transform .16s; }
.icon-button:hover { transform: translateY(-1px); border-color: var(--accent); background: rgba(18,51,53,.88); }

.transport { display: flex; flex-direction: column; justify-content: center; gap: 15px; padding: 15px 3px 8px; }
.chapter-row { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; }
.chapter-row::-webkit-scrollbar { display: none; }
.chapter-button { position: relative; flex: 1 0 auto; min-width: 110px; display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 10px; border: 1px solid rgba(206,224,219,.11); border-radius: 5px; color: #a8b5b4; background: rgba(255,255,255,.025); text-align: left; cursor: pointer; transition: color .16s, background .16s, border-color .16s; }
.chapter-button:hover { color: #eff7f3; border-color: rgba(83,199,187,.38); background: rgba(83,199,187,.07); }
.chapter-button.active { color: #e9f5f1; border-color: rgba(83,199,187,.48); background: rgba(83,199,187,.11); }
.chapter-number { color: #5fbeb4; font-size: 10px; font-weight: 750; }
.chapter-text { font-size: 11px; white-space: nowrap; }
.timeline-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.play-button { flex: 0 0 37px; width: 37px; height: 37px; display: grid; place-items: center; border: 1px solid rgba(95,215,200,.55); border-radius: 50%; color: #09201f; background: var(--accent); cursor: pointer; box-shadow: 0 0 20px rgba(83,199,187,.15); transition: transform .15s, background .15s; }
.play-button:hover { transform: scale(1.06); background: #76e3d2; }
.play-button svg { width: 18px; height: 18px; fill: currentColor; }
.time-readout { flex: 0 0 91px; display: flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; font-size: 11px; color: #e4ebe8; }
.time-separator, #totalTime { color: #839191; }
.range-wrap { position: relative; flex: 1; min-width: 80px; display: flex; align-items: center; height: 27px; }
.timeline { width: 100%; height: 4px; margin: 0; border-radius: 99px; appearance: none; outline: none; cursor: pointer; background: linear-gradient(90deg, var(--accent) 0%, var(--accent) var(--progress, 0%), rgba(210,228,222,.18) var(--progress, 0%), rgba(210,228,222,.18) 100%); }
.timeline::-webkit-slider-thumb { width: 12px; height: 12px; border: 2px solid #e3fff8; border-radius: 50%; appearance: none; background: #4bc4b7; box-shadow: 0 0 0 4px rgba(83,199,187,.16); }
.timeline::-moz-range-thumb { width: 9px; height: 9px; border: 2px solid #e3fff8; border-radius: 50%; background: #4bc4b7; box-shadow: 0 0 0 4px rgba(83,199,187,.16); }
.timeline-markers { position: absolute; inset: 0; pointer-events: none; }
.timeline-marker { position: absolute; top: 50%; width: 1px; height: 9px; transform: translate(-50%,-50%); background: rgba(223,242,236,.48); }
.sound-button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid rgba(206,224,219,.14); border-radius: 5px; color: #b8c4c1; background: rgba(255,255,255,.025); font-size: 10px; cursor: pointer; }
.sound-button:hover { color: white; border-color: rgba(83,199,187,.4); }
.sound-button span { color: var(--accent); font-size: 15px; line-height: 10px; }
.footer-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #79888a; font-size: 9px; letter-spacing: .015em; }

@media (max-width: 820px) {
  .app-shell { grid-template-rows: 62px minmax(0, 1fr) 132px 38px; padding: 0 12px 7px; }
  .topbar-note { font-size: 10px; gap: 5px; }
  h1 { font-size: 15px; }
  .caption-card { left: 12px; bottom: 12px; max-width: 72%; padding: 9px 11px; }
  .caption-title { font-size: 14px; }
  .caption-body { font-size: 10px; }
  .stage-meta { left: 12px; right: 12px; top: 12px; }
  .stage-actions { right: 12px; top: 52px; }
  .stage-hint { right: 12px; bottom: 16px; font-size: 9px; }
  .layer-callouts { left: 10px; top: 43%; gap: 4px; }
  .layer-label { min-width: 108px; padding: 4px 6px; font-size: 9px; }
  .layer-label b { width: 15px; height: 15px; margin-right: 4px; font-size: 9px; }
  .chapter-row { gap: 5px; }
  .chapter-button { min-width: 94px; padding: 0 7px; }
  .chapter-text { font-size: 10px; }
  .transport { gap: 12px; }
  .timeline-row { gap: 8px; }
  .footer-note { align-items: flex-start; flex-direction: column; justify-content: center; gap: 2px; font-size: 8px; }
}
@media (max-height: 650px) {
  .app-shell { grid-template-rows: 60px minmax(0, 1fr) 113px 26px; }
  .transport { gap: 9px; padding-top: 10px; }
  .stage-meta { top: 12px; }
  .caption-card { bottom: 12px; }
}