.writing-mode .app { width:min(940px,100%); }
.writing-mode .stage { gap:14px; padding:20px; }
.writing-mode .sorarin-row { grid-template-columns:64px minmax(0,1fr); align-items:center; }
.writing-mode .sorarin-img { width:64px; height:64px; animation:none; }
.writing-mode .bubble { min-height:54px; font-size:18px; }
.writing-banner { padding:12px 16px; border-radius:14px; background:#fff5d9; color:#715220; line-height:1.7; font-size:14px; text-align:left; }
.writing-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; width:100%; }
.writing-title { margin:0; color:#33567a; font-size:clamp(19px,3vw,25px); }
.writing-kicker { font-size:13px; letter-spacing:.05em; color:#52687b; margin:0 0 5px; }
.writing-meta { padding:6px 12px; background:#edf7f3; border-radius:20px; font-size:13px; color:#366751; }
.writing-btn { min-height:48px; min-width:48px; border:1px solid #c8d9df; border-radius:14px; padding:11px 16px; color:#284e63; background:white; font-weight:700; font-size:16px; }
.writing-btn:focus-visible { outline:3px solid #d17826; outline-offset:3px; }
.writing-btn:disabled { cursor:default; color:#66767c; background:#eef3f4; }
.writing-btn.primary { color:white; background:#32786c; border-color:#32786c; }
.writing-btn.soft { background:#eaf3fb; }
.writing-actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.writing-actions .writing-btn { flex:1 1 145px; }
.writing-grid { display:grid; width:100%; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.writing-letter { display:flex; flex-direction:column; align-items:center; gap:5px; padding:18px 10px; background:#fff; border:2px solid #d6e5e5; border-radius:22px; min-height:158px; color:#2c5262; }
.writing-letter strong { font-size:52px; line-height:1.2; }
.writing-letter .writing-emoji { font-size:29px; }
.writing-letter small { font-size:13px; }
.writing-letter:hover { border-color:#3e9280; background:#f0faf6; }
.writing-layout { display:grid; width:100%; grid-template-columns:minmax(0,1fr) minmax(215px,.7fr); gap:22px; align-items:center; }
.writing-side { display:grid; gap:14px; }
.writing-pad { width:100%; max-width:440px; aspect-ratio:1; position:relative; overflow:hidden; border:2px solid #aecbc9; border-radius:23px; background:#fffcf4; margin:auto; box-shadow:0 8px 20px #264e5910; }
.writing-pad::before,.writing-pad::after { content:""; position:absolute; pointer-events:none; z-index:0; }
.writing-pad::before { top:0; bottom:0; left:50%; border-left:1px dashed #c9d9d4; }
.writing-pad::after { top:50%; left:0; right:0; border-top:1px dashed #c9d9d4; }
.writing-pad svg,.writing-pad canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.writing-pad svg { pointer-events:none; }
.writing-pad canvas { touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.writing-pad .writing-notice { position:absolute; z-index:2; border:3px solid #cb8039; background:#ffe2a480; border-radius:50%; padding:0; width:58px; height:58px; color:#663b0c; font-size:22px; transform:translate(-50%,-50%); }
.writing-notice:active { transform:translate(-50%,-50%) !important; }
.writing-pad-label { text-align:center; margin:0 0 9px; color:#526d75; font-size:15px; }
.writing-help { background:#eff7f8; border-radius:15px; padding:14px; color:#3e626c; line-height:1.7; font-size:15px; }
.writing-progress { display:flex; justify-content:center; gap:6px; margin:4px 0; }
.writing-progress span { width:25px; height:7px; border-radius:9px; background:#dde8e7; }
.writing-progress span.active { background:#449985; }
.writing-compare { display:grid; grid-template-columns:1fr 1fr; gap:15px; width:100%; }
.writing-compare .writing-pad { border-radius:18px; }
.writing-source { font-size:13px; line-height:1.8; width:100%; color:#546979; }
.writing-source summary { padding:12px; min-height:48px; cursor:pointer; }
.writing-source a { color:#265c7a; }
.writing-finish { text-align:center; padding:12px; }
.writing-finish strong { font-size:80px; display:block; color:#32786c; }
.writing-storage-warning { color:#81511b; background:#fff3dd; padding:10px; font-size:13px; border-radius:10px; }
@media(max-width:650px) {
 .writing-mode header { flex-wrap:wrap; }
 .writing-mode header h1 { width:100%; font-size:21px; }
 .writing-mode .head-tools { margin-left:auto; white-space:nowrap; }
 .writing-mode .app { padding:12px 12px 24px; gap:10px; }
 .writing-mode .stage { padding:14px; }
 .writing-layout { grid-template-columns:1fr; gap:13px; }
 .writing-pad { max-width:360px; }
 .writing-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .writing-letter { min-height:145px; }
 .writing-mode .bubble { font-size:16px; }
 .writing-side { gap:10px; }
 .writing-compare { gap:8px; }
}
@media(min-width:700px) and (max-height:850px) {
 .writing-mode .app { padding-top:10px; gap:8px; }
 .writing-mode .stage { padding:14px 20px; gap:10px; }
 .writing-mode .sorarin-row { grid-template-columns:48px 1fr; }
 .writing-mode .sorarin-img { width:48px; height:48px; }
 .writing-pad { max-width:345px; }
}
@media(prefers-reduced-motion:reduce) { .writing-mode * { animation:none!important; transition:none!important; } }

/* v2: five rows per column, from right to left like a printed gojuon chart. */
.writing-mode .app:has(.writing-chart-scroll) { width:min(1120px,100%); }
.writing-tabs { display:flex; gap:8px; width:100%; }
.writing-tabs .writing-btn { flex:1; padding:10px 6px; border-radius:16px; }
.writing-tabs [aria-pressed="true"] { background:#32786c; border-color:#32786c; color:white; box-shadow:0 3px 0 #235a51; }
.writing-method { width:100%; padding:12px 14px; background:#f5f8fb; border:1px solid #d9e5e9; border-radius:18px; }
.writing-method-label { margin:0 0 9px; color:#526d75; font-size:13px; }
.writing-mode-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.writing-mode-options .writing-btn { font-size:15px; padding:10px 6px; border-radius:12px; }
.writing-mode-options [aria-pressed="true"] { background:#fff1d5; color:#734817; border:2px solid #c3803c; }
.writing-mode-options [aria-pressed="true"]::before { content:'✓ '; }
.writing-table-head { display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%; }
.writing-table-head p { margin:0; }
.writing-table-hint { color:#526d75; font-size:13px; }
.writing-kana-table { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; width:100%; }
.writing-vertical-table { grid-template-columns:repeat(10,minmax(0,1fr)); grid-template-rows:repeat(5,auto); min-width:952px; direction:ltr; }
.writing-chart-scroll { width:100%; min-width:0; overflow-x:auto; direction:rtl; padding:4px; overscroll-behavior-x:contain; border-radius:16px; }
.writing-chart-scroll:focus-visible { outline:3px solid #d17826; outline-offset:2px; }
.writing-reading-guide { width:100%; margin:0; color:#386d64; font-size:14px; text-align:right; }
.writing-chart-navigation { display:flex; width:100%; gap:8px; align-items:center; justify-content:space-between; }
.writing-chart-navigation[hidden] { display:none; }
.writing-chart-navigation span { color:#526d75; font-size:12px; text-align:center; }
.writing-chart-navigation .writing-btn { font-size:14px; padding:10px 12px; white-space:nowrap; }
.writing-kana-table .writing-letter { min-height:148px; min-width:0; padding:12px 5px 10px; gap:4px; border-radius:14px; position:relative; }
.writing-letter-face { display:flex; flex-direction:column-reverse; align-items:center; justify-content:center; gap:5px; }
.writing-kana-table .writing-letter strong { font-size:34px; line-height:1.15; }
.writing-kana-table .writing-emoji { display:block; font-size:63px; line-height:1.15; }
.writing-kana-table .writing-word { font-size:12px; color:#52717a; max-width:100%; overflow-wrap:anywhere; line-height:1.3; }
.writing-letter.practiced { background:#effaf5; border-color:#76b8a2; }
.writing-kana-table .writing-done { position:absolute; right:5px; top:3px; font-size:12px; color:#28715c; }
.writing-empty { border:1px dashed #e2eae8; border-radius:14px; background:#f8faf980; }
.writing-marks-table { grid-template-columns:repeat(3,minmax(0,1fr)); }
.writing-marks-table .writing-letter { min-height:148px; }
.writing-letter-caption { margin:0; color:#335c6e; font-size:20px; text-align:center; }
.writing-example-emoji { display:block; font-size:60px; line-height:1.2; margin-bottom:6px; }
.writing-example-word { display:block; font-size:20px; line-height:1.4; overflow-wrap:anywhere; }
@media(max-width:650px) {
 .writing-tabs .writing-btn { font-size:14px; min-height:48px; }
 .writing-mode-options { gap:5px; }
 .writing-mode-options .writing-btn { font-size:12px; min-width:0; min-height:50px; }
 .writing-method { padding:10px 8px; }
 .writing-kana-table { gap:5px; }
 .writing-vertical-table { min-width:710px; }
 .writing-chart-navigation { gap:5px; }
 .writing-chart-navigation .writing-btn { font-size:12px; padding:10px 7px; }
 .writing-chart-navigation span { font-size:10px; }
 .writing-kana-table .writing-letter { padding:10px 2px; min-height:120px; border-radius:10px; }
 .writing-letter-face { gap:5px; flex-wrap:nowrap; }
 .writing-kana-table .writing-letter strong { font-size:28px; }
 .writing-kana-table .writing-emoji { font-size:45px; }
 .writing-kana-table .writing-word { font-size:10px; }
 .writing-table-hint { font-size:11px; }
 .writing-table-head .writing-meta { font-size:11px; padding:6px 8px; }
}
@media(max-width:350px) {
 .writing-kana-table .writing-emoji { font-size:clamp(28px,12vw,42px); }
}