#igw-container {
    max-width: 800px;
    margin: 2em auto;
    padding: 2.5rem;
    border-radius: 18px;
    background: #007ACC;
    box-shadow: 0 20px 35px rgba(31, 45, 61, 0.08);
    color: #1f2d3d;
}

.igw__intro,
.igw__content,
.igw__feedback,
.igw__result {
    animation: igwFadeIn 0.4s ease;
}

.igw__intro {
    font-size: 1.05rem;
    line-height: 1.6;
	color: #FFFFFF;
    display: grid;
    gap: 1.5rem;
    justify-items: start;
}

.igw__intro-start {
    align-self: center;
}

.igw__scale {
    margin: 3rem auto 2rem auto;
    width: min(320px, 100%);
    display: block;
}

.igw-scale {
    width: 100%;
    height: auto;
    color: #1f2d3d;
    transition: transform 0.4s ease;
}

/* Scale - new triangular pivot, beam and balls design */
.igw-scale__pillar {
    stroke-linecap: round;
}

/* Beam styling — filled beam with soft shadow and a more dynamic transform timing */
.igw-scale__beam {
    stroke-linecap: round;
    fill: #0F466A;
    filter: drop-shadow(0 8px 12px rgba(11, 23, 40, 0.35));
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Legacy plate styling kept for backward compatibility (if present) */
.igw-scale__plate {
    fill: #a3bffa;
    transition: fill 0.4s ease;
}

/* Triangle pivot for the scale */
.igw-scale__triangle {
    fill: #062940;
	stroke-linecap: round;
}

/* Group that contains the beam to pivot around the triangle */
[data-beam-group] {
    transform-origin: 200px 150px;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Balls at the ends of the beam with drop shadow */
.igw-scale__ball {
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.25));
}

/* Ball color states */
.igw-scale__ball--negative circle {
    fill: var(--color-primary);
}

.igw-scale__ball--positive circle {
    fill: #1FE4A9;
}

/* Face details used on the scale for expressions */
.igw-scale__eye {
    stroke: #1b2a3c;
    stroke-width: 4;
    fill: none;
    stroke-linecap: round;
}

.igw-scale__mouth {
    stroke: #1b2a3c;
    stroke-width: 4;
    fill: none;
    stroke-linecap: round;
}

.igw-scale__mouth--sad {
    transform-origin: 120px 140px;
}

.igw-scale__mouth--happy {
    transform-origin: 280px 140px;
}

/* Question & actions layout */
.igw__question {
    font-size: 1.25rem;
    font-weight: 600;
	color: #FFFFFF;
    margin-bottom: 1.5rem;
}

.igw__actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Buttons */
.btn-primary {
    border-radius: var(--radius-3xl) !important;
    background-color: var(--color-primary) !important;
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-secondary);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  @media (hover: hover) {
    .btn-primary:hover {
      background-color: var(--color-violet-700);
    }
  }
  .btn-secondary {
    border-radius: var(--radius-3xl) !important;
    background-color: var(--color-secondary) !important;
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white) !important;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .arrow-nav-btn {
    width: 80px;
    height: 56px;
    border-radius: 24px;
    background-color: #062940;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
  }
  .arrow-nav-btn:hover {
    background-color: #0a3a5b;
  }

/* Feedback panel */
.igw__feedback {
    background: #062940;
    border-radius: 16px;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.igw__feedback-text {
    font-size: 1.1rem;
    line-height: 1.6;
	color: #FFFFFF;
    margin-bottom: 1rem;
    margin-bottom: 1rem;
}

.igw__feedback-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.igw__result {
    margin-top: 2rem;
    background: rgba(145, 234, 228, 0.2);
    border-radius: 18px;
    padding: 2rem;
    text-align: center;
}

.igw__result-text {
    font-size: 1.15rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

@keyframes igwFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 640px) {
    #igw-container {
        padding: 1.8rem;
    }

    .igw__question {
        font-size: 1.1rem;
    }

    .igw-button {
        flex: 1 1 100%;
        text-align: center;
    }
}