/* Traçado: letra-modelo, folha, controles e pontinhos de progresso */
.tm{display:flex;align-items:center;justify-content:center;width:100%;height:clamp(88px,12vh,118px);border-radius:24px;background:var(--card,#fff);border:2px solid var(--line);color:var(--ink);font:800 clamp(72px,10.5vh,100px)/1 "Bricolage Grotesque","Atkinson Hyperlegible",system-ui,sans-serif;cursor:pointer}
.tm.hid span{visibility:hidden}
.tp{position:relative;flex:none;height:clamp(170px,26vh,260px);border-radius:24px;background:var(--card,#fff);border:2px dashed var(--line);overflow:hidden;color:var(--blue,#1763AE)}
.tp canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.tc{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tb{min-height:48px;font-size:16px;padding:0 6px;line-height:1.1}.tb:disabled{opacity:.45}.tb.on{background:var(--ink);color:var(--paper)}
.tdots{display:flex;gap:8px;justify-content:center}.tdots i{width:14px;height:14px;border-radius:50%;background:var(--line)}.tdots i.on{background:var(--orange)}.tdots i.ok{background:#2D8F57}