:root{background-color:#ccc}.wrapper{display:grid;grid-template-rows:1fr auto;min-height:100vh;max-width:1000px;margin:0 auto;padding-inline:2rem;padding-top:2rem;padding-bottom:1rem}.container{margin-top:2rem}.page-title{font-size:1.5rem;font-weight:700;text-align:center}.link{display:block}.footer{margin-top:4rem;font-size:.8rem;text-align:center}*[hidden]{display:none!important}:where(*[data-transition-wrapper=book-index]) .book-index-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:2rem}:where(*[data-transition-wrapper=book-index]) .book{display:block;background-color:#fff;border-radius:.25rem;overflow:hidden;transition:box-shadow .2s ease-out}:where(*[data-transition-wrapper=book-index]) .book:hover{box-shadow:0 0 .5rem .25rem #0000004d}:where(*[data-transition-wrapper=book-index]) .book-title{font-size:1.5rem;font-weight:500}:where(*[data-transition-wrapper=book-index]) .book-author{font-size:1rem}:where(*[data-transition-wrapper=book-index]) .thumbnail{width:100%;height:auto;aspect-ratio:64/36}:where(*[data-transition-wrapper=book-index]) .book-link{display:grid;grid-template-columns:[outer-start] 1rem [inner-start] 1fr [inner-end] 1rem [outer-start];row-gap:1rem;padding-bottom:1rem}:where(*[data-transition-wrapper=book-index]) .book-link>*{grid-column:inner}:where(*[data-transition-wrapper=book-index]) .thumbnail{grid-column:outer}:where(*[data-transition-wrapper=book-detail]) .book{display:grid;row-gap:1.5rem;grid-template-columns:[outer-start] 1rem [inner-start] 1fr [inner-end] 1rem [outer-start];padding-block:1rem;padding-bottom:1rem;background-color:#fff;border-radius:.25rem;overflow:hidden}:where(*[data-transition-wrapper=book-detail]) .book>*{grid-column:inner}:where(*[data-transition-wrapper=book-detail]) .book-title{font-size:1.5rem;font-weight:500}:where(*[data-transition-wrapper=book-detail]) .book-author{font-size:1rem}:where(*[data-transition-wrapper=book-detail]) .thumbnail{width:100%;height:auto;aspect-ratio:64/36}:where(*[data-transition-wrapper=book-detail]) .back-link{margin-top:2rem;font-size:1rem;font-weight:700;text-decoration:underline}@media (hover: hover){:where(*[data-transition-wrapper=book-detail]) .back-link:hover{text-decoration:none}}:where(*[data-transition-wrapper=book-detail]) .thumbnail{grid-column:outer}*[data-view-transition-name=thumbnail]{view-transition-name:thumbnail}*[data-view-transition-name=title]{view-transition-name:title}*[data-view-transition-name]{contain:paint}