.stroke-order-open{
  display:inline-flex;align-items:center;justify-content:center;min-height:38px;margin:4px 0 12px;
  padding:8px 15px;border:1px solid #71836f66;border-radius:999px;background:#eef0e5;color:#405746;
  font:13px/1.2 system-ui,-apple-system,"PingFang SC",sans-serif;cursor:pointer;
}
.stroke-order-open::before{content:"✎";margin-right:7px;font-size:15px}
.stroke-order-open:hover{background:#e4e9dc}
.stroke-order-open:focus-visible,.stroke-order-dialog button:focus-visible{outline:3px solid #b86a45;outline-offset:3px}

.stroke-order-dialog{
  width:min(92vw,520px)!important;height:auto!important;max-width:520px!important;max-height:calc(100dvh - 28px)!important;
  margin:auto!important;padding:0!important;border:0!important;border-radius:24px!important;overflow:auto!important;
  background:#f7f3e8!important;color:#354a3d!important;box-shadow:0 24px 80px #23342955!important;
  font-family:var(--lesson-kaiti,"Kaiti SC","STKaiti","KaiTi","楷体",serif)!important;
}
.stroke-order-dialog::backdrop{background:#26352c88!important;backdrop-filter:blur(3px)}
.stroke-order-card{position:relative;padding:27px 30px 25px;text-align:center}
.stroke-order-close{
  position:absolute;top:15px;right:16px;width:40px;height:40px;padding:0!important;border:0!important;border-radius:50%!important;
  background:#e7e7dc!important;color:#526054!important;font:25px/1 system-ui!important;cursor:pointer;
}
.stroke-order-eyebrow{margin:0 0 4px!important;color:#7b806d!important;font:11px/1.4 system-ui!important;letter-spacing:.16em}
.stroke-order-dialog h2{margin:0 0 17px!important;font:400 25px/1.45 var(--lesson-kaiti,"Kaiti SC","STKaiti","KaiTi","楷体",serif)!important;letter-spacing:.04em}
.stroke-order-grid{width:min(68vw,310px);aspect-ratio:1;margin:0 auto 14px}
.stroke-order-grid svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 8px 18px #54604d18)}
.stroke-order-meta{display:flex;justify-content:space-between;gap:12px;width:min(68vw,310px);min-height:22px;margin:0 auto;color:#5f6c61;font:12px/1.5 system-ui}
.stroke-order-count{white-space:nowrap;color:#8c7257}
.stroke-order-progress{width:min(68vw,310px);height:3px;margin:8px auto 15px;border-radius:99px;background:#d9ddcf;overflow:hidden}
.stroke-order-progress i{display:block;width:0;height:100%;border-radius:inherit;background:#d98e3a;transition:width .12s linear}
.stroke-order-controls{display:flex;justify-content:center;flex-wrap:wrap;gap:9px}
.stroke-order-controls button{
  min-height:38px;padding:8px 14px;border:1px solid #75857255;border-radius:999px;background:#f7f3e8;color:#405746;
  font:12px/1.2 system-ui,-apple-system,"PingFang SC",sans-serif;cursor:pointer;
}
.stroke-order-controls .stroke-order-replay{background:#496650;color:white;border-color:#496650}
.stroke-order-controls button:disabled{opacity:.42;cursor:default}
.stroke-order-hint{min-height:20px;margin:14px 0 0!important;color:#7b806d!important;font:12px/1.7 system-ui!important}
.stroke-order-source{margin:12px auto 0!important;color:#8a8c7c;font:10px/1.6 system-ui;text-align:center}
.stroke-order-source summary{cursor:pointer}
.stroke-order-source a{color:inherit;text-decoration:underline}

@media(max-width:700px){
  .stroke-order-open{min-height:36px;margin:2px 0 9px;padding:7px 13px;font-size:12px}
  .stroke-order-dialog{width:94vw!important;max-height:calc(100dvh - 18px)!important;border-radius:20px!important}
  .stroke-order-card{padding:24px 18px 21px}
  .stroke-order-grid,.stroke-order-meta,.stroke-order-progress{width:min(74vw,286px)}
  .stroke-order-dialog h2{font-size:23px;margin-bottom:12px!important}
}

@media(prefers-reduced-motion:reduce){
  .stroke-order-progress i{transition:none}
  .stroke-order-dialog::backdrop{backdrop-filter:none}
}