:root{--bg:#FAF8F3;--card:#fff;--sage:#7FB77E;--sage-d:#4F8A4E;--mint:#B8E0D2;--gold:#F4C542;--ink:#2F3A45;--mute:#7b8691;--r:16px}
*{box-sizing:border-box}
body{margin:0;font-family:Figtree,system-ui,sans-serif;color:var(--ink);background:var(--bg);
background-image:radial-gradient(circle at 10% 0%,#e7f3e4 0,transparent 40%),radial-gradient(circle at 95% 20%,#e3f2ee 0,transparent 35%),radial-gradient(#e9e4d6 1px,transparent 1px);background-size:auto,auto,22px 22px}
.hero{max-width:1100px;margin:auto;padding:36px 20px 10px}
.brand{display:flex;align-items:center;gap:12px}
.brand i{font-size:2rem;color:var(--sage)}
h1{font-family:Fraunces,serif;font-weight:800;font-size:clamp(2rem,6vw,3.6rem);margin:0;letter-spacing:-.02em}
h1 em{font-weight:300;color:var(--sage-d)}
.tagline{color:var(--mute);margin:6px 0 16px}
.progress-wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pill{background:#fff;border:1px solid #eee4c8;padding:6px 14px;border-radius:99px;font-weight:600}
.bar{flex:1;min-width:160px;height:8px;background:#ece8dc;border-radius:99px;overflow:hidden}
.fill{height:100%;background:linear-gradient(90deg,var(--sage),var(--mint));width:0;transition:width .5s}
.wotd{max-width:1100px;margin:16px auto;padding:0 20px}
.wotd .box{background:linear-gradient(120deg,#fff,#f1f8f3);border:1px solid #dcebdc;border-radius:var(--r);padding:18px 22px;position:relative}
.wotd small{text-transform:uppercase;letter-spacing:.15em;color:var(--sage-d);font-weight:800;font-size:.7rem}
.wotd h2{font-family:Fraunces,serif;font-size:2.2rem;margin:4px 0}
.wotd .x{position:absolute;top:10px;right:10px}
.controls{position:sticky;top:0;z-index:5;background:rgba(250,248,243,.92);backdrop-filter:blur(8px);border-bottom:1px solid #ece6d6;padding:12px 20px}
.controls>*{max-width:1100px;margin-left:auto;margin-right:auto}
.row{display:flex;gap:10px;flex-wrap:wrap}
.search{flex:1;min-width:220px;display:flex;align-items:center;background:#fff;border:1.5px solid #e6e0cf;border-radius:14px;padding:0 12px;transition:border .2s}
.search:focus-within{border-color:var(--sage)}
.search i{color:var(--mute)}
.search input{flex:1;border:0;outline:0;padding:12px 10px;font:inherit;background:transparent;min-height:44px}
.icon-btn,.ghost{border:0;background:none;cursor:pointer;color:var(--mute);min-width:44px;min-height:44px;border-radius:12px;font-size:1rem}
.ghost{background:#fff;border:1.5px solid #e6e0cf}
.ghost:hover{color:var(--sage-d)}
.seg{display:flex;background:#fff;border:1.5px solid #e6e0cf;border-radius:14px;padding:3px}
.seg button{border:0;background:none;padding:0 12px;border-radius:10px;font:inherit;font-weight:600;cursor:pointer;color:var(--mute);min-height:38px}
.seg button.on{background:var(--sage);color:#fff}
.seg .fa-star{color:var(--gold)}
.seg button.on .fa-star{color:#fff}
.letters{display:flex;gap:4px;overflow-x:auto;padding:10px 0 4px;scrollbar-width:thin}
.letters button{flex:0 0 auto;border:0;background:#fff;border:1px solid #ece6d6;border-radius:10px;min-width:36px;height:36px;font-weight:800;cursor:pointer;color:var(--ink);font-family:Fraunces,serif}
.letters button.on{background:var(--ink);color:#fff}
.letters button:disabled{opacity:.3;cursor:default}
.meta{display:flex;justify-content:space-between;font-size:.85rem;color:var(--mute)}
.link{border:0;background:none;color:var(--mute);text-decoration:underline;cursor:pointer;font:inherit}
main{max-width:1100px;margin:auto;padding:10px 20px 40px}
.lh{font-family:Fraunces,serif;font-weight:800;font-size:2.4rem;color:var(--sage);margin:22px 0 8px;border-bottom:2px dashed #dde8d8}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.grid{grid-template-columns:1fr}}
.card{background:var(--card);border-radius:var(--r);padding:18px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 6px 18px rgba(80,90,60,.06);position:relative;border-left:4px solid transparent;transition:transform .2s,box-shadow .2s,background .3s;animation:rise .4s both}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(80,90,60,.1)}
.card.learned{border-left-color:var(--gold);background:#fffbef}
.card.flash{box-shadow:0 0 0 4px var(--mint)}
.card h3{font-family:Fraunces,serif;font-size:1.6rem;margin:0 70px 2px 0;font-weight:800}
.idx{font-size:.72rem;color:var(--mute);letter-spacing:.1em}
.def{margin:10px 0}
.ex{background:#f2f8f5;border-radius:12px;padding:10px 12px;font-style:italic;color:#44525e;font-size:.95rem}
.ex i{color:var(--mint);margin-right:6px}
.ex mark{background:linear-gradient(transparent 55%,#ffe79a 55%);color:inherit;font-weight:600}
.acts{position:absolute;top:10px;right:8px;display:flex}
.star{font-size:1.3rem;color:#c9c2ad}
.star.on{color:var(--gold)}
.star.pop{animation:pop .4s}
.empty{text-align:center;padding:60px 20px;color:var(--mute);font-size:1.1rem}
.top{position:fixed;right:18px;bottom:18px;width:48px;height:48px;border-radius:50%;border:0;background:var(--ink);color:#fff;cursor:pointer;opacity:0;pointer-events:none;transition:.3s}
.top.show{opacity:1;pointer-events:auto}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,100px);background:var(--ink);color:#fff;padding:12px 20px;border-radius:14px;transition:.4s;z-index:10;max-width:90vw}
.toast.show{transform:translate(-50%,0)}
footer{text-align:center;color:var(--mute);padding:30px;font-size:.9rem}
footer a{color:var(--sage-d);font-weight:600}
button:focus-visible,input:focus-visible{outline:2px solid var(--sage);outline-offset:2px}
@keyframes pop{50%{transform:scale(1.5) rotate(15deg)}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}