@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 200 800; font-style: normal; font-display: swap;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#fff;color:#111;font-family:'Manrope',ui-sans-serif,system-ui,sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
.card{padding:20px;width:700px;min-height:120px}
.row{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap}
.swatch{border-radius:6px;border:1px solid #e5e7eb;overflow:hidden;min-width:96px}
.swatch .chip{height:56px}
.swatch .meta{padding:6px 8px;font-family:'Inter', sans-serif;font-size:10px;line-height:1.3;color:#374151;background:#fff}
.swatch .meta b{display:block;color:#111;font-weight:600;font-family:'Inter',sans-serif;font-size:11px}
.label{font-family:'Inter', sans-serif;font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:#6b7280;margin-bottom:10px}
.mono{font-family:'Inter', sans-serif}
.heading{font-family:'Inter',sans-serif}
.body{font-family:'Manrope',sans-serif}