@import "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Noto+Serif+SC:wght@400;600;700&display=swap";:root{color:#26322d;font-synthesis:none;background:#f5f2ea;font-family:Manrope,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0}.shell{grid-template-columns:240px 1fr;min-height:100vh;display:grid}aside{color:#e8eee8;background:#173f35;flex-direction:column;width:240px;height:100vh;padding:38px 24px 24px;display:flex;position:fixed}.brand{align-items:center;gap:12px;font-size:20px;font-weight:700;display:flex}.brand>span{color:#173f35;background:#d5a64a;border-radius:12px;place-items:center;width:42px;height:42px;font-family:Noto Serif SC;font-size:25px;display:grid}.brand small{letter-spacing:.08em;opacity:.6;margin-top:3px;font-size:9px;display:block}.brand+nav{margin-top:52px}nav{gap:8px;display:grid}nav button{color:#cad6d0;cursor:pointer;text-align:left;background:0 0;border:0;border-radius:10px;align-items:center;gap:13px;padding:13px 14px;font:500 14px Manrope;display:flex}nav svg{width:19px}nav button.active{color:#fff;background:#2a584c}nav b{color:#173f35;background:#d5a64a;border-radius:10px;margin-left:auto;padding:2px 7px;font-size:11px}.streak{background:#214b40;border:1px solid #376359;border-radius:14px;margin-top:auto;padding:17px;position:relative}.streak strong{color:#e9bd65;margin-left:8px;font-size:24px}.streak span{opacity:.7;margin-top:4px;font-size:11px;display:block}.streak div{color:#e9bd65;position:absolute;top:16px;right:14px}aside footer{opacity:.6;padding:18px 4px 0;font-size:11px}main{grid-column:2;width:100%;max-width:1280px;margin:auto;padding:48px 5vw}header{justify-content:space-between;align-items:flex-end;margin-bottom:30px;display:flex}.eyebrow{color:#977434;text-transform:uppercase;letter-spacing:.13em;font-size:10px;font-weight:700}h1{color:#183c33;margin:8px 0 2px;font-family:Noto Serif SC,serif;font-size:38px}header p,.cards-page>p{color:#7a817d;margin:0;font-size:13px}.audio,.add,.empty button{color:#fff;cursor:pointer;background:#1d5244;border:0;border-radius:10px;align-items:center;gap:9px;padding:12px 18px;font-weight:600;display:flex}.audio svg{width:17px}.reader-grid{grid-template-columns:minmax(400px,720px) 260px;gap:30px;display:grid}.paper{background:#fffdf8;border:1px solid #e8e1d4;border-radius:4px;padding:28px 48px 40px;box-shadow:0 12px 34px #283e3412}.paper-meta{color:#9b9284;border-bottom:1px solid #eee7db;gap:22px;padding-bottom:17px;font-size:10px;display:flex}.paper-meta span:first-child{color:#39715f;background:#e5eee9;border-radius:10px;padding:3px 8px}.chinese{letter-spacing:.04em;color:#252f2b;margin:25px 0;font-family:Noto Serif SC,serif;font-size:25px;line-height:2.15}.chinese button{font:inherit;letter-spacing:inherit;color:inherit;cursor:pointer;background:#f5e8c755;border:0;border-bottom:1px dashed #b48b3c;padding:0 1px}.chinese button:hover{background:#f0d796}.tip{color:#9d9587;border-top:1px solid #eee7db;padding-top:18px;font-size:11px}.side-panel{flex-direction:column;gap:14px;display:flex}.side-panel>h3{margin:0;font-size:13px}.goal,.mini,.hint{background:#fffdf8;border:1px solid #e6ded1;border-radius:12px;padding:18px}.goal strong{color:#245346;font-size:28px;display:block}.goal span,.mini span,.hint span{color:#8a928d;font-size:10px}.goal i{background:#d4a64e;border-radius:4px;height:5px;margin-top:15px;display:block}.mini{grid-template-columns:1fr 1fr;padding:0;display:grid}.mini div{gap:5px;padding:17px;display:grid}.mini div+div{border-left:1px solid #eee6da}.mini svg{color:#9a793a;width:17px}.mini b{font-size:20px}.hint{background:#e8eee8;gap:12px;display:flex}.hint svg{color:#285d4f;width:20px}.hint b,.hint span{font-size:11px;display:block}.hint span{margin-top:5px;line-height:1.5}.overlay{background:#182d2866;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.dictionary{background:#fffdf8;border-radius:16px;width:340px;padding:30px;position:relative;box-shadow:0 24px 70px #10241e55}.close{color:#89918d;cursor:pointer;background:0 0;border:0;position:absolute;top:16px;right:16px}.close svg{width:18px}.dictionary>span{letter-spacing:.15em;color:#a8833e;font-size:9px}.dictionary h2{color:#183f35;margin:15px 0 0;font-family:Noto Serif SC;font-size:42px}.dictionary i{color:#a07831}.dictionary hr{border:0;border-top:1px solid #e8e0d3;margin:24px 0}.dictionary p{font-size:16px}.add{justify-content:center;width:100%;margin-top:24px}.add svg{width:17px}.cards-page,.stats-page{max-width:850px;margin:auto}.flashcard{cursor:pointer;background:#fffdf8;border:1px solid #ded5c7;border-radius:18px;flex-direction:column;justify-content:center;align-items:center;height:370px;margin-top:40px;display:flex;box-shadow:0 15px 40px #263e3515}.flashcard>span{text-transform:uppercase;letter-spacing:.14em;color:#9a7b3d;font-size:10px}.flashcard strong{color:#173f35;margin:24px;font-family:Noto Serif SC;font-size:68px}.flashcard em{color:#a9833c;font-style:normal}.flashcard p{font-size:19px}.ratings{grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px;display:grid}.ratings button{cursor:pointer;color:#294239;background:#fffdf8;border:1px solid #ddd3c4;border-radius:10px;padding:12px}.ratings small{color:#929a95;margin-top:5px;display:block}.empty,.coming{text-align:center;background:#fffdf8;border:1px solid #e6ded1;border-radius:16px;margin-top:40px;padding:60px}.empty svg,.coming svg{color:#c49a48;width:42px;height:42px}.empty button{margin:25px auto 0}.stat-grid{grid-template-columns:repeat(4,1fr);gap:15px;margin-top:38px;display:grid}.stat{background:#fffdf8;border:1px solid #e5ddcf;border-radius:12px;padding:25px}.stat strong{color:#215245;font-size:30px;display:block}.stat span{color:#858e89;font-size:11px}.coming{padding:50px}.coming h2{color:#26473e;font-family:Noto Serif SC}.coming p{color:#838c87;font-size:13px}@media (width<=900px){.shell{display:block}aside{flex-direction:row;align-items:center;width:auto;height:auto;padding:18px;position:static}.brand small,.streak,aside footer{display:none}.brand+nav{margin:0 0 0 auto}nav{display:flex}nav button{font-size:0}nav svg{width:21px}main{padding:30px 18px}.reader-grid{grid-template-columns:1fr}.side-panel{grid-template-columns:repeat(2,1fr);display:grid}.hint{display:none}}@media (width<=560px){header{align-items:center}.audio{padding:12px;font-size:0}.paper{padding:24px}.chinese{font-size:22px}.side-panel{grid-template-columns:1fr}.stat-grid,.ratings{grid-template-columns:1fr 1fr}.flashcard{height:320px}.flashcard strong{font-size:55px}}.dictionary{flex-direction:column;width:min(460px,100vw - 32px);max-height:min(760px,100vh - 32px);padding:34px 38px 36px;display:flex}.word-meta{flex:none;align-items:center;gap:10px;display:flex}.word-meta b{letter-spacing:.15em;font:700 9px Manrope}.word-meta small{letter-spacing:.08em;color:#527167;background:#e7efeb;border-radius:999px;padding:4px 8px;font:700 9px Manrope}.dictionary h2{flex:none;margin:22px 0 5px;font-size:52px;line-height:1.1}.dictionary>i{flex:none;font-size:18px}.dictionary hr{flex:none;width:100%;margin:26px 0 18px}.definition-list{scrollbar-width:thin;scrollbar-color:#c8b895 transparent;min-height:0;margin-right:-14px;padding:0 14px 4px 0;overflow-y:auto}.definition-list::-webkit-scrollbar{width:6px}.definition-list::-webkit-scrollbar-thumb{background:#c8b895;border-radius:6px}.dictionary .sense{color:#39433f;margin:0;font-size:16px;line-height:1.62}.dictionary .sense+.sense{border-top:1px solid #eee6d9;margin-top:13px;padding-top:13px}.dictionary .add{flex:none;min-height:58px;margin-top:22px}@media (width<=560px){.dictionary{max-height:calc(100vh - 20px);padding:30px 26px 26px}.dictionary h2{font-size:46px}.dictionary .sense{font-size:15px;line-height:1.55}.dictionary .add{min-height:54px}}.text-switcher{gap:10px;margin:-10px 0 26px;padding:2px 1px 8px;display:flex;overflow-x:auto}.text-switcher button{text-align:left;color:#294239;cursor:pointer;background:#fffdf8;border:1px solid #ded6c9;border-radius:12px;grid-template-columns:auto 1fr;gap:3px 9px;min-width:220px;max-width:310px;padding:13px 15px;display:grid}.text-switcher button.active{background:#e8f0eb;border-color:#27604f;box-shadow:0 0 0 1px #27604f}.text-switcher span{color:#987535;background:#f2e7cd;border-radius:999px;grid-row:1/3;align-self:start;padding:4px 7px;font-size:9px;font-weight:700}.text-switcher b{white-space:nowrap;text-overflow:ellipsis;font-family:Noto Serif SC;font-size:14px;overflow:hidden}.text-switcher small{color:#89918d;font-size:9px}.chinese{white-space:pre-wrap}
