*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:"PingFang SC","Microsoft YaHei",Arial,sans-serif;color:#eaf7ff;background:#071525;overflow:hidden}.bg-grid{position:fixed;inset:0;background:linear-gradient(rgba(41,182,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(41,182,255,.08) 1px,transparent 1px);background-size:42px 42px;opacity:.35;pointer-events:none}.bg-orb{position:fixed;border-radius:50%;filter:blur(50px);opacity:.38;pointer-events:none}.orb-1{width:360px;height:360px;left:-120px;top:70px;background:#009dff}.orb-2{width:420px;height:420px;right:-150px;bottom:-120px;background:#16e0ff}.topbar{height:70px;padding:0 22px;display:flex;align-items:center;gap:22px;background:rgba(5,17,31,.78);backdrop-filter:blur(18px);border-bottom:1px solid rgba(86,190,255,.22);position:relative;z-index:5}.brand{display:flex;align-items:center;gap:12px;min-width:190px;cursor:pointer}.brand-logo{width:190px;height:auto;display:block;object-fit:contain;flex:0 0 auto;border-radius:6px;padding:3px}.brand strong{display:block;font-size:16px}.brand span{font-size:10px;letter-spacing:3px;color:#8db7ca}.topnav{display:flex;gap:8px;flex:1;overflow:auto}.topnav button,.actions button,.menu-btn,.mobile-controls button{border:1px solid rgba(103,204,255,.25);background:rgba(13,39,68,.68);color:#dff7ff;border-radius:14px;padding:10px 15px;cursor:pointer;white-space:nowrap}.topnav button.active,.topnav button:hover,.actions button:hover{background:linear-gradient(135deg,#0b74d9,#12b9ff);color:#fff;box-shadow:0 0 18px rgba(18,185,255,.25)}.menu-btn{display:none}.layout{height:calc(100vh - 70px);display:grid;grid-template-columns:285px 1fr;position:relative;z-index:2}.sidebar{padding:18px 16px;overflow:auto;border-right:1px solid rgba(86,190,255,.18);background:rgba(4,16,30,.55);backdrop-filter:blur(16px)}.side-title{font-weight:800;margin:2px 0 12px;color:#fff}.chapter-list{display:grid;gap:10px}.chapter{padding:14px 14px;border-radius:18px;border:1px solid rgba(98,187,240,.18);background:rgba(255,255,255,.045);cursor:pointer}.chapter.active{background:linear-gradient(135deg,rgba(0,118,218,.9),rgba(0,194,255,.62));box-shadow:0 0 22px rgba(0,165,255,.2)}.chapter strong{display:block;font-size:15px}.chapter span{display:block;margin-top:5px;font-size:12px;color:#a9c7d6}.preview-title{margin-top:22px;display:flex;justify-content:space-between}.preview-title span{font-size:12px;color:#88a9bb}.thumb-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}.thumb{border:2px solid transparent;border-radius:16px;padding:4px;background:rgba(255,255,255,.06);cursor:pointer;transition:.2s}.thumb img{width:100%;display:block;border-radius:12px}.thumb.active{border-color:#18c4ff;box-shadow:0 0 16px rgba(24,196,255,.35)}.stage-wrap{padding:26px 44px 20px;overflow:hidden}.stage-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.stage-head h1{margin:0;font-size:22px}.stage-head p{margin:6px 0 0;color:#9cc6d8}.actions{display:flex;gap:10px}.slide-frame{height:calc(100vh - 178px);border-radius:28px;padding:14px;background:linear-gradient(135deg,rgba(255,255,255,.15),rgba(255,255,255,.04));border:1px solid rgba(112,213,255,.25);box-shadow:0 25px 80px rgba(0,0,0,.32),inset 0 0 40px rgba(29,188,255,.08);display:grid;place-items:center;position:relative;overflow:hidden}.slide-frame:before{content:"";position:absolute;inset:-1px;background:linear-gradient(115deg,transparent 0%,rgba(83,221,255,.18) 38%,transparent 70%);transform:translateX(-120%);animation:scan 5s infinite}.slide-frame img{max-width:100%;max-height:100%;border-radius:18px;box-shadow:0 16px 46px rgba(0,0,0,.5);position:relative;z-index:1}.pager{position:fixed;right:20px;bottom:22px;display:grid;gap:10px;z-index:6}.pager button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(120,219,255,.25);background:rgba(10,33,58,.84);color:#eaf7ff;font-size:18px;cursor:pointer}.dots{display:grid;place-items:center;gap:7px}.dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22)}.dot.active{background:#1dccff;box-shadow:0 0 14px #1dccff}.mobile-controls{display:none}.viewer{position:fixed;inset:0;z-index:20;background:rgba(0,7,15,.92);display:none;align-items:center;justify-content:center;padding:25px}.viewer.show{display:flex}.viewer img{max-width:96vw;max-height:94vh;border-radius:18px;box-shadow:0 0 60px rgba(0,190,255,.22)}.viewer-close{position:absolute;right:22px;top:18px;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:30px;cursor:pointer}@keyframes scan{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}
@media(max-width:900px){body{overflow:auto}.topbar{height:62px;padding:0 12px}.brand{min-width:auto}.brand span{display:none}.topnav{display:none}.menu-btn{display:block;margin-left:auto}.layout{height:auto;display:block}.sidebar{position:fixed;left:-310px;top:62px;bottom:0;width:300px;z-index:10;transition:.25s}.sidebar.show{left:0}.stage-wrap{padding:16px 12px 22px}.stage-head{display:block}.stage-head h1{font-size:18px}.actions{margin-top:10px;overflow:auto}.slide-frame{height:auto;min-height:0;padding:8px;border-radius:20px}.slide-frame img{width:100%;height:auto}.pager{display:none}.mobile-controls{display:flex;align-items:center;justify-content:space-between;margin-top:12px}.mobile-controls span{font-size:13px;color:#b8d8e7}.thumb-list{grid-template-columns:1fr 1fr}.chapter{padding:12px}.viewer{padding:12px}.viewer img{width:100%;height:auto}}

.slide-track{position:absolute;inset:14px;z-index:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;scrollbar-width:none;will-change:scroll-position}
.slide-track::-webkit-scrollbar{display:none}
.slide-panel{min-height:auto;display:block;padding:0 0 18px;contain:layout paint}
.slide-card{width:100%;height:auto;display:block}
.slide-panel-title{display:flex;align-items:end;justify-content:space-between;gap:16px;padding:0 6px 10px;color:#eaf7ff}
.slide-panel-title strong{font-size:16px;line-height:1.25}
.slide-panel-title span{font-size:12px;color:#8db7ca;white-space:nowrap}
.slide-panel img{width:100%;height:auto;max-width:100%;border-radius:18px;box-shadow:0 16px 46px rgba(0,0,0,.5);display:block;user-select:none;-webkit-user-drag:none;transform:translateZ(0)}
@media(max-width:900px){.slide-frame{height:calc(100dvh - 188px);min-height:420px}.slide-track{inset:8px}.slide-panel img{width:auto;height:auto;max-width:100%;max-height:100%}}

.bg-grid{animation:gridDrift 22s linear infinite}.orb-1{animation:orbFloatA 10s ease-in-out infinite}.orb-2{animation:orbFloatB 12s ease-in-out infinite}.chapter,.thumb,.topnav button,.actions button,.menu-btn,.mobile-controls button,.pager button{transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease}.chapter:hover,.thumb:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(0,0,0,.24),0 0 18px rgba(24,196,255,.18)}.chapter.active{animation:activeGlow 2.8s ease-in-out infinite}.thumb.active{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(24,196,255,.6),0 12px 26px rgba(0,0,0,.26),0 0 22px rgba(24,196,255,.45)}.topnav button:hover,.actions button:hover,.menu-btn:hover,.mobile-controls button:hover,.pager button:hover{transform:translateY(-1px)}#autoBtn{position:relative;overflow:hidden}#autoBtn:after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:rgba(255,255,255,.9);box-shadow:0 0 10px rgba(255,255,255,.55)}#autoBtn.playing:after{animation:autoFill 3.5s linear infinite}.page-progress{height:4px;margin:12px 10px 0;border-radius:999px;background:rgba(130,215,255,.14);overflow:hidden}.page-progress span{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#16c4ff,#c5f4ff);box-shadow:0 0 14px rgba(22,196,255,.55);transition:width .38s cubic-bezier(.2,.8,.2,1)}.side-mask{position:fixed;inset:62px 0 0;z-index:8;background:rgba(0,7,15,.52);backdrop-filter:blur(3px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .24s ease,visibility .24s ease}.side-mask.show{opacity:1;visibility:visible;pointer-events:auto}.viewer{display:flex;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .24s ease,visibility .24s ease}.viewer.show{display:flex;opacity:1;visibility:visible;pointer-events:auto}.viewer img{transform:scale(.965);opacity:.88;transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .24s ease}.viewer.show img{transform:scale(1);opacity:1}
@keyframes gridDrift{0%{background-position:0 0,0 0}100%{background-position:42px 84px,84px 42px}}@keyframes orbFloatA{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(34px,20px,0) scale(1.06)}}@keyframes orbFloatB{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-28px,-24px,0) scale(1.05)}}@keyframes logoPulse{0%,100%{box-shadow:0 0 24px rgba(41,182,255,.45)}50%{box-shadow:0 0 34px rgba(41,182,255,.68)}}@keyframes activeGlow{0%,100%{box-shadow:0 0 22px rgba(0,165,255,.2)}50%{box-shadow:0 0 30px rgba(0,194,255,.36)}}@keyframes autoFill{0%{width:0}100%{width:100%}}
@media(prefers-reduced-motion:reduce){.bg-grid,.orb-1,.orb-2,.chapter.active,#autoBtn.playing:after{animation:none!important}.slide-track{scroll-behavior:auto}.slide-panel img,.sidebar,.thumb,.chapter,.topnav button,.actions button,.menu-btn,.mobile-controls button,.pager button,.page-progress span,.viewer,.viewer img{transition:none!important}}

@media(max-width:900px){
  html,body{height:100dvh;overflow:hidden}
  body.side-open{touch-action:none}
  .bg-grid{background-size:34px 34px;opacity:.22}
  .bg-orb{filter:blur(42px);opacity:.24}
  .orb-1{width:240px;height:240px;left:-130px;top:80px}
  .orb-2{width:260px;height:260px;right:-130px;bottom:-90px}
  .topbar{height:58px;padding:0 max(12px,env(safe-area-inset-left)) 0 12px;gap:10px}
  .brand{gap:9px;min-width:0;flex:1;overflow:hidden}
  .brand-logo{width:min(190px,calc(100vw - 92px));height:auto;flex:0 0 auto}
  .brand strong{font-size:14px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .brand span{display:block;font-size:9px;letter-spacing:2px}
  .menu-btn{display:block;margin-left:0;padding:9px 12px;border-radius:12px;flex:0 0 auto}
  .layout{height:calc(100dvh - 58px);display:block;overflow:hidden;z-index:auto}
  .stage-wrap{height:100%;padding:12px 10px max(12px,env(safe-area-inset-bottom));display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:10px;overflow:hidden}
  .stage-head{display:grid;grid-template-columns:1fr;gap:9px;margin:0}
  .stage-head h1{font-size:17px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .stage-head p{margin-top:3px;font-size:12px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .actions{width:100%;min-width:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;overflow:hidden}
  .actions button{min-width:0;width:100%;padding:9px 4px;border-radius:12px;font-size:12px;text-align:center;overflow:hidden;text-overflow:ellipsis}
  .slide-frame{height:auto;min-height:0;padding:8px;border-radius:18px;align-self:stretch}
  .slide-track{inset:8px;border-radius:14px}
  .slide-panel{min-height:auto;display:block;padding:0 0 10px}
  .slide-card{height:auto;display:block}
  .slide-panel-title{align-items:center;padding:0 2px 6px;gap:10px}
  .slide-panel-title strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .slide-panel-title span{font-size:11px}
  .slide-panel img{width:100%;height:auto;max-width:100%;max-height:none;border-radius:14px;box-shadow:0 12px 34px rgba(0,0,0,.42)}
  .page-progress{height:3px;margin:0 4px}
  .mobile-controls{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:0}
  .mobile-controls button{height:38px;padding:0 12px;border-radius:12px;font-size:13px}
  .mobile-controls span{min-width:58px;text-align:center;font-size:12px;color:#b8d8e7}
  .sidebar{top:58px;left:calc(-1 * min(86vw,340px));bottom:0;width:min(86vw,340px);padding:16px 14px max(18px,env(safe-area-inset-bottom));z-index:10;border-right:1px solid rgba(86,190,255,.22);background:#061827;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:18px 0 40px rgba(0,0,0,.32)}
  .sidebar.show{left:0}
  .side-mask{inset:58px 0 0;z-index:8}
  .chapter-list{gap:8px}
  .chapter{padding:12px;border-radius:14px}
  .chapter strong{font-size:14px}
  .chapter span{font-size:11px}
  .preview-title{margin-top:18px}
  .thumb-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .thumb{border-radius:12px;padding:3px}
  .thumb img{border-radius:9px}
  .viewer{padding:12px}
  .viewer img{max-width:100%;max-height:88dvh;width:auto;height:auto;border-radius:14px}
  .viewer-close{right:14px;top:12px;width:42px;height:42px}
}