/* Manrope (OFL, self-hosted) and the practice-guide pages. Colours come from the tokens in styles.css. */
@font-face{font-family:Manrope;font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/manrope-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Manrope;font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/manrope-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Manrope;font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/manrope-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/manrope-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:Manrope;font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/manrope-greek.woff2') format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:Manrope;font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/manrope-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}

/* ---------- Practice guides ---------- */
.lesson-page{container-type:inline-size}
.lesson-page .header{border-bottom:1px solid var(--line-soft)}
.lesson-language{display:flex;flex-wrap:wrap;gap:0 22px;flex:0 1 auto!important}
.lesson-language a{display:inline-flex;align-items:center;min-height:44px;font-size:.9375rem;color:var(--muted)}
.lesson-language [aria-current=page]{color:var(--ink);font-weight:650;text-decoration:underline;text-underline-offset:5px}
.lesson-layout{display:grid;grid-template-columns:minmax(0,46rem) minmax(0,16rem);justify-content:space-between;gap:clamp(32px,5vw,72px);align-items:start;padding-block:36px 64px}
.lesson-article{min-width:0}
.lesson-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:0 14px;font-size:.875rem;color:var(--muted)}
.lesson-breadcrumb a{display:inline-flex;align-items:center;min-height:44px}
.lesson-article .eyebrow{margin:24px 0 0}
.lesson-article h1{font-size:clamp(2.1rem,3.6vw,3.25rem);font-weight:700;line-height:1.15;letter-spacing:-.035em;margin-block:14px 20px;max-width:24ch;text-wrap:balance}
html[lang^=zh] .lesson-article h1{letter-spacing:-.01em;line-height:1.35;max-width:none}
.lesson-lead{font-size:1.125rem;line-height:1.85;color:var(--ink);margin-bottom:16px}
.lesson-meta{display:flex;flex-wrap:wrap;gap:4px 22px;font-size:.875rem;line-height:1.8;color:var(--muted);margin-bottom:28px}
.lesson-setup{padding:22px 24px;margin-bottom:36px;background:var(--panel);border:1px solid var(--line-soft);border-radius:20px}
.lesson-setup h2{font-size:1.0625rem;letter-spacing:0}
.lesson-setup dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));gap:16px;margin:18px 0 0}
.lesson-setup dl>div{min-width:0}
.lesson-setup dt{font-size:.8125rem;color:var(--muted);margin-bottom:4px;overflow-wrap:anywhere;hyphens:auto}
.lesson-setup dd{margin:0;font-size:1.0625rem;font-weight:600;line-height:1.5;overflow-wrap:anywhere;hyphens:auto}
.lesson-quick-practice,.lesson-action{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 22px;margin-top:18px;border-radius:14px;background:var(--accent);color:var(--accent-ink);font-size:1rem;font-weight:650;line-height:1.5;text-align:center}
.lesson-quick-practice:hover,.lesson-action:hover{color:var(--accent-ink);text-decoration:none;filter:brightness(1.08)}
.lesson-action{display:flex;margin-top:22px}
.lesson-mobile-contents{display:none;margin-bottom:28px;border-block:1px solid var(--line-soft)}
.lesson-mobile-contents summary{min-height:48px;padding-block:12px;cursor:pointer;font-weight:600;line-height:1.6}
.lesson-mobile-contents nav{display:flex;flex-direction:column;padding-bottom:10px}
.lesson-mobile-contents a{display:flex;align-items:center;min-height:44px;padding-block:6px;line-height:1.6}
.lesson-section{margin-bottom:40px;scroll-margin-top:24px}
.lesson-section h2,.lesson-references h2,.lesson-related h2,.lesson-app h2{font-size:1.5rem;line-height:1.4;letter-spacing:-.02em;margin-bottom:14px}
.lesson-section p,.lesson-steps li{font-size:1.0625rem;line-height:1.9}
.lesson-section p{margin-bottom:16px}
.lesson-steps{margin:14px 0;padding-inline-start:1.5rem}
.lesson-steps li{margin-bottom:14px;padding-inline-start:6px}
.lesson-steps li::marker{color:var(--muted);font-variant-numeric:tabular-nums}
.count-example{display:flex;flex-wrap:wrap;gap:0 12px;margin:22px 0 8px;border-block:1px solid var(--line)}
.count-example span{flex:1 1 7rem;min-width:max-content;padding-block:14px;text-align:center;font-size:1.1875rem;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.lesson-section .count-caption{font-size:.875rem;color:var(--muted)}
.lesson-sidebar{position:sticky;top:24px;margin-top:16px;min-width:0}
.lesson-sidebar nav{display:flex;flex-direction:column;border-top:1px solid var(--line);padding-top:6px}
.lesson-sidebar nav p{font-size:.8125rem;font-weight:650;letter-spacing:.06em;color:var(--muted);margin:10px 0}
.lesson-sidebar nav a{min-height:44px;padding-block:10px;font-size:.9375rem;line-height:1.6;border-bottom:1px solid var(--line-soft)}
.lesson-boundary{font-size:.8125rem;line-height:1.75;color:var(--muted);margin-top:16px}
.lesson-references{margin-top:48px;padding-top:24px;border-top:1px solid var(--line-soft)}
.lesson-references p{font-size:.9375rem;line-height:1.8;color:var(--muted)}
.lesson-references ul{padding-inline-start:1.25rem}
.lesson-references a{display:inline-block;min-height:44px;padding-block:8px;line-height:1.7;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--line)}
.lesson-related{margin-top:36px;padding-top:24px;border-top:1px solid var(--line-soft)}
.lesson-related-link{display:flex;align-items:baseline;gap:18px;min-height:48px;padding-block:12px;line-height:1.6;border-bottom:1px solid var(--line-soft)}
.lesson-app{margin-top:36px;padding:24px 26px;background:var(--panel);border:1px solid var(--line-soft);border-radius:20px}
.lesson-app .product-label{font-size:.75rem;font-weight:650;letter-spacing:.12em;color:var(--muted);margin-bottom:10px}
.lesson-app p:not(.product-label){color:var(--muted);line-height:1.75}
.lesson-app a{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;font-weight:650;text-decoration:underline;text-underline-offset:5px}
.lesson-page p,.lesson-page li,.lesson-page dd,.lesson-page a{overflow-wrap:anywhere}

/* ---------- Support and privacy (moved from GitHub Pages, 2026-10-02) ---------- */
.legal-page .header{border-bottom:1px solid var(--line-soft)}
.legal-page .header nav a[aria-current=page]{color:var(--ink);text-decoration:underline;text-underline-offset:5px}
.legal{max-width:46rem;padding-block:36px 64px}
.legal h1{font-size:clamp(2rem,4vw,2.75rem);font-weight:700;line-height:1.25;letter-spacing:-.02em;margin:0 0 10px}
.legal h1 span{color:var(--muted)}
.legal h2{font-size:1.375rem;letter-spacing:-.01em;margin:36px 0 10px}
.legal h3{font-size:1.0625rem;margin:24px 0 6px}
.legal p{line-height:1.85;margin:0 0 14px;overflow-wrap:anywhere}
.legal a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line)}
.legal .meta{font-size:.9375rem;color:var(--muted)}
.legal-language{display:flex;flex-wrap:wrap;gap:0 22px;margin:8px 0 12px}
.legal-language a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.legal-contact{margin:20px 0;padding:16px 20px;background:var(--panel);border:1px solid var(--line-soft);border-radius:16px}
.legal-contact p{margin:0}
.legal .email{font-weight:650;overflow-wrap:anywhere}
.legal-translation{margin-top:48px;padding-top:8px;border-top:1px solid var(--line-soft)}
.legal section{scroll-margin-top:16px}
@media (max-width:850px){
  .lesson-layout{grid-template-columns:minmax(0,1fr);gap:16px;padding-top:24px}
  .lesson-mobile-contents{display:block}
  .lesson-sidebar{position:static;margin-top:0}
  .lesson-sidebar nav{display:none}
  .lesson-sidebar .lesson-action{margin-top:0}
}
@media (max-width:600px){
  .lesson-article h1{font-size:2.1rem}
  .lesson-lead{font-size:1.0625rem}
  .lesson-setup{padding:18px}
  .lesson-app{padding:20px}
}
@container (max-width:64em){
  .lesson-layout{grid-template-columns:minmax(0,1fr);gap:16px}
  .lesson-mobile-contents{display:block}
  .lesson-sidebar{position:static}
  .lesson-sidebar nav{display:none}
}