.confetti span:nth-child(4) {
      left: 61%;
      animation-delay: .2s;
      background: #d89516;
    }

    .confetti span:nth-child(5) {
      left: 75%;
      animation-delay: .7s;
      background: #137b72;
    }

    .confetti span:nth-child(6) {
      left: 88%;
      animation-delay: .5s;
      background: #d94b3f;
    }

    @keyframes fall {
      0% {
        opacity: 0;
        transform: translateY(-12px);
      }
      10% {
        opacity: 1;
      }
      100% {
        opacity: 0;
        transform: translateY(130px);
      }
    }

    .question-cycle-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 16px;
      padding: 0 18px 18px;
    }

    .shore {
      position: absolute;
      right: 0;
      bottom: 32%;
      left: 0;
      height: 52px;
      background: linear-gradient(180deg, rgba(219, 185, 127, 0.62), rgba(175, 128, 83, 0.5));
      clip-path: polygon(0 35%, 10% 46%, 23% 28%, 34% 42%, 50% 32%, 62% 52%, 79% 34%, 100% 47%, 100% 100%, 0 100%);
    }

    .emoji-layer {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .eco-emoji,
    .pollution-emoji,
    .facility-emoji {
      position: absolute;
      display: grid;
      min-width: 36px;
      min-height: 36px;
      place-items: center;
      border-radius: 8px;
      transform: translate(-50%, -50%);
      font-size: 28px;
      line-height: 1;
      filter: drop-shadow(0 8px 12px rgba(23, 48, 45, 0.16));
      transition: opacity 220ms ease, transform 220ms ease;
    }

    .eco-emoji small {
      position: absolute;
      top: 30px;
      padding: 2px 5px;
      border-radius: 5px;
      background: rgba(255,255,255,0.76);
      color: var(--muted);
      font-size: 10px;
      font-weight: 800;
      white-space: nowrap;
    }

    .pollution-emoji {
      background: rgba(255, 247, 245, 0.78);
    }

    .facility-emoji {
      background: rgba(237, 248, 242, 0.82);
    }

    .monitor-stack {
      display: grid;
      gap: 18px;
    }

    .metrics-panel {
      padding-bottom: 18px;
    }

    .metric-list {
      display: grid;
      gap: 14px;
      padding: 18px;
    }

    .metric-row {
      display: grid;
      gap: 8px;
    }

    .species-summary {
      padding-top: 4px;
      border-top: 1px solid var(--border);
    }

    .metric-top {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
    }

    .metric-top span:first-child {
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
    }

    .metric-top strong {
      font-size: 24px;
      line-height: 1;
    }

    .progress-track {
      height: 16px;
      overflow: hidden;
      border-radius: 999px;
      background: #e7ece9;
    }

    .progress-fill {
      width: 0%;
      height: 100%;
      border-radius: inherit;
      transition: width 260ms ease, background 260ms ease;
    }

    .progress-fill.pollution {
      background: linear-gradient(90deg, #efc266, #d94b3f);
    }

    .progress-fill.health {
      background: linear-gradient(90deg, #89c27e, #137b72);
    }

    .chart-panel {
      padding: 18px;
    }

    .bar-chart {
      display: grid;
      gap: 16px;
      margin-top: 18px;
    }

    .chart-row {
      display: grid;
      grid-template-columns: 92px minmax(0, 1fr) 48px;
      gap: 10px;
      align-items: center;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .chart-track {
      height: 34px;
      overflow: hidden;
      border-radius: 8px;
      background: #edf2ef;
    }

    .chart-bar {
      display: flex;
      width: 0%;
      height: 100%;
      align-items: center;
      justify-content: flex-end;
      padding-right: 8px;
      border-radius: inherit;
      color: #fff;
      font-size: 11px;
      font-weight: 900;
      transition: width 260ms ease;
    }

    .chart-bar.purify {
      background: var(--accent);
    }

    .chart-bar.env {
      background: var(--accent-2);
    }

    .impact-panel {
      padding: 18px;
    }

    .impact-list {
      display: grid;
      gap: 10px;
      margin-top: 14px;
    }

    .impact-item {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr);
      gap: 10px;
      align-items: start;
      padding: 10px 0;
      border-top: 1px solid var(--border);
    }

    .impact-item:first-child {
      border-top: 0;
    }

    .impact-icon {
      display: grid;
      width: 34px;
      height: 34px;
      place-items: center;
      border-radius: 8px;
      background: var(--surface-2);
      font-size: 18px;
    }

    .impact-item strong {
      display: block;
      font-size: 13px;
      line-height: 1.3;
    }

    .impact-item span {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
    }

    .activity-panel {
      margin-top: 18px;
      padding-bottom: 18px;
    }

    .activity-form {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      padding: 16px 18px 0;
    }

    .slogan-input {
      width: 100%;
      min-height: 50px;
      padding: 12px 14px;
      border: 1px solid var(--border);
      border-radius: 8px;
      outline: none;
      background: #fff;
      color: var(--ink);
      font-size: 15px;
      transition: border-color 160ms ease, box-shadow 160ms ease;
    }

    .slogan-input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 4px rgba(19, 123, 114, 0.12);
    }