:root{--ink:#28303f;--ink-soft:#5b6577;--sky:#eaf3ff;--paper:#fff;--jade:#1f7a5c;--rose:#ef8d90;--grid:#9fb4d3;--line:rgba(77,88,110,.14)}
*{box-sizing:border-box}
body{margin:0;background:var(--sky);color:var(--ink);font-family:"Segoe UI",system-ui,sans-serif;line-height:1.6}
main{max-width:760px;margin:0 auto;padding:26px 18px 64px}
a{color:var(--jade)}
.crumbs{font-size:.85rem;color:var(--ink-soft);margin:0 0 1rem}
.crumbs a{color:var(--ink-soft)}
h1{font-size:1.6rem;line-height:1.25;margin:0 0 .2rem}
h1 .c{font-size:3rem;line-height:1;vertical-align:-.35em;margin-right:.2em}
h2{font-size:1.15rem;margin:2rem 0 .6rem}
.lead{margin:0 0 1.2rem}
.facts{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin:0 0 1.4rem;font-size:.9rem;color:var(--ink-soft)}
.facts b{color:var(--ink)}
.defs{position:absolute;width:0;height:0}
.chart{margin:10px 0 0;overflow-x:auto}.chart img{max-width:100%;height:auto;border-radius:10px}
.steps{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1rem}
.step{margin:0;width:76px}
.step svg{width:76px;height:76px;background:var(--paper);border:2px solid var(--rose);border-radius:6px}
.step .grid line{stroke:var(--grid);stroke-width:12;stroke-dasharray:36 30}
.step use{fill:#c3ccdb}
.step use.now{fill:var(--ink)}
.step figcaption{text-align:center;font-size:.72rem;color:var(--ink-soft)}
.cta{display:inline-block;margin:.4rem 0 1rem;padding:9px 16px;border-radius:999px;background:var(--jade);color:#fff;text-decoration:none;font-weight:700}
table{width:100%;border-collapse:collapse}
td{padding:9px 6px;border-top:1px solid var(--line);vertical-align:top;font-size:.95rem}
td.w{white-space:nowrap;width:1%}
.ruby{display:inline-flex;gap:3px;font-size:1.3rem}
.ruby rt{font-size:.6rem;color:var(--ink-soft);font-weight:400}
.def{color:var(--ink-soft);font-size:.88rem}
/* The stroke order in words, above the figures that draw it. Slightly set
   back, because the diagrams are the answer and this restates them for a
   reader that cannot see one. */
.runs{margin:.2rem 0 .7rem;color:var(--ink-soft);font-size:.9rem}
.ex{margin:.25rem 0 0;font-size:.92rem}.ex .t{color:var(--ink-soft);font-size:.85rem;display:block}
.grid-chars{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;margin:0 0 1.6rem}
.grid-chars a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;background:var(--paper);border-radius:10px;text-decoration:none;color:var(--ink)}
.grid-chars .c{font-size:1.7rem;line-height:1.1}
.grid-chars .p{font-size:.68rem;color:var(--ink-soft)}
.bands{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1.4rem}
.bands a{padding:8px 14px;border-radius:999px;background:var(--paper);text-decoration:none;font-weight:700;color:var(--ink)}
h3{font-size:.92rem;font-weight:700;color:var(--ink-soft);margin:1.1rem 0 .4rem}
.grid-rads{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:8px;margin:0 0 1.4rem}
.grid-rads a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 6px;background:var(--paper);border-radius:10px;text-decoration:none;color:var(--ink);text-align:center}
.grid-rads .c{font-size:1.6rem;line-height:1.1}
.grid-rads .p{font-size:.68rem;color:var(--ink-soft);line-height:1.25}
footer{margin-top:2.4rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.85rem;color:var(--ink-soft)}
footer a{color:var(--ink-soft)}
.credit{font-size:.78rem}
h1 .en{display:block;font-size:1rem;color:var(--ink-soft);font-weight:700}
.bands b{padding:8px 14px;border-radius:999px;background:var(--jade);color:#fff;font-weight:700}
.toc{margin:0 0 1.2rem;font-size:.88rem;color:var(--ink-soft)}
.toc ul{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:.3rem 0 0}
.toc a{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--paper);color:var(--ink);text-decoration:none}
.list{background:var(--paper);border-radius:16px;padding:14px 16px 6px;margin:0 0 16px;box-shadow:0 2px 10px rgba(40,48,63,.08)}
.list h2{margin:0 0 .3rem}.list h2 a{color:var(--ink);text-decoration:none}
.list h2 small{color:var(--ink-soft);font-weight:700;font-size:.8rem;margin-left:.5rem}
td .g{font-size:1.7rem;line-height:1.1;text-decoration:none;color:var(--ink)}
.themes{list-style:none;padding:0;margin:0 0 .6rem}.themes li{margin:0 0 4px}
.themes a{display:block;padding:6px 10px;border-radius:10px;background:var(--sky);color:var(--ink);text-decoration:none;font-weight:700}
.themes a small{display:block;font-weight:400;font-size:.78rem;color:var(--ink-soft)}
.next{display:flex;justify-content:space-between;gap:1rem;margin:2rem 0 0;font-size:.9rem}