:root{color-scheme:light;--ink:#242c25;--green:#28533e;--muted:#646d64;--lime:#dcf29c;--line:#dfE2d8;--paper:#fafaf6;--white:#fff;--mono:ui-monospace,Consolas,"Liberation Mono",monospace;--ui:"Segoe UI",Arial,sans-serif;--display:Arial,"Helvetica Neue",sans-serif}
*{box-sizing:border-box}html{min-height:100%;scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ui);font-size:15px;line-height:1.46}button,input,select,textarea{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button{color:inherit}a{color:inherit}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #4d77a4;outline-offset:3px}button:disabled{opacity:.56;cursor:wait}h1,h2,h3,h4,p{margin:0}h1,h2,h3,h4{font-family:var(--display);line-height:1.12}svg{display:inline-block;vertical-align:middle;flex:none}button{border:0} .skip{position:fixed;left:10px;top:-70px;z-index:100;background:white;padding:12px}.skip:focus{top:10px} [hidden]{display:none!important}
.sidebar{position:fixed;inset:0 auto 0 0;width:229px;display:flex;flex-direction:column;background:#f3f4ec;border-right:1px solid #dfe3d7;padding:30px 16px 16px;z-index:8}.brand{display:flex;align-items:center;text-decoration:none;font:700 29px/1 var(--display);letter-spacing:-1.8px;color:#234934;padding-left:9px}.brand img{height:35px;width:35px;margin-right:8px}.brand-dot{color:#719058}.side-topline{font:9px/1 var(--mono);letter-spacing:1.6px;margin:12px 0 0 11px;color:#66745e}#nav{margin-top:46px}.nav-group+.nav-group{margin-top:29px}.nav-label,.eyebrow,.tag,.meta-text{font:600 10px/1.3 var(--mono);letter-spacing:1.2px;text-transform:uppercase}.nav-label{padding:0 13px;margin-bottom:12px;font-size:9px;letter-spacing:1.65px;color:#6c7568}.nav-item{display:flex;align-items:center;min-height:43px;gap:13px;border-radius:8px;padding:10px 13px;margin:3px 0;text-decoration:none;font-size:14px;font-weight:500;color:#515d51}.nav-item svg{stroke-width:1.7}.nav-item:hover{background:#e9ecdf}.nav-item.active{color:#254d36;background:#dfeacb;font-weight:650}.nav-item.active::after{content:"";height:6px;width:6px;border-radius:50%;background:#53814d;margin-left:auto}.side-bottom{margin-top:auto;border-top:1px solid #d9dfd1;padding:18px 4px 0}.side-bottom>.eyebrow{font-size:9px;color:#677660;margin:0 0 12px 5px;display:flex;align-items:center;gap:6px}.status-dot{display:inline-block;background:#769753;width:6px;height:6px;border-radius:50%}.profile{display:flex;align-items:center;gap:10px;width:100%;background:transparent;text-align:left;padding:2px 2px 0}.avatar{width:35px;height:35px;border:1px solid #cdd5bb;border-radius:50%;display:grid;place-items:center;background:#e5eacb;color:var(--green);font:600 13px var(--mono);flex:none}.profile strong,.profile small{display:block}.profile strong{font-size:13px;max-width:118px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.profile small{font-size:11px;color:var(--muted);margin-top:2px}.profile-more{margin-left:auto;font-size:21px}.shell{margin-left:229px}.topbar{height:66px;border-bottom:1px solid var(--line);padding:0 clamp(22px,3vw,52px);display:flex;align-items:center;justify-content:space-between;font-size:12px}.breadcrumbs,.lang-chip{display:flex;align-items:center;gap:12px}.crumb-home{color:#71796e}.crumb-divider{color:#a6aea1}.breadcrumbs strong{font-weight:600}.lang-chip{gap:7px;font-size:12px;color:#596450}.mobile-menu{display:none}.scrim{display:none}
main{max-width:1580px;margin:0 auto;padding:32px clamp(22px,3vw,52px) 48px;outline:0}.page-head{margin-bottom:25px}.head-kicker{display:flex;align-items:center;gap:8px;color:#607255;font:600 10px/1.4 var(--mono);letter-spacing:1.65px;text-transform:uppercase;margin-bottom:9px}.head-kicker .status-dot{background:#88a660}.h1,h1{font:700 clamp(35px,3.2vw,53px)/1.05 var(--display);letter-spacing:-2.25px} .page-head p{margin-top:9px;font-size:15px;color:var(--muted)}.dash{display:grid;grid-template-columns:minmax(0,2.08fr) minmax(245px,.85fr);gap:22px}.main-col,.rail{min-width:0}.hero{border-radius:15px;background:#244e3c;color:#fff;position:relative;min-height:275px;overflow:hidden;isolation:isolate;display:flex;align-items:center}.hero:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.33;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' opacity='.16' filter='url(%23n)' d='M0 0h150v150H0z'/%3E%3C/svg%3E")}.hero-art{position:absolute;right:-3.5%;top:1%;height:98%;width:57%;object-fit:contain;z-index:-1}.hero-copy{padding:26px 0 26px 30px;width:59%}.hero-kicker{display:inline-flex;gap:7px;align-items:center;color:#d8eeae;background:#355d45;border:1px solid #627c54;border-radius:20px;font:600 9px/1 var(--mono);letter-spacing:1.35px;padding:7px 10px;text-transform:uppercase}.hero-kicker i{height:6px;width:6px;border-radius:50%;background:#cce998}.hero h2{font:700 clamp(36px,3.15vw,52px)/.99 var(--display);letter-spacing:-2.1px;margin:17px 0 10px;max-width:11.5ch;color:#f9faef}.hero p{color:#dce5d8;font-size:13px;max-width:30ch;line-height:1.5}.hero-meta{display:flex;align-items:center;gap:11px;margin-top:20px;flex-wrap:wrap}.primary,.secondary,.hero-btn,.inline-btn,.dark-btn,.outline-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:650;text-decoration:none;border:1px solid transparent;border-radius:8px;padding:10px 15px;line-height:1.25}.hero-btn,.primary{background:#d9f198;color:#213824}.hero-btn:hover,.primary:hover{background:#cde881}.hero-time{font:11px var(--mono);display:flex;align-items:center;gap:5px;color:#e2e8d8}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:26px 0 14px}.section-heading h2,.box-title{font:700 22px/1.2 var(--display);letter-spacing:-.85px}.inline-btn{background:transparent;padding:6px 0;color:#375b3c;gap:5px;font-size:12px;border:0}.inline-btn:hover{text-decoration:underline}.path-list{border:1px solid var(--line);border-radius:13px;background:#fff;overflow:hidden}.unit-row{width:100%;display:flex;align-items:center;gap:15px;padding:17px 18px;background:transparent;text-align:left}.unit-row+.unit-row{border-top:1px solid var(--line)}.unit-row:hover,.lesson-row:hover{background:#f6f8f1}.tile{width:48px;height:49px;border-radius:10px;display:grid;place-items:center;flex:none;color:#38512d;background:#e9efd3}.tile.t1{background:#fae2cc;color:#815534}.tile.t2{background:#e7e2f5;color:#62547c}.tile.t3{background:#dcebf0;color:#4b6d7b}.tile.t4{background:#f7e0df;color:#8f5d5b}.tile.t5{background:#e1ead8;color:#4b664a}.unit-txt{min-width:0;flex:1}.unit-txt small,.unit-txt strong,.unit-txt span{display:block}.unit-txt small,.tiny-label{font:600 9px/1.3 var(--mono);letter-spacing:1.1px;text-transform:uppercase;color:#707968}.unit-txt strong{font:650 16px/1.25 var(--display);letter-spacing:-.35px;margin:4px 0}.unit-txt span{font-size:12px;color:var(--muted)}.count{font:11px var(--mono);color:#6b7267;white-space:nowrap}.ring-arrow,.round-icon{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;width:27px;height:27px;color:#556650;flex:none}.rail{display:flex;flex-direction:column;gap:16px}.panel,.surface{border-radius:13px;border:1px solid var(--line);background:#fff;padding:20px}.panel-top{display:flex;align-items:center;justify-content:space-between;gap:6px}.panel-top .eyebrow,.panel>.eyebrow{color:#63725c;font-size:9px}.panel h3{font-size:19px;letter-spacing:-.7px}.week-panel .panel-top{margin-bottom:16px}.week-panel .accent-icon{color:#6a7b4e}.week-title{font-size:29px;letter-spacing:-1.4px;font-family:var(--display);font-weight:700;line-height:1}.week-title span{font-size:13px;letter-spacing:0;font-weight:400;color:#677263}.days{display:flex;justify-content:space-between;align-items:center;margin-top:17px;gap:4px}.day{display:flex;flex-direction:column;gap:6px;align-items:center;font:9px var(--mono);color:#72796b}.day i{display:grid;place-items:center;width:clamp(21px,1.9vw,30px);height:clamp(21px,1.9vw,30px);border:1px dashed #cdd2bf;border-radius:50%;font-style:normal;background:#f9faf5;color:#8e9c7f}.day.today i{border:1.5px solid #697f41;color:#587233;background:#e6efcf}.day.done i{background:#d5e995;color:#355134;border-style:solid}.rail-note{color:var(--muted);font-size:12px;margin:14px 0 0}.progress-header{display:flex;align-items:baseline;gap:8px;margin:13px 0 8px}.progress-header b{font:700 33px/1 var(--display);letter-spacing:-1.7px}.progress-header span{color:#707568;font-size:12px}.track{height:6px;border-radius:6px;background:#eaede2;overflow:hidden}.track i{display:block;height:100%;border-radius:inherit;background:#91b766}.panel-link{padding:0;margin:14px 0 0}.ask-panel{position:relative;background:#eeebf5;border-color:#e4dfed;overflow:hidden}.ask-panel .panel-top{color:#6e607e}.ask-panel h3{font-size:22px;max-width:74%;margin-top:11px;letter-spacing:-.9px}.ask-panel p{font-size:12px;color:#665e6f;max-width:29ch;margin:9px 0 13px}.ask-panel .inline-btn{color:#4c4059}.doodle{position:absolute;right:10px;top:18px;width:63px;height:55px}.rail .panel h3,.section-heading h2{color:var(--ink)}
.dark-btn{background:var(--green);color:white}.dark-btn:hover{background:#193e29}.secondary,.outline-btn{border-color:#cbd3c3;background:#fff;color:var(--green)}.full{width:100%}.page-limit{max-width:970px}.surface{margin:0 0 16px}.surface h2,.surface h3{letter-spacing:-.7px;margin-bottom:8px}.surface p,.help{color:var(--muted);font-size:14px;line-height:1.55}.surface .eyebrow{margin-bottom:8px;color:var(--green)}.toolbar{display:flex;gap:7px;flex-wrap:wrap;margin:18px 0}.filter{border:1px solid var(--line);background:#fff;border-radius:22px;padding:7px 13px;font-size:13px}.filter.current{background:#e3edcf;border-color:#c3d4af;color:var(--green);font-weight:650}.library .unit-row{padding:18px;background:#fff}.unit-block{margin:0 0 12px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}.lesson-rows{border-top:1px solid var(--line);padding:0 16px;background:#fcfdf9}.lesson-row{background:transparent;padding:13px 2px;min-height:52px;display:flex;align-items:center;text-align:left;gap:12px;width:100%;color:var(--ink)}.lesson-row+.lesson-row{border-top:1px solid var(--line)}.lesson-row .body{flex:1;font-size:14px;font-weight:600}.lesson-row small{font-weight:400;font-size:12px;color:var(--muted)}.stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.stat b{font:700 35px/1.15 var(--display);display:block;margin-top:10px}.dual{display:grid;grid-template-columns:1.5fr 1fr;gap:16px}.empty{display:flex;flex-direction:column;align-items:flex-start;gap:11px;padding:13px 0}.empty .tile{width:40px;height:40px}.empty h3{margin:0}.q-card .tag{font-size:9px;color:#57733f;padding:4px 8px;border-radius:20px;background:#eaf1db}.q-card .tag.answered{background:#e0ede5;color:#315b42}.q-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.q-card h3{font:650 16px/1.4 var(--ui);margin:12px 0 5px;overflow-wrap:anywhere;white-space:pre-wrap}.reply{border-left:3px solid #bfd1ab;padding:8px 13px;background:#f4f7ef;margin:13px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}.text-field,select.field,textarea.field{width:100%;padding:11px 13px;border:1px solid #bbc4b4;border-radius:7px;color:var(--ink);background:#fff;line-height:1.45}.field-label{font-weight:650;display:block;margin:14px 0 5px;font-size:13px}.form-actions,.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:15px}.form-error{color:#8d382f;margin:10px 0;font-size:13px}.invite-code{font:600 16px var(--mono);display:block;padding:12px;background:#eef3e6;border:1px dashed #b5c6a4;border-radius:7px;word-break:break-word;margin-top:12px}.person{padding:9px 0;font-size:14px}.person+.person{border-top:1px solid var(--line)}.loading{color:var(--muted);padding:18px 0}
dialog{border:1px solid var(--line);border-radius:16px;max-width:480px;width:calc(100% - 32px);padding:25px;color:var(--ink);background:var(--paper);box-shadow:0 20px 85px #18291c30}dialog::backdrop{background:rgb(26 36 28 / 42%)}.dialog-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.dialog-title h2{font-size:24px;letter-spacing:-.8px}.close{padding:6px;line-height:1;background:transparent;border-radius:50%;color:var(--muted)}.dialog-copy{font-size:14px;color:var(--muted);margin-bottom:13px}.dialog textarea{resize:vertical}#notice{z-index:20;position:fixed;bottom:18px;right:22px;background:#264534;color:white;border-radius:9px;padding:12px 18px;max-width:min(84vw,450px);box-shadow:0 4px 20px #172c1d25}.account-details{margin:15px 0;display:flex;align-items:center;gap:10px}.account-details small{display:block;color:var(--muted)}.info-note{border:1px solid #d6decb;background:#f2f5e9;border-radius:8px;padding:12px;font-size:13px;margin:12px 0}.footer-note{font:10px var(--mono);color:#7a8174;margin-top:18px}.btn-refresh{border:1px solid var(--line);background:#fff;border-radius:6px;padding:6px}.date{font-size:11px;color:#75806c;font-family:var(--mono)}
@media(min-width:1600px){.hero{min-height:315px}.hero-copy{padding-left:37px}.sidebar{width:249px}.shell{margin-left:249px}.rail .panel{padding:25px}.unit-row{padding:20px}}
@media(max-width:1190px){.sidebar{width:195px;padding-left:11px;padding-right:11px}.shell{margin-left:195px}.dash{grid-template-columns:minmax(0,1.8fr) minmax(215px,.88fr);gap:15px}.panel{padding:16px}.hero-copy{padding-left:24px}.hero{min-height:260px}.unit-row{gap:11px;padding:15px}.count{font-size:10px}.hero-time{font-size:10px}main{padding-left:23px;padding-right:23px}.doodle{width:49px;right:7px}.brand{font-size:27px}}
@media(max-width:960px) and (min-width:761px){.sidebar{width:174px}.shell{margin-left:174px}.side-topline{font-size:8px;letter-spacing:1px}.brand{font-size:24px}.brand img{width:30px;height:30px}.dash{grid-template-columns:minmax(0,1fr)}.rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.hero{min-height:245px}.hero-art{width:54%;right:0}.hero-copy{width:50%}.panel h3{font-size:17px}.doodle{display:none}.ask-panel h3{max-width:none}.day{gap:3px;font-size:8px}.day i{width:17px;height:17px}.panel{padding:13px}.days{gap:1px}}
@media(max-width:760px){.sidebar{transform:translateX(-103%);transition:transform .18s ease;width:234px;padding:25px 15px}.sidebar.open{transform:translateX(0)}.scrim:not([hidden]){display:block;position:fixed;inset:0;background:#1d30275e;z-index:7}.shell{margin-left:0}.topbar{height:52px;padding:0 18px}.mobile-menu{display:block;background:transparent;font-size:20px;padding:4px 8px 4px 0;color:var(--green)}.breadcrumbs{gap:9px}main{padding:23px 18px 36px}.page-head{margin-bottom:18px}.page-head p{font-size:14px}.dash{grid-template-columns:minmax(0,1fr);gap:17px}.rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.ask-panel{grid-column:1/-1}.ask-panel p{max-width:none}.ask-panel .doodle{width:75px;right:15px}.hero{min-height:240px}.hero-art{width:49%;right:0}.hero-copy{padding-left:22px}.hero h2{font-size:36px}.hero p{font-size:12px}.unit-row{padding:13px;gap:12px}.unit-txt strong{font-size:15px}.count{font-size:10px}.ring-arrow{width:24px;height:24px}.section-heading{margin:21px 0 12px}.dual{grid-template-columns:1fr}.section-heading h2{font-size:20px}.nav-group+.nav-group{margin-top:22px}.panel{padding:15px}.days{gap:1px}.day i{width:18px;height:18px}.day{font-size:8px}.stat b{font-size:27px}.stats-grid{gap:8px}.stats-grid .surface{padding:13px}.stat .tiny-label{font-size:8px}.unit-txt span{font-size:11px}}
@media(max-width:435px){.hero{min-height:244px}.hero-art{width:52%;right:-5.5%;top:-5%}.hero-copy{width:62%;padding-left:18px}.hero h2{font-size:31px}.hero p{max-width:22ch}.hero-kicker{font-size:8px;letter-spacing:.8px}.hero-time{font-size:9px}.hero-meta{gap:7px}.hero-btn{font-size:12px;padding:9px 10px}.tile{width:39px;height:42px}.unit-row .count{display:none}.unit-txt strong{font-size:14px}.panel h3{font-size:16px}.rail .panel{padding:12px}.week-title{font-size:24px}.day i{width:16px;height:16px}.head-kicker{font-size:9px}.unit-row .ring-arrow{border:0}.lesson-row{gap:6px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Keep the support language reachable from every route, including small screens. */
.support-picker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--green);
  flex-shrink: 0;
}
.support-picker .language-label {
  font-size: 12px;
  color: var(--muted);
}
.support-picker select {
  max-width: 14rem;
  border: 1px solid #cdd7c1;
  border-radius: 7px;
  padding: 6px 5px 6px 10px;
  background: #f1f5e9;
  color: #2c5039;
  font: 600 13px var(--ui);
  cursor: pointer;
}
.account-language-note { margin: 7px 0 19px; }
.side-topline { text-transform: uppercase; }
html:lang(vi) .hero h2 { max-width: 13ch; line-height: 1.12; }
html:lang(vi) .hero-copy { padding-block: 29px; }
html:lang(vi) :is(.nav-label,.eyebrow,.head-kicker,.tiny-label,.meta-text,.unit-txt small,.hero-kicker,.side-topline) {
  font-family: var(--ui);
  line-height: 1.5;
}
html:lang(vi) .nav-item { gap: 10px; }
html:lang(vi) .unit-txt span, html:lang(vi) .count { white-space: normal; }
@media (max-width: 760px) {
  .support-picker .language-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .support-picker { gap: 4px; }
  .support-picker select { max-width: 9rem; }
  .topbar .breadcrumbs { min-width: 0; }
  .breadcrumbs strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .hero h2 { overflow-wrap: break-word; }
  html:lang(vi) .hero-copy { padding-block: 22px; }
}
@media (max-width: 475px) {
  .topbar .crumb-home, .topbar .crumb-divider { display: none; }
}
@media (max-width: 360px) {
  .dash .rail { grid-template-columns: minmax(0,1fr); }
  html:lang(vi) .hero-copy { width: 68%; }
}

#notice { pointer-events: none; }
.topbar-tools { display:flex; flex-shrink:0; gap:16px; align-items:center; }
#feedback-button { display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:5px 10px; border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--green); font:600 12px var(--ui); }
#feedback-button:hover { background:#eef3e7; }
@media (max-width:760px) {
  .topbar { gap:6px; }
  .topbar-tools { gap:7px; }
  #feedback-button { min-height:38px; padding:4px 7px; }
}
@media (max-width:390px) {
  #feedback-icon { display:none; }
  .topbar { padding-inline:12px; }
  .topbar-tools .support-picker select { max-width:8.6rem; }
}
.learning-start{margin-top:18px;background:#eef3e6;padding:20px;border-radius:14px}.learning-start h3{font-size:18px}.learning-start p{font-size:13px;line-height:1.6;color:var(--muted);margin:8px 0}.learning-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0}.learning-stage{text-align:left;background:white;border:1px solid var(--line);border-radius:13px;padding:18px;display:flex;flex-direction:column;gap:10px;color:var(--ink)}.learning-stage.selected{border-color:var(--green);background:#f0f4e8}.learning-stage small{text-transform:uppercase;letter-spacing:.08em;font:600 10px var(--mono);color:var(--green)}.learning-stage h2{font-size:22px;line-height:1.2}.learning-stage p{font-size:13px;line-height:1.6;color:var(--muted)}.learning-stage strong{display:flex;align-items:center;justify-content:space-between;font-size:12px;margin-top:auto;padding-top:8px;color:var(--green)}.learning-book-note{font-size:14px;line-height:1.65;color:var(--muted);margin:18px 0}.learning-study{margin-top:22px;padding:18px;border:1px solid var(--line);border-radius:12px}.learning-study summary{font-weight:650;color:var(--green);cursor:pointer}.learning-study p{font-size:14px;line-height:1.65;margin-top:12px;color:var(--muted)}@media(max-width:680px){.learning-stages{grid-template-columns:1fr}.learning-stage{padding:15px}.learning-stage h2{font-size:20px}.toolbar{flex-wrap:wrap}.lesson-row .count{max-width:80px}.lesson-row .body{min-width:0;overflow-wrap:anywhere}}
