:root {
  --red:#ed0015;
  --white:#fff;
  --black:#000;
  --muted:rgba(255,255,255,.54);
  --viewer-bar:54px;
  --viewer-gutter:clamp(8px,1.4vw,22px);
  --display:"Bebas Neue","Impact",sans-serif;
  --en:"Oswald",sans-serif;
  --jp:"Noto Sans JP",sans-serif;
}
* { box-sizing:border-box; }
html,body { width:100%; height:100%; }
body { margin:0; overflow:hidden; color:var(--white); background:#050505; font-family:var(--jp); }
button,a { color:inherit; font:inherit; }
button { cursor:pointer; }
[hidden] { display:none !important; }
.pdf-deck { min-height:100%; background:radial-gradient(circle at 50% 44%,#1a1a1a,#050505 68%); }
.pdf-deck::after { content:""; position:fixed; z-index:10; inset:0; pointer-events:none; opacity:.025; background:repeating-linear-gradient(-62deg,transparent 0 4px,#fff 4px 5px); }
.pdf-header { position:fixed; z-index:20; top:0; right:0; left:0; display:flex; height:var(--viewer-bar); align-items:center; padding:0 clamp(14px,2.6vw,40px); background:rgba(0,0,0,.94); border-bottom:2px solid var(--red); }
.pdf-brand { display:flex; align-items:center; gap:9px; margin-right:auto; text-decoration:none; font:18px var(--display); letter-spacing:.1em; }
.pdf-brand>span:last-child>span { margin-left:3px; color:var(--red); font:900 10px var(--jp); }
.pdf-mark { display:flex; width:28px; height:28px; align-items:center; justify-content:center; gap:3px; background:var(--red); clip-path:polygon(12% 0,88% 0,100% 12%,100% 88%,88% 100%,12% 100%,0 88%,0 12%); }
.pdf-mark i { width:2px; background:#fff; }
.pdf-mark i:nth-child(1){height:7px}.pdf-mark i:nth-child(2){height:13px}.pdf-mark i:nth-child(3){height:9px}
.pdf-header>p { margin:0 22px; color:var(--muted); font:700 10px var(--en); letter-spacing:.16em; }
.pdf-actions { display:flex; gap:7px; }
.pdf-actions button,.pdf-actions a { padding:7px 10px; background:transparent; border:1px solid rgba(255,255,255,.2); text-decoration:none; font-size:10px; font-weight:700; }
.pdf-actions button:hover,.pdf-actions a:hover { border-color:var(--red); background:rgba(237,0,21,.15); }
.pdf-slides { position:fixed; inset:var(--viewer-bar) 0; display:grid; place-items:center; padding:var(--viewer-gutter); cursor:pointer; }
.pdf-slide { display:grid; width:100%; height:100%; min-width:0; min-height:0; place-items:center; animation:pdf-slide-in .25s ease both; }
.pdf-slide img { display:block; width:auto; height:auto; max-width:calc(100vw - var(--viewer-gutter) - var(--viewer-gutter)); max-height:calc(100vh - var(--viewer-bar) - var(--viewer-bar) - var(--viewer-gutter) - var(--viewer-gutter)); max-height:calc(100dvh - var(--viewer-bar) - var(--viewer-bar) - var(--viewer-gutter) - var(--viewer-gutter)); aspect-ratio:841.89/595.276; object-fit:contain; background:#000; box-shadow:0 18px 55px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.12); user-select:none; -webkit-user-drag:none; }
.pdf-controls { position:fixed; z-index:21; right:0; bottom:0; left:0; display:flex; height:var(--viewer-bar); align-items:center; justify-content:center; gap:15px; background:#000; border-top:1px solid rgba(255,255,255,.14); }
.pdf-controls button { width:38px; height:31px; background:transparent; border:1px solid rgba(255,255,255,.2); }
.pdf-controls button:hover { background:var(--red); border-color:var(--red); }
.pdf-controls button:disabled { opacity:.24; cursor:default; }
.pdf-progress { width:min(34vw,360px); height:3px; background:rgba(255,255,255,.14); }
.pdf-progress i { display:block; width:11.11%; height:100%; background:var(--red); transition:width .2s ease; }
.pdf-controls>span { font:12px var(--en); letter-spacing:.12em; }
.pdf-controls b { color:var(--red); font-size:16px; }
.pdf-hint { position:fixed; z-index:22; right:20px; bottom:18px; margin:0; color:rgba(255,255,255,.3); font:9px var(--en); letter-spacing:.1em; }
.pdf-overview { position:fixed; z-index:50; inset:0; overflow:auto; padding:24px; background:rgba(0,0,0,.98); }
.pdf-overview header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.pdf-overview header div { display:grid; gap:3px; }
.pdf-overview header strong { font:20px var(--en); letter-spacing:.12em; }
.pdf-overview header span { color:var(--muted); font-size:11px; }
.pdf-overview header button { padding:8px 12px; background:transparent; border:1px solid rgba(255,255,255,.25); }
.pdf-overview-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; max-width:1500px; margin:auto; }
.pdf-overview-card { position:relative; padding:0; overflow:hidden; background:#111; border:2px solid rgba(255,255,255,.16); }
.pdf-overview-card:hover { border-color:var(--red); }
.pdf-overview-card img { display:block; width:100%; aspect-ratio:841.89/595.276; object-fit:cover; }
.pdf-overview-card b { position:absolute; top:8px; left:8px; display:grid; width:34px; height:27px; place-items:center; background:rgba(0,0,0,.82); color:var(--red); font:19px var(--display); }
@keyframes pdf-slide-in { from{opacity:0;transform:translateX(18px)} to{opacity:1;transform:none} }
@media (max-width:760px) {
  :root { --viewer-gutter:4px; }
  .pdf-header>p,.pdf-actions [data-overview],.pdf-hint { display:none; }
  .pdf-actions button,.pdf-actions a { padding:6px 8px; }
  .pdf-overview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
}
@media (max-width:430px) {
  .pdf-brand>span:last-child { display:none; }
  .pdf-actions a { display:none; }
  .pdf-overview { padding:14px; }
  .pdf-overview-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .pdf-slide { animation:none; }
  .pdf-progress i { transition:none; }
}