/* Experimental hiragana chart page. Builds on /assets/styles.css tokens.
   Colour rule: rust marks the character being looked at, green marks a selection. */

.chart-lab {
  --cell-w: 58px;
  --cell-h: 58px;
  --glyph: 34px;
  --gap: 5px;
  --head: 24px;
  --stroke: 6;
  --mark: 4.2;
  --face-textbook: "Klee One", "UD Digi Kyokasho NK-R", "YuKyokasho", "Yu Kyokasho", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif;
  --face-gothic: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --face-mincho: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  --emoji: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  --muted-strong: #5f6558;
  --muted: #5f6558;
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.3l2 2 4-4.5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.chart-lab .skip-link:focus { position: fixed !important; top: 8px; left: 8px; z-index: 50; width: auto; height: auto; margin: 0; padding: 10px 14px; clip: auto; clip-path: none; overflow: visible; background: var(--surface); border: 2px solid var(--accent); border-radius: 8px; }
.glyph-defs { position: absolute; }
.glyph-defs .mark { stroke-width: var(--mark); }

#main.chart-page { padding-block: 22px 72px; }
html:has(body.has-selection) { scroll-padding-bottom: 110px; }

/* ---------- title and toolbar ---------- */
.page-head { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "title toolbar" "lede lede" "status status"; gap: 6px 24px; align-items: center; margin-bottom: 12px; }
.page-title { display: contents; }
.page-title h1 { grid-area: title; margin: 0; font-size: clamp(1.7rem, 2.3vw, 1.9rem); letter-spacing: -.03em; white-space: nowrap; }
.page-title .lede { grid-area: lede; margin: 0; max-width: none; color: var(--ink-soft); font-size: .93rem; line-height: 1.45; }
.face-status { grid-area: status; margin: 0; min-height: 0; color: var(--muted-strong); font-size: .82rem; }
.face-status:empty { display: none; }

.toolbar { grid-area: toolbar; position: relative; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.tb-more { display: contents; }
.tb-options { display: none; }
.seg { display: inline-flex; margin: 0; padding: 3px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface-muted); min-inline-size: 0; }
.seg label { position: relative; display: inline-flex; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg span { padding: 6px 12px; border-radius: 7px; font-size: .85rem; font-weight: 550; color: var(--ink-soft); line-height: 1.3; white-space: nowrap; }
.seg input:checked + span { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(37 42 37 / 14%); }
.seg input:focus-visible + span { outline: 3px solid var(--accent-dark); outline-offset: 2px; }
.field { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--ink-soft); }
.field select { padding: 7px 28px 7px 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: .85rem; font-weight: 550; }
.toggle, .menu > summary { padding: 7px 13px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: .85rem; font-weight: 550; line-height: 1.3; white-space: nowrap; }
.toggle[aria-pressed]::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; border: 1.5px solid var(--muted-strong); vertical-align: 0; }
.toggle[aria-pressed="true"] { border-color: var(--green); background: var(--green-wash); }
.toggle[aria-pressed="true"]::before { background: var(--green); border-color: var(--green); }
.menu { position: relative; margin: 0; padding: 0; border: 0; }
.menu > summary { list-style: none; cursor: pointer; margin: 0; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content: "▾"; margin-left: 6px; font-size: .8em; }
.menu[open] > summary { margin: 0; background: var(--surface-muted); }
.menu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 31; display: grid; min-width: 280px; padding: 6px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); box-shadow: 0 12px 32px rgb(37 42 37 / 16%); }
.menu-panel a, .menu-panel button { padding: 9px 12px; border: 0; border-radius: 8px; background: none; color: var(--ink); font-size: .88rem; text-align: left; text-decoration: none; }
.menu-panel a:hover, .menu-panel button:hover { background: var(--surface-muted); color: var(--ink); }
.menu-panel button { border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; margin-top: 4px; padding-top: 11px; }

/* ---------- chart ---------- */
.chart-area { padding: 16px 18px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.chart-area:focus { outline: none; }
.poster-head, .poster-foot, .ph-pictures, .pf-pictures { display: none; }
.blocks { display: flex; flex-wrap: wrap; gap: 20px 30px; align-items: flex-start; }
.block { min-width: 0; }
.side { display: grid; gap: 16px; align-content: start; min-width: 0; }
.lookalikes { margin: 0; max-width: calc(var(--head) + 5 * (var(--cell-w) + var(--gap))); }
.lookalikes .chips { margin-left: calc(var(--head) + var(--gap)); }
.poster-notes { display: none; }
.block-title { margin: 0 0 2px calc(var(--head) + var(--gap)); font-size: .78rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-strong); }
.block-count { font-weight: 550; letter-spacing: .02em; }
.block-note { margin: 8px 0 0 calc(var(--head) + var(--gap)); max-width: 36ch; font-size: .78rem; line-height: 1.4; color: var(--muted-strong); }

.grid { display: grid; gap: var(--gap); grid-template-columns: var(--head) repeat(var(--cols), var(--cell-w)); justify-content: start; }
.grid-combo { --cell-w: calc(var(--cell-h) * 1.46); }
.row { display: contents; }
.col-head { grid-row: 1; grid-column: calc(var(--c) + 2); align-self: end; text-align: center; font-size: .72rem; font-weight: 600; color: var(--muted-strong); line-height: 1.5; }
.row-head { grid-column: 1; grid-row: calc(var(--r) + 2); align-self: stretch; display: grid; place-items: center; min-width: var(--head); padding: 0; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--muted-strong); font-size: .72rem; font-weight: 650; text-transform: uppercase; }
.rh-ja { display: none; font-size: .82rem; font-weight: 500; }
button.row-head:hover, [data-select="on"] button.row-head { background: var(--surface-muted); color: var(--ink); }
[data-select="on"] button.row-head { border-color: var(--line); }
[data-select="on"] a.cell-combo { opacity: .45; cursor: default; }
.chart-area button.row-head[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.row-head.is-static { font-size: .85rem; font-weight: 500; text-transform: none; }

.cell { grid-column: calc(var(--c) + 2); grid-row: calc(var(--r) + 2); position: relative; display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; min-width: 0; height: var(--cell-h); padding: 2px 2px 3px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); color: var(--ink); text-decoration: none; line-height: 1; }
@media (hover: hover) {
  a.cell:not(.is-selected):hover { border-color: var(--accent); background: var(--accent-wash); color: var(--ink); }
}
.chart-area a.cell:hover { color: var(--ink); }
a.cell:focus-visible, button.row-head:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: -3px; z-index: 2; }
.cell.is-empty { grid-template-rows: 1fr; border-color: transparent; background: none; }
.cell.is-empty::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--line-strong); }
.cell.is-current { border-color: var(--accent); background: var(--accent-wash); box-shadow: inset 0 0 0 1px var(--accent); }
.cell.is-selected { border-color: var(--green); background: var(--green-wash); box-shadow: inset 0 0 0 1px var(--green); color: var(--ink); }
[data-select="on"] a.cell[data-id] { cursor: pointer; }
[data-select="on"] a.cell[data-id]::after, [data-select] a.cell.is-selected::after { content: ""; position: absolute; right: 3px; bottom: 3px; box-sizing: border-box; width: 12px; height: 12px; border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--surface); }
[data-select] a.cell.is-selected::after { border: 0; background: var(--green) var(--check) center / 12px no-repeat; }

.glyph { width: var(--glyph); height: var(--glyph); fill: none; stroke: currentColor; stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.glyph-combo { width: calc(var(--glyph) * 1.75); }
.small-kana { stroke-width: calc(var(--stroke) / .72); }
.kana { font-size: calc(var(--glyph) * .86); line-height: 1; }
.romaji { font-size: .7rem; font-weight: 550; color: var(--ink-soft); letter-spacing: .01em; line-height: 1.05; }
.romaji.is-irregular { color: var(--accent-dark); font-weight: 650; }
.pic, .word { display: none; }

[data-face="model"] .cell .kana { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
[data-face="textbook"] .cell .glyph, [data-face="gothic"] .cell .glyph, [data-face="mincho"] .cell .glyph { display: none; }
[data-face="textbook"] .kana { font-family: var(--face-textbook); font-weight: 600; }
[data-face="gothic"] .kana { font-family: var(--face-gothic); font-weight: 500; }
[data-face="mincho"] .kana { font-family: var(--face-mincho); font-weight: 500; }

/* Readings hidden: the text stays in the page for assistive technology, a short bar holds its place. */
[data-readings="off"] .cell .romaji, [data-readings="off"] .rh-latin { color: transparent; background: linear-gradient(var(--line-strong), var(--line-strong)) center / 12px 3px no-repeat; }
[data-readings="off"] .rh-latin { min-width: 12px; }
[data-readings="off"] .col-head { visibility: hidden; }

/* layouts */
[data-layout="cols"] .grid { grid-template-columns: var(--head) repeat(var(--rows), var(--cell-w)); }
[data-layout="cols"] .col-head { grid-column: 1; grid-row: calc(var(--c) + 2); align-self: center; }
[data-layout="cols"] .row-head { grid-row: 1; grid-column: calc(var(--r) + 2); min-height: var(--head); }
[data-layout="cols"] .cell { grid-column: calc(var(--r) + 2); grid-row: calc(var(--c) + 2); }
[data-layout="ja"] .grid { grid-template-columns: repeat(var(--rows), var(--cell-w)) var(--head); }
[data-layout="ja"] .col-head { grid-column: calc(var(--rows) + 1); grid-row: calc(var(--c) + 2); align-self: center; }
[data-layout="ja"] .row-head { grid-row: 1; grid-column: calc(var(--rows) - var(--r)); min-height: var(--head); }
[data-layout="ja"] .cell { grid-column: calc(var(--rows) - var(--r)); grid-row: calc(var(--c) + 2); }
[data-layout="ja"] .rh-latin { display: none; }
[data-layout="ja"] .rh-ja { display: inline; }
[data-layout="cols"] .block-title, [data-layout="cols"] .block-note { margin-left: calc(var(--head) + var(--gap)); }
[data-layout="ja"] .block-title, [data-layout="ja"] .block-note { margin-left: 0; }
[data-layout="ja"] .blocks { flex-direction: row-reverse; justify-content: flex-end; }

/* pictures view (basic block only) */
[data-view="pictures"] #basic .grid { --cell-w: var(--pic-w, 104px); }
[data-view="pictures"] #basic .cell { height: var(--pic-h, 100px); grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; align-content: center; gap: 0; padding: 4px 4px 5px; }
[data-view="pictures"] #basic .cell.is-empty { height: var(--pic-h, 100px); grid-template-columns: 1fr; grid-template-rows: 1fr; }
[data-view="pictures"] #basic .cell .glyph, [data-view="pictures"] #basic .cell .kana { grid-column: 1; grid-row: 1; justify-self: end; margin-right: 3px; }
[data-view="pictures"] #basic .cell .romaji { grid-column: 1; grid-row: 2; justify-self: end; width: var(--glyph); margin: 1px 3px 0 0; text-align: center; }
[data-view="pictures"] #basic .cell .pic { display: block; grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: start; margin-left: 3px; font-size: calc(var(--glyph) * .8); line-height: 1; font-family: var(--emoji); }
[data-view="pictures"] #basic .cell .word { display: grid; grid-column: 1 / -1; grid-row: 3; justify-items: center; gap: 2px; margin-top: 4px; }
[data-view="pictures"] #basic .word-ja { font-size: .86rem; font-weight: 550; letter-spacing: .04em; color: var(--ink-soft); white-space: nowrap; }
[data-view="pictures"] #basic .word-ja b { color: var(--accent-dark); font-weight: 700; }
[data-view="pictures"] #basic .word-en { font-size: .66rem; color: var(--muted-strong); white-space: nowrap; }

/* ---------- sections under the chart ---------- */
.reading-guide, .downloads, .about, .faq, .next { margin-top: 44px; }
.downloads { margin-top: 32px; }
.downloads:focus { outline: none; }
.reading-guide h2, .downloads h2, .about h2, .faq h2, .next h2 { margin-bottom: 8px; font-size: 1.35rem; }
.downloads > p { margin: 0 0 12px; color: var(--ink-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chip { display: inline-flex; align-items: center; gap: 3px; min-height: 36px; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper); color: var(--ink); }
.chip .glyph { --glyph: 24px; }
.chip:hover { background: var(--surface-muted); }
.chip[aria-pressed="true"] { border-color: var(--green); background: var(--green-wash); box-shadow: inset 0 0 0 1px var(--green); }
.chip[aria-pressed="true"]::after { content: ""; width: 12px; height: 12px; margin-left: 2px; border-radius: 50%; background: var(--green) var(--check) center / 12px no-repeat; }
.reading-guide ul { max-width: 68ch; margin: 0; }
.about p, .faq p { max-width: 68ch; color: var(--ink-soft); }
.faq h3 { margin: 18px 0 4px; font-size: 1.02rem; }
.faq p { margin: 0; }
.download-grid { display: grid; grid-template-columns: minmax(0, 212px) minmax(0, 212px) minmax(0, 424px); gap: 18px; align-items: start; }
.download-grid figure { margin: 0; }
.download-grid img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.download-grid figcaption { margin-top: 8px; font-size: .86rem; line-height: 1.45; color: var(--ink-soft); }
.download-grid figcaption strong { display: block; color: var(--ink); }
.next-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.next-links li { margin: 0; }
.next-links a { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-decoration: none; }
.next-links a:hover { border-color: var(--line-strong); }
.next-links span { font-size: .85rem; color: var(--muted-strong); }
.lab-note { margin-top: 44px; max-width: 80ch; font-size: .82rem; color: var(--muted-strong); }

/* ---------- character panel ----------
   Docked under the chart, or beside it where a column fits without covering any of it. It is not modal: the
   chart stays usable, and choosing another character swaps what the panel shows. */
.kana-dialog { position: fixed; inset: auto; z-index: 28; margin: 0; padding: 0; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); overflow: hidden; }
.kana-dialog[open] { display: flex; flex-direction: column; }
.kana-dialog.is-away { visibility: hidden; }
.kd-content { display: grid; grid-template-rows: auto minmax(0, 1fr); flex: 1 1 auto; min-height: 0; }
.kd-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--line); }
.kd-title { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-size: 1.5rem; letter-spacing: 0; }
.kd-title:focus { outline: none; }
.kd-title .kd-reading { font-size: 1.25rem; color: var(--ink-soft); font-weight: 600; }
.kd-title .kd-meta { font-size: .82rem; font-weight: 500; color: var(--muted-strong); letter-spacing: 0; }
.kd-nav { display: inline-flex; gap: 6px; }
.kd-btn { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 1rem; }
.kd-btn:hover:not(:disabled) { background: var(--surface-muted); }
.kd-btn:focus-visible, .kd-alike:focus-visible, .kd-actions :focus-visible, .kd-face button:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 2px; }
.kd-btn:disabled { color: var(--muted); border-color: var(--line); }
.kd-more { font-size: .85rem; font-weight: 550; }
.kd-body { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 22px; padding: 18px; overflow: auto; overscroll-behavior: contain; }
.kd-stage { display: grid; gap: 10px; align-content: start; }
.kd-canvas { position: relative; aspect-ratio: 1; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; }
.kd-canvas svg { display: block; width: 100%; height: 100%; }
.kd-canvas .guide { stroke: var(--line); stroke-width: .6; stroke-dasharray: 2.5 2.5; }
.kd-canvas .ghost, .kd-canvas .ink { fill: none; stroke-width: 4.6; stroke-linecap: round; stroke-linejoin: round; }
.kd-canvas .ghost { stroke: #dddccf; }
.kd-canvas .ink { stroke: var(--ink); }
.kd-canvas .mark { stroke-width: 3.4; }
.kd-canvas .ink.is-active { stroke: var(--accent); }
.kd-canvas .num { font-size: 7.5px; font-weight: 700; fill: var(--accent-dark); font-family: var(--font); paint-order: stroke; stroke: #fff; stroke-width: 2.4px; stroke-linejoin: round; }
.kd-canvas .start { fill: var(--accent); stroke: #fff; stroke-width: .8; }
.kd-controls { display: flex; flex-wrap: wrap; gap: 6px; }
.kd-controls .kd-btn { flex: 1 1 auto; font-size: .85rem; font-weight: 550; }
.kd-controls .kd-play { flex-basis: 100%; background: var(--accent); border-color: var(--accent); color: #fff; }
.kd-controls .kd-play:hover:not(:disabled) { background: var(--accent-dark); }
.kd-progress { margin: 0; font-size: .82rem; color: var(--muted-strong); }
.kd-guide-shortcut { font-size:.85rem;min-height:44px;display:flex;align-items:center;grid-column:2;grid-row:2; }
.kd-stage:not(.is-combo) > .kd-progress { grid-column:2;grid-row:3; }
.kd-actions .kd-guide-link { display:none; }
.kd-audio { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .82rem; color: var(--muted-strong); }
.kd-audio span[aria-hidden] { display: inline-grid; place-items: center; min-width: 40px; height: 34px; border: 1px dashed var(--line-strong); border-radius: 9px; }
.kd-info { display: grid; gap: 16px; align-content: start; min-width: 0; }
.kd-info h3 { margin: 0 0 6px; font-size: .74rem; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-strong); }
.kd-info p { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--ink-soft); }
.kd-info p + p { margin-top: 6px; }
.kd-faces, .kd-alikes { display: flex; flex-wrap: wrap; gap: 8px; }
.kd-face { display: grid; justify-items: center; gap: 4px; width: 70px; padding: 8px 4px 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); font-size: .66rem; color: var(--muted-strong); text-align: center; line-height: 1.2; }
.kd-face .glyph { --glyph: 38px; --stroke: 5.5; --mark: 3.8; color: var(--ink); }
.kd-face .sample { font-size: 34px; line-height: 38px; height: 38px; color: var(--ink); }
.kd-face button { border: 0; padding: 2px 4px; background: none; color: var(--accent-dark); font-size: .7rem; text-decoration: underline; }
.kd-alike { display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 8px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--ink); }
button.kd-alike:hover { background: var(--surface-muted); }
.kd-alike .glyph { --glyph: 40px; --stroke: 5.5; --mark: 3.8; }
.kd-alike span { font-size: .8rem; color: var(--muted-strong); }
.kd-alike.is-self { border-color: var(--accent); background: var(--accent-wash); cursor: default; }
.kd-words { list-style: none; width: 100%; margin: 0; padding: 0; display: grid; gap: .8rem; font-size: 1.0625rem; }
.kd-word { min-width: 0; padding-block: .4rem .8rem; border-bottom: 1px solid var(--line); }
.kd-word-identity { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .8rem; }
.kd-word-kana { font-size: 1.125rem; overflow-wrap: anywhere; }
.kd-word-kana b { color: var(--accent-dark); font-weight: 700; }
.kd-word-reading { color: var(--ink-soft); overflow-wrap: normal; word-break: normal; }
.kd-word-meaning { display: block; color: var(--muted-strong); overflow-wrap: break-word; }
.kd-word > .kana-audio-context { display: flex; margin-top: .4rem; white-space: normal; }
.kd-words + .kana-audio-note { margin-top: .5rem; }
.kd-words .pic { display: inline; margin-right: 6px; font-family: var(--emoji); }
.kd-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 2px; }
.kd-actions a, .kd-actions button { padding: 9px 13px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: .86rem; font-weight: 550; text-decoration: none; line-height: 1.3; }
.kd-actions a:hover, .kd-actions button:hover { background: var(--surface-muted); color: var(--ink); }
.kd-actions .is-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.kd-actions .is-primary:hover { background: var(--accent-dark); color: #fff; }
.kd-set { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.kd-set-box { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 14px 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: .88rem; font-weight: 600; cursor: pointer; }
.kd-set-box input { width: 20px; height: 20px; margin: 0; accent-color: var(--green); cursor: pointer; }
.kd-set-box input:focus-visible { outline: none; }
.kd-set-box:has(input:checked) { border-color: var(--green); background: var(--green-wash); }
.kd-set-box:has(input:focus-visible) { outline: 3px solid var(--accent-dark); outline-offset: 2px; }
.kd-set-line { flex: 1 1 220px; margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.35; }
.kd-set-line [lang="ja"] { font-size: 1.1em; line-height: 1; letter-spacing: .06em; }
.kd-compose { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; }
.kd-compose .glyph { --glyph: 44px; --stroke: 5.5; --mark: 3.8; }
.kd-combo .ink { stroke-width: 4.6; }
.kd-combo .small-kana .ink { stroke-width: calc(4.6px / .72); }

/* ---------- selection bar ---------- */
.selbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); background: var(--ink); color: #f7f5ee; box-shadow: 0 -8px 24px rgb(37 42 37 / 18%); }
.selbar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.selbar p { margin: 0; }
.selbar-count { font-size: .9rem; font-weight: 600; white-space: nowrap; }
.selbar-chars { flex: 1 1 120px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.15rem; letter-spacing: .14em; color: #e4e1d4; }
.selbar-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.selbar-actions a { padding: 8px 14px; border: 1px solid rgb(247 245 238 / 38%); border-radius: 10px; color: #f7f5ee; font-size: .88rem; font-weight: 600; text-decoration: none; }
.selbar-actions a:hover { background: rgb(247 245 238 / 12%); color: #fff; }
.selbar-actions .selbar-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.selbar-actions .selbar-primary:hover { background: #cf5a41; }
.selbar-clear { padding: 8px 10px; border: 0; background: none; color: #d6d3c5; font-size: .85rem; text-decoration: underline; }
.selbar a:focus-visible, .selbar button:focus-visible { outline-color: #f7f5ee; }
body.has-selection { padding-bottom: 76px; }

/* ---------- responsive ---------- */
@media (min-width: 1000px) {
  .chart-lab { --cell-h: clamp(42px, calc((100vh - 282px) / 11 - 5px), 62px); --cell-w: clamp(50px, 4.9vw, 62px); --glyph: clamp(23px, calc(var(--cell-h) - 20px), 38px); }
  [data-layout="cols"], [data-layout="ja"] { --cell-h: 66px; --cell-w: clamp(46px, calc((min(1200px, 100vw - 80px) - 150px) / 16), 62px); --glyph: 38px; }
  [data-view="pictures"] { --pic-w: clamp(92px, 8.4vw, 104px); --pic-h: 100px; }
  [data-view="pictures"][data-layout="rows"] #basic { --glyph: 34px; }
  [data-view="pictures"][data-layout="cols"] #basic, [data-view="pictures"][data-layout="ja"] #basic { --pic-w: clamp(78px, calc((min(1200px, 100vw - 80px) - 110px) / 11), 98px); --pic-h: 104px; --glyph: 36px; }
}
@media (max-width: 999px) {
  .page-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "lede" "toolbar" "status"; }
  .toolbar { justify-content: flex-start; }
  .chart-lab { --cell-w: clamp(46px, calc((100vw - 150px) / 10.4), 60px); --cell-h: 54px; --glyph: 32px; }
  [data-view="pictures"] { --pic-w: clamp(84px, calc((100vw - 140px) / 5.4), 110px); --pic-h: 100px; }
  .download-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .download-grid .is-wide { grid-column: 1 / -1; }
}
@media (max-width: 1279px) {
  /* Columns and Japanese order need eleven columns; below this width the page stays in rows. */
  .seg-layout { display: none; }
}
@media (min-width: 720px) and (max-width: 999px) {
  /* The download menu opens leftwards from its button, so keep the button at the right end of the toolbar on
     whichever line it wraps to. From 720 to 755px it wrapped onto a line of its own, at the left, and the menu
     opened 150px off the screen. */
  .toolbar .menu { margin-left: auto; }
  /* Cells narrow enough for the voiced column to sit beside the basic chart. From 720 to 819px it dropped below,
     and the chart used half the width. */
  .chart-lab { --cell-w: clamp(46px, calc((100vw - 232px) / 10), 60px); }
}
/* Without JavaScript the toolbar holds only the download menu: keep it at the right end at every width. */
@media (scripting: none) {
  .chart-lab .toolbar .menu { margin-left: auto; }
}
@media (max-width: 799px) {
  body.has-selection { padding-bottom: 112px; }
}
@media (max-width: 719px) {
  .chart-lab .shell { width: min(1200px, calc(100% - 28px)); }
  #main.chart-page { padding-top: 10px; }
  .page-head { display: contents; }
  .page-title h1 { margin: 0 0 4px; font-size: 1.35rem; }
  .page-title .lede { display: none; }
  .face-status { margin: 0 0 6px; }
  /* With larger browser text the controls wrap onto a second line, instead of one sliding under the next. */
  .toolbar { position: sticky; top: 0; z-index: 12; flex-wrap: wrap; justify-content: flex-start; gap: 6px; margin: 0 -14px 4px; padding: 5px 14px; background: var(--paper); }
  .toolbar .seg span { padding: 9px 8px; font-size: .82rem; }
  .toolbar .toggle { padding: 11px 10px; font-size: .82rem; }
  .toolbar .toggle[aria-pressed]::before { display: none; }
  .toolbar .toggle[aria-pressed="true"] { box-shadow: inset 0 -3px 0 var(--green); }
  .tb-options { display: inline-block; margin-left: auto; }
  .tb-options[aria-expanded="true"] { background: var(--surface-muted); }
  .tb-more { display: none; position: absolute; right: 14px; top: calc(100% + 2px); z-index: 20; width: min(300px, calc(100vw - 28px)); max-height: calc(100vh - 64px); max-height: calc(100svh - 64px); overflow-y: auto; overscroll-behavior: contain; gap: 10px; padding: 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); box-shadow: 0 12px 32px rgb(37 42 37 / 16%); }
  .toolbar.is-open .tb-more { display: grid; }
  .toolbar.is-open { z-index: 31; }   /* the open menu goes above the panel (28) and the selection bar (30) */
  .tb-more .field { display: grid; gap: 4px; }
  .tb-more .field select { width: 100%; padding-block: 10px; }
  .tb-more .menu > summary { display: none; }
  .tb-more .menu-panel { position: static; min-width: 0; padding: 0; border: 0; box-shadow: none; }
  .tb-more .menu-panel a, .tb-more .menu-panel button { padding: 11px 8px; }

  .chart-area { margin-inline: -14px; padding: 8px 8px 12px; border-inline: 0; border-radius: 0; }
  .chart-lab { --head: 24px; --gap: 4px; --cell-w: calc((100vw - 16px - var(--head) - 5 * var(--gap)) / 5); --cell-h: clamp(42px, calc((100vh - 200px) / 11 - var(--gap)), 54px); --glyph: clamp(23px, calc(var(--cell-h) - 19px), 34px); }
  @supports (height: 100svh) {
    .chart-lab { --cell-h: clamp(42px, calc((100svh - 200px) / 11 - var(--gap)), 54px); }
  }
  /* Columns share the chart's own width. A width worked out from the window (100vw) includes a desktop
     scrollbar, which made the chart 7px too wide in any narrow desktop window. */
  .blocks { flex-direction: column; align-items: stretch; }
  .grid { grid-template-columns: var(--head) repeat(var(--cols), minmax(0, 1fr)); }
  .grid-combo { --cell-w: calc((100vw - 16px - var(--head) - 3 * var(--gap)) / 3); }
  [data-view="pictures"] { --pic-w: var(--cell-w); --pic-h: 82px; }
  [data-view="pictures"] #basic .cell { grid-template-columns: auto auto; justify-content: center; column-gap: 3px; padding: 4px 1px; }
  [data-view="pictures"] #basic .cell .glyph, [data-view="pictures"] #basic .cell .kana { grid-column: 1; grid-row: 1; justify-self: end; margin: 0; --glyph: 26px; }
  [data-view="pictures"] #basic .cell .romaji { grid-column: 2; grid-row: 1; justify-self: start; align-self: center; width: auto; margin: 0; }
  [data-view="pictures"] #basic .cell .pic { grid-column: 1 / -1; grid-row: 2; justify-self: center; margin: 1px 0 0; font-size: 20px; }
  [data-view="pictures"] #basic .cell .word { grid-row: 3; margin-top: 2px; }
  [data-view="pictures"] #basic .word-ja { font-size: .68rem; letter-spacing: 0; }
  [data-view="pictures"] #basic .word-en { display: none; }
  .block-title { font-size: .72rem; }
  .reading-guide, .downloads, .about, .faq, .next { margin-top: 32px; }
  .lookalikes { max-width: none; }
  .chip { min-height: 44px; }

  .kd-btn { min-width: 44px; height: 44px; }
  .kd-body { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  /* On a phone the panel opens short: the stroke model and its controls. More shows the rest. */
  .kana-dialog:not(.is-expanded) .kd-info, .kana-dialog:not(.is-expanded) .kd-audio { display: none; }
  /* The written stroke status stays in the page for screen readers; the numbered model shows the same thing. */
  .kana-dialog:not(.is-expanded) .kd-progress { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .kd-actions a, .kd-actions button { padding: 12px 13px; }
  .selbar-chars { display: none; }
  .selbar-inner { gap: 6px 10px; }
  .selbar-count { flex: 1 1 auto; }
  .selbar-clear { order: 1; }
  .selbar-actions { order: 2; flex: 1 1 100%; flex-wrap: nowrap; gap: 5px; }
  .selbar-actions a { flex: 1 1 auto; padding: 11px 6px; font-size: .8rem; text-align: center; white-space: nowrap; }
  body.has-selection { padding-bottom: 118px; }
  html:has(body.has-selection) { scroll-padding-bottom: 140px; }
  html { scroll-padding-top: 62px; }
}

/* The character panel: docked under the chart at every width, unless the script has found room for a column
   beside the chart that covers none of it (.is-side; see place() in hiragana-chart.js). */
.kana-dialog { left: 0; right: 0; bottom: 0; width: 100%; max-width: 100%; max-height: min(72vh, 620px); border-width: 1px 0 0; border-radius: 16px 16px 0 0; box-shadow: 0 -10px 30px rgb(37 42 37 / 16%); }
@supports (height: 100svh) {
  .kana-dialog { max-height: min(72svh, 620px); }
}
/* The script measures the panel straight after changing it, so the panel never transitions. */
.kana-dialog { transition: none; }
.kd-content { width: min(100%, 980px); margin-inline: auto; }
.kd-head { padding: 8px 10px 8px 14px; gap: 8px; }
.kd-title { font-size: 1.35rem; }
.kd-body { padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); }
.kd-stage { grid-template-columns: 112px minmax(0, 1fr); column-gap: 12px; align-items: start; }
.kd-stage > .kd-canvas { grid-row: 1 / span 3; }
.kd-stage > .kd-audio { grid-column: 1 / -1; }
.kd-stage.is-combo { grid-template-columns: minmax(0, 190px); }
.kd-stage.is-combo > .kd-canvas { grid-row: auto; }
/* While the docked panel is open it takes the selection bar's place, and the page gains room so that every row
   can be scrolled above it; the scroll padding keeps keyboard focus clear of it. */
body.has-panel .selbar { display: none; }
body.has-panel { padding-bottom: calc(var(--kd-h, 210px) + 12px); }
html:has(body.has-panel) { scroll-padding-bottom: calc(var(--kd-h, 210px) + 20px); }
@media (min-width: 720px) {
  /* Room for the stroke model and the notes side by side; the short panel scrolls inside itself. */
  .kd-body { grid-template-columns: 300px minmax(0, 1fr); gap: 22px; }
  .kana-dialog:not(.is-side):not(.is-expanded) { max-height: 270px; }
}
@media (max-height: 520px) {
  /* A phone on its side, or a very short window: keep the short panel under half the screen. */
  .kana-dialog:not(.is-side):not(.is-expanded) { max-height: max(150px, 46vh); }
  .kd-stage { grid-template-columns: 84px minmax(0, 1fr); }
}
/* The column beside the chart. */
.kana-dialog.is-side { top: var(--kd-top, 12px); right: 16px; bottom: auto; left: auto; width: 360px; max-height: var(--kd-max, calc(100vh - 24px)); border-width: 1px; border-radius: 16px; box-shadow: 0 16px 44px rgb(37 42 37 / 20%); }
.kana-dialog.is-side .kd-more { display: none; }
.kana-dialog.is-side .kd-head { padding: 10px 10px 10px 14px; gap: 10px; }
.kana-dialog.is-side .kd-body { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 14px; }
.kana-dialog.is-side .kd-stage { grid-template-columns: 136px minmax(0, 1fr); }
.kana-dialog.is-side .kd-stage.is-combo { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 345px) {
  .kd-stage { grid-template-columns: 88px minmax(0, 1fr); }
  .kd-controls .kd-btn { padding: 0 6px; font-size: .8rem; }
  .toolbar .seg span { padding-inline: 4px; }
  .toolbar .toggle { padding-inline: 6px; }
  [data-view="pictures"] #basic .word-ja { font-size: .6rem; white-space: normal; word-break: keep-all; line-height: 1.1; text-align: center; }
}
/* At very high zoom the fixed bar would cover the page: let it sit in the flow instead. */
@media (max-height: 420px) {
  .selbar { position: static; }
  body.has-selection { padding-bottom: 0; }
}

/* Inspector reflow is based on its own available space and the reader's text size.
   A single column is the fallback when container queries are unavailable. */
@media screen {
  .kana-dialog .kd-content { container-type: inline-size; }
  .kana-dialog .kd-body { min-height: 0; grid-template-columns: minmax(0, 1fr); align-items: start; }
  .kana-dialog .kd-stage, .kana-dialog .kd-info, .kana-dialog section { min-width: 0; }
  .kana-dialog .kd-audio { flex-wrap: wrap; white-space: normal; }
  .kana-dialog .kd-face { width: 4.4rem; max-width: 100%; }
  .kana-dialog .kd-head { min-width: 0; }
  .kana-dialog .kd-btn { height: auto; min-height: 44px; padding-block: .5rem; }
  /* No inner scroller can be useful if the header takes almost all the height. */
  .kana-dialog.is-cramped { overflow: auto; overscroll-behavior: contain; }
  .kana-dialog.is-cramped .kd-content { display: block; flex: 0 0 auto; }
  .kana-dialog.is-cramped .kd-body { overflow: visible; }
  @container (min-width: 50rem) {
    .kana-dialog:not(.is-side) .kd-body { grid-template-columns: 18rem minmax(0, 1fr); }
  }
  @container (max-width: 28rem) {
    .kana-dialog .kd-head { grid-template-columns: minmax(0, 1fr) auto; }
    .kana-dialog .kd-nav { grid-column: 1; grid-row: 1; }
    .kana-dialog .kd-close { grid-column: 2; grid-row: 1; }
    .kana-dialog .kd-title { grid-column: 1; grid-row: 2; }
    .kana-dialog .kd-more { grid-column: 2; grid-row: 2; }
  }
  /* These also protect the baseline in browsers without container queries. */
  @supports not (container-type: inline-size) {
    .kana-dialog .kd-head { display: flex; flex-wrap: wrap; }
    .kana-dialog .kd-title { flex: 1 1 8rem; }
  }
  @media (max-height: 24rem) {
    .kana-dialog { overflow: auto; }
    .kana-dialog .kd-content { display: block; flex: 0 0 auto; }
    .kana-dialog .kd-body { overflow: visible; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .kd-canvas .ink { transition: none !important; }
}

@media (forced-colors: active) {
  .cell.is-selected, .chip[aria-pressed="true"], .toggle[aria-pressed="true"], .chart-area button.row-head[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .cell.is-current { outline: 2px dashed LinkText; outline-offset: -2px; }
  .seg input:checked + span { outline: 2px solid Highlight; outline-offset: -2px; }
  .kd-face .glyph { color: CanvasText; }
  .kd-canvas .ghost { stroke: GrayText; }
  .kd-canvas .ink { stroke: CanvasText; }
  .kd-canvas .ink.is-active, .kd-canvas .start { stroke: Highlight; fill: Highlight; }
  .kd-canvas .ink.is-active { fill: none; }
  [data-readings="off"] .cell .romaji, [data-readings="off"] .rh-latin { visibility: hidden; }
}

/* ---------- poster (static images) and print ---------- */
html.poster, html.poster body { background: #fff; }
html.poster .site-header, html.poster .page-head, html.poster .lookalikes-note, html.poster .reading-guide, html.poster .downloads, html.poster .about, html.poster .faq, html.poster .next, html.poster .lab-note, html.poster .site-footer, html.poster .selbar, html.poster .skip-link { display: none !important; }
html.poster #main.chart-page { width: auto; margin: 0; padding: 0; }
html.poster .chart-area { box-sizing: border-box; margin: 0; border: 0; border-radius: 0; background: #fff; padding: 56px 60px 44px; }
html.poster .poster-head { display: flex; align-items: baseline; gap: 22px; margin: 0 0 26px; font-size: 54px; letter-spacing: -.03em; line-height: 1; color: var(--ink); }
html.poster .poster-head > span { font-size: 34px; letter-spacing: .08em; color: var(--accent-dark); }
html.poster[data-poster-view="pictures"] .ph-pictures { display: inline; }
html.poster .poster-foot { display: block; margin: 30px 0 0; font-size: 15px; color: var(--muted-strong); }
html.poster[data-poster-view="pictures"] .pf-plain { display: none; }
html.poster[data-poster-view="pictures"] .pf-pictures { display: inline; }
html.poster .cell { background: #fff; border-color: #d5d4c6; border-radius: 12px; }
html.poster .cell.is-empty { border-color: transparent; }
html.poster .cell.is-empty::after { width: 6px; height: 6px; background: #d5d4c6; }
html.poster .block-title { font-size: 17px; margin-bottom: 6px; }
html.poster .block-note { font-size: 15px; max-width: none; margin-bottom: 8px; }
html.poster .col-head, html.poster .row-head { font-size: 16px; }
html.poster .rh-ja { font-size: 20px; }
html.poster .romaji { font-size: 17px; }
html.poster [data-readings="off"] .cell .romaji, html.poster [data-readings="off"] .rh-latin { background: none; }
html.poster [data-readings="off"] .poster-notes { visibility: hidden; }

html.poster-portrait .chart-area { width: 1240px; height: 1754px; padding: 50px 60px 36px; --head: 30px; --gap: 8px; --cell-w: 92px; --cell-h: 89px; --glyph: 56px; --stroke: 5.2; --mark: 3.7; }
html.poster-portrait .poster-head { margin-bottom: 20px; }
html.poster-portrait .blocks { display: grid; grid-template-columns: auto 1fr; gap: 26px 46px; }
html.poster-portrait #combinations { grid-column: 1 / -1; }
html.poster-portrait .side { gap: 26px; }
html.poster-portrait .lookalikes { max-width: none; }
html.poster-portrait .chip { min-height: 52px; padding: 6px 16px; gap: 6px; background: #fff; border-color: #d5d4c6; }
html.poster-portrait .chip .glyph { --glyph: 38px; }
html.poster-portrait .chips { gap: 10px; margin-top: 8px; }
html.poster-portrait .poster-notes { display: block; margin-left: calc(var(--head) + var(--gap)); }
html.poster-portrait .poster-notes ul { margin: 8px 0 0; padding-left: 20px; font-size: 17px; line-height: 1.5; color: var(--ink-soft); }
html.poster-portrait .poster-notes li + li { margin-top: 4px; }
html.poster-portrait #combinations .grid { --cell-w: 92px; --cell-h: 80px; grid-template-columns: var(--head) repeat(var(--rows), var(--cell-w)); }
html.poster-portrait #combinations .col-head { grid-column: 1; grid-row: calc(var(--c) + 2); align-self: center; }
html.poster-portrait #combinations .row-head { grid-row: 1; grid-column: calc(var(--r) + 2); }
html.poster-portrait #combinations .cell { grid-column: calc(var(--r) + 2); grid-row: calc(var(--c) + 2); }
html.poster-portrait #combinations .glyph { --glyph: 40px; }

html.poster-landscape .chart-area { width: 1754px; height: 1240px; padding: 46px 60px 30px; --head: 30px; --gap: 9px; --stroke: 5.2; --mark: 3.7; }
html.poster-landscape .poster-head { margin-bottom: 16px; }
html.poster-landscape .poster-foot { margin-top: 18px; }
html.poster-landscape .side, html.poster-landscape #combinations { display: none; }
html.poster-landscape[data-poster-view="pictures"] #basic { --pic-w: 137px; --pic-h: 189px; --glyph: 62px; }
html.poster-landscape #basic .cell { padding: 10px 6px 10px; }
html.poster-landscape #basic .cell .romaji { font-size: 19px; margin-top: 3px; }
html.poster-landscape #basic .cell .pic { font-size: 44px; }
html.poster-landscape #basic .cell .word { margin-top: 10px; gap: 4px; }
html.poster-landscape #basic .word-ja { font-size: 22px; }
html.poster-landscape #basic .word-en { font-size: 15px; }
html.poster-landscape .block-title { display: none; }

@media print {
  @page { size: A4 portrait; margin: 9mm; }
  .site-header, .page-head, .toolbar, .lookalikes, .reading-guide, .downloads, .about, .faq, .next, .lab-note, .site-footer, .selbar, .skip-link, .kana-dialog { display: none !important; }
  html.poster .lookalikes { display: block !important; }
  html, body { background: #fff; }
  #main.chart-page { width: auto; margin: 0; padding: 0; }
  .chart-area { border: 0; padding: 0; margin: 0; background: #fff; }
  /* A printed page is narrower than the eleven-column layouts need, so print always uses rows. */
  .chart-area[data-layout] .grid { grid-template-columns: var(--head) repeat(var(--cols), var(--cell-w)); }
  .chart-area[data-layout] .col-head { grid-row: 1; grid-column: calc(var(--c) + 2); align-self: end; }
  .chart-area[data-layout] .row-head { grid-column: 1; grid-row: calc(var(--r) + 2); min-height: 0; }
  .chart-area[data-layout] .cell { grid-column: calc(var(--c) + 2); grid-row: calc(var(--r) + 2); }
  .chart-area[data-layout] .blocks { flex-direction: row; justify-content: flex-start; }
  .chart-area[data-layout] .block-title, .chart-area[data-layout] .block-note { margin-left: calc(var(--head) + var(--gap)); }
  .chart-area[data-layout] .rh-latin { display: inline; }
  .chart-area[data-layout] .rh-ja { display: none; }
  .poster-head { display: flex; align-items: baseline; gap: 14px; margin: 0 0 12px; font-size: 26px; }
  .poster-head > span { font-size: 18px; color: #555; }
  .poster-foot { display: block; margin: 14px 0 0; font-size: 9px; color: #555; }
  .cell { background: #fff; break-inside: avoid; }
  .cell.is-selected, .cell.is-current { box-shadow: none; border-color: var(--line); background: #fff; }
  .cell:not(.is-empty)::after { display: none; }
  .block { break-inside: avoid; }
  [data-view="pictures"] #basic { break-inside: auto; }
  .poster-head { break-after: avoid; }
  body.has-selection, body.has-panel { padding-bottom: 0; }
  [data-view="pictures"] .pf-plain { display: none; }
  [data-view="pictures"] .pf-pictures, [data-view="pictures"] .ph-pictures { display: inline; }
  html.poster .chart-area { width: auto; min-height: 0; padding: 0; }
}

/* Typefaces served from this site (assets/fonts): kana subsets of Klee One 600 and Noto Serif JP 500, SIL Open Font
   License 1.1. A face downloads only when a rule on the page uses it. */
@font-face { font-family: "Klee One"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/klee-one-600.woff2") format("woff2"); unicode-range: U+3001-3002, U+3041-3096, U+3099-309C, U+30A1-30FC; }
@font-face { font-family: "Noto Serif JP"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/noto-serif-jp-500.woff2") format("woff2"); unicode-range: U+3001-3002, U+3041-3096, U+3099-309C, U+30A1-30FC; }