@charset "UTF-8";
/* Page-scoped styles; shared tokens and header are unchanged. Revised 4 October 2026 after an audit: the page's first
   script sets ws-js, ws-incoming, data-ws-paper and data-ws-style on the html element before anything is painted, and
   the rules below draw the final layout from those, so nothing moves when the page script runs. Without JavaScript
   (or if the page script fails to load) the page keeps its no-JavaScript layout: both paper sizes, no editor. */
#main .w-intro h1 { font-size:clamp(1.85rem,4vw,3rem); margin:0 0 10px; }
#main .w-intro p { max-width:650px; margin:0 0 20px; color:var(--ink-soft); }
#main .worksheets-page h2 { font-size:clamp(1.25rem,2.2vw,1.7rem); margin:0 0 14px; }
#main .worksheets-page h3 { font-size:1.06rem; margin:0 0 8px; }
#main .worksheets-page button, #main .worksheets-page select { min-height:44px; border:1px solid var(--muted); border-radius:var(--radius-small); color:var(--ink); background:var(--surface); padding:8px 12px; max-width:100%; }
#main .worksheets-page [hidden] { display:none !important; }

/* Scripted layout, chosen before the first paint. */
#main .w-sections { display:flex; flex-direction:column; gap:30px; margin-bottom:30px; }
#main .w-paper-control, #main .w-editor, #main .w-style-help { display:none; }
.ws-js #main .w-paper-control { display:flex; }
.ws-js #main .w-editor { display:block; }
.ws-js #main [data-w-fallback] { display:none; }
.ws-incoming #main .w-editor { order:-1; }
.ws-js[data-ws-paper="a4"] #main [data-w-file="letter"], .ws-js[data-ws-paper="letter"] #main [data-w-file="a4"] { display:none; }
.ws-js[data-ws-style="trace"] #main [data-w-help="trace"], .ws-js[data-ws-style="copy"] #main [data-w-help="copy"], .ws-js[data-ws-style="recall"] #main [data-w-help="recall"],
.ws-js[data-ws-style="blank"] #main [data-w-help="blank"], .ws-js[data-ws-style="grid"] #main [data-w-help="grid"] { display:block; }

/* Ready-made PDFs */
#main .w-paper-control { flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 16px; }
#main .w-paper-control span { font-size:.85rem; color:var(--ink-soft); }
#main .w-paper-control label, #main .w-field label, #main .w-preset-controls label { font-weight:650; }
#main .w-ready-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
#main .w-download { display:grid; grid-template-columns:minmax(76px,.7fr) minmax(0,1.3fr); gap:14px; padding:16px; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius); }
#main .w-thumbnail { display:block; align-self:start; border:1px solid var(--line-strong); background:white; line-height:0; }
#main .w-thumbnail img { display:block; width:100%; height:auto; aspect-ratio:595/842; object-fit:contain; }
.ws-js[data-ws-paper="letter"] #main .w-thumbnail img { aspect-ratio:612/792; }
#main .w-download p { font-size:.85rem; color:var(--ink-soft); line-height:1.5; margin:0 0 8px; }
#main .w-download .w-pages { font-size:.8rem; }
#main .w-file-links { display:flex; flex-wrap:wrap; gap:6px; }
#main .w-file { display:inline-flex; flex-wrap:wrap; align-items:center; min-height:44px; padding:8px 10px; background:var(--accent-dark); color:white; border:1px solid var(--accent-dark); border-radius:var(--radius-small); text-decoration:none; font-size:.85rem; gap:4px; }
#main .w-file-size { font-size:.75rem; }
#main .w-help { font-size:.87rem; color:var(--ink-soft); line-height:1.6; margin:12px 0 16px; }

/* Your worksheet: settings first, then the preview (beside them from 600px). */
#main .w-editor { padding:20px; border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--surface); }
#main .w-selection { font-size:1rem; line-height:1.5; min-height:3em; margin:0 0 12px; overflow-wrap:anywhere; }
#main .w-builder { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,540px); gap:28px; align-items:start; }
#main .w-main-actions { display:flex; flex-wrap:wrap; gap:8px; }
#main .w-save { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 16px; border:1px solid var(--accent-dark); border-radius:var(--radius-small); color:white; background:var(--accent-dark); text-decoration:none; font-weight:600; }
#main .w-save[aria-disabled="true"] { opacity:.6; cursor:default; }
#main .w-file-summary { font-size:.85rem; line-height:1.5; min-height:3em; margin:10px 0 14px; color:var(--ink-soft); }
#main .w-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; }
#main .w-field select { display:block; width:100%; margin-top:6px; }
#main .w-style-help { margin:10px 0 0; }
#main .w-study { margin:16px 0 0; padding:12px; border:1px solid var(--line); border-radius:var(--radius-small); background:var(--paper); }
#main .w-study-text { font-size:.9rem; line-height:1.5; min-height:1.5em; margin:0 0 8px; overflow-wrap:anywhere; }
#main .w-study-row { display:grid; align-items:center; }
#main .w-study-row > * { grid-area:1/1; margin:0; }
#main .w-adopt { justify-self:start; border-color:var(--green); font-weight:600; }
#main .w-study-same { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; min-height:44px; font-size:.9rem; line-height:1.4; }
#main .w-study-row[data-w-study-mode="adopt"] .w-study-same, #main .w-study-row:not([data-w-study-mode="adopt"]) .w-adopt, #main .w-undo { visibility:hidden; }
#main .w-study-row.w-can-undo[data-w-study-mode="same"] .w-undo { visibility:visible; }
#main .w-warning { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:10px; margin:14px 0 0; border-left:3px solid var(--accent-dark); background:var(--accent-wash); font-size:.85rem; overflow-wrap:anywhere; }
#main .w-warning p { flex:1 1 200px; margin:0; }
#main .w-preview { background:white; border:1px solid var(--line-strong); line-height:0; aspect-ratio:595/842; }
.ws-js[data-ws-paper="letter"] #main .w-preview { aspect-ratio:612/792; }
#main .w-preview svg { display:block; width:100%; height:100%; }
#main .w-no-preview { display:grid; place-items:center; height:100%; box-sizing:border-box; padding:12px; margin:0; font-size:.85rem; line-height:1.5; text-align:center; background:var(--surface-muted); color:var(--ink-soft); }
#main .w-page-controls { display:flex; align-items:center; gap:8px; justify-content:center; margin-top:8px; font-size:.85rem; }
#main .w-page-controls button { width:44px; padding:8px; }
#main .w-one-page .w-page-controls button, #main .w-preview-open.w-unavailable { visibility:hidden; }
#main .w-one-page .w-full-preview { display:none; }
#main .w-preview-open { display:flex; min-height:44px; align-items:center; justify-content:center; font-size:.85rem; }

/* Change characters: basic, marked and two-kana groups, in chart columns. */
#main .worksheets-page details { margin:20px 0; padding:0 12px; }
#main .worksheets-page summary { min-height:44px; padding-block:10px; cursor:pointer; }
#main .w-picker > summary, #main .w-full-preview > summary { font-weight:650; }
#main .w-preset-controls { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding-top:4px; }
#main .w-preset-controls select { min-width:0; flex:1 1 210px; }
#main .w-individual { display:grid; gap:22px; margin:12px 0 14px; align-items:start; }
#main .w-group-title { font-size:.95rem; margin:0 0 8px; }
#main .w-group-count { font-weight:400; font-size:.82rem; color:var(--ink-soft); white-space:nowrap; }
#main .w-group-note { font-size:.8rem; line-height:1.5; color:var(--ink-soft); margin:0 0 8px; }
#main .w-group-grid { display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr)); gap:6px; }
#main .w-individual button { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; padding:6px 2px 4px; outline-offset:2px; scroll-margin:12px; }
#main .w-individual .w-glyph { display:block; line-height:0; }
#main .w-individual .w-glyph svg { display:block; height:34px; width:auto; max-width:100%; margin:auto; }
#main .w-glyph svg > rect:first-of-type { fill:transparent; }
#main .w-individual .w-reading { display:block; font-size:.75rem; line-height:1.3; overflow-wrap:anywhere; }
/* The state also shows without colour: a ring for "not on the sheet", a tick for "on the sheet" (as on the chart). */
#main .w-individual button::after { content:""; position:absolute; top:3px; right:3px; box-sizing:border-box; width:13px; height:13px; border:1.5px solid var(--line-strong); border-radius:50%; background:var(--surface); color:white; font-size:9px; font-weight:700; line-height:10px; text-align:center; }
#main .w-individual button[aria-pressed="true"] { background:var(--green-wash); border:2px solid var(--green); padding:5px 1px 3px; }
#main .w-individual button[aria-pressed="true"]::after { content:"✓"; border-color:var(--green); background:var(--green); }
@media (hover:hover) { #main .w-individual button[aria-pressed="false"]:hover { background:var(--accent-wash); border-color:var(--accent-dark); } }
#main .w-full-preview [data-w-all-previews] { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:14px; }
#main .w-all-page { border:1px solid var(--line-strong); background:white; line-height:0; }
#main .w-all-page svg { display:block; width:100%; height:auto; }

/* The rest of the page */
#main .w-row-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding-bottom:14px; }
#main .w-row-packs, #main .w-guide, #main .w-faq { margin-top:32px; }
#main .w-next-links { display:flex; flex-wrap:wrap; gap:10px; }
#main .w-next-links a { display:flex; min-height:44px; align-items:center; color:var(--accent-dark); padding:4px 6px; }
#main .w-credit { font-size:.8rem; color:var(--ink-soft); margin-top:24px; }
#main .w-print-pages { display:none; }

@media (min-width:680px) {
  #main .w-individual { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-areas:"basic marked" "basic combos"; }
  #main .w-group-basic { grid-area:basic; } #main .w-group-marked { grid-area:marked; } #main .w-group-combos { grid-area:combos; }
}
@media (min-width:1000px) {
  #main .w-individual { grid-template-columns:5fr 5fr 3fr; grid-template-areas:"basic marked combos"; }
  #main .w-full-preview [data-w-all-previews] { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:1050px) {
  #main .w-ready-grid, #main .w-row-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #main .w-download { grid-template-columns:110px minmax(0,1fr); }
}
@media (max-width:999px) { #main .w-builder { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; } }
@media (max-width:599px) {
  #main .w-intro h1 { font-size:clamp(1.55rem,7.9vw,1.85rem); }
  #main .w-editor { padding:14px; }
  #main .w-builder { grid-template-columns:1fr; gap:18px; }
  #main .w-ready-grid, #main .w-row-grid, #main .w-full-preview [data-w-all-previews] { grid-template-columns:1fr; }
  #main .w-paper-control span { display:none; }
  #main .w-main-actions > * { flex:1 1 120px; }
  #main .w-picker { padding:0 8px; }
}
@media (max-width:359px) { #main .w-editor { padding:12px 10px; } #main .w-group-grid { gap:4px; } }
@media (forced-colors:active) {
  #main .w-individual .w-glyph svg path { stroke:CanvasText !important; }
  #main .w-individual .w-glyph svg circle { fill:CanvasText !important; }
  #main .w-individual button::after { forced-color-adjust:none; border-color:CanvasText; background:Canvas; color:Canvas; }
  #main .w-individual button[aria-pressed="true"] { border-width:3px; padding:4px 0 2px; }
  #main .w-individual button[aria-pressed="true"]::after { border-color:Highlight; background:Highlight; color:HighlightText; }
  #main .w-save, #main .w-file { border-color:ButtonText; }
}
@media print {
  body[data-route="/hiragana/worksheets/"] { background:white; }
  body[data-route="/hiragana/worksheets/"] .site-header, body[data-route="/hiragana/worksheets/"] .site-footer, body[data-route="/hiragana/worksheets/"] .prototype-banner, body[data-route="/hiragana/worksheets/"] .page-tabs, body[data-route="/hiragana/worksheets/"] #brief, body[data-route="/hiragana/worksheets/"] noscript { display:none!important; }
  body[data-route="/hiragana/worksheets/"] #main { padding:0; width:100%; max-width:none; }
  #main .worksheets-ready:has(.w-print-pages:not(:empty))>* { display:none!important; }
  #main .worksheets-ready .w-print-pages:not(:empty) { display:block!important; }
  #main .w-print-sheet { break-after:page; break-inside:avoid; line-height:0; width:100%; }
  #main .w-print-sheet:last-child { break-after:auto; }
  #main .w-print-sheet svg { display:block; width:100%; height:auto; }
}