:root { color-scheme: dark; --red:#e31c24; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:#050505; color:#fff; font-family:Lora,Georgia,serif; }
body { overflow:hidden; }
.topbar { display:contents; }
.topbar button,.controls button { color:#fff; background:#222; border:1px solid #555; border-radius:5px; padding:9px 13px; font-weight:800; cursor:pointer; }
.topbar button { position:fixed; z-index:17; top:50%; width:54px; height:54px; margin-top:-27px; padding:0; border-radius:50%; font-size:34px; line-height:1; background:rgba(20,20,20,.88); }
.topbar #prev { left:14px; }.topbar #next { right:14px; }.topbar #pageLabel { display:none; }
#stage { height:100vh; display:grid; place-items:center; padding:10px 10px 30px; overflow:hidden; }
.page { position:relative; height:100%; max-width:100%; aspect-ratio:17/22; background:#000; box-shadow:0 0 28px #000; overflow:hidden; }
.page img,.page iframe { display:block; width:100%; height:100%; border:0; object-fit:contain; }
.page-full-link { display:block; width:100%; height:100%; cursor:pointer; }
.page-hotspot { position:absolute; z-index:4; left:4%; width:92%; border:2px solid transparent; border-radius:6px; }
.page-hotspot:hover,.page-hotspot:focus-visible { border-color:var(--red); background:rgba(227,28,36,.08); outline:2px solid #fff; }
.html-page { padding:7%; overflow:auto; scrollbar-width:none; background:linear-gradient(145deg,#171717,#050505); border:1px solid #333; }
.html-page::-webkit-scrollbar { display:none; }
.html-page h1 { font-family:'Cambria Math',Cambria,Georgia,serif; font-weight:700; font-size:clamp(26px,3vw,42px); margin:.2em 0; border-bottom:5px solid var(--red); padding-bottom:.25em; }
.html-page h2 { color:var(--red); }.html-page p,.html-page li { font-size:clamp(15px,2vw,25px); line-height:1.45; }
.contents-page { padding:5.5% 7%; }.contents-page section { margin-bottom:3.5%; }.contents-page h2 { margin:.35em 0 .25em; font-size:clamp(19px,3vw,36px); }.contents-links { display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; }.contents-links button { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 13px; color:#fff; background:#171717; border:1px solid #444; border-left:5px solid var(--red); border-radius:4px; font-size:clamp(13px,1.7vw,22px); text-align:left; cursor:pointer; }.contents-links button:hover,.contents-links button:focus-visible { background:#2a090b; border-color:#fff; }.contents-links b { color:var(--red); font-size:1.12em; }.contents-help { margin-top:4%; color:#bbb; text-align:center; font-size:clamp(12px,1.45vw,18px)!important; }
.contents-page .brand-heading { color:#fff; font-family:'Cambria Math',Cambria,Georgia,serif; font-weight:700; letter-spacing:.025em; }.contents-page .brand-heading i,.contents-page .brand-heading b { color:var(--red); }.contents-page .brand-heading i { font-style:normal; }.contents-page .brand-heading b { font-weight:inherit; }
.pending { display:grid; place-content:center; text-align:center; min-height:100%; padding:10%; background:radial-gradient(circle,#321010,#050505 65%); }
.pending b { color:var(--red); font-size:clamp(36px,7vw,78px); }.pending p { font-size:clamp(16px,2.3vw,28px); }
.controls { position:fixed; z-index:16; inset:0; pointer-events:none; }
.controls input { position:absolute; left:50%; bottom:2px; width:min(560px,65vw); height:14px; transform:translateX(-50%); appearance:none; -webkit-appearance:none; background:transparent; pointer-events:auto; }
.controls input::-webkit-slider-runnable-track { height:3px; border-radius:999px; background:rgba(90,90,90,.5); }
.controls input::-webkit-slider-thumb { width:15px; height:15px; margin-top:-6px; border:1px solid #ff5960; border-radius:50%; background:var(--red); -webkit-appearance:none; }
.controls input::-moz-range-track { height:3px; border:0; border-radius:999px; background:rgba(90,90,90,.5); }
.controls input::-moz-range-thumb { width:15px; height:15px; border:1px solid #ff5960; border-radius:50%; background:var(--red); }
#toc { display:none; }
#toc.open { transform:none; } #toc button { display:block; width:100%; text-align:left; padding:10px; margin:4px 0; color:#eee; background:#181818; border:0; border-left:3px solid transparent; cursor:pointer; } #toc button:hover { border-left-color:var(--red); }
@media(max-width:900px){.topbar{position:fixed;z-index:18;inset:0 0 auto;display:grid;grid-template-columns:52px 1fr 52px;align-items:center;height:46px;padding:3px 6px;background:#0b0b0b;border-bottom:1px solid #333}.topbar button{position:static;width:42px;height:38px;margin:0;border:0;border-radius:4px;font-size:30px;background:#171717}.topbar #next{justify-self:end}.topbar #pageLabel{display:block;text-align:center;font-weight:900;font-size:15px;letter-spacing:.02em}#stage{height:calc(100vh - 46px);height:calc(100dvh - 46px);margin-top:46px;padding:4px 0 30px;place-items:start center}.controls{inset:46px 0 0}.controls input{bottom:1px;width:72vw}.page{width:100%;height:auto;max-height:100%}.html-page h1{font-size:clamp(24px,8vw,34px)}}
@media(max-width:900px){.controls input{bottom:max(1px,calc((100vh - 50px - 100vw * 22 / 17) / 4 - 7px))}}

/* 1.0.8 — In This Issue page: centered, fits on one page, every label on one line with its page number. */
.contents-page{container-type:inline-size;display:flex;flex-direction:column;padding:0}
.contents-page>*{margin-left:6cqi!important;margin-right:6cqi!important}
.contents-page>:first-child{margin-top:auto!important}
.contents-page>:last-child{margin-bottom:auto!important}
.contents-page h1{flex:none;text-align:center;font-size:max(19px,6.2cqi);padding-top:3cqi;margin-bottom:1.4cqi!important;padding-bottom:.2em;border-bottom-width:max(3px,.8cqi)}
.contents-page section{flex:none;margin-bottom:1.2cqi}
.contents-page h2{text-align:center;font-size:max(14px,4cqi);line-height:1.15;margin:1cqi 0 .9cqi}
.contents-links{gap:1.1cqi 2cqi}
.contents-links button{justify-content:center;gap:.6em;min-width:0;padding:1cqi 1.2cqi;font-size:max(10.5px,2.75cqi);line-height:1.2;text-align:center;border-left-width:max(3px,.8cqi)}
.contents-links span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contents-links b{flex:none}
.contents-links button:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 1cqi)}
.contents-page .contents-help{flex:none;margin-top:1.4cqi;padding-bottom:3cqi;font-size:max(10px,2.2cqi)!important}
@media(max-width:900px){.contents-page{width:min(100%,calc((100vh - 80px)*17/22));width:min(100%,calc((100dvh - 80px)*17/22))}}
