@layer components {
  /* ========================
     Trouble Section
     ======================== */
  .trouble {
    background-color: oklch(0.5 0.2 265);
    padding-block: 14cqi;
  }

  /* Title */
  .trouble__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3cqi;
    margin-block-end: 8cqi;
  }

  .trouble__title-sub {
    display: inline-flex;
    min-inline-size: max-content;
    align-items: center;
    justify-content: center;
    background-color: oklch(1 0 0);
    border-radius: var(--radius-full);
    padding-block: 1.25cqi;
    padding-inline: 3cqi;
    font-family: var(--font-hero);
    font-size: 3.75cqi;
    font-weight: 800;
    line-height: 1.25;
    color: var(--color-accent);
  }

  .trouble__title-main {
    font-family: var(--font-hero);
    font-size: 8cqi;
    font-weight: 800;
    line-height: 1.25;
    color: oklch(1 0 0);
    text-align: center;
  }

  /* ========================
     Speech Bubbles
     ======================== */
  .trouble__bubbles {
    display: flex;
    flex-direction: column;
    gap: 6cqi;
    padding-inline: 6cqi;
    margin-block-end: 10cqi;
  }

  .trouble__bubble {
    display: flex;
    align-items: flex-start;
    gap: 4cqi;
  }

  .trouble__bubble--right {
    flex-direction: row-reverse;
  }

  .trouble__bubble-person {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3cqi;
    flex-shrink: 0;
    inline-size: 15cqi;
  }

  .trouble__bubble-icon {
    inline-size: 15cqi;
    block-size: 15cqi;
    border-radius: var(--radius-full);
    object-fit: cover;
  }

  .trouble__bubble-name {
    font-family: var(--font-hero);
    font-size: 2.75cqi;
    font-weight: 700;
    line-height: 1.25;
    color: oklch(1 0 0);
    text-align: center;
  }

  .trouble__bubble-body {
    position: relative;
    background-color: var(--color-accent-light);
    padding: 4cqi;
    flex: 1;
    min-inline-size: 0;
    -webkit-min-logical-width: 0;
    overflow-wrap: break-word;
  }

  .trouble__bubble-body--left {
    border-start-end-radius: 2.5cqi;
    border-end-start-radius: 2.5cqi;
    border-end-end-radius: 2.5cqi;
  }

  .trouble__bubble-body--right {
    border-start-start-radius: 2.5cqi;
    border-end-start-radius: 2.5cqi;
    border-end-end-radius: 2.5cqi;
  }

  .trouble__bubble-body::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inline-size: 4cqi;
    block-size: 4cqi;
    background-color: var(--color-accent-light);
  }

  .trouble__bubble-body--left::before {
    inset-inline-start: -2cqi;
    clip-path: polygon(100% 0, 0 0, 100% 100%);
  }

  .trouble__bubble-body--right::before {
    inset-inline-end: -2cqi;
    clip-path: polygon(0 0, 100% 0, 0 100%);
  }

  .trouble__bubble-text {
    display: flex;
    flex-direction: column;
    gap: 2cqi;
  }

  .trouble__bubble-text p {
    font-family: var(--font-hero);
    font-size: 4cqi;
    font-weight: 700;
    line-height: 1.4;
    color: oklch(0.2 0 0);
    max-inline-size: none;
    text-wrap: wrap;
  }

  .trouble__bubble-text .trouble__em {
    font-weight: 800;
    font-size: 5cqi;
    color: var(--color-accent);
  }

  .trouble__bubble-text .trouble__small {
    font-size: 3.25cqi;
  }

  /* ========================
     Result
     ======================== */
  .trouble__result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3cqi;
    margin-block-end: 4cqi;
  }

  .trouble__result-text {
    font-family: var(--font-hero);
    font-size: 5.5cqi;
    font-weight: 700;
    line-height: 1.35;
    color: oklch(1 0 0);
    text-align: center;
  }

  .trouble__result-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: max-content;
    background-color: var(--color-accent);
    padding: 3cqi 5cqi;
    rotate: 4deg;
  }

  .trouble__result-box-text {
    font-family: var(--font-hero);
    font-size: 8cqi;
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-accent-light);
    text-align: center;
    white-space: nowrap;
  }

  /* Shock illustration */
  .trouble__shock {
    display: block;
    inline-size: 100%;
    block-size: auto;
    margin-block-end: 8cqi;
  }

  /* ========================
     Explanation
     ======================== */
  .trouble__explanation {
    padding-inline: 6cqi;
    margin-block-end: 10cqi;
  }

  .trouble__explanation-header {
    position: relative;
    background-color: var(--color-accent);
    border-start-start-radius: 2.5cqi;
    border-start-end-radius: 2.5cqi;
    padding-block: 2.5cqi 2cqi;
    padding-inline: 3cqi;
  }

  .trouble__caution-icon {
    position: absolute;
    inset-block-start: 3cqi;
    inset-inline-start: 4cqi;
    inline-size: 12cqi;
    block-size: auto;
  }

  .trouble__explanation-heading {
    font-family: var(--font-hero);
    font-size: 4.5cqi;
    font-weight: 800;
    line-height: 1.25;
    color: oklch(1 0 0);
    text-align: center;
  }

  .trouble__explanation-body {
    position: relative;
    background-color: oklch(1 0 0);
    border: 4px solid var(--color-accent);
    border-block-start: none;
    border-end-start-radius: 2.5cqi;
    border-end-end-radius: 2.5cqi;
    padding: 4cqi;
  }

  .trouble__cry-spacer {
    float: inline-end;
    inline-size: 0;
    block-size: 19cqi;
  }

  .trouble__cry-icon {
    float: inline-end;
    clear: inline-end;
    inline-size: 16cqi;
    block-size: auto;
    margin-inline-start: 3cqi;
  }

  .trouble__explanation-text {
    font-family: var(--font-hero);
    font-size: 4cqi;
    font-weight: 700;
    line-height: 1.6;
    color: oklch(0.2 0 0);
    max-inline-size: 100%;
  }

  .trouble__explanation-text .trouble__em-red {
    font-weight: 800;
    color: oklch(0.55 0.22 25);
  }

  /* ========================
     Check
     ======================== */
  .trouble__check {
    position: relative;
    margin-inline: 10cqi;
    padding-block: 8cqi 6cqi;
    padding-inline: 4cqi;
    background-color: oklch(0.5 0.2 265);
    border: 4px solid var(--color-accent-light);
    border-radius: 2.5cqi;
    text-align: center;
  }

  .trouble__check-badge {
    position: absolute;
    inset-block-start: -3cqi;
    inset-inline-start: 50%;
    translate: -50% 0;
    display: inline-flex;
    min-inline-size: max-content;
    align-items: center;
    gap: 1cqi;
    background-color: oklch(0.5 0.2 265);
    padding-inline: 3cqi;
    rotate: -4deg;
  }

  .trouble__check-icon {
    inline-size: 5cqi;
    block-size: 5cqi;
  }

  .trouble__check-label {
    font-family: var(--font-hero);
    font-size: 5cqi;
    font-weight: 800;
    line-height: 1;
    color: var(--color-accent-light);
  }

  .trouble__check-text {
    font-family: var(--font-hero);
    font-size: 5.5cqi;
    font-weight: 800;
    line-height: 1.25;
    color: var(--color-accent-light);
    text-align: center;
    white-space: nowrap;
  }
}