/* This page is always light, regardless of the visitor's OS/browser theme or the theme they may
   have chosen inside the interactive app (dark, deep indigo, etc.). Permanent reference pages -
   the kind linguists, publications and search/AI crawlers rely on and cite - stay in one
   consistent, neutral, off-white presentation. color-scheme:light stops the browser from
   auto-darkening form controls, scrollbars, etc. even on a dark-mode system. */
:root{color-scheme:light;--bg:#F8F9FA;--bg2:#FFFFFF;--bg3:#F1F3F4;--bg4:#E8EAED;--bdr:#DADCE0;--tx:#202124;--tx2:#3C4043;--tx3:#5F6368;--ac:#1A73E8;--btn:#1A73E8;--tile:#FFFFFF}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.6 "Noto Sans",Inter,"Segoe UI","DejaVu Sans",system-ui,Arial,sans-serif;-webkit-text-size-adjust:100%}
a{color:var(--ac)}a:hover{text-decoration:none}
.wrap{max-width:60rem;margin:0 auto;padding:0 1rem}
.site-header{background:var(--bg2);border-bottom:1px solid var(--bdr)}
.site-header .wrap{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center;justify-content:space-between;padding-top:.75rem;padding-bottom:.75rem}
.brand{font-weight:800;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;color:var(--tx)}.brand span{color:var(--tx3);font-weight:600;font-size:.8em}
.site-header nav{display:flex;flex-wrap:wrap;gap:.25rem 1.1rem;font-size:.92rem;align-items:center}
.nav-donate{background:linear-gradient(135deg,rgba(252,211,77,.9),rgba(245,158,11,.85));color:#451a03!important;font-weight:700;padding:.3rem .8rem;border-radius:999px;border:1px solid rgba(217,119,6,.3)}
.nav-donate:hover{filter:brightness(1.05)}
main{padding-top:1.25rem;padding-bottom:2.5rem}
h1{font-size:clamp(1.6rem,4vw,2.2rem);line-height:1.2;margin:.4rem 0 .6rem}
h2{font-size:1.2rem;margin:2rem 0 .6rem;border-bottom:1px solid var(--bdr);padding-bottom:.3rem}
h3{font-size:1rem;margin:0}
.lead{font-size:1.05rem;color:var(--tx2);max-width:46rem}
.muted{color:var(--tx3);font-size:.9rem;margin:.25rem 0}
.crumbs{font-size:.88rem;color:var(--tx3)}
.tile{display:inline-flex;align-items:center;justify-content:center;background:var(--tile);border:1px solid var(--bdr);border-radius:14px;padding:8px}
.tile.big{width:220px;height:220px}.tile.small{width:76px;height:76px;flex:none;padding:5px}
.glyph{display:block;max-width:100%;height:auto;color:#1E293B}
.tile.big .glyph{width:100%;height:100%}.tile.small .glyph{width:100%;height:100%}
.hero{display:flex;flex-wrap:wrap;gap:1.25rem 2rem;align-items:center;margin:1rem 0}
.actions{flex:1 1 18rem;min-width:0}
.copyrow{display:flex;gap:.5rem;margin:.3rem 0}
.copyrow input{flex:1;min-width:0;padding:.55rem .7rem;border-radius:10px;border:1px solid var(--bdr);background:var(--bg3);color:var(--tx);font:inherit;font-size:.9rem}
.btn{display:inline-block;padding:.55rem 1rem;border-radius:10px;border:0;background:var(--btn);color:#fff;font:inherit;font-weight:700;cursor:pointer;text-decoration:none}
.btn:hover{filter:brightness(1.1)}.btn:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #F59E0B;outline-offset:2px}
.btn-lg{padding:.85rem 1.6rem;font-size:1.1rem}
.btn-donate{background:linear-gradient(135deg,rgba(252,211,77,.95),rgba(245,158,11,.9));color:#451a03;box-shadow:0 4px 18px rgba(245,158,11,.35);border:1px solid rgba(217,119,6,.35)}
.btn-donate:hover{box-shadow:0 6px 22px rgba(245,158,11,.5);filter:brightness(1.04)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.6rem;margin:0}
.facts div{background:var(--bg3);border:1px solid var(--bdr);border-radius:12px;padding:.6rem .8rem}
.facts dt{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--tx3)}.facts dd{margin:.1rem 0 0;font-weight:600;overflow-wrap:anywhere}
.ipa,.latin{font-family:"Noto Sans","DejaVu Sans","Segoe UI",sans-serif}.latin{color:var(--ac);font-weight:600}
.forms{display:flex;flex-wrap:wrap;gap:1.25rem}.forms figure{margin:0;text-align:center}.forms figcaption{font-size:.9rem;margin-top:.4rem;color:var(--tx2)}
.forms .tile{width:150px;height:150px}
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:.75rem}
.cards li{display:flex;gap:.8rem;align-items:center;background:var(--bg3);border:1px solid var(--bdr);border-radius:14px;padding:.6rem}
ol.cards{counter-reset:c}
pre{overflow-x:auto;background:var(--bg3);border:1px solid var(--bdr);border-radius:12px;padding:.8rem;font-size:.8rem;max-height:24rem}
.codeblock{position:relative}
.codeblock pre{margin:0}
.copy-code-btn{position:absolute;top:.5rem;right:.5rem;z-index:1;padding:.35rem .8rem;font-size:.78rem;font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.12)}
details summary{cursor:pointer;color:var(--ac);font-weight:600}
.pager{display:flex;justify-content:space-between;gap:1rem;margin-top:2.5rem;padding-top:1rem;border-top:1px solid var(--bdr)}
.toc{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}.toc a{padding:.35rem .8rem;border:1px solid var(--bdr);border-radius:999px;text-decoration:none;background:var(--bg3)}.count{color:var(--tx3);font-size:.85em}
.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));gap:.6rem}
.grid a{display:flex;flex-direction:column;align-items:center;gap:.15rem;text-decoration:none;color:var(--tx);background:var(--bg3);border:1px solid var(--bdr);border-radius:14px;padding:.6rem .4rem;text-align:center;height:100%}
.grid a:hover{border-color:var(--ac)}.grid .tile.small{width:72px;height:72px}.grid .nm{font-weight:700;font-size:.9rem;overflow-wrap:anywhere}.grid .latin,.grid .ipa{font-size:.8rem;color:var(--tx3)}.grid .latin{color:var(--ac)}
.notice{background:var(--bg3);border:1px solid var(--bdr);border-radius:12px;padding:1rem}
.site-footer{border-top:1px solid var(--bdr);color:var(--tx3);font-size:.88rem;padding:1rem 0 2rem}
/* Comfortable touch targets and spacing on phones, without changing layout on larger screens. */
@media (max-width:520px){
  .tile.big{width:160px;height:160px}
  .copyrow{flex-direction:column}
  .btn,.copyrow input,.grid a{min-height:44px}
  .grid a{padding:.7rem .4rem}
  .cards li{padding:.75rem}
  h1{word-break:break-word}
  .site-header .wrap{padding-top:.6rem;padding-bottom:.6rem}
  .site-header nav{width:100%;justify-content:space-between}
  main{padding-left:0;padding-right:0}
}
@media (prefers-reduced-motion:no-preference){.btn{transition:filter .15s}}