.tracing-maker{--accent:#1759be;--trace:#CCCCCC;--cell:24mm;--glyph:16.5mm;--gap:7.5mm;background:#eef2f7;color:#18314b}
.tracing-maker .site-header{max-width:none;background:#fff;padding:17px max(24px,calc((100vw - 1184px)/2));flex-wrap:wrap}
.tracing-maker .site-header nav{gap:14px 22px;font-size:14px}.tracing-maker .site-header nav [aria-current=page]{color:var(--accent);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.tracing-app{max-width:1250px;padding:24px 30px 48px;margin:0 auto}
.app-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}.app-heading h1{font-size:24px;margin:0 0 6px;line-height:1.5}.app-heading p{font-size:14px;color:#53657a;margin:0}
.print-button{font:inherit;font-size:14px;font-weight:700;background:var(--accent);border:0;border-radius:9px;padding:13px 22px;color:#fff;white-space:nowrap;cursor:pointer}.print-button:hover{background:#104591}
.editor-layout{display:grid;grid-template-columns:248px minmax(0,1fr);gap:28px;align-items:start}.editor-controls{display:flex;flex-direction:column;gap:14px;position:sticky;top:20px}.control-panel{background:#fff;border:1px solid #dbe2ed;border-radius:11px;padding:18px}.control-panel h2{font-size:15px;margin:0 0 14px}.control-panel label{font-size:14px;font-weight:650;display:block;margin:14px 0 6px}.control-panel label small{font-size:12px;color:#6a7b8f;font-weight:400;margin-left:5px}.control-panel input,.control-panel textarea,.control-panel select{font:inherit;font-size:14px;color:#23394f;border:1px solid #c8d3df;border-radius:6px;background:#fff;padding:9px 10px;width:100%;resize:vertical}.control-panel p{font-size:13px;line-height:1.8;color:#54667b;margin:8px 0 12px}.format-note{display:flex;justify-content:space-between;gap:8px;border-top:1px solid #e4e9f0;padding-top:12px;margin-top:16px;color:#67788a;font-size:12px}.word-list summary{font-size:14px;font-weight:650;cursor:pointer}.word-list h3{font-size:12px;color:#506680;margin:14px 0 4px}.word-list p{font-size:13px;margin:0;line-height:1.9}.input-message{font-size:13px;line-height:1.7;color:#815422;margin:0 3px}.input-message:empty{display:none}
.worksheet-area{min-width:0}.preview-label{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#617187;margin-bottom:12px}.sheet-wrap{width:min(100%,210mm);position:relative;margin:0 auto}.tracing-sheet{position:relative;width:210mm;height:297mm;padding:13mm 14mm;background:#fff;color:#222;transform-origin:top left;box-shadow:0 4px 20px #17385812,0 0 0 1px #dbe2ed;overflow:hidden}
.worksheet-heading{height:33mm;position:relative;padding-top:1mm}.worksheet-heading h2{font-family:"UD Digi Kyokasho N-R","UD デジタル 教科書体 N-R","BIZ UDGothic","Yu Gothic",sans-serif;text-align:center;font-size:20pt;line-height:1.45;margin:0;font-weight:600;overflow-wrap:anywhere}.worksheet-heading p{font-size:10.5pt;line-height:1.8;margin:3mm 0 0;white-space:pre-wrap;overflow-wrap:anywhere}.heading-placeholder{font-size:11px;color:#7c8c9e;display:block;text-align:center;padding-top:8mm}.worksheet-heading.has-text .heading-placeholder{display:none}
.writing-rows{display:flex;flex-direction:column;gap:8mm}.writing-row{display:grid;grid-template-columns:122mm 36mm;column-gap:24mm;align-items:center;height:38mm;position:relative}.word-area{width:calc(var(--word-width) + 2px);position:relative}.row-tools{min-width:44mm;position:absolute;top:-6.5mm;left:0;right:0;display:flex;align-items:center;justify-content:space-between;font-size:11px;line-height:1.5;color:#728096}.row-tools strong{font-size:12px;font-weight:600;color:#587192}.row-tools button{font:inherit;font-size:11px;color:#63768b;border:0;background:transparent;cursor:pointer;padding:2px 0;text-decoration:underline;text-underline-offset:3px}.row-tools button:disabled{opacity:.35;cursor:default}.row-counter{position:absolute;bottom:-6mm;left:0;width:max(100%,44mm);text-align:right;white-space:nowrap;font-size:11px;color:#8692a0;line-height:1.5}
.writing-row{grid-template-areas:"word picture"}.word-area{grid-area:word}.picture-slot{grid-area:picture}.tracing-sheet:not(.matching) .writing-row{grid-template-columns:36mm 122mm;grid-template-areas:"picture word"}
.word-boxes{position:relative;width:var(--word-width);height:var(--cell);overflow:clip;border:1px solid #9fabb6;background:#fff;box-sizing:content-box}.word-boxes:focus-within{outline:2px solid #5c8ad1;outline-offset:3px}.cell-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--cells),1fr);pointer-events:none}.writing-cell{position:relative;border-right:1px solid #aab4bc}.writing-cell:last-child{border-right:0}.writing-cell::before{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:1px dashed #e3e7eb}.writing-cell::after{content:"";position:absolute;top:50%;left:0;right:0;border-top:1px dashed #e3e7eb}
.word-input{position:absolute;left:0;top:0;width:calc(100% + var(--gap));height:100%;margin:0;padding:0 0 0 calc(var(--gap)/2);border:0!important;border-radius:0;outline:none!important;box-shadow:none;background:transparent!important;color:var(--trace)!important;-webkit-text-fill-color:var(--trace);caret-color:var(--accent);font-family:"UD Digi Kyokasho N-R","UD デジタル 教科書体 N-R","UD Digi Kyokasho NP-R","BIZ UDGothic","Yu Gothic",Meiryo,sans-serif;font-size:var(--glyph);font-weight:400;font-variant-ligatures:none;letter-spacing:var(--gap);line-height:var(--cell);appearance:none;box-sizing:border-box}
.picture-area{width:36mm;height:36mm;display:flex;align-items:center;justify-content:center;position:relative}.picture-area img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}.picture-message{font-family:"Yu Gothic",Meiryo,sans-serif;text-align:center;font-size:10pt;color:#738091;line-height:1.6;margin:0;letter-spacing:.3px}.picture-area[data-state=empty]{border:1px dashed #dce3eb;border-radius:8px}.picture-area[data-state=empty] .picture-message{font-size:11px;color:#8b99a9}.picture-area[data-state=missing]{border:1px dashed #ced6e0;border-radius:8px}.picture-area[data-state=loading] .picture-message{color:#8190a0;font-size:11px}.worksheet-footer{position:absolute;bottom:8mm;left:0;right:0;text-align:center;font-size:8pt;color:#9aa2a9;letter-spacing:.08em}
.tracing-maker button:focus-visible,.control-panel input:focus-visible,.control-panel textarea:focus-visible,.control-panel select:focus-visible,.word-list summary:focus-visible{outline:3px solid #7ba8ec;outline-offset:3px}

.control-panel label output{float:right;font-weight:500;color:#51667e}.control-panel input[type=range]{padding:0;border:0;accent-color:var(--accent);cursor:pointer}.control-panel .checkbox-label{display:flex;align-items:center;gap:9px;cursor:pointer}.control-panel .checkbox-label input{width:17px;height:17px;margin:0;accent-color:var(--accent)}.secondary-button{font:inherit;font-size:13px;border:1px solid #c5d1e0;border-radius:6px;background:#f6f9fd;color:#214e84;padding:9px 12px;cursor:pointer;width:100%}.secondary-button:disabled{opacity:.45;cursor:default}.print-button:disabled{opacity:.6;cursor:wait}.picture-slot{position:relative;width:36mm;height:36mm}.matching .has-word .word-area::after,.matching .picture-slot.has-picture::before{content:"";position:absolute;width:4.4mm;height:4.4mm;border-radius:50%;background:#b6b6b6;top:50%;transform:translateY(-50%)}.matching .has-word .word-area::after{right:-7.1mm}.matching .picture-slot.has-picture::before{left:-7.1mm}
@media(max-width:1020px){.tracing-app{padding:22px}.editor-layout{grid-template-columns:220px minmax(0,1fr);gap:22px}.control-panel{padding:15px}.app-heading h1{font-size:22px}}
@media(max-width:760px){.tracing-app{padding:18px 14px 32px}.tracing-maker .site-header{padding:15px 18px}.tracing-maker .site-header nav{font-size:13px;gap:9px 18px}.app-heading{flex-wrap:wrap;gap:13px;margin-bottom:18px}.app-heading h1{font-size:21px}.app-heading p{font-size:13px}.print-button{width:100%}.editor-layout{display:flex;flex-direction:column;gap:20px}.editor-controls{position:static;width:100%;gap:12px}.control-panel{padding:14px}.control-panel h2{margin-bottom:10px}.control-panel p{margin:6px 0}.format-note{margin-top:9px;padding-top:9px}.worksheet-area{width:100%}.preview-label{font-size:12px}}
@page{size:A4 portrait;margin:0}
@media print{html,body.tracing-maker{width:210mm!important;height:297mm!important;margin:0!important;padding:0!important;background:#fff!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}.site-header,.app-heading,.editor-controls,.preview-label,.screen-only,.row-tools,.row-counter,noscript{display:none!important}.tracing-app,.editor-layout,.worksheet-area{display:block!important;max-width:none!important;width:210mm!important;padding:0!important;margin:0!important;min-height:0!important}.sheet-wrap{width:210mm!important;height:297mm!important;margin:0!important}.tracing-sheet{transform:none!important;box-shadow:none!important;break-inside:avoid;page-break-inside:avoid}.word-boxes:focus-within{outline:none!important}.word-input{color:var(--trace)!important;-webkit-text-fill-color:var(--trace)!important}.picture-area[data-state=empty]{border:0}.picture-area[data-state=empty] .picture-message{display:none}.picture-area[data-state=missing]{border:0}}

/* Input stays hiragana; the separate glyph layer controls screen and print support. */
.trace-letter,.edit-letter{position:absolute;inset:0;display:grid;place-items:center;color:var(--trace);font-family:var(--tracing-font,"UD デジタル 教科書体 N", "UD Digi Kyokasho N", "UD デジタル 教科書体 N-R", "UD Digi Kyokasho N-R", "BIZ UDGothic", sans-serif);font-size:var(--glyph);font-weight:400;font-synthesis:none;line-height:1;z-index:1}
.word-input{color:transparent!important;-webkit-text-fill-color:transparent!important}
/* SVG ink bounds center full kana; small kana retain their size and lower-left placement. */
.trace-letter svg,.edit-letter svg{display:block;width:100%;height:100%;overflow:visible;fill:currentColor}
.trace-letter text,.edit-letter text{font-family:inherit;font-weight:400;font-synthesis:none}
.edit-letter{visibility:hidden}
@media screen{.word-boxes:focus-within .trace-letter{visibility:hidden}.word-boxes:focus-within .edit-letter{visibility:visible}}
@media print{.word-input,.edit-letter{display:none!important}.trace-letter{visibility:visible!important}}

.font-status{font-size:14px;color:#53657a;margin:0 0 16px}.font-status:empty{display:none}
.print-font-warning{display:none}
body:not(.tracing-font-ready) .trace-letter,body:not(.tracing-font-ready) .edit-letter{visibility:hidden!important}
@media print{body:not(.tracing-font-ready) .tracing-sheet{display:none!important}body:not(.tracing-font-ready) .print-font-warning{display:block!important;margin:20mm;font-size:14pt}}

.font-fallback{font-size:12px;color:#67788a;margin:0 0 16px}.font-fallback:empty{display:none}

/* Automated sheets omit unused rows; normal editing keeps its empty inputs. */
.batch-mode .writing-row:not(.has-word){display:none}
@media print{.writing-row:not(.has-word){display:none}}
.batch-mode .worksheet-heading h2,.batch-mode .worksheet-heading p,.batch-mode .worksheet-footer{font-family:var(--tracing-font);font-weight:400;font-synthesis:none}


/* Each selected group is a real A4 sheet, including in the browser print dialog. */
.sheet-wrap + .sheet-wrap{margin-top:28px}
@media print{
 html,body.tracing-maker{height:auto!important}
 .sheet-wrap{break-after:page;page-break-after:always;break-inside:avoid;page-break-inside:avoid}
 .sheet-wrap:last-child{break-after:auto;page-break-after:auto}
 .sheet-wrap + .sheet-wrap{margin-top:0!important}
}
@media screen and (min-width:761px){.editor-controls{max-height:calc(100vh - 40px);overflow-y:auto;overscroll-behavior:contain}}

/* Batch non-matching pages use the existing picture-left mode with room for 32mm cells. */
.batch-mode .tracing-sheet:not(.matching) .writing-row{grid-template-columns:36mm minmax(0,1fr);column-gap:8mm}

/* Compact visual controls; hidden compatibility fields are not editable. */
.maker-mode-buttons{display:flex;gap:8px;margin-bottom:18px}
.maker-mode-buttons button{flex:1;min-width:0;min-height:74px;padding:8px 3px;border:1px solid #c5d1e0;border-radius:8px;background:#fff;color:inherit;font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.maker-mode-buttons button[aria-pressed="true"]{border:2px solid var(--accent);padding:7px 2px;background:#edf7f0;color:var(--accent)}
.maker-mode-buttons .mode-symbol{font-size:30px;font-weight:500;line-height:1.2;width:36px;height:36px}
.maker-mode-buttons small{font-size:11px;white-space:nowrap}

/* Opening cue points into the first input without moving or covering the sheet. */
.input-start-hint{position:absolute;z-index:5;left:0;bottom:calc(100% + 7mm);padding:2mm 3mm;border:1px solid var(--accent);border-radius:2mm;background:#fff;color:var(--accent);font:500 12pt/1.4 sans-serif;white-space:nowrap;pointer-events:none;box-shadow:0 2px 8px #00000012;animation:input-cue 3.6s ease both}
.input-start-hint::after{content:"";position:absolute;top:100%;left:6mm;height:10mm;border-left:1.5px solid var(--accent)}
.input-start-hint::before{content:"";position:absolute;top:calc(100% + 9mm);left:calc(6mm - 2px);width:5px;height:5px;background:var(--accent);border-radius:50%}
@keyframes input-cue{0%{opacity:0}8%,82%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.input-start-hint{animation:none}}

.opening-demo-hint{animation:none;opacity:1}
.opening-demo-input{outline:2px solid var(--accent);outline-offset:3px}
@media screen{.opening-demo-input .trace-letter{visibility:hidden}.opening-demo-input .edit-letter{visibility:visible}}

/* Continuous opening demonstration, with immediate cancellation on interaction. */
.opening-demo-active .opening-demo-hint{animation:demo-appear .45s ease both;transition:opacity .18s ease}
.opening-demo-active .opening-demo-hint.demo-caption-changing{opacity:0;animation:none}
.opening-demo-active .picture-message{visibility:hidden}
.opening-demo-active .picture-area img{animation:demo-appear .65s ease both}
.opening-demo-active .demo-letter-enter{animation:demo-appear .4s ease both}
.opening-demo-active .edit-letter,.opening-demo-active .picture-area,.opening-demo-active .opening-demo-hint{transition:opacity .5s ease,transform .5s ease}
.opening-demo-leaving .edit-letter,.opening-demo-leaving .picture-area,.opening-demo-leaving .opening-demo-hint{opacity:0;transform:translateY(-2px);animation:none}
.opening-demo-input{outline-color:transparent;box-shadow:0 0 0 2px var(--accent);transition:box-shadow .5s ease}
.opening-demo-leaving .opening-demo-input{box-shadow:0 0 0 2px transparent}
@keyframes demo-appear{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.opening-demo-active *{animation:none!important;transition:none!important}}

/* Four or more kana automatically use A4 landscape, on screen and in print. */
.tracing-landscape .sheet-wrap{width:min(100%,297mm)}
.tracing-landscape .tracing-sheet{width:297mm;height:210mm;padding:8mm 14mm}
.tracing-landscape .worksheet-heading{height:18mm}
.tracing-landscape .writing-rows{gap:2mm}
.tracing-landscape .writing-row{height:32mm;grid-template-columns:209mm 36mm;column-gap:24mm}
.tracing-landscape .tracing-sheet:not(.matching) .writing-row{grid-template-columns:36mm 209mm;column-gap:24mm}
.tracing-landscape .picture-area,.tracing-landscape .picture-slot{height:32mm}
.tracing-landscape .worksheet-footer{bottom:4mm}
@media print{
 html:has(body.tracing-landscape),body.tracing-landscape,
 .tracing-landscape .tracing-app,.tracing-landscape .editor-layout,.tracing-landscape .worksheet-area{width:297mm!important}
 .tracing-landscape .sheet-wrap{width:297mm!important;height:210mm!important}
}

@media screen and (prefers-reduced-motion:no-preference){
 .tracing-sheet{transition:width .37s ease-in-out,height .37s ease-in-out,padding .37s ease-in-out}
 .worksheet-heading{transition:height .37s ease-in-out}
 .writing-rows{transition:gap .37s ease-in-out}
 .writing-row{transition:height .37s ease-in-out,grid-template-columns .37s ease-in-out,column-gap .37s ease-in-out}
 .word-area,.word-boxes{transition:width .37s ease-in-out,height .37s ease-in-out}
 .picture-area,.picture-slot{transition:height .37s ease-in-out}
 .worksheet-footer{transition:bottom .37s ease-in-out}
 .sheet-wrap{transition:width .37s ease-in-out}
}

/* Long words retain 28mm squares on two lines; each sheet is a complete matching set. */
.cell-grid{grid-template-columns:repeat(var(--columns,var(--cells)),1fr);grid-template-rows:repeat(var(--lines,1),1fr)}
.word-boxes{height:calc(var(--cell) * var(--lines,1))}
.two-line-word .writing-cell:nth-child(4){border-right:0}
.two-line-word .writing-cell:nth-child(n+5){border-top:1px solid #aab4bc}
.two-line-word .word-input{height:var(--cell)}
.tracing-landscape .three-row-sheet .writing-rows{gap:2mm}
.tracing-landscape .three-row-sheet .writing-row{height:56mm}
.tracing-landscape .three-row-sheet .worksheet-heading{height:18mm}
@media print{.empty-print-sheet{display:none!important}}

@media print{.last-print-sheet{break-after:auto!important;page-break-after:auto!important}.writing-row{transform:none!important}}

/* Printing and batch export always use final geometry, never an in-between frame. */
.batch-mode .tracing-sheet,.batch-mode .tracing-sheet *{transition:none!important}
@media print{
 .tracing-sheet,.tracing-sheet *,.sheet-wrap{transition:none!important;animation:none!important}
 .word-boxes{width:var(--word-width)!important;height:calc(var(--cell) * var(--lines,1))!important}
}

/* Native input keeps editing/selection, while SVG alone renders the visible kana. */
.word-input::selection{
 color:transparent!important;
 -webkit-text-fill-color:transparent!important;
 text-shadow:none!important;
 background:rgba(23,89,190,.18);
}
.word-input::-moz-selection{
 color:transparent!important;
 text-shadow:none!important;
 background:rgba(23,89,190,.18);
}
.tracing-maker:not(.tracing-landscape) .tracing-sheet:not(.matching) .writing-row{grid-template-columns:36mm minmax(0,1fr);column-gap:8mm}


/* Whole-word PNGs retain the existing grid and never substitute another typeface. */
.word-image{position:absolute;left:0;top:0;width:var(--word-width);height:calc(var(--cell) * var(--lines,1));z-index:1;pointer-events:none;overflow:hidden}
.word-image img{display:block;width:var(--word-width);height:calc(var(--cell) * var(--lines,1));max-width:none}
.word-image.first-only{width:var(--cell);height:var(--cell)}
.word-image-edit{visibility:hidden}
.font-fallback,.print-font-warning{white-space:pre-line}
@media screen{
 .word-boxes:focus-within .word-image-trace,.opening-demo-input .word-image-trace{visibility:hidden}
 .word-boxes:focus-within .word-image-edit,.opening-demo-input .word-image-edit{visibility:visible}
 .word-input.unavailable-word{color:var(--trace)!important;-webkit-text-fill-color:var(--trace)!important}
}
@media print{
 .word-image-edit{display:none!important}.word-image-trace{visibility:visible!important}
 .tracing-print-blocked .tracing-sheet{display:none!important}
 .tracing-print-blocked .print-font-warning{display:block!important;margin:20mm;font-size:14pt}
}

/* Only the preview labels words drawn with BIZ UD Gothic. */
.word-font-note{position:absolute;left:0;top:calc(100% + 1mm);font:400 10px/1.4 Meiryo,sans-serif;color:#67788a;white-space:nowrap;pointer-events:none}
.word-font-note[hidden]{display:none}
@media print{.word-font-note{display:none!important}}


/* Title PNGs use the same 20pt / 1.45 line box, including seasonal headings. */
.tracing-title-box{display:inline-block;position:relative;height:1.45em;vertical-align:top}
.tracing-title-image{display:block;position:absolute;max-width:none}