*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;line-height:1.75}a{text-underline-offset:5px}a:hover{color:var(--ink)}.skip{position:absolute;left:20px;top:-100px;z-index:10;background:var(--card);padding:12px}.skip:focus{top:10px}.preview-strip{display:flex;justify-content:space-between;gap:16px;padding:10px max(24px,calc((100% - 1240px)/2));font-size:12px;background:var(--card);color:var(--muted);border-bottom:1px solid var(--line)}.preview-strip a{color:var(--muted)}.masthead{max-width:1320px;margin:auto;padding:32px 40px;display:flex;align-items:center;justify-content:space-between;gap:36px;border-bottom:1px solid var(--line)}.wordmark{font-weight:750;font-size:32px;color:var(--ink);text-decoration:none;line-height:1.25;white-space:nowrap}.wordmark span{display:block;margin-top:9px;font-size:11px;font-weight:400;letter-spacing:.1em;color:var(--muted)}nav{display:flex;flex-wrap:wrap;gap:24px}nav a{font-size:14px;text-decoration:none;color:var(--muted);padding:8px 0;border-bottom:2px solid transparent}nav a[aria-current]{color:var(--ink);border-color:var(--accent)}main{max-width:1240px;margin:auto;padding:0 32px 80px}.main-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:center;padding:88px 0 72px}.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:12px;font-weight:700;color:var(--warm);margin:0 0 22px}h1,h2,h3{line-height:1.15;letter-spacing:-.035em;margin:0 0 26px;font-weight:650}h1{font-size:clamp(42px,5.5vw,76px);max-width:800px}h2{font-size:clamp(28px,3.5vw,44px)}h3{font-size:24px}.source-copy{color:var(--muted);margin:0 0 22px;max-width:78ch;overflow-wrap:anywhere}.source-copy strong{color:var(--ink)}.source-copy .p{display:block;margin:0 0 18px}.source-copy .p:last-child{margin-bottom:0}.hero-art{margin:0;background:var(--card);border:1px solid var(--line);border-radius:48% 48% 16px 16px;padding:76px 36px 24px;text-align:center}.hero-art .artwork{border:0;background:transparent}.hero-art img{max-height:250px;object-fit:contain}.hero-art figcaption{font-size:13px;margin:20px 0 0}.actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}.button{display:inline-block;border:1px solid var(--line);border-radius:8px;padding:12px 20px;color:var(--ink);text-decoration:none;font-size:14px;font-weight:600;cursor:pointer;line-height:1.5}.primary{background:var(--accent);border-color:var(--accent);color:white}.primary:hover{background:#a62c40;color:white}.contents{padding:18px 0;border-block:1px solid var(--line);justify-content:space-between;gap:16px}.chapter{padding:64px 0;border-bottom:1px solid var(--line)}.chapter-heading{max-width:900px;margin-bottom:32px}.chapter-heading .eyebrow:empty{display:none}.columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:36px;align-items:start}.columns>div{min-width:0}.artwork{display:block;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#fff;margin:0 0 24px}.artwork img{display:block;width:100%;height:auto;max-height:680px;object-fit:contain}.text-link{display:inline-block;margin-top:16px}.resource-links{display:flex;flex-wrap:wrap;gap:20px;margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}.review-note{font-size:13px;color:var(--muted);background:var(--card);border-left:2px solid var(--warm);padding:16px 20px;margin:24px 0}.review-note summary{cursor:pointer;color:var(--ink)}.review-note p:last-child{margin-bottom:0}.page-title{padding:76px 0 48px;border-bottom:1px solid var(--line)}.page-title .source-copy{font-size:20px;max-width:760px}.page-title p{color:var(--muted)}.narrow{max-width:820px}.shop-link{display:block}.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:60px}form label{display:block;font-size:14px;margin-bottom:20px}form label span{color:var(--muted)}input,textarea{display:block;width:100%;padding:12px 14px;margin-top:7px;border:1px solid var(--line);border-radius:6px;font-size:16px}textarea{resize:vertical}.confirmation{background:var(--card);padding:32px;border:1px solid var(--line);border-radius:12px}[hidden]{display:none!important}footer{max-width:1240px;margin:auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding:44px 32px 60px;font-size:13px}footer a{display:block;margin-bottom:10px}footer p{color:var(--muted)}footer .wordmark{font-size:26px}#community>.source-copy{max-width:none}#community .columns{margin-top:32px}[id="2014"]>.artwork{max-width:850px}@media(max-width:850px){.masthead{align-items:flex-start;flex-direction:column;padding:24px}.masthead nav{gap:16px}.main-hero{gap:36px;grid-template-columns:1fr;padding:48px 0}.hero-art{max-width:540px;width:100%;justify-self:center}.chapter{padding:44px 0}.page-title{padding-top:48px}.contact-layout{grid-template-columns:1fr;gap:24px}}@media(max-width:520px){main{padding-inline:20px}.preview-strip{padding:10px 20px;font-size:11px}.masthead{padding:24px 20px}.masthead nav{gap:14px}nav a{font-size:13px}.hero-art{padding:54px 24px 20px}.contents{justify-content:flex-start}.columns{gap:22px}.source-copy{font-size:15px}footer{grid-template-columns:1fr 1fr;padding:32px 20px;gap:24px}footer>div:first-child{grid-column:1/-1}.page-title .source-copy{font-size:17px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

#preview-fields{border:0;padding:0;margin:0;min-width:0}

@font-face {
  font-family: NdebeRounded2026;
  src: url("font/NdebeRounded.woff?v=e438003eafc8") format("woff");
  font-display: swap;
}
.hero-ndebe {
  display: block;
  font-family: NdebeRounded2026, sans-serif;
  font-size: clamp(100px, 15vw, 200px);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.5;
  white-space: nowrap;
}

/* Live reference charts use the same characters as the typing page. */
#script > .columns { grid-template-columns: 1fr; }
.live-script-charts { width: 100%; min-width: 0; }
.chart-scroll { overflow-x: auto; margin: 0 0 32px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.live-script-charts table { width: 100%; border-collapse: collapse; text-align: center; }
.live-script-charts caption { text-align: left; padding: 20px; font-size: 22px; font-weight: 600; }
.live-script-charts th, .live-script-charts td { padding: 12px; white-space: nowrap; border-top: 1px solid var(--line); }
.live-script-charts th { font-weight: 600; color: var(--muted); }
.chart-glyph { font: 400 38px/1.5 NdebeRounded2026, sans-serif; font-synthesis: none; }
.numeral-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 12px; }
.numeral-cell { display: flex; flex-direction: column; align-items: center; padding: 12px 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.numeral-cell > span:last-child { color: var(--muted); font-size: 13px; }
@media(max-width:600px) { .numeral-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .live-script-charts th, .live-script-charts td { padding: 10px; } }

.teaching-card { margin: 0 0 24px; padding: 24px 18px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; text-align: center; }
.teaching-card figcaption { font-size: 15px; font-weight: 600; margin-bottom: 20px; }
.teaching-glyph { display: inline-block; font: 400 80px/1.5 NdebeRounded2026, sans-serif; font-synthesis: none; white-space: nowrap; }
.component-key { margin: 16px 0 0; font-size: 13px; text-align: left; }
.component-key div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
.component-key dt { font-weight: 600; }.component-key dd { margin: 0; color: var(--muted); }
.teaching-steps, .numeral-example { display: flex; justify-content: center; align-items: center; gap: 12px; }
.teaching-steps > div { flex: 1; min-width: 0; }.teaching-card small { display: block; font-size: 12px; color: var(--muted); }
.standalone-vowel { display: flex; align-items: center; justify-content: center; gap: 18px; font-size: 13px; margin: 20px 0 0; border-top: 1px solid var(--line); padding-top: 12px; }
.standalone-vowel .teaching-glyph { font-size: 44px; }.numeral-example .teaching-glyph { font-size: 54px; }

.teaching-next { margin: 14px 0; color: var(--muted); font-size: 22px; }

/* Press and dissemination */
.press-list{display:grid;gap:2rem}.press-entry{padding:1.5rem 0;border-top:1px solid var(--border,#514857)}.press-entry h3{margin:.5rem 0;font-size:clamp(1.2rem,2vw,1.65rem);overflow-wrap:anywhere}.press-entry p{max-width:70ch}.dissemination-press{margin:2rem 0 3rem}.dissemination-press li{margin:.8rem 0}

/* Live How it works diagrams. */
.undefined-symbol{display:inline-block;width:.8em;height:1em;vertical-align:-.12em;margin-left:.2em}
.lesson-glyph{display:block;font:400 clamp(52px,7vw,96px)/1.7 NdebeRounded2026,sans-serif;font-synthesis:none;white-space:nowrap}
.lesson-steps{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.lesson-steps>div{flex:1 1 150px;max-width:240px;min-width:0}
.lesson-steps p{font-size:15px;color:var(--muted)}
.lesson-arrow{font-size:24px}.lesson-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
#numbers .numeral-grid .lesson-glyph{font-size:40px}
@media(max-width:600px){.lesson-values{grid-template-columns:1fr}.lesson-steps{flex-direction:column}.lesson-steps>div{flex:auto;width:100%;max-width:none}.lesson-arrow{transform:rotate(90deg)}}

.lesson-values .lesson-glyph{font-size:clamp(32px,4vw,56px)}
.place-note{font-weight:400;color:var(--muted)}

#numbers .numeral-grid + h3 { margin-top: 40px; }

.numeral-divider { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }

/* Review pass: keyboard-visible chart focus and comfortable navigation targets. */
.chart-scroll:focus-visible{outline:3px solid var(--warm);outline-offset:3px}
.chart-help{color:var(--muted);font-size:14px}
.masthead nav a,.contents a,.resource-links a,footer a{min-height:44px;display:inline-flex;align-items:center}
footer a{display:flex;width:fit-content;max-width:100%;overflow-wrap:anywhere}
@media(max-width:600px){.lesson-steps{gap:8px}.lesson-steps p{margin:4px 0 12px}.lesson-glyph{line-height:1.5}.teaching-card{padding:22px 14px}}

@media(min-width:601px){.lesson-steps{flex-wrap:nowrap;gap:12px}.lesson-steps>div{flex:1 1 0}.lesson-arrow,.lesson-operator{flex-shrink:0}}

/* Approved navigation: two visible rows and a dedicated editor action. */
.masthead{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;padding-bottom:20px}
.masthead .type-link{justify-self:end;white-space:nowrap}
.navigation-rows{grid-column:1/-1;display:grid;gap:4px;min-width:0}
.navigation-rows nav{gap:8px 28px}
.navigation-rows nav+nav{border-top:1px solid var(--line);padding-top:4px}
@media(max-width:520px){.masthead{gap:20px 12px}.masthead .wordmark{font-size:28px}.masthead .wordmark span{white-space:normal;letter-spacing:0;font-size:10px}.masthead .type-link{font-size:13px;padding:12px}.navigation-rows nav{gap:4px 18px}}

@font-face{font-family:NdebeSoftBold2026;src:url("font/NdebeSoftBold.woff") format("woff");font-display:swap}
.dialect-font-control{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:28px 0 16px}.dialect-font-control select{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 12px}.dialect-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:28px 0 40px}.dialect-card{min-width:0;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px;text-align:center}.dialect-card h3{font-size:22px;letter-spacing:0;margin-bottom:12px}.dialect-card p{margin:8px 0;overflow-wrap:anywhere}.dialect-word{display:block;font:400 clamp(44px,5vw,64px)/1.8 NdebeRounded2026,sans-serif;font-synthesis:none;white-space:nowrap}.dialect-soft .dialect-word{font-family:NdebeSoftBold2026,sans-serif}.dialect-variants,.dialect-body,.dialect-intro{color:var(--muted)}.dialect-body,.tone-provisional{font-size:14px}.tone-provisional{color:var(--warm)}@media(max-width:850px){.dialect-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.dialect-grid{grid-template-columns:1fr}.dialect-card{padding:20px}}

.tone-contrast-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:28px 0}.tone-contrast-grid h3{font-size:20px}@media(max-width:850px){.tone-contrast-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.tone-contrast-grid{grid-template-columns:1fr}}