:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:#3c3b32;background:#f8f0e2;font-synthesis:none;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 88% 3%,#e7eed7 0,transparent 30%),radial-gradient(circle at 3% 74%,#f6ddd0 0,transparent 25%),#f8f0e2}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;font:inherit}
button:disabled{opacity:.4;cursor:not-allowed}
button:focus-visible,a:focus-visible{outline:3px solid #3d7870;outline-offset:4px}
[hidden]{display:none!important}
.app{max-width:1380px;margin:auto;padding:0 max(20px,env(safe-area-inset-right)) 22px max(20px,env(safe-area-inset-left));padding-top:env(safe-area-inset-top)}
.brand{height:95px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #dddbc9;gap:12px}
.brand-mark{text-decoration:none;color:inherit;display:flex;align-items:center;gap:12px}
.brand-icon{width:54px;height:54px;border-radius:18px 18px 20px 20px;background:#c9864f;color:#fff4df;display:grid;place-items:center;font-family:Georgia,serif;font-size:32px;box-shadow:inset 0 -5px #ab6d41}
.brand-copy{display:flex;flex-direction:column}
.brand-copy strong{font-size:28px;line-height:1.1;font-family:Georgia,serif;color:#6e6549}
.brand-copy small{font-size:13px;letter-spacing:.02em;color:#77765e;margin-top:3px}
.book-badge{font-size:12px;letter-spacing:.12em;font-weight:750;background:#dce8d4;color:#46634b;padding:10px 17px;border-radius:99px;white-space:nowrap}
.shelf{padding:50px 0}
.welcome{text-align:center;margin:0 auto 32px}
.welcome-eyebrow,.chapter-label{font-size:12px;font-weight:800;letter-spacing:.16em;color:#6a8461}
.welcome h1{font:700 clamp(32px,5vw,56px)/1.15 Georgia,serif;color:#585b40;margin:14px 0}
.welcome p{font-size:18px;color:#777660;margin:0}
.shelf-card{max-width:950px;margin:auto;display:grid;grid-template-columns:minmax(230px,43%) 1fr;background:#fffdf7;border:1px solid #e2d9c7;border-radius:30px;box-shadow:0 14px 38px #706e4e18;overflow:hidden}
.shelf-cover{width:100%;height:100%;min-height:315px;object-fit:cover;background:#f0e8d5}
.shelf-details{padding:clamp(25px,5vw,58px);display:flex;flex-direction:column;justify-content:center;align-items:start}
.pill{display:inline-block;font-weight:700;font-size:12px;letter-spacing:.09em;color:#507f55;background:#e9f0df;border-radius:100px;padding:9px 13px;margin:0}
.shelf-details h2{font:700 clamp(29px,4vw,46px)/1.16 Georgia,serif;color:#584f3b;margin:18px 0}
.shelf-details>p:not(.pill){font-size:18px;line-height:1.6;color:#646355;margin:0 0 18px}
.shelf-features{color:#807e70;font-size:13px;margin:5px 0 28px}
.resume{color:#71805e;font-size:14px;margin-top:12px}
.footnote{text-align:center;color:#85816d;font-size:13px;margin:30px 0}
.button{min-height:54px;min-width:54px;padding:12px 19px;border-radius:16px;border:2px solid #dcd7c7;background:#fffdf7;color:#555343;font-size:16px;font-weight:750;transition:transform .1s ease,background .15s ease;white-space:nowrap;touch-action:manipulation}
.button:active:not(:disabled){transform:scale(.97)}
.button-primary{background:#66855d;border-color:#66855d;color:#fff}
.button-primary:active{background:#466f4e}
.button-large{padding:17px 25px;min-height:66px;font-size:18px}
.button-quiet{border:0;background:transparent;color:#637159;padding:10px 12px}
.button-help{margin-top:16px;border-color:#eddcc2;background:#fff5e5;color:#84633a;min-height:48px;font-size:15px}
.reader{padding:18px 0}
.reading-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:18px}
.reading-title{font:700 clamp(17px,2.5vw,23px) Georgia,serif;color:#605a47;text-align:center}
.page-count{background:#e7ebda;border-radius:99px;padding:10px 15px;font-size:15px;font-weight:750;white-space:nowrap;color:#536d4a}
.page{background:#fffef8;border:1px solid #e2dccf;border-radius:28px;padding:clamp(14px,2.7vw,34px);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(20px,3.5vw,50px);box-shadow:0 10px 29px #6f684717;min-height:min(52vw,470px)}
.image-container{position:relative;min-width:0;display:flex;align-items:center;justify-content:center;background:#f4ecdf;border-radius:20px;overflow:hidden}
.image-container img{display:block;max-height:480px;max-width:100%;width:100%;height:100%;object-fit:contain;touch-action:pan-y}
.image-caption{position:absolute;bottom:12px;left:12px;background:#fffdf0de;padding:8px 12px;border-radius:12px;font-size:13px;color:#6f674d;font-weight:650}
.page-side{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-width:0;padding:10px 4px}
.chapter-label{margin-bottom:18px}
.sentence{font:700 clamp(30px,3.9vw,54px)/1.44 Georgia,serif;color:#55523d;overflow-wrap:break-word;margin:0 0 20px}
.word{font:inherit;color:inherit;border:0;border-radius:7px;background:transparent;padding:0 2px;margin:0 -1px;min-height:44px;cursor:pointer;white-space:normal;touch-action:manipulation}
.word:active,.word.speaking{background:#f6e1b9;color:#6b5030}
.tap-hint{font-size:15px;color:#88806c;line-height:1.5;margin:0 0 3px}
.translation{font-size:20px;line-height:1.5;background:#eef1e5;color:#5b6248;border-left:4px solid #98a36f;padding:13px 18px;border-radius:6px 14px 14px 6px;margin-top:15px}
.audio-status{font-size:14px;color:#678363;min-height:23px;margin-top:19px}
.controls{margin:17px auto 0;background:#fffdf8;border:1px solid #e7dfd2;border-radius:23px;padding:17px 19px;box-shadow:0 6px 22px #716c5014}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.listen-controls{display:flex;align-items:center;gap:12px}
.button-nav{background:#f0f2e8;border-color:#e2e6d7;min-width:130px}
.speaking-row{border-top:1px solid #eee7d8;padding-top:15px;margin-top:14px;justify-content:flex-start}
.speaking-label{font-weight:750;color:#69654e;margin-right:9px}
.button-record{border-color:#eed3ce;color:#8b4949;background:#fff4f0}
.button-record.live{background:#a84343;border-color:#a84343;color:white}
.recording-status{font-size:14px;color:#817764;min-width:120px}
.credits{font-size:13px;color:#6d695c;padding:18px 9px;max-width:880px}
.credits summary{cursor:pointer;font-weight:700}
.credits p{line-height:1.65}
.credits a{color:#54765a}
.site-footer{text-align:center;font-size:12px;color:#8c887b;padding:15px}
@media(max-width:790px){.brand{height:74px}.reader{padding-top:10px}.page{grid-template-columns:1fr;gap:18px;padding:15px;min-height:0}.image-container{height:min(50vw,365px)}.page-side{padding:6px 10px 10px}.chapter-label{margin-bottom:7px}.sentence{font-size:clamp(28px,5.8vw,43px);margin:0 0 5px}.audio-status{margin-top:8px}.controls{padding:11px}.row{gap:8px}.button-nav{min-width:105px}.reading-title{font-size:17px}}
@media(max-width:560px){.app{padding-left:12px;padding-right:12px}.book-badge{font-size:10px;padding:9px 10px}.brand-copy small{font-size:11px}.shelf{padding:20px 0}.shelf-card{grid-template-columns:1fr}.shelf-cover{max-height:250px;min-height:210px}.shelf-details{padding:25px}.page{border-radius:20px;padding:10px}.image-container{height:55vw;min-height:200px}.image-caption{font-size:11px}.page-side{padding:6px 9px}.sentence{font-size:30px}.controls{border-radius:18px}.listen-controls{gap:6px}.button{min-height:50px;padding:10px 13px;border-radius:13px;font-size:14px}.button-nav{min-width:60px}.nav-label{display:none}.speaking-label{width:100%;margin:0}.recording-status{font-size:12px}.reading-top{gap:4px}.reading-title{font-size:16px}.page-count{padding:9px}}
@media(prefers-reduced-motion:reduce){.button{transition:none}}