.spine{z-index:2;right:var(--edge-x);pointer-events:none;width:1.4rem;height:40vh;transition:opacity .5s var(--enter);position:absolute;top:30vh}.spine[data-under=yes]{opacity:.12}.spine__crease{background:linear-gradient(90deg,#ffffffd9 0 1px,#0000 1px),linear-gradient(90deg,#0000 0 1px,#03030333 1px 2px,#0303030f 2px);width:3px;position:absolute;top:0;bottom:0;right:.5rem}.spine__read{--read:0;background:var(--ink);width:1px;height:100%;transform:scaleY(var(--read));transform-origin:50% 0;position:absolute;top:0;left:1px}.spine__mark{--at:0;right:0;top:calc(var(--at) * 100%);pointer-events:auto;justify-content:flex-end;align-items:center;width:1.4rem;height:1.4rem;margin-top:-.7rem;display:flex;position:absolute}.spine__mark:after{content:"";background:var(--ink-soft);width:.7rem;height:1px;transition:width .4s var(--enter), background-color .4s var(--enter);margin-right:.18rem}.spine__mark[aria-current=true]:after{background:var(--ink);width:.95rem}.spine__name{font-family:var(--font-sans);font-size:var(--t-number);letter-spacing:.04em;white-space:nowrap;color:var(--ink);opacity:0;transition:opacity .4s var(--enter), transform .4s var(--enter);pointer-events:none;position:absolute;right:1.8rem;transform:translate(6px)}.spine__mark:hover .spine__name,.spine__mark:focus-visible .spine__name,.spine:hover .spine__mark[aria-current=true] .spine__name{opacity:1;transform:none}.spine__mark:focus-visible{outline:1px solid var(--ink);outline-offset:2px}@media (max-width:1024px),(max-aspect-ratio:9/10){.spine{display:none}}@media (prefers-reduced-motion:reduce){.spine__mark:after,.spine__name{transition:none}}