:root{--bg: #131313;--toc-inactive: rgba(255, 255, 255, .3);--toc-active: rgba(255, 255, 255, 1);--page-size: min(70vh, 39vw);--edge-max: calc(var(--page-size) * .02);--progress-bar-height: 7px;--progress-pill-height: 7px;--progress-pill-width: 38px}*{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;height:100%;background:var(--bg);overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Pretendard,Segoe UI,Roboto,Helvetica,Arial,sans-serif}#app{position:relative;width:100vw;height:100vh}#toc{position:absolute;left:3.4vw;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:.75vh;z-index:5;user-select:none;-webkit-user-select:none}.toc-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;margin:0;padding:0;text-align:left;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;font-size:clamp(10px,.74vw,14px);line-height:1.5;color:var(--toc-inactive);cursor:pointer;transition:color .3s ease;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;-webkit-tap-highlight-color:transparent;outline:none}.toc-item.active{color:var(--toc-active)}#stage-wrap{position:absolute;left:50%;top:50%;height:var(--page-size);width:calc(var(--page-size) * 2);transform:translate(-50%,-50%);display:block;transition:width .7s ease;z-index:1}#stage-wrap.clipped{width:var(--page-size)}#stage{position:relative;z-index:2;width:100%;height:var(--page-size);overflow:visible}#stage.clipped{width:100%}#book{position:absolute;left:0;top:0;width:calc(var(--page-size) * 2);height:var(--page-size);transition:transform .7s ease}#stage.clipped.cover-front #book{transform:translate(-50%)}#book .stf__parent{width:100%;height:100%;min-width:0!important;min-height:0!important}#book .stf__wrapper{position:relative;width:100%;height:100%}.book-page{position:relative;width:100%;height:100%;background:#fff;overflow:hidden}.book-page img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-select:none;user-select:none}.book-page--cover{background:#2180f5}.book-page--front-cover:after,.book-page--back-cover:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none}.book-page--front-cover:after{background:linear-gradient(90deg,rgba(4,50,124,.46) 0%,rgba(8,65,153,.34) 1.6%,rgba(14,91,188,.19) 2.9%,rgba(68,165,255,.64) 3.28%,rgba(45,141,239,.72) 3.48%,rgba(2,62,143,.2) 3.66%,transparent 4.25%),linear-gradient(90deg,rgba(0,28,82,.12) 0%,rgba(0,34,92,.08) 26%,transparent 58%,rgba(54,156,255,.08) 100%);box-shadow:inset 0 -1px #001c461f}#stage:not(.clipped) .book-page:not(.book-page--cover).--left:after,#stage:not(.clipped) .book-page:not(.book-page--cover).--right:after{content:"";position:absolute;top:0;bottom:0;width:12%;z-index:2;pointer-events:none}#stage:not(.clipped) .book-page:not(.book-page--cover).--left:after{right:0;background:linear-gradient(90deg,transparent 0%,rgba(12,18,28,.025) 38%,rgba(8,12,18,.09) 76%,rgba(0,0,0,.18) 100%)}#stage:not(.clipped) .book-page:not(.book-page--cover).--right:after{left:0;background:linear-gradient(90deg,rgba(0,0,0,.18) 0%,rgba(8,12,18,.09) 24%,rgba(12,18,28,.025) 62%,transparent 100%)}.book-page--back-cover:after{background:linear-gradient(270deg,rgba(4,50,124,.46) 0%,rgba(8,65,153,.34) 1.6%,rgba(14,91,188,.19) 2.9%,rgba(68,165,255,.64) 3.28%,rgba(45,141,239,.72) 3.48%,rgba(2,62,143,.2) 3.66%,transparent 4.25%),linear-gradient(270deg,rgba(0,28,82,.12) 0%,rgba(0,34,92,.08) 26%,transparent 58%,rgba(54,156,255,.08) 100%);box-shadow:inset 0 -1px #001c461f}.page-edge{position:absolute;z-index:1;top:0;height:100%;width:0;transition:width .4s ease;background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.16) 0px,rgba(0,0,0,.16) 1px,rgba(255,255,255,.55) 1px,rgba(255,255,255,.55) 2px,rgba(0,0,0,.06) 2px,rgba(0,0,0,.06) 3px,transparent 3px,transparent 4px),linear-gradient(180deg,#e9e9e9,#d4d4d4 50%,#e9e9e9);backface-visibility:hidden}#edge-left{right:100%;width:calc(var(--edge-max) * var(--ratio, 0));border-radius:3px 0 0 3px}#edge-right{left:100%;width:calc(var(--edge-max) * var(--ratio, 0));border-radius:0 3px 3px 0}#progress{position:absolute;left:50%;top:90vh;transform:translate(-50%);width:45vw;min-width:260px;max-width:900px;z-index:5}#progress-track{position:relative;width:100%;height:28px;display:flex;align-items:center;cursor:pointer;touch-action:none}#progress-track:before{content:"";position:absolute;left:0;right:0;height:var(--progress-bar-height);border-radius:999px;background:#ffffff26}#progress-fill{position:absolute;left:calc((100% - var(--progress-pill-width)) * var(--seek, 0));width:var(--progress-pill-width);height:var(--progress-pill-height);border-radius:999px;background:#fff;pointer-events:none}#nav-buttons{display:none}#nav-buttons button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:50%;background:#ffffff1a;width:56px;height:56px;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none;transition:filter .15s ease}#nav-buttons button:active{filter:brightness(.8)}#nav-buttons button img{width:20px;height:20px;opacity:.9;pointer-events:none}@media(max-width:760px){:root{--page-size: min(calc(var(--vvh, 1vh) * 66), 88vw, 570px);--edge-max: calc(var(--page-size) * .015)}#app{height:calc(var(--vvh, 1vh) * 100)}#toc{left:0;right:0;top:calc(var(--vvh, 1vh) * 5 + 28px + 6px);transform:none;flex-direction:row;gap:30px;overflow-x:auto;scrollbar-width:none;cursor:grab;padding:0 42%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent);mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent)}#toc::-webkit-scrollbar{display:none}.toc-item{flex:none;font-size:15px}#stage-wrap{top:48%}#stage,#stage.clipped,#stage-wrap,#stage-wrap.clipped,#book{width:var(--page-size)}#stage.clipped.cover-front #book{transform:none}#progress{top:calc(var(--vvh, 1vh) * 5);bottom:auto;width:86vw;min-width:0}#nav-buttons{display:flex;position:absolute;left:50%;bottom:calc(var(--vvh, 1vh) * 11 + env(safe-area-inset-bottom,0px));transform:translate(-50%);gap:28px;z-index:5}}@media(max-height:520px)and (min-width:761px){:root{--page-size: min(64vh, 31vw)}#stage-wrap{top:50%}#progress{top:auto;bottom:2.5vh}}@media(prefers-reduced-motion:reduce){#stage,#stage-wrap,#book,.page-edge,.toc-item{transition-duration:.01ms}}html.resizing #stage,html.resizing #stage-wrap,html.resizing #book,html.resizing .page-edge{transition:none!important}