/* Original page styles; KanjiVG drawing treatment follows hiragana-chart.css, 7 Oct 2026. */
#main .ws-page { max-width:1100px; margin:auto; color:var(--ink); }
#main .ws-page h1 { font-size:1.9rem; line-height:1.15; margin:8px 0 12px; letter-spacing:-.035em; }
#main .ws-page h2 { font-size:1.3rem; margin:0 0 12px; line-height:1.2; }
#main .ws-page h3 { font-size:1.08rem; margin:20px 0 8px; }
#main .ws-page p { margin:0 0 12px; }
#main .ws-breadcrumb { font-size:.8rem; margin-bottom:8px; }
#main .ws-breadcrumb a { display:inline-flex; min-height:44px; align-items:center; }
#main .ws-answer { max-width:78ch; font-size:1.03rem; line-height:1.55; }
#main .ws-page section { margin-top:28px; scroll-margin-top:24px; }
#main .ws-first { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
#main .ws-first section { margin-top:6px; }
#main .ws-sentence { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px; }
#main .ws-japanese { font-size:clamp(17px,3.7cqi,29px); line-height:1.7; white-space:nowrap; }
#main .ws-run { display:inline-block; }
#main .ws-hiragana { text-decoration:underline solid; text-underline-offset:.22em; text-decoration-thickness:2px; }
#main .ws-katakana { text-decoration:underline dashed; text-underline-offset:.22em; text-decoration-thickness:2px; }
#main .ws-kanji { text-decoration:underline double; text-underline-offset:.22em; text-decoration-thickness:2px; }
#main .ws-legend { font-size:.74rem; line-height:1.7; }
#main .ws-page table { border-collapse:collapse; table-layout:fixed; width:100%; font-size:.84rem; }
#main .ws-page th,#main .ws-page td { border-bottom:1px solid var(--line); padding:9px 7px; text-align:left; vertical-align:top; overflow-wrap:anywhere; }
#main .ws-page th:first-child { width:20%; }
#main .ws-pairs { display:flex; flex-wrap:wrap; gap:8px; }
#main .ws-pair { display:grid; justify-items:center; width:80px; min-height:70px; text-decoration:none; border:1px solid var(--line); border-radius:10px; padding:6px; }
#main .ws-pair-shapes { display:flex; gap:4px; }
#main .ws-pair strong { font-size:.8rem; }
#main .kana-defs { position:absolute; width:0; height:0; }
#main .kana-drawing { width:30px; height:34px; fill:none; stroke:currentColor; stroke-width:6; stroke-linecap:round; stroke-linejoin:round; }
#main .kana-drawing .mark { stroke-width:4.2; }
#main .ws-look-notes { columns:2; font-size:.91rem; padding-left:20px; }
#main .ws-look-notes li { break-inside:avoid; margin-bottom:8px; }
#main .ws-questions { display:grid; grid-template-columns:1fr 1fr; gap:8px 28px; }
#main .ws-questions article { break-inside:avoid; }
#main .ws-quiz { padding:20px; border:1px solid var(--line); border-radius:14px; background:var(--surface); max-width:620px; }
#main .ws-prompt { font-size:3rem; line-height:1.2; }
#main .ws-choices { display:flex; flex-wrap:wrap; gap:8px; }
#main .ws-page button { min-height:44px; border:1px solid var(--line-strong); border-radius:8px; background:var(--surface); color:var(--ink); padding:8px 14px; cursor:pointer; }
#main [data-ws-feedback] { min-height:3.2em; margin:12px 0; }
#main .ws-next { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
#main .ws-next a,#main .ws-page summary { min-height:44px; display:inline-flex; align-items:center; }
#main .ws-page :is(a,button,summary):focus-visible { outline:3px solid var(--accent-dark); outline-offset:3px; }
#main .ws-page [hidden] { display:none !important; }
#main .ws-print-answer { display:none; }
@media(max-width:760px) {
 #main:has(.ws-page) { padding-block:12px 40px; }
 #main .ws-breadcrumb { margin-bottom:0; }
 #main .ws-page h1 { font-size:1.7rem; margin:0 0 10px; }
 #main .ws-answer { font-size:.94rem; line-height:1.48; }
 #main .ws-first { grid-template-columns:1fr; gap:14px; }
 #main .ws-first section { margin-top:0; }
 #main .ws-page h2 { font-size:1.12rem; margin-bottom:9px; }
 #main .ws-sentence { padding:12px; container-type:inline-size; }
 #main .ws-japanese { font-size:clamp(17px,6cqi,23px); }
 #main .ws-legend { font-size:.7rem; }
 #main .ws-page table { font-size:.74rem; }
 #main .ws-page th,#main .ws-page td { padding:7px 5px; }
 #main .ws-questions { grid-template-columns:1fr; }
 #main .ws-look-notes { columns:1; }
}
@media print {
 .site-header,.site-footer,.prototype-banner,.page-tabs,#brief,noscript { display:none !important; }
 #main { padding:0 !important; max-width:none; }
 #main .ws-page { font-size:10pt; }
 #main .ws-page .ws-first { grid-template-columns:1fr 1fr; }
 #main .ws-page .ws-questions { grid-template-columns:1fr 1fr; }
 #main .ws-page section { margin-top:14px; }
 #main .ws-page :is(.ws-quiz,.ws-next,.ws-breadcrumb) { display:none !important; }
 #main .ws-page .ws-fallback[hidden],#main .ws-fallback { display:block !important; }
 #main .ws-fallback details { display:none; }
 #main .ws-print-answer { display:block; }
 #main .ws-page h2,#main .ws-page h3 { break-after:avoid; }
 #main .ws-page .ws-sentence,#main .ws-page tr { break-inside:avoid; }
}
@media(forced-colors:active) { #main .ws-pair,#main .ws-sentence,#main .ws-quiz { border-color:CanvasText; } }

#main .ws-toc{display:flex;flex-wrap:wrap;gap:4px 18px;margin:18px 0;border-block:1px solid var(--line)}#main .ws-toc a{display:inline-flex;align-items:center;min-height:44px;font-size:.85rem}
