.stats-card,
.visual-card,
.technique-card,
.opportunity-card,
.model-card {
  background: var(--panel-light);
  border-radius: 1rem;
  padding: 1.1rem;
}

html.dark .stats-card,
html.dark .visual-card,
html.dark .technique-card,
html.dark .opportunity-card,
html.dark .model-card {
  background: #30204a;
}

.stats-label {
  line-height: 1.5;
}

.project-main .section-wrap > h2 {
  margin-bottom: 0.75rem;
}

.project-main .panel h2 {
  margin-bottom: 1.15rem;
}

.visuals-lead {
  max-width: none;
}

.lockers-visual-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lockers-visual-grid > .visual-card:not(.wide) .visual-note {
  min-height: 7.25rem;
}

.technique-grid,
.opportunity-grid,
.model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
}

.technique-card h3,
.opportunity-card h3,
.model-card h3,
.visual-card h3 {
  margin: 0 0 0.35rem;
  color: var(--heading-light);
  font-size: 1rem;
}

html.dark .technique-card h3,
html.dark .opportunity-card h3,
html.dark .model-card h3,
html.dark .visual-card h3 {
  color: #fff;
}

.technique-card p,
.opportunity-card p,
.model-card p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
}

.model-score {
  margin: 0.3rem 0 0;
  font-family: 'Cutive Mono', monospace;
  font-size: 0.8rem;
  opacity: 0.85;
}

@media (prefers-reduced-motion: no-preference) {
  .animated-chart .chart-trace {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
  }

  .animated-chart .chart-area,
  .animated-chart .chart-point {
    opacity: 0;
  }

  .animated-chart .chart-bar {
    opacity: 0;
    transform: scaleY(0);
    transform-box: fill-box;
    transform-origin: center bottom;
  }

  .animated-chart.is-visible .chart-trace {
    animation: chartTrace 1375ms ease-out forwards;
  }

  .animated-chart.is-visible .chart-area {
    animation: chartFadeIn 625ms ease-out 690ms forwards;
  }

  .animated-chart.is-visible .chart-point {
    animation: chartPointIn 450ms ease-out 1060ms forwards;
  }

  .animated-chart.is-visible .chart-bar {
    animation: chartBarRise 775ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--chart-delay, 0ms) forwards;
  }
}

@keyframes chartTrace {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes chartFadeIn {
  to {
    opacity: 1;
  }
}

@keyframes chartPointIn {
  from {
    opacity: 0;
    transform: scale(0.6);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes chartBarRise {
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@media (max-width: 760px) {
  .lockers-visual-grid {
    grid-template-columns: 1fr;
  }

  .lockers-visual-grid > .visual-card:not(.wide) .visual-note {
    min-height: 0;
  }
}