/* Subtle scanlines + film grain */
.fx::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.035),
      rgba(255,255,255,.035) 1px,
      transparent 1px,
      transparent 3px
    );
  opacity: .12;
  mix-blend-mode: overlay;
  z-index: 1;
}

.fx::after{
  content:"";
  position: fixed;
  inset: -20%;
  pointer-events:none;
  background-image: url("/assets/img/noise.svg");
  background-size: 260px 260px;
  opacity: .08;
  transform: rotate(2deg);
  z-index: 1;
}

.layer{
  position: relative;
  z-index: 5;
}

/* Gallery grid */
.gallery-controls{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.pillrow{ display:flex; flex-wrap:wrap; gap: 8px; }
.pill{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  cursor:pointer;
  user-select:none;
}
.pill[aria-pressed="true"]{
  border-color: rgba(102,255,204,.35);
  box-shadow: 0 0 0 2px rgba(102,255,204,.12) inset;
}
.gallery{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--pad);
  margin-top: var(--pad);
}
@media (min-width: 740px){
  .gallery{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1040px){
  .gallery{ grid-template-columns: repeat(4, 1fr); }
}
.thumb{
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.25);
  cursor: pointer;
}
.thumb img{
  width:100%;
  display:block;
  aspect-ratio: 3/2;
  object-fit: cover;
}
.thumb .cap{
  padding: 10px 10px 12px;
  display:flex;
  gap: 10px;
  align-items:flex-start;
  justify-content:space-between;
}
.tag{
  font-family: var(--mono);
  font-size: 11px;
  opacity: .7;
}

/* Station */
.track{
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content:space-between;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  cursor:pointer;
}
.track[aria-current="true"]{
  border-color: rgba(122,162,255,.35);
  box-shadow: 0 0 0 2px rgba(122,162,255,.10) inset;
}
.range{
  appearance: none;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  outline:none;
}
.range::-webkit-slider-thumb{
  appearance:none;
  width: 16px; height: 16px; border-radius: 999px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.25);
}

/* Lab */
.codebox{
  font-family: var(--mono);
  font-size: 13px;
  white-space: pre;
  overflow:auto;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.25);
}