@font-face {
    font-family: "Neo Sans Std";
    src: url("../fonts/Neo Sans Std Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Neo Sans Std";
    src: url("../fonts/Neo Sans Std Italic.otf") format("opentype");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "Neo Sans Std";
    src: url("../fonts/Neo Sans Std Light.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Neo Sans Std";
    src: url("../fonts/Neo Sans Std Light Italic.otf") format("opentype");
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: "Neo Sans Std";
    src: url("../fonts/Neo Sans Std Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Neo Sans Std";
    src: url("../fonts/Neo Sans Std Bold Italic.otf") format("opentype");
    font-weight: 700;
    font-style: italic;
}

:root{

    --font-ui: "Neo Sans Std";

    --color-ui: #5C6162;

}

html,
body{

    margin:0;
    width:100%;
    height:100%;
    overflow:hidden;
    background:#ffffff;
    font-family:var(--font-ui);

}

*{

    box-sizing:border-box;

}

.app{

    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;

}

.header{

    min-height:60px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:4px;

    padding:12px 48px;

    border-bottom:1px solid #E8E8E8;

    background:#ffffff;

    flex-shrink:0;

}
.logo{

    justify-self:center;

    text-decoration:none;

    font-family:var(--font-ui);

    font-size:30px;

    font-weight:400;

    letter-spacing:0.05em;

    line-height:1;

    color:var(--color-ui);

}

.top-menu{

    justify-self:start;

    display:flex;

    align-items:center;

    gap:4px;

}

.top-menu a{

    text-decoration:none;

    font-family:var(--font-ui);

    font-size:18px;

    color:var(--color-ui);

}

.top-menu span{

    font-family:var(--font-ui);

    font-size:18px;

    color:var(--color-ui);

}

.header-right{

    justify-self:end;

}

.book-stage{

    flex:1;

    overflow:hidden;

}

#flipbook-frame{

    width:100%;

    height:100%;

    border:0;

    display:block;

}

.en{

    font-style:italic;

}

#toc-panel{

    position:fixed;

    top:88px;

    left:0;
right:0;

width:100%;

max-width:none;

    height:calc(100vh - 60px);

    background:transparent;

    z-index:100;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transform:translateX(-20px);

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility 0s linear .25s;

}

#toc-panel.open{

    opacity:1;
    visibility:visible;
    pointer-events:none;

    transform:translateX(0);

    transition:
        opacity .25s ease,
        transform .25s ease;

}

.toc-content{

    pointer-events:auto;

    padding-top:4px;
    padding-right:38px;
    padding-bottom:18px;
    padding-left:38px;

    display:flex;
    flex-direction:column;
    align-items:center;
    background:rgba(255,255,255,.12);

backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(6px);

border-radius: 16px;
width:fit-content;
margin:0 auto;
}

.toc-item{

    display:grid;

    grid-template-columns:2px auto;

    column-gap:8px;

    align-items:center;

    padding:08px 14px;
    .toc-item{

    display:grid;

    grid-template-columns:2px auto;

    column-gap:8px;

    align-items:center;

    padding:8px 14px;

   background:rgba(255,0,0,0.35);

    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);

    border:1px solid rgba(255,255,255,0.25);

    border-radius:12px;

}

}

.toc-item + .toc-item{

    margin-top:4px;

}

.toc-bar{

    width:2px;

    height:32px;

    background:var(--color-ui);

    margin-top:4px;

    justify-self:center;

    align-self:start;

    min-width:2px;

}

.toc-text{

    display:flex;

    flex-direction:column;

    justify-content:center;

    margin:0;

    width:auto;

}

.toc-text .en{

    font-style:italic;

}

.sep{

    color:var(--color-ui);

}

.toc-item.active .toc-bar{

    width:4px;

    min-width:4px;

    background:#E44C53;

}
/* ==========================================
   MOBILE / TABLET OVERLAY
========================================== */

#menu-overlay{
    position:fixed;
    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;
    visibility:hidden;

    transition:
        opacity .28s ease,
        visibility .28s ease;

    z-index:900;
}

#menu-overlay.open{
    opacity:1;
    visibility:visible;
}
/* ==========================================
   MOBILE MENU
========================================== */

@media (max-width:1024px){

    #toc-panel{

    position:fixed;

    top:90px;
    left:16px;
    right:16px;

    width:auto;

    height:auto;

    max-height:calc(100vh - 180px);

    overflow-y:auto;

    z-index:1000;

    opacity:0;

    visibility:hidden;

    border-radius:12px;


    transition:
        opacity .30s ease,
        transform .30s ease;

    transform:translateY(-10px);

}

    #toc-panel.open{

    opacity:1;

    visibility:visible;

}

  .toc-content{

    display:flex;

    flex-direction:column;

    align-items:center;

    width:fit-content;

    margin:0 auto;

    padding:12px 24px;

}

    .toc-item{

        display:grid;

        grid-template-columns:2px auto;

        column-gap:8px;

        align-items:start;

        padding:0;

        margin:0;

        min-height:0;

        height:auto;

    }

    .toc-bar{

        width:2px;

        min-width:2px;

        height:28px;

        background:var(--color-ui);

        align-self:start;

        margin-top:4px;

        transition:
            background .25s ease,
            width .25s ease,
            min-width .25s ease;

    }

    .toc-text{

        display:flex;

        flex-direction:column;

        justify-content:flex-start;

        width:100%;

        margin-left:4px;

    }

    .toc-text .pt{

        display:block;

        margin:0;

        font-family:var(--font-ui);

        font-size:14px;

        line-height:1.2;

        color:#000;

    }

    .toc-text .en{

        display:block;

        margin:4px 0 0 0;

        font-family:var(--font-ui);

        font-size:14px;

        font-style:italic;

        font-weight:400;

        line-height:1.2;

        color:#161616;

        opacity:1;

    }

    .header{

        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        min-height:72px;

        padding:06px 20px;

        gap:6px;

        box-sizing:border-box;

    }

    .logo{

        order:1;

        font-size:24px;

        text-align:center;

    }

    .top-menu{

        order:2;

        justify-content:center;

        width:100%;

    }

    .header-right{

        display:none;

    }

}