/*
 * The /shaders gallery, on top of the Last Table tokens and components. Reads only --lt- tokens.
 * Each stage is a .lt-dome block, so it stays midnight in both themes: the effects are drawn for that sky.
 */
.shader-index { display: flex; flex-wrap: wrap; gap: var(--lt-space-2) var(--lt-space-4); margin: var(--lt-space-5) 0 0; padding: 0; list-style: none; }
.shader { scroll-margin-top: var(--lt-space-9); }
.shader-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 15rem;
  margin: 0 0 var(--lt-space-4);
  overflow: hidden;
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-radius-card);
  background: var(--lt-surface-1);
  color: var(--lt-text-1);
}
.shader-stage[data-stage="wide"] { aspect-ratio: 16 / 9; min-height: 0; }
.shader-stage[data-stage="chip"] { min-height: 8rem; }
.shader-stage-text { position: relative; margin: 0; font: 600 var(--lt-step-1) / 1.3 var(--lt-font-display); }
.shader-card { width: min(20rem, calc(100% - var(--lt-space-6))); overflow: hidden; }
.shader-card p { margin: 0; color: var(--lt-text-2); }
.shader-card .shader-card-title { margin: 0 0 var(--lt-space-2); color: var(--lt-text-1); font: 600 var(--lt-step-1) / 1.3 var(--lt-font-display); }
.shader-chip { padding-left: var(--lt-space-1); }
.shader-chip::before { content: none; }
.shader-dot { display: inline-block; width: 24px; height: 24px; }
.shader-meta { margin: 0 0 var(--lt-space-4); color: var(--lt-text-2); font-size: var(--lt-step--1); }
.shader-params { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--lt-space-2) var(--lt-space-5); align-items: end; margin: 0 0 var(--lt-space-4); }
.shader-param { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 var(--lt-space-2); }
.shader-param label { grid-column: 1 / -1; color: var(--lt-text-2); font-size: var(--lt-step--1); }
.shader-param input[type="range"] { width: 100%; accent-color: var(--lt-teal); }
.shader-param input[type="color"] { width: 48px; height: 32px; padding: 0; border: 1px solid var(--lt-line-strong); border-radius: var(--lt-radius-control); background: none; }
.shader-param output { min-width: 48px; color: var(--lt-text-1); font: var(--lt-step--1) / 1.6 var(--lt-font-mono); text-align: right; }
.shader-params .lt-btn { justify-self: start; }