ul.picker,.picker ul,.picker li{margin:0;padding:0;list-style:none}.picker .book{color:var(--white);cursor:pointer;--book-corner:8px;--book-line-width:1px;--book-diagonal-offset:calc(var(--book-line-width)*.707);clip-path:polygon(var(--book-corner)0%,calc(100% - var(--book-corner))0%,100% var(--book-corner),100% calc(100% - var(--book-corner)),calc(100% - var(--book-corner))100%,var(--book-corner)100%,0% calc(100% - var(--book-corner)),0% var(--book-corner));background:#d7f6f90d;margin-bottom:8px;padding:16px;font-weight:700;transition:all .2s;position:relative}.picker .book:before{content:"";z-index:-1;background-color:var(--tan);clip-path:polygon(  var(--book-corner)0%,calc(100% - var(--book-corner))0%,100% var(--book-corner),100% calc(100% - var(--book-corner)),calc(100% - var(--book-corner))100%,var(--book-corner)100%,0% calc(100% - var(--book-corner)),0% var(--book-corner),var(--book-corner)0%,calc(var(--book-corner) + var(--book-diagonal-offset))var(--book-line-width),var(--book-line-width)calc(var(--book-corner) + var(--book-diagonal-offset)),var(--book-line-width)calc(100% - var(--book-corner) - var(--book-diagonal-offset)),calc(var(--book-corner) + var(--book-diagonal-offset))calc(100% - var(--book-line-width)),calc(100% - var(--book-corner) - var(--book-diagonal-offset))calc(100% - var(--book-line-width)),calc(100% - var(--book-line-width))calc(100% - var(--book-corner) - var(--book-diagonal-offset)),calc(100% - var(--book-line-width))calc(var(--book-corner) + var(--book-diagonal-offset)),calc(100% - var(--book-corner) - var(--book-diagonal-offset))var(--book-line-width),calc(var(--book-corner) + var(--book-diagonal-offset))var(--book-line-width));position:absolute;inset:0}.picker .book:hover{background:#d7f6f91a}.picker .book:hover:before{background-color:var(--blue-3)}.picker .book.active{background:#5dbee833;box-shadow:0 0 8px #5dbee84d}.picker .book.active:before{background-color:var(--blue-3)}.picker .book.active ul{border-top:1px solid #e1d8b14d;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px;margin-top:16px;padding-top:16px;display:grid}.picker .chapter{margin:0;line-height:1;display:block}.picker .chapter a,.picker .chapter a:visited{color:var(--tan);text-align:center;--chapter-corner:4px;--chapter-line-width:2px;--chapter-diagonal-offset:calc(var(--chapter-line-width)*.707);clip-path:polygon(var(--chapter-corner)0%,calc(100% - var(--chapter-corner))0%,100% var(--chapter-corner),100% calc(100% - var(--chapter-corner)),calc(100% - var(--chapter-corner))100%,var(--chapter-corner)100%,0% calc(100% - var(--chapter-corner)),0% var(--chapter-corner));background-color:#0000;padding:8px 6px;font-size:.9rem;font-weight:700;text-decoration:none;transition:all .2s;display:block;position:relative}.picker .chapter a:before{content:"";z-index:-1;background-color:var(--tan);clip-path:polygon(  var(--chapter-corner)0%,calc(100% - var(--chapter-corner))0%,100% var(--chapter-corner),100% calc(100% - var(--chapter-corner)),calc(100% - var(--chapter-corner))100%,var(--chapter-corner)100%,0% calc(100% - var(--chapter-corner)),0% var(--chapter-corner),var(--chapter-corner)0%,calc(var(--chapter-corner) + var(--chapter-diagonal-offset))var(--chapter-line-width),var(--chapter-line-width)calc(var(--chapter-corner) + var(--chapter-diagonal-offset)),var(--chapter-line-width)calc(100% - var(--chapter-corner) - var(--chapter-diagonal-offset)),calc(var(--chapter-corner) + var(--chapter-diagonal-offset))calc(100% - var(--chapter-line-width)),calc(100% - var(--chapter-corner) - var(--chapter-diagonal-offset))calc(100% - var(--chapter-line-width)),calc(100% - var(--chapter-line-width))calc(100% - var(--chapter-corner) - var(--chapter-diagonal-offset)),calc(100% - var(--chapter-line-width))calc(var(--chapter-corner) + var(--chapter-diagonal-offset)),calc(100% - var(--chapter-corner) - var(--chapter-diagonal-offset))var(--chapter-line-width),calc(var(--chapter-corner) + var(--chapter-diagonal-offset))var(--chapter-line-width));position:absolute;inset:0}.picker .chapter a:hover{color:var(--white);transform:scale(1.05)}.picker .chapter a:hover:before{background-color:var(--blue-3)}.picker .chapter a:active{transform:scale(.95)}@media only screen and (max-width:400px){.picker .book{padding:12px}.picker .book.active ul{grid-template-columns:repeat(auto-fill,minmax(35px,1fr));gap:4px}.picker .chapter a{padding:6px 4px;font-size:.8rem}}