:root{
  --bg:#080808;
  --text:#f7f7f7;
  --muted:rgba(255,255,255,.6);
  --line:rgba(255,255,255,.14);
  --glass:rgba(8,8,8,.48);
  --drawer:rgba(13,13,13,.94);
}
*{box-sizing:border-box}
html,body{
  margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);
  color:var(--text);font-family:Arial,Helvetica,sans-serif;
}
button,a{font:inherit}
button{color:inherit}

.entry{
  position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(circle at 70% 28%,rgba(255,255,255,.075),transparent 34%),
    linear-gradient(145deg,#070707,#121212);
}
.entry-card{width:min(660px,92vw);text-align:center}
.eyebrow{font-size:11px;letter-spacing:.3em;opacity:.52;margin-bottom:20px}
.entry h1{font-size:clamp(42px,6vw,80px);line-height:.98;margin:0 0 22px;letter-spacing:-.04em}
.entry p{font-size:18px;line-height:1.55;color:var(--muted);margin:0 auto 32px;max-width:500px}
.primary-btn{
  border:0;border-radius:999px;background:#fff;color:#101010;
  padding:15px 30px;font-weight:700;letter-spacing:.055em;cursor:pointer;
  transition:transform .18s ease,opacity .18s ease
}
.primary-btn:hover{transform:translateY(-1px);opacity:.94}
.text-link{
  display:block;margin-top:20px;color:var(--muted);font-size:14px;
  text-underline-offset:4px
}

.viewer{position:fixed;inset:0;display:none;background:#060606}
.viewer.active{display:block}

.topbar{
  position:absolute;inset:0 0 auto 0;height:60px;z-index:20;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 16px;
  background:linear-gradient(to bottom,rgba(0,0,0,.70),rgba(0,0,0,0))
}
.brand{font-size:11px;letter-spacing:.23em;font-weight:700;opacity:.88}
.top-actions{justify-self:end;display:flex;align-items:center;gap:8px}
.pill{
  height:38px;min-width:38px;padding:0 13px;border:1px solid var(--line);
  border-radius:999px;background:var(--glass);backdrop-filter:blur(12px);
  color:#fff;text-decoration:none;display:inline-grid;place-items:center;cursor:pointer
}
.icon-only{padding:0}
.pdf-btn{display:flex;gap:7px;font-size:12px;font-weight:700;letter-spacing:.08em}

.stage{position:absolute;inset:0;display:grid;place-items:center;touch-action:pan-y}
.page-shell{
  position:relative;width:100vw;height:100vh;display:grid;place-items:center;
  overflow:hidden;background:#070707
}
.page-shell img{
  width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;
  transition:opacity .18s ease,transform .18s ease
}
.page-shell img.loading{opacity:.12;transform:scale(.996)}

.loader{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:none;align-items:center;gap:10px;padding:9px 13px;border:1px solid var(--line);
  border-radius:999px;background:rgba(0,0,0,.45);backdrop-filter:blur(10px);
  color:rgba(255,255,255,.78);font-size:12px;letter-spacing:.05em;z-index:8
}
.loader.show{display:flex}
.spinner{
  width:13px;height:13px;border:2px solid rgba(255,255,255,.24);
  border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}

.nav-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:10;
  width:54px;height:90px;border:0;background:rgba(0,0,0,.16);
  font-size:54px;cursor:pointer;opacity:.45;
  transition:opacity .18s ease,background .18s ease
}
.nav-btn:hover{opacity:1;background:rgba(0,0,0,.42)}
.nav-left{left:0;border-radius:0 18px 18px 0}
.nav-right{right:0;border-radius:18px 0 0 18px}

.bottom-ui{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  display:flex;align-items:center;gap:12px;padding:8px 12px;border:1px solid var(--line);
  border-radius:999px;background:var(--glass);backdrop-filter:blur(12px);z-index:12
}
.counter{font-size:11px;letter-spacing:.14em;white-space:nowrap}
.progress{width:92px;height:2px;background:rgba(255,255,255,.18);overflow:hidden}
.progress span{display:block;height:100%;width:0;background:#fff;transition:width .2s ease}

.drawer{
  position:absolute;left:0;top:0;bottom:0;width:min(390px,88vw);z-index:30;
  background:var(--drawer);backdrop-filter:blur(20px);
  transform:translateX(-102%);transition:transform .24s ease;
  border-right:1px solid var(--line);box-shadow:0 30px 100px rgba(0,0,0,.5)
}
.drawer.open{transform:translateX(0)}
.drawer-head{
  height:62px;display:flex;align-items:center;justify-content:space-between;
  padding:0 14px 0 18px;border-bottom:1px solid var(--line)
}
.thumb-list{
  height:calc(100% - 62px);overflow:auto;padding:14px;
  display:grid;gap:12px;overscroll-behavior:contain
}
.thumb{
  padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  background:#111;cursor:pointer;text-align:left
}
.thumb.active{outline:2px solid #fff;outline-offset:1px}
.thumb img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#181818}
.thumb span{display:block;padding:8px 10px;font-size:10px;letter-spacing:.1em;color:var(--muted)}

@media (max-width:760px){
  .brand{display:none}
  .topbar{grid-template-columns:1fr 1fr}
  .top-actions{justify-self:end}
  .nav-btn{width:42px;height:72px;font-size:42px;opacity:.28}
  .bottom-ui{bottom:10px}
}
@media (hover:none){
  .nav-btn{opacity:.22}
}