:root{--green:#173f35;--orange:#b56b42;background:#f6f5ef;color:#203d33}
body{background:radial-gradient(ellipse at 100% 0,#e8edde88,transparent 45%),#f6f5ef}
aside{background:#fafbf6;border-right:1px solid #dde4d7}
header{background:#fafbf6bb;backdrop-filter:blur(14px)}
#language{font:inherit;font-size:12px;color:var(--green);border:1px solid #d8e0d3;background:#fffdf8;border-radius:20px;padding:9px 28px 9px 13px;cursor:pointer}
#language:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.sidebar-language{display:grid;gap:7px;margin-top:22px}.sidebar-language label{font-size:9px;text-transform:uppercase;letter-spacing:1.5px;color:#7b867d}.sidebar-language #language{width:100%}
.page-intro{position:relative;padding-bottom:4px}
.page-intro h1{font-weight:650;letter-spacing:-1.7px;max-width:800px}
.eyebrow{letter-spacing:2.5px}.lead{font-size:14px;max-width:650px}
.hero{background:radial-gradient(ellipse at 80% 40%,#3b624c,#153e32 75%);box-shadow:0 18px 42px #193e3215;min-height:330px;border:1px solid #55735c}
.hero h2{font-size:34px}.letter-art{min-width:0;min-height:260px}.letter-art canvas{display:block;position:absolute;inset:0;width:100%;height:100%}.letter-art.has-scene>i,.letter-art.has-scene>b,.letter-art.has-scene>span{display:none}
.lesson,.letter-tile,.flashcard,.practice-box{box-shadow:0 4px 14px #173d3205;border-color:#dfe5d7}
.lesson:hover,.letter-tile:hover{box-shadow:0 8px 22px #173d3210;border-color:#b8cbb0}.lesson{border-radius:17px}.lesson .glyph{color:#547452}
.everyday-link{margin-top:26px;padding:22px;border:1px solid #d9e3d1;background:linear-gradient(120deg,#e9eede,#f4f1e7);border-radius:17px;display:flex;align-items:center;gap:18px}.everyday-link>span{font-size:30px}.everyday-link h2{font-size:17px;margin:0 0 7px}.everyday-link p{font-size:12px;color:#687764;margin:0}.everyday-link>b{margin-left:auto}
.topic-rail{display:grid;grid-template-columns:34px minmax(0,1fr) 34px;gap:8px;align-items:center;margin-top:20px}
.topic-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;gap:9px;margin:0;padding:5px 2px 9px;-webkit-overflow-scrolling:touch;min-width:0}
.topic-tabs::-webkit-scrollbar{display:none}.topic-tabs button{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start;border-radius:30px;background:#fffdf7;color:#536852;border:1px solid #dce4d5;padding:12px 20px;font-size:13px;min-height:44px;transform:none}
.topic-tabs button[aria-selected=true]{background:var(--green);color:#fff9e9;border-color:var(--green);box-shadow:0 4px 10px #173d3220}
.rail-arrow{background:#e9eee2;color:#426047;border-radius:50%;width:34px;height:34px;padding:0;font-size:25px;display:grid;place-items:center;transform:none!important}
.rail-caption{display:flex;justify-content:space-between;font-size:10px;color:#7d8a77;padding:2px 44px 0}.rail-caption span{font-size:16px}
.topic-heading{margin:28px 0 20px;align-items:center}.topic-heading h2{font-size:26px;letter-spacing:-.7px}.topic-heading .eyebrow{font-size:9px;letter-spacing:1.6px}.topic-heading button{white-space:nowrap;border-radius:25px;background:#e9eee2;font-size:12px}
.number-note{background:#eceee1;border:1px solid #e0e4d3;border-radius:13px;padding:15px 18px;margin-bottom:18px}.number-note summary{cursor:pointer;font-size:12px;font-weight:600;list-style:none}.number-note summary span{float:right}.number-note p{line-height:1.8;color:#61725a;font-size:13px}
.phrase-list{gap:12px}.phrase-card{border-radius:17px;border:1px solid #e0e5d9;padding:15px 19px;background:#fffef9;box-shadow:0 3px 10px #163d3103;transition:box-shadow .2s,border-color .2s}.phrase-card:hover{border-color:#becfb3;box-shadow:0 5px 16px #163d3109}.phrase-main{min-width:0;transform:none!important}.phrase-main strong{font-size:25px;color:#294f3c;font-weight:500;overflow-wrap:anywhere}.phrase-main span{font-size:12px;margin-top:7px;color:#a96943}.phrase-main small{font-size:13px;margin-top:6px;color:#71816a}.phrase-audio{width:44px;height:44px;background:#e9efdf;color:#476241}.phrase-audio.is-playing,.phrase-main.is-playing{background:#e4edd9;color:#234c37}.phrase-main.is-playing{border-radius:10px}
.phrase-number.is-value{font-size:18px;font-weight:700;color:var(--green);font-variant-numeric:tabular-nums}
.card-actions button{min-height:44px}.flashcard{background:radial-gradient(ellipse at center,#fffef9,#f2f3e9);border-radius:24px}.audio{border-radius:25px}.metrics{background:#fdfdf7;border-radius:17px}
@media(max-width:760px){main{padding:27px 20px}.page-intro h1{font-size:34px;line-height:1.15;letter-spacing:-1.3px}.lead{font-size:13px;line-height:1.8;margin-bottom:20px}#language{font-size:11px;padding:7px 23px 7px 10px}.header-right{gap:10px}.hero{grid-template-columns:1fr;min-height:0;padding:26px}.hero h2{font-size:31px}.hero .letter-art{height:180px;min-height:180px;margin-top:10px}.hero .light{width:auto;font-size:13px}.topic-rail{grid-template-columns:28px minmax(0,1fr) 28px;gap:5px}.rail-arrow{width:28px;height:28px;font-size:21px}.topic-tabs button{font-size:12px;padding:11px 16px}.rail-caption{padding:0 34px;font-size:9px}.topic-heading{gap:14px;align-items:flex-start;margin-top:25px}.topic-heading h2{font-size:24px}.topic-heading button{padding:11px 15px}.phrase-card{grid-template-columns:22px minmax(0,1fr) 44px;padding:13px 12px}.phrase-main strong{font-size:22px}.phrase-main small{font-size:12px}.phrase-number{font-size:9px}.card-actions{grid-template-columns:minmax(0,1fr) minmax(0,1.65fr) minmax(0,1fr)}.card-actions button{font-size:10px;padding:8px 3px}.everyday-link{padding:18px;gap:12px}.everyday-link h2{font-size:15px}.everyday-link p{line-height:1.7}.learned-count{font-size:10px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.menu-toggle,.menu-close,.menu-backdrop{display:none}
@media(max-width:900px){
 body.menu-active{overflow:hidden}
 .layout{display:block}
 .workspace{margin-left:0}
 aside#site-sidebar{display:flex;position:fixed;inset:0 auto 0 0;width:min(330px,88vw);height:100dvh;padding:28px 24px 22px;z-index:31;transform:translateX(-105%);transition:transform .25s ease;box-shadow:18px 0 50px #0d2b2240;border-right:1px solid #d5ddd0;overflow-y:auto}
 aside#site-sidebar.menu-open{transform:translateX(0)}
 aside#site-sidebar nav{display:grid;flex:none;margin-top:42px;gap:8px}
 aside#site-sidebar nav a{padding:14px;gap:13px;font-size:22px}
 aside#site-sidebar nav a span{font-size:13px}
 aside#site-sidebar .sidebar-language{margin-top:24px}
 aside#site-sidebar .aside-note{display:block;margin-top:auto}
 aside#site-sidebar .version{display:block}
 .menu-toggle{display:flex;position:fixed;z-index:20;top:12px;left:16px;height:42px;align-items:center;gap:8px;border-radius:22px;padding:0 14px;background:var(--green);box-shadow:0 5px 18px #173d3225;font-size:13px}
 .menu-toggle>span:first-child{font-size:18px;line-height:1}
 .menu-close{display:grid;position:absolute;right:16px;top:16px;width:38px;height:38px;padding:0;place-items:center;border-radius:50%;background:#edf1e8;color:var(--green);font-size:28px;line-height:1;transform:none!important}
 .menu-backdrop{display:block;position:fixed;inset:0;background:#102d2470;backdrop-filter:blur(3px);z-index:30;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
 body.menu-active .menu-backdrop{opacity:1;visibility:visible}
 header{padding-left:130px}
}
@media(max-width:420px){.menu-label{display:none}.menu-toggle{width:42px;padding:0;justify-content:center}.menu-toggle>span:first-child{font-size:20px}header{padding-left:72px}}