:root{--bg:#0a0a0c;--fg:#f5f5f7;--fg-dim:#f5f5f79e;--accent:#4cc9f0;--accent-soft:#4cc9f04d;--thumb-w:144px;--thumb-h:81px;--thumb-gap:8px;--radius:10px;--timeline-h:118px;--ease:cubic-bezier(.22, 1, .36, 1);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;font-family:PingFang SC,HarmonyOS Sans SC,Microsoft YaHei,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body{overscroll-behavior:none;height:100%;margin:0;overflow:hidden}#app{flex-direction:column;height:100dvh;display:flex}.topbar{z-index:20;padding:calc(14px + env(safe-area-inset-top)) 24px 20px;pointer-events:none;background:linear-gradient(#0a0a0cb8,#0a0a0c00);justify-content:space-between;align-items:center;gap:16px;display:flex;position:absolute;top:0;left:0;right:0}.topbar-actions{pointer-events:auto;gap:8px;display:flex}.topbar-actions button{-webkit-backdrop-filter:blur(8px);color:#ffffffe6;letter-spacing:.04em;cursor:pointer;background:#ffffff1a;border:1px solid #ffffff42;border-radius:999px;padding:8px 16px;font-size:12.5px;transition:background .2s,border-color .2s}.topbar-actions button:hover{border-color:var(--accent);background:#ffffff38}.topbar-actions button:active{transform:scale(.95)}.topbar-actions button.active{background:var(--accent);border-color:var(--accent);color:#0a0a0c;font-weight:600}.topbar-actions button.active:hover{background:#5fd4f7;border-color:#5fd4f7}.topbar-actions button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.brand{letter-spacing:.14em;color:#ffffffeb;text-shadow:0 1px 8px #0009;margin:0;font-size:15px;font-weight:600}.topbar-meta{color:#ffffffc7;text-shadow:0 1px 6px #000000b3;font-variant-numeric:tabular-nums;gap:14px;font-size:13px;display:flex}#time-display{color:#ffffffad;font-size:12px}#stage{background:var(--bg);flex:1;min-height:0;position:relative;overflow:hidden}.slide{opacity:0;visibility:hidden;transition:opacity .5s var(--ease), visibility 0s .5s;margin:0;position:absolute;inset:0}.slide.active{opacity:1;visibility:visible;transition:opacity .5s var(--ease)}.slide img{object-fit:cover;width:100%;height:100%;animation:stage-in 1.4s var(--ease) both;display:block}.slide img.img-error{object-fit:contain;background:#141418}@keyframes stage-in{0%{transform:scale(1.03)}to{transform:scale(1)}}.caption{padding:72px 32px calc(28px + env(safe-area-inset-bottom));pointer-events:none;background:linear-gradient(#0a0a0c00 0%,#0a0a0c59 45%,#0a0a0cd1 100%);position:absolute;bottom:0;left:0;right:0}.caption a{pointer-events:auto}.slide-title{letter-spacing:.01em;color:#fff;text-shadow:0 2px 16px #0000008c;margin:0 0 8px;font-size:clamp(22px,3.4vw,42px);font-weight:700;line-height:1.2}.slide-copyright{color:#ffffffc7;text-shadow:0 1px 8px #0009;margin:0;font-size:clamp(12px,1.3vw,15px)}.slide-copyright a{color:#ffffffd1;text-decoration:none}.slide-copyright a:hover{color:#fff;text-decoration:underline}.caption-actions{flex-wrap:wrap;align-items:center;gap:14px;display:flex}.quiz-btn{-webkit-backdrop-filter:blur(8px);color:#fff;letter-spacing:.04em;background:#ffffff1a;border:1px solid #ffffff4d;border-radius:999px;padding:8px 18px;font-size:12px;text-decoration:none;transition:background .2s,border-color .2s}.quiz-btn:hover{border-color:var(--accent);background:#ffffff38}.quiz-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.nav-btn{z-index:12;-webkit-backdrop-filter:blur(10px);color:#ffffffd9;cursor:pointer;opacity:0;background:#0c0c0f59;border:1px solid #ffffff3d;border-radius:50%;justify-content:center;align-items:center;width:46px;height:46px;padding:0;transition:opacity .25s,background .2s,border-color .2s;display:flex;position:absolute;top:50%;transform:translateY(-50%)}@media (hover:hover){#stage:hover .nav-btn{opacity:1}}.nav-btn svg{width:22px;height:22px}.nav-prev{left:18px}.nav-next{right:18px}.nav-btn:hover:not(:disabled){border-color:var(--accent);background:#ffffff38}.nav-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.nav-btn:disabled{opacity:.25;cursor:default}@media (width<=720px){.nav-btn{display:none}}.stage-overlay{z-index:15;background:var(--bg);opacity:0;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:18px;transition:opacity .4s;display:flex;position:absolute;inset:0}.stage-overlay.visible{opacity:1;pointer-events:auto}.spinner{border:3px solid #ffffff24;border-top-color:var(--accent);border-radius:50%;width:34px;height:34px;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}#overlay-text{color:var(--fg-dim);margin:0;font-size:14px}#stage.loading:after{content:"";right:26px;bottom:calc(var(--timeline-h) + 22px);z-index:12;border:2.5px solid #ffffff40;border-top-color:var(--accent);border-radius:50%;width:26px;height:26px;animation:.8s linear infinite spin;position:absolute}@media (width<=720px){#stage.loading:after{right:16px;bottom:calc(var(--timeline-h) + 14px);width:22px;height:22px}}.retry-btn{color:var(--fg);cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffff14;border:1px solid #ffffff38;border-radius:999px;padding:8px 22px;font-size:13px;transition:background .2s}.retry-btn:hover{background:#ffffff29}.retry-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.timeline-wrap{z-index:10;height:var(--timeline-h);-webkit-backdrop-filter:blur(20px)saturate(150%);padding-bottom:env(safe-area-inset-bottom);background:#0c0c0fd1;border-top:1px solid #ffffff14;flex:none;position:relative}.timeline{scrollbar-width:none;-ms-overflow-style:none;height:100%;padding:14px 20px 0;overflow:auto hidden}.timeline::-webkit-scrollbar{display:none}.timeline-inner{position:relative}.thumb{border-radius:var(--radius);cursor:pointer;transition:transform .2s var(--ease), border-color .2s;background:#1a1a20;border:2px solid #0000;padding:0;position:absolute;top:0;left:0;overflow:hidden}@media (hover:hover){.timeline{cursor:grab}.timeline:active{cursor:grabbing}}.thumb:hover{transform:translateY(-2px)}.thumb img.thumb-img{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity .35s;display:block}.thumb img.thumb-img.loaded{opacity:1}.year-tag{z-index:2;color:#ffffff9e;letter-spacing:.08em;text-align:left;pointer-events:none;background:linear-gradient(90deg,#0c0c0ff2,#0c0c0f00);width:44px;height:100%;padding:0 0 0 6px;font-size:12px;font-weight:600;position:absolute;top:0;left:0}.thumb .thumb-date{color:#ffffffe0;text-shadow:0 1px 4px #000000e6;letter-spacing:.03em;font-size:11px;font-weight:600;position:absolute;bottom:4px;left:6px}.thumb.current{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-soft), 0 4px 18px #00000080}.thumb:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.toast{left:50%;bottom:calc(var(--timeline-h) + 26px);z-index:30;-webkit-backdrop-filter:blur(14px);color:#ffffffe0;letter-spacing:.03em;white-space:nowrap;opacity:0;pointer-events:none;background:#0c0c0fc7;border:1px solid #ffffff2e;border-radius:999px;padding:10px 22px;font-size:13px;transition:opacity .4s,transform .4s;position:absolute;transform:translate(-50%)translateY(8px)}.toast.visible{opacity:1;transform:translate(-50%)translateY(0)}@media (width<=720px){.toast{white-space:normal;text-align:center;width:max-content;max-width:calc(100vw - 40px);padding:8px 16px;font-size:12px}:root{--thumb-w:112px;--thumb-h:63px;--timeline-h:96px}.topbar{padding:calc(10px + env(safe-area-inset-top)) 16px 14px}.topbar-meta{gap:10px;font-size:12px}.caption{padding:48px 20px calc(20px + env(safe-area-inset-bottom))}.slide-title{font-size:20px}.timeline{padding:12px 14px 0}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}