#view-learn{max-width:680px;margin:0 auto;padding:24px 24px 100px;color:#203f43;font-family:'Quicksand',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
#view-learn .learn-book{background:#e7f4ef;border:1px solid #c9e3db;border-bottom:5px solid #bdd8cf;border-radius:24px;padding:24px}
.learn-book-top{display:flex;align-items:center;justify-content:space-between;gap:16px}.learn-book h1{font-size:26px;margin:0 0 6px}.learn-book p{margin:0;color:#52716e;font-size:14px}
.learn-book select{background:#fff;color:#203f43;border:1px solid #c9ded6;border-radius:14px;min-height:44px;padding:0 12px;font:600 14px 'Quicksand',system-ui,sans-serif}
.learn-book progress{width:100%;height:12px;margin:20px 0;accent-color:#109c99;border:0;border-radius:9px;overflow:hidden}.learn-book progress::-webkit-progress-bar{background:#d0e5dd}.learn-book progress::-webkit-progress-value{background:#109c99;border-radius:9px}
.learn-primary,.learn-secondary,.learn-close{font:700 14px 'Quicksand',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;cursor:pointer;min-height:44px;border-radius:14px;padding:10px 18px}
.learn-primary{background:#109c99;color:#fff;border:1px solid #078787;border-bottom:5px solid #087b7d;width:100%}.learn-primary:active{transform:translateY(3px);border-bottom-width:2px}
.learn-secondary{background:#f0f7f3;color:#087b7d;border:1px solid #d4e4dd}.learn-path{position:relative;list-style:none;margin:32px auto 0;padding:0;max-width:360px}.learn-level{height:132px;display:flex;flex-direction:column;align-items:center;position:relative;left:var(--offset);gap:10px}.learn-connector{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.learn-connector path{fill:none;stroke:#dbe9e1;stroke-width:8;stroke-linecap:round}
.learn-node{position:relative;z-index:1;width:80px;height:80px;border-radius:50%;background:#edf5ef;color:#49716a;border:2px solid #d2e5d9;border-bottom:8px solid #bdd3c6;font:700 25px 'Quicksand',system-ui,sans-serif;cursor:pointer;transition:transform .16s}.learn-node:active{transform:translateY(4px);border-bottom-width:4px}.learn-node.is-current{background:#109c99;color:#fff;border-color:#078787;border-bottom-color:#086f72;animation:learn-pulse 3s ease-in-out infinite}.learn-node.is-complete{background:#cce7d6;color:#2e7554;border-color:#b3d4bf;border-bottom-color:#99c3aa}.learn-level>span{font-size:13px;font-weight:700}.learn-milestone{left:0;margin-top:8px}.learn-milestone .learn-node{width:100px;height:86px;border-radius:26px}.learn-note{text-align:center;font-size:13px;color:#617976;line-height:1.6}
#learn-preview{box-sizing:border-box;width:min(440px,calc(100vw - 28px));max-height:85dvh;overflow:auto;padding:24px;border:1px solid #d9e6df;border-bottom:5px solid #c9ddd3;border-radius:24px;color:#203f43;background:#fff;font-family:'Quicksand',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}#learn-preview::backdrop{background:rgba(31,58,56,.3)}#learn-preview[open]{animation:learn-open .22s ease-out}#learn-preview h2{font-size:23px;margin:0}#learn-preview p{font-size:14px;color:#5d7773;line-height:1.6}.learn-preview-head{display:flex;align-items:center;justify-content:space-between}.learn-close{padding:0;width:44px;font-size:25px;display:grid;place-items:center;border:0;background:#f0f7f3;color:#37625d}.learn-steps{display:flex;gap:12px;margin:24px 0}.learn-steps>div{flex:1;background:#f2f8f4;border-radius:18px;padding:18px 10px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}.learn-steps span{font:32px 'TWKai','LXGW WenKai TC','Noto Sans TC',serif;color:#087e80}.learn-steps strong{font-size:14px}.learn-steps small{font-size:12px;line-height:1.4;color:#637b75}.learn-steps .done{background:#dff1e6}#learn-preview details{margin-top:18px}#learn-preview summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:14px;font-weight:600}.learn-mode-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.learn-finish-art{margin:0 auto 20px;width:72px;height:72px;background:#ddf0e3;border-bottom:6px solid #b5d5c0;border-radius:50%;display:grid;place-items:center;font-size:35px;color:#298363}#learn-finish-actions{display:grid;gap:12px}
#learn-session-bar:not([hidden]){max-width:680px;margin:12px auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:#eaf5ef;border-radius:18px;color:#37615b;font:600 13px 'Quicksand',system-ui,sans-serif}body[data-mode='learn'] .global-book-selector,body[data-mode='learn'] .study-session-tracker{display:none!important}.learn-sr{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden}.learn-node:focus-visible,.learn-primary:focus-visible,.learn-secondary:focus-visible,.learn-close:focus-visible{outline:3px solid #075d67;outline-offset:5px}
@keyframes learn-pulse{50%{outline:7px solid #d5ede5}}@keyframes learn-open{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:800px){#view-learn{padding:16px 16px 100px}.learn-book-top{gap:8px}.learn-book h1{font-size:23px}#view-learn .learn-book{padding:18px}.learn-level{left:calc(var(--offset)*.7)}#learn-session-bar:not([hidden]){margin:10px 12px;font-size:12px}#learn-session-bar .learn-secondary{padding:8px 10px;white-space:nowrap}}
@media(prefers-reduced-motion:reduce){.learn-node.is-current,#learn-preview[open]{animation:none}.learn-node{transition:none}}
#view-learn{box-sizing:border-box;width:100%;display:none!important}#view-learn.active{display:block!important}body[data-mode='learn'] .study-view:not(#view-learn){display:none!important}#learn-session-bar[hidden]{display:none!important}

#view-dashboard .hf-dashboard-grid .hf-dashboard-col-right>.learn-dashboard-link{grid-column:1/-1!important;grid-row:3!important}#view-dashboard .hf-dashboard-grid .hf-dashboard-col-right>.craft-quick-practice{grid-row:4!important}
@media(max-width:800px){#view-dashboard .hf-dashboard-grid .hf-dashboard-col-right>.learn-dashboard-link,#view-dashboard .hf-dashboard-grid .hf-dashboard-col-right>.craft-quick-practice{grid-column:1!important;grid-row:auto!important}}
#btn-learn .hf-menu-text::after{content:"Books & lessons"}#btn-learn{--tile-bg:#ddf3e4;--tile-ink:#087e80}#view-learn .learn-book h1{font-weight:700}

#btn-learn .hf-menu-icon{overflow:hidden;border-radius:12px}#btn-learn .craft-nav-art{width:100%;height:100%;object-fit:contain;transform:scale(1.42)}
#learn-preview{margin:auto;inset:0;height:fit-content}#learn-preview h2{font-weight:700}.learn-level>span{position:relative;z-index:1;background:var(--bg-color,#faf9f6);padding:2px 8px;border-radius:8px}
@media(max-width:800px){#learn-preview{inset:auto 0 0;margin:auto auto 12px;max-height:calc(100dvh - 80px);width:calc(100vw - 24px)}}
@media(max-width:800px){body[data-mode='learn'] .craft-mobile-nav.craft-nav-hidden{transform:translateY(0)!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important}}
/* Keep the supplied artwork stable across hover, focus and selection. */
#sidebar #btn-learn .hf-menu-icon .craft-nav-art,#sidebar #btn-learn:hover .hf-menu-icon .craft-nav-art,#sidebar #btn-learn:focus-visible .hf-menu-icon .craft-nav-art,#sidebar #btn-learn.active .hf-menu-icon .craft-nav-art{transform:scale(1.42)!important;filter:none!important;opacity:1!important;transition:none!important}
#view-learn{padding-top:12px}.learn-path{margin-top:24px}.learn-level{height:116px}
.learn-example{display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:5px;align-items:center;background:#fff;border:1px solid #dce9e2;border-bottom:4px solid #d6e6dc;border-radius:18px;padding:16px;margin:0 0 20px}
.learn-example-word{grid-row:1/3;font:38px/1.2 'TWKai','LXGW WenKai TC','Noto Sans TC',serif;color:#203f43;max-width:150px;overflow-wrap:anywhere}
.learn-example-pinyin{font-size:13px;color:#678079}.learn-example-meaning{font-size:16px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
@media(max-width:800px){#view-learn{padding-top:8px}.learn-example-word{font-size:34px;max-width:120px}}
.learn-level>span{display:flex;align-items:center;gap:6px;font-size:12px;white-space:nowrap}.learn-status{background:#e0f1e9;color:#087a7b;border-radius:8px;padding:3px 7px;font-size:10px;font-weight:700}
.learn-rail[hidden]{display:none!important}.learn-rail{box-sizing:border-box;position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;margin:16px 0;background:#fff;border:1px solid #dce9e2;border-bottom:3px solid #d2e3d8;border-radius:16px}
.learn-rail select{font:700 14px 'Quicksand',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#203f43;min-height:44px;padding:0 10px;background:#f0f7f3;border:0;border-radius:10px}.learn-rail-jump{min-height:44px;padding:0 12px;font:600 13px 'Quicksand',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#087e80;background:none;border:0;border-radius:10px;cursor:pointer}.learn-rail-jump:focus-visible{outline:3px solid #075d67;outline-offset:2px}
@media(max-width:800px){.learn-rail{padding:6px 10px}.learn-status{font-size:10px}}

.learn-level{height:128px}.learn-steps img{width:40px;height:40px;object-fit:contain;display:block}.learn-steps span{min-height:40px}.learn-example-meaning{max-height:84px;overflow:auto}

.learn-rail{width:100%;min-width:0;box-shadow:none}.learn-rail-jump{overflow-wrap:anywhere}@media(max-width:380px){.learn-rail{gap:6px}.learn-rail-jump{padding:0 6px}}

/* Blend the supplied white canvas into the navigation surface. */
#sidebar #btn-learn .hf-menu-icon{background:transparent!important;box-shadow:none!important;mix-blend-mode:multiply}#sidebar #btn-learn .craft-nav-art,.craft-mobile-nav [data-craft-mode="learn"] .craft-nav-art{mix-blend-mode:multiply}.craft-mobile-nav [data-craft-mode="learn"]{overflow:hidden}.craft-mobile-nav [data-craft-mode="learn"] .craft-nav-art{transform:scale(1.42)!important;filter:none!important;transition:none!important}