.hw-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.hw-preview-wrap{margin:0;position:sticky;top:12px;padding:10px;border:1px solid var(--doc-line);border-radius:12px;background:#e9ebe7}
.hw-preview-wrap canvas{display:block;width:100%;height:auto;box-shadow:0 2px 10px #0003;background:#fff}
.hw-preview-wrap figcaption{margin-top:6px;font-size:12.5px;text-align:center;color:#4c5c63}
.hw-capture{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:20px;align-items:start;margin-top:12px}
.hw-char-head{display:flex;align-items:center;gap:12px;margin-bottom:8px;font-size:13px;color:#4c5c63}
.hw-char{display:grid;place-items:center;min-width:56px;height:56px;border-radius:12px;background:var(--doc-ink);color:#fff;font:700 30px Georgia,serif}
#hw-pad{width:100%;max-width:340px;aspect-ratio:1;border:2px solid var(--doc-line);border-radius:14px;background:#fffefb;touch-action:none;cursor:crosshair}
.hw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:5px}
.hw-grid button{min-height:38px;border:1px solid var(--doc-line);border-radius:8px;background:#fff;font:600 16px Georgia,serif;cursor:pointer}
.hw-grid button.done{background:#e3f4e7;border-color:#8cc59b}.hw-grid button.now{outline:3px solid #c99c5f;outline-offset:1px}
.hw-import{display:inline-flex;align-items:center;cursor:pointer}
@media(max-width:860px){.hw-layout,.hw-capture{grid-template-columns:1fr}.hw-preview-wrap{position:static}}
.csvp-tabs{display:flex;gap:8px;margin:0 0 16px}.csvp-tabs button{min-height:44px;padding:10px 16px;border:1px solid var(--doc-line);border-radius:10px;background:#f6f5ef;color:var(--doc-ink);font-weight:700;cursor:pointer}.csvp-tabs button[aria-selected="true"]{background:var(--doc-ink);border-color:var(--doc-ink);color:#fff}