@charset "UTF-8";
/* The stroke-order page (/hiragana/stroke-order/). Revised 4 October 2026 after the page's audit
   (labs/hiragana-stroke-order/evidence/audit-2026-10-04/): text sizes in rem (they follow the browser's text size);
   the scripted layout keyed on html.so-scripted, which the page's first script sets before anything is painted; stroke
   numbers drawn without outlines, in the places hiragana_stroke_order_labels.py computed (a layer per place); the
   panel docked (.is-docked) or beside the charts (.is-side); dark contrast themes; US Letter and A4 print.
   Round 2 (reaudit-2026-10-04/fix/): print wins over Larger models; leaders 1px and solid at 100-150%; the highlight
   has its own dotted frame in contrast themes; larger tap areas; US Letter always listed first. */
body[data-route="/hiragana/stroke-order/"] #main { padding-top:8px; }
.so-page { --so-muted:#535d51; --so-look:#f6ecc4; --so-look-line:#7a5f12; }
.so-sprite { position:absolute; width:0; height:0; overflow:hidden; }
.so-page .universe-breadcrumbs { font-size:.75rem; line-height:1.35; margin:0 0 2px; color:var(--ink-soft); }
.so-page .universe-breadcrumbs a { color:var(--ink-soft); padding:8px 6px 5px; margin:0 -6px; }
.so-page .universe-breadcrumbs a+a { padding-left:4px; margin-left:-4px; }
.so-page h1 { font-size:clamp(1.625rem,3vw,2.375rem); margin:0 0 2px; letter-spacing:-.035em; }
.so-heading p { font-size:.875rem; margin:0 0 9px; color:var(--ink-soft); }
.so-paper-help { display:none; }
html:not(.so-scripted) .so-page .so-js-only { display:none !important; }
html.so-scripted .so-page .so-no-js { display:none; }
.so-toolbar { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-bottom:5px; }
.so-page button,.so-toolbar a { border:1px solid var(--line-strong); border-radius:7px; background:var(--surface); color:var(--ink); min-height:44px; padding:8px 12px; font-size:.875rem; line-height:1.25; text-decoration:none; }
.so-page button[aria-pressed="true"] { background:var(--green-wash); border-color:var(--green); box-shadow:inset 0 -3px var(--green); }
.so-page button.button,.so-page button.so-primary { background:var(--accent); color:white; border-color:var(--accent); }
.so-page button.button:hover,.so-page button.so-primary:hover { background:var(--accent-dark); }
.so-page button:disabled { opacity:1; color:#60685c; background:var(--surface-muted); }
.so-page a:focus-visible,.so-page button:focus-visible,.so-page summary:focus-visible,.so-page select:focus-visible { outline:3px solid var(--accent-dark); outline-offset:3px; }
/* The legend line only names a one-off set from the address (filled before the first paint); otherwise it is empty. */
.so-legend { margin:0 0 4px; font-size:.75rem; color:var(--so-muted); }
.so-legend:empty { display:none; }
.so-look-key { display:inline-block; width:.8em; height:.8em; margin-right:5px; vertical-align:-.05em; border:1px solid var(--so-look-line); background:var(--so-look); border-radius:2px; }
.so-chart-area { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; }
.so-block h2 { font-size:.8125rem; letter-spacing:.035em; margin:0 0 5px; text-transform:uppercase; color:var(--ink-soft); }
.so-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; }
.so-grid-row { display:contents; }
.so-grid-item { display:flex; min-width:0; }
.so-grid-item>.so-cell { width:100%; }
/* A model: a link to its sequence. Rust marks the model the panel shows, green the study set, gold a set from a link. */
.so-cell { display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:7px; background:var(--surface); min-height:44px; padding:1px 3px; text-decoration:none; position:relative; color:var(--ink); }
.so-cell:hover,.so-cell.is-current { border-color:var(--accent); background:var(--accent-wash); color:var(--ink); }
.so-cell:focus-visible { z-index:2; }
.so-cell.is-selected::after { content:'✓'; position:absolute; right:2px; top:0; font-size:.75rem; color:var(--green); font-weight:bold; }
.so-cell.is-selected { border-color:var(--green); box-shadow:inset 0 0 0 1px var(--green); }
.so-cell.is-look { background:var(--so-look); border-color:var(--so-look-line); }
.so-cell.is-look.is-current { background:var(--accent-wash); }
.so-cell-caption { font-size:.6875rem; line-height:1.2; display:flex; justify-content:space-between; gap:9px; width:100%; max-width:3.4375rem; color:var(--ink-soft); }
.so-cell-count { font-weight:650; color:var(--accent-dark); }
.so-size-toggle { margin-top:8px; }
.so-empty { display:flex; align-items:center; justify-content:center; color:var(--line-strong); }
/* Strokes: a stroke-order model, its steps and the overview models share these. <use> elements pass them on. */
.so-diagram,.so-page .stroke-display { overflow:visible; fill:none; stroke:none; }
.so-diagram path,.so-diagram use,.so-page .stroke-display path,.so-page .stroke-display use { stroke:var(--ink); stroke-width:4.3; stroke-linecap:round; stroke-linejoin:round; fill:none; }
.so-diagram .mark,.so-page .stroke-display .mark { stroke-width:3; }
.so-diagram .ghost,.so-page .stroke-display path.ghost { stroke:#8b9185; stroke-dasharray:3 5; }
.so-diagram .current,.so-page .stroke-display path.current { stroke:var(--accent); }
.so-page .stroke-display path.current { stroke-width:5.4; }
.so-page .stroke-display path.current.mark { stroke-width:3.8; }
/* Numbers: placed off the strokes (with a thin leader to the stroke's start where one had to move away), no outline.
   On a screen at 100-150% the leader is drawn without smoothing, so that it keeps the number's colour (3:1 or more). */
.so-page .so-n text { fill:var(--accent-dark); stroke:none; font-family:Arial,Helvetica,"Liberation Sans",Roboto,sans-serif; font-weight:700; }
.so-page .so-lead { stroke:var(--accent-dark); stroke-width:1px; vector-effect:non-scaling-stroke; fill:none; }
@media screen and (max-resolution:1.5dppx) { .so-page .so-lead { shape-rendering:crispEdges; } }
.so-cell .so-n-stage { display:none; }
.so-diagram circle,.so-page .stroke-display circle { fill:var(--accent-dark); stroke:var(--surface); stroke-width:1.1; }
.so-cell .so-diagram { height:calc(100% - .9375rem); width:100%; }
/* The compact overview: 46 models on a phone's first screen (34px models, 48px cells). */
.so-chart-area .so-cell { height:3rem; }
/* Drawings keep the size their numbers were placed for (px); the cells and the captions follow the text size (rem). */
.so-chart-area .so-cell .so-diagram { height:34px; flex-shrink:0; margin-bottom:.5625rem; }
.so-chart-area .so-cell-caption { position:absolute; bottom:1px; }
/* The marked overview has five rows, so its models can be larger. */
.so-chart-area #marked .so-cell { height:4.75rem; justify-content:flex-start; padding-top:5px; }
.so-chart-area #marked .so-cell .so-diagram { height:56px; margin-bottom:.75rem; }
.so-large #basic .so-grid,.so-large #marked .so-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.so-large #basic .so-empty { display:none; }
.so-large #basic .so-cell,.so-large #marked .so-cell { height:6.875rem; }
.so-large #basic .so-cell .so-diagram,.so-large #marked .so-cell .so-diagram { height:92px; margin-bottom:.5625rem; }
.so-large #basic .so-cell .so-n-cell,.so-large #marked .so-cell .so-n-marked { display:none; }
.so-large #basic .so-cell .so-n-stage,.so-large #marked .so-cell .so-n-stage { display:inline; }
/* The example column: the static あ, beside the charts from 720px, where the panel opens over it. */
.so-preview { display:none; border:1px solid var(--line); border-radius:14px; padding:18px; background:var(--surface); align-self:start; }
.so-preview h2 { font-size:1.375rem; margin-bottom:12px; }
.so-preview-tag { font-size:.75rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--so-muted); border:1px solid var(--line-strong); border-radius:99px; padding:1px 8px; vertical-align:middle; margin-left:4px; }
html:not(.so-scripted) .so-page .so-player { display:none; }
.so-model { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
.so-page .stroke-display { width:100%; height:190px; border:1px solid var(--line-strong); border-radius:9px; background:var(--surface); padding:9px; }
.so-player { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.so-player [data-stroke-play] { grid-column:1/-1; }
.so-player .stroke-status { grid-column:1/-1; min-height:2.7em; font-size:.8125rem; margin:3px 0 0; color:var(--so-muted); line-height:1.35; }
.so-note { margin:12px 0; font-size:.875rem; color:var(--ink-soft); }
.so-steps-title { font-size:1.0625rem; margin:15px 0 4px; }
.so-step-help { font-size:.8125rem; margin:0 0 8px; color:var(--so-muted); }
.so-frames { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:0; margin:0; gap:8px; list-style:none; }
.so-frames li { margin:0; padding:7px; border:1px solid var(--line); border-radius:7px; background:var(--surface); }
.so-frames li>span { font-size:.75rem; display:block; color:var(--ink-soft); }
.so-frames .so-diagram { width:100%; height:100px; }
.so-detail-links,.so-carry,.so-reading-links { display:flex; flex-wrap:wrap; gap:8px 16px; margin:14px 0 0; }
.so-detail-links a,.so-carry a,.so-reading-links a { display:inline-flex; align-items:center; min-height:44px; min-width:44px; font-size:.875rem; }
/* The hiragana activities row, as on the other hiragana pages (its links carry the study set). */
.so-page .hiragana-subnav { display:flex; flex-wrap:wrap; gap:0 18px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:18px 0 0; padding:2px 0; }
.so-page .hiragana-subnav a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; color:var(--ink-soft); text-decoration:none; font-size:.875rem; }
.so-page .hiragana-subnav a:hover { color:var(--accent-dark); text-decoration:underline; }
.so-page .hiragana-subnav [aria-current="page"] { color:var(--accent-dark); font-weight:650; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px; }
/* The study set. */
.so-selection { margin-top:16px; padding:14px; background:var(--green-wash); border:1px solid var(--line); border-radius:9px; }
.so-selection h2 { font-size:1.125rem; margin:0 0 4px; }
.so-selection p { margin:0; font-size:.875rem; }
.so-selection>button { margin-top:9px; }
.so-selection .so-selected-help { margin-top:10px; }
.so-selected { display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:8px 0 0; padding:0; }
.so-selected[hidden] { display:none; }
.so-selected li { margin:0; min-width:0; }
.so-selected button { display:inline-flex; align-items:center; gap:7px; min-width:72px; margin:0; }
.so-selected-kana,.so-selected-cross { font-size:1.25rem; line-height:1; }
.so-groups { margin-top:12px; }
.so-groups label { display:block; font-size:.875rem; font-weight:600; margin-bottom:4px; }
.so-group-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.so-group-row select { min-height:44px; max-width:100%; font-size:.875rem; border:1px solid var(--line-strong); border-radius:7px; background:var(--surface); color:var(--ink); padding:6px 10px; }
.so-notice,.so-oneoff,.so-undo { margin-top:10px; padding:10px 12px; border-radius:8px; background:var(--surface); border:1px solid var(--line-strong); }
.so-notice[hidden],.so-oneoff[hidden],.so-undo[hidden] { display:none; }
.so-oneoff { border-color:var(--so-look-line); background:var(--so-look); }
.so-notice p,.so-oneoff p { margin:0 0 8px; }
.so-notice button { margin:0; }
.so-actions { display:flex; flex-wrap:wrap; gap:8px; }
.so-undo { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
/* Downloads: both paper sizes, US Letter first, then A4; the chosen paper's preview is shown. */
.so-downloads,.so-small-section,.so-questions,.so-source { margin-top:36px; }
.so-page section:not(.so-block)>h2 { font-size:1.5625rem; }
.so-selection>h2 { font-size:1.125rem !important; }
.so-paper { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 12px; font-size:.875rem; }
.so-paper span { font-weight:600; margin-right:4px; }
.so-paper button { min-width:44px; }
.so-download-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; max-width:750px; }
.so-download { border:1px solid var(--line); background:var(--surface); border-radius:9px; padding:12px; }
.so-preview-link { display:block; }
.so-download img { display:block; width:100%; height:auto; border:1px solid var(--line); }
.so-download .so-preview-a4,html[data-so-paper="a4"] .so-download .so-preview-letter { display:none; }
html[data-so-paper="a4"] .so-download .so-preview-a4 { display:block; }
.so-download h3 { margin:10px 0 4px; font-size:1.125rem; }
.so-files { display:flex; flex-direction:column; gap:0; }
.so-file { display:flex; flex-wrap:wrap; align-items:center; gap:0 14px; margin:0; font-size:.875rem; }
.so-file-paper { min-width:5.2em; font-weight:600; color:var(--ink-soft); }
.so-file a { display:inline-flex; align-items:center; min-height:44px; min-width:44px; }
.so-fine { font-size:.75rem; line-height:1.5; margin:12px 0; color:var(--so-muted); }
.so-download .so-fine { margin:0 0 4px; }
.so-small-section { display:grid; gap:16px; }
.so-small-section .so-cell { height:5.5rem; }
.so-small-section .so-diagram { height:70px; }
.so-small-section #combinations .so-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.so-small-section #combinations .so-cell-caption { max-width:6.25rem; }
.so-reference-bank { margin-top:30px; }
.so-page details { padding:12px; }
.so-page summary { min-height:44px; display:list-item; font-size:1rem; }
.so-questions details p { margin:8px 0 0; font-size:.9375rem; }
.so-source p { font-size:.875rem; color:var(--so-muted); }
/* The scripted page shows one chart at a time; without JavaScript both, and the static steps. */
html.so-scripted .so-page #marked { display:none; }
html.so-scripted[data-so-shown="marked"] .so-page #basic { display:none; }
html.so-scripted[data-so-shown="marked"] .so-page #marked { display:block; }
/* The stroke panel is docked, not modal: a column beside the main charts from 720px (.is-side), else under the page
   (.is-docked). The page stays usable, and choosing another model swaps what the panel shows. The script sets its
   place (--so-x and so on) and the heights of its sticky header and footer, which keep focused controls clear. */
.so-dialog { position:fixed; inset:auto; z-index:28; margin:0; border:1px solid var(--line-strong); background:var(--paper); padding:0; color:var(--ink); overflow:auto; overscroll-behavior:contain; scroll-padding-top:calc(var(--so-head-h,0px) + 6px); scroll-padding-bottom:calc(var(--so-foot-h,0px) + 6px); }
.so-dialog.is-side { left:var(--so-x,auto); top:var(--so-top,12px); width:var(--so-width,360px); max-height:var(--so-max,calc(100svh - 24px)); border-radius:15px; box-shadow:0 16px 44px rgb(37 42 37 / 20%); }
.so-dialog.is-docked { left:0; right:0; top:auto; bottom:0; width:100%; max-width:none; max-height:min(72svh,620px); border-width:1px 0 0; border-radius:15px 15px 0 0; box-shadow:0 -10px 30px rgb(37 42 37 / 16%); }
.so-dialog.is-away { visibility:hidden; }
.so-dialog button,.so-dialog a { scroll-margin-block:6px; }
.so-panel-over .so-preview { visibility:hidden; }
.so-page [data-so-more] { display:none; }
.so-dialog.is-docked [data-so-more] { display:inline-block; }
/* The study-set button stays in view while the panel's contents scroll. */
.so-dialog .so-dialog-footer { position:sticky; bottom:0; z-index:1; background:var(--surface); }
.so-dialog-header { position:sticky; top:0; z-index:2; display:flex; gap:6px; align-items:center; padding:10px; background:var(--surface); border-bottom:1px solid var(--line); }
.so-dialog-header h2 { font-size:1.125rem; margin:0; flex:1; letter-spacing:0; }
.so-dialog-header button { padding:8px; min-width:44px; }
.so-dialog-body { padding:14px; }
.so-dialog-footer { padding:12px 14px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); }
.so-dialog-footer p { font-size:.8125rem; margin:6px 0 0; }
.so-dialog.is-docked .so-dialog-header,.so-dialog.is-docked .so-dialog-body,.so-dialog.is-docked .so-dialog-footer { padding-inline:max(14px,calc((100% - 980px) / 2)); }
/* The page gains room so that every row can be scrolled above the docked panel, and its scroll padding keeps keyboard
   focus clear of it: the script measures the panel and sets both on the body and the page (round 2). */
.so-dialog.is-docked .so-model { grid-template-columns:1fr 1fr; align-items:start; }
.so-dialog.is-docked .stroke-display { height:175px; }
.so-dialog.is-docked .so-player { grid-template-columns:repeat(2,minmax(0,1fr)); }
.so-dialog.is-docked [data-stroke-reset] { grid-column:1/-1; }
.so-dialog.is-docked[data-combination="true"] .so-model { grid-template-columns:1fr; }
.so-dialog.is-docked[data-combination="true"] .stroke-display { height:185px; }
.so-dialog.is-docked[data-combination="true"] .so-player { grid-template-columns:repeat(3,minmax(0,1fr)); }
.so-dialog.is-docked[data-combination="true"] [data-stroke-reset] { grid-column:auto; }
/* Docked, the panel opens short: the model and its controls. More shows the note, the steps, the links and the
   study-set button. The written stroke status stays in the page for screen readers. */
.so-dialog.is-docked:not(.is-expanded) .so-note,.so-dialog.is-docked:not(.is-expanded) .so-steps-title,.so-dialog.is-docked:not(.is-expanded) .so-step-help,.so-dialog.is-docked:not(.is-expanded) .so-frames,.so-dialog.is-docked:not(.is-expanded) .so-detail-links,.so-dialog.is-docked:not(.is-expanded) .so-dialog-footer { display:none; }
.so-dialog.is-docked:not(.is-expanded) .stroke-status { position:absolute; width:1px; height:1px; min-height:0; margin:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.so-dialog.is-docked:not(.is-expanded) .so-dialog-body { padding-top:10px; padding-bottom:calc(12px + env(safe-area-inset-bottom)); }
.so-dialog.is-docked:not(.is-expanded) .so-model { grid-template-columns:112px minmax(0,1fr); }
.so-dialog.is-docked:not(.is-expanded) .stroke-display { height:112px; padding:5px; }
.so-dialog.is-docked:not(.is-expanded) .so-player { grid-template-columns:repeat(3,minmax(0,1fr)); }
.so-dialog.is-docked:not(.is-expanded) .so-player button { padding:8px 4px; }
.so-dialog.is-docked:not(.is-expanded) [data-stroke-reset] { grid-column:auto; }
.so-dialog.is-docked[data-combination="true"]:not(.is-expanded) .so-model { grid-template-columns:150px minmax(0,1fr); }
.so-dialog.is-docked[data-combination="true"]:not(.is-expanded) .stroke-display { height:104px; }
@media (min-width:720px) {
  .so-heading h1 { font-size:2rem; }
  .so-toolbar { margin-bottom:4px; }
  .so-chart-area { grid-template-columns:minmax(300px,1fr) minmax(310px,1fr); gap:24px; }
  html.so-scripted .so-preview { display:block; }
  .so-page .so-model { grid-template-columns:1fr 1fr; align-items:start; }
  .so-player { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .so-small-section { grid-template-columns:1fr 1fr; }
  .so-small-section>p { grid-column:1; }
  .so-small-section #combinations { grid-column:2; grid-row:1/3; }
  .so-page .so-frames { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .so-frames .so-diagram { height:75px; }
  .so-dialog.is-docked .so-frames { grid-template-columns:repeat(6,minmax(0,1fr)); }
}
@media (min-width:1024px) {
  .so-heading { padding-right:410px; min-height:65px; }
  .so-toolbar { margin-top:-65px; margin-left:auto; width:400px; min-height:65px; justify-content:flex-end; }
}
@media (max-width:719px) {
  .so-small-jump { display:none; }
  .so-dialog.is-docked .so-model { grid-template-columns:1fr 1fr; }
}
@media (min-width:720px) and (max-width:1023px) {
  .so-preview .so-player,.so-dialog.is-side .so-player { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .so-preview [data-stroke-reset],.so-dialog.is-side [data-stroke-reset] { grid-column:1/-1; }
}
@media (min-width:600px) and (max-width:719px) and (max-height:479px) {
  .so-dialog.is-docked[data-combination="true"] .so-model { grid-template-columns:1fr 1fr; }
  .so-dialog.is-docked[data-combination="true"] .stroke-display { height:145px; }
  .so-dialog.is-docked[data-combination="true"] .so-player { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .so-dialog.is-docked[data-combination="true"] [data-stroke-reset] { grid-column:1/-1; }
}
/* A short window (a phone on its side, or a page zoomed to 400%): the panel's header and footer scroll with its
   contents, so that the model, the steps and the links can all be seen; the short panel keeps to half the screen. */
@media (max-height:500px) {
  .so-dialog .so-dialog-header,.so-dialog .so-dialog-footer { position:static; }
  .so-dialog.is-side .stroke-display { height:130px; }
  .so-dialog.is-docked:not(.is-expanded) { max-height:max(150px,50vh); }
  .so-dialog.is-docked:not(.is-expanded) .so-model { grid-template-columns:84px minmax(0,1fr); }
  .so-dialog.is-docked:not(.is-expanded) .stroke-display { height:84px; }
  .so-dialog.is-docked[data-combination="true"]:not(.is-expanded) .so-model { grid-template-columns:130px minmax(0,1fr); }
  .so-dialog.is-docked[data-combination="true"]:not(.is-expanded) .stroke-display { height:84px; }
}
@media (max-width:350px) {
  .so-heading h1 { font-size:1.5rem; }
  .so-toolbar a,.so-toolbar button { padding:8px; font-size:.8125rem; }
  .so-dialog-header h2 { font-size:.9375rem; }
  .so-dialog-header { gap:4px; }
  .so-dialog.is-docked .so-model { grid-template-columns:1fr; }
  .so-dialog.is-docked .stroke-display { height:145px; }
  .so-dialog.is-docked .so-player { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .so-dialog.is-docked [data-stroke-reset] { grid-column:auto; }
  .so-dialog.is-docked:not(.is-expanded) .so-model { grid-template-columns:96px minmax(0,1fr); }
  .so-dialog.is-docked:not(.is-expanded) .stroke-display { height:96px; }
  .so-dialog.is-docked:not(.is-expanded) .so-player button { font-size:.8125rem; }
  .so-dialog.is-docked[data-combination="true"]:not(.is-expanded) .so-model { grid-template-columns:128px minmax(0,1fr); }
  .so-dialog.is-docked[data-combination="true"]:not(.is-expanded) .stroke-display { height:96px; }
}
@media (prefers-reduced-motion:reduce) { .so-page * { scroll-behavior:auto; animation:none; transition:none; } }
/* Contrast themes: the drawings take the theme's colours, the model boxes its background (they were white strokes on
   cream in dark themes), and the states stay distinct: the shown model dashed, the study set solid, focus thick. */
@media (forced-colors:active) {
  .so-page .stroke-display,.so-frames li,.so-cell { background:Canvas; }
  .so-diagram path,.so-diagram use,.so-page .stroke-display path,.so-page .stroke-display use { stroke:CanvasText !important; }
  .so-diagram .ghost,.so-page .stroke-display path.ghost { stroke:GrayText !important; stroke-dasharray:3 5 !important; }
  .so-diagram .current,.so-page .stroke-display path.current { stroke:Highlight !important; stroke-width:6 !important; }
  .so-page .so-n text { fill:CanvasText; }
  .so-page .so-lead { stroke:CanvasText; }
  .so-diagram circle,.so-page .stroke-display circle { fill:Highlight !important; stroke:Canvas !important; }
  .so-page button[aria-pressed="true"] { forced-color-adjust:none; background:Highlight; color:HighlightText; border-color:Highlight; box-shadow:none; }
  .so-cell.is-selected { border:2px solid CanvasText; box-shadow:none; }
  .so-cell.is-current { outline:2px dashed Highlight; outline-offset:-6px; }
  .so-cell.is-look::before { content:''; position:absolute; inset:0; border:2px dotted CanvasText; border-radius:5px; pointer-events:none; }
  .so-cell:focus-visible { outline:4px solid Highlight; outline-offset:2px; }
}
/* The two chart files are this page drawn with ?poster=basic or ?poster=marked (render_stroke_chart_assets.py). */
body.so-poster .site-header,body.so-poster .site-footer,body.so-poster .prototype-banner,body.so-poster .page-tabs,body.so-poster .skip-link,body.so-poster #main>noscript { display:none; }
body.so-poster #main { padding:12mm; max-width:none; width:210mm; margin:0; }
html[data-so-paper="letter"] body.so-poster #main { width:215.9mm; }
body.so-poster .universe-breadcrumbs,body.so-poster .hiragana-subnav,body.so-poster .so-toolbar,body.so-poster .so-legend,body.so-poster .so-preview,body.so-poster .so-selection,body.so-poster .so-downloads,body.so-poster .so-small-section,body.so-poster .so-reference-bank,body.so-poster .so-questions,body.so-poster .so-source,body.so-poster .so-dialog,body.so-poster .so-size-toggle { display:none !important; }
body.so-poster .so-chart-area { display:block; }
body.so-poster .so-heading { padding-right:0; min-height:0; }
body.so-poster .so-screen-help { display:none; }
body.so-poster .so-paper-help { display:inline; }
body.so-poster .so-cell { height:18.5mm; padding:1mm; border-radius:1.5mm; }
body.so-poster .so-chart-area .so-cell .so-diagram,body.so-poster .so-chart-area #marked .so-cell .so-diagram { height:calc(100% - 15px); margin-bottom:9px; }
html:has(body.so-poster),body.so-poster { background:#fff; }
body.so-poster #marked .so-cell .so-n-marked { display:none; }
body.so-poster #marked .so-cell .so-n-stage { display:inline; }
body.so-poster .so-block::after { content:'Draft teaching reference. Stroke paths and numbers: KanjiVG © Ulrich Apel · CC BY-SA 3.0 (creativecommons.org/licenses/by-sa/3.0/) · Numbers moved off the strokes, with leaders, and arranged by MiniMachi · minimachi.com/hiragana/stroke-order/'; font-size:9px; display:block; margin-top:5mm; }
body.so-poster #marked .so-cell { height:37mm; padding-top:2.5mm; }
body.so-poster .so-cell-caption { font-size:11px; max-width:70px; }
body.so-poster .so-heading h1 { font-size:28px; }
body.so-poster .so-block h2 { font-size:14px; }
html[data-so-paper="letter"] body.so-poster #basic .so-cell { height:17.6mm; }
@media print {
  /* US Letter unless A4 was chosen (or the time zone uses it); the chart files have their own page. */
  @page { size:letter; margin:10mm; }
  @page so-a4 { size:A4; margin:10mm; }
  @page so-poster-letter { size:letter; margin:0; }
  @page so-poster-a4 { size:A4; margin:0; }
  html[data-so-paper="a4"] body { page:so-a4; }
  body.so-poster { page:so-poster-letter; }
  html[data-so-paper="a4"] body.so-poster { page:so-poster-a4; }
  /* No page colour under the content when the browser prints backgrounds. */
  html,body[data-route="/hiragana/stroke-order/"] { background:#fff !important; }
  body.so-panel-docked { padding-bottom:0 !important; }
  body[data-route="/hiragana/stroke-order/"] .site-header,body[data-route="/hiragana/stroke-order/"] .site-footer,body[data-route="/hiragana/stroke-order/"] .prototype-banner,body[data-route="/hiragana/stroke-order/"] .page-tabs,body[data-route="/hiragana/stroke-order/"] .skip-link,body[data-route="/hiragana/stroke-order/"] #main>noscript { display:none !important; }
  body[data-route="/hiragana/stroke-order/"] #main { width:100%; max-width:none; padding:0; margin:0; }
  .so-page .universe-breadcrumbs,.so-page .hiragana-subnav,.so-toolbar,.so-legend,.so-preview,.so-selection,.so-downloads,.so-small-section,.so-reference-bank,.so-questions,.so-source,.so-dialog,.so-size-toggle,.so-page noscript { display:none !important; }
  .so-large #basic .so-grid,.so-large #marked .so-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .so-large #basic .so-empty { display:flex; }
  .so-chart-area { display:block; }
  .so-heading { padding-right:0; min-height:0; }
  .so-screen-help { display:none; }
  .so-paper-help { display:inline; }
  .so-page #basic,.so-page #marked { display:block !important; }
  .so-page #marked { break-before:page; }
  .so-page .so-cell { height:18.5mm; padding:1mm; break-inside:avoid; background:#fff; }
  .so-page #basic .so-cell { height:18.5mm; }
  .so-page .so-chart-area .so-cell .so-diagram,.so-page .so-chart-area #marked .so-cell .so-diagram { height:calc(100% - 15px); margin-bottom:9px; }
  .so-page .so-chart-area #basic .so-cell .so-diagram,.so-page.so-large .so-chart-area #basic .so-cell .so-diagram,.so-page.so-large .so-chart-area #marked .so-cell .so-diagram { height:calc(100% - 15px); margin-bottom:9px; }
  .so-page.so-large #basic .so-cell { height:18.5mm; }
  .so-page.so-large #marked .so-cell { height:33mm; }
  .so-page #basic .so-cell .so-n-cell { display:inline; }
  .so-page #basic .so-cell .so-n-stage { display:none; }
  .so-page #marked .so-cell .so-n-marked { display:none; }
  .so-page #marked .so-cell .so-n-stage { display:inline; }
  .so-block::after { content:'Draft teaching reference. Stroke paths and numbers: KanjiVG © Ulrich Apel · CC BY-SA 3.0 (creativecommons.org/licenses/by-sa/3.0/) · Numbers moved off the strokes, with leaders, and arranged by MiniMachi · minimachi.com/hiragana/stroke-order/'; font-size:9px; display:block; margin-top:5mm; }
  .so-page #marked .so-cell { height:33mm; padding-top:2.5mm; }
  body.so-poster #main { padding:12mm; width:210mm; }
  html[data-so-paper="letter"] body.so-poster #main { width:215.9mm; }
  body.so-poster .so-page #basic,body.so-poster .so-page #marked { display:none !important; break-before:auto; }
  html[data-so-poster="basic"] body.so-poster .so-page #basic,html[data-so-poster="marked"] body.so-poster .so-page #marked { display:block !important; }
  body.so-poster .so-page #marked .so-cell { height:37mm; padding-top:2.5mm; }
  html[data-so-paper="letter"] body.so-poster .so-page #basic .so-cell { height:17.6mm; }
}