.ppp-grid {
        display: grid;
        grid-template-columns: 1.05fr 1.25fr 1.05fr;
        gap: 16px;
        min-height: 0;
        align-items: stretch;
      }

      .ppp-card {
        position: relative;
        overflow: hidden;
        padding: 18px 18px 16px;
        border-radius: 20px;
        border: 1px solid rgba(0, 0, 0, 0.08);
        background: rgba(255, 255, 255, 0.88);
        box-shadow: 0 18px 46px rgba(0, 0, 0, 0.07);
      }

      .ppp-card--problem {
        background:
          radial-gradient(820px 360px at 18% 14%, rgba(233, 184, 15, 0.18), transparent 62%),
          radial-gradient(720px 320px at 84% 8%, rgba(9, 152, 168, 0.12), transparent 62%),
          rgba(255, 255, 255, 0.90);
      }

      .ppp-card--prompt {
        background:
          radial-gradient(900px 360px at 22% 18%, rgba(41, 28, 91, 0.14), transparent 62%),
          radial-gradient(820px 320px at 90% 10%, rgba(9, 152, 168, 0.10), transparent 62%),
          rgba(255, 255, 255, 0.90);
      }

      .ppp-card--result {
        background:
          radial-gradient(820px 360px at 18% 14%, rgba(18, 186, 129, 0.16), transparent 62%),
          radial-gradient(720px 320px at 88% 12%, rgba(233, 184, 15, 0.10), transparent 62%),
          rgba(255, 255, 255, 0.90);
      }

      .ppp-card__head {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 14px;
      }

      .ppp-icon {
        width: 32px;
        height: 32px;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.86);
        border: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
        color: var(--clr-teal);
        font-size: 16px;
      }

      .ppp-card__title {
        margin: 0;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        font-size: 14px;
        font-weight: 900;
        color: var(--clr-purple);
      }

      .ppp-list {
        margin: 0;
        padding-left: 18px;
        color: rgba(0, 0, 0, 0.70);
        font-size: 15px;
        line-height: 1.35;
      }

      .ppp-list li {
        margin: 10px 0;
      }

      .ppp-list strong {
        color: rgba(0, 0, 0, 0.82);
      }

      .ppp-code {
        margin: 0;
        padding: 14px 14px 12px;
        border-radius: 16px;
        border: 1px solid rgba(0, 0, 0, 0.10);
        background: rgba(255, 255, 255, 0.74);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
        font-size: 12.5px;
        line-height: 1.35;
        color: rgba(13, 18, 35, 0.86);
        max-height: 430px;
        overflow: hidden;
      }

      .ppp-code code {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        white-space: pre-wrap;
      }

      .ppp-result {
        display: grid;
        gap: 10px;
        padding: 14px 14px 12px;
        border-radius: 16px;
        border: 1px solid rgba(0, 0, 0, 0.08);
        background: rgba(255, 255, 255, 0.74);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
        color: rgba(0, 0, 0, 0.72);
        font-size: 15px;
      }

      .ppp-result__line strong {
        color: rgba(0, 0, 0, 0.86);
      }

      .ppp-tip {
        margin-top: 12px;
        padding: 11px 12px;
        border-radius: 14px;
        border: 1px solid rgba(0, 0, 0, 0.08);
        background: rgba(255, 255, 255, 0.80);
        color: rgba(0, 0, 0, 0.60);
        font-size: 13px;
        line-height: 1.3;
      }

      .ppp-footnote {
        margin-top: 8px;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.50);
      }

      @media (max-width: 1100px) {
        .ppp-grid {
          grid-template-columns: 1fr;
        }

        .ppp-code {
          max-height: none;
        }
      }