@font-face {
  font-family:Ndebe Rounded;
  src:url(NdebeRounded-Regular.woff2) format('woff2');
  font-weight:400;
  font-display:swap
}

@font-face {
  font-family:Ndebe Soft Bold;
  src:url(NdebeSoftBold-Regular.woff2) format('woff2');
  font-weight:700;
  font-display:swap
}

:root {
  --paper:#1c1e20;
  --card:#252729;
  --ink:#e1ded8;
  --muted:#aaa9a5;
  --line:#3b3d3f;
  --accent:#c6a58c;
  --glyph:98px;
  --face:'Ndebe Rounded';
  --weight:400
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:28px
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif
}

a {
  color:inherit;
  text-underline-offset:4px
}

button,input,select {
  font:inherit
}

button,.button,select,input[type=search] {
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--card);
  color:var(--ink);
  padding:11px 16px
}

button,.button {
  cursor:pointer
}

button:hover,.button:hover {
  border-color:var(--accent);
  background:#303234
}

button:disabled {
  opacity:.45;
  cursor:default
}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:4px
}

.button {
  display:inline-flex;
  gap:35px;
  text-decoration:none
}

.primary {
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink)
}

.primary:hover {
  background:#dac2af
}

.top {
  max-width:1440px;
  margin:auto;
  padding:26px 5%;
  display:flex;
  justify-content:space-between;
  gap:25px;
  border-bottom:1px solid var(--line)
}

.brand {
  font-weight:750;
  text-decoration:none;
  font-size:20px
}

.brand span {
  color:var(--accent)
}

nav {
  display:flex;
  gap:26px;
  flex-wrap:wrap
}

nav a {
  text-decoration:none;
  font-size:14px
}

main {
  max-width:1440px;
  margin:auto;
  padding:0 5%
}

h1,h2,h3,p {
  margin:0 0 18px
}

h1 {
  font-size:clamp(45px,5.4vw,78px);
  font-weight:550;
  line-height:1.05;
  letter-spacing:-3px
}

h2 {
  font-size:clamp(30px,3.1vw,44px);
  line-height:1.14;
  letter-spacing:-1.5px;
  font-weight:550
}

h3 {
  font-size:23px;
  font-weight:550
}

.eyebrow {
  font-size:11px;
  letter-spacing:2px;
  font-weight:650;
  color:var(--accent)
}

.hero {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  align-items:center;
  gap:8%;
  padding:80px 0 90px
}

.intro {
  font-size:23px;
  margin-top:25px
}

.lede {
  max-width:560px;
  color:var(--muted);
  margin-bottom:30px
}

.hero-art {
  background:#222426;
  border:1px solid var(--line);
  border-radius:50% 50% 12px 12px;
  min-height:390px;
  padding:60px 25px 30px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap
}

.hero-art .ndebe {
  font-size:155px;
  width:45%;
  text-align:center;
  line-height:1.2
}

.hero-art p {
  width:100%;
  text-align:center;
  margin:25px 0 0;
  font-size:14px
}

.hero-art p span {
  color:var(--muted);
  font-size:12px
}

.ndebe {
  font-family:var(--face);
  font-weight:var(--weight);
  font-synthesis:none
}

.rounded {
  font-family:Ndebe Rounded;
  font-weight:400
}

.soft {
  font-family:Ndebe Soft Bold;
  font-weight:700
}

section:not(.hero) {
  padding:56px 0 75px;
  border-top:1px solid var(--line)
}

.section-head {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:40px;
  margin-bottom:30px
}

.section-head>p {
  max-width:360px;
  color:var(--muted);
  font-size:15px
}

.tools {
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:20px;
  align-items:end
}

.tools label,label {
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:13px;
  font-weight:550
}

input[type=range] {
  height:45px;
  accent-color:var(--accent)
}

.filters {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:24px
}

.filters button {
  border-radius:30px;
  padding:7px 14px;
  font-size:13px
}

.filters button[aria-pressed=true] {
  background:var(--ink);
  color:var(--paper)
}

.result-line {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  color:var(--muted);
  margin:18px 0
}

.result-line p {
  margin:0
}

.text-button {
  background:none;
  border:none;
  text-decoration:underline;
  font-size:13px
}

.grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px
}

.glyph-card {
  min-width:0;
  text-align:left;
  padding:18px;
  border-radius:16px;
  min-height:210px
}

.glyph-card svg {
  display:block;
  width:100%;
  height:var(--glyph);
  margin:8px auto 18px;
  fill:currentColor
}

.glyph-card strong {
  display:block;
  font-size:14px;
  font-weight:550;
  overflow-wrap:anywhere;
  line-height:1.4
}

.glyph-card small {
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-top:6px
}

.pagination {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:25px;
  margin-top:28px;
  font-size:13px
}

.composer {
  display:grid;
  grid-template-columns:1fr 1.3fr;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  background:var(--card)
}

.composer-controls {
  padding:30px;
  display:grid;
  gap:16px
}

.checks {
  display:flex;
  gap:20px;
  flex-wrap:wrap
}

.checks label {
  display:flex;
  flex-direction:row;
  align-items:center
}

.composition {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  background:#222426;
  padding:30px;
  text-align:center
}

.composition .ndebe {
  font-size:220px;
  min-height:260px
}

.composition p {
  font-size:13px;
  color:var(--muted)
}

.muted,.note {
  color:var(--muted);
  font-size:14px
}

.examples {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
  margin:22px 0
}

.examples article {
  padding:20px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--card)
}

.examples .ndebe {
  font-size:75px;
  display:block;
  text-align:center;
  min-height:100px
}

.examples p {
  font-size:13px;
  margin:10px 0 0
}

.number-controls {
  max-width:240px;
  margin-bottom:20px
}

.numerals {
  display:grid;
  grid-template-columns:repeat(10,1fr);
  gap:8px
}

.digit {
  border-bottom:1px solid var(--line);
  text-align:center;
  padding:12px 0
}

.digit .ndebe {
  font-size:57px;
  display:block;
  line-height:1.8
}

.digit small {
  color:var(--muted)
}

.equations {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
  margin:25px 0
}

.equations article {
  border:1px solid var(--line);
  border-radius:16px;
  padding:25px;
  background:var(--card)
}

.equations .ndebe {
  font-size:64px;
  display:block;
  white-space:nowrap
}

.equations p {
  font-size:13px;
  color:var(--muted);
  margin:15px 0 0
}

.guide {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:45px
}

dl {
  margin:20px 0
}

dt {
  font-size:14px;
  font-weight:600;
  margin-top:18px
}

dd {
  margin:6px 0;
  color:var(--muted);
  font-size:14px
}

kbd {
  font:12px monospace;
  border:1px solid var(--line);
  border-radius:4px;
  padding:3px 6px;
  background:var(--card)
}

details {
  border-top:1px solid var(--line);
  padding:18px 0;
  margin-top:20px
}

summary {
  cursor:pointer;
  font-weight:550
}

details p {
  margin:16px 0;
  font-size:14px;
  max-width:850px
}

.downloads {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}

.downloads article {
  border:1px solid var(--line);
  border-radius:18px;
  padding:28px;
  background:var(--card)
}

.downloads .ndebe {
  font-size:100px;
  display:block
}

.downloads p {
  color:var(--muted);
  font-size:14px
}

footer {
  padding:35px 5%;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:30px;
  font-size:13px
}

footer p {
  color:var(--muted)
}

dialog {
  background:var(--card);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:20px;
  padding:35px;
  width:min(600px,92vw);
  max-height:88vh;
  overflow:auto
}

dialog::backdrop {
  background:#101214cc
}

#close-detail {
  float:right;
  font-size:25px;
  border:0;
  padding:0 10px
}

#detail-glyph svg {
  height:190px;
  width:100%;
  fill:currentColor
}

#detail-title {
  font-size:28px;
  overflow-wrap:anywhere
}

#detail-meta dd {
  overflow-wrap:anywhere
}

#detail-note {
  font-size:13px;
  color:var(--muted)
}

.toast {
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  background:#383431;
  color:#eee4dc;
  padding:12px 24px;
  border-radius:10px;
  z-index:20;
  display:none;
  max-width:90vw
}

.toast.visible {
  display:block
}

.skip {
  position:absolute;
  top:-100px
}

.skip:focus {
  top:10px;
  left:10px;
  background:var(--card);
  z-index:30;
  padding:12px
}

@media(max-width:800px) {
  .top {
    flex-direction:column;
    gap:14px
  }
  nav {
    gap:17px
  }
  .hero {
    padding:45px 0;
    gap:25px;
    grid-template-columns:1fr
  }
  .hero-art {
    min-height:250px;
    max-width:440px;
    width:100%;
    justify-self:center;
    padding:30px
  }
  .hero-art .ndebe {
    font-size:125px
  }
  .section-head {
    display:block
  }
  .section-head>p {
    max-width:none
  }
  .tools {
    grid-template-columns:1fr 1fr
  }
  .search {
    grid-column:1/-1
  }
  .grid {
    grid-template-columns:repeat(2,1fr)
  }
  .composer,.guide {
    grid-template-columns:1fr
  }
  .examples {
    grid-template-columns:repeat(2,1fr)
  }
  .numerals {
    grid-template-columns:repeat(5,1fr)
  }
  .downloads {
    grid-template-columns:1fr
  }
  .equations {
    grid-template-columns:1fr
  }
  .equations .ndebe {
    font-size:55px
  }
  .composition .ndebe {
    font-size:170px;
    min-height:200px
  }
  footer {
    flex-direction:column
  }
  .hero h1 {
    letter-spacing:-2px
  }
  .glyph-card {
    padding:12px;
    min-height:190px
  }
  section:not(.hero) {
    padding:40px 0
  }
  .pagination {
    gap:14px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
}

nav a[aria-current="page"] {
  color:var(--accent);
  text-decoration:underline;
  text-decoration-thickness:2px
}

.page-family {
  max-width:250px;
  margin:0 0 25px
}

/* A quiet charcoal palette, with warm neutral typography and restrained copper. */
:root {
  color-scheme:dark
}

.top {
  background:var(--paper);
  border-bottom-color:#333537;
  max-width:none;
  padding-inline:max(5%,calc((100vw - 1296px)/2))
}

.brand {
  font-weight:650
}

.top nav a {
  color:var(--muted)
}

.top nav a:hover,.top nav a[aria-current="page"] {
  color:var(--ink)
}

.top nav a[aria-current="page"] {
  text-decoration-color:var(--accent);
  text-underline-offset:8px
}

.hero {
  gap:7%;
  padding-block:72px 80px
}

.hero .intro {
  color:#c5c1bb
}

.hero .eyebrow {
  color:var(--accent)
}

.hero-art {
  border-radius:50% 50% 12px 12px;
  background:radial-gradient(ellipse at 50% 20%,#303234 0%,#252729 75%);
  border-color:#3a3c3e;
  color:#d8d2c9;
  box-shadow:0 18px 45px #11121425
}

.hero-art p {
  color:#c1bcb5
}

.hero-art p span {
  color:var(--muted)
}

.primary {
  background:#c6ad98;
  border-color:#c6ad98;
  color:#211e1b;
  font-weight:600
}

.primary:hover {
  background:#d6beaa;
  border-color:#d6beaa
}

.filters button {
  background:transparent;
  color:#b9b7b2;
  border-color:#404244
}

.filters button:hover {
  background:#2c2e30;
  color:var(--ink)
}

.filters button[aria-pressed=true] {
  background:#3c3530;
  border-color:#8d7562;
  color:#e9d5c4
}

.glyph-card {
  border-color:#37393b;
  background:#252729
}

.glyph-card svg {
  color:#d8d5ce
}

.glyph-card:hover {
  background:#2c2e30;
  border-color:#77716a
}

.composition {
  background:radial-gradient(ellipse at center,#303234,#26282a);
  color:#d8d2c9
}

.composition p {
  color:var(--muted)
}

button:hover,.button:hover {
  border-color:#8d8176
}

input[type=checkbox] {
  accent-color:var(--accent)
}

input::placeholder {
  color:#93938f
}

.text-button {
  color:#bbb1a7
}

.toast {
  border:1px solid #6e6055
}

footer {
  background:#191b1d;
  border-top-color:#333537;
  color:#c2bfb9
}

footer p {
  color:var(--muted)
}

::selection {
  background:#69594b;
  color:#f0e9e1
}

@media(max-width:800px) {
  .hero {
    padding-block:42px 48px
  }
  .hero-art {
    border-radius:50% 50% 12px 12px
  }
}

.hero-art .ndebe {
  width:100%;
  font-size:clamp(95px,10vw,145px);
  white-space:nowrap
}

.hero-art {
  padding-top:70px
}

.hero-art p span {
  display:inline-block;
  margin-top:6px
}

@media(max-width:480px) {
  .hero-art .ndebe {
    font-size:95px
  }
  .hero-art {
    padding-inline:18px;
    padding-top:55px
  }
  .hero-art p span {
    font-size:11px
  }
}

/* Separate the repository note from the download cards. */
.downloads + .note {
  margin-top: 24px;
}

/* Keep the script name together at desktop and phone widths. */
.hero h1 {
  white-space: nowrap;
  font-size: clamp(24px, 4.2vw, 58px);
}