.cover-crop{display:block;background-image:url('assets/picturebook-covers.png');background-repeat:no-repeat;background-color:var(--book-color);position:relative;overflow:hidden;box-shadow:1px 0 0 #ffffff66 inset;border-radius:1px 4px 4px 1px}
.cover-crop:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0003 0,transparent 3%,#fff2 4%,transparent 7%,transparent 96%,#0001 100%);pointer-events:none}
.book-shelf{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;padding:28px 12px 35px;align-items:start;background:linear-gradient(transparent 76%,#eee6d9 76%,#faf6ef 79%,transparent 81%)}
.shelf-book{border:0;background:none;padding:0;text-align:left;min-width:0;color:#45362a}.shelf-book .cover-crop{width:100%;box-shadow:4px 5px 0 #e7dfd4,7px 9px 13px #38261722;transition:transform .2s,box-shadow .2s;transform:perspective(800px) rotateY(-7deg)}
.shelf-book:hover .cover-crop{transform:perspective(800px) rotateY(-14deg) translateY(-6px);box-shadow:6px 8px 0 #e7dfd4,9px 14px 18px #38261722}.shelf-book strong{display:block;font-size:13px;margin-top:19px;line-height:1.5}.shelf-book>span:last-child{display:block;font-size:10px;color:#ad7348;margin-top:5px}
.reference-dialog .book-shelf{padding:22px 15px 35px}.cover-reference-panel .book-shelf{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 16px;background:none}.cover-reference-panel .shelf-book{padding:0;background:none}.cover-reference-panel .shelf-book strong{font-size:11px}
.book-dialog{width:min(1050px,96vw);max-width:1050px;max-height:95vh;padding:22px 28px;background:#faf7f1;border:1px solid #dfd5c6;overflow:auto}.book-dialog-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.book-dialog-head small{font-size:11px;color:#a18468}.book-dialog-head h2{font-size:22px;margin-top:5px;color:#4e3927}.reader-stage{min-height:320px;height:min(53vh,480px);display:flex;align-items:center;justify-content:center;perspective:1800px;touch-action:pan-y;outline-offset:6px}.closed-book{height:92%;aspect-ratio:.74;position:relative;padding:0;border:0;background:#e7dfd1;border-radius:2px 6px 6px 2px;box-shadow:4px 3px 0 #f8f3e9,7px 5px 0 #dcd3c5,14px 18px 30px #4e38212b;transform-origin:left center;transform:rotate(-2deg)}.closed-book .cover-crop{height:100%;width:100%}.cover-open-hint{position:absolute;bottom:-26px;left:-30%;width:160%;font-size:11px;color:#a28261}
.reader-spread{display:flex;width:min(100%,800px);height:94%;position:relative;filter:drop-shadow(0 12px 13px #48332224);perspective:1800px;border-radius:3px}.reader-spread:after{content:'';position:absolute;left:50%;width:26px;top:0;bottom:0;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#3924121c,transparent);pointer-events:none}.reader-page{position:relative;background:#fffcf4;width:50%;height:100%;padding:30px 26px;overflow:hidden;box-shadow:0 3px 0 #ddd5c5,0 6px 0 #fbf5e9,0 7px 0 #d9d0c0}.reader-left{transform-origin:right center;background:linear-gradient(90deg,#fffcf4 94%,#eee7d8)}.reader-right{transform-origin:left center;background:linear-gradient(90deg,#eee7d8,#fffcf4 6%)}.reader-kicker{font-size:10px;color:#9b8b74;letter-spacing:.4px}.reader-page h3{font-size:clamp(14px,2vw,24px);font-weight:700;line-height:1.6;color:#584a35;margin:20px 0}.reader-page p{font-size:clamp(11px,1.3vw,15px);line-height:2;color:#766c58;margin-top:40px}.reader-page>small{position:absolute;bottom:18px;left:50%;color:#b0a690;font-size:10px}.doodle-flower{font-size:100px;text-align:center;color:#d0aa66;margin-top:20px}.paper-drawing{height:54%;position:relative;background:#f1e9d3;overflow:hidden;border-radius:45% 45% 4px 4px;margin-top:15px}.sun{position:absolute;right:15%;top:13%;width:40px;height:40px;border-radius:50%;background:#e6b76e}.hill{position:absolute;width:120%;height:75%;border-radius:50%;bottom:-37%;background:#9db68c;left:-20%;transform:rotate(12deg)}.hill-two{left:35%;bottom:-40%;background:#c1cda3;transform:rotate(-15deg)}.little-house{position:absolute;bottom:17%;left:35%;width:45px;height:55px;background:#cf8c62;clip-path:polygon(50% 0,100% 40%,90% 40%,90% 100%,10% 100%,10% 40%,0 40%)}.drawing-2{background:#f2e1d9}.drawing-2 .hill{background:#bb9092}.drawing-2 .hill-two{background:#d4b3a5}.drawing-3{background:#dde9e8}.drawing-3 .hill{background:#8eafb4}.drawing-3 .hill-two{background:#b1c8c2}
.reader-controls{display:flex;align-items:center;justify-content:center;gap:28px;margin-top:30px}.reader-position{min-width:80px;text-align:center;font-size:13px;color:#72583f}.reader-note{font-size:10px!important;text-align:center;color:#a09280!important;margin:18px 0 0!important}
.aside-book{width:110px;margin:20px auto;border:0;background:none;padding:0;transform:rotate(-3deg)}.aside-book .cover-crop{width:100%;box-shadow:4px 4px 0 #e6dfd1,8px 8px 12px #49321b1c}.aside-book small{display:block;margin-top:10px;color:#a07a53;font-size:9px}
.inspection-book{display:flex;width:min(100%,650px);position:relative;perspective:1400px;filter:drop-shadow(0 10px 12px #5c452624)}.inspection-book:after{content:'';position:absolute;inset:0 auto 0 50%;width:20px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#3f2d131a,transparent);pointer-events:none}.inspection-book .sample-sheet{width:50%;height:auto;aspect-ratio:.8;box-shadow:0 3px 0 #e4daca,0 5px 0 #fbf6eb;transform-origin:left center;flex-shrink:0}.inspection-book .facing-page{background:#faf5e8;transform-origin:right center}.inspection-book .sample-art svg{height:auto;max-height:190px}.inspection-book .sample-heading{font-size:clamp(11px,1vw,17px);padding:23px 17px 0;line-height:1.5}.inspection-book .sample-prose{font-size:clamp(8px,.7vw,11px);white-space:normal;padding:0 10px;line-height:1.8}.facing-page .sample-art{margin-top:24px}.facing-page .spread-caption{text-align:center;font-size:10px;color:#9e8b6d;margin:14px 15px;line-height:1.8}.document-stage{perspective:1500px;touch-action:pan-y;min-height:360px}.document-stage .pdf-paper{transform-origin:left center}.reading-hint{font-size:10px;color:#a38c71;display:block;text-align:center;margin:8px 0}.page-enter-forward{animation:leaf-in .3s ease-out}.page-enter-backward{animation:leaf-back .3s ease-out}@keyframes leaf-in{from{transform:rotateY(65deg);opacity:.45}to{transform:rotateY(0);opacity:1}}@keyframes leaf-back{from{transform:rotateY(-65deg);opacity:.45}to{transform:rotateY(0);opacity:1}}
@media(max-width:760px){.book-shelf{grid-template-columns:repeat(3,minmax(0,1fr));background:none;gap:22px 15px}.book-dialog{padding:16px}.reader-page{padding:18px 13px}.reader-stage{min-height:280px;height:42vh}.reader-page h3{font-size:16px;margin:12px 0}.reader-page p{margin-top:25px}.doodle-flower{font-size:70px}.reader-controls{gap:13px}.reader-controls button{padding:9px 13px}.inspection-book .sample-heading{font-size:12px}.inspection-book .sample-prose{font-size:8px}.document-stage{padding:18px 12px;min-height:280px}.book-dialog-head h2{font-size:18px}}
@media(prefers-reduced-motion:reduce){.page-enter-forward,.page-enter-backward{animation:none}.shelf-book .cover-crop{transition:none}}
.book-preview-toolbar{display:flex;align-items:center;justify-content:space-between;padding:11px 18px;background:#fffcf7;border-bottom:1px solid #eae1d4;gap:14px}.mini-book{display:flex;align-items:center;gap:12px;border:0;padding:0;background:none;text-align:left;color:#68503a}.mini-book .cover-crop{width:35px;flex-shrink:0;box-shadow:2px 2px 0 #ded6c8}.mini-book strong{display:block;font-size:12px}.mini-book small{display:block;font-size:10px;color:#a58c72;margin-top:5px}.book-preview-toolbar>span{font-size:9px;color:#aa9883;white-space:nowrap}@media(max-width:480px){.book-preview-toolbar>span{display:none}.preview-controls{padding:10px;gap:8px;flex-wrap:wrap}.preview-controls>span{font-size:9px}.inspection-book .sample-heading{padding:15px 9px 0;font-size:10px}.inspection-book .sample-art{width:78%;margin-top:10px}.facing-page .spread-caption{font-size:8px;margin:8px}.inspection-book .sample-prose{font-size:7px;padding:0 7px}.sample-overlay span{font-size:6px;padding:2px}}
.book-dialog{max-width:calc(100vw - 24px);overflow-x:hidden}.reader-controls{min-width:0}.reader-position{min-width:54px}.reader-controls button{flex-shrink:0}@media(max-width:480px){.reader-controls{gap:12px}.reader-controls button{font-size:11px;padding:9px 12px}.reader-position{min-width:44px;font-size:11px}.reader-stage{min-height:270px}.reader-page h3{font-size:14px}.reader-note{font-size:9px!important}}
/* The inspection surface is the only reader; sample text follows the selected typeface. */
.font-controls{display:flex;align-items:center;gap:18px;padding:12px 18px;background:#fff;border-bottom:1px solid #e9e1d7;flex-wrap:wrap}.font-controls label{display:flex;align-items:center;gap:9px;color:#77634f;font-size:11px}.font-controls select{width:auto;margin:0;padding:7px 10px;background:#fcfaf5;border-color:#e6ded2;font-size:12px}.font-controls>span{font-size:10px;color:#aa9781;margin-left:auto}.inspection-book.text-book{width:min(100%,840px)}.inspection-book .text-leaf{aspect-ratio:.71;position:relative;padding:30px 27px 38px;overflow:hidden;background:#fffdf7;transform-origin:left center}.inspection-book .text-leaf.leaf-left{transform-origin:right center;background:linear-gradient(90deg,#fffdf7 93%,#eee7d9)}.inspection-book .text-leaf.leaf-right{background:linear-gradient(90deg,#eee7d9,#fffdf7 7%)}.page-running{font-family:Pretendard,Arial,sans-serif;font-size:9px;color:#a18d74;border-bottom:1px solid #e8dfcf;padding-bottom:9px;display:flex;justify-content:space-between;gap:10px;line-height:1.5}.page-running span{font-size:8px;white-space:nowrap}.typeset-content{position:absolute;top:70px;left:27px;right:27px;bottom:40px;overflow:auto;scrollbar-width:thin;scrollbar-color:#ded5c5 transparent;color:#4b4337;font-size:var(--reader-size,14px);line-height:1.65;text-align:left}.typeset-content h3{font-family:inherit;font-size:1.5em;font-weight:700;line-height:1.3;letter-spacing:-.02em;margin:0 0 1em;color:#453929}.typeset-content p{font-family:inherit;font-size:1em;line-height:inherit;margin:0 0 1em;text-wrap:pretty}.text-book[data-font=serif] .typeset-content{font-family:Georgia,'Times New Roman',serif}.text-book[data-font=sans] .typeset-content{font-family:Pretendard,Arial,sans-serif}.text-book[data-font=mono] .typeset-content{font-family:Consolas,'Courier New',monospace}.text-review-marker{position:absolute;inset:14px;border:2px solid #e78a3d;pointer-events:none}.text-review-marker span{position:absolute;bottom:0;right:0;background:#c97536;color:white;font-size:9px;font-family:Pretendard,sans-serif;padding:4px 6px}.blank-leaf{display:grid;place-items:center;color:#b2a58f;letter-spacing:3px;font-size:11px}.document-stage:has(.inline-closed-book){min-height:450px;padding:32px 24px 48px}.inline-closed-book{position:relative;width:min(230px,65%);border:0;padding:0;background:none;transform-origin:left center;box-shadow:4px 4px 0 #eee5d6,7px 6px 0 #d6cbb9,12px 16px 24px #60462730;border-radius:3px}.inline-closed-book .cover-crop{width:100%}.inline-closed-book>span:last-child{position:absolute;bottom:-30px;left:-30%;width:160%;color:#9d7b58;font-size:10px;box-shadow:none}.spread-position{font-weight:600;color:#896a4c!important}.text-leaf .sample-safe{opacity:.6}.text-leaf .sheet-number{bottom:14px;color:#9b8c75}
@media(max-width:760px){.font-controls{gap:10px;padding:10px 12px}.font-controls select{max-width:160px;font-size:11px}.font-controls>span{margin-left:0;width:100%}.inspection-book .text-leaf{padding:17px 12px 30px;aspect-ratio:.65}.typeset-content{left:12px;right:12px;top:55px;bottom:30px;font-size:calc(var(--reader-size,14px) * .82);line-height:1.5}.typeset-content h3{font-size:1.3em;margin-bottom:.7em}.page-running{font-size:7px;padding-bottom:5px;display:block}.page-running span{display:block;font-size:6px;margin-top:3px}.text-review-marker{inset:7px}.text-review-marker span{font-size:6px;padding:2px}.document-stage:has(.inline-closed-book){min-height:350px}}
.aside-book{display:block}