:root {
  color-scheme:dark;
  --frame-width:min(100vw,calc(100vh * 16 / 9));
  --frame-height:min(100vh,calc(100vw * 9 / 16));
  --focus-color:#a970ff;
}
* { box-sizing:border-box; }
html { background:#050505; -webkit-font-smoothing:antialiased; }
body { margin:0; background:#fff; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; }
button { font:inherit; }
.back-link {
  position:fixed;
  top:20px;
  right:calc((100vw - var(--frame-width)) / 2 + 32px);
  z-index:30;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 16px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  color:#fff;
  background:rgba(12,12,14,.74);
  box-shadow:0 8px 28px rgba(0,0,0,.22);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  font-size:13px;
  font-weight:650;
  text-decoration:none;
  transition:background .2s,transform .2s,opacity .2s;
}
.back-link:hover { background:#111; transform:translateY(-1px); }
.back-link:focus-visible,.nav-hit:focus-visible { outline:2px solid var(--focus-color); outline-offset:3px; }
.case-pages { width:100%; max-width:1920px; margin:0 auto; overflow:hidden; background:#fff; }
.case-page { display:block; width:100%; height:auto; margin:0; border:0; }
.nav-hit,.page-number,.navigation-hint { display:none; }
html.is-presentation,html.is-presentation body {
  width:100%;
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;
  background:#050505;
  user-select:none;
}
html.is-presentation .case-pages {
  position:fixed;
  inset:0;
  width:100%;
  max-width:none;
  height:100%;
  margin:0;
  background:#050505;
  touch-action:none;
}
html.is-presentation .case-page {
  position:absolute;
  top:50%;
  left:50%;
  width:var(--frame-width);
  height:var(--frame-height);
  object-fit:contain;
  opacity:0;
  pointer-events:none;
  transform:translate3d(-50%,-50%,0) scale(.994);
  transition:opacity 260ms ease,transform 360ms cubic-bezier(.22,.8,.24,1);
  will-change:opacity,transform;
}
html.is-presentation .case-page.is-active {
  z-index:1;
  opacity:1;
  pointer-events:auto;
  transform:translate3d(-50%,-50%,0) scale(1);
}
.nav-hit {
  position:fixed;
  inset-block:0;
  z-index:12;
  width:18vw;
  min-width:72px;
  max-width:280px;
  padding:0;
  border:0;
  color:#fff;
  background:transparent;
  cursor:pointer;
}
html.is-presentation .nav-hit { display:grid; place-items:center; }
.nav-hit--previous { left:0; cursor:w-resize; }
.nav-hit--next { right:0; cursor:e-resize; }
.nav-hit__icon {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:50%;
  background:rgba(5,5,5,.5);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  font-size:20px;
  line-height:1;
  opacity:0;
  transform:scale(.92);
  transition:opacity .2s,transform .2s,background .2s;
}
.nav-hit:hover .nav-hit__icon,.nav-hit:focus-visible .nav-hit__icon { opacity:1; transform:scale(1); background:rgba(5,5,5,.78); }
.nav-hit:disabled { pointer-events:none; cursor:default; }
.nav-hit:disabled .nav-hit__icon { opacity:0; }
.page-number {
  position:fixed;
  right:calc((100vw - var(--frame-width)) / 2 + 24px);
  bottom:calc((100vh - var(--frame-height)) / 2 + 22px);
  z-index:20;
  color:rgba(255,255,255,.72);
  font:500 clamp(12px,.9vw,16px)/1.2 Georgia,serif;
  letter-spacing:.08em;
  text-shadow:0 1px 8px rgba(0,0,0,.5);
  pointer-events:none;
}
html.is-presentation .page-number { display:block; }
.navigation-hint {
  position:fixed;
  left:50%;
  bottom:calc((100vh - var(--frame-height)) / 2 + 22px);
  z-index:20;
  padding:7px 11px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  color:rgba(255,255,255,.62);
  background:rgba(5,5,5,.48);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  font-size:11px;
  letter-spacing:.08em;
  white-space:nowrap;
  pointer-events:none;
  opacity:1;
  transform:translateX(-50%);
  transition:opacity .35s;
}
html.is-presentation .navigation-hint { display:block; }
body.has-navigated .navigation-hint { opacity:0; }
.navigation-hint__touch { display:none; }
@media (pointer:coarse) {
  .nav-hit { width:15vw; min-width:52px; }
  .nav-hit__icon { width:38px; height:38px; opacity:.42; }
  .navigation-hint__desktop { display:none; }
  .navigation-hint__touch { display:inline; }
}
@media (max-width:640px) {
  .back-link { top:12px; right:12px; padding:9px 13px; font-size:12px; }
  .page-number { right:14px; bottom:14px; }
  .navigation-hint { bottom:14px; }
}
@media (prefers-reduced-motion:reduce) {
  .back-link,.nav-hit__icon,.navigation-hint,html.is-presentation .case-page { transition-duration:1ms; }
}