/* Standalone language library and one scoped homepage entry. */
.learn-page { --learn-paper:#f7f3e8; --learn-white:#fffefa; --learn-ink:#242722; --learn-indigo:#263d57; --learn-red:#bd4b36; --learn-yellow:#e3c157; --learn-sage:#b8c1a5; --learn-line:#dcdacf; --learn-muted:#686c64; margin:0; background:var(--learn-paper); color:var(--learn-ink); font:400 16px/1.8 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans","Yu Gothic","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased; }
.learn-page *, .learn-page *::before, .learn-page *::after { box-sizing:border-box; }
.learn-page [hidden] { display:none !important; }
.learn-page a { color:inherit; text-decoration:none; }
.learn-page button { font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.learn-page button:disabled { cursor:wait; }
.learn-page :is(a,button):focus-visible { outline:2px solid var(--learn-red); outline-offset:5px; }
.learn-page :is(h1,h2,p) { margin:0; }
.learn-page ::selection { background:#e7cf9b; color:var(--learn-ink); }
.learn-container { width:100%; max-width:1280px; margin-inline:auto; padding-inline:clamp(22px,4.2vw,54px); }
.learn-skip { position:fixed; top:-100px; left:20px; z-index:10; padding:10px 16px; background:var(--learn-indigo); color:white !important; }
.learn-skip:focus { top:12px; }
.learn-header { border-bottom:1px solid var(--learn-line); }
.learn-header__inner { min-height:94px; display:flex; justify-content:space-between; align-items:center; gap:24px; }
.learn-home { display:inline-flex; align-items:center; gap:15px; min-height:44px; font-size:13px; letter-spacing:.02em; }
.learn-home > span:first-child { font-size:20px; color:var(--learn-red); }
.learn-wordmark { font-size:12px; font-weight:650; letter-spacing:.16em; color:var(--learn-indigo) !important; }
.learn-languages { display:flex; align-items:center; gap:8px; font-size:12px; }
.learn-languages > span { color:#b6b7ad; }
.learn-languages button { border:0; border-bottom:1px solid transparent; background:none; padding:10px 2px; min-height:44px; color:var(--learn-muted); }
.learn-languages button[aria-pressed=true] { color:var(--learn-red); border-bottom-color:var(--learn-red); }
#learning-main { outline:0; }
.learn-intro { padding-block:63px 44px; border-bottom:1px solid var(--learn-ink); }
.learn-kicker { display:flex; gap:19px; align-items:center; color:var(--learn-indigo); font-size:11px; font-weight:550; letter-spacing:.14em; }
.learn-index { display:inline-flex; justify-content:center; align-items:center; width:35px; height:35px; background:var(--learn-indigo); color:var(--learn-paper); font-size:12px; letter-spacing:.02em; }
.learn-intro h1 { margin-top:22px; max-width:900px; font-size:clamp(42px,5.3vw,68px); font-weight:600; line-height:1.25; letter-spacing:-.045em; text-wrap:balance; }
.learn-page:lang(en) .learn-intro h1 { font-family:Georgia,"Times New Roman",serif; font-weight:400; }
.learn-intro__bottom { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-top:26px; }
.learn-intro__bottom > p:first-child { max-width:45em; color:var(--learn-muted); font-size:15px; line-height:1.9; }
.learn-update { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:4px 8px; flex:0 0 auto; max-width:260px; font-size:11px; line-height:1.8; color:var(--learn-muted); }
.learn-update__dot { width:6px; height:6px; background:var(--learn-red); }
#learning-updated { flex-basis:100%; text-align:right; }
.learn-library { padding-block:28px 100px; min-height:470px; }
.learn-library__top { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.learn-filters { display:flex; flex-wrap:wrap; gap:8px; }
.learn-filters button { display:inline-flex; align-items:center; gap:18px; border:1px solid var(--learn-line); background:transparent; padding:10px 16px; min-height:46px; font-size:13px; line-height:1.5; transition:background .15s,color .15s,border-color .15s; }
.learn-filters button:hover { border-color:var(--learn-indigo); }
.learn-filters button[aria-pressed=true] { background:var(--learn-indigo); color:var(--learn-paper); border-color:var(--learn-indigo); }
.learn-filter-count { font-size:10px; font-variant-numeric:tabular-nums; opacity:.7; }
.learn-help { color:var(--learn-muted); font-size:11px; line-height:1.8; }
.learn-results { min-height:20px; margin-block:21px 19px !important; font-size:11px; line-height:1.8; letter-spacing:.035em; color:var(--learn-muted); }
.learn-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px 25px; align-items:start; }
.learn-card { min-width:0; border:1px solid #dedfd6; background:var(--learn-white); box-shadow:0 3px 15px #263d5705; perspective:1100px; }
.learn-card__front { display:block; width:100%; padding:0; border:0; background:transparent; text-align:left; transform-origin:center; }
.learn-card__front:focus-visible { outline-offset:4px !important; }
.learn-card__image { display:flex; position:relative; width:100%; aspect-ratio:1.3; align-items:center; justify-content:center; overflow:hidden; background:#f0f0e8; border-bottom:1px solid #e9e8e0; }
.learn-card__image img { display:block; width:100%; height:100%; object-fit:contain; transition:transform .45s ease; }
@media (hover:hover) { .learn-card__front:hover .learn-card__image img { transform:scale(1.025); } }
.learn-card__image--type { color:var(--learn-indigo); background:#edf0ee; }
.learn-card__image--type::before { content:""; position:absolute; left:14%; top:15%; width:69%; height:69%; border:1px solid currentColor; opacity:.17; }
.learn-card__image--type::after { content:""; position:absolute; top:18%; right:16%; width:12%; height:13%; background:var(--learn-yellow); }
.learn-card__image--en { background:#f4eee2; color:var(--learn-red); }
.learn-card__image--en::after { background:var(--learn-sage); }
.learn-card__image--zh { background:#edf0e7; color:var(--learn-indigo); }
.learn-card__image--zh::after { background:#dec2b4; }
.learn-card__glyph { position:relative; z-index:1; font-family:Georgia,"Songti SC","Yu Mincho",serif; font-size:clamp(60px,7vw,106px); font-weight:400; line-height:1; letter-spacing:-.04em; }
.learn-card__image-line { position:absolute; left:14%; bottom:11%; font-size:8px; letter-spacing:.12em; opacity:.6; }
.learn-card__front-text { display:block; padding:23px 24px 21px; }
.learn-card__meta { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:6px 12px; font-size:10px; line-height:1.8; }
.learn-card__language { font-size:11px; font-weight:550; letter-spacing:.025em; color:var(--learn-indigo); }
.learn-card--en .learn-card__language { color:var(--learn-red); }
.learn-card--zh .learn-card__language { color:#667348; }
.learn-card__date { color:var(--learn-muted); font-size:10px; font-weight:400; letter-spacing:0; }
.learn-card__title { display:block; margin-top:16px !important; font-size:23px; line-height:1.55; font-weight:550; letter-spacing:-.02em; overflow-wrap:anywhere; }
.learn-card__summary { display:block; margin-top:13px !important; font-size:14px; line-height:1.95; font-weight:400; color:var(--learn-muted); white-space:pre-line; overflow-wrap:anywhere; }
.learn-card__turn-hint { display:flex; justify-content:space-between; gap:12px; align-items:center; padding-top:17px; margin-top:24px; border-top:1px solid var(--learn-line); color:var(--learn-indigo); font-size:11px; font-weight:500; }
.learn-card__turn-hint > span { font-size:20px; line-height:1; }
.learn-card__back { padding:23px 24px 25px; min-height:420px; border-top:3px solid var(--learn-indigo); transform-origin:center; }
.learn-card--en .learn-card__back { border-top-color:var(--learn-red); }
.learn-card--zh .learn-card__back { border-top-color:#84926b; }
.learn-card__back-top { display:flex; align-items:center; justify-content:space-between; gap:13px; padding-bottom:19px; border-bottom:1px solid var(--learn-line); }
.learn-card__close { display:inline-flex; align-items:center; gap:8px; min-height:40px; border:1px solid var(--learn-line); background:transparent; padding:7px 10px; font-size:11px; line-height:1.5; }
.learn-card__close:hover { background:var(--learn-paper); border-color:var(--learn-indigo); }
.learn-card__close > span { font-size:17px; }
.learn-card__detail-label { margin-top:25px !important; color:var(--learn-muted); font-size:10px; letter-spacing:.08em; }
.learn-card__back-title { margin-top:12px !important; font-size:24px; line-height:1.55; font-weight:550; letter-spacing:-.025em; overflow-wrap:anywhere; }
.learn-card__back-image { width:100%; margin-block:23px; }
.learn-card__back-image img { display:block; width:100%; height:auto; }
.learn-card__body { margin-top:23px !important; font-size:15px; line-height:2.05; white-space:pre-wrap; overflow-wrap:anywhere; }
.learn-card__body--empty { color:var(--learn-muted); }
.learn-card__back-bottom { display:flex; flex-direction:column; gap:6px; margin-top:33px; padding-top:16px; border-top:1px solid var(--learn-line); color:var(--learn-muted); font-size:10px; line-height:1.9; }
.learn-state { display:flex; flex-direction:column; align-items:flex-start; padding:53px 0 55px; max-width:640px; }
.learn-state__mark { display:grid; place-items:center; width:49px; height:49px; margin-bottom:24px; background:#e8e6ed; color:var(--learn-indigo); font-size:24px; }
.learn-state h2 { font-size:26px; font-weight:500; line-height:1.65; letter-spacing:-.025em; }
.learn-state p { max-width:36em; margin-top:15px; font-size:14px; line-height:1.95; color:var(--learn-muted); }
.learn-retry { min-height:44px; border:1px solid var(--learn-indigo); background:var(--learn-indigo); color:var(--learn-paper) !important; padding:10px 20px; margin-top:25px; font-size:13px !important; }
.learn-footer { border-top:1px solid var(--learn-indigo); }
.learn-footer__inner { display:flex; justify-content:space-between; flex-wrap:wrap; gap:15px 25px; padding-block:26px 32px; color:var(--learn-muted); font-size:10px; line-height:1.8; }
.learn-footer__inner > span:first-child { letter-spacing:.1em; color:var(--learn-indigo); }
.learn-noscript { padding:25px; text-align:center; font-size:14px; }
/* Homepage-only entry. Existing topic routing never sees a data-category-link. */
#home-sections #themes > a[data-learning-entry] { background:#ded9e7; color:#343047; }
#home-sections #themes > a[data-learning-entry] .theme-label { font-weight:550; }
#home-sections #themes > a[data-learning-entry] .theme-english { color:inherit; }
#home-sections #themes > a[data-learning-entry]:focus-visible { outline:2px solid #263d57; outline-offset:4px; }
#home-sections #themes > a[data-reading-entry] { background:#e9dfca; color:#453d2d; }
#home-sections #themes > a[data-reading-entry] .theme-label { font-weight:550; }
#home-sections #themes > a[data-reading-entry] .theme-english { color:inherit; }
#home-sections #themes > a[data-reading-entry]:focus-visible { outline:2px solid #263d57; outline-offset:4px; }
@media (min-width:761px) { #home-sections #themes.kk-has-reading-entry { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:1050px) { .learn-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:25px 23px; } .learn-intro__bottom { align-items:flex-start; } .learn-help { max-width:230px; text-align:right; } }
@media (max-width:700px) {
  .learn-header__inner { min-height:79px; gap:15px; flex-wrap:wrap; padding-block:13px; }
  .learn-wordmark { display:none; }
  .learn-home { font-size:12px; gap:10px; }
  .learn-languages { gap:5px; font-size:11px; }
  .learn-intro { padding-block:39px 32px; }
  .learn-intro h1 { font-size:43px; margin-top:23px; }
  .learn-intro__bottom { flex-direction:column; align-items:flex-start; gap:20px; margin-top:23px; }
  .learn-intro__bottom > p:first-child { font-size:14px; }
  .learn-update { max-width:none; justify-content:flex-start; gap:5px 8px; font-size:10px; }
  #learning-updated { flex-basis:auto; margin-left:9px; text-align:left; }
  .learn-library { padding-block:23px 64px; min-height:430px; }
  .learn-library__top { flex-direction:column; align-items:flex-start; gap:17px; }
  .learn-filters { gap:7px; width:100%; }
  .learn-filters button { padding:11px 12px; gap:12px; font-size:12px; flex:1 1 auto; justify-content:center; }
  .learn-help { text-align:left; max-width:none; font-size:11px; }
  .learn-results { margin-block:19px 17px !important; }
  .learn-grid { grid-template-columns:1fr; gap:25px; }
  .learn-card__image { aspect-ratio:1.38; }
  .learn-card__glyph { font-size:96px; }
  .learn-card__front-text, .learn-card__back { padding-inline:24px; }
  .learn-card__title { font-size:25px; }
  .learn-card__summary { font-size:14px; }
  .learn-card__body { font-size:16px; }
  .learn-card__back { min-height:390px; }
  .learn-state { padding-block:37px 45px; }
  .learn-state h2 { font-size:24px; }
  .learn-footer__inner { padding-block:24px 28px; font-size:9px; }
}
@media (max-width:360px) { .learn-container { padding-inline:18px; } .learn-languages { gap:3px; } .learn-home { gap:7px; } .learn-filters button { padding-inline:9px; gap:8px; } }
@media (prefers-reduced-motion:reduce) { .learn-page *, .learn-page *::before, .learn-page *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; } }
@media print { .learn-header,.learn-filters,.learn-help,.learn-card__turn-hint,.learn-card__close,.learn-skip,.learn-footer { display:none !important; } .learn-grid { display:block; } .learn-card { box-shadow:none; break-inside:avoid; margin-bottom:24px; } .learn-card__front[hidden] { display:none !important; } .learn-card__back[hidden] { display:block !important; } .learn-card__body { color:black; } }
/* Owner-only category controls sit after the public learning filters. */
.learn-page .learn-filters .learn-add-language { border-style:dashed; color:var(--learn-muted); background:transparent; gap:0; }
.learn-page .learn-filters .learn-add-language:hover { color:var(--learn-ink); }
.learn-language-editor { margin-top:25px; padding:23px 25px; max-width:760px; border:1px solid var(--learn-line); background:var(--learn-white); }
.learn-language-editor__heading { display:flex; align-items:center; justify-content:space-between; gap:22px; }
.learn-language-editor__heading h2 { font-size:18px; font-weight:500; }
.learn-language-editor__heading button { min-height:40px; padding:5px 0 5px 15px; border:0; background:none; font-size:12px; color:var(--learn-muted); }
.learn-language-editor__help { margin-top:8px !important; color:var(--learn-muted); font-size:12px; line-height:1.9; }
#learning-language-form { display:flex; flex-wrap:wrap; align-items:flex-start; gap:17px; margin-top:21px; }
#learning-language-form label { display:flex; flex:1 1 170px; flex-direction:column; gap:7px; min-width:0; font-size:12px; line-height:1.8; }
#learning-language-form input { width:100%; min-height:44px; padding:9px 11px; border:1px solid var(--learn-line); border-radius:0; background:var(--learn-white); color:var(--learn-ink); font:inherit; font-size:14px; }
#learning-language-form input:focus-visible { outline:2px solid var(--learn-indigo); outline-offset:2px; }
#learning-language-form small { font-size:10px; color:var(--learn-muted); }
.learn-language-submit { min-height:44px; margin-top:29px; padding:9px 17px; border:1px solid var(--learn-indigo); background:var(--learn-indigo); color:var(--learn-white) !important; font-size:12px !important; }
.learn-language-feedback { margin-top:15px !important; color:var(--learn-red); font-size:12px; line-height:1.9; }
.learn-language-feedback:empty { display:none; }
.learn-language-login { display:inline-flex; min-height:40px; align-items:center; color:var(--learn-indigo) !important; font-size:12px; text-decoration:underline !important; text-underline-offset:4px; }
.learn-language-result { color:var(--learn-muted); font-size:12px; line-height:1.9; margin-top:18px !important; }
.learn-language-result:empty { display:none; }
@media (max-width:700px) { .learn-language-editor { padding:20px; } #learning-language-form { display:block; } #learning-language-form label + label { margin-top:18px; } .learn-language-submit { margin-top:20px; } }
.learn-page .learn-filters button { min-width:0; max-width:100%; }
.learn-page .learn-filters button > span:first-child { min-width:0; overflow-wrap:anywhere; text-align:left; }
.learn-page .learn-filter-count { flex-shrink:0; }
.learn-language-result,.learn-language-feedback { overflow-wrap:anywhere; }