.tool-intro{max-width:760px;margin:0 0 28px}.tool-intro h2{margin-top:0}.roughness-comparison{margin:24px 0 32px;padding:16px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg)}.roughness-comparison canvas{display:block;width:100%;height:auto;aspect-ratio:3}.roughness-comparison canvas[hidden]{display:none}.roughness-comparison-labels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;text-align:center;font-size:13px;line-height:1.4}.roughness-comparison-labels>div{display:grid;justify-items:center;gap:8px}.roughness-comparison-swatch{width:24px;height:24px;border:1px solid var(--line-2);border-radius:4px}.roughness-comparison figcaption,.roughness-comparison-fallback{margin:16px 0 0;color:var(--text-3);font-size:13px;line-height:1.6}@media (max-width: 480px){.roughness-comparison{padding:10px}.roughness-comparison-labels{gap:6px;font-size:11px}}