/* Shared optional handwriting surface; it never changes trainer layout. */
.ma-handwriting{
  --hand-left:var(--ma-safe-left,env(safe-area-inset-left,0px));--hand-right:var(--ma-safe-right,env(safe-area-inset-right,0px));
  --hand-top:var(--ma-safe-top,env(safe-area-inset-top,0px));--hand-bottom:var(--ma-safe-bottom,env(safe-area-inset-bottom,0px));
  position:fixed;top:calc(var(--ma-overlay-top,0px) + var(--hand-top) + (var(--ma-overlay-height,100dvh) - var(--hand-top) - var(--hand-bottom))*.5);
  left:calc(var(--ma-overlay-left,0px) + var(--hand-left) + (var(--ma-overlay-width,100vw) - var(--hand-left) - var(--hand-right))*.5);
  bottom:auto;right:auto;height:auto;margin:0;transform:translate(-50%,-50%);box-sizing:border-box;
  width:min(620px,calc(var(--ma-overlay-width,100vw) - var(--hand-left) - var(--hand-right) - 24px));
  max-height:min(92dvh,calc(var(--ma-overlay-height,100dvh) - var(--hand-top) - var(--hand-bottom) - 24px));
  padding:18px;border:1px solid var(--ma-border);border-radius:24px;background:var(--ma-app-bg);color:var(--ma-text-strong);box-shadow:0 20px 70px #0006;overflow:auto;
}
.ma-handwriting::backdrop{background:#0009;}
.ma-handwriting>header{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.ma-handwriting h2{margin:0;font:750 1.2rem/1.3 var(--ma-font-display);}
.ma-handwriting-body{display:grid;justify-items:center;gap:12px;padding-top:12px;}
.ma-handwriting-characters,.ma-handwriting-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;}
.ma-handwriting-characters .ma-button{font-family:var(--ma-font-jp);font-size:1.15rem;min-width:44px;padding:8px 12px;}
.ma-handwriting :is(button,a):focus-visible{outline:3px solid var(--ma-focus-ring);outline-offset:3px;}
.ma-handwriting [aria-pressed="true"]{background:var(--ma-text-strong);color:var(--ma-app-bg);}
.ma-handwriting-stage{width:min(280px,100%,42dvh);aspect-ratio:1;display:grid;place-items:center;}
html[data-ma-runtime="ios"] .ma-handwriting{
  --hand-left:var(--ma-ios-overlay-left,var(--ma-safe-left));--hand-right:var(--ma-ios-overlay-right,var(--ma-safe-right));--hand-top:var(--ma-ios-overlay-top,var(--ma-safe-top));
  container:handwriting / inline-size;width:min(820px,calc(var(--ma-overlay-width,100vw) - var(--hand-left) - var(--hand-right) - 24px));
}
@container handwriting (min-width:22rem){
 html[data-ma-runtime="ios"] .ma-handwriting-body{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:12px 16px;align-items:start;}
 html[data-ma-runtime="ios"] .ma-handwriting-characters{grid-column:1;grid-row:1;}
 html[data-ma-runtime="ios"] .ma-handwriting-body>.ma-pronunciation{grid-column:2;grid-row:1;justify-content:center;}
 html[data-ma-runtime="ios"] .ma-handwriting-modes{grid-column:1/-1;grid-row:2;}
 html[data-ma-runtime="ios"] .ma-handwriting-body>.ma-handwriting-stage{grid-column:1;grid-row:3/span 3;width:100%;}
 html[data-ma-runtime="ios"] .ma-handwriting-status{grid-column:2;grid-row:3;}
 html[data-ma-runtime="ios"] .ma-handwriting-edit{grid-column:2;grid-row:4;}
 html[data-ma-runtime="ios"] .ma-handwriting-tip{grid-column:2;grid-row:5;}
 html[data-ma-runtime="ios"] .ma-handwriting-source{grid-column:1/-1;grid-row:6;}
 html[data-ma-runtime="ios"] .ma-handwriting-body .ma-button{padding:8px 10px;font-size:.8rem;}
}
@container handwriting (min-width:41rem){
 html[data-ma-runtime="ios"] .ma-handwriting-body{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);column-gap:24px;align-items:start;}
 html[data-ma-runtime="ios"] .ma-handwriting-body>*{grid-column:2;grid-row:auto;min-width:0;}
 html[data-ma-runtime="ios"] .ma-handwriting-body>.ma-handwriting-stage{grid-column:1;grid-row:1/span 8;align-self:center;width:min(100%,380px);}
}
html[data-ma-runtime="ios"][data-ma-large-text] .ma-handwriting-body{grid-template-columns:1fr;}
html[data-ma-runtime="ios"][data-ma-large-text] .ma-handwriting-body>*{grid-column:auto;grid-row:auto;}
.ma-handwriting-board{display:block;width:100%;height:100%;border:1px solid var(--ma-border);border-radius:16px;background:var(--ma-surface-inset);touch-action:none;user-select:none;cursor:crosshair;}
.ma-handwriting-grid{stroke:var(--ma-border);stroke-width:.5;stroke-dasharray:2 2;fill:none;}
.ma-handwriting-guide{fill:none;stroke:var(--ma-muted);stroke-opacity:.22;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.ma-handwriting-guide.is-next{stroke:var(--ma-writing);stroke-opacity:.5;}
.ma-handwriting-guide.is-done{stroke:var(--ma-reading);stroke-opacity:.65;}
.ma-handwriting-guide.is-hidden{stroke-opacity:0;}
.ma-handwriting-guide.is-demonstrated{stroke:var(--ma-text-strong);stroke-opacity:1;}
.ma-handwriting-ink{stroke:var(--ma-writing);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;fill:none;}
.ma-handwriting-start{fill:var(--ma-results);}
.ma-handwriting-status{min-height:2.6em;margin:0;text-align:center;font:.85rem/1.3 var(--ma-font-jp);max-width:42ch;}
.ma-handwriting-tip{font-size:.8rem;color:var(--ma-muted);line-height:1.4;margin:0;text-align:center;max-width:42ch;}
.ma-handwriting-source{font-size:.72rem;color:var(--ma-muted);padding:4px;}
.ma-pronunciation{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.ma-pronunciation .ma-button{min-height:44px;padding:8px 12px;font-size:.8rem;}
@media(max-width:400px){.ma-handwriting{padding:12px;}.ma-handwriting-body{gap:8px;}.ma-handwriting-tools{gap:6px;}.ma-handwriting-tools .ma-button{font-size:.78rem;padding:8px 10px;}}