.stroke-order-dialog { color:#3e2723; background:#fff8e7; border:1px solid #ddcbb1; border-radius:12px; width:min(900px, calc(100vw - 24px)); max-height:90dvh; box-sizing:border-box; padding:20px; overflow:auto; }
.stroke-order-dialog::backdrop { background:rgba(40,25,15,.45); }
.stroke-order-dialog header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.stroke-order-dialog h2 { margin:0; font-size:1.4rem; }
.stroke-order-dialog button,.stroke-order-dialog select { min-height:44px; font:inherit; padding:8px 12px; border:1px solid #c6ad91; border-radius:8px; background:#fff; color:#3e2723; }
.stroke-order-dialog button:focus-visible,.stroke-order-dialog select:focus-visible { outline:3px solid #e8712c; outline-offset:2px; }
.stroke-order-dialog label { display:inline-flex; gap:8px; align-items:center; margin:5px; }
.stroke-order-dialog p { line-height:1.5; }
.stroke-order-panes { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.stroke-order-panes canvas { display:block; width:100%; aspect-ratio:1; object-fit:contain; background:white; border:1px solid #d5c1a9; border-radius:8px; box-sizing:border-box; }
.stroke-order-panes canvas[data-field="practice"] { touch-action:none; }
.stroke-order-controls { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.stroke-order-dialog [data-field="attribution"] { font-size:.85rem; overflow-wrap:anywhere; }
.stroke-order-dialog a { color:#864016; text-decoration:underline; }
@media(max-width:650px) { .stroke-order-panes { grid-template-columns:1fr; } .stroke-order-dialog { padding:14px; } }

.stroke-order-practice { position:relative; }
.stroke-order-practice canvas[data-field="guide"] { position:absolute; inset:0; width:100%; height:100%; opacity:.18; pointer-events:none; }
.stroke-order-practice canvas[data-field="practice"] { position:relative; background:transparent; }

.stroke-order-dialog [hidden] { display:none !important; }
.stroke-order-dialog header { position:sticky; top:0; z-index:2; background:#fff8e7; padding-bottom:8px; }

.stroke-order-announcement { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }