*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#080808;--white:#fff;--dim:#a0a0a0;--muted:#666;--faint:#222;--red:#cc3333;--font-sans:system-ui,-apple-system,sans-serif;--font-mono:'SF Mono','Menlo',monospace}
html,body{background:var(--bg);color:var(--white);font-family:var(--font-sans);overflow:hidden;height:100%;width:100%}
body{display:flex;flex-direction:column;align-items:center;justify-content:center}

/* Viewer */
#viewer{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg);overflow:hidden}
#viewer img{max-width:100vw;max-height:100vh;width:auto;height:auto;object-fit:contain;display:block;user-select:none;-webkit-user-select:none}

/* Nav arrows */
.nav-area{position:fixed;top:0;bottom:0;width:35%;z-index:10;cursor:pointer}
.nav-area.left{left:0}
.nav-area.right{right:0}
.nav-area svg{position:absolute;top:50%;transform:translateY(-50%);width:28px;height:28px;opacity:.3;transition:opacity .3s}
.nav-area:hover svg{opacity:.8}
.nav-area.left svg{left:16px}
.nav-area.right svg{right:16px}

/* Counter */
#counter{position:fixed;top:18px;left:50%;transform:translateX(-50%);font-family:var(--font-mono);font-size:.7rem;color:var(--dim);z-index:20;letter-spacing:.15em;opacity:.6}

/* Close */
#close{position:fixed;top:16px;right:16px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);border:none;color:var(--white);font-size:18px;cursor:pointer;z-index:20;display:flex;align-items:center;justify-content:center;transition:background .3s}
#close:hover{background:rgba(255,255,255,.15)}

/* Title */
#title{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);font-size:.65rem;color:var(--muted);z-index:20;letter-spacing:.1em;max-width:80%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media(max-width:600px){
  .nav-area{width:30%}
  #counter{font-size:.6rem;top:14px}
  #close{width:34px;height:34px;font-size:16px;top:12px;right:12px}
}