/* Shared base for preview/*.html cards */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: #060606;
  color: #F5F5F5;
  font-family: "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.card {
  padding: 22px 26px;
  min-height: 100%;
}
.row { display: flex; align-items: center; gap: 16px; }
.col { display: flex; flex-direction: column; gap: 12px; }
.grid { display: grid; gap: 12px; }
.eyebrow {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #DC2626;
}
.label {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6B7280;
}
.meta {
  font-family: "Inter", sans-serif;
  font-size: 0.7rem;
  color: #6B7280;
}
.swatch {
  width: 100%;
  height: 64px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
}
.swatch .name {
  position: absolute;
  inset: auto 0 0 0;
  padding: 6px 8px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
  color: #F5F5F5;
}