:root{--bg-0: #f6f9fc;--bg-1: #eef3f8;--bg-2: #e6edf5;--ink-1: #1b2a41;--ink-2: #3d5170;--ink-3: #6b7c99;--accent: #6aa9e9;--accent-2: #7bd0c1;--accent-3: #c4a7e7;--coral: #f5a69b;--cream: #fbf4e4;--line: rgba(27, 42, 65, .08);--shadow: 0 10px 40px rgba(30, 55, 90, .08);--shadow-sm: 0 4px 16px rgba(30, 55, 90, .06);--radius: 14px;--radius-sm: 10px}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;font-family:PingFang SC,Hiragino Sans GB,Microsoft YaHei,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:radial-gradient(1200px 600px at 10% -10%,#eaf3ff 0%,transparent 60%),radial-gradient(900px 500px at 110% 10%,#e8f7f2 0%,transparent 60%),linear-gradient(180deg,var(--bg-0),var(--bg-1));color:var(--ink-1);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}#app{max-width:1440px;margin:0 auto;padding:28px 32px 40px;display:flex;flex-direction:column;gap:14px;min-height:100%}.app-header{display:flex;flex-direction:column;gap:4px}.brand{display:flex;align-items:center;gap:12px}.brand-dot{width:10px;height:10px;flex-shrink:0;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 0 0 4px #6aa9e92e}.app-header h1{font-size:22px;font-weight:600;letter-spacing:.5px;color:var(--ink-1)}.subtitle{margin-left:22px;font-size:13px;color:var(--ink-3);letter-spacing:.4px}.chapter-indicator{display:flex;align-items:center;gap:10px;align-self:flex-start;background:#ffffffd9;backdrop-filter:blur(10px);padding:7px 16px;border-radius:999px;border:1px solid var(--line);box-shadow:var(--shadow-sm);font-size:13px;color:var(--ink-2)}.chapter-indicator .chapter-index{color:var(--accent);font-weight:600;letter-spacing:.5px}.chapter-indicator .chapter-title{color:var(--ink-1);font-weight:500}.stage-wrapper{position:relative;background:linear-gradient(180deg,#fff,#f7fbfe);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.stage-container{width:100%;aspect-ratio:16 / 9;display:block}.stage-container canvas{display:block;width:100%!important;height:100%!important}.captions{min-height:58px;display:flex;align-items:center;justify-content:center;padding:11px 20px;background:#ffffffd1;backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);font-size:14.5px;line-height:1.7;color:var(--ink-1);text-align:center;opacity:0;pointer-events:none;transition:opacity .4s ease}.captions.visible{opacity:1}.chapter-nav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.chapter-nav .chapter-chip{display:flex;flex-direction:column;gap:4px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);cursor:pointer;text-align:left;color:var(--ink-2);transition:transform .15s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease;font-family:inherit}.chapter-nav .chapter-chip:hover{transform:translateY(-2px);border-color:#6aa9e98c;box-shadow:var(--shadow-sm)}.chapter-nav .chapter-chip.active{background:linear-gradient(135deg,#6aa9e929,#7bd0c12e);border-color:#6aa9e98c;color:var(--ink-1)}.chapter-nav .chip-index{font-size:11px;letter-spacing:1px;color:var(--accent);font-weight:600}.chapter-nav .chip-title{font-size:13.5px;font-weight:500;color:inherit;line-height:1.35}.controls{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:14px 18px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}.controls button{appearance:none;border:1px solid var(--line);background:#fff;color:var(--ink-1);font-family:inherit;font-size:13.5px;letter-spacing:.5px;padding:9px 18px;border-radius:999px;cursor:pointer;transition:transform .15s ease,border-color .2s ease,background .2s ease,color .2s ease;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}.controls button:hover:not(:disabled){border-color:#6aa9e999;color:var(--accent);transform:translateY(-1px)}.controls button:disabled{opacity:.5;cursor:not-allowed}.controls button.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border-color:transparent;box-shadow:0 6px 18px #6aa9e959}.controls button.primary:hover:not(:disabled){color:#fff;filter:brightness(1.04)}.controls .progress{flex:1;min-width:80px;max-width:340px;height:4px;background:#1b2a4114;border-radius:999px;overflow:hidden}.controls .progress>span{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .15s linear}.app-footer{text-align:center;color:var(--ink-3);font-size:12px;letter-spacing:.5px;padding-top:4px}@media (max-width: 1200px){#app{padding:22px 24px 32px;gap:12px}.app-header h1{font-size:20px}.chapter-nav .chip-title{font-size:13px}}@media (max-width: 960px){#app{padding:18px 18px 28px;gap:11px}.app-header h1{font-size:18px}.subtitle{font-size:12px}.chapter-nav{grid-template-columns:repeat(3,minmax(0,1fr))}.chapter-nav .chapter-chip{padding:10px 12px}.chapter-nav .chip-title{font-size:12.5px}.controls{gap:8px;padding:11px 14px}.controls button{font-size:13px;padding:8px 14px}.captions{font-size:13.5px;padding:10px 16px;min-height:52px}}@media (max-width: 768px){#app{padding:14px 14px 22px;gap:10px}.app-header h1{font-size:16px}.subtitle{font-size:11.5px;margin-left:16px}.chapter-indicator{font-size:12px;padding:6px 12px;gap:8px}.chapter-nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.chapter-nav .chapter-chip{padding:9px 10px}.chapter-nav .chip-index{font-size:10px}.chapter-nav .chip-title{font-size:12px}.controls{gap:6px;padding:10px 12px}.controls button{font-size:12.5px;padding:7px 12px}.controls .progress{max-width:200px}.captions{font-size:13px;padding:9px 14px;min-height:48px}}@media (max-width: 600px){#app{padding:12px 12px 20px;gap:9px}.app-header h1{font-size:15px;letter-spacing:0}.subtitle{display:none}.chapter-indicator{font-size:11.5px;padding:5px 10px}.chapter-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.chapter-nav .chapter-chip{padding:8px 10px}.chapter-nav .chip-title{font-size:11.5px}.controls{gap:5px;padding:8px 10px}.controls button{font-size:12px;padding:7px 10px}.controls .progress{min-width:60px;max-width:140px}.captions{font-size:12.5px;padding:8px 12px;min-height:44px;line-height:1.6}.app-footer{font-size:11px}}@media (max-width: 480px){#app{padding:10px 10px 16px;gap:8px}.brand-dot{width:8px;height:8px}.app-header h1{font-size:14px}.chapter-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.controls button{padding:6px 9px;font-size:11.5px}.controls .progress{max-width:100px}.captions{font-size:12px;min-height:40px}}