.touch-tool{gap:1rem;max-width:780px;margin:1.5rem auto 3rem;padding:0 1rem;display:grid}.touch-panel{border:1px solid var(--border,#e2e2e2);border-radius:1rem;gap:.75rem;padding:1rem 1.25rem 1.25rem;display:grid}.touch-panel legend{padding:0 .5rem;font-weight:700}.touch-pad{border:2px dashed var(--border,#c9c9c9);touch-action:none;cursor:crosshair;background:var(--surface,#fff);border-radius:.9rem;min-height:340px;position:relative;overflow:hidden}.touch-pad:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.touch-grid{background-image:repeating-linear-gradient(to right, var(--border,#e5e5e5) 0 1px, transparent 1px 10%), repeating-linear-gradient(to bottom, var(--border,#e5e5e5) 0 1px, transparent 1px calc(100% / 14));opacity:.7;pointer-events:none;position:absolute;inset:0}.touch-trails{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.touch-pad-hint{text-align:center;color:var(--muted,#666);pointer-events:none;margin:0;padding:0 1rem;font-size:.85rem;position:absolute;inset:auto 0 .75rem}.touch-stats{grid-template-columns:repeat(3,1fr);gap:.5rem;margin:0;display:grid}.touch-stats>div{border:1px solid var(--border,#e2e2e2);border-radius:.75rem;padding:.5rem .75rem}.touch-stats dt{color:var(--muted,#666);font-size:.78rem}.touch-stats dd{margin:0;font-size:1.25rem;font-weight:700}.touch-hint{color:var(--muted,#666);margin:0;font-size:.9rem}.touch-actions{flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;display:flex}.touch-check{cursor:pointer;align-items:center;gap:.5rem;min-height:44px;font-weight:600;display:inline-flex}.touch-check input{width:1.25rem;height:1.25rem}@media (max-width:560px){.touch-stats{grid-template-columns:repeat(2,1fr)}.touch-pad{min-height:300px}}@media (prefers-reduced-motion:reduce){.touch-pad{cursor:default}}