/* ==========================================================
   BELAJAREDUTECH
   PENGUKURAN - MATEMATIKA KELAS 3
========================================================== */

.measurement-grade-three-page {
    --measure3-accent: #0891b2;
    --measure3-accent-dark: #0e7490;
    --measure3-accent-soft: #ecfeff;
    --measure3-secondary: #2563eb;
    --measure3-green: #0f766e;
    --measure3-purple: #7c3aed;
}



/* ==========================================================
   HERO
========================================================== */

.measurement-three-hero {
    background:
        radial-gradient(
            circle at 85% 17%,
            rgba(8, 145, 178, 0.13),
            transparent 31%
        ),
        radial-gradient(
            circle at 13% 88%,
            rgba(37, 99, 235, 0.08),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #f7fdff,
            #ffffff
        );
}


.measurement-three-hero-card {
    min-height: 430px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 38px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--measure3-accent-dark),
            var(--measure3-secondary)
        );

    border-radius:
        var(--radius-extra-large, 28px);

    box-shadow:
        var(
            --shadow-large,
            0 30px 80px rgba(15, 23, 42, 0.18)
        );

    text-align: center;
}


.measurement-three-hero-label {
    margin-bottom: 22px;

    color:
        rgba(255, 255, 255, 0.7);

    font-size: 0.68rem;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}


.hero-measurement-equation {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 10px;

    margin-bottom: 18px;
}


.hero-measurement-equation > div {
    min-height: 120px;

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 8px;

    padding: 16px;

    background:
        rgba(255, 255, 255, 0.09);

    border:
        1px solid
        rgba(255, 255, 255, 0.13);

    border-radius:
        var(--radius-medium, 14px);
}


.hero-measurement-equation span {
    grid-column:
        1 / -1;

    color:
        rgba(255, 255, 255, 0.65);

    font-size: 0.59rem;

    text-transform: uppercase;
}


.hero-measurement-equation strong {
    font-size: 0.96rem;
}


.hero-measurement-equation small {
    color:
        rgba(255, 255, 255, 0.7);
}


.hero-duration-card {
    width: 100%;

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 10px;

    margin-bottom: 12px;
}


.hero-duration-card > div {
    padding: 14px;

    background:
        rgba(255, 255, 255, 0.09);

    border:
        1px solid
        rgba(255, 255, 255, 0.13);

    border-radius:
        var(--radius-medium, 14px);
}


.hero-duration-card span,
.hero-duration-card strong {
    display: block;
}


.hero-duration-card > div span {
    margin-bottom: 4px;

    color:
        rgba(255, 255, 255, 0.66);

    font-size: 0.58rem;
}


.hero-duration-card strong {
    font-size: 1.1rem;
}


.hero-duration-arrow {
    color:
        rgba(255, 255, 255, 0.7);

    font-weight: 900;
}


.hero-duration-result {
    width: 100%;

    padding: 14px;

    color:
        var(--measure3-accent-dark);

    background: #ffffff;

    border-radius:
        var(--radius-medium, 14px);
}


.hero-duration-result span,
.hero-duration-result strong {
    display: block;
}


.hero-duration-result span {
    margin-bottom: 4px;

    color:
        var(--color-text-muted, #64748b);

    font-size: 0.58rem;
}



/* ==========================================================
   INTRO
========================================================== */

.measurement-intro-three-visual {
    min-height: 350px;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    align-items: center;

    gap: 10px;

    padding: 30px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--measure3-green),
            var(--measure3-accent)
        );
}


.measurement-intro-three-visual > div {
    min-height: 170px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 15px;

    background:
        rgba(255, 255, 255, 0.09);

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-radius:
        var(--radius-medium, 14px);

    text-align: center;
}


.measurement-intro-icon {
    margin-bottom: 12px;

    font-size: 1.6rem;
}


.measurement-intro-three-visual strong {
    margin-bottom: 4px;
}


.measurement-intro-three-visual small {
    color:
        rgba(255, 255, 255, 0.68);

    font-size: 0.58rem;
}



/* ==========================================================
   LENGTH RELATION
========================================================== */

.length-grade-three-section {
    background:
        var(--color-background, #ffffff);
}


.unit-relation-card {
    max-width: 850px;

    margin:
        0 auto 20px;

    padding: 28px;

    background:
        var(--measure3-accent-soft);

    border:
        1px solid #cffafe;

    border-radius:
        var(--radius-extra-large, 28px);
}


.unit-relation-main {
    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 15px;
}


.unit-relation-main > div {
    min-height: 130px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 18px;

    background: #ffffff;

    border-radius:
        var(--radius-large, 20px);
}


.unit-relation-main span,
.unit-relation-main strong {
    display: block;
}


.unit-relation-main span {
    margin-bottom: 6px;

    color:
        var(--color-text-muted, #64748b);

    font-size: 0.62rem;
}


.unit-relation-main strong {
    color:
        var(--measure3-accent-dark);

    font-size: 1.8rem;
}


.unit-relation-equal {
    color:
        var(--measure3-accent);

    font-size: 1.7rem;

    font-weight: 900;
}


.unit-relation-card > p {
    margin:
        18px 0 0;

    color:
        var(--color-text-muted, #64748b);

    text-align: center;
}


.length-conversion-grid,
.mass-example-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 14px;

    max-width: 950px;

    margin-inline: auto;
}


.length-conversion-grid article,
.mass-example-grid article {
    padding: 22px;

    background:
        var(--color-background-soft, #f8fafc);

    border:
        1px solid
        var(--color-border, #e2e8f0);

    border-radius:
        var(--radius-large, 20px);
}


.length-conversion-grid span,
.length-conversion-grid strong,
.mass-example-grid span,
.mass-example-grid strong {
    display: block;
}


.length-conversion-grid span,
.mass-example-grid span {
    margin-bottom: 7px;

    color:
        var(--measure3-accent);

    font-size: 0.62rem;

    font-weight: 850;

    text-transform: uppercase;
}


.length-conversion-grid strong,
.mass-example-grid strong {
    margin-bottom: 7px;

    color:
        var(--color-text-secondary, #334155);
}


.length-conversion-grid p,
.mass-example-grid p {
    margin: 0;

    color:
        var(--color-text-muted, #64748b);

    font-size: 0.72rem;
}



/* ==========================================================
   TWO COLUMN BLOCKS
========================================================== */

.mixed-length-section,
.mixed-mass-section,
.duration-story-section {
    background:
        var(--color-background-soft, #f8fafc);
}


.mixed-length-wrapper,
.mixed-mass-wrapper,
.duration-story-wrapper {
    display: grid;

    grid-template-columns:
        minmax(0, 0.75fr)
        minmax(500px, 1.25fr);

    align-items: center;

    gap: 70px;
}


.mixed-length-content h2,
.mixed-mass-content h2,
.duration-story-content h2 {
    margin-bottom: 18px;

    font-size:
        clamp(
            2.2rem,
            4vw,
            3.5rem
        );

    letter-spacing: -0.04em;
}


.mixed-length-content p,
.mixed-mass-content p,
.duration-story-content p {
    color:
        var(--color-text-muted, #64748b);

    line-height: 1.8;
}



/* ==========================================================
   MIXED LENGTH
========================================================== */

.mixed-length-card,
.mixed-mass-card {
    padding: 28px;

    background: #ffffff;

    border:
        1px solid
        var(--color-border, #e2e8f0);

    border-radius:
        var(--radius-large, 20px);
}


.mixed-length-card > span,
.mixed-mass-card > span {
    display: block;

    margin-bottom: 7px;

    color:
        var(--measure3-accent);

    font-size: 0.62rem;

    font-weight: 850;

    text-transform: uppercase;
}


.mixed-length-value,
.mixed-mass-value {
    display: block;

    margin-bottom: 18px;

    color:
        var(--measure3-accent-dark);

    font-size: 1.7rem;
}


.mixed-length-steps,
.mixed-mass-card > div:not(
    .mixed-mass-result
) {
    display: grid;

    gap: 8px;

    margin-bottom: 15px;
}


.mixed-length-steps p,
.mixed-mass-card > div:not(
    .mixed-mass-result
) p {
    margin: 0;

    padding: 12px;

    color:
        var(--color-text-muted, #64748b);

    background:
        var(--measure3-accent-soft);

    border-radius: 9px;
}


.mixed-length-result,
.mixed-mass-result {
    padding: 15px;

    color: #ffffff;

    background:
        var(--measure3-accent-dark);

    border-radius:
        var(--radius-medium, 14px);

    text-align: center;
}



/* ==========================================================
   COMPARE
========================================================== */

.compare-measurement-section {
    background:
        var(--color-background, #ffffff);
}


.compare-measurement-card {
    max-width: 850px;

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 15px;

    margin-inline: auto;

    padding: 28px;

    background:
        var(--color-background-soft, #f8fafc);

    border:
        1px solid
        var(--color-border, #e2e8f0);

    border-radius:
        var(--radius-extra-large, 28px);
}


.compare-measurement-card > div {
    min-height: 140px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 18px;

    background: #ffffff;

    border-radius:
        var(--radius-large, 20px);

    text-align: center;
}


.compare-measurement-card span,
.compare-measurement-card strong,
.compare-measurement-card small {
    display: block;
}


.compare-measurement-card > div span {
    margin-bottom: 5px;

    color:
        var(--color-text-muted, #64748b);

    font-size: 0.61rem;
}


.compare-measurement-card > div strong {
    margin-bottom: 5px;

    color:
        var(--measure3-accent-dark);

    font-size: 1.6rem;
}


.compare-measurement-card > div small {
    color:
        var(--color-text-muted, #64748b);
}


.compare-measurement-symbol {
    color:
        var(--measure3-accent);

    font-size: 2rem;

    font-weight: 900;
}


.compare-measurement-note {
    max-width: 850px;

    margin:
        15px auto 0;

    padding: 17px;

    color:
        var(--color-text-muted, #64748b);

    background:
        var(--measure3-accent-soft);

    border-radius:
        var(--radius-medium, 14px);

    text-align: center;
}


.compare-measurement-note strong {
    display: block;

    margin-bottom: 5px;

    color:
        var(--measure3-accent-dark);
}


.compare-measurement-note p {
    margin: 0;
}



/* ==========================================================
   MASS
========================================================== */

.mass-grade-three-section {
    background:
        var(--color-background, #ffffff);
}


.mass-relation-card {
    max-width: 850px;

    margin:
        0 auto 20px;

    padding: 28px;

    background:
        #f0fdf4;

    border:
        1px solid #bbf7d0;

    border-radius:
        var(--radius-extra-large, 28px);
}


.mass-balance-visual {
    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 18px;

    margin-bottom: 18px;
}


.mass-balance-visual > div {
    min-height: 170px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 20px;

    background: #ffffff;

    border-radius:
        var(--radius-large, 20px);
}


.mass-weight-large {
    min-width: 120px;

    min-height: 100px;

    display: grid;

    place-items: center;

    color: #ffffff;

    background:
        var(--measure3-green);

    border-radius:
        50% 50% 15px 15px;

    font-weight: 900;
}


.mass-equal {
    color:
        var(--measure3-green);

    font-size: 1.7rem;

    font-weight: 900;
}


.mass-small-group {
    display: grid !important;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 8px;
}


.mass-small-group span {
    padding: 13px;

    color:
        var(--measure3-green);

    background: #dcfce7;

    border-radius: 10px;

    font-size: 0.67rem;

    font-weight: 850;
}


.mass-relation-result {
    padding: 15px;

    color: #ffffff;

    background:
        var(--measure3-green);

    border-radius:
        var(--radius-medium, 14px);

    text-align: center;
}



/* ==========================================================
   TIME
========================================================== */

.time-grade-three-section {
    background:
        var(--color-background, #ffffff);
}


.time-relation-grid {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 18px;

    max-width: 850px;

    margin-inline: auto;
}


.time-relation-grid article {
    padding: 28px;

    background:
        var(--color-background-soft, #f8fafc);

    border:
        1px solid
        var(--color-border, #e2e8f0);

    border-radius:
        var(--radius-large, 20px);

    text-align: center;
}


.time-relation-clock {
    position: relative;

    width: 180px;
    height: 180px;

    margin:
        0 auto 22px;

    background: #ffffff;

    border:
        7px solid
        var(--measure3-accent-soft);

    border-radius: 50%;

    box-shadow:
        inset 0 0 0 2px
        var(--measure3-accent);
}


.time-relation-clock > span {
    position: absolute;

    color:
        var(--color-text-secondary, #334155);

    font-size: 0.68rem;

    font-weight: 850;
}


.time-clock-12 {
    top: 8px;
    left: 50%;

    transform:
        translateX(-50%);
}


.time-clock-3 {
    right: 10px;
    top: 50%;

    transform:
        translateY(-50%);
}


.time-clock-6 {
    bottom: 8px;
    left: 50%;

    transform:
        translateX(-50%);
}


.time-clock-9 {
    left: 10px;
    top: 50%;

    transform:
        translateY(-50%);
}


.time-hour-hand,
.time-minute-hand {
    position: absolute;

    left: 50%;
    bottom: 50%;

    transform-origin:
        bottom center;

    border-radius: 999px;
}


.time-hour-hand {
    width: 6px;
    height: 50px;

    background:
        var(--measure3-purple);

    transform:
        translateX(-50%)
        rotate(0deg);
}


.time-minute-hand {
    width: 3px;
    height: 67px;

    background:
        var(--measure3-accent);

    transform:
        translateX(-50%)
        rotate(0deg);
}


.time-relation-clock b {
    position: absolute;

    width: 13px;
    height: 13px;

    left: 50%;
    top: 50%;

    background:
        var(--measure3-accent-dark);

    border-radius: 50%;

    transform:
        translate(-50%, -50%);
}


.time-relation-grid article > strong {
    display: block;

    margin-bottom: 8px;

    color:
        var(--measure3-accent-dark);
}


.time-relation-grid article > p {
    margin: 0;

    color:
        var(--color-text-muted, #64748b);

    font-size: 0.74rem;

    line-height: 1.6;
}


.half-hour-visual {
    min-height: 180px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 22px;
}


.half-hour-bar {
    width: 260px;

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 5px;
}


.half-hour-bar span {
    height: 75px;

    background:
        var(--measure3-accent);

    border-radius: 8px;
}


.half-hour-bar span:last-child {
    background:
        var(--measure3-accent-soft);

    border:
        2px solid #a5f3fc;
}



/* ==========================================================
   DURATION
========================================================== */

.duration-section {
    background:
        var(--color-background-soft, #f8fafc);
}


.duration-example-card {
    max-width: 900px;

    margin-inline: auto;

    padding: 30px;

    background: #ffffff;

    border:
        1px solid
        var(--color-border, #e2e8f0);

    border-radius:
        var(--radius-extra-large, 28px);
}


.duration-time {
    max-width: 180px;

    margin:
        0 auto 20px;

    padding: 18px;

    color: #ffffff;

    background:
        var(--measure3-accent-dark);

    border-radius:
        var(--radius-medium, 14px);

    text-align: center;
}


.duration-time span,
.duration-time strong {
    display: block;
}


.duration-time span {
    margin-bottom: 4px;

    color:
        rgba(255, 255, 255, 0.68);

    font-size: 0.6rem;
}


.duration-time strong {
    font-size: 1.4rem;
}


.duration-path {
    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 15px;

    margin-bottom: 20px;
}


.duration-path > div {
    padding: 18px;

    background:
        var(--measure3-accent-soft);

    border-radius:
        var(--radius-medium, 14px);

    text-align: center;
}


.duration-path span,
.duration-path strong {
    display: block;
}


.duration-path > div span {
    margin-bottom: 5px;

    color:
        var(--color-text-muted, #64748b);

    font-size: 0.61rem;
}


.duration-path > div strong {
    color:
        var(--measure3-accent-dark);
}


.duration-path > span {
    color:
        var(--measure3-accent);

    font-weight: 900;
}


.duration-total {
    padding: 17px;

    color: #ffffff;

    background:
        var(--measure3-green);

    border-radius:
        var(--radius-medium, 14px);

    text-align: center;
}


.duration-total span,
.duration-total strong {
    display: block;
}


.duration-total span {
    margin-bottom: 4px;

    color:
        rgba(255, 255, 255, 0.7);

    font-size: 0.61rem;
}



/* ==========================================================
   DURATION STORY
========================================================== */

.duration-story-card {
    padding: 28px;

    background: #ffffff;

    border:
        1px solid
        var(--color-border, #e2e8f0);

    border-radius:
        var(--radius-large, 20px);
}


.duration-story-label {
    display: block;

    margin-bottom: 9px;

    color:
        var(--measure3-accent);

    font-size: 0.62rem;

    font-weight: 850;

    text-transform: uppercase;
}


.duration-story-card > p {
    color:
        var(--color-text-secondary, #334155);

    line-height: 1.7;
}


.duration-story-steps {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 8px;

    margin:
        18px 0;
}


.duration-story-steps > div {
    padding: 14px;

    background:
        var(--measure3-accent-soft);

    border-radius: 10px;
}


.duration-story-steps span,
.duration-story-steps strong {
    display: block;
}


.duration-story-steps span {
    margin-bottom: 4px;

    color:
        var(--color-text-muted, #64748b);

    font-size: 0.6rem;
}


.duration-story-steps strong {
    color:
        var(--measure3-accent-dark);
}


.duration-story-result {
    padding: 15px;

    color: #ffffff;

    background:
        var(--measure3-green);

    border-radius:
        var(--radius-medium, 14px);

    text-align: center;
}



/* ==========================================================
   INTERACTIVE
========================================================== */

.measurement-three-interactive {
    color: #ffffff;

    background: #0f172a;
}


.measurement-three-interactive
.section-eyebrow {
    color: #67e8f9;
}


.measurement-three-interactive
.section-header p {
    color: #94a3b8;
}


.measurement-three-lab {
    max-width: 1000px;

    margin-inline: auto;
}


.conversion-lab-panel,
.duration-lab-panel {
    margin-bottom: 18px;

    padding: 30px;

    background:
        rgba(255, 255, 255, 0.06);

    border:
        1px solid
        rgba(255, 255, 255, 0.1);

    border-radius:
        var(--radius-extra-large, 28px);
}


.measurement-lab-heading {
    margin-bottom: 24px;

    text-align: center;
}


.measurement-lab-heading > span {
    display: block;

    margin-bottom: 5px;

    color: #67e8f9;

    font-size: 0.62rem;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}


.measurement-lab-heading h3 {
    margin-bottom: 7px;

    color: #ffffff;
}


.measurement-lab-heading p {
    margin: 0;

    color: #94a3b8;

    font-size: 0.75rem;
}



/* ==========================================================
   CONVERSION LAB
========================================================== */

.conversion-mode-selector {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 8px;

    margin-bottom: 15px;
}


.conversion-mode-button {
    padding: 14px;

    color: #cbd5e1;

    background:
        rgba(255, 255, 255, 0.06);

    border:
        1px solid
        rgba(255, 255, 255, 0.1);

    border-radius:
        var(--radius-medium, 14px);

    font-weight: 850;
}


.conversion-mode-button.active {
    color: #ffffff;

    background:
        var(--measure3-accent-dark);

    border-color:
        var(--measure3-accent);
}


.conversion-control-area {
    min-height: 230px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    margin-bottom: 12px;

    padding: 25px;

    color:
        var(--color-text-secondary, #334155);

    background: #ffffff;

    border-radius:
        var(--radius-large, 20px);
}


.conversion-control-area > span {
    margin-bottom: 8px;

    color:
        var(--color-text-muted, #64748b);

    font-size: 0.63rem;

    font-weight: 850;

    text-transform: uppercase;
}


.conversion-value-control {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 6px;
}


.conversion-value-control button {
    width: 46px;
    height: 46px;

    display: grid;

    place-items: center;

    color:
        var(--measure3-accent-dark);

    background:
        var(--measure3-accent-soft);

    border:
        1px solid #a5f3fc;

    border-radius: 10px;

    font-size: 1.2rem;

    font-weight: 900;
}


.conversion-value-control button:disabled {
    opacity: 0.35;

    cursor: not-allowed;
}


.conversion-value-control strong {
    min-width: 80px;

    color:
        var(--measure3-accent-dark);

    font-size: 3rem;

    text-align: center;
}


.conversion-control-area > small {
    color:
        var(--color-text-muted, #64748b);

    font-size: 0.8rem;

    font-weight: 850;
}


.conversion-arrow {
    margin-bottom: 12px;

    color: #67e8f9;

    text-align: center;

    font-size: 1.4rem;
}


.conversion-result-card {
    margin-bottom: 12px;

    padding: 22px;

    color:
        var(--color-text-secondary, #334155);

    background: #ffffff;

    border-radius:
        var(--radius-large, 20px);

    text-align: center;
}


.conversion-result-card span,
.conversion-result-card strong {
    display: block;
}


.conversion-result-card span {
    margin-bottom: 5px;

    color:
        var(--color-text-muted, #64748b);

    font-size: 0.61rem;

    text-transform: uppercase;
}


.conversion-result-card strong {
    margin-bottom: 7px;

    color:
        var(--measure3-accent-dark);

    font-size: 1.8rem;
}


.conversion-result-card p {
    margin: 0;

    color:
        var(--color-text-muted, #64748b);

    font-size: 0.74rem;
}


.conversion-visual {
    margin-bottom: 15px;

    padding: 20px;

    background:
        rgba(255, 255, 255, 0.06);

    border:
        1px solid
        rgba(255, 255, 255, 0.09);

    border-radius:
        var(--radius-large, 20px);
}


.conversion-visual > div {
    display: grid;

    gap: 8px;
}


.conversion-visual-bar {
    min-height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 8px 14px;

    color:
        var(--measure3-accent-dark);

    background: #cffafe;

    border-radius: 9px;

    font-size: 0.65rem;

    font-weight: 850;
}


.mass-visual-bar {
    background: #dcfce7;

    color:
        var(--measure3-green);
}


.measurement-lab-actions {
    text-align: center;
}


.measurement-three-reset {
    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.07);

    border:
        1px solid
        rgba(255, 255, 255, 0.14);
}



/* ==========================================================
   DURATION LAB
========================================================== */

.duration-lab-controls {
    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 15px;

    margin-bottom: 15px;
}


.duration-control-card {
    min-height: 220px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 22px;

    color:
        var(--color-text-secondary, #334155);

    background: #ffffff;

    border-radius:
        var(--radius-large, 20px);
}


.duration-control-card > span {
    margin-bottom: 10px;

    color:
        var(--color-text-muted, #64748b);

    font-size: 0.63rem;

    font-weight: 850;

    text-transform: uppercase;
}


.duration-control-card > strong {
    margin-bottom: 15px;

    color:
        var(--measure3-accent-dark);

    font-size: 2.3rem;
}


.duration-control-card > div {
    display: flex;

    gap: 8px;
}


.duration-control-card button {
    min-width: 58px;
    height: 42px;

    padding-inline: 10px;

    color:
        var(--measure3-accent-dark);

    background:
        var(--measure3-accent-soft);

    border:
        1px solid #a5f3fc;

    border-radius: 9px;

    font-weight: 850;
}


.duration-control-card button:disabled {
    opacity: 0.35;

    cursor: not-allowed;
}


.duration-lab-arrow {
    color: #67e8f9;

    font-size: 1.5rem;

    font-weight: 900;
}


.duration-lab-result {
    margin-bottom: 12px;

    padding: 22px;

    color:
        var(--color-text-secondary, #334155);

    background: #ffffff;

    border-radius:
        var(--radius-large, 20px);

    text-align: center;
}


.duration-lab-result span,
.duration-lab-result strong {
    display: block;
}


.duration-lab-result span {
    margin-bottom: 5px;

    color:
        var(--color-text-muted, #64748b);

    font-size: 0.61rem;

    text-transform: uppercase;
}


.duration-lab-result strong {
    margin-bottom: 7px;

    color:
        var(--measure3-green);

    font-size: 1.7rem;
}


.duration-lab-result p {
    margin: 0;

    color:
        var(--color-text-muted, #64748b);

    font-size: 0.74rem;
}


.duration-timeline {
    display: flex;

    align-items: center;

    overflow-x: auto;

    margin-bottom: 15px;

    padding: 22px;

    background:
        rgba(255, 255, 255, 0.06);

    border:
        1px solid
        rgba(255, 255, 255, 0.09);

    border-radius:
        var(--radius-large, 20px);
}


.duration-timeline-point {
    min-width: 68px;

    display: flex;
    flex-direction: column;

    align-items: center;

    color: #ffffff;
}


.duration-timeline-point span {
    width: 14px;
    height: 14px;

    display: block;

    margin-bottom: 7px;

    background: #67e8f9;

    border-radius: 50%;
}


.duration-timeline-point strong {
    font-size: 0.62rem;
}


.duration-timeline-segment {
    min-width: 45px;
    height: 3px;

    background:
        rgba(103, 232, 249, 0.55);
}



/* ==========================================================
   PRACTICE
========================================================== */

.measurement-practice-equation,
.measurement-practice-time {
    min-height: 120px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 22px;

    color:
        var(--measure3-accent-dark);

    background:
        var(--color-background-soft, #f8fafc);

    border-radius:
        var(--radius-medium, 14px);

    font-size: 1.6rem;

    font-weight: 900;
}


.measurement-practice-time {
    gap: 14px;
}


.measurement-practice-time span {
    color:
        var(--color-text-muted, #64748b);
}



/* ==========================================================
   QUIZ STATES
========================================================== */

.measurement-grade-three-page
.quiz-options button.selected {
    border-color:
        var(--measure3-accent);

    background:
        var(--measure3-accent-soft);
}


.measurement-grade-three-page
.quiz-options button.correct {
    color: #166534;

    background: #dcfce7;

    border-color: #86efac;
}


.measurement-grade-three-page
.quiz-options button.incorrect {
    color: #991b1b;

    background: #fee2e2;

    border-color: #fca5a5;
}



/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1024px) {

    .mixed-length-wrapper,
    .mixed-mass-wrapper,
    .duration-story-wrapper {
        grid-template-columns: 1fr;

        gap: 45px;
    }

}



@media (max-width: 860px) {

    .measurement-intro-three-visual {
        grid-template-columns: 1fr;
    }


    .duration-lab-controls {
        grid-template-columns: 1fr;
    }


    .duration-lab-arrow {
        transform:
            rotate(90deg);

        text-align: center;
    }

}



@media (max-width: 600px) {

    .measurement-three-hero-card {
        min-height: 390px;

        padding: 25px;
    }


    .hero-measurement-equation {
        grid-template-columns: 1fr;
    }


    .hero-duration-card {
        grid-template-columns: 1fr;
    }


    .hero-duration-arrow {
        transform:
            rotate(90deg);
    }


    .unit-relation-main {
        grid-template-columns: 1fr;
    }


    .unit-relation-equal {
        transform:
            rotate(90deg);

        text-align: center;
    }


    .length-conversion-grid,
    .mass-example-grid {
        grid-template-columns: 1fr;
    }


    .compare-measurement-card {
        grid-template-columns: 1fr;
    }


    .compare-measurement-symbol {
        transform:
            rotate(90deg);

        text-align: center;
    }


    .mass-balance-visual {
        grid-template-columns: 1fr;
    }


    .mass-equal {
        transform:
            rotate(90deg);

        text-align: center;
    }


    .time-relation-grid {
        grid-template-columns: 1fr;
    }


    .duration-path {
        grid-template-columns: 1fr;
    }


    .duration-path > span {
        transform:
            rotate(90deg);

        text-align: center;
    }


    .duration-story-steps {
        grid-template-columns: 1fr;
    }


    .conversion-lab-panel,
    .duration-lab-panel {
        padding: 18px;
    }


    .conversion-mode-selector {
        grid-template-columns: 1fr;
    }

}