:root{color:#4b2b14;background:#fff8ed;font-family:Georgia,Book Antiqua,serif}*{box-sizing:border-box}body{background:radial-gradient(circle at top,#fff1c9,#fff8ed 38%,#f7e4c2);min-height:100vh;margin:0}button,input,select{font:inherit;color:inherit}button{touch-action:manipulation}.bookshelf{min-height:100vh;padding:clamp(18px,4vw,42px)}.hero{text-align:center;max-width:900px;margin:0 auto 28px}.badge{background:#fff7df;border:1px solid #e9c77c;border-radius:999px;align-items:center;gap:8px;padding:9px 14px;display:inline-flex;box-shadow:0 8px 28px #8b5b1420}.hero h1{color:#70410f;margin:18px 0 8px;font-size:clamp(38px,8vw,76px);line-height:1}.hero p{color:#7b5528;margin:0;font-size:clamp(18px,3vw,25px)}.offline-btn{color:#4b2b14;cursor:pointer;background:#f7c96f;border:0;border-radius:999px;margin-top:18px;padding:12px 20px;font-size:18px;font-weight:700;box-shadow:0 10px 28px #80501025}.offline-btn:disabled{opacity:.5;cursor:not-allowed}.offline-status{max-width:620px;line-height:1.35;color:#70410f!important;margin:10px auto 0!important;font-size:16px!important}.shelf{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;max-width:1080px;margin:0 auto;display:grid}.book-card{text-align:left;cursor:pointer;background:#fffdf7;border:0;border-radius:28px;padding:16px;transition:transform .18s,box-shadow .18s;box-shadow:0 16px 45px #80501025}.book-card:hover,.book-card:focus{outline:3px solid #ffe28e;transform:translateY(-4px);box-shadow:0 22px 60px #80501035}.book-card img{aspect-ratio:4/3;object-fit:cover;border-radius:22px;width:100%;display:block}.book-card h2{color:#70410f;margin:14px 4px 6px;font-size:25px;line-height:1.05}.book-card p{color:#7b5528;margin:0 4px 6px;font-size:17px}.loading{padding:40px;font-size:24px}.reader{height:100dvh;padding:env(safe-area-inset-top) 16px env(safe-area-inset-bottom);flex-direction:column;display:flex;overflow:hidden}.reader-top{justify-content:space-between;align-items:center;gap:12px;width:100%;max-width:1120px;height:64px;margin:0 auto;display:flex}.top-actions{align-items:center;gap:10px;display:flex}.icon-btn{cursor:pointer;background:#fff8e3;border:0;border-radius:16px;align-items:center;gap:8px;padding:10px 14px;display:flex;box-shadow:0 8px 24px #80501020}.icon-btn:focus,.round:focus,.play:focus,.close-btn:focus{outline:3px solid #ffe28e}.progress{color:#7b5528;white-space:nowrap;background:#fff8e3;border-radius:999px;padding:9px 14px;font-size:18px}.page-card{flex:1;grid-template-columns:minmax(280px,1.04fr) minmax(280px,.96fr);align-items:center;gap:clamp(16px,3vw,32px);width:100%;max-width:1120px;min-height:0;margin:0 auto;padding:8px 0 12px;display:grid}.page-art{object-fit:cover;border-radius:28px;width:100%;max-height:100%;box-shadow:0 18px 55px #8050102e}.story-text{background:#fffdf7;border-radius:28px;max-height:100%;padding:clamp(22px,3.2vw,38px);overflow:auto;box-shadow:0 18px 55px #80501020}.story-text p{margin:0 0 .8em;font-size:clamp(24px,3vw,35px);line-height:1.42}.story-text .title{text-align:center;color:#70410f;font-size:clamp(34px,4vw,54px);font-weight:700;line-height:1.06}.story-text .sound{text-align:center;color:#87571f;font-weight:700}.word{border-radius:8px;padding:0 1px;transition:background 80ms,color 80ms}.word.active{color:#271100;background:#ffe37e;box-shadow:0 0 0 4px #ffe37e}.controls{z-index:10;background:linear-gradient(#0000,#fff8ed 22%);flex-shrink:0;justify-content:center;align-items:center;gap:14px;padding:10px 0 14px;display:flex;position:relative}.controls button{cursor:pointer;border:0;box-shadow:0 10px 26px #80501025}.controls button:disabled{opacity:.45;cursor:not-allowed}.round{background:#fff8e3;border-radius:50%;place-items:center;width:56px;height:56px;display:grid}.play{background:#f7c96f;border-radius:999px;justify-content:center;align-items:center;gap:10px;min-width:190px;height:60px;font-size:20px;font-weight:700;display:flex}.audio-note{color:#70410f;z-index:5;background:#fff8e3;border:1px solid #efca7b;border-radius:999px;align-items:center;gap:8px;max-width:min(92vw,760px);padding:10px 14px;display:flex;position:fixed;bottom:86px;left:50%;transform:translate(-50%);box-shadow:0 8px 28px #80501025}.settings-backdrop{z-index:20;background:#371f0a59;place-items:center;padding:18px;display:grid;position:fixed;inset:0}.settings-panel{background:#fffdf7;border-radius:28px;width:min(680px,96vw);max-height:90vh;padding:22px;overflow:auto;box-shadow:0 28px 80px #3a210950}.settings-panel header{justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:12px;display:flex}.settings-panel h2{color:#70410f;margin:0;font-size:32px;line-height:1.05}.settings-panel p{color:#7b5528;margin:6px 0 0}.close-btn{cursor:pointer;background:#fff1ce;border:0;border-radius:999px;place-items:center;width:46px;height:46px;display:grid}.setting-choice{cursor:pointer;background:#fff8e3;border:1px solid #efd08d;border-radius:18px;align-items:flex-start;gap:14px;margin:12px 0;padding:14px;display:flex}.setting-choice input{accent-color:#b97920;width:22px;height:22px;margin-top:2px}.setting-choice strong{color:#70410f;font-size:20px;display:block}.setting-choice small{color:#7b5528;margin-top:4px;font-size:15px;line-height:1.35;display:block}.field{gap:8px;margin-top:16px;display:grid}.field span{color:#70410f;font-weight:700}.field select{background:#fffdf7;border:1px solid #e2bd71;border-radius:14px;width:100%;padding:12px}.field input[type=range]{accent-color:#b97920;width:100%}@media (width<=820px){.reader{padding-left:10px;padding-right:10px}.reader-top{flex-shrink:0;height:auto;min-height:58px;padding-top:6px}.top-actions{gap:6px}.icon-btn{padding:9px 11px}.icon-btn svg+*,.progress{font-size:15px}.page-card{grid-template-columns:1fr;align-items:start;padding-bottom:8px;overflow:auto}.page-art{max-height:38vh}.story-text{max-height:none;margin-bottom:8px;padding:18px}.story-text p{font-size:23px;line-height:1.36}.controls{padding-top:18px;padding-bottom:calc(12px + env(safe-area-inset-bottom));box-shadow:0 -10px 28px #fff8ed}.round{width:52px;height:52px}.play{min-width:148px;height:56px}.audio-note{border-radius:18px;width:max-content;max-width:92%;margin:0 auto 10px;font-size:14px;position:static;transform:none}.settings-panel{padding:18px}.settings-panel h2{font-size:27px}}@media (orientation:landscape) and (height<=760px){.story-text p{font-size:22px}.story-text .title{font-size:34px}}