@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=DM+Sans:wght@400;500;600&display=swap');
:root{color-scheme:light;--ink:#263c35;--gold:#a0834c;--paper:#f4f0e7;--serif:'Cormorant Garamond',Georgia,serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;background-image:radial-gradient(ellipse at 50% 40%,#fffcf2 0%,#f1ecdf 80%)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,.book:focus-visible{outline:3px solid #9d793e;outline-offset:5px}button:disabled{opacity:.25;cursor:default}.app{max-width:1600px;margin:auto;padding:24px 5vw 18px}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #b6aa8b55;padding-bottom:21px;gap:16px}.monogram{text-decoration:none;color:var(--ink);font:36px var(--serif);letter-spacing:-4px;width:100px}.monogram span{font-style:italic;color:var(--gold);font-size:24px;position:relative;top:5px}.heading{text-align:center}.heading p{font-size:9px;letter-spacing:3px;margin:0 0 5px;color:#847456}.heading h1{font:500 clamp(28px,3.5vw,44px)/1 var(--serif);margin:0}.heading i{font-weight:400;color:var(--gold)}.quiet{border:0;background:transparent;color:var(--ink);font-size:12px;display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:8px 10px}.quiet:hover{color:#aa793b}.quiet[aria-pressed=true]{color:#927034}#sound>span:first-child{font-size:22px}#sound{width:100px;justify-content:flex-end}#sound .sound-label{font-size:12px}.intro{display:flex;justify-content:center;align-items:center;gap:16px;margin:22px 0 20px}.intro p{font-size:9px;letter-spacing:2.6px;color:#8d7956;margin:0}.line{height:1px;width:45px;background:#b9a57c77}.reading{display:flex;align-items:center;justify-content:center;gap:22px}.book-wrap{width:min(900px,calc((100svh - 330px)*1.333));max-width:calc(100% - 106px);perspective:2200px}.book{position:relative;aspect-ratio:4/3;background:#eee5d3;border:8px solid #334a41;border-left-width:12px;border-radius:3px 9px 9px 3px;box-shadow:0 2px 0 #18332c,5px 5px 0 #e3d8be,6px 6px 0 #8f8c78,9px 10px 0 #ebe3cf,10px 11px 0 #b5ae96,0 25px 50px -16px #21352c70;touch-action:pan-y;isolation:isolate}.book>img{display:block;width:100%;height:100%;object-fit:contain;background:#f1e7d7}.paper-edge{pointer-events:none;position:absolute;inset:0;box-shadow:inset 9px 0 13px -10px #0009;z-index:2}.turn-sheet{position:absolute;inset:0;background-size:contain;background-repeat:no-repeat;background-position:center;background-color:#e9dfca;transform-origin:left center;pointer-events:none;opacity:0;backface-visibility:hidden;z-index:3}.turn-sheet.forward{animation:turn .65s cubic-bezier(.3,.05,.25,1) forwards}.turn-sheet.backward{animation:turn .65s cubic-bezier(.3,.05,.25,1) reverse forwards}@keyframes turn{0%{opacity:1;transform:rotateY(0);filter:brightness(1)}85%{opacity:1;filter:brightness(.7)}100%{opacity:0;transform:rotateY(-100deg);filter:brightness(.65)}}.arrow{width:42px;height:42px;flex:0 0 42px;border:1px solid #c0b59e;background:transparent;border-radius:50%;font:32px/1 Georgia;color:#71674f;transition:.2s}.arrow:hover:enabled{background:#243e34;color:#f8f0dc;border-color:#243e34}.start{position:absolute;inset:auto 0 0;z-index:4;background:linear-gradient(transparent,#102a20e8);padding:55px 16px 20px;text-align:center;color:#f9f0db}.start button{border:1px solid #c0b38d;background:#f7f1e1;color:#2b4638;padding:13px 23px;font-size:13px;border-radius:2px;letter-spacing:.5px}.start button span{margin-left:18px}.start p{font:italic 20px var(--serif);margin:10px 0 0}.start[hidden]{display:none}.reader-controls{display:flex;align-items:center;justify-content:space-between;max-width:900px;margin:19px auto 0;gap:14px}.page-status{font-size:10px;letter-spacing:1.7px;text-transform:uppercase;text-align:center;min-width:140px}.progress{height:2px;background:#d9cfbc;margin-top:10px;width:140px}.progress span{display:block;height:100%;background:#997b45;transition:width .4s}.gesture{font-size:10px;text-align:center;color:#8b8578;margin:8px 0 0}.rotate-tip{display:none;font-size:12px;text-align:center;color:#847148}footer{text-align:center;border-top:1px solid #b6aa8b55;padding-top:16px;margin-top:20px}footer>span{font:21px var(--serif)}footer i{color:var(--gold)}footer p{font:italic 17px var(--serif);margin:5px 0 10px;color:#7c796b}footer .footer-detail{font:8px 'DM Sans',sans-serif;letter-spacing:2px;color:#8e8168}#index{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;max-width:1000px;margin:20px auto}#index[hidden]{display:none}.thumb{border:1px solid #c3b494;background:#fffcf3;padding:5px;color:#665a41;font-size:10px}.thumb img{width:100%;aspect-ratio:4/3;object-fit:contain;display:block;margin-bottom:6px}.thumb[aria-current=true]{border:2px solid #294d3b}#message{font-size:12px;text-align:center;color:#7f6036;margin:8px 0;min-height:0}.app:fullscreen{max-width:none;width:100%;height:100%;overflow:auto;background:var(--paper)}.app:fullscreen footer,.app:fullscreen .intro,.app:fullscreen .gesture{display:none}.app:fullscreen header{padding-bottom:10px}.app:fullscreen .reading{margin-top:15px}.app:fullscreen .book-wrap{width:min(1200px,calc((100svh - 170px)*1.333))}
@media(max-width:700px){.app{padding:18px 16px}.heading p{font-size:7px;letter-spacing:1.7px}.heading h1{font-size:29px}.monogram{width:45px;font-size:29px}#sound{width:45px}.sound-label{display:none}.intro{margin:24px 0 20px}.intro p{font-size:8px;letter-spacing:1.8px}.line{width:20px}.reading{gap:8px}.arrow{width:28px;height:34px;flex-basis:28px;font-size:25px;border:none}.book-wrap{max-width:calc(100% - 65px);width:100%}.book{border-width:5px;border-left-width:7px}.start{padding:35px 10px 12px}.start button{padding:10px 12px;font-size:11px}.start p{font-size:15px}.reader-controls{gap:0;margin-top:20px}.reader-controls .quiet{font-size:11px;padding:5px}.page-status{min-width:85px;font-size:9px;letter-spacing:1px}.progress{width:85px}.reader-controls #fullscreen span{display:none}.gesture{line-height:1.7;font-size:9px;margin-top:14px}footer{margin-top:26px}footer>span{font-size:20px}footer p{font-size:16px}}
@media(orientation:portrait) and (max-width:900px){.rotate-tip{display:block}.book-wrap{max-width:calc(100% - 55px)}}
@media(orientation:landscape) and (max-height:600px){.app{padding:8px 24px}header{padding-bottom:7px}.heading h1{font-size:25px}.heading p{display:none}.intro,footer,.gesture{display:none}.reading{margin-top:10px}.book-wrap{width:calc((100svh - 125px)*1.333);max-width:calc(100% - 80px)}.reader-controls{margin-top:10px;max-width:650px}.app:fullscreen .book-wrap{width:calc((100svh - 125px)*1.333)}.start{padding-bottom:10px}.start p{display:none}.quiet{min-height:32px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition:none!important}}