.kanji-stroke-part{box-sizing:border-box;container-type:inline-size;display:flex;flex-direction:column;gap:8px;width:100%;height:100%;padding:16px 28px 14px 16px;background:#fff;color:#21353e;border:1px solid #cad8dd;border-radius:12px;font:14px/1.45 system-ui,sans-serif;overflow:hidden}
.kanji-stroke-part *{box-sizing:border-box}
.kanji-stroke-part button,.ks-config button,.ks-object-handle button{font:inherit;border:1px solid #b7cbd3;border-radius:7px;background:#f4f8f9;color:#20434e;padding:7px 10px;cursor:pointer;min-height:36px}
.kanji-stroke-part button:disabled{opacity:.5;cursor:wait}
.kanji-stroke-part button:focus-visible{outline:3px solid #bd7220;outline-offset:2px}
.ks-toolbar{display:flex;gap:6px;align-items:center;flex-wrap:nowrap;flex-shrink:0}
.ks-label{margin-right:auto;white-space:nowrap}.ks-toolbar button{font-size:12px}
.ks-content{display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,1.8fr);gap:20px;flex:1;min-height:210px}
.ks-vocabulary{display:flex;flex-direction:column;min-width:0;min-height:0;gap:6px}
.ks-vocabulary[hidden]{display:none}
.ks-kana .ks-vocab-table{height:auto}
.ks-vocab-table .ks-kana-sound{font-size:32px;padding:12px 4px}
.ks-vocab-table{table-layout:fixed;border-collapse:collapse;width:100%;height:100%;background:#fbfdfe;border:1px solid #d6e0e4}
.ks-vocab-table td{height:33.333%;padding:8px 6px;text-align:center;vertical-align:middle;border-bottom:1px solid #d6e0e4}
.ks-vocab-table button{display:block;width:100%;min-height:0;padding:4px 2px;border:0;border-radius:4px;background:transparent;overflow-wrap:anywhere}
.ks-vocab-table button:hover,.ks-vocab-table .ks-speaking{background:#e5f2f5;color:#116875}
.ks-vocab-word ruby{font-size:clamp(18px,4cqw,24px);font-weight:600;ruby-align:center}
.ks-vocab-word rt{font-size:11px;font-weight:400;color:#536873}
.ks-vocab-table .ks-vocab-english{font-size:12px;line-height:1.45;color:#465f6c}
.ks-vocab-status{margin:0;font-size:10px;color:#536873;line-height:1.4}
.kanji-stroke-part .ks-vocab-retry{font-size:11px;min-height:28px;padding:3px}
.ks-vocab-retry[hidden]{display:none}
.ks-drawing{min-width:0;min-height:0;position:relative;container-type:size}
/* Keep a square, right-aligned writing surface with the panel's 28px right margin. */
.ks-svg{position:absolute;right:0;top:50%;transform:translateY(-50%);width:min(100cqw,100cqh);height:min(100cqw,100cqh);background:linear-gradient(90deg,transparent 49.8%,#e7edf0 50%,transparent 50.2%),linear-gradient(transparent 49.8%,#e7edf0 50%,transparent 50.2%);border:1px solid #d6e0e4;border-radius:8px;touch-action:none;user-select:none}
.ks-svg .stroke-guide{fill:none;stroke:#e0e5e9;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ks-svg .stroke-guide.current{stroke:#c98020;stroke-width:3.7}
.ks-svg .stroke-guide.ks-correct{stroke:#259365;stroke-width:4.3}
.ks-svg .ks-ink{fill:none;stroke:#173c3c;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.ks-svg .ks-ink.ks-accepted{stroke:#259365}
.ks-svg .ks-live-ink,.ks-svg .ks-live-tip{pointer-events:none}
.ks-svg .ks-live-tip{fill:#173c3c;stroke:none}
.ks-svg .ks-ink.ks-wrong{stroke:#d32f37;stroke-width:2}
.ks-svg .ks-demo-stroke{fill:none;stroke:#d32f37;stroke-width:3.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.ks-status{margin:0;min-height:21px;font-weight:650}
.ks-feedback{flex:0 0 116px;min-height:0;display:flex;flex-direction:column;gap:6px;overflow:auto}
.ks-sync{margin:0;color:#536873;font-size:11px;line-height:1.4}
.ks-sync:empty{display:none}
.ks-status.ks-complete{padding:10px 14px;border:2px solid #d3aa55;border-radius:10px;background:#fff8df;color:#705014;font-size:22px;font-weight:750;text-align:center}
.ks-status.ks-complete[data-result="correct"]{border-color:#259365;background:#e8f7ed;color:#176b46}
.ks-detail{margin:0;font-size:12px;color:#4c646e;min-height:18px}
.ks-bottom{display:flex;gap:6px}
.ks-bottom[hidden]{display:none}
.ks-credits{display:flex;gap:4px 12px;flex-wrap:wrap}.ks-credit{font-size:10px;color:#526e78}
.ks-object-handle{font:12px system-ui;display:flex;justify-content:space-between;align-items:center;background:#e7f0f2;cursor:move;padding:3px 8px;min-height:32px}
.ks-object-handle button{font-size:12px;padding:2px 8px;min-height:25px}
.kanji-stroke-object{box-sizing:border-box;min-width:0;min-height:0;overflow:hidden}
.ks-object-surface{position:absolute;left:0;top:0;display:flex;flex-direction:column;transform-origin:top left}
.ks-object-surface>.ks-object-handle{flex-shrink:0}
.ks-object-handle[hidden]{display:none}
.ks-object-surface>.kanji-stroke-part{flex:1;min-height:0;height:auto}
.ks-config{border:1px solid #bdcdd2;border-radius:12px;width:380px;max-width:90vw;padding:24px}
.ks-config::backdrop{background:#1235}.ks-config label{display:block;margin:16px 0}
.ks-config input,.ks-config select{display:block;width:100%;font:inherit;padding:8px;margin-top:5px}.ks-config button{margin-right:8px}
@container(max-width:400px){.ks-content{gap:12px;grid-template-columns:minmax(105px,1fr) minmax(0,1.6fr)}.ks-vocab-word ruby{font-size:18px}.ks-vocab-table td{padding:6px 3px}.ks-vocab-table .ks-vocab-english{font-size:11px}}
@media print{.ks-toolbar button,.ks-bottom,.ks-object-handle,.ks-vocab-status,.ks-vocab-retry{display:none}.ks-svg .ks-ink,.ks-svg .ks-demo-stroke{display:none}.ks-vocab-table button{color:#21353e;background:transparent}}
/* Dense alphabet/number cells: only two controls above the full writing area. */
.ks-compact{position:relative;padding:0;gap:0;border-radius:0;font-size:10px}
.ks-compact .ks-toolbar{flex:none;flex-wrap:nowrap;gap:3px;padding:2px 3px;border-bottom:1px solid #cad8dd}
.ks-compact .ks-toolbar button{flex:1;min-width:0;min-height:0;height:20px;padding:0 2px;border-radius:3px;white-space:nowrap;font-size:clamp(7px,10cqw,11px);line-height:1}
.ks-compact .ks-toolbar [hidden]{display:none}
.ks-compact .ks-content{display:block;position:relative;min-height:0;flex:1}
.ks-compact .ks-feedback{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ks-compact .ks-sync{position:absolute;right:2px;bottom:2px;max-width:100%;background:#fff8df;font-size:8px}
.ks-compact .ks-bottom button{pointer-events:auto}
.ks-compact .ks-drawing{width:100%;height:100%}
.ks-compact .ks-svg{inset:0;transform:none;width:100%;height:100%;border:0;border-radius:0}
.ks-compact .ks-status,.ks-compact .ks-detail,.ks-compact .ks-credits{position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%)}
.ks-compact .ks-completion-ring{fill:none;stroke:#e44343;stroke-width:5;opacity:.8;pointer-events:none}
.ks-compact.ks-error .ks-status{z-index:2;left:0;top:26px;width:100%;height:auto;max-height:calc(100% - 48px);margin:0;padding:3px;clip-path:none;overflow:auto;background:#fff4ee;color:#972d1e;font-size:9px;line-height:1.3}
.ks-compact .ks-bottom:not([hidden]){position:absolute;z-index:3;bottom:0;left:0;right:0;background:#fff}
.ks-compact .ks-bottom button{width:100%;font-size:9px;min-height:20px;padding:1px}
.ks-template-preview { display: grid; place-items: center; box-sizing: border-box; border: 1px solid #a9bac4; background: linear-gradient(90deg, transparent calc(50% - .5px), #cad4db 50%, transparent calc(50% + .5px)), linear-gradient(transparent calc(50% - .5px), #cad4db 50%, transparent calc(50% + .5px)); container-type: size; }
.ks-template-character { font-size: min(70cqw, 70cqh); color: #d7dee4; line-height: 1; }
.ks-template-preview::before { content: attr(data-field-name); position: absolute; left: 2px; top: -16px; font: 12px system-ui; color: #64748b; }
.field-name-labels-hidden .ks-template-preview::before { display: none; }