.hw-tool { max-width: 57rem; margin-bottom: 2.5rem; }
.hw-controls { display: flex; align-items: flex-end; flex-wrap: wrap; gap: .65rem .8rem; }
.hw-controls label { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: .25rem; font-weight: 650; }
.hw-controls select, .hw-shortcuts button, .hw-movement button {
  min-height: 2.75rem;
  max-width: 100%;
  padding: .5rem .75rem;
  border: 1px solid #d6cdda;
  border-radius: .6rem;
  color: #4b3559;
  background: var(--site-paper);
  font: inherit;
}
.hw-controls select { min-height: 3.25rem; min-width: 0; }
.hw-tool button { cursor: pointer; font-family: inherit; }
.hw-shortcuts, .hw-movement { display: flex; flex-wrap: wrap; gap: .45rem; }
.hw-shortcuts { margin-top: .65rem; }
.hw-shortcuts button { min-width: 3rem; font-weight: 700; }
.hw-tool button[aria-pressed="true"] { border-color: #553969; background: #553969; color: white; }
.hw-screen-guide {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: 1.2rem;
  margin-top: 1rem;
  padding: clamp(1rem, 3vw, 1.55rem);
  border: 1px solid #ddd3e1;
  border-radius: .85rem;
  background: #f4eef6;
}
.hw-screen-guide h2, .hw-sheet h2 { margin: 0 0 .3rem; font-size: clamp(1.25rem, 3vw, 1.7rem); line-height: 1.2; }
.hw-guide-copy p { margin: .4rem 0 .8rem; line-height: 1.5; }
.hw-movement button { font-size: .9rem; font-weight: 650; }
.hw-preview-svg { display: block; width: 100%; max-height: 12rem; overflow: hidden; }
.hw-status { min-height: 1.45rem; margin: .45rem 0; color: var(--site-muted); }
.hw-sheet {
  padding: clamp(.9rem, 3.4vw, 2.1rem);
  border: 1px solid var(--site-line);
  border-radius: .75rem;
  color: #242824;
  background: white;
}
.hw-sheet-heading { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1.1rem; }
.hw-sheet-heading p { margin: .4rem 0; }
.hw-sheet h2 span { color: #553969; }
.hw-sheet h3 { margin: .8rem 0 .2rem; font-size: 1rem; }
.hw-print-instruction { color: var(--site-muted); font-size: .9rem; }
.hw-sheet-line { white-space: nowrap; font-size: .9rem; }
.hw-writing-row { display: block; width: 100%; margin-bottom: .15rem; }
.hw-slant, .hw-limit, .hw-rule, .hw-ink { fill: none; }
.hw-slant { stroke: #a1a4ab; stroke-width: .55; stroke-dasharray: 3 4; }
.hw-limit { stroke: #b4b7be; stroke-width: .58; }
.hw-rule { stroke: #899095; stroke-width: .8; }
.hw-ink { stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.hw-sample { stroke: #452c56; }
.hw-quiet { stroke: #ac9eb4; }
.hw-trace { stroke: #787f83; stroke-dasharray: 2.5 3.2; }
.hw-dot { fill: #4c3162; }
.hw-draw { stroke-dasharray: 1; animation: hw-draw .45s var(--hw-delay, 0s) both linear; }
@keyframes hw-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .hw-draw { animation: none; stroke-dasharray: none; }
}
@media (max-width: 43rem) {
  .hw-screen-guide { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 29rem) {
  .hw-controls label { flex: 1 1 min(100%, 8rem); min-width: 0; }
  .hw-controls button { width: 100%; }
}
@media print {
  @page { size: A4; margin: 0; }
  body:has(.hw-tool) #content { width: auto; max-width: none; margin: 0; padding: 0; }
  .hw-controls, .hw-shortcuts, .hw-screen-guide, .hw-status,
  body:has(.hw-tool) .statistics-preference { display: none !important; }
  .hw-tool { max-width: none; margin: 0; padding: 0; }
  .hw-sheet { width: 210mm; max-width: none; margin: 0; padding: 16mm; border: 0; border-radius: 0; color: black; }
  .hw-sheet h2 { font-size: 21pt; }
  .hw-sheet h2 span { color: black; }
  .hw-sheet p { font-size: 11pt; }
  .hw-sheet h3 { margin-top: 5mm; font-size: 12pt; }
  .hw-sample { stroke: #171717; }
  .hw-writing-row { margin-bottom: 1mm; break-inside: avoid; }
}