:root{
    --bg:#101010;
    --panel:rgba(22,22,22,.87);
    --text:#fff;
    --muted:rgba(255,255,255,.66);
    --line:rgba(255,255,255,.12);
}

*{
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
}

html,body{
    width:100%;
    height:100%;
    margin:0;
    overflow:hidden;
    background:var(--bg);
    color:var(--text);
    font-family:Arial,Helvetica,sans-serif;
}

body{
    min-height:100dvh;
    user-select:none;
    -webkit-user-select:none;
    overscroll-behavior:none;
}

#viewer{
    position:fixed;
    inset:0;
    background:
        radial-gradient(circle at 50% 42%,#282828 0,#171717 46%,#0b0b0b 100%);
}

#stage{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:58px 12px 74px;
    overflow:hidden;
    perspective:1200px;
}

#pdfCanvas{
    display:block;
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
    background:#fff;
    box-shadow:0 18px 52px rgba(0,0,0,.44);
    transition:
        opacity .18s ease,
        transform .24s cubic-bezier(.22,.61,.36,1);
    will-change:opacity,transform;
}

#pdfCanvas.next-out{
    opacity:.13;
    transform:translateX(-30px) rotateY(3deg) scale(.99);
}

#pdfCanvas.prev-out{
    opacity:.13;
    transform:translateX(30px) rotateY(-3deg) scale(.99);
}

.toolbar{
    position:fixed;
    z-index:30;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px;
    border:1px solid var(--line);
    border-radius:999px;
    background:var(--panel);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    box-shadow:0 10px 30px rgba(0,0,0,.25);
    transition:opacity .2s ease,transform .2s ease;
}

#topbar{
    top:max(9px,env(safe-area-inset-top));
    padding:8px 13px;
}

#controls{
    bottom:max(10px,env(safe-area-inset-bottom));
}

#title{
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    white-space:nowrap;
}

#pageInfo{
    min-width:58px;
    text-align:center;
    color:var(--muted);
    font-size:12px;
}

button{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.1);
    color:#fff;
    cursor:pointer;
    transition:
        background .15s ease,
        transform .15s ease,
        opacity .15s ease;
}

button:hover{
    background:rgba(255,255,255,.18);
}

button:active{
    transform:scale(.93);
}

button:disabled{
    opacity:.28;
    cursor:default;
}

button svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

#loader,#error{
    position:fixed;
    inset:0;
    z-index:60;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#111;
}

#loader{
    flex-direction:column;
    gap:13px;
    transition:opacity .25s ease,visibility .25s ease;
}

#loader.hide{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.spinner{
    width:34px;
    height:34px;
    border:3px solid rgba(255,255,255,.15);
    border-top-color:#fff;
    border-radius:50%;
    animation:spin .75s linear infinite;
}

@keyframes spin{
    to{transform:rotate(360deg)}
}

#loadingText{
    color:var(--muted);
    font-size:12px;
}

#error{
    display:none;
    padding:25px;
    text-align:center;
}

#error.show{
    display:flex;
}

#error .box{
    width:min(620px,100%);
    padding:24px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#191919;
    line-height:1.5;
}

#errorDetail{
    display:block;
    margin-top:10px;
    color:var(--muted);
    font-size:12px;
    overflow-wrap:anywhere;
}

@media(max-width:640px){
    #stage{
        padding:53px 6px 68px;
    }

    #pdfCanvas{
        box-shadow:0 10px 27px rgba(0,0,0,.37);
    }

    button{
        width:40px;
        height:40px;
    }

    #title{
        max-width:170px;
        overflow:hidden;
        text-overflow:ellipsis;
    }
}

@media(prefers-reduced-motion:reduce){
    *,*:before,*:after{
        animation-duration:.001ms!important;
        transition-duration:.001ms!important;
    }
}