/* External CSS */
img {
  border: 2px solid black;
  border-radius: 8px;
  margin: 10px 0;
}

a {
  color: darkred;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
:root { --ink:#1a1a1a; --muted:#6b7280; --card:#f6f7f9; --ring:#3498db; }
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink)}
.container{max-width:900px;margin:0 auto;padding:1.25rem}

.site-header{padding:1.25rem;border-bottom:1px solid #e5e7eb}
.nav{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.5rem}
.nav a{padding:.45rem .7rem;border:1px solid #e5e7eb;border-radius:.5rem;text-decoration:none;color:var(--ink)}
.nav a:hover{border-color:var(--ring)}

.site-footer{border-top:1px solid #e5e7eb;padding:1rem;text-align:center;color:var(--muted)}

.swatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-top:.75rem}
.swatch{height:100px;border-radius:.5rem;display:flex;align-items:end;justify-content:center;padding:.5rem;color:#fff;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.35)}

.nice-table{width:100%;border-collapse:collapse;margin-top:1rem;background:#fff;border-radius:.5rem;overflow:hidden}
.nice-table caption{text-align:left;font-weight:600;padding-bottom:.5rem}
.nice-table th,.nice-table td{border:1px solid #e5e7eb;padding:.6rem .75rem;text-align:left}
.nice-table thead{background:#f3f4f6}

.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));padding:1.25rem}
.card{background:var(--card);border:1px solid #e5e7eb;border-radius:.75rem;overflow:hidden}
.card img{display:block;width:100%;height:auto}
.card figcaption{padding:.75rem;color:var(--muted)}