/* The Diafon docs on Material: the font, the palette the description's
   tables and diagrams use, and the blocks themselves. */
@font-face{font-family:"Diafon";src:url(../diafon.woff2?v=1793350138) format("woff2");font-display:swap}
@font-face{font-family:"Diafon Sans";src:url(../diafon-sans.woff2?v=1793350138) format("woff2");font-display:swap}
@font-face{font-family:"Diafon Mono";src:url(../diafon-mono.woff2?v=1793350138) format("woff2");font-display:swap}

:root{
  --md-primary-fg-color:#0e7c86; --md-primary-fg-color--light:#3ec8cf; --md-primary-fg-color--dark:#0a5c64;
  --md-accent-fg-color:#0e7c86;
  --serif:"Diafon","Charis SIL","Gentium Plus","Noto Serif","Times New Roman",Georgia,serif;
  --mono:"Diafon Mono","SF Mono","JetBrains Mono","Menlo","Consolas",monospace;
  --accent:#0e7c86; --base-c:#0e7c86; --c-c:#b06f14; --j-c:#3f5bc0; --q-c:#8a4bb0; --x-c:#2f8f66; --y-c:#c0468a;
  --base-t:#0e7c8615; --c-t:#b06f1418; --j-t:#3f5bc016; --q-t:#8a4bb016; --x-t:#2f8f6618; --y-t:#c0468a1a;
  --ink:#1a1d24; --muted:#5b6472; --line:#dde1e8; --card:#ffffff; --sunken:#eef0f4;
}
[data-md-color-scheme="default"]{
  --md-primary-fg-color:#0e7c86; --md-primary-fg-color--light:#3ec8cf; --md-primary-fg-color--dark:#0a5c64;
  --md-accent-fg-color:#0e7c86; --md-typeset-a-color:#0e7c86;
}
[data-md-color-scheme="slate"]{
  --md-primary-fg-color:#0e7c86; --md-primary-fg-color--light:#3ec8cf; --md-primary-fg-color--dark:#0a5c64;
  --md-accent-fg-color:#3ec8cf; --md-typeset-a-color:#3ec8cf;
  --accent:#3ec8cf; --base-c:#3ec8cf; --c-c:#e0a44a; --j-c:#8b9ff0; --q-c:#c08ee0; --x-c:#4fc79a; --y-c:#e88ac0;
  --base-t:#3ec8cf1e; --c-t:#e0a44a22; --j-t:#8b9ff01e; --q-t:#c08ee01e; --x-t:#4fc79a22; --y-t:#e88ac022;
  --ink:#e9ecf1; --muted:#98a1b0; --line:#2a2e37; --card:#1b1e25; --sunken:#101216;
}

.md-typeset h1,.md-typeset h2{font-family:var(--serif);font-weight:600}
.md-typeset .ug{font-family:var(--serif)}
.md-typeset .term{color:var(--accent);font-weight:600}
.md-typeset code{font-weight:600}

/* the specimen line under a page title */
.md-typeset .specimen{font-size:1.9rem;line-height:1.3;margin:.2rem 0 1.4rem;display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap}
.md-typeset .specimen .ug{font-family:var(--serif)}
.md-typeset .specimen code{font-size:.8rem}

/* the tables of The system page (docs/.include) */
.md-typeset .scroll{overflow-x:auto;margin:.8rem 0 0;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.md-typeset table.grid{border-collapse:collapse;width:100%;min-width:760px;display:table;font-size:inherit}
.md-typeset .grid th,.md-typeset .grid td{border:1px solid var(--line);padding:0;text-align:center;vertical-align:top}
.md-typeset .grid thead th{font:600 .66rem/1.1 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:.5rem .3rem;background:var(--sunken)}
.md-typeset .grid tbody th{font:600 .68rem/1.1 var(--mono);color:var(--muted);text-align:left;padding:.5rem .6rem;background:var(--sunken);white-space:nowrap}
.md-typeset .cell{display:flex;gap:2px;justify-content:center}
.md-typeset .pt{flex:1;padding:.45rem .2rem .4rem;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:52px}
.md-typeset .pt .nat{font-family:var(--serif);font-size:1.35rem;line-height:1.15;color:var(--ink)}
.md-typeset .pt .lab{font:600 .72rem/1 var(--mono);color:var(--accent)}
.md-typeset .pt .ipa{font-family:var(--serif);font-size:.82rem;line-height:1.1;color:var(--muted)}
.md-typeset .pt.cmp{outline:1.5px dashed var(--muted);outline-offset:-3px;border-radius:8px;opacity:.92}
.md-typeset .klegend{display:flex;flex-wrap:wrap;gap:.5rem 1.3rem;margin:.8rem 0 0;font-size:.85rem;color:var(--muted);max-width:none}
.md-typeset .klegend .sw{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:.3rem}
.md-typeset .klegend b{color:var(--ink)}
.md-typeset .opswrap{overflow-x:auto;margin:.8rem 0 0;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.md-typeset .opswrap table.ops{margin:0;border:none;min-width:600px;border-collapse:collapse;width:100%;display:table;font-size:inherit}
.md-typeset .ops th{font:600 .66rem/1.1 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:.55rem .8rem;background:var(--sunken);text-align:left}
.md-typeset .ops td{padding:.55rem .8rem;border-top:1px solid var(--line);vertical-align:top}
.md-typeset .ops td.op{font:600 1rem/1 var(--mono);width:2.2rem}
.op-c{color:var(--c-c)} .op-j{color:var(--j-c)} .op-q{color:var(--q-c)} .op-x{color:var(--x-c)} .op-w{color:var(--accent)} .op-y{color:var(--y-c)}

/* ---- the home page */
:root{--good:#2f8f66; --warn:#b06f14; --bad:#c04646}
[data-md-color-scheme="slate"]{--good:#4fc79a; --warn:#e0a44a; --bad:#e07a7a}
.md-typeset .hero{margin:0 0 2.4rem}
.md-typeset .hero-title{display:flex;align-items:center;gap:1.1rem}
.md-typeset .hero-mark{width:4.6rem;height:4.6rem;flex:none;color:var(--ink)}
.md-typeset .hero h1{font-size:3rem;margin:0;line-height:1;color:var(--ink)}
.md-typeset .hero-tag{font-family:var(--serif);font-size:1.25rem;margin:.35rem 0 0;color:var(--muted)}
.md-typeset .hero-sub{font-size:1rem;max-width:40rem;margin:1.2rem 0 0}
.md-typeset .flow{display:grid;grid-template-columns:1fr auto 1.25fr auto 1fr;align-items:stretch;gap:.6rem;margin:1.6rem 0 0}
.md-typeset .flow-step{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.8rem 1rem;display:flex;flex-direction:column;gap:.45rem;justify-content:center}
.md-typeset .flow-step.main{border:2px solid var(--accent)}
.md-typeset .flow-k{font:600 .62rem/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.md-typeset .flow-v{font-size:1.15rem;line-height:1.35}
.md-typeset code.flow-v{font-size:.95rem;background:none;padding:0;color:var(--accent)}
.md-typeset .flow-step.main .flow-v{font-size:1.9rem}
.md-typeset .flow-arrow{align-self:center;font-size:1.4rem;color:var(--muted)}
.md-typeset .hero-go{margin:1.4rem 0 0;display:flex;gap:.6rem;flex-wrap:wrap}
.md-typeset .hero-go .md-button{margin:0}
@media (max-width:44em){
  .md-typeset .flow{grid-template-columns:1fr}
  .md-typeset .flow-arrow{transform:rotate(90deg);justify-self:center;line-height:1}
}

/* one sound, one letter */
.md-typeset .sg-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--card);margin:1rem 0}
.md-typeset table.sg{display:table;width:100%;border-collapse:collapse;margin:0;font-size:inherit;border:none}
.md-typeset .sg th,.md-typeset .sg td{padding:.6rem 1rem;border-top:1px solid var(--line);text-align:left;vertical-align:middle}
.md-typeset .sg thead th{border-top:none;background:var(--sunken);font-family:var(--serif);font-size:1rem;font-weight:600;color:var(--ink)}
.md-typeset .sg thead .ug{font-size:1.4rem;color:var(--accent)}
.md-typeset .sg tbody th{font:600 .7rem/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);width:9rem}
.md-typeset .sg-arrow,.md-typeset .sg-to{color:var(--muted);margin:0 .5rem}
.md-typeset .sg-word{font-size:1.1rem}
.md-typeset .sg-script{font-size:1.5rem}
.md-typeset .sg mark{background:none;color:var(--accent);font-weight:700;padding:0;box-shadow:inset 0 -.18em 0 var(--base-t)}

/* the keyboard */
.md-typeset .kb{display:flex;flex-direction:column;align-items:center;gap:.4rem;margin:1.2rem 0 .8rem;padding:1.1rem .6rem;
  background:var(--sunken);border-radius:16px;border:1px solid var(--line)}
.md-typeset .kb-row{display:flex;gap:.4rem}
.md-typeset .kb-row:nth-child(2){margin-left:1.4rem}
.md-typeset .kb-row:nth-child(3){margin-left:3.6rem}
.md-typeset .key{display:inline-flex;align-items:center;justify-content:center;width:2.6rem;height:2.6rem;border-radius:.55rem;
  font:600 1.05rem/1 var(--mono);background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:0 2px 0 var(--line)}
.md-typeset .key.vowel{border-color:var(--accent);color:var(--accent)}
.md-typeset .key.op{color:#fff;border-color:transparent;box-shadow:0 2px 0 rgba(0,0,0,.18)}
.md-typeset .key.op-c{background:var(--c-c)} .md-typeset .key.op-j{background:var(--j-c)} .md-typeset .key.op-q{background:var(--q-c)}
.md-typeset .key.op-x{background:var(--x-c)} .md-typeset .key.op-w{background:var(--accent)} .md-typeset .key.op-y{background:var(--y-c)}
[data-md-color-scheme="slate"] .md-typeset .key.op{color:#14161b}
.md-typeset .kb-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.6rem;font-size:.8rem;color:var(--muted)}
.md-typeset .kb-legend .key{width:1.6rem;height:1.6rem;font-size:.8rem;vertical-align:middle;margin-right:.25rem}
.md-typeset .kb-legend b{color:var(--ink)}
@media (max-width:30em){
  .md-typeset .key{width:1.75rem;height:2.2rem;font-size:.85rem}
  .md-typeset .kb-row{gap:.22rem}
  .md-typeset .kb-row:nth-child(2){margin-left:.9rem}
  .md-typeset .kb-row:nth-child(3){margin-left:2.2rem}
}

/* the operators */
.md-typeset .opgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:.8rem;margin:1rem 0}
.md-typeset .opcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.8rem .9rem}
.md-typeset .opcard.special{grid-column:1/-1}
.md-typeset .opcard-h{display:flex;align-items:center;gap:.6rem;font-size:.8rem;color:var(--muted);line-height:1.35}
.md-typeset .opcard-h .key{width:2rem;height:2rem;flex:none}
.md-typeset .opcard-h .key + .key{margin-left:-.3rem}
.md-typeset .opcard-x{display:flex;flex-wrap:wrap;gap:.4rem;margin:.7rem 0 0}
.md-typeset .opx{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:3.3rem;padding:.35rem .4rem;border-radius:.6rem;background:var(--sunken)}
.md-typeset .opx-g{font-size:1.7rem;line-height:1.15}
.md-typeset .opx code{font-size:.68rem;background:none;padding:0;color:var(--accent)}
.md-typeset .opx-r{font-family:var(--serif);font-size:.75rem;color:var(--muted)}

/* ---- the master tables */
.md-typeset .g{font-family:var(--glyph,var(--serif))}
.md-typeset .mt-lede{color:var(--muted);max-width:52rem}
.md-typeset .mt-bar{position:sticky;top:2.4rem;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.2rem;
  margin:1rem 0;padding:.6rem .8rem;background:var(--md-default-bg-color);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 6px 14px -12px rgba(0,0,0,.4)}
.md-typeset .mt-bar label,.md-typeset .tryout-row label{font:600 .64rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:.45rem}
.md-typeset .mt-bar select,.md-typeset .mt-bar input,.md-typeset .learn-bar select,.md-typeset .tryout select,.md-typeset .tryout button{
  font:600 .75rem var(--md-text-font-family,sans-serif);text-transform:none;letter-spacing:0;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:.45rem;padding:.35rem .5rem}
.md-typeset .tryout button{cursor:pointer}
.md-typeset .tryout button:hover{border-color:var(--accent)}
.md-typeset .mt-bar input{width:12rem}
.md-typeset .mt-summary{font:600 .66rem/1.3 var(--mono);color:var(--muted)}
.md-typeset .mt-summary .miss{color:var(--bad)} .md-typeset .mt-summary .fall{color:var(--warn)}

.md-typeset .tryout{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.8rem 1rem;margin:0 0 1.2rem}
.md-typeset .tryout-row{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:0 0 .6rem}
.md-typeset .tryout-status{font-size:.75rem;color:var(--muted)}
.md-typeset .tryout textarea{width:100%;font:.85rem/1.6 var(--md-code-font-family,monospace);color:var(--ink);background:var(--sunken);
  border:1px solid var(--line);border-radius:10px;padding:.55rem .75rem;resize:vertical;outline:none}
.md-typeset .tryout textarea:focus{border-color:var(--accent)}
.md-typeset .tryout-out{font-size:1.7rem;line-height:1.55;padding:.2rem .1rem;margin:.4rem 0 0;overflow-wrap:anywhere;min-height:2.6rem}
.md-typeset .tryout-out.back{font-size:1.15rem;border-top:1px solid var(--line);padding-top:.5rem}
.md-typeset .tryout-out small{display:block;font:600 .6rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:.25rem}
.md-typeset .tryout-out .err{color:var(--bad);border-bottom:2px dotted var(--bad)}
.md-typeset .muted{color:var(--muted)}
.md-typeset .chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0 0}
.md-typeset .chip{background:var(--sunken);border:1px solid var(--line);border-radius:.6rem;padding:.3rem .55rem .25rem;
  display:flex;flex-direction:column;align-items:center;gap:1px;min-width:3rem;font:inherit;color:inherit}
.md-typeset button.chip{cursor:pointer}
.md-typeset button.chip:hover{border-color:var(--accent)}
.md-typeset .chip .g,.md-typeset .chip .c{font-size:1.35rem;line-height:1.2}
.md-typeset .chip .f{font:600 .64rem/1 var(--mono);color:var(--accent)}
.md-typeset .chip .r{font-family:var(--serif);font-size:.75rem;color:var(--muted)}
.md-typeset .chip.absent{opacity:.45}
.md-typeset .chip.err{border-color:var(--bad)} .md-typeset .chip.err .g{color:var(--bad)}
.md-typeset .tryout-help{margin:.8rem 0 0;font-size:.75rem;color:var(--muted)}
.md-typeset .tryout-help summary{cursor:pointer;font-weight:600}
.md-typeset .tryout-help p{margin:.5rem 0 0}
.md-typeset .how{font:600 .64rem/1.6 var(--mono);padding:.1em .45em;border-radius:.3em;background:var(--sunken);color:var(--muted);white-space:nowrap}
.md-typeset .how.lexicon{color:var(--accent)} .md-typeset .how.loan{color:var(--warn)}
.md-typeset .how.fallback{color:var(--bad)} .md-typeset .how.letters{color:var(--good)}
.md-typeset tr.diff td.back{color:var(--bad);font-weight:600}

.md-typeset .mt-wrap{overflow-x:auto;margin:.8rem 0 0;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.md-typeset table.mt{display:table;border-collapse:collapse;width:100%;min-width:640px;margin:0;border:none;font-size:.78rem;border-radius:0}
.md-typeset .mt th{font:600 .62rem/1.1 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
  padding:.5rem .8rem;background:var(--sunken);text-align:left;border:none;min-width:0}
.md-typeset .mt td{padding:.45rem .8rem;border:none;border-top:1px solid var(--line);vertical-align:top}
.md-typeset .mt td.g{font-size:1.3rem;white-space:nowrap}
.md-typeset .mt td.g span{border-radius:4px;padding:0 .08em}
.md-typeset .mt td.g span.miss{box-shadow:inset 0 0 0 2px var(--bad)}
.md-typeset .mt td.g span.fall{box-shadow:inset 0 0 0 2px var(--warn)}
.md-typeset .mt tr.grp th{background:var(--sunken);color:var(--accent)}
.md-typeset .mt tr.flash td{animation:mt-flash 1.4s ease-out}
@keyframes mt-flash{from{background:var(--md-accent-fg-color--transparent,rgba(14,124,134,.25))}}
.md-typeset .mt .st{display:block;font:600 .64rem/1.3 var(--mono);color:var(--muted);white-space:nowrap}
.md-typeset .mt .rname{display:block;font:500 .62rem/1.3 var(--mono);color:var(--muted);margin-top:1px}
.md-typeset .mt a.rname{text-decoration:none}
.md-typeset .mt a.rname:hover{color:var(--accent);text-decoration:underline}
.md-typeset .mt a.wref{color:inherit;text-decoration:none;border-bottom:1px dotted var(--line);font-size:.95rem}
.md-typeset .mt a.wref:hover{border-bottom-color:var(--accent)}
.md-typeset .mt .just{display:block;font-size:.7rem;line-height:1.35;color:var(--muted);margin-top:2px}
.md-typeset .mt .just b{color:var(--ink);font:600 .64rem var(--mono)}
.md-typeset .mt .rgroup{margin-bottom:.55rem}
.md-typeset .mt .rgroup:last-child{margin-bottom:0}
.md-typeset .tt{font:600 .64rem/1.4 var(--mono);color:var(--muted)}
.md-typeset .plus{font:600 .78rem var(--mono);margin-left:.2rem}
.md-typeset .prev{display:block;font-size:.68rem;color:var(--muted);margin-top:2px;white-space:nowrap}
.md-typeset .badge{display:inline-block;font:600 .6rem/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;
  border-radius:999px;padding:.28rem .6rem;vertical-align:4px;margin-left:.5rem;border:1px solid var(--line)}
.md-typeset .st-nat{color:var(--good);border-color:var(--good)}
.md-typeset .st-rev{color:var(--warn);border-color:var(--warn)}
.md-typeset .st-non{color:var(--muted)}
.md-typeset section[id^=sec-] > h2{margin-top:1.6rem}
.md-typeset section[id^=sec-] > .lede{color:var(--muted);margin:.2rem 0 0}
.md-typeset .chip .g,.md-typeset .chip .c{line-height:1.55}
.md-typeset .mt code,.md-typeset .tryout code{color:var(--accent)}
.md-typeset .sg td{white-space:nowrap}
.md-typeset .kb{overflow:hidden}
@media (max-width:30em){
  .md-typeset .kb{padding:.8rem .3rem}
  .md-typeset .kb .key{width:1.32rem;height:1.9rem;font-size:.72rem;border-radius:.4rem}
  .md-typeset .kb-row{gap:.18rem}
  .md-typeset .kb-row:nth-child(2){margin-left:.7rem}
  .md-typeset .kb-row:nth-child(3){margin-left:1.6rem}
  .md-typeset .sg th,.md-typeset .sg td{padding:.5rem .6rem}
  .md-typeset .sg tbody th{width:auto}
}
@media (max-width:44em){.md-typeset .mt-bar{position:static}}
.md-typeset #sec-languages tr[data-goto]{cursor:pointer}
.md-typeset #sec-languages tr[data-goto]:hover td{background:var(--base-t)}
.md-typeset #sec-languages td{vertical-align:middle}
.md-typeset #sec-languages .badge{margin-left:0;vertical-align:0}

/* the point tables: one tile for consonants and vowels, coloured by operator */
.md-typeset table.grid.pts{margin:0}
.md-typeset table.pts caption{caption-side:top;text-align:left;padding:.55rem .8rem;font:600 .66rem/1.1 var(--mono);
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:var(--sunken);border-bottom:1px solid var(--line)}
.md-typeset .scroll + .scroll{margin-top:1rem}
.md-typeset .pt{border-radius:8px;margin:2px}
.md-typeset .pt.k-base{background:var(--base-t)} .md-typeset .pt.k-base .lab{color:var(--base-c)}
.md-typeset .pt.k-c{background:var(--c-t)} .md-typeset .pt.k-c .lab{color:var(--c-c)}
.md-typeset .pt.k-j{background:var(--j-t)} .md-typeset .pt.k-j .lab{color:var(--j-c)}
.md-typeset .pt.k-q{background:var(--q-t)} .md-typeset .pt.k-q .lab{color:var(--q-c)}
.md-typeset .pt.k-x{background:var(--x-t)} .md-typeset .pt.k-x .lab{color:var(--x-c)}
.md-typeset .pt.k-y{background:var(--y-t)} .md-typeset .pt.k-y .lab{color:var(--y-c)}
.md-typeset table.grid.pts td{vertical-align:middle}
.md-typeset table.grid.pts{min-width:0;table-layout:fixed}
.md-typeset table.pts thead th{font-size:clamp(.48rem,1.1vw,.66rem);letter-spacing:0;padding:.45rem .1rem;overflow-wrap:anywhere}
.md-typeset table.pts tr > th:first-child{width:clamp(2.9rem,10vw,5.6rem);font-size:clamp(.5rem,1.2vw,.7rem);padding:.4rem .25rem;overflow-wrap:anywhere}
.md-typeset table.pts .pt{min-width:0;padding:.35rem .05rem .3rem;margin:1px}
.md-typeset table.pts .pt .nat{font-size:clamp(.95rem,2.3vw,1.35rem)}
.md-typeset table.pts .pt .lab{font-size:clamp(.5rem,1.2vw,.72rem)}
.md-typeset table.pts .pt .ipa{font-size:clamp(.55rem,1.3vw,.82rem)}
.md-typeset table.pts .pt *{max-width:100%;overflow:hidden}
@media (max-width:600px){.md-typeset table.pts .pt .ipa{display:none} .md-typeset table.pts .pt .nat{font-size:clamp(.8rem,3.4vw,1.1rem)} .md-typeset table.pts .pt .lab{font-size:.5rem} .md-typeset table.pts thead th span{display:none} .md-typeset table.pts .pt .lab{white-space:nowrap;font-size:.46rem} .md-typeset table.pts tr > th:first-child{white-space:normal;font-size:.5rem}}
.md-typeset table.pts th svg.mouth{display:block;width:100%;max-width:62px;height:auto;aspect-ratio:104/90;margin:0 auto 4px;fill:none;stroke:var(--muted);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.md-typeset table.pts th svg.mouth .tongue{fill:var(--sunken);stroke:var(--line);stroke-width:2}
.md-typeset table.pts th svg.mouth circle{fill:var(--accent);stroke:var(--card);stroke-width:2.5}
.md-typeset figure.vt{margin:1.2rem 0 .4rem;width:100%;max-width:840px;display:block}
.md-typeset figure.vt svg{width:100%;height:auto;display:block}
.md-typeset figure.vt .edge{fill:var(--sunken);stroke:var(--line);stroke-width:1.5;stroke-dasharray:6 6}
.md-typeset figure.vt .axis{font:600 11px var(--mono);fill:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.md-typeset figure.vt .band{stroke-width:56;stroke-linecap:round;opacity:.9}
.md-typeset figure.vt .band.k-base{stroke:var(--base-t)} .md-typeset figure.vt .band.k-c{stroke:var(--c-t)} .md-typeset figure.vt .band.k-j{stroke:var(--j-t)}
.md-typeset figure.vt .chip rect{fill:var(--card);stroke:var(--line);stroke-width:1.2}
.md-typeset figure.vt .chip.k-base rect{stroke:var(--base-c)} .md-typeset figure.vt .chip.k-c rect{stroke:var(--c-c)}
.md-typeset figure.vt .chip.k-j rect{stroke:var(--j-c)} .md-typeset figure.vt .chip.k-q rect{stroke:var(--q-c)}
.md-typeset figure.vt .chip.split rect{stroke-dasharray:4 3}
.md-typeset figure.vt text{text-anchor:middle}
.md-typeset figure.vt .nat{font-family:var(--serif);font-size:30px;fill:var(--ink)}
.md-typeset figure.vt .split .nat{font-size:19px} .md-typeset figure.vt .split .lab{font-size:10px} .md-typeset figure.vt .split .ipa{font-size:11px}
.md-typeset figure.vt .lab{font:600 13px var(--mono)}
.md-typeset figure.vt .k-base .lab{fill:var(--base-c)} .md-typeset figure.vt .k-c .lab{fill:var(--c-c)}
.md-typeset figure.vt .k-j .lab{fill:var(--j-c)} .md-typeset figure.vt .k-q .lab{fill:var(--q-c)}
.md-typeset figure.vt .ipa{font-family:var(--serif);font-size:14px;fill:var(--muted)}
.md-typeset figure.vt .who{font:500 10.5px var(--mono);fill:var(--muted)}
.md-typeset .pt .nat{line-height:1.45}
/* samples page */
.md-typeset .samples{--sample-size:24px}
.md-typeset .sample-bar{position:sticky;top:3.2rem;z-index:2;display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:center;padding:.5rem .7rem;margin:0 0 1.2rem;background:var(--card);border:1px solid var(--line, #ddd);border-radius:.4rem;font-size:.75rem}
.md-typeset .sample-bar .seg button{font:inherit;padding:.2rem .7rem;border:1px solid var(--line, #ccc);background:transparent;color:var(--ink);cursor:pointer}
.md-typeset .sample-bar .seg button:first-child{border-radius:.3rem 0 0 .3rem}
.md-typeset .sample-bar .seg button:last-child{border-radius:0 .3rem .3rem 0}
.md-typeset .sample-bar .seg button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.md-typeset .sample{margin:0 0 2.2rem}
.md-typeset .sample header{display:flex;flex-wrap:wrap;gap:.2rem .7rem;align-items:baseline;margin-bottom:.3rem}
.md-typeset .sample-lang{font-weight:600;font-size:.8rem;color:var(--accent)}
.md-typeset .sample-title{font-size:.75rem;color:var(--muted)}
.md-typeset .sample-text{font-size:var(--sample-size);line-height:1.55;margin:.2rem 0 .5rem;color:var(--ink)}
.md-typeset .samples[data-font="sans"] .sample-text{font-family:"Diafon Sans",var(--serif)}
.md-typeset .samples[data-font="mono"] .sample-text{font-family:"Diafon Mono",var(--mono)}
.md-typeset .sample-orig{font-size:.8rem;line-height:1.5;color:var(--muted);margin:0}
.md-typeset .samples.no-orig .sample-orig{display:none}
/* home: one sound four ways, and what the system is for */
.md-typeset .same{margin:1.8rem 0 0;max-width:34rem;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.9rem 1.2rem 1rem}
.md-typeset .same-k{margin:0 0 .6rem;font-size:.85rem;color:var(--muted)}
.md-typeset .same-row{display:grid;grid-template-columns:6rem 9rem 1.5rem auto;align-items:baseline;gap:.8rem;padding:.25rem 0}
.md-typeset .same-lang{font-size:.75rem;color:var(--muted)}
.md-typeset .same-nat{font-family:var(--serif);font-size:1.3rem;color:var(--ink)}
.md-typeset .same-arrow{color:var(--muted)}
.md-typeset .same-dia{font-size:1.55rem;color:var(--ink)}
.md-typeset .same b{font-weight:inherit;color:var(--accent)}
.md-typeset .uses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin:1.6rem 0 0;max-width:46rem}
.md-typeset .use{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.9rem 1.1rem}
.md-typeset .use h3{margin:0 0 .4rem;font-size:.95rem;font-family:var(--serif);color:var(--ink)}
.md-typeset .use p{margin:0;font-size:.8rem;color:var(--muted)}
@media (max-width:600px){.md-typeset .uses{grid-template-columns:1fr}}
@media (max-width:480px){.md-typeset .same-row{grid-template-columns:1fr auto 1fr}.md-typeset .same-lang{grid-column:1/-1}}
.md-typeset .kb-ops{display:inline-flex;gap:.2rem}
.md-typeset h3.opgroup{margin:1.4rem 0 .2rem;font-size:1rem}
.md-typeset .kb-ops{display:inline-flex;gap:.15rem;margin-right:.3rem;font:700 .85rem var(--mono)}
.md-typeset .kb-ops i{font-style:normal}
.md-typeset .optab{margin:.8rem 0 0;border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden}
.md-typeset .optab-h,.md-typeset .optab-r{display:grid;grid-template-columns:3.2rem 1fr 1fr;gap:0 1rem;padding:.6rem 1rem;align-items:start}
.md-typeset .optab-h{font:600 .62rem/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);background:var(--sunken);padding:.5rem 1rem}
.md-typeset .optab-r{border-top:1px solid var(--line)}
.md-typeset .optab-r .key{margin-top:.1rem}
.md-typeset .opside-g{display:block;font-size:.8rem;color:var(--ink);margin-bottom:.35rem}
.md-typeset .opside.none{font-size:.8rem;color:var(--muted);font-style:italic}
@media (max-width:640px){.md-typeset .optab-h{display:none}.md-typeset .optab-r{grid-template-columns:2.6rem 1fr}.md-typeset .optab-r .opside{grid-column:2}.md-typeset .optab-r .opside+.opside{margin-top:.6rem}
  .md-typeset .optab-r .opside::before{display:block;font:600 .58rem var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);content:"after a consonant"}
  .md-typeset .optab-r .opside+.opside::before{content:"after a vowel"}}
.md-typeset .key.op-any{background:var(--muted);border-color:var(--muted)}

/* one heading style on every page */
.md-typeset h1:not(.hero h1){color:var(--ink);font-family:var(--serif);font-weight:600}
.md-typeset h3,.md-typeset h4{font-family:var(--serif);font-weight:600;color:var(--ink)}
.md-typeset h3{font-size:1.1rem} .md-typeset h4{font-size:.95rem}

/* the picked language's text at the top of the Reference */
.md-typeset .mt-sample .sample{margin:1rem 0 1.4rem;padding:.8rem 1rem;border-left:3px solid var(--accent);background:var(--card);border-radius:0 12px 12px 0}
.md-typeset .mt-sample .sample-text{font-size:1.35rem;line-height:1.5}

/* script glyphs in plain Markdown tables read at text size */
.md-typeset table:not([class]) .ug{font-size:1.5em;line-height:1}

/* the whole site in the Diafon fonts; glyphs they lack (IPA, CJK) fall back */
:root{--md-text-font:"Diafon Sans";--md-code-font:"Diafon Mono"}
.md-typeset .same-k{font-family:var(--serif);font-size:.95rem}

/* the site-wide switches in the header */
.site-switch{display:flex;gap:.8rem;align-items:center;margin:0 .6rem;font-size:.62rem}
.site-switch label{display:flex;align-items:center;gap:.35rem;color:var(--md-primary-bg-color);opacity:.95}
.site-switch label span{font-weight:600;letter-spacing:.05em;text-transform:uppercase;opacity:.8}
.site-switch select{font:inherit;font-size:.7rem;color:var(--md-primary-bg-color);background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.35);border-radius:.35rem;padding:.2rem .35rem}
.site-switch select option,.site-switch select optgroup{color:#14161b;background:#fff}
@media (max-width:60em){.site-switch label span{display:none}}
@media (max-width:30em){.site-switch{gap:.3rem;margin:0 .2rem}}

/* Reference: operator subgroups, the try-out toggles, the font check, translations */
.md-typeset .mt tr.sub th{font:600 .7rem/1.2 var(--md-text-font-family,sans-serif);color:var(--muted);text-align:left;
  padding:.35rem .6rem;background:var(--card)}
.md-typeset .mt tr.sub .op{font:600 .8rem/1 var(--mono);padding:0 .3rem;border-radius:.25rem;color:#fff}
.md-typeset .mt tr.sub .op-j{background:var(--j-c)} .md-typeset .mt tr.sub .op-x{background:var(--x-c)}
.md-typeset .mt tr.sub .op-c{background:var(--c-c)} .md-typeset .mt tr.sub .op-q{background:var(--q-c)}
.md-typeset .mt tr.sub .op-y{background:var(--y-c)} .md-typeset .mt tr.sub .op-w{background:var(--accent)}
.md-typeset .tryout-more{margin:.8rem 0 0;border-top:1px solid var(--line);padding-top:.5rem}
.md-typeset .tryout-more > summary,.md-typeset .fontcheck > summary{cursor:pointer;font-weight:600;font-size:.8rem;color:var(--accent)}
.md-typeset .tryout-help{font-size:.75rem;color:var(--muted);margin:.4rem 0}
.md-typeset .fontcheck{margin:2rem 0;padding:.8rem 1rem;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.md-typeset .fontcheck .fontbar{position:static;margin:.5rem 0 0;box-shadow:none;border:none;padding:0;background:none}
.md-typeset .sample-text{font-family:var(--glyph,var(--serif))}
.md-typeset .sample-trans{font-size:.8rem;line-height:1.5;color:var(--muted);font-style:italic;margin:.4rem 0 0}
/* the try-out toggles and the font check are plain disclosures, not Material's call-out boxes */
.md-typeset details.tryout-more,.md-typeset details.fontcheck{box-shadow:none;border-left:none;font-size:inherit}
.md-typeset details.tryout-more{border:none;border-top:1px solid var(--line);border-radius:0;background:none;padding:.5rem 0 0}
.md-typeset details.tryout-more > summary,.md-typeset details.fontcheck > summary{background:none;padding:.2rem 0 .2rem 1.2rem;border:none}
.md-typeset details.tryout-more > summary::before,.md-typeset details.fontcheck > summary::before{display:none}
.md-typeset details.tryout-more > summary::after,.md-typeset details.fontcheck > summary::after{left:0;right:auto;top:.25rem;background-color:var(--accent)}

/* languages by their own name, the English name small after it */
.md-typeset .en-name{font-size:.68em;font-weight:400;color:var(--muted);margin-left:.35em;font-family:var(--md-text-font-family,sans-serif)}
.md-typeset .rev{display:inline-block;font:600 .58rem/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--accent);
  border:1px solid var(--accent);border-radius:1rem;padding:.15rem .4rem;margin-left:.5rem;vertical-align:.1em}
.md-typeset table.mt.langs tr[data-goto]{cursor:pointer}
.md-typeset table.mt.langs tr[data-goto]:hover td{background:var(--sunken)}
.md-typeset table.mt.langs th[colspan],.md-typeset table.mt.langs th[rowspan]{text-align:left}

/* the whole site a step smaller: Diafon Sans runs large */
html{font-size:115%}
@media screen and (min-width:100em){html{font-size:125%}}
@media screen and (min-width:125em){html{font-size:135%}}
.md-typeset .tryout-out{font-size:1.35rem}
.md-typeset .tryout-out.back{font-size:1rem}
/* the small example at the top of the Reference */
.md-typeset .mt-sample{margin:.6rem 0 1.4rem;padding:.6rem .9rem;border-left:3px solid var(--accent);background:var(--card);border-radius:0 10px 10px 0}
.md-typeset .mt-sample p{margin:0}
.md-typeset .mt-sample .g{font-size:1.15rem;line-height:1.5}
.md-typeset .mt-sample .orig{font-size:.75rem;color:var(--muted)}
/* the figures above each table: labelled groups of small tiles */
.md-typeset .facts{display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;margin:.4rem 0 1.2rem}
.md-typeset .fgroup{display:flex;flex-direction:column;gap:.3rem}
.md-typeset .flabel{font:600 .58rem/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.md-typeset .ftiles{display:flex;gap:.4rem}
.md-typeset .ft{display:flex;flex-direction:column;align-items:flex-start;min-width:5.2rem;padding:.4rem .65rem;
  border:1px solid var(--line);border-radius:10px;background:var(--card)}
.md-typeset .ft b{font:600 1rem/1.2 var(--md-text-font-family,sans-serif);color:var(--ink)}
.md-typeset .ft span{font-size:.62rem;color:var(--muted)}
/* the try-out: each word in Diafon with what was typed under it */
.md-typeset .tryout-out{font-family:var(--glyph,var(--serif));line-height:1.2;display:flex;flex-wrap:wrap;align-items:flex-start;gap:.2rem .1rem}
.md-typeset .tryout-out .w{display:inline-flex;flex-direction:column;align-items:center;padding:0 .2rem}
.md-typeset .tryout-out .wg{font-size:1.35rem}
.md-typeset .tryout-out .w code{font-size:.6rem;background:none;padding:0;color:var(--accent)}
.md-typeset .mt-sample .g{font-size:1.2rem}
.md-typeset .mt-sample:empty{display:none}