/* pattern-grid documentation site styles */

/* Anti-FOUC: hide components until defined */
pattern-grid:not(:defined) {
  display: block;
  opacity: 0;
}

:root {
  color-scheme: light;
  --bg-primary: #ffffff;
  --bg-secondary: #f6f8fa;
  --bg-tertiary: #eff1f3;
  --text-primary: #24292f;
  --text-secondary: #57606a;
  --text-muted: #6e7781;
  --border-color: #d0d7de;
  --link-color: #0969da;
  --link-hover: #0550ae;
  --accent-color: #0969da;
  --success-color: #1a7f37;
  --code-bg: #f6f8fa;
}

body.dark {
  color-scheme: dark;
  --bg-primary: #0d1117;
  --bg-secondary: #161b22;
  --bg-tertiary: #21262d;
  --text-primary: #c9d1d9;
  --text-secondary: #8b949e;
  --text-muted: #6e7681;
  --border-color: #30363d;
  --link-color: #58a6ff;
  --link-hover: #79c0ff;
  --accent-color: #58a6ff;
  --success-color: #3fb950;
  --code-bg: #161b22;
}

* {
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
}

a {
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
  color: var(--link-hover);
}

code {
  background: var(--code-bg);
  padding: 0.2em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

pre {
  background: var(--code-bg);
  padding: 1rem;
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  font-size: 0.875rem;
  line-height: 1.5;
}

pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

/* Site Header */
.site-header {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  padding: 0 2rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header nav {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.nav-brand {
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

.nav-brand:hover {
  color: var(--link-color);
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.nav-links a {
  color: var(--text-secondary);
  font-weight: 500;
  padding: 0.5rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--text-primary);
  text-decoration: none;
  border-bottom-color: var(--accent-color);
}

.theme-toggle {
  padding: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.theme-toggle:hover {
  background: var(--bg-tertiary);
}

/* Main Content */
main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

/* Hero Section */
.hero {
  text-align: center;
  padding: 4rem 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 3rem;
}

.hero h1 {
  font-size: 3rem;
  margin: 0 0 1rem;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

.tagline {
  font-size: 1.25rem;
  color: var(--text-secondary);
  margin: 0 0 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hero-demo {
  max-width: 480px;
  margin: 2rem auto;
}

.hero-demo pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

.hero-demo pattern-grid > i {
  aspect-ratio: 1;
  background: hsl(calc(sibling-index() / sibling-count() * 360) 70% 55%);
  animation: hero-pulse 5s ease-in-out infinite;
  animation-delay: calc(sibling-index() * -25ms);
}

@keyframes hero-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.82); border-radius: 50%; }
}

.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}

.btn.primary {
  background: var(--accent-color);
  color: #fff;
}

.btn.primary:hover {
  background: var(--link-hover);
  text-decoration: none;
}

.btn.secondary {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.btn.secondary:hover {
  background: var(--bg-tertiary);
  text-decoration: none;
}

/* Sections */
section {
  margin-bottom: 4rem;
}

section h2 {
  font-size: 1.75rem;
  margin: 0 0 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}

section h3 {
  font-size: 1.25rem;
  margin: 2rem 0 1rem;
}

/* Feature Grid */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.feature-card {
  padding: 1.5rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: var(--accent-color);
}

body.dark .feature-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.feature-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  color: var(--accent-color);
}

.feature-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

/* Related Components Grid */
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.related-card {
  display: block;
  padding: 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}

.related-card:hover {
  border-color: var(--accent-color);
  background: var(--bg-tertiary);
  text-decoration: none;
}

.related-card strong {
  display: block;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

.related-card span {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* Quick Start */
.quick-start p {
  margin: 1rem 0;
}

/* API Tables */
.api-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.9rem;
}

.api-table th,
.api-table td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  vertical-align: top;
}

.api-table th {
  background: var(--bg-secondary);
  font-weight: 600;
}

.api-table code {
  font-size: 0.85em;
  white-space: nowrap;
}

/* Demo Page */
.demo-section {
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--border-color);
}

.demo-section:last-child {
  border-bottom: none;
}

.demo-section h2 {
  border-bottom: none;
  padding-bottom: 0;
}

.demo-description {
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

.demo-frame {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.5rem;
  margin-block: 1.5rem;
  background: var(--bg-primary);
}

.side-by-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

.side-by-side > * {
  min-width: 0;
}

@media (max-width: 700px) {
  .side-by-side {
    grid-template-columns: 1fr;
  }
}

/* Per-demo grid styles */
#rainbow pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
}
#rainbow pattern-grid > i {
  aspect-ratio: 1;
  background: hsl(calc(sibling-index() / sibling-count() * 360) 70% 50%);
}

#concentric pattern-grid {
  display: grid;
  grid-template-columns: 100%;
  place-items: center;
  aspect-ratio: 1;
  width: 100%;
  max-width: 320px;
  margin-inline: auto;
}
#concentric pattern-grid > i {
  grid-area: 1 / 1;
  width: calc(100% * sibling-index() / sibling-count());
  aspect-ratio: 1;
  border: 1px solid hsl(calc(sibling-index() * 11) 70% 60%);
  border-radius: 30%;
  transform: rotate(calc(sibling-index() * 5deg));
}

@property --idx { syntax: '<integer>'; inherits: false; initial-value: 0; }
@property --x { syntax: '<integer>'; inherits: false; initial-value: 0; }
@property --y { syntax: '<integer>'; inherits: false; initial-value: 0; }

#coords pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
}
#coords pattern-grid > i {
  --idx: calc(var(--i) - 1);
  --x: mod(var(--idx), var(--pg-cols));
  --y: calc((var(--idx) - var(--x)) / var(--pg-cols));
  aspect-ratio: 1;
  background: hsl(calc((var(--x) + var(--y)) * 8) 70% 50%);
}

#template pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
  gap: 0.5rem;
}
#template pattern-grid > .tile {
  aspect-ratio: 1;
  border: 0;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: 1.5rem;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.2s;
}
#template pattern-grid > .tile:hover { background: var(--accent-color); color: #fff; }

#handauthored pattern-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
#handauthored pattern-grid > a {
  aspect-ratio: 1;
  display: block;
  border-radius: 6px;
}

#vb {
  --vb-color-saturation: 80%;
  --vb-color-lightness: 55%;
  --vb-radius-sm: 8px;
}
#vb pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
  gap: 4px;
}
#vb pattern-grid > i {
  aspect-ratio: 1;
  background: hsl(
    calc(sibling-index() / sibling-count() * 360)
    var(--vb-color-saturation)
    var(--vb-color-lightness)
  );
  border-radius: var(--vb-radius-sm);
}

#shim pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
}
#shim pattern-grid > i {
  --idx: var(--i, sibling-index());
  aspect-ratio: 1;
  background: hsl(calc(var(--idx) * 10) 70% 50%);
}

#seeded pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
}
#seeded pattern-grid > i {
  aspect-ratio: 1;
  background: hsl(calc(var(--rand-0) * 360deg) 70% 50%);
}

#explorer pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
}
#explorer pattern-grid > i {
  aspect-ratio: 1;
  background: hsl(calc(sibling-index() / sibling-count() * 360) 70% 50%);
}
#explorer .controls {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
#explorer label {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}

/* Site Footer */
.site-footer {
  border-top: 1px solid var(--border-color);
  padding: 2rem;
  text-align: center;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  margin-top: 4rem;
}

.site-footer p {
  margin: 0;
}

/* Mobile */
@media (max-width: 768px) {
  .site-header {
    padding: 0 1rem;
  }
  .nav-links {
    gap: 1rem;
  }
  main {
    padding: 1rem;
  }
  .hero {
    padding: 2rem 0;
  }
  .hero h1 {
    font-size: 2rem;
  }
  .tagline {
    font-size: 1rem;
  }
}

/* --- Showcase gallery --- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-block: 2rem;
}

.gallery figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.gallery .tile {
  aspect-ratio: 1;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: var(--bg-primary);
}

.gallery .tile > * {
  width: 100%;
  height: 100%;
}

.gallery figcaption {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.gallery figcaption strong {
  color: var(--text-primary);
  margin-right: 0.5rem;
}

.gallery details {
  font-size: 0.8rem;
}

.gallery details summary {
  cursor: pointer;
  color: var(--link-color);
}

.gallery details pre {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  max-height: 240px;
  overflow: auto;
}

/* --- Showcase: platform section heading --- */
.showcase-section {
  grid-column: 1 / -1;
  margin-block: 3rem 0.5rem;
  font-size: 1.6rem;
  border-top: 1px solid var(--border-color, #ccc);
  padding-top: 2rem;
}
.showcase-section-lead {
  grid-column: 1 / -1;
  margin-block: 0 1rem;
  color: var(--muted, #666);
  max-width: 60ch;
}

/* --- Showcase: hex honeycomb --- */
#sc-hex pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
}
#sc-hex pattern-grid > i {
  aspect-ratio: 1;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: hsl(calc(var(--i, sibling-index()) * 6) 65% 55%);
}

/* --- Showcase: conic pinwheels --- */
#sc-pinwheels pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
}
#sc-pinwheels pattern-grid > i {
  aspect-ratio: 1;
  background: conic-gradient(
    from calc(var(--i, sibling-index()) * 10deg),
    hsl(calc(var(--i, sibling-index()) * 20) 70% 55%),
    hsl(calc(var(--i, sibling-index()) * 20 + 180) 70% 55%),
    hsl(calc(var(--i, sibling-index()) * 20) 70% 55%)
  );
}

/* --- Showcase: tessellated triangles --- */
#sc-triangles pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
}
#sc-triangles pattern-grid > i {
  aspect-ratio: 1;
  background: hsl(calc(var(--i, sibling-index()) * 4 + 200) 70% 55%);
}
#sc-triangles pattern-grid > i:nth-child(odd)  { clip-path: polygon(50% 0%, 100% 100%, 0% 100%); }
#sc-triangles pattern-grid > i:nth-child(even) { clip-path: polygon(0% 0%, 100% 0%, 50% 100%); }

/* --- Showcase: sine bars --- */
#sc-sine pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
  align-items: end;
  height: 100%;
}
#sc-sine pattern-grid > i {
  align-self: end;
  height: calc(50% + sin(var(--i, sibling-index()) * 30deg) * 50%);
  background: hsl(calc(var(--i, sibling-index()) * 15) 70% 55%);
}

/* --- Showcase: Fibonacci spiral --- */
#sc-fib .tile { background: #111; }
#sc-fib pattern-grid {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}
#sc-fib pattern-grid > i {
  --r: calc(sqrt(var(--i, sibling-index())) * 2.4%);
  --a: calc(var(--i, sibling-index()) * 137.5deg);
  position: absolute;
  left: calc(50% + cos(var(--a)) * var(--r));
  top:  calc(50% + sin(var(--a)) * var(--r));
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: hsl(calc(var(--i, sibling-index()) * 3) 70% 55%);
  transform: translate(-50%, -50%);
}

/* --- Showcase: concentric bloom --- */
#sc-bloom pattern-grid {
  display: grid;
  place-items: center;
  grid-template-columns: 100%;
  aspect-ratio: 1;
  width: 100%;
}
#sc-bloom pattern-grid > i {
  grid-area: 1 / 1;
  width: calc(100% * var(--i, sibling-index()) / var(--n, sibling-count()));
  aspect-ratio: 1;
  border: 2px solid hsla(calc(var(--i, sibling-index()) * 7) 80% 60% / 0.6);
  border-radius: 50%;
}

/* --- Showcase: diagonal wipe --- */
#sc-wipe pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
}
#sc-wipe pattern-grid > i {
  --idx: calc(var(--i, sibling-index()) - 1);
  aspect-ratio: 1;
  background: hsl(220 70% 50%);
  animation: sc-wipe-anim 3s ease-in-out infinite;
  animation-delay: calc(var(--idx) * 12ms);
}
@keyframes sc-wipe-anim {
  0%, 100% { background: hsl(220 70% 50%); }
  50%      { background: hsl(50 90% 60%); }
}

/* --- Showcase: pulse field --- */
#sc-pulse pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
}
#sc-pulse pattern-grid > i {
  aspect-ratio: 1;
  background: hsl(calc(var(--i, sibling-index()) * 3) 70% 55%);
  animation: sc-pulse-anim 2.4s ease-in-out infinite;
  animation-delay: calc(var(--i, sibling-index()) * -30ms);
}
@keyframes sc-pulse-anim {
  0%, 100% { transform: scale(1);   border-radius: 0%;  }
  50%      { transform: scale(0.6); border-radius: 50%; }
}

/* --- Showcase: random mosaic --- */
#sc-mosaic pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
}
#sc-mosaic pattern-grid > i {
  aspect-ratio: 1;
  background: hsl(calc(var(--rand-0) * 360deg) 70% 55%);
}

/* --- Showcase: frosted scatter --- */
#sc-frost pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
}
#sc-frost pattern-grid > i {
  aspect-ratio: 1;
  background: hsl(220 80% 65% / calc(0.3 + var(--rand-0) * 0.7));
  transform: rotate(calc((var(--randi-1) - 50) * 1deg));
}

/* --- Showcase: crystals --- */
#sc-crystals pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
}
#sc-crystals pattern-grid > i {
  aspect-ratio: 1;
  background: hsl(calc(var(--rand-1) * 360deg) 70% 55%);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
#sc-crystals pattern-grid > i:nth-child(odd) {
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}

/* --- Showcase: random staircase --- */
#sc-staircase pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
}
#sc-staircase pattern-grid > i {
  aspect-ratio: 1;
  /* hue from a seeded random (not --i): seed-context values work in every
     browser, and the shim doesn't write --i inside a seed-context in FF. */
  background: hsl(calc(var(--rand-1) * 360) 70% 55%);
  transform: translateY(calc((var(--rand-0) - 0.5) * 40%));
}

/* --- Showcase: Unicode rain --- */
#sc-rain .tile { background: #0a0a0a; }
#sc-rain pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
}
#sc-rain pattern-grid > .glyph {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: hsl(140 80% calc(40% + var(--rand-0) * 40%));
  font-family: ui-monospace, monospace;
  font-size: 1rem;
  opacity: calc(0.3 + var(--rand-0) * 0.7);
}
#sc-rain pattern-grid > .glyph::before {
  content: "─";
}
#sc-rain pattern-grid > .glyph:nth-child(10n+1)::before { content: "│"; }
#sc-rain pattern-grid > .glyph:nth-child(10n+2)::before { content: "┌"; }
#sc-rain pattern-grid > .glyph:nth-child(10n+3)::before { content: "┐"; }
#sc-rain pattern-grid > .glyph:nth-child(10n+4)::before { content: "└"; }
#sc-rain pattern-grid > .glyph:nth-child(10n+5)::before { content: "┘"; }
#sc-rain pattern-grid > .glyph:nth-child(10n+6)::before { content: "├"; }
#sc-rain pattern-grid > .glyph:nth-child(10n+7)::before { content: "┤"; }
#sc-rain pattern-grid > .glyph:nth-child(10n+8)::before { content: "┬"; }
#sc-rain pattern-grid > .glyph:nth-child(10n+9)::before { content: "┴"; }

/* --- Showcase: hover ripple --- */
#sc-ripple pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
  gap: 2px;
}
#sc-ripple pattern-grid > i {
  aspect-ratio: 1;
  background: var(--bg-tertiary);
  transition: background 0.4s, transform 0.4s;
}
#sc-ripple pattern-grid > i:hover,
#sc-ripple pattern-grid > i:hover + i,
#sc-ripple pattern-grid > i:has(+ i:hover) {
  background: hsl(200 80% 55%);
  transform: scale(1.1);
  z-index: 1;
}

/* --- Showcase: Matrix rain --- */
#sc-matrix .tile { background: #000; }
#sc-matrix pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
  height: 100%;
}
#sc-matrix pattern-grid > .col {
  position: relative;
  height: 100%;
  background-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 255, 80, 0.0) 30%,
    rgba(0, 255, 80, 0.9) 55%,
    rgba(180, 255, 200, 1) 60%,
    transparent 90%
  );
  background-size: 100% 200%;
  background-repeat: no-repeat;
  animation: sc-matrix-fall 4.5s linear infinite;
  animation-delay: calc(var(--i, sibling-index()) * -0.35s);
}
@keyframes sc-matrix-fall {
  from { background-position-y: -100%; }
  to   { background-position-y: 200%; }
}
#sc-matrix pattern-grid > .col::before {
  position: absolute;
  inset: 0;
  white-space: pre-wrap;
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  line-height: 1.05;
  color: #0a4;
  text-align: center;
  content: "ｱ\Aｲ\Aｳ\Aｴ\Aｵ\Aｶ\Aｷ\Aｸ\Aｹ\Aｺ\Aｻ\Aｼ\Aｽ\Aｾ\Aｿ\Aﾀ\Aﾁ\Aﾂ\Aﾃ\Aﾄ\Aﾅ\Aﾆ\Aﾇ\Aﾈ\Aﾉ\Aﾊ\Aﾋ\Aﾌ\Aﾍ\Aﾎ\Aﾏ\Aﾐ\Aﾑ\Aﾒ\Aﾓ\Aﾔ\Aﾕ\Aﾖ\Aﾗ\Aﾘ\Aﾙ\Aﾚ";
}

/* --- Showcase: Plasma --- */
#sc-plasma pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
}
#sc-plasma pattern-grid > i {
  aspect-ratio: 1;
  background: conic-gradient(
    from calc(var(--i, sibling-index()) * 13deg),
    hsl(calc(var(--i, sibling-index()) * 7) 80% 60%),
    hsl(calc(var(--i, sibling-index()) * 7 + 180) 80% 60%)
  );
  animation: sc-plasma-anim 6s linear infinite;
  animation-delay: calc(var(--i, sibling-index()) * -20ms);
}
@keyframes sc-plasma-anim {
  to { filter: hue-rotate(360deg); }
}

/* --- Showcase: Raster bars --- */
#sc-raster pattern-grid {
  display: grid;
  grid-template-columns: 100%;
  grid-auto-rows: 1fr;
  height: 100%;
}
#sc-raster pattern-grid > i {
  background: hsl(calc(var(--i, sibling-index()) * 6) 90% 55%);
  animation: sc-raster-anim 3s ease-in-out infinite;
  animation-delay: calc(var(--i, sibling-index()) * -50ms);
}
@keyframes sc-raster-anim {
  0%, 100% { filter: brightness(0.9); }
  50%      { filter: brightness(1.5) saturate(1.6); }
}

/* --- Showcase: Wireframe sphere --- */
#sc-sphere .tile { background: #050015; }
#sc-sphere pattern-grid {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  animation: sc-sphere-spin 18s linear infinite;
}
#sc-sphere pattern-grid > i {
  --idx: calc(var(--i, sibling-index()) - 1);
  --phi: calc(acos(1 - 2 * var(--idx) / 240));
  --theta: calc(var(--idx) * 137.5deg);
  position: absolute;
  left: calc(50% + sin(var(--phi)) * cos(var(--theta)) * 40%);
  top:  calc(50% + cos(var(--phi)) * 40%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: hsl(180 70% calc(45% + sin(var(--theta)) * 35%));
  transform: translate(-50%, -50%);
}
@keyframes sc-sphere-spin {
  to { transform: rotate(360deg); }
}

/* --- Showcase: Sea Ranch stripes --- */
#sc-searanch pattern-grid {
  display: grid;
  grid-template-columns: 100%;
  grid-auto-rows: 1fr;
  height: 100%;
}
#sc-searanch pattern-grid > i {
  background: hsl(
    var(--vb-stripe-hue, calc(var(--rand-0) * 360deg))
    75%
    55%
  );
  clip-path: polygon(
    0 calc(var(--rand-1) * 35%),
    100% 0,
    100% calc(100% - var(--rand-1) * 35%),
    0 100%
  );
}

/* --- Showcase: Push Pin mosaic --- */
#sc-pushpin .tile { background: #f4ecd8; }
#sc-pushpin pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
  gap: 6px;
  padding: 8px;
}
#sc-pushpin pattern-grid > i {
  aspect-ratio: 1;
  background: hsl(calc(var(--rand-1) * 360deg) 75% 55%);
  filter: drop-shadow(3px 3px 0 #111);
}
#sc-pushpin pattern-grid > i:nth-child(4n+0) { clip-path: circle(46% at 50% 50%); }
#sc-pushpin pattern-grid > i:nth-child(4n+1) { clip-path: inset(8%); }
#sc-pushpin pattern-grid > i:nth-child(4n+2) { clip-path: polygon(50% 5%, 95% 95%, 5% 95%); }
#sc-pushpin pattern-grid > i:nth-child(4n+3) { clip-path: polygon(50% 5%, 95% 35%, 78% 90%, 22% 90%, 5% 35%); }

/* --- Showcase: Bridget Riley waves --- */
#sc-riley pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
}
#sc-riley pattern-grid > i {
  --idx: calc(var(--i, sibling-index()) - 1);
  --col: calc(mod(var(--idx), 40));
  aspect-ratio: 1;
  background: #111;
  transform: scaleY(calc(0.6 + sin(var(--col) * 9deg) * 0.4));
  transform-origin: center;
}
#sc-riley pattern-grid > i:nth-child(even) {
  background: #f8f5ef;
}

/* --- Showcase: Halftone dots --- */
#sc-halftone .tile { background: var(--vb-paper, #fff8e7); }
#sc-halftone pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
}
#sc-halftone pattern-grid > i {
  aspect-ratio: 1;
  background: radial-gradient(
    circle,
    var(--vb-ink, #c2185b) calc(var(--rand-0) * 50%),
    transparent calc(var(--rand-0) * 50% + 1%)
  );
}

/* --- Showcase: Emoji shower ---
 * Each emoji keeps its static random tilt + scale (from --randi-1, --rand-2)
 * and adds an animated bob/wobble via the standalone `translate` and `rotate`
 * properties, which compose with the base `transform` instead of replacing it.
 * Per-cell `animation-delay` from --rand-0 keeps each emoji on its own phase.
 */
#sc-emoji pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
}
#sc-emoji pattern-grid > .em {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  transform: rotate(calc((var(--randi-1) - 50) * 4deg))
             scale(calc(0.7 + var(--rand-2) * 0.5));
  animation: sc-emoji-shower 3.6s ease-in-out infinite;
  animation-delay: calc(var(--rand-0) * -3.6s);
}
@keyframes sc-emoji-shower {
  0%, 100% { translate: 0 -10%; rotate: -6deg; }
  50%      { translate: 0  10%; rotate:  6deg; }
}
#sc-emoji pattern-grid > .em::before { content: "🌸"; }
#sc-emoji pattern-grid > .em:nth-child(10n+1)::before { content: "⭐"; }
#sc-emoji pattern-grid > .em:nth-child(10n+2)::before { content: "🍋"; }
#sc-emoji pattern-grid > .em:nth-child(10n+3)::before { content: "🌈"; }
#sc-emoji pattern-grid > .em:nth-child(10n+4)::before { content: "🐙"; }
#sc-emoji pattern-grid > .em:nth-child(10n+5)::before { content: "🦄"; }
#sc-emoji pattern-grid > .em:nth-child(10n+6)::before { content: "🍄"; }
#sc-emoji pattern-grid > .em:nth-child(10n+7)::before { content: "🌊"; }
#sc-emoji pattern-grid > .em:nth-child(10n+8)::before { content: "🔥"; }
#sc-emoji pattern-grid > .em:nth-child(10n+9)::before { content: "🌀"; }

/* --- Showcase: Constellation ---
 * seed-context writes opacity:1 inline as anti-FOUC, so we render the star
 * on a ::before pseudo-element whose opacity isn't touched. The opacity
 * calc clamps to 0 for cells where --rand-0 < 0.88, leaving ~12% lit.
 */
#sc-stars .tile { background: var(--vb-night, #0a0a1e); }
#sc-stars pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
}
#sc-stars pattern-grid > i {
  position: relative;
  aspect-ratio: 1;
  background: transparent;
}
#sc-stars pattern-grid > i::before {
  content: "";
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--vb-star, #fff) 0%, transparent 65%);
  opacity: calc((var(--rand-0) - 0.88) * 100);
  animation: sc-stars-twinkle 4s ease-in-out infinite;
  animation-delay: calc(var(--rand-1) * -4s);
}
@keyframes sc-stars-twinkle {
  0%, 100% { transform: scale(1);   filter: brightness(1); }
  50%      { transform: scale(1.4); filter: brightness(1.6); }
}

/* --- Showcase: Clover --- */
#sc-clover .tile { background: #fff4e0; }
#sc-clover pattern-grid {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  width: 100%;
}
#sc-clover pattern-grid > i {
  grid-area: 1 / 1;
  width: 70%;
  aspect-ratio: 1;
  background: hsl(calc(var(--i, sibling-index()) * 60) 80% 55%);
  clip-path: ellipse(20% 50% at 50% 50%);
  transform: rotate(calc(var(--i, sibling-index()) * 60deg));
  mix-blend-mode: multiply;
}

/* --- Showcase: Mandala ---
 * Polar positioning via parent-relative top/left + cos()/sin() of an angle.
 * (translateY % is self-relative and would collapse all cells to the center,
 *  so we use absolute top/left in % of the parent instead.)
 */
#sc-mandala .tile { background: #0d0220; }
#sc-mandala .mandala-stack {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
}
#sc-mandala pattern-grid {
  position: absolute;
  inset: 0;
  display: block;
}
#sc-mandala pattern-grid > i {
  --idx: calc(var(--i, sibling-index()) - 1);
  --angle: calc(var(--idx) / var(--n, sibling-count()) * 360deg);
  position: absolute;
  left: calc(50% + cos(var(--angle)) * var(--r, 30%));
  top:  calc(50% + sin(var(--angle)) * var(--r, 30%));
  width: var(--sz, 6%);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: hsl(calc(var(--idx) * 30 + var(--hue-offset, 0)) 80% 62%);
  box-shadow: 0 0 10px hsl(calc(var(--idx) * 30 + var(--hue-offset, 0)) 80% 62%);
}
#sc-mandala pattern-grid:nth-of-type(1) > i { --r: 14%; --sz: 5.5%; --hue-offset:   0; }
#sc-mandala pattern-grid:nth-of-type(2) > i { --r: 28%; --sz: 5%;   --hue-offset: 120; }
#sc-mandala pattern-grid:nth-of-type(3) > i { --r: 42%; --sz: 3.5%; --hue-offset: 240; }

@media (prefers-reduced-motion: no-preference) {
  #sc-mandala .mandala-stack {
    animation: sc-mandala-spin 32s linear infinite;
  }
  @keyframes sc-mandala-spin {
    to { transform: rotate(360deg); }
  }
}

/* Hide inline filter SVGs (defs only, no visible content) */
.filter-svg {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* --- Showcase: Goo blobs --- */
#sc-goo .tile {
  background: #14002b;
  filter: url(#sc-goo-filter);
  overflow: hidden;
}
#sc-goo pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
  gap: 14px;
  padding: 14px;
  width: 100%;
  height: 100%;
}
#sc-goo pattern-grid > i {
  aspect-ratio: 1;
  border-radius: 50%;
  background: hsl(calc(var(--i, sibling-index()) * 11) 85% 60%);
}
@media (prefers-reduced-motion: no-preference) {
  #sc-goo pattern-grid > i {
    animation: sc-goo-drift 4.5s ease-in-out infinite;
    animation-delay: calc(var(--i, sibling-index()) * -90ms);
  }
  @keyframes sc-goo-drift {
    0%, 100% { translate: 0   0;   }
    25%      { translate: 30%  -10%; }
    50%      { translate: -10% 35%; }
    75%      { translate: -25% -20%; }
  }
}

/* --- Showcase: Turbulence --- */
#sc-turb .tile { background: #000; overflow: hidden; }
#sc-turb pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
  width: 100%;
  height: 100%;
  filter: url(#sc-turb-filter);
}
#sc-turb pattern-grid > i {
  aspect-ratio: 1;
  background: hsl(calc(var(--i, sibling-index()) * 7) 85% 60%);
}

/* --- Showcase: Game of Life --- */
#sc-gol .tile { background: #050a0d; }
#sc-gol pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
  gap: 1px;
  padding: 4px;
  width: 100%;
  height: 100%;
}
#sc-gol pattern-grid > i {
  aspect-ratio: 1;
  background: rgba(0, 255, 80, 0.04);
  transition: background 100ms;
}
#sc-gol pattern-grid > i.alive {
  background: #1fff80;
  box-shadow: 0 0 6px #1fff80;
}

/* --- Showcase: Mouse heatmap --- */
@property --mx { syntax: '<number>'; inherits: true; initial-value: 0.5; }
@property --my { syntax: '<number>'; inherits: true; initial-value: 0.5; }
@property --col { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --row { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --d { syntax: '<number>'; inherits: false; initial-value: 0; }

#sc-heat pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
  --mx: 0.5;
  --my: 0.5;
}
#sc-heat pattern-grid > i {
  aspect-ratio: 1;
  --idx: calc(var(--i, sibling-index()) - 1);
  --col: calc(mod(var(--idx), 20) / 20);
  --row: calc(floor(calc(var(--idx) / 20)) / 20);
  --dx: calc(var(--col) - var(--mx));
  --dy: calc(var(--row) - var(--my));
  --d: calc(sqrt(var(--dx) * var(--dx) + var(--dy) * var(--dy)));
  background: hsl(calc(var(--d) * 720deg) 75% calc(40% + var(--d) * 50%));
  transition: background 150ms;
}

/* --- Showcase: 3D cube --- */
#sc-cube .tile {
  background: #0a0014;
  display: grid;
  place-items: center;
  overflow: hidden;
}
#sc-cube .cube-perspective {
  perspective: 800px;
  width: 180px;
  height: 180px;
}
#sc-cube .cube-wrap {
  position: relative;
  width: 180px;
  height: 180px;
  transform-style: preserve-3d;
}
/* display:contents removes pattern-grid's own box so the 6 faces parent to
   .cube-wrap (a plain div). Safari won't establish a 3D rendering context on
   the custom element itself, so the cube flattened to one face there. */
#sc-cube pattern-grid {
  display: contents;
  container-type: normal;
}
#sc-cube pattern-grid > i {
  position: absolute;
  inset: 0;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  opacity: 0.85;
}
#sc-cube pattern-grid > i:nth-child(1) { transform: translateZ( 90px);                  background: #ff5470; }
#sc-cube pattern-grid > i:nth-child(2) { transform: translateZ(-90px) rotateY(180deg);  background: #00cecb; }
#sc-cube pattern-grid > i:nth-child(3) { transform: rotateY( 90deg)  translateZ( 90px); background: #ffed66; }
#sc-cube pattern-grid > i:nth-child(4) { transform: rotateY(-90deg)  translateZ( 90px); background: #ffd166; }
#sc-cube pattern-grid > i:nth-child(5) { transform: rotateX( 90deg)  translateZ( 90px); background: #b388eb; }
#sc-cube pattern-grid > i:nth-child(6) { transform: rotateX(-90deg)  translateZ( 90px); background: #80ffdb; }

@media (prefers-reduced-motion: no-preference) {
  #sc-cube .cube-wrap {
    animation: sc-cube-spin 14s linear infinite;
  }
  @keyframes sc-cube-spin {
    from { transform: rotateX(-20deg) rotateY(  0deg); }
    to   { transform: rotateX(-20deg) rotateY(360deg); }
  }
}

/* --- Showcase: Kaleidoscope --- */
#sc-kaleido .tile { background: #0a0014; overflow: hidden; }
#sc-kaleido pattern-grid {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  width: 100%;
}
#sc-kaleido pattern-grid > i {
  grid-area: 1 / 1;
  width: 100%;
  aspect-ratio: 1;
  clip-path: polygon(50% 50%, 50% 0%, 100% 0%);
  background:
    radial-gradient(circle at 50% 0%,
      hsl(50 90% 65%) 0%,
      hsl(0 80% 55%) 30%,
      hsl(280 80% 55%) 60%,
      hsl(200 90% 60%) 100%),
    conic-gradient(from 0deg,
      hsl(0 90% 60%), hsl(60 90% 60%), hsl(120 80% 60%),
      hsl(200 90% 60%), hsl(280 80% 60%), hsl(360 90% 60%));
  background-blend-mode: screen;
  transform: rotate(calc((var(--i, sibling-index()) - 1) * 30deg));
  transform-origin: 50% 50%;
}
#sc-kaleido pattern-grid > i:nth-child(even) {
  transform: rotate(calc((var(--i, sibling-index()) - 1) * 30deg)) scale(-1, 1);
}

/* --- Showcase: Sierpinski fractal (chaos game) --- */
#sc-fractal .tile { background: #0a0014; }
#sc-fractal pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
  width: 100%;
  height: 100%;
}
#sc-fractal pattern-grid > i {
  aspect-ratio: 1;
  background: transparent;
  transition: background 200ms, box-shadow 200ms;
}
#sc-fractal pattern-grid > i.hit {
  background: hsl(280 90% 65%);
  box-shadow: 0 0 4px hsl(280 90% 65% / 0.7);
}

/* --- Showcase: spiral pulse (CSS-only polar animation) --- */
#sc-swirl .tile {
  aspect-ratio: 1;
  background: #000;
  overflow: hidden;
}
#sc-swirl pattern-grid {
  --size: min(4.4cqmin, 18px);
  position: relative;
  display: block;
  width: 100%;
  /* aspect-ratio (not height:100%) gives container-type:size a definite block
     size in Firefox too, so cqmin resolves and cells aren't collapsed. */
  aspect-ratio: 1;
  container-type: size;
}
#sc-swirl pattern-grid > i {
  --sw-i: calc(var(--i, sibling-index()) - 1);
  --sw-x: calc(mod(var(--sw-i), var(--pg-cols)) - (var(--pg-cols) - 1) / 2);
  --sw-y: calc((var(--pg-cols) - 1) / 2 - round(down, var(--sw-i) / var(--pg-cols), 1));
  --sw-t: calc(var(--sw-i) / (var(--n, sibling-count()) - 1));
  --sw-hue: calc(mod(sin(var(--sw-t) * 90deg) * 3600, 1) * 360);
  --sw-dist: calc(sqrt(var(--sw-x) * var(--sw-x) + var(--sw-y) * var(--sw-y)) / sqrt(200));
  --sw-ang: calc(atan2(var(--sw-x), var(--sw-y)) / -360deg);
  --sw-delay: calc(var(--sw-dist) * 9s + var(--sw-ang) * 3s - 12s);
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) * -0.5);
  border-radius: 25%;
  background: hsl(var(--sw-hue) 100% calc(80% - var(--sw-dist) * 60%));
  translate: calc(var(--sw-x) * var(--size)) calc(var(--sw-y) * var(--size));
  animation: sc-swirl-pulse 1.5s var(--sw-delay) infinite ease-in-out alternate;
}
/* Register the delay chain so it computes eagerly. Firefox otherwise fails to
   evaluate the nested unregistered calc() (sqrt + atan2, mixed units) when it's
   substituted into the `animation` shorthand, leaving every cell at delay:0
   (no spiral wave). Typed @property forces concrete computed values. */
@property --sw-dist  { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --sw-ang   { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --sw-delay { syntax: '<time>';   inherits: false; initial-value: 0s; }
@keyframes sc-swirl-pulse {
  from { scale: 0; }
  to { scale: 0.9; }
}
@media (prefers-reduced-motion: reduce) {
  #sc-swirl pattern-grid > i { animation: none; scale: 0.85; }
}

/* --- Showcase: step sequencer --- */
#sc-step pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), minmax(0, 1fr));
  gap: 3px;
}
#sc-step pattern-grid > button {
  aspect-ratio: 1;
  border: 1px solid #444;
  background: #1a1a24;
  cursor: pointer;
  padding: 0;
  transition: background 80ms;
}
#sc-step pattern-grid > button[aria-pressed="true"] {
  background: hsl(190 80% 55%);
  border-color: hsl(190 80% 70%);
}
#sc-step pattern-grid > button.beat {
  outline: 2px solid #fff;
  outline-offset: -2px;
}
#sc-step .sc-step-controls {
  margin-top: 0.75rem;
  text-align: center;
}
#sc-step .sc-step-controls button {
  font: inherit;
  padding: 0.4rem 1rem;
  cursor: pointer;
}

/* --- Showcase: morph layout --- */
#sc-morph pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
  gap: 2px;
}
#sc-morph pattern-grid > i { aspect-ratio: 1; }
#sc-morph .sc-morph-controls { margin-top: 0.75rem; text-align: center; }
#sc-morph .sc-morph-controls button { font: inherit; padding: 0.4rem 1rem; cursor: pointer; }
::view-transition-group(*) { animation-duration: 1200ms; }

/* --- Showcase: scroll-reveal --- */
#sc-scroll pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
  gap: 2px;
}
#sc-scroll pattern-grid > i {
  --idx: var(--i, sibling-index());
  aspect-ratio: 1;
  background: hsl(calc(var(--idx) * 2.5) 70% 55%);
  animation: sc-scroll-reveal both;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
  animation-delay: calc(var(--idx) * -8ms);
}
@keyframes sc-scroll-reveal {
  from { opacity: 0; transform: scale(0.3) rotate(-20deg); }
  to   { opacity: 1; transform: none; }
}
#sc-scroll pattern-grid.replay > i {
  animation: sc-scroll-reveal 700ms both;
  animation-timeline: auto;
  animation-delay: calc(var(--idx) * 8ms);
}
#sc-scroll .sc-scroll-controls { margin-top: 0.75rem; text-align: center; }
#sc-scroll .sc-scroll-controls button { font: inherit; padding: 0.4rem 1rem; cursor: pointer; }

/* --- Showcase: anchored popovers --- */
#sc-anchor pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
  gap: 3px;
}
#sc-anchor pattern-grid > button {
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  cursor: pointer;
}
#sc-anchor [popover] {
  position: fixed;
  left: anchor(right);
  top: anchor(top);
  margin: 0 0 0 6px;
  padding: 0.35rem 0.6rem;
  font: 0.85rem/1.2 ui-monospace, monospace;
  background: #111;
  color: #fff;
  border: 1px solid #444;
  border-radius: 4px;
}

/* --- Showcase: :has() neighbor glow --- */
#sc-neighbor pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
  gap: 2px;
}
#sc-neighbor pattern-grid > i {
  aspect-ratio: 1;
  background: #2a2a3a;
  transition: background 160ms;
}
#sc-neighbor pattern-grid > i:hover,
#sc-neighbor pattern-grid > i:has(+ i:hover),
#sc-neighbor pattern-grid > i:hover + i {
  background: hsl(45 95% 60%);
}

/* --- Showcase: parametric clip shapes --- */
#sc-shape pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
  gap: 4px;
}
#sc-shape pattern-grid > i {
  --idx: var(--i, sibling-index());
  aspect-ratio: 1;
  background: hsl(calc(var(--idx) * 6) 75% 55%);
  rotate: calc(var(--idx) * 8deg);
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%,
    79% 91%, 50% 70%, 21% 91%, 32% 57%,
    2% 35%, 39% 35%
  );
  transition: rotate 600ms;
}
#sc-shape pattern-grid > i:hover { rotate: 0deg; }

/* --- Showcase: recursive grid --- */
#sc-recurse pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
  gap: 4px;
  aspect-ratio: 1;
}
#sc-recurse .sc-recurse-cell { aspect-ratio: 1; }
#sc-recurse > .tile > pattern-grid > .sc-recurse-cell:nth-of-type(5) { visibility: hidden; }
#sc-recurse .sc-recurse-cell > pattern-grid { gap: 2px; }
#sc-recurse .sc-recurse-cell > pattern-grid > i {
  aspect-ratio: 1;
  background: hsl(calc(var(--i, sibling-index()) * 25) 75% 60%);
}
#sc-recurse .sc-recurse-cell > pattern-grid > i:nth-child(5) {
  visibility: hidden;
}

/* --- Showcase: paint worklet swirl --- */
#sc-paint pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
  gap: 4px;
}
#sc-paint pattern-grid > i {
  --idx: var(--i, sibling-index());
  --hue: calc(var(--idx) * 22);
  aspect-ratio: 1;
  background: hsl(var(--hue) 60% 40%) paint(swirl);
}
/* "Not supported" notice, shown only where the paint() API is unavailable
   (Firefox, Safari). Hidden in Chrome, which renders the worklet above. */
#sc-paint .sc-no-support { display: none; }
@supports not (background: paint(id)) {
  #sc-paint seed-context { display: none; }
  #sc-paint .sc-no-support {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    padding: 1.5rem;
    text-align: center;
    border-radius: 8px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.4;
  }
}
@property --hue {
  syntax: '<number>';
  initial-value: 0;
  inherits: false;
}
@property --rand-0 {
  syntax: '<number>';
  initial-value: 0.5;
  /* Must inherit: <seed-context> writes --rand-0 on each cell, and tiles like
     Constellation read it from a pseudo-element (i::before) that has to
     inherit the cell's value. inherits:false made every such star invisible. */
  inherits: true;
}

/* --- Showcase: contribution calendar --- */
#sc-calendar .tile { aspect-ratio: 53 / 7; padding: 4px; }
#sc-calendar pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--pg-rows), 1fr);
  gap: 2px;
  width: 100%;
  height: 100%;
  --cal-low: #161b22;
  --cal-high: #39d353;
}
#sc-calendar pattern-grid > button {
  border: 0;
  padding: 0;
  border-radius: 2px;
  cursor: pointer;
  background: color-mix(in oklch, var(--cal-low), var(--cal-high) calc(var(--randi-0, 0) * 1%));
}
#sc-calendar pattern-grid > button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* --- Showcase: Lissajous point cloud --- */
#sc-lissajous .tile { aspect-ratio: 1; }
#sc-lissajous pattern-grid {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background: #0f1118;
}
#sc-lissajous pattern-grid > i {
  --idx: var(--i, sibling-index());
  --t: calc(var(--idx) / var(--pg-cols) * 6.2832);
  position: absolute;
  left: calc(50% + cos(var(--t) * 3) * 40%);
  top:  calc(50% + sin(var(--t) * 4) * 40%);
  width: 8px;
  height: 8px;
  margin: -4px;
  border-radius: 50%;
  background: hsl(calc(var(--idx) * 1.8) 75% 60%);
}

/* ============================================================ */
/* Showcase: Tributes — abstract art & 8-bit sprites             */
/* ============================================================ */

/* --- Shared sprite utilities (used by pieces 51–56, 58) --- */
.pixel-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
  image-rendering: pixelated;
  gap: 0;
  background: var(--pg-bg, #111);
}
.pixel-grid > i,
.pixel-grid > button {
  background: transparent;
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  margin: 0;
}
.pixel-grid > [data-px] { background: var(--px, transparent); }

/* --- 45. Mondrian — Composition with Red, Yellow & Blue --- */
#sc-mondrian .sc-mondrian-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 6px;
  background: #111;
  aspect-ratio: 1;
  padding: 6px;
}
#sc-mondrian .sc-mondrian-grid > [data-fill="red"]    { background: #dd2222; }
#sc-mondrian .sc-mondrian-grid > [data-fill="blue"]   { background: #1f3fbf; }
#sc-mondrian .sc-mondrian-grid > [data-fill="yellow"] { background: #f0d040; }
#sc-mondrian .sc-mondrian-grid > [data-fill="white"]  { background: #f4f0e6; }

/* --- 46. Albers — Homage to the Square --- */
#sc-albers .sc-albers-layer {
  /* No aspect-ratio on inner layers: they stretch to fill their parent's
     (padding-offset) box. aspect-ratio + grid-stretch conflict breaks the
     nesting in Firefox. Only the outer layer is squared. */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
#sc-albers .sc-albers-l1 { aspect-ratio: 1; background: #6a2818; padding: 8% 8% 14% 8%; }
#sc-albers .sc-albers-l2 { background: #b25a26; padding: 8% 8% 14% 8%; }
#sc-albers .sc-albers-l3 { background: #d77a37; padding: 8% 8% 14% 8%; }
#sc-albers .sc-albers-l4 { background: #f0c266; }

/* --- 47. Sol LeWitt — algorithmic line work --- */
#sc-lewitt pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
  background: #f4ede2;
  aspect-ratio: 1;
}
#sc-lewitt pattern-grid > i {
  aspect-ratio: 1;
  position: relative;
  background: #f4ede2;
}
#sc-lewitt pattern-grid > i::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #1a1a1a;
  clip-path: polygon(0 49%, 100% 49%, 100% 51%, 0 51%);
  rotate: calc(var(--i, sibling-index()) * 17deg);
}

/* --- 48. Kandinsky — Squares with Concentric Circles --- */
#sc-kandinsky pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
  gap: 6px;
  background: #2a2522;
  padding: 6px;
}
#sc-kandinsky pattern-grid > i {
  aspect-ratio: 1;
  background:
    radial-gradient(circle at center,
      hsl(calc(var(--rand-0) * 360) 75% 55%) 0 18%,
      transparent 19%),
    radial-gradient(circle at center,
      hsl(calc(var(--rand-1) * 360) 75% 55%) 0 30%,
      transparent 31%),
    radial-gradient(circle at center,
      hsl(calc(var(--rand-2) * 360) 75% 55%) 0 42%,
      transparent 43%),
    hsl(calc(var(--rand-0) * 360) 30% 90%);
}

/* --- 49. Ellsworth Kelly — Colors for a Large Wall --- */
#sc-kelly pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
  gap: 4px;
  background: #fcfaf4;
  padding: 4px;
}
#sc-kelly pattern-grid > i {
  aspect-ratio: 1;
  background: color-mix(in oklch,
    hsl(calc(var(--rand-0) * 360) 85% 55%),
    white calc(var(--rand-1) * 25%));
}

/* --- 50. Yayoi Kusama — infinity dots --- */
#sc-kusama pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
  gap: 0;
  background: #fff;
}
#sc-kusama pattern-grid > i {
  aspect-ratio: 1;
  background:
    radial-gradient(circle at center,
      #c00 0 calc(var(--rand-0) * 40%),
      #fff calc(var(--rand-0) * 40% + 1px) 100%);
  transition: scale 200ms;
}
#sc-kusama pattern-grid > i:hover { scale: 1.4; z-index: 2; }

/* --- 51. Space Invader (single sprite) --- */
#sc-invader pattern-grid { --pg-bg: #0a0a18; aspect-ratio: 11 / 8; }
#sc-invader [data-px="1"] { --px: #2eff2e; }

/* --- 52. Pac-Man-style chomp --- */
#sc-chomp pattern-grid { --pg-bg: #000; aspect-ratio: 1; }
#sc-chomp [data-px="1"] { --px: #ffeb00; }

/* --- 53. Hover-swap sprite --- */
#sc-hoverswap .sc-hoverswap-tile { position: relative; aspect-ratio: 1; }
#sc-hoverswap .sc-hoverswap-tile > pattern-grid {
  position: absolute;
  inset: 0;
  transition: opacity 200ms;
  --pg-bg: #1c2438;
}
#sc-hover-jump { opacity: 0; }
#sc-hoverswap .sc-hoverswap-tile:hover #sc-hover-idle { opacity: 0; }
#sc-hoverswap .sc-hoverswap-tile:hover #sc-hover-jump { opacity: 1; }
#sc-hoverswap [data-px="1"] { --px: #ff7b3d; }

/* --- 54. Sprite-sheet atlas — many small sprites at once --- */
#sc-sheet .tile { aspect-ratio: 1; padding: 4px; }
#sc-sheet .sc-sheet-atlas {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 4px;
  width: 100%;
  height: 100%;
  background: #0a0a18;
  padding: 4px;
  box-sizing: border-box;
}
#sc-sheet pattern-grid { --pg-bg: #1c2438; }
#sc-sheet .sc-hero { --pg-bg: #2a2540; }

/* per-sprite palettes */
/* H1: knight — skin / armor-blue / sword-silver */
#sc-sp-h1 [data-px="1"] { --px: #f4c290; }
#sc-sp-h1 [data-px="2"] { --px: #4a6cd4; }
#sc-sp-h1 [data-px="3"] { --px: #c8c8d0; }
/* H2: dragon — body-green / belly-tan / fire-orange */
#sc-sp-h2 [data-px="1"] { --px: #2a7d3f; }
#sc-sp-h2 [data-px="2"] { --px: #c8a060; }
#sc-sp-h2 [data-px="3"] { --px: #111; }
#sc-sp-h2 [data-px="4"] { --px: #e05a20; }
/* S1: heart — red */
#sc-sp-s1 [data-px="1"] { --px: #e54066; }
/* S2: coin — gold / highlight */
#sc-sp-s2 [data-px="1"] { --px: #c8860a; }
#sc-sp-s2 [data-px="2"] { --px: #f5d060; }
/* S3: star — yellow / outline */
#sc-sp-s3 [data-px="1"] { --px: #2a2a2a; }
#sc-sp-s3 [data-px="2"] { --px: #f5e040; }
/* S4: key — bronze / shine */
#sc-sp-s4 [data-px="1"] { --px: #b87333; }
#sc-sp-s4 [data-px="2"] { --px: #f5d080; }
/* S5: sword — silver blade / gold hilt */
#sc-sp-s5 [data-px="1"] { --px: #b0b8c8; }
#sc-sp-s5 [data-px="2"] { --px: #e8e8f0; }
#sc-sp-s5 [data-px="3"] { --px: #c8a020; }
/* S6: shield — blue / silver trim */
#sc-sp-s6 [data-px="1"] { --px: #3060c0; }
#sc-sp-s6 [data-px="2"] { --px: #c0c0d0; }
/* S7: potion — bottle-clear / liquid-cyan */
#sc-sp-s7 [data-px="1"] { --px: #a0b8d0; }
#sc-sp-s7 [data-px="2"] { --px: #20e8d0; }
/* S8: gem — purple / facet-shine */
#sc-sp-s8 [data-px="1"] { --px: #9020c0; }
#sc-sp-s8 [data-px="2"] { --px: #e080ff; }
/* S9: bomb — dark / fuse-orange / shine */
#sc-sp-s9 [data-px="1"] { --px: #303030; }
#sc-sp-s9 [data-px="2"] { --px: #f08020; }
/* S10: mushroom — red cap / white dots / stem */
#sc-sp-s10 [data-px="1"] { --px: #d02020; }
#sc-sp-s10 [data-px="2"] { --px: #f0f0f0; }
/* S11: ghost — pale / eyes */
#sc-sp-s11 [data-px="1"] { --px: #d0d8e8; }
#sc-sp-s11 [data-px="2"] { --px: #2040a0; }
/* S12: flame — orange / yellow core */
#sc-sp-s12 [data-px="1"] { --px: #e05010; }
#sc-sp-s12 [data-px="2"] { --px: #f8e020; }
/* S13: crown — gold / jewels */
#sc-sp-s13 [data-px="1"] { --px: #d4a010; }
#sc-sp-s13 [data-px="2"] { --px: #e04040; }
/* S14: skull — bone / shadow */
#sc-sp-s14 [data-px="1"] { --px: #e8e0c8; }
#sc-sp-s14 [data-px="2"] { --px: #2a2a2a; }
/* S15: arrow — green */
#sc-sp-s15 [data-px="1"] { --px: #40c040; }
/* S16: cherry — red / stem-brown */
#sc-sp-s16 [data-px="1"] { --px: #406820; }
#sc-sp-s16 [data-px="2"] { --px: #d02040; }
/* S17: invader — bright green */
#sc-sp-s17 [data-px="1"] { --px: #2eff2e; }

/* --- 55. Palette-cycle invader --- */
@property --hue { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
#sc-cycle { animation: sc-hue-cycle 4s linear infinite; }
@keyframes sc-hue-cycle { to { --hue: 360deg; } }
#sc-cycle pattern-grid { --pg-bg: #0a0a18; aspect-ratio: 11 / 8; }
#sc-cycle [data-px="1"] { --px: hsl(var(--hue) 85% 60%); }

/* --- 56. Pixel-paint scratchpad --- */
#sc-paint-pad pattern-grid { --pg-bg: #060610; aspect-ratio: 1; gap: 1px; padding: 1px; }
#sc-paint-pad [data-px="0"] { --px: #20202c; }
#sc-paint-pad [data-px="1"] { --px: #ff5470; }
#sc-paint-pad [data-px="2"] { --px: #ffd166; }
#sc-paint-pad [data-px="3"] { --px: #06d6a0; }
#sc-paint-pad button[data-px] { cursor: pointer; }
#sc-paint-pad .sc-paint-legend {
  margin-top: 0.5rem;
  text-align: center;
  font: 0.85rem/1.2 ui-monospace, monospace;
  opacity: 0.7;
}

/* --- 57. Escher — tessellating birds --- */
/* A genuine gap-free tessellation: every cell is a full square painted with a
   seamless two-tone bird tile, so birds interlock with no background showing
   (per-cell clip-path can't do this — receding edges always leave gaps). */
#sc-escher pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
  gap: 0;
  background: #1a1a24;
  aspect-ratio: 1;
}
#sc-escher pattern-grid > i {
  aspect-ratio: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Crect width='100' height='100' fill='%231a1a24'/%3E%3Cg fill='%23f5e6c8'%3E%3Cpath d='M12,31 Q34,5 50,25 Q66,5 88,31 Q66,23 50,37 Q34,23 12,31 Z'/%3E%3Cpath d='M-38,81 Q-16,55 0,75 Q16,55 38,81 Q16,73 0,87 Q-16,73 -38,81 Z'/%3E%3Cpath d='M62,81 Q84,55 100,75 Q116,55 138,81 Q116,73 100,87 Q84,73 62,81 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* --- 58. Lichtenstein — POW --- */
#sc-pow .tile { position: relative; }
#sc-pow pattern-grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols), 1fr);
  gap: 4px;
  background: #fdd835;
  aspect-ratio: 6 / 4;
}
#sc-pow pattern-grid > i,
#sc-pow pattern-grid > button {
  /* No aspect-ratio: the square .tile drives row height, and a square cell
     would then force the column width to match, overflowing 6 cols past the
     tile (the hero ended up off-tile in Chrome/Safari). Let cells fill their
     1fr column track instead. */
  min-width: 0;
  background:
    radial-gradient(circle at 50% 50%, #c00 0 30%, transparent 32%) 0 0 / 14px 14px,
    #fdd835;
  border: 0;
  padding: 0;
}
/* Only the hero cell is interactive — make that obvious. */
#sc-pow pattern-grid > i { cursor: default; }
#sc-pow .sc-pow-hero {
  cursor: pointer;
  position: relative;
  z-index: 1;
  /* Always a solid dark outline (high contrast on the yellow). The old hint
     animated the outline to solid WHITE at 50% — invisible on yellow, so in
     Chrome/Safari the marker vanished. Pulse a box-shadow ring instead. */
  outline: 3px solid #1a1a24;
  outline-offset: -3px;
  animation: sc-pow-hint 1.2s ease-in-out infinite;
}
@keyframes sc-pow-hint {
  0%, 100% { box-shadow: 0 0 0 0 rgba(26, 26, 36, 0); }
  50%      { box-shadow: 0 0 0 5px rgba(26, 26, 36, 0.4); }
}
@media (prefers-reduced-motion: reduce) {
  #sc-pow .sc-pow-hero { animation: none; }
}
#sc-pow-balloon {
  position: fixed;
  inset: auto;
  top: 0;
  left: 0;
  width: max-content;
  height: max-content;
  margin: 0;
  padding: 0.6rem 1.4rem;
  font: 900 2rem/1 "Arial Black", "Helvetica Neue", sans-serif;
  color: #ffeb3b;
  background: #d50000;
  border: 4px solid #1a1a24;
  border-radius: 8px;
  transform: rotate(-8deg);
  text-shadow: 2px 2px 0 #1a1a24;
}