:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#233022;background:#f4f0e8;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}.hidden{display:none!important}.shell{min-height:100dvh;max-width:760px;margin:auto;background:#f9f7f1;box-shadow:0 0 80px #1827180d;padding-bottom:80px}.topbar{height:70px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e9e5db}.brand{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:760;letter-spacing:-.03em}.brand-mark{width:32px;height:32px;border-radius:10px;background:#183d32;color:#fff;display:grid;place-items:center;font-family:Georgia,serif;font-size:19px;position:relative}.brand-mark span{font-size:11px;position:absolute;right:5px;bottom:3px;color:#d4b46f}.top-hint{font-size:11px;color:#829083;font-weight:700;text-transform:uppercase;letter-spacing:.11em}.home,.cards{padding:44px 28px}.eyebrow{color:#8b6e37;text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:800;margin-bottom:16px}.home h1,.cards h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(38px,8vw,57px);line-height:1.09;letter-spacing:-.047em;margin:0;color:#223d31;font-weight:500}.home h1 em{font-weight:400;color:#a98a4c}.lead{color:#66746a;font-size:16px;line-height:1.65;max-width:520px;margin:22px 0 26px}.upload-button,.save-button{border:0;display:flex;align-items:center;justify-content:space-between;background:#234b3a;color:white;min-height:54px;padding:0 19px;border-radius:13px;font-weight:700;width:min(100%,340px);box-shadow:0 8px 20px #214c3826}.upload-button span,.save-button span{font-size:24px;font-weight:400}.upload-button:hover,.save-button:hover{background:#163f30}.privacy-note{font-size:12px;color:#929a91;line-height:1.5;margin:13px 0 48px}.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:15px}.section-head h2{font-family:Georgia,serif;font-size:25px;font-weight:500;margin:0}.section-head span{font-size:13px;color:#9c9f98}.library{display:grid;gap:10px}.book-item{width:100%;text-align:left;display:flex;align-items:center;gap:15px;border:1px solid #e7e4d9;background:#fff;border-radius:15px;padding:15px}.book-icon{width:42px;height:50px;border-radius:5px 9px 9px 5px;display:grid;place-items:center;background:#e5ede1;color:#315a42;font-family:Georgia,serif;font-size:24px;box-shadow:inset 4px 0 #cedfcb;flex:none}.book-info{min-width:0;flex:1}.book-name{font-weight:700;font-size:14px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.book-meta{color:#939b91;font-size:12px;margin-top:4px}.book-arrow{font-size:20px;color:#789181}.empty-library{padding:24px;text-align:center;border:1px dashed #d7dccf;border-radius:15px;color:#8b9588;font-size:14px}.demo-button{border:0;background:transparent;color:#336246;font-weight:700;display:flex;justify-content:space-between;align-items:center;width:100%;padding:22px 3px;border-bottom:1px solid #e7e4d9;margin-top:10px}.demo-button span{font-size:21px}.dictionary-credit{font-size:11px;color:#a0a89e;margin-top:23px}.dictionary-credit a{color:#7c977f}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,760px);height:70px;padding-bottom:env(safe-area-inset-bottom);background:#fbfaf6;border-top:1px solid #e7e6dc;display:flex;z-index:5}.bottom-nav button{flex:1;border:0;background:transparent;color:#8c978b;display:flex;align-items:center;justify-content:center;gap:7px;font-size:13px;font-weight:700}.bottom-nav button.active{color:#24583e}.nav-icon{font-size:21px;font-weight:400}.count{background:#e4eee1;color:#367048;border-radius:999px;min-width:18px;padding:2px 5px;font-size:10px}.reader{min-height:calc(100dvh - 140px)}.reader-toolbar{height:75px;padding:0 14px;display:flex;align-items:center;gap:13px;border-bottom:1px solid #e9e5db}.icon-button{width:42px;height:42px;flex:none;display:grid;place-items:center;border:0;background:transparent;color:#2a4535;font-size:25px}.font-button{font-family:Georgia,serif;font-size:19px}.reader-title-wrap{flex:1;min-width:0;text-align:center}.reader-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;font-weight:700}.reader-progress{font-size:11px;color:#a4aa9d;margin-top:4px}.progress-track{height:3px;background:#e6e3d8}.progress-track>div{height:100%;background:#b69758;width:0;transition:width .2s}.reading-surface{padding:28px max(24px,8%);min-height:calc(100dvh - 255px)}.reading-text{font-family:Georgia,"Times New Roman",serif;color:#27312c;font-size:var(--reader-size,20px);line-height:1.75;white-space:pre-wrap;overflow-wrap:anywhere}.reading-text p{margin:0 0 1.05em}.word{border:0;padding:0;margin:0;background:none;color:inherit;font:inherit;border-radius:3px;display:inline}.word:active,.word:hover{background:#f1df9e}.word.saved{text-decoration:underline;text-decoration-color:#bfad7b;text-decoration-thickness:2px;text-underline-offset:4px}.reading-placeholder{color:#8d978d;font-family:Inter,sans-serif;font-size:15px;text-align:center;padding:60px 10px}.page-controls{display:flex;align-items:center;justify-content:space-between;padding:16px 23px 30px;gap:10px}.page-controls button{border:1px solid #d8dfd5;background:#fff;border-radius:10px;color:#315b40;font-weight:700;padding:11px 14px}.page-controls button:disabled{opacity:.35;cursor:default}.page-controls span{font-size:12px;color:#889488}.cards-lead{margin-bottom:28px}.heading-dot{color:#b49856}.cards-empty{border:1px dashed #d5d9ce;border-radius:18px;padding:32px;text-align:center;color:#829182;line-height:1.6}.card-item{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #e7e6da;border-radius:14px;margin-bottom:10px;padding:15px}.card-term{flex:1;font-size:18px;font-weight:700;color:#234636}.card-translation{font-size:14px;color:#667468;text-align:right;max-width:55%}.card-remove{border:0;background:transparent;color:#b6bbb2;font-size:19px;padding:2px 6px}.word-sheet{position:fixed;inset:0;z-index:10;display:flex;align-items:flex-end;justify-content:center}.sheet-backdrop{position:absolute;inset:0;border:0;background:#15231a75}.sheet-panel{position:relative;background:#fffdf9;width:min(100%,760px);border-radius:23px 23px 0 0;padding:10px 25px calc(28px + env(safe-area-inset-bottom));box-shadow:0 -20px 50px #1321151d}.sheet-handle{width:40px;height:4px;border-radius:10px;background:#d7dbd2;margin:0 auto 20px}.sheet-top{display:flex;justify-content:space-between;align-items:center}.sheet-label{color:#9b8a69;text-transform:uppercase;letter-spacing:.13em;font-size:11px;font-weight:800}.sheet-top button{border:0;background:none;font-size:28px;color:#8a988a}.word-heading{display:flex;align-items:center;gap:14px}.word-heading h2{font-family:Georgia,serif;color:#234437;font-size:36px;font-weight:500;letter-spacing:-.03em;margin:12px 0 2px}.word-heading button{border:0;background:#e8efe5;color:#35734d;border-radius:50%;width:37px;height:37px;font-size:13px}.pronunciation{color:#a1a89e;font-size:14px;min-height:20px}.translation{font-size:21px;color:#233427;margin:18px 0 4px;line-height:1.4}.source-word{font-size:12px;color:#93a091;min-height:28px}.save-button{width:100%;margin-top:18px}.save-button.saved-button{background:#e8efe5;color:#2d6745;box-shadow:none}.toast{position:fixed;left:50%;bottom:85px;transform:translateX(-50%);background:#233b2c;color:white;padding:10px 16px;border-radius:12px;box-shadow:0 9px 25px #0002;z-index:12;font-size:13px;white-space:nowrap}@media(max-width:500px){.topbar{padding:0 18px}.top-hint{display:none}.home,.cards{padding:38px 24px}.reading-surface{padding:24px 25px}.reading-text{line-height:1.7}}
.page-jump-label{display:flex;align-items:center;gap:4px;white-space:nowrap;font-size:12px;color:#889488}.page-jump-label input{width:46px;border:1px solid #d8dfd5;border-radius:8px;background:#fff;color:#315b40;text-align:center;padding:7px 3px;font-size:13px}.page-jump-label input::-webkit-inner-spin-button,.page-jump-label input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.page-image{display:block;max-width:100%;height:auto;margin:0 auto;box-shadow:0 6px 25px #15251d1a}
.sentence-section{border-top:1px solid #e7e9df;margin-top:16px;padding-top:15px}.sentence-original{color:#657368;font-size:14px;line-height:1.5}.sentence-button{border:0;background:#edf2e9;color:#286041;border-radius:10px;padding:10px 14px;margin-top:10px;font-size:13px;font-weight:700}.sentence-button:disabled{opacity:.6;cursor:default}.sentence-translation{font-size:16px;line-height:1.5;color:#273b2e;margin-top:12px}
.sentence-button.compare-button{background:#f1eee4;color:#765c28;margin-top:16px}
.sheet-panel{max-height:92dvh;overflow-y:auto}

/* The bookshelf: quiet paper tones, clear hierarchy, and large touch targets. */
:root{background:#ebe8df;color:#23352d}
.shell{background:#fbfaf6;box-shadow:0 12px 90px #263a2d15}
.topbar{height:76px;background:#fbfaf6;border-bottom:1px solid #e8e8df}
.brand{color:#1b4330;font-size:18px}
.brand-mark{width:37px;height:37px;background:#244c39;border-radius:12px}
.top-hint{color:#829788}
.home{padding-top:48px}
.home>.eyebrow{display:inline-flex;align-items:center;gap:8px;background:#e9eee5;padding:8px 12px;border-radius:999px;color:#497059;font-size:10px;letter-spacing:.1em}
.home h1{max-width:650px;font-size:clamp(39px,8.5vw,64px);line-height:1.07;margin-top:20px;color:#183d2c}
.home h1 em{color:#b58a47}
.lead{margin-top:20px;color:#596d60}
.upload-button{width:100%;max-width:370px;min-height:58px;border-radius:16px;box-shadow:0 10px 22px #214c3824}
.privacy-note{margin-bottom:58px;max-width:510px}
.section-head{align-items:end;padding-bottom:14px;border-bottom:1px solid #e4e8de;margin-bottom:18px}
.home>.section-head{margin-top:38px}
.section-head h2{font-size:31px;color:#1d412f}
.section-kicker{margin:0 0 7px;font-size:10px;color:#8d9a83}
.section-head>span{padding-bottom:4px}
.library{gap:12px}
.book-item{padding:13px;border:1px solid #e4e7df;border-radius:18px;box-shadow:0 3px 12px #1c352009;min-height:95px;transition:transform .15s,box-shadow .15s,border-color .15s}
.book-item:hover{transform:translateY(-2px);box-shadow:0 9px 24px #1c352015;border-color:#cbdacb}
.book-icon{width:51px;height:67px;border-radius:5px 10px 10px 5px;background:#dfe9da;color:#315a42;font-size:18px;box-shadow:inset 5px 0 #cedfcb,2px 3px 6px #1d38201a}
.book-icon.cover-pooh{background:#d8a953;color:#533e20;box-shadow:inset 5px 0 #b7883e,2px 3px 6px #1d38201a}
.book-icon.cover-hp{background:#384e63;color:#f2d2a0;box-shadow:inset 5px 0 #263b4c,2px 3px 6px #1d38201a}
.book-name{white-space:normal;font-family:Georgia,"Times New Roman",serif;font-size:18px;font-weight:600;line-height:1.24;color:#244032}
.book-meta{margin-top:8px;color:#859586}
.book-arrow{width:31px;height:31px;border-radius:50%;background:#edf3ec;display:grid;place-items:center;color:#3b6e4a}
.library-unlock{background:#f2f4ec;border:1px solid #dfe8da;border-radius:19px;padding:21px;margin:0 0 16px}
.library-unlock strong{font-family:Georgia,serif;font-size:20px;color:#224330;font-weight:500}
.library-unlock p{color:#718071;font-size:13px;line-height:1.5;margin:7px 0 16px}
.unlock-row{display:flex;gap:8px}
.unlock-row input{min-width:0;flex:1;border:1px solid #d3ded1;background:#fff;border-radius:11px;padding:12px;color:#254633;outline:none}
.unlock-row input:focus{border-color:#47845d;box-shadow:0 0 0 3px #47845d20}
.unlock-row button{border:0;border-radius:11px;padding:0 16px;background:#254e39;color:#fff;font-weight:700}
.library-status{display:inline-block;background:#e8f1e6;color:#31694b;font-size:12px;font-weight:700;padding:8px 12px;border-radius:999px;margin-bottom:15px}
.library+.upload-button{margin-top:26px}
.library+.upload-button+.privacy-note{margin-bottom:18px}
.demo-button{margin-top:20px;color:#2c6041}
.bottom-nav{background:#fffefa;border-top-color:#e3e8df}
.bottom-nav button.active{color:#21613f}
.reader-toolbar{background:#fffefa}
.reading-surface{background:#fffefa}
.reading-text{color:#28372f}
.page-controls{background:#fffefa}
@media(max-width:500px){.home{padding-top:29px}.home h1{margin-top:13px}.privacy-note{margin-bottom:42px}.unlock-row{flex-direction:column}.unlock-row button{min-height:43px}.book-name{font-size:17px}}

/* Warm bookshelf layout */
:root{color:#342f28;background:#eae3d7}
.shell{background:#fffaf3;box-shadow:0 14px 90px #46331f18}
.topbar{height:68px;background:#fffaf3;border-bottom:1px solid #eadfce}
.brand{font-family:Georgia,"Times New Roman",serif;font-size:20px;letter-spacing:-.035em;color:#3f372d}
.brand-mark{width:33px;height:33px;background:#aa6448;border-radius:50%;color:#fff1d9;font-size:23px;font-weight:400;box-shadow:none}
.top-hint{text-transform:none;letter-spacing:0;font-size:12px;font-weight:600;color:#a89a88}
.home{padding:24px 28px 38px}
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 175px;overflow:hidden;min-height:258px;padding:33px 32px;margin-bottom:39px;border-radius:24px;background:linear-gradient(125deg,#eee1cb 0%,#f4e9d7 58%,#e2c5a6 100%);border:1px solid #e8d6bb}
.hero:before{content:"";position:absolute;width:330px;height:330px;border:1px solid #fff8e77d;border-radius:50%;right:-115px;top:-180px}
.hero-copy{position:relative;z-index:1}
.hero .eyebrow{display:block;width:max-content;max-width:100%;padding:0;background:none;color:#8b6247;font-size:11px;letter-spacing:.12em;margin:0 0 15px}
.hero h1{font-size:clamp(37px,6vw,51px);line-height:1.05;color:#453529;letter-spacing:-.045em;margin:0}
.hero h1 em{color:#a66447;font-style:italic}
.hero .lead{font-size:14px;line-height:1.5;color:#7a6754;margin:17px 0 0;max-width:310px}
.hero-art{position:relative;align-self:end;height:180px;z-index:1}
.art-book{display:flex;align-items:center;justify-content:center;position:absolute;bottom:2px;width:118px;height:159px;border-radius:4px 13px 13px 4px;box-shadow:inset 9px 0 #ffffff22,8px 14px 24px #5038202b;font-family:Georgia,serif}
.art-back{right:18px;transform:rotate(15deg) translate(13px,-4px);background:#ac815d;border:1px solid #916a4c}
.art-front{right:42px;transform:rotate(-11deg);background:#627a61;border:1px solid #435b47;color:#f7ecd6;font-size:41px;gap:3px}
.art-front span{font-size:17px;color:#d9bd83}
.art-spark{position:absolute;top:-3px;right:6px;color:#be895c;font-size:29px}
.home>.section-head{margin-top:0;padding:0 1px 15px;border-bottom:0;margin-bottom:16px}
.section-kicker{color:#b47b57;letter-spacing:.14em}
.section-head h2{color:#41372c;font-size:30px}
.section-head>span{color:#9a8d7d}
.library{grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}
.book-item{display:block;position:relative;min-width:0;min-height:0;padding:14px;text-align:left;background:#fffdf9;border:1px solid #ebdfcf;border-radius:17px;box-shadow:0 6px 22px #6042210b;transition:transform .18s,box-shadow .18s}
.book-item:hover{transform:translateY(-3px);border-color:#d6bd9d;box-shadow:0 13px 28px #60422120}
.book-icon{width:100%;height:165px;display:flex;align-items:center;justify-content:center;border-radius:5px 10px 10px 5px;font-size:54px;box-shadow:inset 10px 0 #00000018,3px 5px 10px #21160e24;letter-spacing:-.06em}
.book-icon.cover-pooh{background:linear-gradient(145deg,#e5c678,#b87844);color:#664026;box-shadow:inset 10px 0 #80502a27,3px 5px 10px #21160e24}
.book-icon.cover-hp{background:linear-gradient(145deg,#38505a,#182d3d);color:#e2c88b;box-shadow:inset 10px 0 #00000030,3px 5px 10px #21160e24}
.book-info{padding:15px 1px 2px;min-height:81px}
.book-name{font-size:18px;line-height:1.23;color:#3f352b;white-space:normal}
.book-meta{font-size:12px;color:#9b8c7e;margin-top:9px}
.book-arrow{position:absolute;right:22px;top:22px;background:#fffaf0e6;color:#675943;font-size:18px}
.book-progress{height:5px;background:#eee8dc;border-radius:20px;overflow:hidden;margin-top:13px}
.book-progress>span{display:block;height:100%;background:#b77455;border-radius:20px}
.library-unlock{background:#f4eee4;border:1px solid #e9dbca;border-radius:17px;padding:22px;margin-bottom:18px}
.library-unlock strong{color:#49382b}
.library-unlock p{color:#8a7b6b}
.unlock-row input{border-color:#e3d5c4}
.unlock-row input:focus{border-color:#ad7857;box-shadow:0 0 0 3px #ad785722}
.unlock-row button{background:#a6654c}
.library-status{background:#efe7d8;color:#8f694b}
.empty-library{grid-column:1/-1;background:#fffdf9;border-color:#e1d5c7;color:#9b8f81}
.library+.upload-button{margin-top:22px}
.upload-button{max-width:none;min-height:70px;border:1px dashed #d1ad8c;background:#fbf3e9;color:#8b583c;border-radius:17px;box-shadow:none;padding:0 22px}
.upload-button:hover{background:#f6eadb;color:#754b35}
.upload-button .upload-label{display:flex;align-items:center;gap:14px;font-size:15px;font-weight:700}
.upload-button .upload-plus{display:grid;place-items:center;width:34px;height:34px;background:#ead2b8;border-radius:10px;font-size:19px;font-weight:400}
.upload-button>span:last-child{font-size:22px}
.privacy-note{color:#a39586;max-width:none;margin:11px 4px 24px;font-size:12px}
.reading-tip{display:flex;align-items:flex-start;gap:15px;border-top:1px solid #eadfce;padding:22px 3px 8px;color:#554436}
.tip-icon{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:50%;background:#f0e2cc;color:#a46949;font-size:20px}
.reading-tip strong{font-family:Georgia,serif;font-size:19px;font-weight:500}
.reading-tip p{font-size:13px;line-height:1.5;color:#8c7d6f;margin:5px 0 0}
.demo-button{color:#a46349;border-bottom-color:#eadfce;margin-top:3px;padding:19px 3px}
.credits{margin:18px 3px 0;color:#a39586;font-size:11px}
.credits summary{cursor:pointer}
.credits .dictionary-credit{margin:9px 0;color:#a39586}
.credits a{color:#8f785f}
.bottom-nav{background:#fffaf3;border-top:1px solid #e9dfd0}
.bottom-nav button{color:#a59a8d}
.bottom-nav button.active{color:#985d43}
.bottom-nav .nav-icon{display:flex;align-items:center;justify-content:center}
.bottom-nav .nav-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.count{background:#f3e3d4;color:#985d43}
.reader-toolbar,.reading-surface,.page-controls{background:#fffdf9}
.reader-toolbar{border-bottom-color:#eee3d7}
.reader-title{color:#4c3c31}
.reader-progress{color:#a49382}
.progress-track{background:#efe6dc}
.progress-track>div{background:#b67855}
.reading-text{color:#352f2a}
.word:active,.word:hover{background:#f7e5b9}
.word.saved{text-decoration-color:#d2aa70}
.reading-mode{padding-bottom:0}
.reading-mode .reading-surface{padding-bottom:115px}
.reading-mode .page-controls{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,760px);z-index:4;border-top:1px solid #eee3d7;box-shadow:0 -12px 25px #46341d0b;padding:13px 22px calc(13px + env(safe-area-inset-bottom))}
.page-controls button{border-color:#e4d6c6;color:#825a40}
.sheet-panel{background:#fffaf3}
.word-heading h2{color:#47382c}
.save-button{background:#9b644a}
.save-button:hover{background:#85543f}
.sentence-button{background:#f1e7d9;color:#8a5d3e}
.sentence-button.compare-button{background:#e8e7dd;color:#65724e}
button:focus-visible,label:focus-visible,summary:focus-visible{outline:3px solid #bf8562;outline-offset:3px}
@media(max-width:500px){.home{padding:15px 18px 32px}.hero{grid-template-columns:1fr 86px;min-height:220px;padding:26px 21px;margin-bottom:29px;border-radius:20px}.hero h1{font-size:37px}.hero .lead{font-size:13px;max-width:250px}.hero-art{height:125px}.art-book{width:73px;height:104px}.art-back{right:0}.art-front{right:17px;font-size:28px}.art-front span{font-size:12px}.art-spark{top:2px;right:-9px;font-size:20px}.section-head h2{font-size:27px}.library{gap:11px}.book-item{padding:10px;border-radius:14px}.book-icon{height:130px;font-size:42px}.book-info{padding:13px 1px 2px;min-height:90px}.book-name{font-size:15px}.book-meta{font-size:11px;line-height:1.3}.book-arrow{right:17px;top:17px;width:28px;height:28px}.unlock-row{flex-direction:column}.unlock-row button{min-height:44px}.reading-mode .page-controls{padding-left:17px;padding-right:17px}.reading-tip{padding-top:19px}}
@media(max-width:350px){.hero{grid-template-columns:1fr 62px}.hero h1{font-size:33px}.hero-art{transform:translateX(17px) scale(.8);transform-origin:right bottom}.book-icon{height:112px}.book-name{font-size:14px}.page-controls button{font-size:12px;padding:10px}}
@media(max-width:350px){.hero{grid-template-columns:1fr}.hero-art{display:none}}