/* ---------- fonts ---------- */
@font-face{ /* IPA + arrows/checks, chars Google's latin subset omits */
  font-family:"STIX Two Text";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(data:font/woff2;base64,d09GMgABAAAAAAU8ABAAAAAACRwAAATfAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbgQQcNAZgP1NUQVRIAFQRCAqFcIRzCxAAATYCJAMcBCAFhHwHIAwHG30HyMSHx818PwTaS6qSo6kZNVdqSnubk82TEzPomTgTN8b/XE47SwO/hRdoqdS/9m+MQWNvks1Z7+iywigx7/WA3bAaarAWBIAFBKRSIQWI/zmDcKSCzs4troZb19MTQ3DrnVAPwm2oQzMCN9DNdf9GxaB6YgTmKm+nacyCuQJkgALIEAUXcEgFZV0I6J4OpkE5wCjnVCTK8hZqkDyDSEROr0wJjG4JfMyivMhCyHsokaoHUOTfJq2IJCEwghtBga0euberqgvqcQ48dY36x2SHf2hncpwH2UAmyNvUIhb5vQE8wKGDK/FJzunt08wz06/pGCIoMg6gIaM9RIEOgaifIoQsBKhT+6wpQQcY+CEa6ecAQwvR4CmBeplaTF1DFeUpbUrA9LHxJeNLxgljapcRo5qAmEywptDMJawMLCkltIeoIDaaslBYvkZoC9o3lA1lVYH0sJWZ9VOingh7WWk3tDsHFJZmzQwRDl68aCB/kAeMeAzaVaug3cmIRDCw0uPH0D46d+4cWIZIO9YQmaBnCCs9vg/tuWs+WKZ7nKE7zILZc2GP3mn1coaBdtU2ttb3qoEIdxhxqQPLEGmGyITV2xnCQty6EmClFe4rZvZeDGMhHgo492inA7ZdPw/tvUel0l0iPMn1wbJlNeKVE3oizLCSbreOla7eNRDhyZ0nsaSOMOI5nqmzRD0OP779GNpHjx7ViDf0RJhhJZ1Ox0oHiVwwGAysdFmHgqPX6xlxH+j//FETI2MrdxacKLDrcp19x9XlE87tobPLh8znlZ9UfhAV4ObfZK9wzFYlTYeHrHe2WbTZ3nmrXVRuSktxcUSVMiojOoQv+PEf1hPG9znOcFIZoqwNcrsUU+3gEx5YvuoL+srdiPQVTpw79/q74pHWvfuuWts+pRy8yme9Hf5Ljio+8uV4u3sCvrnkFlSrDPE4YeC49zn+6qDyKVvrq/v2th4R332dc+ecVkSk371Cf766PDDcp9rhYvzLkfE5ql/CT2nvY9M33in+VraOjU6OI86pdq6rIzxzEqN8swyFthluB/6TvR6X2+FBLx6ffYalfPIdb/oWJMSFl5ZGtDiB/cYr/AMn5y4bu1yLHgcvWYpMpejgqrOiUzw97jg7aWztp0On7bnItLQkJ3VGMjbfCLQOBHC9n1Ge+Z/On6xrs07+3ZySfcUm3zVdafIfvnetYuV/xf9LclvaWULFxec7aB7aXfLU/4qN78ltLzMXMKNawODbFPkBvC10Es4wmlYSDs8Aq83wBiyw9cMaMyz0p2Za/rQc9Cw+so/ExhSBG+EoClbEipIhGzcoGkHYSMnhhRcoBfxQT1ohFl4mMo3FiVwhw9UROSzAkEYFJwZUYhTD6MAICqDh5IfQjy7UQZ3tRR80drsGY5hEIsI4sUl0YQL9GIMGk1CRgX4M0a+NYgK9CEMZclGMKlSjAPWcbA5GX1fjKWgQikqo0YspDKEDE6iFmoDO4qMYAY9IqBCBKPDoVGNxiBjCwvM2nlfET+lmS+IPkbSUCakZpzVmkaExPL0Hmh2CZQfCEc5jaEhEAtTYx6/yg2AuStg1YR7lmMAoBqBGV+dQBqb2GnYR6jYH7HuoF/1q9RQ6oULXucFpoIaDEl0q9hR6JsHAb10tHjMdQBSMymPE9Oo+eh4AAAA=) format("woff2");
  unicode-range:U+0250-02C8,U+2192,U+2713,U+2717;
}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(data:font/woff2;base64,d09GMgABAAAAAATkABAAAAAACPgAAASKAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGx4cLgZgAEQIQAmCcxEQCoIQggMLCgABNgIkAwoEIAWDOgcgDIM0G8cHyAQevpzaH0k2B3mUss0ldFPbBQo5lcroApAXiG77tLeJl/AEiDdg//3VdK/nHcDLgYchtb/zPLnxiNLztp3GUw0M0hRiVwv0JT9bEICfVn6JSGcX9OPFgDWXSp6sQRVhNDrWN647vGc7tdvX7NtJbeMI4XJDs8S1uEAraBatnR8cEiuZKsZ5fVrA5XNpOrbo96LtSjFxCubLc7sWSvEMckSNIf7/BQwhalYjbkFIM7Qi45boKUZEvKqW1whwDRIeL97qjDSvH1GzEllUUfrq0/z7v5JJTTYNTCXNOJbSxQH2kKHAcObSywDzk4KliQTFXNxiG26xGLfYjVszCGpFgtrXBBVE5it83dZjQlxtK1E6r0i3DeJDX7UyqhARKTNb0o5YHVVoEYUImVGFHpFZRx+W7bWG2LIgC3PXF2RWbl6z3jGGZeXmNet7rSEbCnZcOvRZW6RDv2U6Kbtli3Titg22PTmqMMYgDWPBhk1u7U1uZdji/6IKV2Q+PqAP77Z6LOdUusVJpe0W05QZ55luy3km3WLadlThXmWNlJnjWxrXi3tM7hCr9Y6woc9yUi0OdqGQ2THEdE4VCi2FIbYwT/EMJ1IAKbOC63D0YRklTnWXh08NMVvkrxliDjHtFtNORxW+yPw+K5NuMU07ikDHi59KXKUSFU/OhjdSmbxuzOWibPooGuLC/0jD8FcEPBXutWWu4LIluVxgybLcZv+66UsW1/cHRVmuYdHAjJwMNgY/mnLvjfdOjn41v27uK/Pec/W+98DN2caGRwdC+68q5XJN2ipXd7p7lUtryuVKr77aAFDEwIuvqnqSwqhU8DoKMpaCeMsgUD7dVoiPFVQqjI8VolLh+TiRLOLFT6CqehIKEVe44woylsIXbxnER/l0W6G/nkgWEVRQWVU9icfxoOHGCCeSCEDjhaGf5C+sqpj6m9enfw/wyVS9BPDZda2D///7//3aJWMV4EPjQ5Z+Wgs16/9///9Xu/RJSM1eoVlIYrR99r2G+JMQW3ATYf6Yhv7Ih+f2sjEyGT7at5S/NTF8zXwOWqOcN8XwTeR20AYh8rSLepbSboYzVlXOs4HN7GMfeSYTJ85e1rGHLeTZB26MvWy3E2MXe9hEnMVkWcBculhIN9vZwCG8s4ud7CJKLxvYxH62s4Y9DLCBPb1RU61kNDHG9DNIwSAFYVJKapgizGLKnGMyU86lmkV78hzeq2bTGaD1NSZIMgHZBxGo9gitMSQz2c52DBFr9mY8G9i7z8oDbGA9sZ8nI8VK+5h6x6OmUsEc5qVrCaCFRZEgf1ILi6cJkmYCYTqoufkz4acpI8U4RtFOdeEKTyNYznymEKK+xTaNHmYxluE0IqWzmZzgi9COToPpjCaE/KcgDLroposxDBtjm5s4I2ingSC1zUOS4Qyhjkoq5WURKcEwtMc2HyE6aaaGALXNz3UcZAVdjKQEA8xnOokQRcqlrCes4Le4qkiKasT+IpUBtg9mQArycK+uklQ3A74UtX2kgHvgXngN8vxd1HNW06jemyUbiQrYz4C8BwAAAA==) format("woff2");
  unicode-range:U+2192,U+2713,U+2717;
}

/* ---------- tokens ---------- */
:root{
  --bg:#F5F6F2;          /* paper */
  --bg2:#FBFBF8;         /* plate */
  --bg3:#EEF0E9;         /* recessed */
  --line:#D8DDD3;
  --line2:#E6E9E1;
  --ink:#20261F;
  --ink2:#5A6459;
  --ink3:#8B948A;
  --accent:#1E6B5C;
  --accent-soft:#DDEAE4;
  --ok:#1E6B5C;
  --bad:#A93E32;
  --sel:#CFE4DC;

  --vI:#2C5FC4; --vIbg:#E2EAF8;
  --vY:#7A3FC0; --vYbg:#ECE3F8;
  --vE:#127E56; --vEbg:#DCF0E5;
  --vA:#996908; --vAbg:#F4ECD2;
  --vO:#BC4034; --vObg:#F8E3DF;
  --vU:#B03A80; --vUbg:#F6E1EE;

  --serif:"STIX Two Text",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#121714; --bg2:#191F1B; --bg3:#0E1210;
    --line:#2B342E; --line2:#222A25;
    --ink:#E3E9E1; --ink2:#9AA598; --ink3:#6C766B;
    --accent:#54B49C; --accent-soft:#1D3129; --ok:#54B49C; --bad:#E07A6B; --sel:#2A4A3F;
    --vI:#82AAF2; --vIbg:#1D2A42; --vY:#B48CF0; --vYbg:#2B2244;
    --vE:#57C795; --vEbg:#14332A; --vA:#D9A94C; --vAbg:#372D14;
    --vO:#E8816F; --vObg:#3C231E; --vU:#E086BD; --vUbg:#391F30;
  }
}
:root[data-theme="dark"]{
  --bg:#121714; --bg2:#191F1B; --bg3:#0E1210;
  --line:#2B342E; --line2:#222A25;
  --ink:#E3E9E1; --ink2:#9AA598; --ink3:#6C766B;
  --accent:#54B49C; --accent-soft:#1D3129; --ok:#54B49C; --bad:#E07A6B; --sel:#2A4A3F;
  --vI:#82AAF2; --vIbg:#1D2A42; --vY:#B48CF0; --vYbg:#2B2244;
  --vE:#57C795; --vEbg:#14332A; --vA:#D9A94C; --vAbg:#372D14;
  --vO:#E8816F; --vObg:#3C231E; --vU:#E086BD; --vUbg:#391F30;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--serif);font-size:17px;line-height:1.65;
  font-feature-settings:"liga","kern";
}
::selection{background:var(--sel)}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px}
p{margin:0 0 1em}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.2;text-wrap:balance}
button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.skip-link{
  position:fixed;left:16px;top:12px;z-index:1000;padding:8px 12px;border-radius:4px;
  background:var(--ink);color:var(--bg);font:600 13px/1.2 var(--mono);
  transform:translateY(-180%);transition:transform .15s ease
}
.skip-link:focus{transform:translateY(0)}
.site-alert{
  margin:0;padding:12px 20px;background:var(--bad);color:#fff;text-align:center;
  font:600 14px/1.45 var(--mono)
}
.site-alert a{color:inherit}
main:focus{outline:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.prose{max-width:66ch}
.prose.lead{font-size:18.5px}
em{font-style:italic}
.small{font-size:14px;color:var(--ink2)}

/* ---------- project bar ---------- */
.projectbar{background:var(--bg2);border-bottom:1px solid var(--line)}
.projectbar .wrap{
  min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.projectbar-note{
  color:var(--ink2);font:500 11.5px/1.2 var(--mono);letter-spacing:.04em;
}
.projectbar-links{display:flex;align-items:center;gap:8px}
.github-link{
  display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid var(--line);
  border-radius:6px;background:var(--bg);color:var(--accent);font:600 11.5px/1.2 var(--mono);
  text-decoration:none;white-space:nowrap;
}
.github-link:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
.github-link .external{font-size:14px;line-height:1}
@media (max-width:560px){
  .projectbar .wrap{min-height:40px;justify-content:flex-end}
  .projectbar-note{display:none}
}

/* the two registers: English serif, Luryt mono */
.lx{font-family:var(--mono);font-size:.88em;font-weight:400;letter-spacing:.01em}
b.lx,.lx.b{font-weight:600}
.ipa{font-family:var(--serif)}
.eyebrow{
  font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
}
.cv-i{color:var(--vI)} .cv-y{color:var(--vY)} .cv-e{color:var(--vE)}
.cv-a{color:var(--vA)} .cv-o{color:var(--vO)} .cv-u{color:var(--vU)}

/* ---------- hero ---------- */
.hero{padding:72px 0 40px}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:32px;align-items:start;margin-bottom:32px;
}
.hero .brand-lockup{display:flex;align-items:center;gap:14px;margin:14px 0 10px}
.hero .brand-mark{display:block;width:clamp(52px,8vw,72px);height:auto;flex:0 0 auto}
.hero .name{
  font-family:var(--mono);font-weight:600;letter-spacing:.02em;
  font-size:clamp(46px,8vw,76px);line-height:1.05;margin:0;
}
.hero .thesis{font-size:clamp(21px,3vw,26px);font-style:italic;color:var(--ink2);margin:0 0 26px}
.hero-copy .prose{max-width:58ch}
.namenote{border-left:2px solid var(--line);padding:2px 0 2px 14px;margin:22px 0 0}

/* ---------- visual explainers ---------- */
.visual-card{
  margin:26px 0;background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  overflow:hidden;box-shadow:0 16px 42px rgba(32,38,31,.07);
}
.visual-card img{display:block;width:100%;height:auto;background:#F3EEE2}
.visual-card figcaption{border-top:1px solid var(--line);padding:16px 18px;background:var(--bg2)}
.visual-card figcaption.keyed{padding:0}
.visual-caption-head{padding:14px 18px}
.visual-card .visual-title{
  display:block;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);margin-bottom:5px;
}
.visual-card .visual-note{font-size:14px;color:var(--ink2);margin:0}

/* Data-driven teaching diagrams: exact text stays live; generated art is illustrative only. */
.dense-diagram{
  container-type:inline-size;position:relative;padding:clamp(16px,2.8vw,28px);
  overflow:hidden;color:var(--ink);font-size:13px;line-height:1.35;
  background:
    radial-gradient(circle at 92% 4%,color-mix(in srgb,var(--vIbg) 74%,transparent) 0 18%,transparent 38%),
    linear-gradient(145deg,var(--bg2),var(--bg3));
}
.dense-diagram::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.32;
  background-image:linear-gradient(var(--line2) 1px,transparent 1px),linear-gradient(90deg,var(--line2) 1px,transparent 1px);
  background-size:34px 34px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.28),transparent 54%);
}
.dense-diagram>*{position:relative}
.dd-head{display:flex;justify-content:space-between;gap:18px;align-items:end;margin-bottom:16px}
.dd-kicker{
  display:block;color:var(--accent);font:600 10px/1.2 var(--mono);
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px
}
.dd-title{font-size:clamp(19px,3cqw,28px);line-height:1.08;font-weight:600}
.dd-copy{max-width:46ch;margin:0;color:var(--ink2);font-size:12.5px}
.dd-counts{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:14px}
.dd-count{
  border:1px solid var(--line);border-radius:8px;padding:9px 10px;background:color-mix(in srgb,var(--bg2) 92%,transparent);
}
.dd-count b{display:block;font:600 19px/1 var(--mono);color:var(--accent)}
.dd-count span{display:block;color:var(--ink2);font-size:10.5px;margin-top:4px}
.dd-grid{display:grid;gap:9px}
.dd-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.dd-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.dd-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.dd-grid.six{grid-template-columns:repeat(3,minmax(0,1fr))}
.dd-card{
  min-width:0;border:1px solid var(--line);border-top:3px solid var(--ddc,var(--accent));
  border-radius:9px;padding:11px;background:color-mix(in srgb,var(--bg2) 94%,transparent);
  box-shadow:0 4px 12px rgba(26,35,30,.045);
}
.dd-card[data-v="i"]{--ddc:var(--vI);--ddbg:var(--vIbg)}
.dd-card[data-v="y"]{--ddc:var(--vY);--ddbg:var(--vYbg)}
.dd-card[data-v="e"]{--ddc:var(--vE);--ddbg:var(--vEbg)}
.dd-card[data-v="a"]{--ddc:var(--vA);--ddbg:var(--vAbg)}
.dd-card[data-v="o"]{--ddc:var(--vO);--ddbg:var(--vObg)}
.dd-card[data-v="u"]{--ddc:var(--vU);--ddbg:var(--vUbg)}
.dd-card-head{display:flex;align-items:start;gap:9px;margin-bottom:6px}
.dd-code{
  display:inline-grid;place-items:center;min-width:34px;height:30px;padding:0 7px;border-radius:6px;
  background:var(--ddbg,var(--accent-soft));color:var(--ddc,var(--accent));
  font:600 17px/1 var(--mono);white-space:nowrap
}
.dd-name{display:block;font-weight:600;font-size:14px;line-height:1.15}
.dd-meta{display:block;color:var(--ink3);font:500 9.5px/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;margin-top:3px}
.dd-desc{color:var(--ink2);font-size:11.5px;margin:0}
.dd-detail{margin-top:7px;padding-top:7px;border-top:1px solid var(--line2);font-size:11px;color:var(--ink2)}
.dd-form{
  padding:8px 10px;border:1px solid var(--line);border-radius:7px;background:var(--bg3);
  font:600 13px/1.4 var(--mono);overflow-wrap:anywhere
}
.dd-form.big{font-size:clamp(17px,2.5cqw,24px);text-align:center;padding:12px}
.dd-formula{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:11px 0}
.dd-seg{
  min-width:92px;padding:10px;border:1px solid var(--line);border-radius:8px;
  background:var(--bg2);text-align:center
}
.dd-seg b{display:block;font:600 20px/1.15 var(--mono)}
.dd-seg span{font-size:10.5px;color:var(--ink2)}
.dd-op{font:600 18px/1 var(--mono);color:var(--ink3)}
.dd-tokenrow{display:flex;align-items:stretch;gap:5px;flex-wrap:wrap}
.dd-token{
  display:inline-flex;flex-direction:column;justify-content:center;min-width:56px;padding:7px 8px;
  border-radius:6px;background:var(--bg2);border:1px solid var(--line)
}
.dd-token b{font:600 12.5px/1.2 var(--mono)}
.dd-token small{font-size:9.5px;color:var(--ink2);margin-top:3px}
.dd-note{
  margin-top:10px;padding:8px 10px;border-left:3px solid var(--ddc,var(--accent));
  background:color-mix(in srgb,var(--accent-soft) 46%,transparent);font-size:11.5px;color:var(--ink2)
}
.dd-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.dd-step{position:relative}
.dd-step:not(:last-child)::after{
  content:"→";position:absolute;right:-14px;top:48%;z-index:2;color:var(--accent);
  font:600 18px/1 var(--mono)
}
.dd-step .dd-num{display:block;color:var(--ink3);font:600 9px/1 var(--mono);letter-spacing:.12em;margin-bottom:7px}
.dd-mini-matrix{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;margin:7px 0}
.dd-mini-matrix i{display:block;aspect-ratio:1;border-radius:2px;background:var(--line)}
.dd-mini-matrix i:nth-child(6n+1){background:var(--vIbg)}
.dd-mini-matrix i:nth-child(6n+2){background:var(--vYbg)}
.dd-mini-matrix i:nth-child(6n+3){background:var(--vEbg)}
.dd-mini-matrix i:nth-child(6n+4){background:var(--vAbg)}
.dd-mini-matrix i:nth-child(6n+5){background:var(--vObg)}
.dd-mini-matrix i:nth-child(6n){background:var(--vUbg)}
.dd-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:3px}
.dd-sounds{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.dd-sound{
  position:relative;display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;
  gap:0 7px;min-width:0;padding:6px 7px;border:1px solid var(--line);border-radius:6px;background:var(--bg2)
}
.dd-sound .letter{grid-row:1/3;font:600 20px/1.35 var(--mono);color:var(--accent)}
.dd-sound .ipa{font-size:11px;font-weight:600}
.dd-sound .hint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink2);font-size:9.5px}
.dd-sound .index{position:absolute;right:4px;top:3px;color:var(--ink3);font:500 8px/1 var(--mono)}
.dd-vowels{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:9px}
.dd-vowel{text-align:center;padding:7px 4px;border-radius:7px;background:var(--ddbg);border:1px solid color-mix(in srgb,var(--ddc) 24%,var(--line))}
.dd-vowel b{display:block;color:var(--ddc);font:600 18px/1 var(--mono)}
.dd-vowel span{font-size:9.5px;color:var(--ink2)}
.dd-art{overflow:hidden;border-radius:7px;background:#eaf2f7;border:1px solid color-mix(in srgb,var(--ddc,var(--accent)) 18%,var(--line));margin:7px 0}
.dd-art img{display:block;width:100%;height:100%;object-fit:cover;filter:none!important}
.dd-domain-art{aspect-ratio:1.85/1}
.dd-rootlist{display:flex;gap:4px;flex-wrap:wrap;margin-top:7px}
.dd-root{
  display:inline-flex;gap:4px;align-items:baseline;padding:3px 5px;border-radius:4px;
  background:var(--bg3);font-size:9.5px;color:var(--ink2)
}
.dd-root b{font:600 10.5px/1 var(--mono);color:var(--ink)}
.dd-matrix{display:grid;grid-template-columns:104px repeat(6,112px);min-width:776px;gap:3px}
.dd-mx-head,.dd-mx-row,.dd-mx-cell{border-radius:5px;border:1px solid var(--line);background:var(--bg2)}
.dd-mx-head,.dd-mx-row{padding:7px;display:flex;flex-direction:column;justify-content:center}
.dd-mx-head{text-align:center;align-items:center}
.dd-mx-head b,.dd-mx-row b{font:600 16px/1 var(--mono)}
.dd-mx-head span,.dd-mx-row span{font-size:9px;color:var(--ink2)}
.dd-mx-cell{padding:6px 7px;min-height:54px;border-top:3px solid var(--ddc)}
.dd-mx-cell b{display:block;font:600 12px/1.2 var(--mono)}
.dd-mx-cell span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:9.5px;color:var(--ink2)}
.dd-timeline{position:relative;display:grid;grid-template-columns:repeat(6,124px);gap:8px;min-width:784px;padding-top:14px}
.dd-timeline::before{content:"";position:absolute;left:58px;right:58px;top:28px;height:2px;background:var(--line)}
.dd-time{position:relative;padding-top:25px}
.dd-time::before{content:"";position:absolute;left:50%;top:8px;width:12px;height:12px;border:3px solid var(--ddc);border-radius:50%;background:var(--bg2);transform:translateX(-50%)}
.dd-time:last-child::before{border-radius:2px;transform:translateX(-50%) rotate(45deg)}
.dd-index-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px}
.dd-index{
  display:flex;justify-content:space-between;align-items:center;padding:5px 6px;
  border:1px solid var(--line);border-radius:5px;background:var(--bg2)
}
.dd-index b{font:600 12px/1 var(--mono)}
.dd-index span{font:500 9px/1 var(--mono);color:var(--ink3)}
.dd-clause{display:grid;grid-auto-flow:column;grid-auto-columns:92px;gap:5px;width:max-content}
.dd-slot{position:relative;min-height:86px;padding:8px 7px;border:1px solid var(--line);border-top:4px solid var(--ddc,var(--accent));border-radius:7px;background:var(--bg2)}
.dd-slot b{display:block;font:600 13px/1.2 var(--mono)}
.dd-slot span{display:block;font-size:9.5px;color:var(--ink2);margin-top:4px}
.dd-slot small{position:absolute;right:5px;bottom:4px;font:500 8px/1 var(--mono);color:var(--ink3)}
.dd-scene-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dd-scene-card{overflow:hidden;border:1px solid var(--line);border-top:4px solid var(--ddc,var(--accent));border-radius:9px;background:var(--bg2)}
.dd-scene{aspect-ratio:16/9;background:#e8f1f7;overflow:hidden}
.dd-scene img{display:block;width:100%;height:100%;object-fit:cover;filter:none!important}
.dd-scene-card .dd-scene-copy{padding:10px}
.dd-verdict{display:flex;align-items:center;gap:7px;margin-top:7px;color:var(--ink2);font-size:11px}
.dd-verdict b{font:600 21px/1 var(--mono);color:var(--ddc,var(--accent))}
.dd-role-layout{display:grid;grid-template-columns:minmax(250px,1.15fr) minmax(0,.85fr);gap:10px}
.dd-role-art{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:9px;background:#eaf2f7}
.dd-role-art img{width:100%;height:100%;min-height:290px;display:block;object-fit:cover;filter:none!important}
.dd-role-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.dd-role{padding:7px;border:1px solid var(--line);border-left:3px solid var(--ddc);border-radius:6px;background:var(--bg2)}
.dd-role b{font:600 13px/1 var(--mono);color:var(--ddc)}
.dd-role strong{font-size:11px;margin-left:5px}
.dd-role span{display:block;color:var(--ink2);font-size:9.5px;margin-top:3px}
.dd-glyph{height:94px;display:grid;place-items:center;margin:2px 0 6px}
.dd-glyph svg{width:100%;height:94px;overflow:visible}
.dd-glyph .ground{fill:var(--bg3);stroke:var(--ink2);stroke-width:2}
.dd-glyph .figure{fill:var(--ddc);stroke:var(--ink);stroke-width:2}
.dd-glyph .guide{fill:none;stroke:var(--ddc);stroke-width:2;stroke-dasharray:5 4}
.dd-space-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.dd-space-grid .dd-scene{aspect-ratio:1.25/1}
.dd-space-grid .dd-scene img{object-fit:contain}
.dd-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.dd-panel{border:1px solid var(--line);border-radius:9px;padding:11px;background:color-mix(in srgb,var(--bg2) 94%,transparent)}
.dd-panel-title{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.dd-panel-title b{font-size:15px}
.dd-rows{display:grid;gap:4px}
.dd-row{display:grid;grid-template-columns:38px minmax(88px,.8fr) 1fr;gap:6px;align-items:baseline;padding:5px 6px;border-radius:5px;background:var(--bg3)}
.dd-row .f{font:600 13px/1 var(--mono);color:var(--ddc)}
.dd-row .v{font-size:10px;color:var(--ink2)}
.dd-row .g{font-size:11px}
.dd-parse{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin:10px 0}
.dd-parse-step{position:relative;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--bg2)}
.dd-parse-step:not(:last-child)::after{content:"→";position:absolute;right:-12px;top:42%;z-index:2;color:var(--accent);font:600 17px/1 var(--mono)}
.dd-parse-step .n{font:600 9px/1 var(--mono);color:var(--ink3)}
.dd-parse-step .word{display:block;margin:8px 0;font:600 18px/1 var(--mono)}
.dd-checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.dd-check{padding:7px;border-radius:6px;border:1px solid var(--line);background:var(--bg3);font-size:10px;color:var(--ink2)}
.dd-check b{display:block;font:600 12px/1.2 var(--mono);color:var(--ink);margin-bottom:3px}
.hero-visual .dense-diagram{padding:16px}
.hero-visual .dd-head{display:none}
.hero-visual .dd-copy{font-size:10.5px}
.hero-visual .dd-count{padding:7px}
.hero-visual .dd-count b{font-size:16px}
.hero-visual .dd-flow{gap:10px}
.hero-visual .dd-card{padding:8px}
.hero-visual .dd-step:not(:last-child)::after{right:-9px;font-size:14px}
.hero-visual .dd-mini-matrix i{height:6px;aspect-ratio:auto}
.hero-visual{margin:0;align-self:center}
.hero-visual img{aspect-ratio:120/67;object-fit:contain}
.hero-visual figcaption{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;align-items:baseline}
.hero-visual .visual-title{margin:0;white-space:nowrap}
.visual-key{
  list-style:none;margin:0;padding:0;display:grid;gap:0;border:1px solid var(--line);
  border-radius:7px;overflow:hidden;background:var(--bg2);
}
.visual-key li{padding:11px 12px;border-top:3px solid var(--key);min-width:0}
.visual-key li+li{border-left:1px solid var(--line2)}
.visual-key .key-form{font-family:var(--mono);font-weight:600;font-size:15px;color:var(--key)}
.visual-key .key-name{font-weight:600;font-size:14px;margin-left:5px}
.visual-key .key-copy{display:block;font-size:12.5px;color:var(--ink2);line-height:1.4;margin-top:3px}
.domain-key{grid-template-columns:repeat(3,1fr);border-radius:0;border:0;border-top:1px solid var(--line)}
.domain-key li:nth-child(4){border-left:0}
.domain-key li:nth-child(n+4){border-top-width:3px}
.scale-key{grid-template-columns:repeat(6,1fr);border-radius:0;border:0;border-top:1px solid var(--line)}
.scale-key li{text-align:center;padding:10px 6px}
.scale-key .key-name{display:block;margin:2px 0 0;font-size:12px;font-weight:400;color:var(--ink2)}
.space-key{grid-template-columns:repeat(3,1fr);border-radius:0;border:0;border-top:1px solid var(--line)}
.space-key .key-form{display:block;font-size:12.5px;line-height:1.45;color:var(--ink)}
.space-key .key-name{display:block;margin:4px 0 0;font-size:12px;color:var(--ink2)}
.four-key{grid-template-columns:repeat(4,1fr)}
.duo-key{grid-template-columns:repeat(2,1fr);border-radius:0;border:0;border-top:1px solid var(--line)}
.duo-key .key-form{display:block;font-size:13px;line-height:1.4;color:var(--ink)}
.duo-key .key-name{display:block;margin:4px 0 0;font-size:12px;color:var(--ink2)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .visual-card img{filter:brightness(.82) saturate(.88)}
}
:root[data-theme="dark"] .visual-card img{filter:brightness(.82) saturate(.88)}
:root[data-theme="dark"] .dd-art img,
:root[data-theme="dark"] .dd-scene img,
:root[data-theme="dark"] .dd-role-art img{filter:brightness(.78) saturate(.84)!important}
@media (max-width:820px){
  .hero-grid{grid-template-columns:1fr;gap:24px}
  .hero-visual{width:100%}
  .domain-key{grid-template-columns:repeat(2,1fr)}
  .domain-key li:nth-child(odd){border-left:0}
  .domain-key li:nth-child(4){border-left:1px solid var(--line2)}
  .scale-key{grid-template-columns:repeat(3,1fr)}
  .scale-key li:nth-child(4){border-left:0}
  .four-key{grid-template-columns:repeat(2,1fr)}
  .four-key li:nth-child(odd){border-left:0}
  .dd-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dd-step:nth-child(2)::after{display:none}
  .dd-grid.three,.dd-grid.six{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dd-role-layout{grid-template-columns:1fr}
  .dd-role-art img{min-height:0;aspect-ratio:16/9}
  .dd-space-grid{grid-template-columns:1fr}
  .dd-space-grid .dd-scene{aspect-ratio:4/3}
}
@media (max-width:560px){
  .hero{padding-top:46px}
  .hero-visual figcaption{grid-template-columns:1fr;gap:3px}
  .domain-key,.space-key,.duo-key{grid-template-columns:1fr}
  .domain-key li,.space-key li,.duo-key li{border-left:0!important}
  .scale-key{grid-template-columns:repeat(2,1fr)}
  .scale-key li:nth-child(odd){border-left:0}
  .scale-key li:nth-child(4){border-left:1px solid var(--line2)}
  .dense-diagram{padding:14px}
  .dd-head{display:block}
  .dd-copy{margin-top:6px}
  .dd-counts{grid-template-columns:repeat(2,1fr)}
  .dd-flow,.dd-grid.two,.dd-grid.three,.dd-grid.four,.dd-grid.six,.dd-scene-grid,.dd-split{grid-template-columns:1fr}
  .dd-step::after{display:none!important}
  .dd-sounds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dd-vowels{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dd-index-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .dd-role-list{grid-template-columns:1fr}
  .dd-row{grid-template-columns:34px minmax(76px,.7fr) 1fr}
  .dd-parse,.dd-checks{grid-template-columns:1fr}
  .dd-parse-step::after{display:none!important}
}

/* ---------- plates ---------- */
.plate{
  background:var(--bg2);border:1px solid var(--line);border-radius:6px;
  padding:22px 24px;margin:26px 0;
}
.plate .plate-cap{font-size:13.5px;color:var(--ink2);margin:14px 0 0}
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- word anatomy ---------- */
.an-word{display:flex;align-items:flex-end;gap:4px;flex-wrap:wrap;font-family:var(--mono);font-weight:600;
  font-size:clamp(38px,7vw,64px);line-height:1.1}
.an-seg{
  font:inherit;letter-spacing:.02em;padding:0 6px 8px;border-bottom:4px solid var(--line);
  transition:border-color .15s,background .15s;border-radius:4px 4px 0 0;
}
.an-seg[data-k="pre"]{border-bottom-color:var(--accent)}
.an-seg[data-k="root"]{border-bottom-color:var(--ink3)}
.an-seg[data-k="suf"]{border-bottom-color:var(--vO)}
.an-seg.hl,.an-seg:hover{background:var(--bg3)}
.an-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:22px}
.an-card{border-top:3px solid var(--line);padding-top:10px;transition:background .15s;border-radius:0 0 4px 4px}
.an-card.hl{background:var(--bg3)}
.an-card[data-k="pre"]{border-top-color:var(--accent)}
.an-card[data-k="root"]{border-top-color:var(--ink3)}
.an-card[data-k="suf"]{border-top-color:var(--vO)}
.an-card h4{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);margin-bottom:6px}
.an-card p{font-size:14.5px;margin:0;color:var(--ink)}
.an-sum{margin-top:20px;padding-top:16px;border-top:1px solid var(--line2);font-size:16px}
@media (prefers-reduced-motion: reduce){
  .an-seg,.an-card,.navlink{transition:none}
}

/* ---------- three rules ---------- */
.rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin:34px 0 8px}
.rule{background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:18px 20px}
.rule .rn{font-family:var(--mono);font-size:12px;color:var(--ink3);letter-spacing:.14em}
.rule h3{font-size:18px;margin:6px 0 8px}
.rule p{font-size:14.5px;color:var(--ink2);margin:0}

/* ---------- nav ---------- */
.topnav{
  position:sticky;top:0;z-index:50;background:var(--bg);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.topnav .wrap{display:flex;align-items:center;gap:18px}
.topnav .mark{font-family:var(--mono);font-weight:600;font-size:14px;padding:11px 0;white-space:nowrap}
.topnav .links{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.topnav .links::-webkit-scrollbar{display:none}
.navlink{
  font-family:var(--mono);font-size:12.5px;color:var(--ink2);white-space:nowrap;
  padding:12px 9px;text-decoration:none;border-bottom:2px solid transparent;transition:color .15s;
}
.navlink:hover{color:var(--ink)}
.navlink.on{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- chapters ---------- */
.ch{padding:58px 0 8px;scroll-margin-top:64px}
.ch>.wrap>header{margin-bottom:22px}
.ch h2{font-size:clamp(26px,4vw,32px);margin-top:6px}
.chsub{font-size:16.5px;font-style:italic;color:var(--ink2);margin-top:8px}
.ch h3{font-size:19px;margin:34px 0 10px}
hr.chrule{border:none;border-top:1px solid var(--line);margin:52px 0 0}

/* ---------- tables ---------- */
table{border-collapse:collapse;width:100%;font-size:14.5px}
th{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
   color:var(--ink2);text-align:left;padding:7px 12px 7px 0;border-bottom:1px solid var(--line)}
td{padding:7px 12px 7px 0;border-bottom:1px solid var(--line2);vertical-align:baseline}
tr:last-child td{border-bottom:none}
td.c,th.c{text-align:center;padding:7px 6px}
.num{font-variant-numeric:tabular-nums}

/* consonant grid */
.congrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.con{background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:10px 12px;position:relative}
.con .L{font-family:var(--mono);font-weight:600;font-size:22px}
.con .p{color:var(--ink2);font-size:14px;margin-left:6px}
.con .hint{display:block;font-size:13px;color:var(--ink2);margin-top:2px}
.con.trap{border-color:var(--accent)}
.con.trap::after{
  content:"careful";position:absolute;top:8px;right:10px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
}
.vowrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.vow{border:1px solid var(--line);border-radius:6px;padding:10px 12px;background:var(--bg2)}
.vow .L{font-family:var(--mono);font-weight:600;font-size:22px}
.vow .p{color:var(--ink2);font-size:14px;margin-left:6px}
.vow .hint{display:block;font-size:13px;color:var(--ink2);margin-top:2px}
.vow-i{box-shadow:inset 0 3px 0 var(--vI)} .vow-y{box-shadow:inset 0 3px 0 var(--vY)}
.vow-e{box-shadow:inset 0 3px 0 var(--vE)} .vow-a{box-shadow:inset 0 3px 0 var(--vA)}
.vow-o{box-shadow:inset 0 3px 0 var(--vO)} .vow-u{box-shadow:inset 0 3px 0 var(--vU)}

/* word template diagram */
.slots{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;font-family:var(--mono)}
.slot{border:1px solid var(--line);border-radius:6px;padding:10px 14px;background:var(--bg2);text-align:center}
.slot.opt{border-style:dashed;background:transparent}
.slot .f{font-weight:600;font-size:17px}
.slot .l{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);margin-top:4px}

/* ---------- interlinear ---------- */
.ix{margin:18px 0 22px}
.ix-s{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:flex-end}
.ix-w{display:flex;flex-direction:column}
.ix-w .lx{font-size:16px}
.ix-w .g{font-size:12.5px;color:var(--ink2);margin-top:1px}
.ix-t{font-style:italic;color:var(--ink2);margin-top:8px;font-size:15.5px}
.ix.tight{margin:10px 0}

/* ---------- matrix ---------- */
.matrix{display:grid;grid-template-columns:auto repeat(6,minmax(96px,1fr));gap:4px;min-width:760px}
.mx-corner{padding:6px;font-family:var(--mono);font-size:10.5px;color:var(--ink3);align-self:end}
.mx-h{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
      color:var(--ink2);text-align:center;padding:4px 2px 6px}
.mx-h b{display:block;font-size:15px;letter-spacing:0}
.mx-r{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
      color:var(--ink2);display:flex;flex-direction:column;justify-content:center;padding-right:10px;text-align:right}
.mx-r b{font-size:15px;letter-spacing:0}
.mx-c{
  background:var(--bg2);border:1px solid var(--line);border-radius:5px;
  padding:9px 8px;text-align:center;transition:border-color .12s,background .12s;
}
.mx-c:hover{background:var(--bg3)}
.mx-c.on{border-color:var(--accent);background:var(--accent-soft)}
.mx-c .r{font-family:var(--mono);font-weight:600;font-size:16px;display:block}
.mx-c .g{display:block;font-size:11.5px;color:var(--ink2);margin-top:2px;line-height:1.3}
.mx-detail{margin-top:16px;border-top:1px solid var(--line2);padding-top:16px}
.mx-detail .dr{font-family:var(--mono);font-weight:600;font-size:26px}
.mx-detail .dg{font-size:16px;font-style:italic;color:var(--ink2);margin:2px 0 10px}
.mx-detail dl{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;font-size:14.5px;margin:0}
.mx-detail dt{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);padding-top:2px}
.mx-detail dd{margin:0}
.formula{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap;font-family:var(--mono);margin:18px 0}

/* ---------- series cards ---------- */
.sgroup{margin:34px 0 6px}
.sgroup h3{margin-bottom:4px}
.sgroup .gsub{font-size:14.5px;color:var(--ink2);margin:0 0 14px}
.series-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.scard{background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:16px 18px}
.scard header{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}
.scard .sc{font-family:var(--mono);font-weight:600;font-size:24px}
.scard .sn{font-size:16px;font-weight:600}
.scard .scale{font-size:12.5px;color:var(--ink2);font-style:italic;margin:0 0 10px}
.scard table{font-size:13.5px}
.scard td{padding:4.5px 10px 4.5px 0;border-bottom:1px solid var(--line2)}
.scard td.f{font-family:var(--mono);font-weight:600;white-space:nowrap}
.scard td.v{color:var(--ink2);white-space:nowrap}
.scard .snote{font-size:13px;color:var(--ink2);margin:10px 0 0;border-top:1px solid var(--line2);padding-top:9px}
.scard .snote .lx{font-size:12.5px}

/* ---------- numbers ---------- */
.numgrid{min-width:560px}
.numgrid th{text-align:center}
.numgrid td{border-bottom:1px solid var(--line2);text-align:center;padding:5px 6px}
.numgrid td.rl{font-family:var(--mono);font-weight:600;text-align:right;padding-right:12px;white-space:nowrap}
.numgrid td.rl span{color:var(--ink3);font-weight:400;font-size:11.5px}
.numgrid .lx{font-weight:600}
.numgrid .nn{color:var(--ink2);font-size:12px;margin-left:4px}
.conv{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.conv .cell{display:flex;flex-direction:column;gap:8px}
.conv label{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.conv input{
  font-family:var(--mono);font-size:18px;padding:9px 12px;border:1px solid var(--line);
  border-radius:6px;background:var(--bg);color:var(--ink);width:100%;
}
.conv input:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.conv output{font-family:var(--mono);font-size:16px;min-height:24px;display:block}
.conv output .err{color:var(--bad);font-size:13px;font-family:var(--serif)}
.conv output .big{font-weight:600;font-size:20px}

/* ---------- practice ---------- */
.drill{border:1px solid var(--line);border-radius:6px;background:var(--bg2);margin:0 0 12px;overflow:hidden}
.drill>button{
  display:flex;width:100%;justify-content:space-between;align-items:baseline;gap:16px;
  text-align:left;padding:13px 16px;
}
.drill>button:hover{background:var(--bg3)}
.drill .q{font-family:var(--mono);font-size:16.5px}
.drill .tog{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.drill .a{display:none;padding:2px 16px 14px;border-top:1px dashed var(--line2)}
.drill.open .a{display:block}
.drill .a .ix{margin:10px 0 2px}

/* ---------- parser ---------- */
.parser input{
  font-family:var(--mono);font-size:20px;padding:11px 14px;border:1px solid var(--line);
  border-radius:6px;background:var(--bg);color:var(--ink);width:100%;max-width:420px;
}
.parser input:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.chip{
  font-family:var(--mono);font-size:13px;border:1px solid var(--line);border-radius:99px;
  padding:4px 12px;background:var(--bg2);
}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.pout{margin-top:20px}
.pout .verdict{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px}
.pout .verdict.good{color:var(--ok)} .pout .verdict.bad{color:var(--bad)}
.pout .an-word{font-size:clamp(30px,5vw,44px)}
.pout ul.errs{margin:8px 0 0;padding-left:20px;font-size:14.5px;color:var(--bad)}
.pout .det{margin-top:14px;display:grid;grid-template-columns:auto 1fr;gap:5px 18px;font-size:14.5px}
.pout .det dt{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);padding-top:2px}
.pout .det dd{margin:0}
.pout .hint{margin-top:12px;font-size:14px;color:var(--ink2);font-style:italic}

/* ---------- reference ---------- */
.refcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.refbox{background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:16px 18px}
.refbox h4{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);margin:0 0 10px}
.refbox ul{margin:0;padding:0;list-style:none;font-size:14px}
.refbox li{padding:3.5px 0;border-bottom:1px solid var(--line2)}
.refbox li:last-child{border-bottom:none}
.refbox .lx{font-weight:600}
.edges{margin:8px 0 0;padding-left:20px}
.edges li{margin:4px 0}

/* ---------- footer ---------- */
footer.colophon{border-top:1px solid var(--line);margin-top:64px;padding:28px 0 48px}
footer.colophon p{font-size:13.5px;color:var(--ink2);margin:0 0 6px}