*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
    overflow:hidden;
    background:#ececec;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
button,input{font:inherit}
.reader{
    position:relative;
    width:100%;
    height:100dvh;
    overflow:hidden;
    background:#e8e8e8;
    color:#111;
}
.viewer{
    position:absolute;
    inset:0;
    overflow:auto;
    overscroll-behavior:contain;
    display:block;
    padding:8px 12px 84px;
    text-align:center;
    background:
      radial-gradient(circle at 50% -8%,rgba(255,255,255,.98),transparent 36%),
      #e7e7e7;
}
.page{
    display:block;
    width:auto;
    height:auto;
    max-width:none;
    background:#fff;
    box-shadow:0 8px 28px rgba(0,0,0,.16);
    user-select:none;
    -webkit-user-drag:none;
    margin:0 auto;
    cursor:zoom-in;
    touch-action:pan-x pan-y;
}
.page.is-zoomed{cursor:grab}
.page.dragging{cursor:grabbing}
.loader{
    position:absolute;
    inset:0;
    z-index:10;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:9px;
    background:rgba(234,234,234,.78);
    color:#333;
}
.loader[hidden]{display:none}
.spinner{
    width:30px;height:30px;
    border:4px solid #ccc;
    border-top-color:#222;
    border-radius:50%;
    animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Minimal floating "filet" */
.controls{
    position:absolute;
    left:50%;
    bottom:12px;
    transform:translateX(-50%);
    z-index:30;
    display:flex;
    align-items:center;
    gap:2px;
    padding:4px 6px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:14px;
    background:rgba(18,18,18,.70);
    color:#fff;
    box-shadow:0 6px 20px rgba(0,0,0,.18);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    opacity:.62;
    transition:opacity .15s ease;
}
.controls:hover,.controls:focus-within{opacity:1}
.ctrl{
    width:36px;height:36px;
    padding:0;
    border:0;
    border-radius:9px;
    background:transparent;
    color:#fff;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
}
.ctrl:hover{background:rgba(255,255,255,.12)}
.ctrl:disabled{opacity:.32;cursor:default}
.prev,.next{font-size:25px}
.pagebox{
    height:36px;
    display:flex;
    align-items:center;
    gap:5px;
    padding:0 6px;
    font-size:12px;
    white-space:nowrap;
}
.pagebox input{
    width:38px;
    padding:4px 2px;
    border:0;
    border-radius:6px;
    outline:0;
    text-align:center;
    background:#fff;
    color:#111;
    font-weight:800;
}
.zoomlabel{min-width:40px;text-align:center;font-size:11px}
.sep{width:1px;height:20px;background:rgba(255,255,255,.18);margin:0 2px}
.progress{
    position:absolute;
    left:9px;right:9px;bottom:0;
    height:2px;
    background:rgba(255,255,255,.11);
}
.progress span{display:block;height:100%;width:0;background:#e31b23}

.edge{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:20;
    width:40px;height:70px;
    border:0;
    border-radius:12px;
    background:rgba(20,20,20,.08);
    color:rgba(20,20,20,.48);
    font-size:40px;
    font-weight:200;
    cursor:pointer;
    opacity:.18;
    transition:.15s;
}
.edge:hover{opacity:1;background:rgba(20,20,20,.58);color:#fff}
.edge:disabled{display:none}
.edge.prev-edge{left:8px}
.edge.next-edge{right:8px}

.drawer{
    position:absolute;
    top:0;bottom:0;left:0;
    z-index:50;
    width:250px;
    overflow:auto;
    color:#fff;
    background:#171717;
    transform:translateX(-105%);
    transition:transform .17s ease;
    box-shadow:14px 0 34px rgba(0,0,0,.27);
}
.reader.drawer-open .drawer{transform:translateX(0)}
.backdrop{
    display:none;
    position:absolute;
    inset:0;
    z-index:45;
    background:rgba(0,0,0,.27);
}
.reader.drawer-open .backdrop{display:block}
.drawer-head{
    height:48px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 12px;
    border-bottom:1px solid #2b2b2b;
}
.drawer-head strong{font-size:15px}
.close{
    width:32px;height:32px;
    border:0;
    border-radius:8px;
    background:#252525;
    color:#fff;
    font-size:22px;
    cursor:pointer;
}
.tabs{
    position:sticky;
    top:0;
    z-index:2;
    display:grid;
    grid-template-columns:1fr 1fr;
    background:#171717;
}
.tabs button{
    padding:12px 4px;
    border:0;
    border-bottom:2px solid transparent;
    background:transparent;
    color:#888;
    text-transform:uppercase;
    font-size:10px;
    font-weight:900;
    cursor:pointer;
}
.tabs button.active{color:#fff;border-bottom-color:#e31b23}
.panel{display:none;padding:8px}
.panel.active{display:block}
.thumb{
    width:100%;
    display:grid;
    grid-template-columns:58px 1fr;
    gap:9px;
    align-items:center;
    padding:7px;
    margin-bottom:5px;
    border:1px solid transparent;
    border-radius:8px;
    background:transparent;
    color:#fff;
    text-align:left;
    cursor:pointer;
}
.thumb:hover,.thumb.active{background:#262626;border-color:#3c3c3c}
.thumb img{width:58px;height:auto;background:#fff}
.thumb strong{display:block;font-size:12px}
.thumb small{display:block;margin-top:2px;color:#888;font-size:10px}
.archive{
    width:100%;
    display:grid;
    grid-template-columns:48px 1fr;
    gap:8px;
    align-items:center;
    margin-bottom:6px;
    padding:7px;
    border:1px solid #2d2d2d;
    border-radius:8px;
    background:#1d1d1d;
    color:#fff;
    text-align:left;
    cursor:pointer;
}
.archive img{width:48px;height:auto;background:#fff}
.archive strong{display:block;font-size:11px}
.archive small{color:#888;font-size:10px}
.pdf-link{
    display:block;
    margin:10px 8px 16px;
    padding:9px 10px;
    border:1px solid #333;
    border-radius:8px;
    color:#ddd;
    text-decoration:none;
    text-align:center;
    font-size:11px;
}

@media(max-width:760px){
    .viewer{padding:3px 2px 68px}
    .controls{bottom:7px;max-width:calc(100vw - 8px);padding:3px 4px}
    .ctrl{width:34px;height:34px}
    .zoomlabel,.sep{display:none}
    .edge{display:none}
    .drawer{width:min(82vw,270px)}
    .fullscreen{display:none}
}

.page{outline:1px solid rgba(0,0,0,.04)}

/* Mouse-first newspaper interaction */
.viewer{scrollbar-gutter:stable both-edges}