:root {
  --background: 0 0% 7%;
  --foreground: 0 0% 95%;
  --muted-foreground: 0 0% 72%;
  --border: 0 0% 20%;
  --accent: 0 0% 22%;
}
* { box-sizing: border-box; }
body { margin: 0; background: hsl(var(--background)); color: hsl(var(--foreground)); font-family: system-ui, sans-serif; }
header, main { max-width: 1200px; margin: auto; padding: 24px; }
header { border-bottom: 1px solid hsl(var(--border)); }
a { color: inherit; text-underline-offset: 4px; }
a:hover { text-decoration: underline; }
h1 { font-size: 32px; margin-bottom: 8px; }
p { color: hsl(var(--muted-foreground)); }
.texture-list { padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; margin: 32px 0; }
.texture-list li { border-bottom: 1px solid hsl(var(--border)); }
.texture-list a { display: block; padding: 14px 0; text-decoration: none; overflow-wrap: anywhere; }
nav { display: flex; flex-wrap: wrap; gap: 8px; }
nav a, nav span { padding: 8px; min-width: 36px; text-align: center; }
nav span { background: hsl(var(--accent)); }
@media (max-width: 720px) { .texture-list { grid-template-columns: 1fr; } }