:root{color-scheme:dark;--bg:#050b14;--panel:rgba(9,20,36,.88);--line:rgba(255,255,255,.13);--text:#f7f9fc;--muted:#9fb0c7;--gold:#ffd166;--cyan:#7ee7f2;--ui:Aptos,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Arial,sans-serif}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:var(--bg);color:var(--text);font-family:var(--ui);overflow:hidden}
button,a{font:inherit}.viewer{height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:radial-gradient(800px 400px at 50% -10%,rgba(92,139,211,.22),transparent 70%),#050b14}
.viewer-top,.viewer-bottom{display:flex;align-items:center;gap:10px;padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left));background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:5}
.viewer-top{border-bottom:1px solid var(--line)}.viewer-bottom{border-top:1px solid var(--line);padding-top:10px;padding-bottom:max(10px,env(safe-area-inset-bottom))}
.viewer-title{min-width:0;flex:1}.viewer-title strong{display:block;font-size:clamp(13px,2vw,16px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.viewer-title span{display:block;margin-top:2px;color:var(--muted);font-size:11px}
.control{min-width:42px;min-height:42px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.06);color:var(--text);display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:850;cursor:pointer;touch-action:manipulation}
.control:hover{background:rgba(255,255,255,.11)}.control:disabled{opacity:.38;cursor:not-allowed}.control.primary{background:linear-gradient(135deg,#fff6cf,var(--gold));color:#14233d;border-color:rgba(255,255,255,.45)}
.slide-stage{min-height:0;min-width:0;display:grid;place-items:center;padding:clamp(8px,1.5vw,18px);position:relative;overflow:hidden;touch-action:pan-y}
.slide-frame{width:min(100%,calc((100dvh - 142px)*16/9));max-height:100%;aspect-ratio:16/9;display:grid;place-items:center;background:#000;border-radius:clamp(8px,1.4vw,18px);overflow:hidden;box-shadow:0 22px 70px rgba(0,0,0,.46);border:1px solid rgba(255,255,255,.12)}
.slide-frame img{display:block;width:100%;height:100%;object-fit:contain;background:#000;user-select:none;-webkit-user-drag:none}
.counter{min-width:74px;text-align:center;color:#dce7f5;font-size:13px;font-weight:850}.spacer{flex:1}.hint{color:var(--muted);font-size:11px;white-space:nowrap}
.loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:13px;pointer-events:none}.loading[hidden]{display:none}
:focus-visible{outline:3px solid rgba(126,231,242,.9);outline-offset:2px}
@media(max-width:640px){.viewer-top,.viewer-bottom{gap:7px}.viewer-top{padding-top:max(8px,env(safe-area-inset-top));padding-bottom:8px}.viewer-bottom{padding-top:8px;padding-bottom:max(8px,env(safe-area-inset-bottom))}.control{min-width:40px;min-height:40px;border-radius:11px}.hint{display:none}.slide-stage{padding:6px}.slide-frame{width:100%;border-radius:9px}}
@media(orientation:landscape) and (max-height:560px){.viewer{grid-template-rows:auto minmax(0,1fr) auto}.viewer-top,.viewer-bottom{padding-top:5px;padding-bottom:5px}.viewer-top{padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}.viewer-bottom{padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right));padding-bottom:max(5px,env(safe-area-inset-bottom))}.control{min-width:36px;min-height:36px;border-radius:10px}.viewer-title span{display:none}.slide-stage{padding:4px}.slide-frame{width:min(100%,calc((100dvh - 94px)*16/9));border-radius:7px}}
@media(min-width:1600px){.slide-stage{padding:20px}.slide-frame{width:min(1500px,calc((100dvh - 150px)*16/9))}}
@media(hover:none){.control:hover{background:rgba(255,255,255,.06)}.control.primary:hover{background:linear-gradient(135deg,#fff6cf,var(--gold))}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
/* fullscreen presentation mode */
:fullscreen .viewer{grid-template-rows:minmax(0,1fr);background:#000}
:fullscreen .viewer-top,:fullscreen .viewer-bottom{position:fixed;left:0;right:0;z-index:30;transition:opacity .18s ease,transform .18s ease;background:rgba(5,11,20,.86)}
:fullscreen .viewer-top{top:0;border-bottom:1px solid var(--line)}
:fullscreen .viewer-bottom{bottom:0;border-top:1px solid var(--line)}
:fullscreen .slide-stage{grid-row:1;padding:0;width:100vw;height:100dvh;background:#000}
:fullscreen .slide-frame{width:min(100vw,calc(100dvh*16/9));height:min(100dvh,calc(100vw*9/16));max-height:none;aspect-ratio:16/9;border:0;border-radius:0;box-shadow:none}
:fullscreen .viewer.controls-hidden .viewer-top{opacity:0;transform:translateY(-105%);pointer-events:none}
:fullscreen .viewer.controls-hidden .viewer-bottom{opacity:0;transform:translateY(105%);pointer-events:none}
:fullscreen .loading{z-index:35}
@media(prefers-reduced-motion:reduce){:fullscreen .viewer-top,:fullscreen .viewer-bottom{transition:none}}