/* =========================================================
   COLLEGE ENGLISH HTML
   MASTER THEME
   ========================================================= */


/* ---------- Color System ---------- */

:root {

    --navy: #071426;
    --blue: #1E3A8A;
    --blue-light: #38BDF8;

    --teal: #14B8A6;

    --orange: #F59E0B;

    --white: #FFFFFF;

    --text-soft: #CBD5E1;

}


/* =========================================================
   GLOBAL
   ========================================================= */

body {
    margin: 0;
    background: #071426;
}


.reveal {

    font-family:
        Inter,
        "SF Pro Display",
        "Segoe UI",
        Arial,
        sans-serif;

}


.reveal .slides {

    text-align: left;

    width: 100%;

    height: 100%;

}


/* Keep every top-level course page on the Reveal 16:9 stage. */

.reveal .slides > section {

    box-sizing: border-box;

    width: 100%;

    height: 100%;

}


/* Remove some default Reveal styling */

.reveal h1,
.reveal h2,
.reveal h3,
.reveal p {

    margin-top: 0;

}



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

.hero-slide {

    position: relative;

    width: 100%;

    height: 100%;

    overflow: hidden;

    color: white;

    background:

        linear-gradient(
            115deg,
            rgba(4, 15, 32, .96) 0%,
            rgba(8, 35, 75, .84) 48%,
            rgba(4, 15, 32, .68) 100%
        ),

        url("../assets/images/cover-bg.jpg");

    background-size: cover;

    background-position: center;

}


/* subtle dark vignette */

.hero-slide::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:

        radial-gradient(
            circle at center,
            transparent 20%,
            rgba(0, 0, 0, .28) 100%
        );

    z-index: 2;

}



/* =========================================================
   MAIN CONTENT
   ========================================================= */

.hero-content {

    position: absolute;

    z-index: 10;

    top: 50%;

    left: 7.5%;

    transform: translateY(-50%);

    width: 64%;

}



/* Course label */

.course-label {

    display: inline-block;

    padding: 8px 16px;

    border: 1px solid rgba(255,255,255,.22);

    border-radius: 50px;

    background: rgba(255,255,255,.08);

    backdrop-filter: blur(10px);

    color: #BAE6FD;

    font-size: 18px;

    font-weight: 700;

    letter-spacing: 3px;

    margin-bottom: 26px;

}



/* UNIT NUMBER */

.unit-number {

    color: #5EEAD4;

    font-size: 22px;

    font-weight: 700;

    letter-spacing: 5px;

    margin-bottom: 13px;

}



/* Main Title */

.reveal .hero-title {

    color: white;

    font-size: 64px;

    font-weight: 760;

    line-height: 1.08;

    letter-spacing: -2px;

    margin: 0;

    text-transform: none;

    text-shadow:

        0 10px 40px
        rgba(0,0,0,.35);

}



/* Gradient title highlight */

.hero-title span {

    background:

        linear-gradient(
            90deg,
            #FFFFFF,
            #7DD3FC,
            #5EEAD4
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}


.translation-trigger {

    cursor: pointer;

    transition:
        color .2s ease,
        text-shadow .2s ease;

}


.translation-trigger:hover {

    color: #E0F2FE;

    text-shadow:
        0 0 20px
        rgba(125,211,252,.32);

}


.translation-trigger:focus-visible {

    outline: 2px solid rgba(125,211,252,.78);

    outline-offset: 8px;

}


.translation-content {

    display: none;

    margin: 0;

    color: #BAE6FD;

    font-weight: 500;

    line-height: 1.45;

}


.translation-content.is-visible {

    display: block;

    animation: translationReveal .3s ease both;

}


.title-translation {

    margin-top: 10px;

    font-size: 24px;

}


.subtitle-translation {

    margin-top: 6px;

    font-size: 20px;

}


@keyframes translationReveal {

    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}



/* Divider */

.hero-divider {

    width: 78px;

    height: 4px;

    border-radius: 10px;

    margin:

        28px 0
        25px 0;

    background:

        linear-gradient(
            90deg,
            #38BDF8,
            #14B8A6
        );

}



/* Subtitle */

.reveal .hero-subtitle {

    max-width: 650px;

    color: #DDE8F5;

    font-size: 25px;

    line-height: 1.65;

    font-weight: 400;

}



/* =========================================================
   START BUTTON
   ========================================================= */

.start-button {

    display: inline-flex;

    align-items: center;

    gap: 18px;

    margin-top: 28px;

    padding: 15px 26px;

    border:

        1px solid
        rgba(255,255,255,.25);

    border-radius: 50px;

    background:

        linear-gradient(
            100deg,
            #14B8A6,
            #0284C7
        );

    color: white;

    font-size: 19px;

    font-weight: 650;

    letter-spacing: .3px;

    cursor: pointer;

    box-shadow:

        0 12px 35px
        rgba(20,184,166,.28);

    transition:

        transform .25s ease,
        box-shadow .25s ease,
        filter .25s ease;

}


/* hover */

.start-button:hover {

    transform:

        translateY(-3px)
        scale(1.03);

    box-shadow:

        0 18px 45px
        rgba(56,189,248,.38);

    filter: brightness(1.08);

}


.button-arrow {

    font-size: 23px;

    transition: transform .3s ease;

}


.start-button:hover .button-arrow {

    transform: translateX(6px);

}



/* =========================================================
   FLOATING ICONS
   ========================================================= */

.floating-icon {

    position: absolute;

    z-index: 5;

    opacity: .22;

    filter:

        brightness(0)
        invert(1);

    pointer-events: none;

}


.network-icon {

    width: 145px;

    right: 10%;

    top: 16%;

    animation:

        floatingOne
        7s
        ease-in-out
        infinite;

}


.device-icon {

    width: 105px;

    right: 18%;

    bottom: 16%;

    animation:

        floatingTwo
        8s
        ease-in-out
        infinite;

}



/* floating movement */

@keyframes floatingOne {

    0%, 100% {
        transform:
            translateY(0)
            rotate(-3deg);
    }

    50% {
        transform:
            translateY(-22px)
            rotate(3deg);
    }

}


@keyframes floatingTwo {

    0%, 100% {
        transform:
            translateY(0)
            rotate(3deg);
    }

    50% {
        transform:
            translateY(18px)
            rotate(-2deg);
    }

}



/* =========================================================
   GLOW
   ========================================================= */

.hero-glow {

    position: absolute;

    pointer-events: none;

    z-index: 1;

    border-radius: 50%;

    background: radial-gradient(
        circle at center,
        rgba(74, 206, 255, .20) 0%,
        rgba(47, 156, 255, .11) 32%,
        rgba(18, 92, 189, .04) 52%,
        transparent 72%
    );

    animation:

        glowFloat
        10s
        ease-in-out
        infinite;

}


.glow-one {

    width: 620px;

    height: 620px;

    right: -170px;

    top: -160px;

}


.glow-two {

    width: 500px;

    height: 500px;

    left: -240px;

    bottom: -230px;

    background: radial-gradient(
        circle at center,
        rgba(49, 190, 255, .16) 0%,
        rgba(22, 125, 238, .08) 34%,
        rgba(12, 74, 166, .03) 55%,
        transparent 72%
    );

    animation-delay: -4s;

}


@keyframes glowFloat {

    0%,100% {

        transform:
            translate(0,0)
            scale(1);

    }

    50% {

        transform:
            translate(-20px,20px)
            scale(1.08);

    }

}



/* =========================================================
   PARTICLES
   ========================================================= */

.particle-field {

    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

}


.particle {

    position: absolute;

    width: 3px;

    height: 3px;

    background: #7DD3FC;

    border-radius: 50%;

    opacity: .35;

    box-shadow:

        0 0 8px
        rgba(125,211,252,.8);

    animation:

        particleRise
        linear
        infinite;

}


@keyframes particleRise {

    from {

        transform:
            translateY(50px)
            scale(.7);

        opacity: 0;

    }

    15% {
        opacity: .45;
    }

    80% {
        opacity: .25;
    }

    to {

        transform:
            translateY(-800px)
            scale(1.3);

        opacity: 0;

    }

}



/* =========================================================
   FOOTER
   ========================================================= */

.hero-footer {

    position: absolute;

    left: 9%;

    bottom: 5%;

    z-index: 10;

    display: flex;

    align-items: center;

    gap: 12px;

    color:

        rgba(255,255,255,.55);

    font-size: 15px;

    letter-spacing: 1px;

}


.footer-dot {

    width: 4px;

    height: 4px;

    border-radius: 50%;

    background: #14B8A6;

}



/* =========================================================
   NAVIGATION HINT
   ========================================================= */

.navigation-hint {

    position: absolute;

    right: 5%;

    bottom: 5%;

    z-index: 10;

    display: flex;

    align-items: center;

    gap: 9px;

    color:

        rgba(255,255,255,.55);

    font-size: 15px;

}


.key {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 27px;

    height: 27px;

    border-radius: 7px;

    background:

        rgba(255,255,255,.12);

    border:

        1px solid
        rgba(255,255,255,.16);

}



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

.hero-content > * {

    opacity: 0;

    transform:
        translateY(25px);

    animation:

        introFade
        .8s
        ease
        forwards;

}


.course-label {
    animation-delay: .15s;
}

.unit-number {
    animation-delay: .30s;
}

.hero-title {
    animation-delay: .45s;
}

.hero-divider {
    animation-delay: .65s;
}

.hero-subtitle {
    animation-delay: .80s;
}

.start-button {
    animation-delay: 1s;
}


@keyframes introFade {

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}



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

@media (max-width: 900px) {

    .hero-content {

        width: 78%;

        left: 8%;

    }


    .reveal .hero-title {

        font-size: 48px;

    }


    .reveal .hero-subtitle {

        font-size: 21px;

    }


    .title-translation {

        font-size: 21px;

    }


    .subtitle-translation {

        font-size: 18px;

    }


    .floating-icon {

        opacity: .12;

    }

}


/* =========================================================
   COURSE NAVIGATION
========================================================= */

.course-nav {
    position: fixed;
    right: 28px;
    bottom: 24px;
    z-index: 100;
    display: flex;
    gap: 8px;
}

.course-nav button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 8px;
    background: rgba(15, 47, 99, .88);
    box-shadow: 0 8px 20px rgba(15, 23, 42, .20);
    color: white;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease;
}

.course-nav button:hover {
    background: #0F766E;
    transform: translateY(-2px);
}

.course-nav button:focus-visible {
    outline: 2px solid #5EEAD4;
    outline-offset: 3px;
}

@media (max-width: 900px) {
    .course-nav {
        right: 18px;
        bottom: 16px;
    }
}


/* =========================================================
   PAGE 3 · COMMUNICATION TIMELINE REFINEMENT
========================================================= */

.communication-timeline-slide {
    padding: 42px 72px;
    overflow: hidden;
}

.communication-timeline-slide .timeline-game {
    margin-top: 18px;
}

.communication-timeline-slide .timeline-items {
    gap: 16px;
    margin-bottom: 22px;
}

.communication-timeline-slide .timeline-card {
    min-height: 74px;
    padding: 14px 12px;
}

.communication-timeline-slide .timeline-card strong {
    font-size: 20px;
    line-height: 1.1;
    margin-bottom: 5px;
}

.communication-timeline-slide .drop-zone {
    width: 145px;
    min-height: 104px;
    padding: 10px;
}

.communication-timeline-slide .year {
    font-size: 19px;
    line-height: 1.1;
}

.communication-timeline-slide .timeline-line {
    min-width: 35px;
}

.communication-timeline-slide .timeline-controls {
    margin-top: 18px;
}

.timeline-reflection {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.reflection-question,
.device-vocabulary {
    box-sizing: border-box;
    min-height: 66px;
    margin: 0;
    padding: 14px 18px;
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 8px;
    background: rgba(255, 255, 255, .84);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
    color: #334155;
    font-size: 19px;
    font-weight: 650;
    line-height: 1.28;
}

.device-vocabulary {
    color: #0F766E;
    text-align: center;
}

.device-vocabulary .translation-trigger {
    display: inline-block;
    font-size: 23px;
    font-weight: 760;
}

.device-vocabulary .translation {
    margin-top: 5px;
    color: #0F766E;
    font-size: 16px;
    font-weight: 650;
}


/* =========================================================
   PAGE 4 · DEVICES TO COMMUNICATION
========================================================= */

.communication-bridge-slide {
    padding: 76px 86px;
    overflow: hidden;
}

.communication-bridge-slide .section-tag {
    margin-bottom: 18px;
}

.reveal .communication-bridge-slide .section-title {
    max-width: 860px;
    font-size: 50px;
    line-height: 1.12;
}

.communication-dimensions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 62px;
}

.communication-dimension {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 128px;
    padding: 18px;
    border: 1px solid rgba(14, 116, 144, .16);
    border-radius: 8px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
    color: #0F3D62;
    font-size: 25px;
    font-weight: 760;
    text-align: center;
}

.communication-dimension:nth-child(2n) {
    color: #0F766E;
    background: rgba(240, 253, 250, .88);
}

.communication-bridge-question {
    max-width: 790px;
    margin: 54px auto 0;
    padding: 22px 30px;
    border-top: 4px solid #14B8A6;
    border-radius: 8px;
    background: #0F2F63;
    box-shadow: 0 16px 36px rgba(15, 47, 99, .18);
    color: white;
    font-size: 27px;
    font-weight: 680;
    line-height: 1.28;
    text-align: center;
}

@media (max-width: 900px) {
    .communication-timeline-slide,
    .communication-bridge-slide {
        padding-right: 48px;
        padding-left: 48px;
    }

    .communication-timeline-slide .drop-zone {
        width: 120px;
    }

    .communication-dimensions {
        gap: 12px;
        margin-top: 42px;
    }

    .communication-dimension {
        min-height: 108px;
        font-size: 21px;
    }
}

/* =========================================================
   PAGE 2 · LEARNING OBJECTIVES
========================================================= */

.objectives-slide {

    box-sizing: border-box;

    width: 100%;
    height: 100%;

    padding: 70px 90px;

    color: #0F172A;

    background:
        radial-gradient(
            circle at 92% 8%,
            rgba(56,189,248,.16),
            transparent 30%
        ),
        radial-gradient(
            circle at 5% 95%,
            rgba(20,184,166,.12),
            transparent 30%
        ),
        #F8FAFC;

}


/* small top label */

.section-tag {

    display: inline-block;

    padding: 8px 15px;

    border-radius: 30px;

    color: #0F766E;

    background: rgba(20,184,166,.10);

    font-size: 14px;

    font-weight: 750;

    letter-spacing: 2.5px;

    margin-bottom: 18px;

}


/* main heading */

.reveal .section-title {

    margin: 0;

    color: #0F172A;

    font-size: 52px;

    font-weight: 780;

    letter-spacing: -1.5px;

    text-transform: none;

}


/* subtitle */

.reveal .section-subtitle {

    margin-top: 12px;

    color: #64748B;

    font-size: 21px;

}


/* two-card layout */

.objective-grid {

    display: grid;

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

    gap: 32px;

    margin-top: 45px;

}


/* objective card */

.objective-card {

    position: relative;

    min-height: 300px;

    padding: 38px;

    overflow: hidden;

    border-radius: 28px;

    border: 1px solid rgba(148,163,184,.18);

    background: rgba(255,255,255,.88);

    box-shadow:
        0 18px 55px
        rgba(15,23,42,.08);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;

}


/* hover effect */

.objective-card:hover {

    transform: translateY(-8px);

    border-color: rgba(20,184,166,.35);

    box-shadow:
        0 24px 70px
        rgba(30,58,138,.14);

}


/* decorative number */

.objective-number {

    position: absolute;

    top: 23px;
    right: 28px;

    color: rgba(30,58,138,.08);

    font-size: 54px;

    font-weight: 850;

}


/* icon */

.objective-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 66px;
    height: 66px;

    margin-bottom: 28px;

    border-radius: 20px;

    color: white;

    font-size: 26px;

    font-weight: 800;

    background:
        linear-gradient(
            135deg,
            #1E3A8A,
            #14B8A6
        );

    box-shadow:
        0 12px 28px
        rgba(20,184,166,.20);

}


/* card title */

.reveal .objective-card h3 {

    margin: 0 0 15px 0;

    color: #0F172A;

    font-size: 27px;

    font-weight: 740;

    text-transform: none;

}


/* card paragraph */

.reveal .objective-card p {

    margin: 0;

    color: #475569;

    font-size: 18px;

    line-height: 1.6;

}


/* Chinese objective */

.objective-cn {

    margin-top: 23px;

    padding-top: 18px;

    border-top:
        1px solid
        rgba(148,163,184,.20);

    color: #0F766E;

    font-size: 16px;

    font-weight: 650;

}


/* learning route */

.learning-route {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 16px;

    margin-top: 42px;

    color: #475569;

    font-size: 16px;

    font-weight: 650;

}


.learning-route span:not(.route-arrow) {

    padding: 9px 16px;

    border-radius: 20px;

    background: white;

    box-shadow:
        0 6px 18px
        rgba(15,23,42,.06);

}


.route-arrow {

    color: #14B8A6;

    font-size: 20px;

}


/* responsive */

@media (max-width: 900px) {

    .objectives-slide {
        padding: 55px;
    }

    .objective-grid {
        grid-template-columns: 1fr;
    }

}


/* Output-to-input roadmap */

.objectives-slide {

    padding: 42px 72px;

    overflow: hidden;

}


.objectives-slide .section-tag {

    margin-bottom: 9px;

}


.reveal .objectives-title {

    font-size: 46px;

    line-height: 1.05;

}


.roadmap-section-heading {

    display: flex;

    align-items: baseline;

    gap: 14px;

    margin-top: 18px;

}


.roadmap-section-heading > span {

    color: #0F766E;

    font-size: 15px;

    font-weight: 800;

    letter-spacing: 2.2px;

}


.roadmap-section-heading p {

    margin: 0;

    color: #334155;

    font-size: 21px;

}


.roadmap-section-heading strong {

    color: #0F766E;

}


.roadmap-output-heading {

    margin-top: 16px;

}


.roadmap-output-grid,
.roadmap-input-grid {

    display: grid;

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

    gap: 18px;

    margin-top: 10px;

}


.roadmap-output-card {

    min-height: 144px;

    padding: 20px 24px;

    border: 1px solid rgba(14, 116, 144, .16);

    border-radius: 8px;

    color: white;

    background:
        linear-gradient(125deg, #0F2F63, #0B5E78);

    box-shadow: 0 14px 30px rgba(15, 47, 99, .16);

}


.roadmap-card-kicker {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #B8F4EE;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 1.6px;

}


.roadmap-number {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 28px;

    height: 28px;

    border: 1px solid rgba(184, 244, 238, .45);

    border-radius: 50%;

    font-size: 13px;

}


.reveal .roadmap-output-card h3 {

    margin: 11px 0 9px;

    color: white;

    font-size: 23px;

    font-weight: 720;

    line-height: 1.18;

    text-transform: none;

}


.roadmap-question {

    margin: 0 0 8px;

    color: #D7F7F3;

    font-size: 15px;

    line-height: 1.3;

}


.roadmap-action {

    margin: 0;

    color: #FFFFFF;

    font-size: 16px;

    font-weight: 600;

    line-height: 1.35;

}


.roadmap-action span {

    color: #5EEAD4;

}


.roadmap-bridge {

    margin: 13px 0 0;

    color: #0F766E;

    font-size: 17px;

    font-weight: 700;

    text-align: center;

}


.roadmap-bridge::before,
.roadmap-bridge::after {

    display: inline-block;

    width: 52px;

    height: 1px;

    margin: 0 12px 5px;

    background: rgba(15, 118, 110, .35);

    content: "";

}


.roadmap-input-heading {

    margin-top: 13px;

}


.roadmap-input-card {

    min-height: 119px;

    padding: 16px 22px;

    border: 1px solid rgba(148, 163, 184, .24);

    border-radius: 8px;

    background: rgba(255, 255, 255, .86);

    box-shadow: 0 8px 22px rgba(15, 23, 42, .05);

}


.reveal .roadmap-input-card h3 {

    margin: 0 0 9px;

    color: #0F3D62;

    font-size: 22px;

    font-weight: 760;

    text-transform: none;

}


.roadmap-input-card dl {

    display: grid;

    gap: 5px;

    margin: 0;

}


.roadmap-input-card dl div {

    display: grid;

    grid-template-columns: 132px minmax(0, 1fr);

    gap: 10px;

}


.roadmap-input-card dt {

    color: #0F766E;

    font-size: 15px;

    font-weight: 750;

}


.roadmap-input-card dd {

    margin: 0;

    color: #475569;

    font-size: 15px;

    line-height: 1.3;

}


@media (max-width: 900px) {

    .objectives-slide {

        padding: 38px 48px;

    }


    .reveal .objectives-title {

        font-size: 40px;

    }


    .roadmap-output-card {

        min-height: 138px;

        padding: 18px;

    }


    .reveal .roadmap-output-card h3 {

        font-size: 20px;

    }


    .roadmap-input-card dl div {

        grid-template-columns: 110px minmax(0, 1fr);

    }

}

/* =========================================================
   PAGE 3 · TIMELINE GAME
========================================================= */

.timeline-slide {

    box-sizing: border-box;

    width: 100%;
    height: 100%;

    padding: 65px 80px;

    color: #0F172A;

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(56,189,248,.14),
            transparent 28%
        ),
        #F8FAFC;
}


.timeline-game {
    margin-top: 35px;
}


.timeline-items {

    display: grid;

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

    gap: 20px;

    margin-bottom: 55px;
}


.timeline-card {

    padding: 20px 18px;

    border-radius: 18px;

    background: white;

    border:
        1px solid
        rgba(148,163,184,.20);

    box-shadow:
        0 10px 30px
        rgba(15,23,42,.08);

    cursor: grab;

    text-align: center;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.timeline-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 16px 38px
        rgba(30,58,138,.14);
}


.timeline-card.dragging {

    opacity: .45;

    transform: scale(.96);
}


.timeline-card strong {

    display: block;

    color: #1E3A8A;

    font-size: 22px;

    margin-bottom: 8px;
}


.timeline-card span {

    display: block;

    color: #64748B;

    font-size: 15px;
}


/* timeline */

.timeline-track {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0;
}


.timeline-line {

    flex: 1;

    height: 4px;

    min-width: 55px;

    background:
        linear-gradient(
            90deg,
            #CBD5E1,
            #94A3B8
        );
}


.drop-zone {

    width: 155px;

    min-height: 125px;

    padding: 15px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    border-radius: 20px;

    border:
        2px dashed
        #94A3B8;

    background:
        rgba(255,255,255,.72);

    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease;
}


.drop-zone.drag-over {

    border-color: #14B8A6;

    background:
        rgba(20,184,166,.08);

    transform: scale(1.04);
}


.drop-zone.correct {

    border:
        2px solid
        #22C55E;

    background:
        rgba(34,197,94,.10);
}


.drop-zone.wrong {

    border:
        2px solid
        #EF4444;

    background:
        rgba(239,68,68,.08);
}


.year {

    color: #0F172A;

    font-size: 24px;

    font-weight: 800;

    margin-bottom: 8px;
}


.drop-label {

    color: #94A3B8;

    font-size: 14px;
}


.drop-zone .timeline-card {

    width: 100%;

    padding: 10px;

    box-shadow: none;

    cursor: default;
}


.drop-zone .timeline-card strong {
    font-size: 17px;
}


.drop-zone .timeline-card span {
    font-size: 12px;
}


/* controls */

.timeline-controls {

    margin-top: 40px;

    display: flex;

    justify-content: flex-end;

    align-items: center;

    gap: 18px;
}


.score-box {

    padding: 12px 20px;

    border-radius: 30px;

    background: white;

    color: #334155;

    font-size: 17px;

    font-weight: 700;

    box-shadow:
        0 8px 25px
        rgba(15,23,42,.07);
}


#timelineScore {
    color: #14B8A6;
}


.secondary-button {

    padding: 12px 22px;

    border: none;

    border-radius: 30px;

    background: #1E3A8A;

    color: white;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform .2s ease,
        background .2s ease;
}


.secondary-button:hover {

    transform: translateY(-2px);

    background: #152E75;
}

/* =========================================================
   PAGE 4 · TIMELINE FEEDBACK
========================================================= */

.timeline-feedback-slide {

    box-sizing: border-box;

    width: 100%;
    height: 100%;

    padding: 62px 72px;

    color: #0F172A;

    background:
        radial-gradient(
            circle at 92% 12%,
            rgba(20,184,166,.12),
            transparent 28%
        ),
        radial-gradient(
            circle at 8% 90%,
            rgba(56,189,248,.12),
            transparent 28%
        ),
        #F8FAFC;
}


.history-timeline {

    position: relative;

    display: grid;

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

    gap: 24px;

    margin-top: 58px;

}


/* horizontal line */

.history-timeline::before {

    content: "";

    position: absolute;

    top: 49px;

    left: 10%;

    right: 10%;

    height: 4px;

    z-index: 0;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #1E3A8A,
            #38BDF8,
            #14B8A6
        );
}


.history-item {

    position: relative;

    z-index: 2;

    text-align: center;

}


.history-year {

    color: #1E3A8A;

    font-size: 21px;

    font-weight: 800;

    margin-bottom: 13px;

}


.history-dot {

    width: 18px;

    height: 18px;

    margin: 0 auto 25px auto;

    border-radius: 50%;

    background: white;

    border: 5px solid #14B8A6;

    box-shadow:
        0 0 0 6px
        rgba(20,184,166,.12);

}


.history-card {

    min-height: 280px;

    padding: 28px 20px;

    box-sizing: border-box;

    border-radius: 24px;

    background: rgba(255,255,255,.92);

    border:
        1px solid
        rgba(148,163,184,.18);

    box-shadow:
        0 16px 45px
        rgba(15,23,42,.08);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.history-card:hover {

    transform: translateY(-7px);

    box-shadow:
        0 22px 55px
        rgba(30,58,138,.14);
}


.history-icon {

    font-size: 38px;

    margin-bottom: 16px;

}


.reveal .history-card h3 {

    margin: 0;

    color: #0F172A;

    font-size: 24px;

    font-weight: 760;

    text-transform: none;

}


.history-cn {

    margin-top: 7px !important;

    color: #0F766E !important;

    font-size: 15px !important;

    font-weight: 650;

}


.history-note {

    margin-top: 18px !important;

    color: #64748B !important;

    font-size: 15px !important;

    line-height: 1.55 !important;

}


.timeline-takeaway {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 18px;

    width: fit-content;

    margin: 42px auto 0 auto;

    padding: 14px 24px;

    border-radius: 40px;

    color: #334155;

    background: white;

    box-shadow:
        0 10px 30px
        rgba(15,23,42,.07);

    font-size: 17px;

    font-weight: 650;

}


.takeaway-label {

    padding: 6px 12px;

    border-radius: 20px;

    color: white;

    background:
        linear-gradient(
            90deg,
            #1E3A8A,
            #14B8A6
        );

    font-size: 12px;

    letter-spacing: 1.5px;

    font-weight: 800;

}


@media (max-width: 900px) {

    .history-timeline {

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

    }

    .history-timeline::before {
        display: none;
    }

}

/* =========================================================
   PAGE 5 · DISCUSSION
========================================================= */

.discussion-slide {

    box-sizing: border-box;

    width: 100%;
    height: 100%;

    padding: 58px 72px;

    color: #0F172A;

    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(20,184,166,.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 85%,
            rgba(245,158,11,.10),
            transparent 28%
        ),
        #F8FAFC;
}


.discussion-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 30px;

    margin-top: 36px;
}


.discussion-panel {

    min-height: 250px;

    padding: 30px;

    box-sizing: border-box;

    border-radius: 26px;

    background: rgba(255,255,255,.92);

    border:
        1px solid
        rgba(148,163,184,.18);

    box-shadow:
        0 16px 45px
        rgba(15,23,42,.08);
}


.benefits-panel {

    border-top:
        5px solid
        #14B8A6;
}


.problems-panel {

    border-top:
        5px solid
        #F59E0B;
}


.discussion-panel-header {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 24px;
}


.discussion-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 42px;

    height: 42px;

    border-radius: 13px;

    color: white;

    font-size: 25px;

    font-weight: 800;

    background:
        linear-gradient(
            135deg,
            #1E3A8A,
            #14B8A6
        );
}


.problems-panel .discussion-icon {

    background:
        linear-gradient(
            135deg,
            #F59E0B,
            #EF4444
        );
}


.reveal .discussion-panel h3 {

    margin: 0;

    color: #0F172A;

    font-size: 28px;

    font-weight: 760;

    text-transform: none;
}


.idea-chips {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}


.idea-chip {

    padding: 9px 15px;

    border-radius: 30px;

    color: #334155;

    background: #F1F5F9;

    font-size: 15px;

    font-weight: 650;
}


.benefits-panel .idea-chip:hover {

    color: #0F766E;

    background:
        rgba(20,184,166,.12);
}


.problems-panel .idea-chip:hover {

    color: #B45309;

    background:
        rgba(245,158,11,.13);
}


.discussion-question {

    margin-top: 28px;

    padding-top: 18px;

    border-top:
        1px solid
        rgba(148,163,184,.18);

    color: #64748B;

    font-size: 16px;

    font-style: italic;
}


/* Think Pair Share */

.tps-area {

    margin-top: 34px;

    padding: 22px 26px;

    border-radius: 24px;

    background: white;

    box-shadow:
        0 12px 35px
        rgba(15,23,42,.07);
}


.tps-steps {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 15px;
}


.tps-step {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 10px 18px;

    border: none;

    border-radius: 24px;

    color: #64748B;

    background: #F1F5F9;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform .2s ease,
        background .2s ease,
        color .2s ease;
}


.tps-step.active {

    color: white;

    background:
        linear-gradient(
            90deg,
            #1E3A8A,
            #14B8A6
        );

    transform: translateY(-2px);
}


.step-number {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 24px;

    height: 24px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.18);

    font-size: 12px;
}


.tps-arrow {

    color: #94A3B8;

    font-size: 18px;
}


.tps-instruction {

    margin-top: 18px;

    text-align: center;

    color: #334155;

    font-size: 17px;

    font-weight: 650;
}


/* timer */

.discussion-tools {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 14px;

    margin-top: 20px;
}


.timer-box {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 10px 18px;

    border-radius: 22px;

    background: #0F172A;

    color: white;
}


.timer-label {

    color: #94A3B8;

    font-size: 11px;

    letter-spacing: 1.5px;

    font-weight: 800;
}


#discussionTimer {

    min-width: 55px;

    font-size: 18px;

    font-weight: 800;

    font-variant-numeric: tabular-nums;
}


.ghost-button {

    color: #334155;

    background: #E2E8F0;
}


.ghost-button:hover {

    color: #0F172A;

    background: #CBD5E1;
}


@media (max-width: 900px) {

    .discussion-grid {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   PAGE 5 · HEIGHT FIX
   Make all discussion controls fit on one Reveal slide
========================================================= */

.discussion-slide {
    padding: 42px 68px;
}

/* 标题区域稍微紧凑 */
.discussion-slide .section-tag {
    margin-bottom: 10px;
}

.discussion-slide .section-title {
    font-size: 44px;
    line-height: 1.12;
}

.discussion-slide .section-subtitle {
    margin-top: 8px;
    font-size: 18px;
}


/* 两张卡片压缩高度 */
.discussion-grid {
    margin-top: 25px;
    gap: 26px;
}

.discussion-panel {
    min-height: 205px;
    padding: 23px 27px;
}

.discussion-panel-header {
    margin-bottom: 17px;
}

.discussion-panel-header h3 {
    font-size: 25px;
}

.idea-chip {
    padding: 7px 13px;
    font-size: 14px;
}

.discussion-question {
    margin-top: 19px;
    padding-top: 13px;
    font-size: 14px;
}


/* Think-Pair-Share 区域压缩 */
.tps-area {
    margin-top: 24px;
    padding: 17px 24px;
}

.tps-step {
    padding: 8px 16px;
}

.tps-instruction {
    margin-top: 13px;
    font-size: 15px;
}


/* Timer 必须显示 */
.discussion-tools {
    display: flex !important;
    visibility: visible !important;

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

    gap: 12px;

    margin-top: 13px;
}

.timer-box {
    padding: 8px 16px;
}

#startTimer,
#resetTimer {
    display: inline-block !important;
    visibility: visible !important;
}

.objectives-slide {
    padding: 0;
    overflow: hidden;
}

.roadmap-slide {
    width: 100%;
    height: 100%;
}

.roadmap-inner {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 30px 72px;
    overflow: hidden;
}

.roadmap-header {
    display: flex;
    align-items: center;
    gap: 18px;
}

.roadmap-tag {
    padding: 7px 13px;
    border-radius: 8px;
    color: #0F766E;
    background: rgba(20, 184, 166, .10);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 2px;
}

.reveal .roadmap-header h2 {
    margin: 0;
    color: #0F172A;
    font-size: 46px;
    font-weight: 780;
    letter-spacing: 0;
    line-height: 1.05;
    text-transform: none;
}

.roadmap-section-title {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-top: 13px;
}

.roadmap-section-title > span:first-child {
    color: #0F766E;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 2px;
}

.roadmap-section-title .roadmap-question {
    color: #334155;
    font-size: 25px;
}

.roadmap-section-title strong {
    color: #0F766E;
}

.output-grid,
.input-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 8px;
}

.output-card {
    box-sizing: border-box;
    min-height: 172px;
    padding: 16px 22px;
    border: 1px solid rgba(14, 116, 144, .16);
    border-radius: 8px;
    color: white;
    background: linear-gradient(125deg, #0F2F63, #0B5E78);
    box-shadow: 0 14px 30px rgba(15, 47, 99, .16);
}

.output-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #B8F4EE;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.number-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(184, 244, 238, .45);
    border-radius: 50%;
    font-size: 14px;
}

.translatable {
    position: relative;
}

.translation-trigger {
    cursor: pointer;
}

.roadmap-slide .translation-trigger:hover {
    text-decoration: underline;
    text-decoration-color: rgba(20, 184, 166, .60);
    text-underline-offset: 5px;
}

.output-card .translation-trigger {
    margin: 8px 0 5px;
    color: white;
    font-size: 28px;
    font-weight: 720;
    line-height: 1.18;
}

.output-card .translation-trigger:hover {
    color: #E0FFFB;
}

.unit-task-title {
    margin: 8px 0 5px;
    color: white;
    font-size: 28px;
    font-weight: 720;
    line-height: 1.14;
}

.unit-task-title .no-break {
    white-space: nowrap;
}

.output-card .unit-question {
    margin: 0 0 4px;
    color: #D7F7F3;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.25;
}

.translation {
    display: none;
}

.show-translation .translation {
    display: block;
    animation: translationReveal .3s ease both;
}

.output-card .translation {
    margin: 0 0 5px;
    color: #B8F4EE;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.28;
}

.output-process {
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.32;
}

.process-arrow {
    color: #5EEAD4;
}

.roadmap-bridge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 9px;
    color: #0F766E;
    font-size: 19px;
    font-weight: 700;
}

.bridge-line {
    width: 54px;
    height: 1px;
    background: rgba(15, 118, 110, .35);
}

.input-grid {
    margin-top: 7px;
}

.input-card {
    box-sizing: border-box;
    min-height: 138px;
    padding: 13px 20px;
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 8px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
}

.reveal .input-card h3 {
    margin: 0 0 7px;
    color: #0F3D62;
    font-size: 26px;
    font-weight: 760;
    text-transform: none;
}

.input-row {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 10px;
    margin-top: 4px;
}

.input-key {
    color: #0F766E;
    font-size: 18px;
    font-weight: 750;
}

.input-value {
    color: #475569;
    font-size: 18px;
    line-height: 1.28;
}

.input-value .translation {
    margin-top: 2px;
    color: #0F766E;
    font-size: 16px;
    font-weight: 650;
    line-height: 1.2;
}

.examples {
    margin-top: 2px;
}

.no-break {
    white-space: nowrap;
}

.skill-lines > div + div {
    margin-top: 3px;
}

.skill-arrow {
    color: #0F766E;
    font-weight: 750;
}

@media (max-width: 900px) {
    .roadmap-inner {
        padding: 26px 48px;
    }

    .reveal .roadmap-header h2 {
        font-size: 40px;
    }

    .output-card .translation-trigger,
    .unit-task-title {
        font-size: 24px;
    }

    .output-card .unit-question,
    .output-process {
        font-size: 18px;
    }

    .input-row {
        grid-template-columns: 128px minmax(0, 1fr);
    }
}

Put the Communication Devices in Order

/* =========================================================
   PAGE 3 · COMMUNICATION DEVICE CARDS WITH IMAGES
   ========================================================= */

.communication-timeline-slide .timeline-card {
    display: grid;

    grid-template-columns: 76px minmax(0, 1fr);

    align-items: center;

    gap: 14px;

    min-height: 104px;

    padding: 12px 16px;

    box-sizing: border-box;

    text-align: left;
}


/* device image */

.communication-device-image {
    display: block;

    width: 70px;
    height: 70px;

    object-fit: contain;

    object-position: center;

    pointer-events: none;

    user-select: none;
}


/* text area */

.timeline-card-text {
    min-width: 0;
}


/* English device name */

.communication-timeline-slide
.timeline-card-text
.translation-trigger {

    display: inline-block;

    margin-bottom: 4px;

    color: #1E3A8A;

    font-size: 20px;

    font-weight: 760;

    line-height: 1.08;

    cursor: pointer;
}


/* subtle cue: English is clickable */

.communication-timeline-slide
.timeline-card-text
.translation-trigger:hover {

    color: #0F766E;
}


/* Chinese translation */

.communication-timeline-slide
.timeline-card-text
.translation {

    margin: 2px 0 4px;

    color: #0F766E;

    font-size: 16px;

    font-weight: 650;

    line-height: 1.15;
}


/* year / supporting information */

.communication-timeline-slide
.timeline-card-text > span {

    display: block;

    color: #64748B;

    font-size: 15px;

    line-height: 1.15;
}

/* compact appearance after card enters a drop zone */

.communication-timeline-slide
.drop-zone
.timeline-card {

    grid-template-columns: 38px minmax(0, 1fr);

    gap: 7px;

    min-height: 66px;

    padding: 7px;

}


.communication-timeline-slide
.drop-zone
.communication-device-image {

    width: 36px;
    height: 36px;

}


.communication-timeline-slide
.drop-zone
.timeline-card-text
.translation-trigger {

    font-size: 15px;

    line-height: 1.05;
}


.communication-timeline-slide
.drop-zone
.timeline-card-text
.translation {

    font-size: 12px;
}


.communication-timeline-slide
.drop-zone
.timeline-card-text > span {

    font-size: 11px;
}

/* =========================================================
   PAGE 3 · CENTER DEVICE IMAGES AFTER DROP
   ========================================================= */

.communication-timeline-slide
.drop-zone
.timeline-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

.communication-timeline-slide
.drop-zone
.communication-device-image {
    display: block;

    margin: 0 auto 6px;

    width: 36px;
    height: 36px;

    object-fit: contain;
}

.communication-timeline-slide
.drop-zone
.timeline-card-text {
    width: 100%;
    text-align: center;
}

/* =========================================================
   PAGE 3 · TOP DEVICE CARDS — CENTERED LAYOUT
   ========================================================= */

.communication-timeline-slide
.timeline-items
.timeline-card {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 118px;

    padding: 12px 14px;

    text-align: center;
}


/* image centered inside the whole card */

.communication-timeline-slide
.timeline-items
.communication-device-image {

    display: block;

    width: 70px;
    height: 70px;

    margin: 0 auto;

    object-fit: contain;

    object-position: center;

    flex-shrink: 0;
}


/* English / Chinese text centered */

.communication-timeline-slide
.timeline-items
.timeline-card-text {

    width: 100%;

    text-align: center;
}


.communication-timeline-slide
.timeline-items
.timeline-card-text
.translation-trigger {

    display: inline-block;

    margin: 0;

    font-size: 20px;

    line-height: 1.1;

    text-align: center;
}


.communication-timeline-slide
.timeline-items
.timeline-card-text
.translation {

    margin-top: 4px;

    text-align: center;

    font-size: 16px;
}

/* =========================================================
   PAGE 3 · VERTICAL COMPACT FIX
   Keep controls + reflection inside the screen
   ========================================================= */

.communication-timeline-slide {
    padding-top: 28px;
    padding-bottom: 24px;
}


/* reduce space under subtitle */

.communication-timeline-slide .section-subtitle {
    margin-top: 8px;
    margin-bottom: 8px;
}


/* timeline game starts closer to subtitle */

.communication-timeline-slide .timeline-game {
    margin-top: 8px;
}


/* top draggable cards slightly shorter */

.communication-timeline-slide
.timeline-items
.timeline-card {

    min-height: 98px;

    padding-top: 8px;
    padding-bottom: 8px;

    gap: 5px;
}


/* slightly smaller image, still clear */

.communication-timeline-slide
.timeline-items
.communication-device-image {

    width: 60px;
    height: 60px;
}


/* reduce space below draggable cards */

.communication-timeline-slide .timeline-items {
    margin-bottom: 12px;
}


/* timeline zones slightly more compact */

.communication-timeline-slide .drop-zone {
    min-height: 88px;
    padding-top: 7px;
    padding-bottom: 7px;
}


/* reduce control spacing */

.communication-timeline-slide .timeline-controls {
    margin-top: 10px;
}


/* bring reflection closer */

.communication-timeline-slide .timeline-reflection {
    margin-top: 8px;
    gap: 10px;
}


/* reflection cards slightly shorter */

.communication-timeline-slide .reflection-question,
.communication-timeline-slide .device-vocabulary {

    min-height: 54px;

    padding-top: 10px;
    padding-bottom: 10px;
}

.communication-timeline-slide .section-title {
    margin-bottom: 4px;
}

.communication-timeline-slide .timeline-line {
    min-width: 28px;
}

/* =========================================================
   PAGE 4 · WATCH & NOTICE
   ========================================================= */

.watch-notice-slide {

    box-sizing: border-box;

    width: 100%;
    height: 100%;

    padding: 38px 68px 30px;

    overflow: hidden;

    color: #0F172A;

    background:
        radial-gradient(
            circle at 92% 8%,
            rgba(56, 189, 248, .12),
            transparent 28%
        ),
        radial-gradient(
            circle at 5% 95%,
            rgba(20, 184, 166, .10),
            transparent 30%
        ),
        #F8FAFC;
}


/* -----------------------------------------
   TITLE
----------------------------------------- */

.reveal .watch-title {

    margin:
        8px 0
        22px;

    color: #0F172A;

    font-size: 42px;

    font-weight: 780;

    line-height: 1.08;

    letter-spacing: -1px;

    text-transform: none;
}


/* -----------------------------------------
   MAIN LAYOUT
----------------------------------------- */

.watch-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(0, 1fr);

    gap: 30px;

    align-items: start;
}


/* =========================================================
   VIDEO
========================================================= */

.video-panel {

    min-width: 0;
}


.video-frame {

    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    border-radius: 14px;

    background: #071426;

    box-shadow:
        0 18px 42px
        rgba(15, 23, 42, .18);
}


.watch-video {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    background: #071426;
}


/* large play overlay */

.video-play-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

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

    gap: 12px;

    border: 0;

    color: white;

    background:
        linear-gradient(
            rgba(7, 20, 38, .25),
            rgba(7, 20, 38, .58)
        );

    font-size: 22px;

    font-weight: 700;

    cursor: pointer;

    transition:
        opacity .25s ease,
        background .25s ease;
}


.video-play-overlay:hover {

    background:
        linear-gradient(
            rgba(7, 20, 38, .15),
            rgba(7, 20, 38, .48)
        );
}


.video-play-overlay.is-hidden {

    opacity: 0;

    pointer-events: none;
}


.play-icon {

    display: flex;

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

    width: 72px;
    height: 72px;

    padding-left: 5px;

    border-radius: 50%;

    color: white;

    background:
        linear-gradient(
            135deg,
            #14B8A6,
            #0284C7
        );

    font-size: 30px;

    box-shadow:
        0 12px 28px
        rgba(20, 184, 166, .32);
}


/* custom controls */

.video-controls {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 12px;
}


.video-control-button {

    padding: 9px 17px;

    border:
        1px solid
        rgba(30, 58, 138, .18);

    border-radius: 999px;

    color: #0F3D62;

    background: white;

    font-size: 16px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 5px 14px
        rgba(15, 23, 42, .06);

    transition:
        transform .18s ease,
        border-color .18s ease;
}


.video-control-button:hover {

    transform: translateY(-2px);

    border-color:
        rgba(20, 184, 166, .55);
}


.video-time {

    margin-left: auto;

    color: #64748B;

    font-size: 15px;

    font-variant-numeric: tabular-nums;
}


.video-time-divider {

    margin: 0 4px;

    color: #94A3B8;
}


/* =========================================================
   RIGHT TASK PANEL
========================================================= */

.watch-task-panel {

    position: relative;

    min-height: 365px;

    padding: 24px 25px;

    box-sizing: border-box;

    border:
        1px solid
        rgba(148, 163, 184, .22);

    border-radius: 14px;

    background:
        rgba(255, 255, 255, .94);

    box-shadow:
        0 14px 34px
        rgba(15, 23, 42, .08);
}


/* stage switching */

.watch-stage {

    display: none;

    animation:
        watchStageIn
        .35s ease
        both;
}


.watch-stage.is-active {

    display: block;
}


@keyframes watchStageIn {

    from {

        opacity: 0;

        transform:
            translateY(8px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}


.watch-stage-label {

    margin-bottom: 10px;

    color: #0F766E;

    font-size: 14px;

    font-weight: 850;

    letter-spacing: 2px;
}


.reveal .watch-stage h3 {

    margin:
        0 0
        18px;

    color: #0F2F63;

    font-size: 28px;

    font-weight: 780;

    text-transform: none;
}


.watch-prompt {

    color: #334155;

    font-size: 23px;

    font-weight: 650;

    line-height: 1.45;
}


.watch-tip {

    margin-top: 22px;

    padding: 14px 16px;

    border-left:
        4px solid
        #14B8A6;

    border-radius: 6px;

    color: #64748B;

    background: #F0FDFA;

    font-size: 17px;

    line-height: 1.4;
}


/* Next-stage button */

.watch-next-button {

    display: inline-flex;

    align-items: center;

    margin-top: 24px;

    padding: 10px 19px;

    border: 0;

    border-radius: 999px;

    color: white;

    background:
        linear-gradient(
            100deg,
            #14B8A6,
            #0284C7
        );

    font-size: 16px;

    font-weight: 750;

    cursor: pointer;

    box-shadow:
        0 9px 22px
        rgba(20, 184, 166, .20);
}


/* =========================================================
   LISTENING CARDS
========================================================= */

.listening-card {

    position: relative;

    margin-bottom: 13px;

    padding:
        17px 18px
        16px 52px;

    border:
        1px solid
        rgba(148, 163, 184, .22);

    border-radius: 10px;

    background: #F8FAFC;
}


.listening-number {

    position: absolute;

    top: 17px;
    left: 17px;

    color: #0F766E;

    font-size: 15px;

    font-weight: 850;
}


.reveal .listening-card p {

    margin: 0;

    color: #334155;

    font-size: 20px;

    font-weight: 560;

    line-height: 1.55;
}


/* clickable blanks */

.answer-blank {

    min-width: 74px;

    margin:
        0 4px;

    padding:
        1px 8px
        3px;

    border: 0;

    border-bottom:
        3px solid
        #14B8A6;

    color: #0F766E;

    background: transparent;

    font-family: inherit;

    font-size: 20px;

    font-weight: 800;

    cursor: pointer;

    transition:
        color .2s ease,
        background .2s ease;
}


.answer-blank:hover {

    background:
        rgba(20, 184, 166, .08);
}


.answer-blank.is-revealed {

    color: #0284C7;

    background:
        rgba(56, 189, 248, .10);
}


.contrast-answer.is-revealed {

    color: #D97706;

    background:
        rgba(245, 158, 11, .10);

    border-bottom-color:
        #F59E0B;
}


.pair-check {

    margin-top: 12px;

    color: #64748B;

    font-size: 16px;

    font-weight: 650;
}


/* =========================================================
   REFLECTION
========================================================= */

.watch-reflection {

    display: none;

    margin-top: 18px;

    text-align: center;

    animation:
        watchStageIn
        .4s ease
        both;
}


.watch-reflection.is-visible {

    display: block;
}


.reflection-prompt {

    color: #334155;

    font-size: 20px;

    line-height: 1.35;
}


.reflection-prompt strong {

    color: #0F3D62;
}


.connection-reveal {

    display: none;

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

    gap: 24px;

    margin-top: 13px;
}


.connection-reveal.is-visible {

    display: flex;

    animation:
        watchStageIn
        .35s ease
        both;
}


.concept-word {

    padding:
        8px 18px;

    border-radius: 999px;

    font-size: 23px;

    font-weight: 850;

    letter-spacing: 1.5px;
}


.communication-word {

    color: #0F3D62;

    background:
        rgba(56, 189, 248, .12);
}


.connection-word {

    color: #0F766E;

    background:
        rgba(20, 184, 166, .12);
}


.concept-symbol {

    color: #F59E0B;

    font-size: 32px;

    font-weight: 900;
}


.connection-question {

    display: none;

    margin-top: 10px;

    color: #475569;

    font-size: 19px;
}


.connection-question.is-visible {

    display: block;

    animation:
        watchStageIn
        .35s ease
        both;
}


.connection-question strong {

    color: #0F2F63;
}


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

@media (max-width: 900px) {

    .watch-notice-slide {

        padding:
            30px 45px;
    }


    .watch-layout {

        gap: 20px;
    }


    .reveal .watch-title {

        font-size: 36px;
    }


    .watch-prompt {

        font-size: 20px;
    }


    .reveal .listening-card p {

        font-size: 17px;
    }

}

/* =========================================================
   PAGE 4 · VERTICAL SPACE OPTIMIZATION
   ========================================================= */

.watch-notice-slide {
    padding-top: 26px;
    padding-bottom: 18px;
}


/* Header more compact */

.watch-notice-slide .section-tag {
    margin-bottom: 8px;
}

.reveal .watch-title {
    margin-top: 5px;
    margin-bottom: 14px;

    font-size: 40px;
}


/* Main columns */

.watch-layout {
    gap: 24px;
}


/* Right task card */

.watch-task-panel {
    min-height: 0;

    padding: 18px 20px;
}


/* Stage heading */

.watch-stage-label {
    margin-bottom: 6px;
}

.reveal .watch-stage h3 {
    margin-bottom: 12px;
}


/* Listening cards */

.listening-card {
    margin-bottom: 9px;

    padding:
        12px 14px
        12px 46px;
}

.listening-number {
    top: 12px;
    left: 14px;
}


/* Keep sentence readable but reduce vertical height */

.reveal .listening-card p {
    font-size: 19px;
    line-height: 1.38;
}


/* Pair check */

.pair-check {
    margin-top: 7px;

    font-size: 16px;
}


/* Think button */

.watch-next-button {
    margin-top: 12px;

    padding: 8px 17px;
}


/* Video controls */

.video-controls {
    margin-top: 7px;
}

.video-control-button {
    padding: 7px 14px;
}


/* Reflection later also more compact */

.watch-reflection {
    margin-top: 10px;
}

.reflection-prompt {
    font-size: 18px;
}

.connection-reveal {
    margin-top: 8px;
}

.connection-question {
    margin-top: 6px;
}

/* =========================================================
   PAGE 5 · YOUR FIRST TAKE
   ========================================================= */

.first-take-slide {

    box-sizing: border-box;

    width: 100%;
    height: 100%;

    padding: 42px 72px 34px;

    overflow: hidden;

    color: #0F172A;

    background:
        radial-gradient(
            circle at 8% 15%,
            rgba(20,184,166,.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 82%,
            rgba(245,158,11,.10),
            transparent 30%
        ),
        #F8FAFC;
}


/* title */

.reveal .first-take-title {

    margin:
        8px 0
        8px;

    color: #0F172A;

    font-size: 43px;

    font-weight: 780;

    line-height: 1.1;

    letter-spacing: -1px;

    text-transform: none;
}


.first-take-subtitle {

    margin: 0;

    color: #64748B;

    font-size: 19px;

    line-height: 1.35;
}


/* main comparison */

.first-take-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        72px
        minmax(0, 1fr);

    gap: 18px;

    align-items: center;

    margin-top: 26px;
}


.take-card {

    min-height: 210px;

    padding: 24px 28px;

    box-sizing: border-box;

    border-radius: 16px;

    background: white;

    box-shadow:
        0 14px 34px
        rgba(15,23,42,.08);
}


.benefits-card {

    border-top:
        5px solid
        #14B8A6;
}


.problems-card {

    border-top:
        5px solid
        #F59E0B;
}


.take-card-label {

    margin-bottom: 19px;

    font-size: 18px;

    font-weight: 850;

    letter-spacing: 1.8px;
}


.benefits-card
.take-card-label {

    color: #0F766E;
}


.problems-card
.take-card-label {

    color: #B45309;
}


.take-ideas {

    display: grid;

    gap: 14px;
}


.take-idea {

    display: flex;

    align-items: center;

    gap: 11px;

    color: #334155;

    font-size: 23px;

    font-weight: 650;
}


.idea-dot {

    width: 9px;
    height: 9px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #94A3B8;
}


.benefits-card
.idea-dot {

    background: #14B8A6;
}


.problems-card
.idea-dot {

    background: #F59E0B;
}


/* emphasize relation to Page 4 */

.key-problem {

    color: #92400E;

    font-weight: 800;
}


/* VS */

.take-vs {

    display: flex;

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

    width: 58px;
    height: 58px;

    margin: 0 auto;

    border-radius: 50%;

    color: #475569;

    background: white;

    box-shadow:
        0 8px 22px
        rgba(15,23,42,.10);

    font-size: 18px;

    font-weight: 850;
}


/* quick choice */

.first-take-choice {

    margin-top: 24px;

    text-align: center;
}


.choice-label {

    margin-bottom: 12px;

    color: #475569;

    font-size: 16px;

    font-weight: 850;

    letter-spacing: 2px;
}


.choice-buttons {

    display: flex;

    justify-content: center;

    gap: 14px;
}


.take-choice-button {

    min-width: 165px;

    padding:
        11px 18px;

    border:
        2px solid
        transparent;

    border-radius: 999px;

    font-family: inherit;

    font-size: 17px;

    font-weight: 750;

    cursor: pointer;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease,
        color .18s ease;
}


.take-choice-button:hover {

    transform:
        translateY(-2px);
}


.benefits-choice {

    color: #0F766E;

    background:
        rgba(20,184,166,.10);
}


.unsure-choice {

    color: #475569;

    background:
        #E2E8F0;
}


.problems-choice {

    color: #B45309;

    background:
        rgba(245,158,11,.12);
}


.take-choice-button.is-selected {

    color: white;

    box-shadow:
        0 9px 22px
        rgba(15,23,42,.14);
}


.benefits-choice.is-selected {

    background: #14B8A6;
}


.unsure-choice.is-selected {

    background: #64748B;
}


.problems-choice.is-selected {

    background: #F59E0B;
}


/* prediction transition */

.author-prediction {

    opacity: 0;

    pointer-events: none;

    margin-top: 20px;

    text-align: center;

    transform:
        translateY(8px);

    transition:
        opacity .3s ease,
        transform .3s ease;
}


.author-prediction.is-visible {

    opacity: 1;

    pointer-events: auto;

    transform:
        translateY(0);
}


.prediction-question {

    color: #0F2F63;

    font-size: 23px;

    font-weight: 760;
}


.prediction-transition {

    margin-top: 5px;

    color: #0F766E;

    font-size: 18px;

    font-weight: 700;
}

.take-choice-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.vote-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 32px;
    height: 32px;

    padding: 0 7px;

    border-radius: 999px;

    background: rgba(255,255,255,.78);

    color: #0F172A;

    font-size: 16px;
    font-weight: 850;

    font-variant-numeric: tabular-nums;
}

.reset-vote-button {
    display: block;

    margin: 12px auto 0;

    padding: 7px 15px;

    border: 1px solid rgba(100,116,139,.28);
    border-radius: 999px;

    color: #64748B;
    background: transparent;

    font-family: inherit;
    font-size: 14px;
    font-weight: 650;

    cursor: pointer;
}

.reset-vote-button:hover {
    color: #0F172A;
    background: rgba(148,163,184,.10);
}

/* =========================================================
   PAGE 6 · GLOBAL READING · TITLE ANALYSIS
========================================================= */

.global-title-slide {

    box-sizing: border-box;

    width: 100%;
    height: 100%;

    padding: 38px 68px 30px;

    overflow: hidden;

    color: #0F172A;

    background:
        radial-gradient(
            circle at 92% 8%,
            rgba(56,189,248,.11),
            transparent 26%
        ),
        radial-gradient(
            circle at 6% 92%,
            rgba(20,184,166,.09),
            transparent 28%
        ),
        #F8FAFC;
}


/* =========================================================
   HEADER
========================================================= */

.global-reading-header {

    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 30px;

    margin-top: 6px;
}


.global-reading-kicker {

    margin-bottom: 5px;

    color: #0F766E;

    font-size: 15px;

    font-weight: 850;

    letter-spacing: 2.4px;
}


.reveal .global-reading-title {

    margin: 0;

    color: #0F172A;

    font-size: 38px;

    font-weight: 780;

    line-height: 1.12;

    text-transform: none;
}


/* score */

.page-score-card {

    display: flex;

    align-items: center;

    gap: 10px;

    flex-shrink: 0;

    padding: 9px 15px;

    border:
        1px solid
        rgba(20,184,166,.22);

    border-radius: 999px;

    background:
        rgba(255,255,255,.88);

    color: #64748B;

    box-shadow:
        0 6px 18px
        rgba(15,23,42,.06);

    font-size: 14px;

    font-weight: 700;
}


.page-score-card strong {

    color: #0F766E;

    font-size: 18px;
}


/* =========================================================
   TITLE
========================================================= */

.text-title-stage {

    display: flex;

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

    gap: 30px;

    margin-top: 26px;
}


.title-word {

    padding: 8px 16px 11px;

    border: 0;

    border-bottom:
        4px solid transparent;

    color: #0F2F63;

    background: transparent;

    font-family: inherit;

    font-size: 56px;

    font-weight: 760;

    letter-spacing: -1px;

    cursor: pointer;

    transition:
        transform .2s ease,
        color .2s ease,
        border-color .2s ease;
}


.title-word:hover {

    transform:
        translateY(-3px);
}


.title-connections.is-explored {

    color: #0284C7;

    border-bottom-color:
        #38BDF8;
}


.title-conversations.is-explored {

    color: #0F766E;

    border-bottom-color:
        #14B8A6;
}


.title-ampersand {

    color: #F59E0B;

    font-size: 58px;

    font-weight: 400;
}


.title-click-hint {

    margin-top: 5px;

    text-align: center;

    color: #94A3B8;

    font-size: 14px;
}


/* =========================================================
   CONCEPT CARDS
========================================================= */

.title-concept-grid {

    display: grid;

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

    gap: 24px;

    margin-top: 18px;
}


.title-concept-card {

    opacity: 0;

    transform:
        translateY(8px);

    pointer-events: none;

    min-height: 130px;

    padding: 18px 22px;

    box-sizing: border-box;

    border-radius: 14px;

    background:
        rgba(255,255,255,.93);

    box-shadow:
        0 10px 28px
        rgba(15,23,42,.07);

    transition:
        opacity .3s ease,
        transform .3s ease;
}


.title-concept-card.is-visible {

    opacity: 1;

    transform:
        translateY(0);

    pointer-events: auto;
}


.connections-concept {

    border-top:
        4px solid
        #38BDF8;
}


.conversations-concept {

    border-top:
        4px solid
        #14B8A6;
}


.concept-card-label {

    margin-bottom: 4px;

    font-size: 13px;

    font-weight: 850;

    letter-spacing: 2px;
}


.connections-concept
.concept-card-label {

    color: #0284C7;
}


.conversations-concept
.concept-card-label {

    color: #0F766E;
}


.concept-card-question {

    color: #475569;

    font-size: 18px;

    font-weight: 700;
}


.concept-examples {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 10px;
}


.concept-examples span {

    padding: 5px 10px;

    border-radius: 999px;

    color: #475569;

    background: #F1F5F9;

    font-size: 14px;

    font-weight: 650;
}


.concept-summary {

    margin-top: 9px;

    color: #64748B;

    font-size: 14px;

    font-style: italic;
}


/* =========================================================
   PREDICTION
========================================================= */

.title-prediction-area {

    opacity: 0;

    pointer-events: none;

    max-height: 0;

    overflow: hidden;

    margin-top: 0;

    transition:
        opacity .35s ease,
        max-height .45s ease,
        margin-top .35s ease;
}


.title-prediction-area.is-visible {

    opacity: 1;

    pointer-events: auto;

    max-height: 260px;

    margin-top: 18px;
}


.prediction-label {

    color: #B45309;

    font-size: 13px;

    font-weight: 850;

    letter-spacing: 2px;
}


.reveal .title-prediction-area h3 {

    margin:
        4px 0
        11px;

    color: #334155;

    font-size: 18px;

    font-weight: 700;

    line-height: 1.25;

    text-transform: none;
}


.title-prediction-options {

    display: grid;

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

    gap: 10px;
}


.title-prediction-option {

    display: flex;

    align-items: center;

    gap: 10px;

    min-height: 58px;

    padding: 10px 12px;

    border:
        1px solid
        rgba(148,163,184,.25);

    border-radius: 10px;

    color: #475569;

    background: white;

    font-family: inherit;

    font-size: 14px;

    font-weight: 650;

    line-height: 1.25;

    text-align: left;

    cursor: pointer;

    transition:
        border-color .2s ease,
        transform .2s ease,
        background .2s ease;
}


.title-prediction-option:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(20,184,166,.45);
}


.prediction-letter {

    display: flex;

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

    width: 30px;
    height: 30px;

    flex: 0 0 auto;

    border-radius: 50%;

    color: #0F3D62;

    background: #E0F2FE;

    font-weight: 850;
}


.title-prediction-option.is-selected {

    border-color: #14B8A6;

    background: #F0FDFA;
}


.title-prediction-option.is-best-prediction {

    border-color: #14B8A6;

    background:
        rgba(20,184,166,.10);
}


.title-prediction-feedback {

    min-height: 20px;

    margin-top: 7px;

    color: #0F766E;

    font-size: 14px;

    font-weight: 700;
}


/* =========================================================
   TRANSITION
========================================================= */

.title-reading-transition {

    display: none;

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

    gap: 11px;

    margin-top: 10px;

    color: #475569;

    font-size: 15px;
}


.title-reading-transition.is-visible {

    display: flex;

    animation:
        titleTransitionIn
        .35s ease
        both;
}


.transition-check {

    display: flex;

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

    width: 30px;
    height: 30px;

    border-radius: 50%;

    color: white;

    background: #14B8A6;

    font-weight: 900;
}


.title-reading-transition strong {

    color: #0F766E;

    margin-right: 5px;
}


@keyframes titleTransitionIn {

    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

/* =========================================================
   PAGE 6 · FIT EVERYTHING ON ONE SCREEN
========================================================= */

.global-title-slide {
    padding-top: 24px;
    padding-bottom: 18px;
}


/* header slightly tighter */

.global-reading-header {
    margin-top: 2px;
}

.global-reading-kicker {
    margin-bottom: 3px;
}

.reveal .global-reading-title {
    font-size: 34px;
    line-height: 1.08;
}


/* title words move upward */

.text-title-stage {
    margin-top: 16px;
}

.title-word {
    font-size: 48px;

    padding-top: 4px;
    padding-bottom: 7px;
}

.title-ampersand {
    font-size: 50px;
}

.title-click-hint {
    margin-top: 2px;
}


/* concept cards more compact */

.title-concept-grid {
    margin-top: 12px;

    gap: 18px;
}

.title-concept-card {
    min-height: 106px;

    padding: 13px 18px;
}

.concept-card-question {
    font-size: 16px;
}

.concept-examples {
    margin-top: 7px;

    gap: 5px;
}

.concept-examples span {
    padding: 4px 8px;

    font-size: 13px;
}

.concept-summary {
    margin-top: 5px;

    font-size: 13px;
}


/* prediction section */

.title-prediction-area.is-visible {
    margin-top: 11px;

    max-height: 220px;
}

.reveal .title-prediction-area h3 {
    margin-top: 3px;
    margin-bottom: 7px;

    font-size: 16px;
}

.title-prediction-options {
    gap: 8px;
}

.title-prediction-option {
    min-height: 48px;

    padding: 7px 10px;

    font-size: 13px;
}

.prediction-letter {
    width: 26px;
    height: 26px;
}

.title-prediction-feedback {
    min-height: 16px;

    margin-top: 4px;

    font-size: 13px;
}


/* final transition */

.title-reading-transition {
    margin-top: 5px;

    font-size: 14px;
}

/* =========================================================
   PAGE 6 ONLY · STAGE 03 / FORM A TEXT HYPOTHESIS
========================================================= */
.reveal .slides .global-title-slide {
    display:grid;
    grid-template-rows:72px 96px 82px 150px 165px 190px;
    gap:8px;
    box-sizing:border-box;
    width:100%;
    height:100%;
    padding:20px 64px 18px;
    overflow:hidden;
    color:#0b1f3a;
    background:
        radial-gradient(circle at 90% 10%,rgba(56,189,248,.10),transparent 25%),
        radial-gradient(circle at 8% 92%,rgba(20,184,166,.09),transparent 26%),
        linear-gradient(rgba(30,142,169,.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(30,142,169,.025) 1px,transparent 1px),
        linear-gradient(145deg,#fff 0%,#f6fbff 67%,#eef8fc 100%);
    background-size:auto,auto,32px 32px,32px 32px,auto;
}
.global-title-slide > * { min-width:0; }
.global-title-slide .page6-mission-header { height:72px; min-height:0; padding:0 0 12px; }
.global-title-slide .mission-badge { min-height:40px; padding:0 19px; font-size:21px; }
.global-title-slide .stage-badge { min-height:40px; padding:0 18px; font-size:18px; white-space:nowrap; }
.global-title-slide .mission-score { min-width:184px; padding:8px 16px; }
.global-title-slide .mission-score > span { font-size:27px; }
.global-title-slide .mission-score small { font-size:14px; }

.page6-title-area { position:relative; display:grid; align-content:end; padding-top:24px; }
.global-title-slide .task-label { position:absolute; top:0; left:0; display:inline-flex; align-items:center; gap:12px; min-height:22px; padding:0 9px; border-left:3px solid #1bb7c2; border-radius:3px; color:#0e7490; background:rgba(221,247,249,.72); font-size:14px; font-weight:900; letter-spacing:1px; }
.global-title-slide .task-label small { color:#718390; font-size:11px; letter-spacing:.8px; }
.global-title-slide .global-reading-kicker { margin:0 0 2px; color:#0e7490; font-size:16px; font-weight:900; letter-spacing:2px; }
.reveal .global-title-slide .global-reading-title { margin:0; color:#071f3d; font-size:38px; line-height:1; letter-spacing:-.4px; }
.page6-title-area > p { margin:5px 0 0; color:#607887; font-size:19px; font-weight:650; }

.page6-title-exploration { display:grid; align-content:center; }
.global-title-slide .text-title-stage { gap:25px; margin:0; }
.global-title-slide .title-word { padding:2px 15px 5px; font-size:52px; line-height:1; }
.global-title-slide .title-ampersand { color:#f59e0b; font-size:52px; line-height:1; }
.global-title-slide .title-click-hint { margin-top:3px; color:#78909c; font-size:15px; font-weight:650; }

.global-title-slide .title-concept-grid { align-items:stretch; gap:18px; margin:0; }
.global-title-slide .title-concept-card { min-height:0; height:150px; padding:13px 20px 11px; border-radius:14px; }
.global-title-slide .concept-card-label { margin-bottom:3px; font-size:17px; }
.global-title-slide .concept-card-question { font-size:19px; }
.global-title-slide .concept-examples { gap:7px; margin-top:8px; }
.global-title-slide .concept-examples span { padding:5px 10px; font-size:17px; }
.global-title-slide .concept-summary { margin-top:7px; font-size:17px; }

.global-title-slide .title-prediction-area { display:grid; align-content:start; height:165px; max-height:none; margin:0; overflow:hidden; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s ease,visibility .3s ease; }
.global-title-slide .title-prediction-area.is-visible { height:165px; max-height:none; margin:0; opacity:1; visibility:visible; pointer-events:auto; }
.global-title-slide .prediction-label { font-size:15px; }
.reveal .global-title-slide .title-prediction-area h3 { margin:3px 0 7px; color:#334155; font-size:20px; line-height:1.2; }
.global-title-slide .title-prediction-options { gap:10px; }
.global-title-slide .title-prediction-option { min-height:66px; padding:9px 12px; font-size:18px; line-height:1.25; }
.global-title-slide .prediction-letter { width:32px; height:32px; font-size:18px; }
.global-title-slide .title-prediction-feedback { min-height:22px; margin-top:5px; color:#0f766e; font-size:17px; font-weight:850; }
.global-title-slide .title-prediction-option.is-best-prediction { border-color:#14b8a6; background:#f0fdfa; }

.page6-evidence-zone { display:grid; grid-template-columns:185px minmax(0,1fr); gap:14px; min-height:0; height:190px; }
.page6-nova-core,.page6-evidence-status { position:relative; min-width:0; height:190px; box-sizing:border-box; overflow:hidden; border:1px solid rgba(8,145,178,.20); border-radius:16px; background:rgba(255,255,255,.88); box-shadow:0 9px 23px rgba(15,76,105,.07); }
.page6-nova-core .page3-nova-core { position:absolute; left:50%; top:50%; translate:-50% -50%; transform:scale(.47); transform-origin:center; }
.page6-evidence-status { display:grid; grid-template-columns:250px minmax(0,1fr) 270px; align-items:center; gap:16px; padding:12px 20px; }
.page6-nova-message { align-self:stretch; display:grid; align-content:center; padding-right:16px; border-right:1px solid rgba(8,145,178,.18); }
.page6-nova-message strong { color:#0e7490; font-size:18px; letter-spacing:.6px; }
.page6-nova-message p { margin:8px 0 0; color:#405f70; font-size:18px; font-weight:700; line-height:1.35; }
.evidence-route { display:grid; grid-template-columns:.72fr 24px 1.35fr 24px .85fr; align-items:center; gap:6px; min-width:0; }
.evidence-route > div { display:grid; align-content:center; min-width:0; min-height:84px; padding:11px 12px; box-sizing:border-box; border-radius:12px; background:#eef9fb; }
.evidence-route small { color:#0e7490; font-size:13px; font-weight:900; letter-spacing:.65px; }
.evidence-route strong { margin-top:5px; color:#0b2946; font-size:18px; line-height:1.2; overflow-wrap:anywhere; }
.evidence-route > i { color:#16a6b7; font-size:23px; font-style:normal; text-align:center; }
.page6-task-complete { align-self:stretch; display:grid; align-content:center; padding-left:16px; border-left:1px solid rgba(8,145,178,.18); }
.page6-task-complete strong { color:#0f766e; font-size:18px; }
.page6-task-complete > span { margin-top:2px; color:#607887; font-size:13px; font-weight:850; }
.page6-task-complete b { margin-top:8px; color:#0e7490; font-size:18px; }
.page6-task-complete small { margin-top:8px; color:#718390; font-size:12px; font-weight:900; letter-spacing:.7px; }
.page6-task-complete p { margin:2px 0 0; color:#0b2946; font-size:17px; font-weight:800; line-height:1.25; }
.page6-task-complete[aria-hidden="true"] { opacity:.28; }
.page6-evidence-status.is-complete .page6-task-complete { opacity:1; }

@media (prefers-reduced-motion:reduce) {
    .global-title-slide .nova-ball,
    .global-title-slide .nova-orbit,
    .global-title-slide .nova-scan-ring { animation:none!important; }
}

/* Page 3–15 reusable title/subtitle translation affordance. */
.slide-title-translation-source {
    cursor:pointer;
    text-decoration-line:underline;
    text-decoration-style:dotted;
    text-decoration-color:rgba(14,148,162,.38);
    text-decoration-thickness:1px;
    text-underline-offset:5px;
}
.slide-title-translation-source:hover { text-decoration-color:#0e94a2; }
.slide-title-translation-source:focus-visible {
    outline:2px solid rgba(14,148,162,.55);
    outline-offset:4px;
    border-radius:4px;
}
.slide-title-translation-card {
    position:fixed;
    z-index:9200;
    box-sizing:border-box;
    min-height:54px;
    padding:13px 18px;
    border:1px solid rgba(14,148,162,.42);
    border-left:4px solid #16a6b7;
    border-radius:11px;
    color:#0b5368;
    background:rgba(244,254,255,.97);
    box-shadow:0 12px 30px rgba(8,57,84,.16),inset 0 0 16px rgba(39,207,214,.06);
    font:750 19px/1.45 Inter,"Segoe UI","PingFang SC",sans-serif;
    text-align:left;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-5px);
    transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.slide-title-translation-card.is-visible {
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}
@media (prefers-reduced-motion:reduce) {
    .slide-title-translation-card { transition:none; }
}

.transition-check {
    width: 26px;
    height: 26px;
}

/* =========================================================
   PAGE 7 · BASIC OPINION CAPTURE
========================================================= */

.basic-opinion-slide {

    box-sizing: border-box;

    width: 100%;
    height: 100%;

    padding: 26px 68px 20px;

    overflow: hidden;

    color: #0F172A;

    background:
        radial-gradient(
            circle at 92% 10%,
            rgba(56,189,248,.10),
            transparent 27%
        ),
        radial-gradient(
            circle at 5% 90%,
            rgba(20,184,166,.08),
            transparent 28%
        ),
        #F8FAFC;
}


/* Reading range */

.reading-range {

    margin-top: 5px;

    color: #64748B;

    font-size: 15px;

    font-weight: 600;
}


/* =========================================================
   TASK AREA
========================================================= */

.opinion-task-area {

    max-width: 1040px;

    margin:
        20px auto 0;
}


.opinion-block {

    box-sizing: border-box;

    padding: 16px 22px;

    border-radius: 14px;

    background:
        rgba(255,255,255,.94);

    box-shadow:
        0 9px 26px
        rgba(15,23,42,.07);
}


.problem-block {

    border-left:
        5px solid
        #F59E0B;
}


.solution-block {

    margin-top: 12px;

    border-left:
        5px solid
        #14B8A6;
}


.opinion-block-label {

    margin-bottom: 9px;

    color: #64748B;

    font-size: 13px;

    font-weight: 850;

    letter-spacing: 1.7px;
}


.problem-block
.opinion-block-label {

    color: #B45309;
}


.solution-block
.opinion-block-label {

    color: #0F766E;
}


/* sentences */

.opinion-sentence {

    color: #334155;

    font-size: 23px;

    font-weight: 620;

    line-height: 1.65;
}


.solution-sentence {

    font-size: 20px;

    line-height: 1.8;
}


/* =========================================================
   INPUT BLANKS
========================================================= */

.opinion-blank {

    width: 150px;

    box-sizing: border-box;

    margin:
        0 5px;

    padding:
        4px 8px;

    border: 0;

    border-bottom:
        2px solid
        #94A3B8;

    outline: none;

    color: #0F2F63;

    background:
        rgba(241,245,249,.75);

    font-family: inherit;

    font-size: 20px;

    font-weight: 750;

    text-align: center;

    transition:
        border-color .2s ease,
        background .2s ease,
        color .2s ease;
}


.opinion-blank.short-blank {

    width: 118px;
}


.opinion-blank:focus {

    border-bottom-color:
        #38BDF8;

    background:
        #F0F9FF;
}


/* correct */

.opinion-blank.is-correct {

    border-bottom-color:
        #14B8A6;

    color: #0F766E;

    background:
        #ECFDF5;
}


/* incorrect */

.opinion-blank.is-incorrect {

    border-bottom-color:
        #F59E0B;

    color: #B45309;

    background:
        #FFFBEB;
}


/* feedback */

.blank-feedback {

    min-height: 15px;

    margin-top: 4px;

    color: #64748B;

    font-size: 13px;

    font-weight: 650;
}


/* =========================================================
   BUTTONS
========================================================= */

.opinion-actions {

    display: flex;

    justify-content: center;

    gap: 10px;

    margin-top: 13px;
}


.check-opinion-button,
.reset-opinion-button {

    padding:
        8px 18px;

    border-radius:
        999px;

    font-family:
        inherit;

    font-size:
        14px;

    font-weight:
        750;

    cursor:
        pointer;
}


.check-opinion-button {

    border:
        1px solid
        #14B8A6;

    color: white;

    background:
        #14B8A6;
}


.check-opinion-button:hover {

    background:
        #0F766E;
}


.reset-opinion-button {

    border:
        1px solid
        rgba(100,116,139,.28);

    color:
        #64748B;

    background:
        transparent;
}


.reset-opinion-button:hover {

    color:
        #334155;

    background:
        #F1F5F9;
}


.opinion-overall-feedback {

    min-height: 18px;

    margin-top: 6px;

    text-align: center;

    color: #0F766E;

    font-size: 14px;

    font-weight: 750;
}


/* =========================================================
   GLOBAL MAP UPDATE
========================================================= */

.opinion-map-update {

    opacity: 0;

    pointer-events: none;

    max-height: 0;

    overflow: hidden;

    max-width: 900px;

    margin:
        0 auto;

    transition:
        opacity .35s ease,
        max-height .4s ease,
        margin-top .35s ease;
}


.opinion-map-update.is-visible {

    opacity: 1;

    pointer-events: auto;

    max-height: 140px;

    margin-top: 12px;
}


.map-update-label {

    margin-bottom: 6px;

    color: #64748B;

    text-align: center;

    font-size: 11px;

    font-weight: 850;

    letter-spacing: 1.8px;
}


.opinion-map-grid {

    display: grid;

    grid-template-columns:
        1fr 42px 1fr;

    align-items: center;

    gap: 7px;
}


.opinion-map-card {

    padding:
        10px 14px;

    border-radius:
        11px;

    background:
        white;

    text-align: center;

    box-shadow:
        0 6px 18px
        rgba(15,23,42,.06);
}


.map-problem {

    border-top:
        3px solid
        #F59E0B;
}


.map-solution {

    border-top:
        3px solid
        #14B8A6;
}


.map-card-tag {

    display: block;

    margin-bottom: 3px;

    color: #94A3B8;

    font-size: 10px;

    font-weight: 850;

    letter-spacing: 1.5px;
}


.opinion-map-card strong {

    color: #334155;

    font-size: 14px;

    font-weight: 750;
}


.map-arrow {

    color: #94A3B8;

    text-align: center;

    font-size: 23px;

    font-weight: 700;
}

/* =========================================================
   PAGE 8 · BACKGROUND GATHERING
========================================================= */

.background-match-slide {

    box-sizing: border-box;

    width: 100%;
    height: 100%;

    padding: 25px 68px 18px;

    overflow: hidden;

    color: #0F172A;

    background:
        radial-gradient(
            circle at 92% 10%,
            rgba(56,189,248,.10),
            transparent 27%
        ),
        radial-gradient(
            circle at 5% 90%,
            rgba(20,184,166,.08),
            transparent 28%
        ),
        #F8FAFC;
}


/* =========================================================
   MAIN MATCH AREA
========================================================= */

.background-match-area {

    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(0, .85fr);

    gap: 24px;

    margin-top: 17px;

    align-items: start;
}


/* =========================================================
   DROP ZONES
========================================================= */

.paragraph-zones {

    display: grid;

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

    gap: 11px;
}


.paragraph-zone {

    position: relative;

    min-height: 108px;

    box-sizing: border-box;

    padding: 13px 15px;

    border:
        2px dashed
        rgba(148,163,184,.46);

    border-radius: 13px;

    background:
        rgba(255,255,255,.78);

    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease;
}


.paragraph-zone.drag-over {

    border-color: #38BDF8;

    background: #F0F9FF;

    transform:
        translateY(-2px);
}


.paragraph-zone.correct {

    border:
        2px solid
        #22C55E;

    background:
        #F0FDF4;
}


.paragraph-zone.wrong {

    border-color:
        #F59E0B;

    background:
        #FFFBEB;
}


.paragraph-number {

    color: #0F3D62;

    font-size: 16px;

    font-weight: 850;

    letter-spacing: 1px;
}


.paragraph-drop-label {

    display: flex;

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

    min-height: 55px;

    color: #94A3B8;

    font-size: 14px;

    text-align: center;
}


/* card after drop */

.paragraph-zone
.background-idea-card {

    margin-top: 7px;

    min-height: 0;

    padding: 9px 11px;

    box-shadow: none;

    cursor: default;
}


/* =========================================================
   IDEA BANK
========================================================= */

.background-idea-bank {

    display: grid;

    gap: 9px;

    padding: 14px;

    border-radius: 14px;

    background:
        rgba(226,232,240,.45);
}


.idea-bank-label {

    color: #64748B;

    font-size: 12px;

    font-weight: 850;

    letter-spacing: 2px;
}


.background-idea-card {

    box-sizing: border-box;

    min-height: 64px;

    padding: 11px 14px;

    border:
        1px solid
        rgba(148,163,184,.24);

    border-radius: 10px;

    color: #334155;

    background: white;

    box-shadow:
        0 5px 15px
        rgba(15,23,42,.06);

    font-size: 15px;

    font-weight: 650;

    line-height: 1.32;

    cursor: grab;

    transition:
        transform .18s ease,
        opacity .18s ease,
        box-shadow .18s ease;
}


.background-idea-card:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px
        rgba(15,23,42,.10);
}


.background-idea-card.dragging {

    opacity: .45;
}


/* =========================================================
   CONTROLS
========================================================= */

.background-controls {

    display: flex;

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

    gap: 16px;

    margin-top: 11px;
}


.background-progress {

    color: #64748B;

    font-size: 14px;

    font-weight: 650;
}


.background-progress strong {

    color: #0F766E;

    font-size: 16px;
}


.reset-background-button {

    padding: 7px 15px;

    border:
        1px solid
        rgba(100,116,139,.28);

    border-radius: 999px;

    color: #64748B;

    background: transparent;

    font-family: inherit;

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;
}


.reset-background-button:hover {

    color: #334155;

    background: #F1F5F9;
}


/* =========================================================
   GLOBAL MAP UPDATE
========================================================= */

.background-map-update {

    opacity: 0;

    pointer-events: none;

    max-height: 0;

    overflow: hidden;

    margin-top: 0;

    transition:
        opacity .35s ease,
        max-height .4s ease,
        margin-top .3s ease;
}


.background-map-update.is-visible {

    opacity: 1;

    pointer-events: auto;

    max-height: 110px;

    margin-top: 10px;
}


.background-map-flow {

    display: flex;

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

    gap: 8px;
}


.background-map-node {

    padding: 8px 12px;

    border-radius: 9px;

    color: #475569;

    background: white;

    box-shadow:
        0 5px 15px
        rgba(15,23,42,.05);

    font-size: 13px;

    font-weight: 700;

    text-align: center;
}


.map-node-emphasis {

    color: #0F766E;

    background: #F0FDFA;
}


.map-node-problem {

    color: #B45309;

    background: #FFFBEB;
}


.background-flow-arrow {

    color: #94A3B8;

    font-size: 19px;

    font-weight: 800;
}

/* =========================================================
   PAGE 9 · READ & APPLY
========================================================= */

.read-apply-slide {

    box-sizing: border-box;

    width: 100%;
    height: 100%;

    padding: 24px 68px 16px;

    overflow: hidden;

    color: #0F172A;

    background:
        radial-gradient(
            circle at 92% 8%,
            rgba(56,189,248,.10),
            transparent 27%
        ),
        radial-gradient(
            circle at 6% 90%,
            rgba(20,184,166,.09),
            transparent 28%
        ),
        #F8FAFC;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.read-apply-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, .95fr);

    gap: 24px;

    margin-top: 15px;

    align-items: start;
}


/* =========================================================
   IMAGE
========================================================= */

.read-apply-image-panel {

    min-width: 0;
}


.read-apply-image {

    display: block;

    width: 100%;
    height: 270px;

    object-fit: cover;

    border-radius: 15px;

    box-shadow:
        0 12px 30px
        rgba(15,23,42,.12);
}


.image-observation-prompt {

    margin-top: 8px;

    color: #64748B;

    font-size: 15px;

    text-align: center;
}


.image-observation-prompt strong {

    color: #0F3D62;
}


/* =========================================================
   LANGUAGE TOOLBOX
========================================================= */

.read-apply-tools {

    padding: 16px 18px;

    border-radius: 15px;

    background:
        rgba(255,255,255,.94);

    box-shadow:
        0 9px 26px
        rgba(15,23,42,.07);
}


.toolbox-label {

    margin-bottom: 10px;

    color: #0F766E;

    font-size: 13px;

    font-weight: 850;

    letter-spacing: 2px;
}


.toolbox-group +
.toolbox-group {

    margin-top: 10px;
}


.toolbox-group-title {

    margin-bottom: 6px;

    color: #64748B;

    font-size: 11px;

    font-weight: 850;

    letter-spacing: 1.4px;
}


.toolbox-chips {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;
}


.toolbox-chip {

    padding: 6px 10px;

    border-radius: 999px;

    color: #334155;

    background: #F1F5F9;

    font-size: 13px;

    font-weight: 650;

    cursor: pointer;
}


.toolbox-chip:hover {

    background: #E0F2FE;
}


/* Translation inside chip */

.toolbox-chip .translation {

    margin-left: 5px;

    color: #0F766E;

    font-size: 12px;
}


/* =========================================================
   TASK
========================================================= */

.read-apply-task {

    margin-top: 12px;

    padding-top: 11px;

    border-top:
        1px solid
        rgba(148,163,184,.22);
}


.read-apply-task-label {

    color: #B45309;

    font-size: 11px;

    font-weight: 850;

    letter-spacing: 1.5px;
}


.reveal .read-apply-task p {

    margin:
        5px 0 7px;

    color: #334155;

    font-size: 15px;

    line-height: 1.3;
}


.read-apply-hint-button {

    padding: 5px 11px;

    border:
        1px solid
        rgba(20,184,166,.30);

    border-radius: 999px;

    color: #0F766E;

    background: #F0FDFA;

    font-family: inherit;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;
}


.read-apply-hints {

    display: none;

    margin-top: 7px;

    padding:
        7px 10px;

    border-left:
        3px solid
        #38BDF8;

    background:
        #F0F9FF;
}


.read-apply-hints.is-visible {

    display: block;
}


.reveal .read-apply-hints p {

    margin: 2px 0;

    color: #475569;

    font-size: 12px;
}


/* =========================================================
   SELF ASSESSMENT
========================================================= */

.read-apply-assessment {

    margin-top: 13px;

    padding:
        11px 15px;

    border-radius: 13px;

    background:
        rgba(255,255,255,.88);

    box-shadow:
        0 6px 20px
        rgba(15,23,42,.05);
}


.self-check-title {

    margin-bottom: 8px;

    color: #0F3D62;

    font-size: 12px;

    font-weight: 850;

    letter-spacing: 1.7px;
}


.self-check-grid {

    display: grid;

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

    gap: 7px 12px;
}


.self-check-item {

    display: grid;

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

    align-items: center;

    gap: 7px;

    padding:
        7px 9px;

    border:
        1px solid
        rgba(148,163,184,.20);

    border-radius: 9px;

    color: #475569;

    background: #F8FAFC;

    font-size: 12px;

    line-height: 1.25;

    cursor: pointer;
}


.self-check-item input {

    width: 16px;
    height: 16px;

    accent-color: #14B8A6;
}


.self-check-item strong {

    color: #334155;
}


.check-points {

    color: #0F766E;

    font-weight: 850;
}


.bonus-check {

    border-color:
        rgba(245,158,11,.30);

    background:
        #FFFBEB;
}


.bonus-check
.check-points {

    color: #B45309;
}


/* =========================================================
   SUBMIT + FEEDBACK
========================================================= */

.self-check-actions {

    text-align: center;

    margin-top: 8px;
}


.submit-self-check-button {

    padding:
        7px 16px;

    border: 0;

    border-radius: 999px;

    color: white;

    background: #14B8A6;

    font-family: inherit;

    font-size: 13px;

    font-weight: 750;

    cursor: pointer;
}


.submit-self-check-button:hover {

    background: #0F766E;
}


.read-apply-feedback {

    min-height: 16px;

    margin-top: 5px;

    text-align: center;

    color: #0F766E;

    font-size: 12px;

    font-weight: 700;
}


/* =========================================================
   TRANSITION
========================================================= */

.read-apply-transition {

    display: none;

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

    gap: 10px;

    margin-top: 7px;

    color: #475569;

    font-size: 13px;
}


.read-apply-transition.is-visible {

    display: flex;

    animation:
        titleTransitionIn
        .35s ease
        both;
}


.read-apply-transition strong {

    color: #0F766E;

    margin-right: 5px;
}

/* =========================================================
   PAGE 9 · VERTICAL FIT FIX
========================================================= */

.read-apply-slide {
    padding-top: 18px;
    padding-bottom: 10px;
}


/* header tighter */

.read-apply-slide .section-tag {
    margin-bottom: 5px;
}

.read-apply-slide .global-reading-header {
    margin-top: 0;
}

.read-apply-slide .global-reading-kicker {
    margin-bottom: 2px;
}

.reveal .read-apply-slide .global-reading-title {
    font-size: 32px;
    line-height: 1.05;
}

.read-apply-slide .reading-range {
    margin-top: 3px;
}


/* main content moves upward */

.read-apply-layout {
    margin-top: 10px;
    gap: 20px;
}


/* reduce image height */

.read-apply-image {
    height: 225px;
}

.image-observation-prompt {
    margin-top: 5px;
    font-size: 13px;
}


/* toolbox more compact */

.read-apply-tools {
    padding: 12px 15px;
}

.toolbox-label {
    margin-bottom: 6px;
}

.toolbox-group + .toolbox-group {
    margin-top: 7px;
}

.toolbox-group-title {
    margin-bottom: 4px;
}

.toolbox-chips {
    gap: 4px;
}

.toolbox-chip {
    padding: 4px 8px;
    font-size: 12px;
}


/* task compact */

.read-apply-task {
    margin-top: 8px;
    padding-top: 7px;
}

.reveal .read-apply-task p {
    margin: 3px 0 5px;
    font-size: 14px;
}

.read-apply-hint-button {
    padding: 4px 9px;
    font-size: 11px;
}

.read-apply-hints {
    margin-top: 5px;
    padding: 5px 8px;
}


/* self-assessment moves upward */

.read-apply-assessment {
    margin-top: 8px;
    padding: 8px 12px;
}

.self-check-title {
    margin-bottom: 5px;
}

.self-check-grid {
    gap: 5px 9px;
}

.self-check-item {
    padding: 5px 7px;
    font-size: 11px;
}

.self-check-item input {
    width: 14px;
    height: 14px;
}


/* submit / feedback tighter */

.self-check-actions {
    margin-top: 5px;
}

.submit-self-check-button {
    padding: 5px 13px;
    font-size: 12px;
}

.read-apply-feedback {
    min-height: 12px;
    margin-top: 3px;
}


/* transition */

.read-apply-transition {
    margin-top: 4px;
    font-size: 12px;
}

.read-apply-image {
    height: 205px;
}

/* =========================================================
   PAGE 9 · FINAL BOTTOM FIT
========================================================= */

/* self-check section slightly tighter */

.read-apply-assessment {
    margin-top: 6px;
    padding: 6px 10px;
}


/* title takes less space */

.self-check-title {
    margin-bottom: 4px;
    font-size: 11px;
}


/* reduce vertical gap between the 4 checklist cards */

.self-check-grid {
    gap: 4px 8px;
}


/* shorter checklist cards */

.self-check-item {
    min-height: 0;

    padding: 4px 7px;

    font-size: 10.5px;

    line-height: 1.15;
}


/* slightly smaller checkboxes */

.self-check-item input {
    width: 13px;
    height: 13px;
}


/* point label smaller */

.check-points {
    font-size: 12px;
}


/* submit area */

.self-check-actions {
    margin-top: 4px;
}

.submit-self-check-button {
    padding: 4px 12px;
    font-size: 11px;
}


/* feedback */

.read-apply-feedback {
    min-height: 10px;
    margin-top: 2px;

    font-size: 11px;
}


/* final transition */

.read-apply-transition {
    margin-top: 3px;
    font-size: 11px;
}

.self-check-grid {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

.self-check-item {
    letter-spacing: -0.1px;
}

/* =========================================================
   PAGE 10 · SUPPORTING DETAILS
========================================================= */

.supporting-details-slide {

    box-sizing: border-box;

    width: 100%;
    height: 100%;

    padding: 22px 68px 15px;

    overflow: hidden;

    color: #0F172A;

    background:
        radial-gradient(
            circle at 92% 8%,
            rgba(56,189,248,.10),
            transparent 27%
        ),
        radial-gradient(
            circle at 6% 92%,
            rgba(20,184,166,.08),
            transparent 28%
        ),
        #F8FAFC;
}


/* strategy */

.evidence-strategy {

    display: flex;

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

    gap: 8px;

    margin:
        10px auto
        11px;

    color: #475569;

    font-size: 13px;
}


.strategy-label {

    padding:
        4px 8px;

    border-radius: 999px;

    color: #0F766E;

    background: #CCFBF1;

    font-size: 10px;

    font-weight: 850;

    letter-spacing: 1px;
}


/* =========================================================
   GRID
========================================================= */

.tf-grid {

    display: grid;

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

    gap: 10px 14px;
}


.tf-card {

    position: relative;

    min-height: 175px;

    box-sizing: border-box;

    padding:
        12px 14px
        11px 44px;

    border:
        1px solid
        rgba(148,163,184,.22);

    border-radius: 12px;

    background: white;

    box-shadow:
        0 7px 20px
        rgba(15,23,42,.06);
}


.tf-number {

    position: absolute;

    top: 13px;
    left: 13px;

    color: #0F766E;

    font-size: 12px;

    font-weight: 850;
}


.tf-statement {

    min-height: 42px;

    color: #334155;

    font-size: 15px;

    font-weight: 650;

    line-height: 1.3;
}


/* buttons */

.tf-actions {

    display: flex;

    gap: 7px;

    margin-top: 8px;
}


.tf-button {

    padding:
        5px 11px;

    border:
        1px solid
        rgba(148,163,184,.30);

    border-radius: 999px;

    color: #475569;

    background: #F8FAFC;

    font-family: inherit;

    font-size: 11px;

    font-weight: 800;

    cursor: pointer;
}


.tf-button:hover {

    border-color: #14B8A6;
}


.tf-button.is-correct {

    color: white;

    border-color: #14B8A6;

    background: #14B8A6;
}


.tf-button.is-wrong {

    color: #B45309;

    border-color: #F59E0B;

    background: #FFFBEB;
}


.tf-feedback {

    min-height: 14px;

    margin-top: 4px;

    color: #0F766E;

    font-size: 11px;

    font-weight: 700;
}


/* Evidence */

.evidence-button {

    margin-top: 3px;

    padding: 0;

    border: 0;

    color: #0284C7;

    background: transparent;

    font-family: inherit;

    font-size: 11px;

    font-weight: 750;

    cursor: pointer;
}


.tf-evidence {

    display: none;

    margin-top: 5px;

    padding:
        6px 8px;

    border-left:
        3px solid
        #38BDF8;

    border-radius: 4px;

    color: #475569;

    background: #F0F9FF;

    font-size: 10.5px;

    line-height: 1.25;
}


.tf-evidence.is-visible {

    display: block;
}


.evidence-source {

    margin-right: 4px;

    color: #0284C7;

    font-weight: 850;
}


/* =========================================================
   GLOBAL MAP
========================================================= */

.details-map-update {

    opacity: 0;

    pointer-events: none;

    max-height: 0;

    overflow: hidden;

    margin-top: 0;

    transition:
        opacity .3s ease,
        max-height .35s ease,
        margin-top .3s ease;
}


.details-map-update.is-visible {

    opacity: 1;

    pointer-events: auto;

    max-height: 90px;

    margin-top: 9px;
}


.details-map-flow {

    display: flex;

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

    gap: 7px;
}


.details-map-node {

    padding:
        6px 10px;

    border-radius: 8px;

    color: #475569;

    background: white;

    font-size: 11px;

    font-weight: 700;

    box-shadow:
        0 4px 12px
        rgba(15,23,42,.05);
}


.problem-node {

    color: #B45309;

    background: #FFFBEB;
}


.details-arrow {

    color: #94A3B8;

    font-size: 16px;

    font-weight: 800;
}

/* =========================================================
   PAGE 10 · EXPANDABLE EVIDENCE CARDS
========================================================= */

/* Grid keeps two columns */

.tf-grid {
    display: grid;

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

    gap: 12px 14px;

    align-items: start;
}


/* Normal card */

.tf-card {
    position: relative;

    min-height: 145px;
    height: auto;

    padding:
        12px 14px
        12px 44px;

    overflow: visible;
}


/* Statement */

.tf-statement {
    min-height: 38px;

    font-size: 14px;
    line-height: 1.25;
}


/* T/F buttons */

.tf-actions {
    margin-top: 6px;
}


/* Feedback stays in normal document flow */

.tf-feedback {
    position: static;

    min-height: 14px;

    margin-top: 4px;

    font-size: 11px;
}


/* Evidence button also stays in flow */

.evidence-button {
    position: static;

    display: inline-block;

    margin-top: 4px;

    padding: 0;
}


/* Evidence hidden initially */

.tf-evidence {
    display: none;

    position: static;

    margin-top: 6px;

    padding: 7px 9px;

    border-left:
        3px solid #38BDF8;

    border-radius: 5px;

    color: #475569;

    background: #F0F9FF;

    box-shadow: none;

    font-size: 10.5px;
    line-height: 1.25;
}


/* Expand inside card */

.tf-evidence.is-visible {
    display: block;
}


/* Expanded card gets slightly more space */

.tf-card:has(.tf-evidence.is-visible) {
    padding-bottom: 12px;
}

/* =========================================================
   PAGE 11 · INFERENCE & CONCLUSION
========================================================= */

.inference-slide {

    box-sizing: border-box;

    width: 100%;
    height: 100%;

    padding: 24px 68px 18px;

    overflow: hidden;

    color: #0F172A;

    background:
        radial-gradient(
            circle at 92% 8%,
            rgba(56,189,248,.10),
            transparent 27%
        ),
        radial-gradient(
            circle at 6% 92%,
            rgba(20,184,166,.08),
            transparent 28%
        ),
        #F8FAFC;
}


/* =========================================================
   STEP 1
========================================================= */

.attitude-task {

    max-width: 1020px;

    margin:
        18px auto 0;

    padding:
        15px 18px;

    border-radius: 14px;

    background: white;

    box-shadow:
        0 8px 24px
        rgba(15,23,42,.07);
}


.attitude-question-label {

    color: #0F766E;

    font-size: 12px;

    font-weight: 850;

    letter-spacing: 1.6px;
}


.attitude-options {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0,1fr));

    gap: 10px;

    margin-top: 10px;
}


.attitude-option {

    display: flex;

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

    gap: 9px;

    padding:
        11px 10px;

    border:
        1px solid
        rgba(148,163,184,.28);

    border-radius: 10px;

    color: #475569;

    background: #F8FAFC;

    font-family: inherit;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease;
}


.attitude-option:hover {

    transform: translateY(-2px);

    border-color:
        #14B8A6;
}


.attitude-letter {

    display: flex;

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

    width: 27px;
    height: 27px;

    border-radius: 50%;

    background: #E0F2FE;

    color: #0F3D62;

    font-size: 12px;

    font-weight: 850;
}


.attitude-option.is-correct {

    border-color:
        #14B8A6;

    color: #0F766E;

    background:
        #F0FDFA;
}


.attitude-option.is-wrong {

    border-color:
        #F59E0B;

    color: #B45309;

    background:
        #FFFBEB;
}


.attitude-feedback {

    min-height: 17px;

    margin-top: 7px;

    color: #0F766E;

    text-align: center;

    font-size: 13px;

    font-weight: 700;
}


/* =========================================================
   STEP 2
========================================================= */

.inference-evidence-stage {

    opacity: 0;

    pointer-events: none;

    max-height: 0;

    overflow: hidden;

    max-width: 1020px;

    margin: 0 auto;

    transition:
        opacity .3s ease,
        max-height .4s ease,
        margin-top .3s ease;
}


.inference-evidence-stage.is-visible {

    opacity: 1;

    pointer-events: auto;

    max-height: 220px;

    margin-top: 12px;
}


.evidence-question {

    margin-top: 4px;

    color: #334155;

    font-size: 17px;

    font-weight: 700;
}


.clue-options {

    display: flex;

    gap: 9px;

    margin-top: 8px;
}


.clue-option {

    padding:
        7px 14px;

    border:
        1px solid
        rgba(148,163,184,.28);

    border-radius: 999px;

    color: #475569;

    background: white;

    font-family: inherit;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;
}


.clue-option.is-correct {

    color: white;

    border-color:
        #14B8A6;

    background:
        #14B8A6;
}


.clue-option.is-wrong {

    color: #B45309;

    border-color:
        #F59E0B;

    background:
        #FFFBEB;
}


.clue-feedback {

    min-height: 15px;

    margin-top: 5px;

    color: #0F766E;

    font-size: 12px;

    font-weight: 700;
}


/* partisan reveal */

.partisan-explanation {

    display: none;

    align-items: center;

    gap: 12px;

    margin-top: 8px;

    padding:
        8px 12px;

    border-left:
        4px solid
        #14B8A6;

    border-radius: 7px;

    background:
        #F0FDFA;
}


.partisan-explanation.is-visible {

    display: flex;

    animation:
        titleTransitionIn
        .3s ease
        both;
}


.partisan-word {

    color: #0F766E;

    font-size: 18px;

    font-weight: 850;
}


.partisan-definition {

    color: #64748B;

    font-size: 13px;

    font-style: italic;
}


.partisan-link {

    margin-left: auto;

    color: #475569;

    font-size: 12px;
}


.partisan-link strong {

    color: #0F3D62;
}


/* =========================================================
   CONCLUSION
========================================================= */

.author-conclusion {

    opacity: 0;

    pointer-events: none;

    max-height: 0;

    overflow: hidden;

    max-width: 920px;

    margin:
        0 auto;

    text-align: center;

    transition:
        opacity .35s ease,
        max-height .4s ease,
        margin-top .3s ease;
}


.author-conclusion.is-visible {

    opacity: 1;

    pointer-events: auto;

    max-height: 130px;

    margin-top: 12px;
}


.conclusion-label {

    color: #B45309;

    font-size: 11px;

    font-weight: 850;

    letter-spacing: 1.7px;
}


.conclusion-main {

    margin-top: 4px;

    color: #0F2F63;

    font-size: 21px;

    font-weight: 800;
}


.conclusion-support {

    margin-top: 3px;

    color: #64748B;

    font-size: 13px;
}


/* =========================================================
   GLOBAL MAP
========================================================= */

.inference-map-update {

    opacity: 0;

    pointer-events: none;

    max-height: 0;

    overflow: hidden;

    margin-top: 0;

    transition:
        opacity .3s ease,
        max-height .35s ease,
        margin-top .3s ease;
}


.inference-map-update.is-visible {

    opacity: 1;

    pointer-events: auto;

    max-height: 80px;

    margin-top: 9px;
}


.inference-map-flow {

    display: flex;

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

    gap: 7px;
}


.inference-map-node {

    padding:
        6px 11px;

    border-radius: 8px;

    color: #475569;

    background: white;

    font-size: 11px;

    font-weight: 700;

    box-shadow:
        0 4px 12px
        rgba(15,23,42,.05);
}


.final-node {

    color: #0F766E;

    background:
        #F0FDFA;

    font-weight: 850;
}


.inference-arrow {

    color: #94A3B8;

    font-size: 16px;

    font-weight: 800;
}

/* =========================================================
   PAGE 11 · CLEAN CLOSING LAYOUT
========================================================= */

.author-conclusion.is-visible {

    max-height: 150px;

    margin-top: 18px;

    padding: 14px 20px;

    box-sizing: border-box;

    border-top: 3px solid #F59E0B;

    border-radius: 12px;

    background:
        rgba(255,255,255,.88);

    box-shadow:
        0 7px 22px
        rgba(15,23,42,.05);
}


.conclusion-label {

    margin-bottom: 5px;
}


.conclusion-main {

    margin-top: 0;

    font-size: 22px;
}


.conclusion-support {

    margin-top: 5px;

    font-size: 14px;
}

/* =========================================================
   PAGE 12 · GLOBAL REVIEW · FINAL OVERRIDE
========================================================= */

.global-review-slide {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 22px 68px 16px;
    overflow: hidden;
    color: #0F172A;

    background:
        radial-gradient(
            circle at 92% 8%,
            rgba(56,189,248,.10),
            transparent 27%
        ),
        radial-gradient(
            circle at 6% 92%,
            rgba(20,184,166,.08),
            transparent 28%
        ),
        #F8FAFC;
}


.global-review-slide .global-review-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}


.reveal .global-review-slide .global-review-title {
    margin: 3px 0 0;
    color: #0F172A;
    font-size: 34px;
    font-weight: 780;
    line-height: 1.08;
    text-transform: none;
}


.global-review-slide .review-complete-badge {
    flex-shrink: 0;

    padding: 9px 15px;

    border: 1px solid rgba(20,184,166,.24);
    border-radius: 999px;

    color: #64748B;
    background: rgba(255,255,255,.92);

    font-size: 11px;
    font-weight: 750;
    letter-spacing: 1px;
    text-align: center;

    box-shadow:
        0 6px 18px rgba(15,23,42,.05);
}


.global-review-slide .review-complete-badge strong {
    display: block;
    margin-top: 2px;

    color: #0F766E;
    font-size: 14px;
}


/* =========================================================
   FOUR-STAGE MAP
========================================================= */

.global-review-slide .global-review-map {
    max-width: 1030px;
    margin: 13px auto 0;
}


.global-review-slide .review-stage {
    display: grid;

    grid-template-columns:
        46px
        minmax(0,1fr);

    gap: 12px;

    align-items: center;

    min-height: 86px;

    padding: 9px 15px;

    box-sizing: border-box;

    border: 1px solid rgba(148,163,184,.20);
    border-radius: 12px;

    background: rgba(255,255,255,.94);

    box-shadow:
        0 6px 18px rgba(15,23,42,.05);
}


.global-review-slide .review-stage-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    border-radius: 50%;

    color: white;
    background: #0F766E;

    font-size: 13px;
    font-weight: 850;
}


.global-review-slide .review-stage-range {
    color: #64748B;

    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1.4px;
}


.global-review-slide .review-stage-title {
    margin-top: 1px;

    color: #0F3D62;

    font-size: 15px;
    font-weight: 800;
}


.global-review-slide .review-stage-main {
    margin-top: 2px;

    color: #475569;

    font-size: 13px;
    line-height: 1.22;
}


.global-review-slide .review-stage-main strong {
    color: #0F766E;
}


.global-review-slide .review-stage-keywords {
    margin-top: 3px;

    color: #94A3B8;

    font-size: 10.5px;
    font-style: italic;
}


.global-review-slide .stage-one {
    border-left: 4px solid #F59E0B;
}

.global-review-slide .stage-two {
    border-left: 4px solid #38BDF8;
}

.global-review-slide .stage-three {
    border-left: 4px solid #8B5CF6;
}

.global-review-slide .stage-four {
    border-left: 4px solid #14B8A6;
}


.global-review-slide .review-flow-arrow {
    height: 12px;

    color: #94A3B8;

    text-align: center;

    font-size: 14px;
    line-height: 12px;
    font-weight: 800;
}


/* =========================================================
   TITLE CALLBACK
========================================================= */

.global-review-slide .title-callback {
    margin-top: 9px;
    text-align: center;
    cursor: pointer;
}


.global-review-slide .callback-label {
    color: #B45309;

    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1.6px;
}


.global-review-slide .callback-title {
    margin-top: 1px;

    color: #0F2F63;

    font-size: 20px;
    font-weight: 850;
}


.global-review-slide .callback-title span {
    margin: 0 6px;

    color: #F59E0B;

    font-size: 14px;
    font-style: italic;
}


.global-review-slide .callback-question {
    margin-top: 1px;

    color: #64748B;

    font-size: 11px;
}


.global-review-slide .callback-answer {
    opacity: 0;

    transform: translateY(5px);

    margin-top: 5px;

    color: #475569;

    text-align: center;

    font-size: 13px;

    transition:
        opacity .3s ease,
        transform .3s ease;
}


.global-review-slide .callback-answer.is-visible {
    opacity: 1;
    transform: translateY(0);
}


.global-review-slide .callback-answer strong {
    color: #0F766E;
}

/* =========================================================
   PAGE 12 · FINAL BOTTOM FIT
========================================================= */

.global-review-slide {
    padding-top: 18px;
    padding-bottom: 10px;
}


/* header slightly tighter */

.global-review-slide .global-review-map {
    margin-top: 9px;
}


/* make the four cards shorter */

.global-review-slide .review-stage {
    min-height: 74px;

    padding:
        7px 14px;
}


/* slightly smaller spacing inside cards */

.global-review-slide .review-stage-range {
    font-size: 9px;
}

.global-review-slide .review-stage-title {
    margin-top: 0;
    font-size: 14px;
}

.global-review-slide .review-stage-main {
    margin-top: 1px;
    font-size: 12px;
    line-height: 1.18;
}

.global-review-slide .review-stage-keywords {
    margin-top: 2px;
    font-size: 9.5px;
}


/* smaller connecting arrows */

.global-review-slide .review-flow-arrow {
    height: 8px;
    line-height: 8px;
    font-size: 12px;
}


/* bring title callback upward */

.global-review-slide .title-callback {
    margin-top: 5px;
}

.global-review-slide .callback-label {
    font-size: 9px;
}

.global-review-slide .callback-title {
    margin-top: 0;
    font-size: 18px;
}

.global-review-slide .callback-question {
    margin-top: 0;
    font-size: 10px;
}

.global-review-slide .callback-answer {
    margin-top: 3px;
    font-size: 12px;
}

/* =========================================================
   PAGE 13 · FUN VOCABULARY
========================================================= */

.fun-vocab-slide {

    box-sizing: border-box;

    width: 100%;
    height: 100%;

    padding: 22px 68px 14px;

    overflow: hidden;

    color: #0F172A;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(245,158,11,.10),
            transparent 27%
        ),
        radial-gradient(
            circle at 5% 92%,
            rgba(20,184,166,.09),
            transparent 28%
        ),
        #F8FAFC;
}


/* =========================================================
   HEADER
========================================================= */

.fun-vocab-header {

    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 25px;
}


.reveal .fun-vocab-title {

    margin:
        3px 0
        0;

    color: #0F172A;

    font-size: 35px;

    font-weight: 780;

    line-height: 1.08;

    text-transform: none;
}


.fun-vocab-subtitle {

    margin-top: 4px;

    color: #64748B;

    font-size: 14px;
}


.vocab-progress-card {

    flex-shrink: 0;

    padding:
        8px 14px;

    border:
        1px solid
        rgba(245,158,11,.25);

    border-radius: 999px;

    color: #64748B;

    background: white;

    font-size: 12px;

    font-weight: 700;
}


.vocab-progress-card strong {

    margin-left: 6px;

    color: #B45309;

    font-size: 17px;
}


/* =========================================================
   PUZZLE AREA
========================================================= */

.word-puzzle-area {

    max-width: 1030px;

    margin:
        14px auto 0;

    padding:
        12px 16px;

    border-radius: 14px;

    background:
        rgba(255,255,255,.92);

    box-shadow:
        0 7px 20px
        rgba(15,23,42,.06);
}


.word-puzzle-label,
.word-discovery-label {

    color: #B45309;

    font-size: 11px;

    font-weight: 850;

    letter-spacing: 1.7px;
}


.word-card-grid {

    display: grid;

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

    gap: 9px;

    margin-top: 9px;
}


.word-puzzle-card {

    padding:
        12px 10px;

    border:
        1px solid
        rgba(148,163,184,.25);

    border-radius: 10px;

    color: #0F3D62;

    background: #F8FAFC;

    font-family: inherit;

    font-size: 18px;

    font-weight: 760;

    cursor: pointer;

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease;
}


.word-puzzle-card:hover {

    transform:
        translateY(-2px);

    border-color: #38BDF8;

    background: #F0F9FF;
}


.word-puzzle-card.is-selected {

    color: white;

    border-color: #0284C7;

    background: #0284C7;
}


.word-puzzle-card.is-connected {

    color: #0F766E;

    border-color: #14B8A6;

    background: #F0FDFA;
}


.word-puzzle-card.is-wrong {

    color: #B45309;

    border-color: #F59E0B;

    background: #FFFBEB;
}


.word-puzzle-feedback {

    min-height: 18px;

    margin-top: 7px;

    color: #64748B;

    text-align: center;

    font-size: 12px;

    font-weight: 700;
}


/* =========================================================
   DISCOVERY
========================================================= */

.word-discovery-area {

    opacity: 0;

    pointer-events: none;

    max-height: 0;

    overflow: hidden;

    max-width: 1030px;

    margin:
        0 auto;

    transition:
        opacity .3s ease,
        max-height .4s ease,
        margin-top .3s ease;
}


.word-discovery-area.is-visible {

    opacity: 1;

    pointer-events: auto;

    max-height: 140px;

    margin-top: 10px;
}


.word-part-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0,1fr));

    gap: 8px;

    margin-top: 7px;
}


.word-part-card {

    padding:
        7px 9px;

    border-radius: 9px;

    background: white;

    box-shadow:
        0 5px 15px
        rgba(15,23,42,.05);

    text-align: center;
}


.word-part {

    color: #0F766E;

    font-size: 16px;

    font-weight: 850;
}


.word-part-meaning {

    margin-top: 2px;

    color: #64748B;

    font-size: 10.5px;
}


/* =========================================================
   TRANSFER
========================================================= */

.word-transfer-area {

    opacity: 0;

    pointer-events: none;

    max-height: 0;

    overflow: hidden;

    max-width: 1030px;

    margin:
        0 auto;

    text-align: center;

    transition:
        opacity .3s ease,
        max-height .4s ease,
        margin-top .3s ease;
}


.word-transfer-area.is-visible {

    opacity: 1;

    pointer-events: auto;

    max-height: 220px;

    margin-top: 10px;
}


.word-building-row {

    display: flex;

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

    gap: 10px;

    margin-top: 7px;
}


.morpheme-block {

    display: flex;

    flex-direction: column;

    min-width: 150px;

    padding:
        7px 12px;

    border-radius: 10px;

    background: white;

    box-shadow:
        0 5px 15px
        rgba(15,23,42,.05);
}


.morpheme-block strong {

    color: #0F766E;

    font-size: 18px;
}


.morpheme-block span {

    color: #64748B;

    font-size: 10px;
}


.word-build-symbol {

    color: #94A3B8;

    font-size: 20px;

    font-weight: 850;
}


.new-word-box {

    min-width: 125px;

    padding:
        8px 13px;

    border:
        2px dashed
        rgba(20,184,166,.45);

    border-radius: 10px;

    color: #0F766E;

    background: #F0FDFA;

    font-size: 19px;

    font-weight: 850;
}


.unlock-word-button {

    margin-top: 7px;

    padding:
        6px 14px;

    border: 0;

    border-radius: 999px;

    color: white;

    background: #14B8A6;

    font-family: inherit;

    font-size: 12px;

    font-weight: 750;

    cursor: pointer;
}


/* Telegraph challenge */

.telegraph-challenge {

    display: none;

    margin-top: 8px;
}


.telegraph-challenge.is-visible {

    display: block;
}


.telegraph-question {

    color: #334155;

    font-size: 13px;

    font-weight: 700;
}


.telegraph-options {

    display: flex;

    justify-content: center;

    gap: 8px;

    margin-top: 6px;
}


.telegraph-option {

    padding:
        6px 10px;

    border:
        1px solid
        rgba(148,163,184,.25);

    border-radius: 999px;

    color: #475569;

    background: white;

    font-family: inherit;

    font-size: 11px;

    font-weight: 700;

    cursor: pointer;
}


.telegraph-option.is-correct {

    color: white;

    border-color: #14B8A6;

    background: #14B8A6;
}


.telegraph-option.is-wrong {

    color: #B45309;

    border-color: #F59E0B;

    background: #FFFBEB;
}


.telegraph-feedback {

    min-height: 15px;

    margin-top: 5px;

    color: #0F766E;

    font-size: 11px;

    font-weight: 700;
}


/* =========================================================
   TAKEAWAY
========================================================= */

.word-formation-takeaway {

    opacity: 0;

    transform:
        translateY(5px);

    max-width: 900px;

    margin:
        6px auto 0;

    text-align: center;

    transition:
        opacity .3s ease,
        transform .3s ease;
}


.word-formation-takeaway.is-visible {

    opacity: 1;

    transform:
        translateY(0);
}


.word-formation-takeaway strong {

    display: block;

    color: #0F2F63;

    font-size: 14px;
}


.word-formation-takeaway span {

    display: block;

    margin-top: 2px;

    color: #64748B;

    font-size: 11px;
}

/* =========================================================
   PAGE 13 · BOTTOM FIT
========================================================= */

/* 整页上下空间稍微收紧 */
.fun-vocab-slide {
    padding-top: 16px;
    padding-bottom: 8px;
}


/* 标题区与游戏区距离缩小 */
.fun-vocab-slide .word-puzzle-area {
    margin-top: 9px;
    padding-top: 9px;
    padding-bottom: 8px;
}


/* 六张词卡略微降低高度 */
.fun-vocab-slide .word-puzzle-card {
    padding-top: 9px;
    padding-bottom: 9px;
}


/* feedback 更紧凑 */
.fun-vocab-slide .word-puzzle-feedback {
    margin-top: 4px;
    min-height: 14px;
}


/* DISCOVER 与上一部分距离缩小 */
.fun-vocab-slide .word-discovery-area.is-visible {
    margin-top: 6px;
}


/* 构词卡略微压缩 */
.fun-vocab-slide .word-part-card {
    padding-top: 5px;
    padding-bottom: 5px;
}


/* TRANSFER 往上收 */
.fun-vocab-slide .word-transfer-area.is-visible {
    margin-top: 6px;
}


/* transfer 内部距离缩小 */
.fun-vocab-slide .word-building-row {
    margin-top: 4px;
}

.fun-vocab-slide .telegraph-challenge {
    margin-top: 5px;
}

.fun-vocab-slide .telegraph-options {
    margin-top: 4px;
}

.fun-vocab-slide .telegraph-feedback {
    margin-top: 3px;
}


/* 最后的 takeaway */
.fun-vocab-slide .word-formation-takeaway {
    margin-top: 3px;
}

.fun-vocab-slide .word-formation-takeaway strong {
    font-size: 13px;
    line-height: 1.15;
}

.fun-vocab-slide .word-formation-takeaway span {
    margin-top: 1px;
    font-size: 10.5px;
    line-height: 1.15;
}

/* =========================================================
   PAGE 14 · ASSIGNMENT
========================================================= */

.assignment-slide {

    box-sizing: border-box;

    width: 100%;
    height: 100%;

    padding: 20px 68px 16px;

    overflow: hidden;

    color: #0F172A;

    background:
        radial-gradient(
            circle at 92% 8%,
            rgba(20,184,166,.09),
            transparent 27%
        ),
        radial-gradient(
            circle at 5% 95%,
            rgba(30,58,138,.07),
            transparent 28%
        ),
        #F8FAFC;
}


/* =========================================================
   HEADER
========================================================= */

.assignment-header {

    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    gap: 30px;

    margin-top: 8px;
}


.assignment-kicker {

    color: #0F766E;

    font-size: 12px;

    font-weight: 850;

    letter-spacing: 2px;
}


.reveal .assignment-title {

    margin: 3px 0 0;

    color: #0F172A;

    font-size: 38px;

    font-weight: 800;

    line-height: 1.05;

    text-transform: none;
}


.assignment-subtitle {

    margin: 5px 0 0;

    color: #64748B;

    font-size: 15px;

    font-weight: 600;
}


/* Assignment points */

.assignment-points-badge {

    display: flex;

    align-items: center;

    gap: 10px;

    flex-shrink: 0;

    padding: 9px 16px;

    border:
        1px solid
        rgba(20,184,166,.25);

    border-radius: 999px;

    background:
        rgba(255,255,255,.9);

    box-shadow:
        0 6px 18px
        rgba(15,23,42,.05);
}


.assignment-points-badge span {

    color: #64748B;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1px;
}


.assignment-points-badge strong {

    color: #0F766E;

    font-size: 17px;
}


/* =========================================================
   THREE STEPS
========================================================= */

.assignment-steps {

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        30px
        minmax(0,1fr)
        30px
        minmax(0,1fr);

    align-items: stretch;

    gap: 7px;

    margin-top: 16px;
}


.assignment-step-card {

    min-height: 245px;

    box-sizing: border-box;

    padding: 15px 17px;

    border:
        1px solid
        rgba(148,163,184,.20);

    border-radius: 16px;

    background:
        rgba(255,255,255,.94);

    box-shadow:
        0 8px 24px
        rgba(15,23,42,.055);
}


.assignment-step-highlight {

    border-color:
        rgba(20,184,166,.35);

    background:
        linear-gradient(
            180deg,
            #FFFFFF,
            #F0FDFA
        );
}


.assignment-step-top {

    display: flex;

    align-items: center;

    gap: 11px;
}


.assignment-step-number {

    display: flex;

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

    width: 40px;
    height: 40px;

    flex-shrink: 0;

    border-radius: 50%;

    color: white;

    background: #0F766E;

    font-size: 14px;

    font-weight: 850;
}


.assignment-step-label {

    color: #0F766E;

    font-size: 10px;

    font-weight: 850;

    letter-spacing: 1.6px;
}


.reveal .assignment-step-card h3 {

    margin: 1px 0 0;

    color: #0F2F63;

    font-size: 19px;

    font-weight: 800;

    text-transform: none;
}


.assignment-step-instruction {

    margin: 12px 0 0;

    color: #475569;

    font-size: 13px;

    line-height: 1.4;
}


.assignment-step-instruction strong {

    color: #0F172A;
}


/* arrows */

.assignment-arrow {

    display: flex;

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

    color: #94A3B8;

    font-size: 24px;

    font-weight: 800;
}


/* =========================================================
   STEP 1
========================================================= */

.assignment-example-label {

    margin-top: 12px;

    color: #94A3B8;

    font-size: 9px;

    font-weight: 850;

    letter-spacing: 1.4px;
}


.assignment-chips {

    display: flex;

    flex-wrap: wrap;

    gap: 5px;

    margin-top: 5px;
}


.assignment-chips span {

    padding: 4px 8px;

    border-radius: 999px;

    color: #475569;

    background: #F1F5F9;

    font-size: 10px;

    font-weight: 700;
}


.assignment-tip {

    margin-top: 10px;

    padding: 7px 9px;

    border-left:
        3px solid #F59E0B;

    border-radius: 5px;

    color: #92400E;

    background: #FFFBEB;

    font-size: 10.5px;

    font-weight: 700;
}


/* =========================================================
   STEP 2
========================================================= */

.assignment-requirement {

    margin-top: 10px;

    padding: 7px 9px;

    border-radius: 7px;

    color: #0F766E;

    background: #ECFDF5;

    font-size: 11px;

    font-weight: 700;
}


.assignment-sentence-frame {

    margin-top: 10px;

    padding: 8px 10px;

    border:
        1px dashed
        rgba(20,184,166,.45);

    border-radius: 8px;

    background: white;
}


.assignment-sentence-frame span {

    color: #0F766E;

    font-size: 9px;

    font-weight: 850;

    letter-spacing: 1.2px;
}


.assignment-sentence-frame p {

    margin: 3px 0 0;

    color: #475569;

    font-size: 11px;

    line-height: 1.35;
}


/* =========================================================
   STEP 3
========================================================= */

.assignment-position-options {

    display: flex;

    gap: 5px;

    margin-top: 11px;
}


.assignment-position-options span {

    flex: 1;

    padding: 6px 3px;

    border:
        1px solid
        rgba(20,184,166,.25);

    border-radius: 999px;

    color: #0F766E;

    background: #F0FDFA;

    text-align: center;

    font-size: 9.5px;

    font-weight: 800;
}


.assignment-reason-box {

    margin-top: 11px;

    padding: 8px 10px;

    border-radius: 8px;

    background: #F8FAFC;
}


.assignment-reason-box span {

    color: #94A3B8;

    font-size: 9px;

    font-weight: 850;

    letter-spacing: 1.2px;
}


.assignment-reason-box p {

    margin: 3px 0 0;

    color: #475569;

    font-size: 11px;
}


/* =========================================================
   ASSESSMENT + SUBMISSION
========================================================= */

.assignment-bottom-grid {

    display: grid;

    grid-template-columns:
        1.4fr 1fr;

    gap: 12px;

    margin-top: 12px;
}


.assignment-assessment,
.assignment-submit {

    box-sizing: border-box;

    padding: 10px 14px;

    border:
        1px solid
        rgba(148,163,184,.18);

    border-radius: 13px;

    background:
        rgba(255,255,255,.92);
}


.assignment-bottom-title {

    display: flex;

    justify-content: space-between;

    align-items: center;

    color: #0F2F63;

    font-size: 11px;

    font-weight: 850;

    letter-spacing: 1.1px;
}


.assignment-bottom-title span {

    color: #0F766E;

    font-size: 12px;
}


/* rubric */

.assignment-rubric {

    display: grid;

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

    gap: 5px 12px;

    margin-top: 7px;
}


.assignment-rubric-item {

    display: grid;

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

    align-items: center;

    gap: 5px;

    color: #475569;

    font-size: 10.5px;
}


.rubric-check {

    color: #14B8A6;

    font-weight: 900;
}


.assignment-rubric-item strong {

    color: #0F766E;
}


/* submission */

.assignment-submit-main {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 6px;
}


.assignment-submit-icon {

    display: flex;

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

    width: 31px;
    height: 31px;

    flex-shrink: 0;

    border-radius: 50%;

    color: white;

    background: #1E3A8A;

    font-size: 18px;

    font-weight: 850;
}


.assignment-submit-main strong {

    color: #0F172A;

    font-size: 11px;
}


.assignment-submit-main p {

    margin: 1px 0 0;

    color: #64748B;

    font-size: 10px;
}


.submission-platform {

    color: #1E3A8A;

    font-weight: 800;
}


.assignment-format-options {

    display: flex;

    flex-wrap: wrap;

    gap: 4px;

    margin-top: 6px;
}


.assignment-format-options span {

    padding: 3px 6px;

    border-radius: 999px;

    color: #64748B;

    background: #F1F5F9;

    font-size: 8.5px;

    font-weight: 750;
}


/* =========================================================
   NEXT CLASS
========================================================= */

.assignment-next-class {

    display: flex;

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

    gap: 10px;

    margin-top: 10px;

    padding: 8px 14px;

    border-radius: 10px;

    color: white;

    background:
        linear-gradient(
            90deg,
            #0F766E,
            #1E3A8A
        );
}


.next-class-label {

    font-size: 9px;

    font-weight: 850;

    letter-spacing: 1.5px;

    opacity: .8;
}


.next-class-arrow {

    font-size: 15px;
}


.assignment-next-class strong {

    font-size: 12px;

    font-weight: 750;
}

/* =========================================================
   PAGE 14 · COMPACT REFINEMENT
========================================================= */

.assignment-slide {
    padding-top: 16px;
    padding-bottom: 10px;
}

.assignment-header {
    margin-top: 4px;
}

.reveal .assignment-title {
    font-size: 35px;
}

.assignment-subtitle {
    margin-top: 3px;
}


/* Three cards */

.assignment-steps {
    margin-top: 12px;
}

.assignment-step-card {
    min-height: 205px;
    padding: 13px 15px;
}

.assignment-step-instruction {
    margin-top: 9px;
}

.assignment-example-label {
    margin-top: 8px;
}

.assignment-tip {
    margin-top: 7px;
}

.assignment-requirement {
    margin-top: 7px;
}

.assignment-sentence-frame {
    margin-top: 7px;
}

.assignment-position-options {
    margin-top: 8px;
}

.assignment-reason-box {
    margin-top: 8px;
}


/* =========================================================
   COMPACT FOOTER BAR
========================================================= */

.assignment-footer-bar {

    display: grid;

    grid-template-columns:
        1.45fr 1fr;

    gap: 12px;

    margin-top: 10px;
}

.assignment-footer-assessment,
.assignment-footer-submit {

    padding: 9px 12px;

    border:
        1px solid
        rgba(148,163,184,.18);

    border-radius: 11px;

    background:
        rgba(255,255,255,.92);
}

.footer-bar-label {

    color: #0F2F63;

    font-size: 10px;

    font-weight: 850;

    letter-spacing: 1px;
}

.footer-rubric-line {

    display: flex;

    flex-wrap: wrap;

    gap: 5px 14px;

    margin-top: 5px;

    color: #475569;

    font-size: 9.5px;
}

.footer-rubric-line span {

    white-space: nowrap;
}

.footer-submit-line {

    display: flex;

    flex-direction: column;

    gap: 2px;

    margin-top: 5px;

    color: #64748B;

    font-size: 9.5px;
}

.footer-submit-line strong {

    color: #1E3A8A;

    font-size: 10.5px;
}


/* Next class bridge */

.assignment-next-class {

    margin-top: 8px;

    padding-top: 7px;
    padding-bottom: 7px;
}

/* =========================================================
   PAGE 14 · POSITION OPTIONS FIX
========================================================= */

.assignment-slide .assignment-position-options {

    display: grid;

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

    gap: 4px;

    width: 100%;

    box-sizing: border-box;
}


.assignment-slide .assignment-position-options span {

    min-width: 0;

    box-sizing: border-box;

    padding:
        5px 2px;

    font-size: 8.5px;

    line-height: 1;

    white-space: nowrap;

    text-align: center;
}

.assignment-slide {
    padding-bottom: 14px;
}

/* =========================================================
   PAGE 15 · SESSION 1 LEARNING CHECK
========================================================= */

.session-score-slide {

    box-sizing: border-box;

    width: 100%;
    height: 100%;

    padding: 20px 68px 14px;

    overflow: hidden;

    color: #0F172A;

    background:
        radial-gradient(
            circle at 90% 8%,
            rgba(30,58,138,.08),
            transparent 27%
        ),
        radial-gradient(
            circle at 5% 92%,
            rgba(20,184,166,.09),
            transparent 28%
        ),
        #F8FAFC;
}


/* =========================================================
   HEADER
========================================================= */

.session-score-header {

    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    gap: 28px;

    margin-top: 7px;
}


.session-score-kicker {

    color: #0F766E;

    font-size: 11px;

    font-weight: 850;

    letter-spacing: 1.8px;
}


.reveal .session-score-title {

    margin: 3px 0 0;

    color: #0F172A;

    font-size: 38px;

    font-weight: 800;

    line-height: 1.05;

    text-transform: none;
}


.session-score-subtitle {

    margin: 4px 0 0;

    color: #64748B;

    font-size: 14px;

    font-weight: 600;
}


/* Total score */

.session-total-card {

    min-width: 165px;

    box-sizing: border-box;

    padding: 10px 17px;

    border:
        1px solid
        rgba(20,184,166,.25);

    border-radius: 15px;

    background:
        rgba(255,255,255,.94);

    box-shadow:
        0 8px 24px
        rgba(15,23,42,.06);

    text-align: center;
}


.session-total-card > span {

    display: block;

    color: #64748B;

    font-size: 10px;

    font-weight: 850;

    letter-spacing: 1.4px;
}


.session-total-card strong {

    display: block;

    margin-top: 2px;

    color: #0F766E;

    font-size: 31px;

    line-height: 1;
}


.session-total-card small {

    color: #64748B;

    font-size: 14px;

    font-weight: 700;
}


/* =========================================================
   SCORE DIMENSIONS
========================================================= */

.session-score-grid {

    display: grid;

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

    gap: 12px;

    margin-top: 16px;
}


.session-dimension-card {

    padding: 14px 16px;

    border:
        1px solid
        rgba(148,163,184,.20);

    border-radius: 14px;

    background:
        rgba(255,255,255,.94);

    box-shadow:
        0 7px 20px
        rgba(15,23,42,.05);
}


.session-dimension-top {

    display: flex;

    align-items: center;

    gap: 11px;
}


.dimension-icon {

    display: flex;

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

    width: 39px;
    height: 39px;

    flex-shrink: 0;

    border-radius: 50%;

    color: white;

    background: #0F766E;

    font-size: 14px;

    font-weight: 850;
}


.dimension-label {

    color: #0F2F63;

    font-size: 11px;

    font-weight: 850;

    letter-spacing: 1.2px;
}


.dimension-score {

    margin-top: 1px;

    color: #0F172A;

    font-size: 20px;

    font-weight: 800;
}


.dimension-skills {

    min-height: 26px;

    margin-top: 8px;

    color: #64748B;

    font-size: 10px;

    line-height: 1.25;
}


/* Progress */

.score-progress-track {

    height: 7px;

    margin-top: 8px;

    overflow: hidden;

    border-radius: 999px;

    background: #E2E8F0;
}


.score-progress-fill {

    width: 0%;

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #14B8A6,
            #1E3A8A
        );

    transition:
        width .5s ease;
}


/* =========================================================
   SELF REFLECTION
========================================================= */

.session-reflection {

    margin-top: 14px;

    padding: 13px 15px;

    border:
        1px solid
        rgba(148,163,184,.18);

    border-radius: 14px;

    background:
        rgba(255,255,255,.90);
}


.session-reflection-heading {

    display: flex;

    align-items: center;
    justify-content: space-between;
}


.session-reflection-label {

    color: #B45309;

    font-size: 11px;

    font-weight: 850;

    letter-spacing: 1.5px;
}


.session-reflection-hint {

    margin-top: 2px;

    color: #64748B;

    font-size: 10px;
}


.can-do-count {

    padding: 4px 9px;

    border-radius: 999px;

    color: #0F766E;

    background: #F0FDFA;

    font-size: 11px;

    font-weight: 800;
}


.session-can-do-grid {

    display: grid;

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

    gap: 7px 10px;

    margin-top: 9px;
}


.session-can-do-item {

    display: flex;

    align-items: center;

    gap: 8px;

    box-sizing: border-box;

    padding: 8px 10px;

    border:
        1px solid
        rgba(148,163,184,.17);

    border-radius: 9px;

    color: #475569;

    background: #F8FAFC;

    font-size: 11px;

    line-height: 1.2;

    cursor: pointer;
}


.session-can-do-item strong {

    color: #0F2F63;
}


.session-can-do-item input {

    width: 15px;
    height: 15px;

    flex-shrink: 0;

    accent-color: #14B8A6;

    cursor: pointer;
}


.session-can-do-item:has(input:checked) {

    border-color:
        rgba(20,184,166,.42);

    color: #0F766E;

    background: #F0FDFA;
}


/* =========================================================
   FOOTER
========================================================= */

.session-score-footer {

    display: grid;

    grid-template-columns:
        1fr auto;

    gap: 12px;

    align-items: center;

    margin-top: 11px;
}


.session-next-step {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 9px 13px;

    border-radius: 11px;

    background:
        linear-gradient(
            90deg,
            #ECFDF5,
            #EFF6FF
        );
}


.next-step-tag {

    color: #B45309;

    font-size: 9px;

    font-weight: 850;

    letter-spacing: 1.3px;
}


.next-step-main {

    color: #0F2F63;

    font-size: 12px;

    font-weight: 800;
}


.next-step-points {

    margin-left: auto;

    color: #0F766E;

    font-size: 11px;

    font-weight: 800;
}


/* Copy button */

.learning-record-button {

    padding: 10px 15px;

    border: 0;

    border-radius: 999px;

    color: white;

    background:
        linear-gradient(
            90deg,
            #0F766E,
            #1E3A8A
        );

    font-family: inherit;

    font-size: 11px;

    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 6px 18px
        rgba(15,47,99,.14);
}


.learning-record-button:hover {

    transform:
        translateY(-1px);
}


.learning-record-feedback {

    min-height: 14px;

    margin-top: 4px;

    color: #0F766E;

    text-align: right;

    font-size: 10px;

    font-weight: 700;
}

/* =========================================================
   PAGE-SCOPED LAYOUT AND SCORE REFINEMENTS
========================================================= */

/* Page 2: reserve translation space inside each card. */
.objectives-slide .output-card .translatable {
    min-height: 88px;
}

.objectives-slide .input-card .translatable {
    min-height: 24px;
}

.objectives-slide .translatable .translation {
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: 2px;
}

.objectives-slide .output-card .translation {
    margin-top: -24px;
}

.objectives-slide .input-card .translation {
    margin-top: -2px;
}

/* Page 3: restore vertical rhythm without changing the game controls. */
.communication-timeline-slide {
    padding-top: 42px;
    padding-bottom: 38px;
}

.communication-timeline-slide .timeline-game {
    margin-top: 16px;
}

.communication-timeline-slide .timeline-items {
    margin-bottom: 16px;
}

.communication-timeline-slide .timeline-controls {
    margin-top: 15px;
}

.communication-timeline-slide .timeline-reflection {
    margin-top: 16px;
}

/* Pages 4 and 5: page-local score cards. */
.watch-notice-slide,
.first-take-slide {
    position: relative;
}

.watch-notice-slide .watch-page-score-card,
.first-take-slide .first-take-page-score-card {
    position: absolute;
    z-index: 2;
    top: 30px;
    right: 68px;
}

.watch-notice-slide .watch-page-score-card {
    top: 26px;
}

/* Page 7: give the task and its feedback a more even vertical distribution. */
.basic-opinion-slide .opinion-task-area {
    margin-top: 30px;
}

.basic-opinion-slide .opinion-block {
    padding-top: 20px;
    padding-bottom: 20px;
}

.basic-opinion-slide .solution-block {
    margin-top: 16px;
}

.basic-opinion-slide .opinion-actions {
    margin-top: 18px;
}

.basic-opinion-slide .opinion-map-update.is-visible {
    margin-top: 16px;
}

/* =========================================================
   PAGE 7 ONLY · STAGE 03 / SCAN FOR EVIDENCE
========================================================= */
.reveal .slides .basic-opinion-slide {
    display:grid;
    grid-template-rows:72px 112px 270px 55px 220px;
    gap:8px;
    box-sizing:border-box;
    width:100%;
    height:100%;
    padding:20px 64px 18px;
    overflow:hidden;
    color:#0b1f3a;
    background:
        radial-gradient(circle at 90% 10%,rgba(56,189,248,.10),transparent 25%),
        radial-gradient(circle at 8% 92%,rgba(20,184,166,.09),transparent 26%),
        linear-gradient(rgba(30,142,169,.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(30,142,169,.025) 1px,transparent 1px),
        linear-gradient(145deg,#fff 0%,#f6fbff 67%,#eef8fc 100%);
    background-size:auto,auto,32px 32px,32px 32px,auto;
}
.basic-opinion-slide > * { min-width:0; }
.basic-opinion-slide .page7-mission-header { height:72px; min-height:0; padding:0 0 12px; }
.basic-opinion-slide .mission-badge { min-height:40px; padding:0 19px; font-size:21px; }
.basic-opinion-slide .stage-badge { min-height:40px; padding:0 18px; font-size:18px; white-space:nowrap; }
.basic-opinion-slide .mission-score { min-width:184px; padding:8px 16px; }
.basic-opinion-slide .mission-score > span { font-size:27px; }
.basic-opinion-slide .mission-score small { font-size:14px; }

.page7-title-area { position:relative; display:grid; align-content:end; padding-top:24px; }
.basic-opinion-slide .task-label { position:absolute; top:0; left:0; display:inline-flex; align-items:center; gap:12px; min-height:22px; padding:0 9px; border-left:3px solid #1bb7c2; border-radius:3px; color:#0e7490; background:rgba(221,247,249,.72); font-size:14px; font-weight:900; letter-spacing:1px; }
.basic-opinion-slide .task-label small { color:#718390; font-size:11px; letter-spacing:.7px; }
.basic-opinion-slide .global-reading-kicker { margin:0 0 2px; color:#0e7490; font-size:16px; font-weight:900; letter-spacing:2px; }
.reveal .basic-opinion-slide .global-reading-title { margin:0; color:#071f3d; font-size:38px; line-height:1; letter-spacing:-.4px; }
.page7-title-area > p { margin:5px 0 0; color:#607887; font-size:19px; font-weight:650; }
.page7-scan-tip { position:absolute; right:0; bottom:0; display:flex; align-items:center; gap:10px; padding:8px 12px; border-left:3px solid #f59e0b; border-radius:5px; color:#526b7a; background:rgba(255,255,255,.78); font-size:17px; }
.page7-scan-tip strong { color:#b45309; font-size:14px; letter-spacing:.7px; }

.basic-opinion-slide .opinion-task-area { display:grid; grid-template-columns:.88fr 1.12fr; gap:16px; max-width:none; height:270px; margin:0; }
.basic-opinion-slide .opinion-block { position:relative; display:grid; align-content:start; min-width:0; height:270px; padding:20px 23px; box-sizing:border-box; border-radius:16px; background:rgba(255,255,255,.92); box-shadow:0 9px 24px rgba(15,76,105,.07); }
.basic-opinion-slide .problem-block { border:1px solid rgba(245,158,11,.25); border-left:5px solid #f59e0b; }
.basic-opinion-slide .solution-block { margin:0; border:1px solid rgba(20,184,166,.25); border-left:5px solid #14b8a6; }
.evidence-card-heading { display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:10px; padding-bottom:13px; border-bottom:1px solid rgba(100,116,139,.14); }
.evidence-icon { display:grid; place-items:center; width:36px; height:36px; border:1px solid currentColor; border-radius:9px; color:#b45309; font-size:25px; }
.solution-block .evidence-icon { color:#0f766e; }
.evidence-card-heading > div { display:grid; gap:2px; }
.evidence-card-heading small { color:#b45309; font-size:18px; font-weight:900; letter-spacing:1px; }
.solution-block .evidence-card-heading small { color:#0f766e; }
.evidence-card-heading strong { color:#0b2946; font-size:23px; }
.evidence-card-heading em { opacity:0; color:#0f766e; font-size:14px; font-style:normal; font-weight:900; transition:opacity .25s; }
.opinion-block.is-collected .evidence-card-heading em { opacity:1; }
.basic-opinion-slide .opinion-sentence { align-self:center; margin-top:20px; color:#273f55; font-size:25px; font-weight:700; line-height:1.55; }
.basic-opinion-slide .solution-sentence { margin-top:13px; font-size:23px; line-height:1.58; }
.basic-opinion-slide .opinion-blank { width:172px; margin:0 5px; padding:5px 8px; border:1px solid rgba(100,116,139,.22); border-bottom:3px solid #94a3b8; border-radius:7px 7px 3px 3px; font-size:23px; }
.basic-opinion-slide .opinion-blank.short-blank { width:128px; }
.basic-opinion-slide .blank-feedback { min-height:20px; margin-top:9px; color:#b45309; font-size:16px; font-weight:750; }
.opinion-block.is-collected { animation:page7EvidencePulse .7s ease both; }

.page7-action-row { display:grid; grid-template-columns:220px 360px minmax(0,1fr); align-items:center; gap:16px; min-height:0; padding:7px 14px; box-sizing:border-box; border:1px solid rgba(8,145,178,.16); border-radius:12px; background:rgba(255,255,255,.78); }
.page7-evidence-progress { display:flex; align-items:center; gap:9px; color:#0b5368; font-size:16px; font-weight:900; letter-spacing:.5px; }
.page7-evidence-progress i { width:14px; height:14px; border:2px solid rgba(8,145,178,.35); border-radius:50%; background:#fff; }
.page7-evidence-progress i.is-found { border-color:#0e9fab; background:#22c8cf; box-shadow:0 0 8px rgba(34,200,207,.42); }
.basic-opinion-slide .opinion-actions { justify-content:flex-start; gap:10px; margin:0; }
.basic-opinion-slide .check-opinion-button,.basic-opinion-slide .reset-opinion-button { padding:9px 18px; font-size:18px; }
.basic-opinion-slide .opinion-overall-feedback { min-height:0; margin:0; color:#607887; font-size:17px; font-weight:800; line-height:1.2; text-align:left; }
.basic-opinion-slide .opinion-overall-feedback.is-error { color:#b45309; }
.basic-opinion-slide .opinion-overall-feedback.is-success { color:#0f766e; }

.page7-result-zone { display:grid; grid-template-columns:155px 205px 290px minmax(0,1fr) 250px; align-items:center; gap:12px; min-width:0; height:220px; padding:13px 16px; box-sizing:border-box; overflow:hidden; border:1px solid rgba(8,145,178,.20); border-radius:16px; background:rgba(255,255,255,.88); box-shadow:0 9px 23px rgba(15,76,105,.07); }
.page7-nova-core { position:relative; height:190px; overflow:hidden; border-right:1px solid rgba(8,145,178,.16); }
.page7-nova-core .page3-nova-core { position:absolute; left:47%; top:50%; translate:-50% -50%; transform:scale(.42); transform-origin:center; }
.page7-nova-copy { align-self:stretch; display:grid; align-content:center; padding-right:12px; border-right:1px solid rgba(8,145,178,.16); }
.page7-nova-copy strong { color:#0e7490; font-size:17px; letter-spacing:.55px; }
.page7-nova-copy p { margin:8px 0 0; color:#405f70; font-size:17px; font-weight:700; line-height:1.35; }
.page7-hypothesis-result { display:grid; align-content:center; min-width:0; min-height:126px; padding:12px 14px; border-radius:12px; background:#eef9fb; }
.page7-hypothesis-result small,.page7-evidence-result > small { color:#0e7490; font-size:13px; font-weight:900; letter-spacing:.7px; }
.page7-hypothesis-result strong { margin-top:6px; color:#0b2946; font-size:17px; line-height:1.25; overflow-wrap:anywhere; }
.page7-hypothesis-result > i { margin:4px 0; color:#16a6b7; font-size:19px; font-style:normal; text-align:center; }
.page7-hypothesis-result > span { color:#0e7490; font-size:14px; font-weight:900; text-align:center; }
.page7-evidence-result { min-width:0; opacity:.28; transition:opacity .25s; }
.page7-evidence-result > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:8px; }
.page7-evidence-result span { display:grid; align-content:center; min-width:0; min-height:100px; padding:9px 10px; box-sizing:border-box; border-radius:10px; background:#f3f8fa; text-align:center; }
.page7-evidence-result b { color:#0b5368; font-size:16px; }
.page7-evidence-result i { color:#16a6b7; font-size:18px; font-style:normal; }
.page7-evidence-result strong { color:#0b2946; font-size:15px; line-height:1.2; }
.page7-next-task { align-self:stretch; display:grid; align-content:center; padding-left:14px; border-left:1px solid rgba(8,145,178,.18); opacity:.28; transition:opacity .25s; }
.page7-next-task > strong { color:#0f766e; font-size:18px; }
.page7-next-task > span { margin-top:2px; color:#607887; font-size:13px; font-weight:850; }
.page7-next-task small { margin-top:10px; color:#718390; font-size:12px; font-weight:900; letter-spacing:.7px; }
.page7-next-task b { margin-top:2px; color:#0e7490; font-size:17px; }
.page7-next-task p { margin:5px 0 0; color:#0b2946; font-size:17px; font-weight:800; line-height:1.2; }
.page7-result-zone.is-complete .page7-evidence-result,.page7-result-zone.is-complete .page7-next-task { opacity:1; }

@keyframes page7EvidencePulse { 0%{box-shadow:0 9px 24px rgba(15,76,105,.07)} 45%{box-shadow:0 0 0 4px rgba(20,184,166,.12),0 0 24px rgba(20,184,166,.22)} 100%{box-shadow:0 9px 24px rgba(15,76,105,.07)} }
@media (prefers-reduced-motion:reduce) {
    .basic-opinion-slide .nova-ball,
    .basic-opinion-slide .nova-orbit,
    .basic-opinion-slide .nova-scan-ring,
    .opinion-block.is-collected { animation:none!important; }
}

/* =========================================================
   PAGE 8 ONLY · STAGE 03 / EXPAND THE EVIDENCE
========================================================= */
.reveal .slides .background-match-slide { display:grid; grid-template-rows:72px 100px 350px 52px 190px; gap:8px; box-sizing:border-box; width:100%; height:100%; padding:20px 64px 18px; overflow:hidden; color:#0b1f3a; background:radial-gradient(circle at 90% 10%,rgba(56,189,248,.10),transparent 25%),radial-gradient(circle at 8% 92%,rgba(20,184,166,.09),transparent 26%),linear-gradient(145deg,#fff 0%,#f6fbff 67%,#eef8fc 100%); }
.background-match-slide > * { min-width:0; }
.background-match-slide .page8-mission-header { height:72px; min-height:0; padding:0 0 12px; }
.background-match-slide .mission-badge { min-height:40px; padding:0 19px; font-size:21px; }
.background-match-slide .stage-badge { min-height:40px; padding:0 18px; font-size:18px; white-space:nowrap; }
.background-match-slide .mission-score { min-width:184px; padding:8px 16px; }
.background-match-slide .mission-score > span { font-size:27px; }
.background-match-slide .mission-score small { font-size:14px; }
.page8-title-area { position:relative; display:grid; align-content:end; padding-top:24px; }
.background-match-slide .task-label { position:absolute; top:0; left:0; display:inline-flex; align-items:center; gap:12px; min-height:22px; padding:0 9px; border-left:3px solid #1bb7c2; border-radius:3px; color:#0e7490; background:rgba(221,247,249,.72); font-size:14px; font-weight:900; letter-spacing:1px; }
.background-match-slide .task-label small { color:#718390; font-size:11px; letter-spacing:.7px; }
.background-match-slide .global-reading-kicker { margin:0 0 2px; color:#0e7490; font-size:16px; font-weight:900; letter-spacing:2px; }
.reveal .background-match-slide .global-reading-title { margin:0; color:#071f3d; font-size:37px; line-height:1; }
.page8-title-area > p { margin:5px 0 0; color:#607887; font-size:19px; font-weight:650; }
.page8-strategy-tip { position:absolute; right:0; bottom:0; padding:7px 12px; border-left:3px solid #f59e0b; border-radius:5px; color:#526b7a; background:rgba(255,255,255,.78); font-size:18px; font-weight:750; }

.background-match-slide .background-match-area { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:18px; height:350px; margin:0; align-items:stretch; }
.background-match-slide .paragraph-zones { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:12px; }
.background-match-slide .paragraph-zone { display:grid; align-content:start; min-height:0; padding:16px 18px; border-width:2px; border-radius:14px; overflow:hidden; }
.background-match-slide .paragraph-number { font-size:23px; }
.background-match-slide .paragraph-drop-label { min-height:82px; font-size:19px; font-weight:750; }
.background-match-slide .paragraph-zone > small { position:absolute; right:12px; top:12px; opacity:0; color:#0f766e; font-size:13px; font-weight:900; }
.background-match-slide .paragraph-zone.correct { border-color:#16a6b7; background:#effcfc; box-shadow:0 0 18px rgba(22,166,183,.18); animation:page8LinkPulse .65s ease; }
.background-match-slide .paragraph-zone.correct > small { opacity:1; }
.background-match-slide .paragraph-zone.wrong { animation:page8WrongPulse .65s ease; }
.background-match-slide .paragraph-zone .background-idea-card { margin-top:5px; min-height:80px; padding:10px 12px; font-size:18px; line-height:1.25; }
.background-match-slide .paragraph-zone.correct .paragraph-drop-label { display:none; }
.background-match-slide .background-idea-bank { display:grid; grid-template-rows:auto repeat(4,1fr); gap:8px; height:350px; padding:13px; box-sizing:border-box; background:rgba(226,240,245,.52); }
.background-match-slide .idea-bank-label { display:grid; gap:2px; }
.background-match-slide .idea-bank-label strong { color:#0e7490; font-size:18px; letter-spacing:1.4px; }
.background-match-slide .idea-bank-label span { color:#607887; font-size:15px; font-weight:650; letter-spacing:0; }
.background-match-slide .background-idea-card { display:flex; align-items:center; min-height:0; padding:10px 14px; font-size:19px; line-height:1.22; }

.background-match-slide .background-controls { display:grid; grid-template-columns:330px minmax(0,1fr) 110px; align-items:center; gap:16px; min-height:52px; margin:0; padding:6px 14px; box-sizing:border-box; border:1px solid rgba(8,145,178,.16); border-radius:12px; background:rgba(255,255,255,.78); }
.background-match-slide .background-progress { display:flex; align-items:center; gap:10px; color:#0b5368; font-size:17px; font-weight:900; }
.background-progress-dots { display:flex; gap:6px; }
.background-progress-dots i { width:13px; height:13px; border:2px solid rgba(8,145,178,.34); border-radius:50%; background:#fff; }
.background-progress-dots i.is-mapped { border-color:#0e9fab; background:#22c8cf; box-shadow:0 0 7px rgba(34,200,207,.42); }
.background-match-slide .background-progress strong { margin-left:auto; font-size:20px; }
#backgroundFeedback { color:#607887; font-size:17px; font-weight:800; }
#backgroundFeedback.is-error { color:#b45309; }
#backgroundFeedback.is-success { color:#0f766e; }
.background-match-slide .reset-background-button { justify-self:end; padding:8px 16px; font-size:16px; }

.background-match-slide .background-map-update { display:grid; grid-template-columns:170px 300px minmax(0,1fr) 270px; align-items:center; gap:12px; min-width:0; height:190px; max-height:none; margin:0; padding:5px 15px; box-sizing:border-box; overflow:hidden; opacity:1; pointer-events:auto; border:1px solid rgba(8,145,178,.20); border-radius:16px; background:rgba(255,255,255,.88); box-shadow:0 9px 23px rgba(15,76,105,.07); }
.page8-nova-core { position:relative; height:168px; overflow:hidden; border-right:1px solid rgba(8,145,178,.16); }
.page8-nova-core .page3-nova-core { position:absolute; left:46%; top:50%; translate:-50% -50%; transform:scale(.39); transform-origin:center; }
.page8-nova-copy { align-self:stretch; display:grid; align-content:center; height:auto; min-width:0; min-height:0; box-sizing:border-box; padding:6px 14px 6px 0; border-right:1px solid rgba(8,145,178,.16); }
.page8-nova-copy > strong { color:#0e7490; font-size:17px; line-height:1.15; }
.page8-nova-copy p { margin:5px 0 7px; color:#405f70; font-size:16px; font-weight:700; line-height:1.32; }
.page8-nova-copy small { color:#607887; font-size:15px; font-weight:800; line-height:1.3; }
.page8-nova-copy small b { color:#0f766e; }
.evidence-pattern { min-width:0; opacity:.25; transition:opacity .3s; }
.evidence-pattern header { display:flex; justify-content:space-between; align-items:center; }
.evidence-pattern header strong { color:#0e7490; font-size:17px; }
.evidence-pattern header span { color:#718390; font-size:14px; font-weight:900; }
.evidence-pattern-flow { display:grid; grid-template-columns:repeat(7,auto); align-items:center; justify-content:center; gap:7px; margin-top:12px; }
.evidence-pattern-flow div { display:grid; align-content:center; width:124px; min-height:92px; padding:8px; box-sizing:border-box; border:1px solid rgba(8,145,178,.17); border-radius:10px; background:#eef9fb; text-align:center; }
.evidence-pattern-flow b { color:#0b5368; font-size:15px; }
.evidence-pattern-flow small { margin-top:5px; color:#607887; font-size:12px; line-height:1.15; }
.evidence-pattern-flow i { color:#16a6b7; font-size:19px; font-style:normal; }
.page8-next { align-self:center; display:grid; align-content:center; height:168px; box-sizing:border-box; padding-left:13px; border-left:1px solid rgba(8,145,178,.18); opacity:.25; transition:opacity .3s; }
.page8-next strong { color:#0f766e; font-size:18px; }
.page8-next span { margin-top:3px; color:#607887; font-size:14px; font-weight:850; }
.page8-next small { margin-top:12px; color:#718390; font-size:12px; font-weight:900; }
.page8-next b { margin-top:3px; color:#0e7490; font-size:17px; }
.background-map-update.is-visible .evidence-pattern,.background-map-update.is-visible .page8-next { opacity:1; }
.background-map-update.is-visible .evidence-pattern-flow div { box-shadow:0 0 14px rgba(22,166,183,.16); }
@keyframes page8LinkPulse { 50%{box-shadow:0 0 0 4px rgba(22,166,183,.12),0 0 22px rgba(22,166,183,.24)} }
@keyframes page8WrongPulse { 50%{border-color:#f59e0b;background:#fff7ed;box-shadow:0 0 0 4px rgba(245,158,11,.10)} }
@media (prefers-reduced-motion:reduce) { .background-match-slide .paragraph-zone,.background-match-slide .nova-ball,.background-match-slide .nova-orbit,.background-match-slide .nova-scan-ring { animation:none!important; } }

/* =========================================================
   PAGE 9 ONLY · STAGE 03 / TEST THE EVIDENCE
========================================================= */
.reveal .slides .read-apply-slide { display:grid; grid-template-rows:72px 84px 320px 105px 190px; gap:8px; box-sizing:border-box; width:100%; height:100%; padding:20px 64px 18px; overflow:hidden; color:#0b1f3a; background:radial-gradient(circle at 90% 10%,rgba(56,189,248,.10),transparent 25%),radial-gradient(circle at 8% 92%,rgba(20,184,166,.09),transparent 26%),linear-gradient(145deg,#fff 0%,#f6fbff 67%,#eef8fc 100%); }
.read-apply-slide > * { min-width:0; }
.read-apply-slide .page9-mission-header { height:72px; min-height:0; padding:0 0 12px; }
.read-apply-slide .mission-badge { min-height:40px; padding:0 19px; font-size:21px; }
.read-apply-slide .stage-badge { min-height:40px; padding:0 18px; font-size:18px; white-space:nowrap; }
.read-apply-slide .mission-score { min-width:184px; padding:8px 16px; }
.read-apply-slide .mission-score > span { font-size:27px; }
.read-apply-slide .mission-score small { font-size:14px; }
.page9-title-area { position:relative; display:grid; align-content:end; padding-top:24px; }
.read-apply-slide .task-label { position:absolute; top:0; left:0; display:inline-flex; align-items:center; gap:12px; min-height:22px; padding:0 9px; border-left:3px solid #1bb7c2; border-radius:3px; color:#0e7490; background:rgba(221,247,249,.72); font-size:14px; font-weight:900; letter-spacing:1px; }
.read-apply-slide .task-label small { color:#718390; font-size:11px; }
.read-apply-slide .global-reading-kicker { margin:0 0 2px; color:#0e7490; font-size:16px; font-weight:900; letter-spacing:2px; }
.reveal .read-apply-slide .global-reading-title { margin:0; color:#071f3d; font-size:38px; line-height:1; }
.page9-title-area > p { margin:5px 0 0; color:#607887; font-size:19px; font-weight:650; }

.read-apply-slide .read-apply-layout { display:grid; grid-template-columns:1.12fr .88fr; gap:18px; height:320px; margin:0; }
.read-apply-slide .read-apply-image-panel { position:relative; min-width:0; height:320px; }
.read-apply-slide .read-apply-image { width:100%; height:278px; object-fit:cover; border-radius:15px; }
.read-apply-slide .image-observation-prompt { display:flex; align-items:center; justify-content:center; gap:8px; height:42px; margin:0; color:#526b7a; font-size:17px; }
.read-apply-slide .image-observation-prompt strong { color:#0e7490; font-size:17px; }
.read-apply-slide .image-observation-prompt i { color:#f59e0b; font-style:normal; }
.family-network-overlay { position:absolute; z-index:3; inset:0 0 42px; overflow:hidden; border-radius:15px; pointer-events:none; }
.family-network-overlay svg { width:100%; height:100%; }
.family-network-overlay path { fill:none; vector-effect:non-scaling-stroke; }
.device-links path { stroke:#39d5e5; stroke-width:3; opacity:0; stroke-dasharray:8 8; }
.family-links path { stroke:#e8f7f9; stroke-width:2; opacity:0; stroke-dasharray:4 9; }
.device-dots circle { fill:#63e9f3; opacity:0; filter:drop-shadow(0 0 7px #1dc6d5); }
.family-concept-reveal { position:absolute; right:20px; bottom:8px; left:20px; height:56px; overflow:hidden; border:1px solid rgba(122,231,241,.22); border-radius:10px; background:linear-gradient(90deg,rgba(2,20,38,.66),rgba(4,40,57,.78),rgba(2,20,38,.66)); box-shadow:0 8px 22px rgba(0,20,40,.18); backdrop-filter:blur(5px); text-align:center; text-shadow:0 2px 12px rgba(0,20,40,.8); opacity:0; }
.family-concept-reveal span,.family-concept-reveal b,.family-concept-reveal strong { position:absolute; inset:0; display:grid; place-items:center; margin:0; opacity:0; color:#fff; line-height:1.05; }
.family-concept-reveal span { color:#d8fbff; font-size:23px; font-weight:850; letter-spacing:.5px; }
.family-concept-reveal b { color:#b9f5fa; font-size:24px; }
.family-concept-reveal strong { font-size:31px; font-weight:900; letter-spacing:.8px; }
.read-apply-slide.is-wow-active .family-concept-reveal { opacity:1; }
.read-apply-slide.is-wow-active .device-dots circle { animation:p9Reveal .45s .1s ease forwards,p9DeviceGlow 1.2s .25s ease-in-out 2; }
.read-apply-slide.is-wow-active .device-links path { animation:p9Reveal .55s .35s ease forwards,p9Flow 3s .8s linear infinite; }
.read-apply-slide.is-wow-active .family-links path { animation:p9FamilyDisconnect 1.55s 1.55s ease both; }
.read-apply-slide.is-wow-active .family-concept-reveal span { animation:p9PhaseMessage 1.25s .55s ease both; }
.read-apply-slide.is-wow-active .family-concept-reveal b { animation:p9PhaseMessage 1.25s 1.8s ease both; }
.read-apply-slide.is-wow-active .family-concept-reveal strong { animation:p9FinalConclusion .65s 3.1s ease forwards; }
.read-apply-slide.is-complete:not(.is-wow-active) .family-concept-reveal { opacity:1; }
.read-apply-slide.is-complete:not(.is-wow-active) .family-concept-reveal strong { opacity:1; }
.read-apply-slide.is-complete:not(.is-wow-active) .device-dots circle { opacity:1; }
.read-apply-slide.is-complete:not(.is-wow-active) .device-links path { opacity:.6; }
.read-apply-slide.is-complete:not(.is-wow-active) .family-links path { opacity:.08; }

.read-apply-slide .read-apply-tools { height:320px; padding:14px 17px; box-sizing:border-box; overflow:hidden; }
.read-apply-slide .toolbox-label { font-size:21px; }
.read-apply-slide .toolbox-group { margin-top:8px; }
.read-apply-slide .toolbox-group-title { font-size:16px; }
.read-apply-slide .toolbox-chips { gap:6px; margin-top:5px; }
.read-apply-slide .toolbox-chip { padding:4px 6px; font-size:14.5px; white-space:nowrap; }
.read-apply-slide .read-apply-task { margin-top:8px; padding-top:8px; }
.read-apply-slide .read-apply-task-label { font-size:16px; }
.read-apply-slide .read-apply-task p { margin:3px 0; font-size:16px; line-height:1.18; }
.read-apply-slide .read-apply-task > small { color:#0e7490; font-size:12.5px; font-weight:850; }
.read-apply-slide .read-apply-hint-button { margin-top:4px; padding:5px 11px; font-size:14px; }
.read-apply-slide .read-apply-hints { position:static; width:auto; padding:10px 12px; border-radius:10px; background:rgba(247,253,255,.97); box-shadow:none; }
.read-apply-slide .read-apply-hints p { margin:3px 0; font-size:15px; }

.read-apply-slide .read-apply-assessment { position:relative; height:105px; padding:10px 14px; box-sizing:border-box; overflow:hidden; }
.read-apply-slide .self-check-title { display:flex; align-items:center; justify-content:space-between; font-size:17px; }
.read-apply-slide .self-check-title strong { color:#0e7490; font-size:14px; letter-spacing:.5px; }
.read-apply-slide .self-check-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:7px; }
.read-apply-slide .self-check-item { min-height:54px; padding:7px 9px; font-size:16px; line-height:1.15; }
.read-apply-slide .check-points { font-size:11px; }
.read-apply-slide .read-apply-feedback { display:none; position:static; min-height:0; margin:0; font-size:16px; }

.read-apply-slide .page9-result { display:grid; grid-template-columns:minmax(0,31%) minmax(0,45%) minmax(280px,24%); align-items:stretch; gap:0; height:190px; max-height:none; margin:0; padding:5px 12px; box-sizing:border-box; overflow:hidden; opacity:1; border:1px solid rgba(8,145,178,.20); border-radius:16px; background:rgba(255,255,255,.9); }
.page9-feedback-zone { display:grid; grid-template-columns:122px minmax(0,1fr); align-items:center; min-width:0; padding-right:15px; border-right:1px solid rgba(8,145,178,.16); }
.page9-nova-core { position:relative; height:174px; overflow:hidden; }
.page9-nova-core .page3-nova-core { position:absolute; left:48%; top:50%; translate:-50% -50%; transform:scale(.52); transform-origin:center; }
.page9-nova-copy { display:grid; align-content:center; min-width:0; height:174px; padding:2px 4px 2px 0; box-sizing:border-box; }
.page9-nova-copy > strong { color:#0e7490; font-size:18px; line-height:1.15; }
.page9-nova-copy > p { margin:6px 0 7px; color:#405f70; font-size:16px; line-height:1.28; }
.page9-evidence-status { display:grid; gap:1px; padding-top:6px; border-top:1px solid rgba(8,145,178,.15); }
.page9-evidence-status small { color:#718390; font-size:11px; font-weight:900; letter-spacing:.7px; }
.page9-evidence-status b { color:#0f766e; font-size:16px; }
.page9-evidence-status span { color:#607887; font-size:12.5px; line-height:1.2; }
.text-life-pattern { min-width:0; opacity:.24; transition:opacity .3s; }
.text-life-pattern { display:grid; align-content:center; padding:4px 16px; border-right:1px solid rgba(8,145,178,.16); }
.text-life-pattern header { display:flex; align-items:center; justify-content:space-between; }
.text-life-pattern header strong { color:#0e7490; font-size:21px; }
.text-life-pattern header span { color:#718390; font-size:12px; font-weight:900; }
.text-life-pattern > div { display:grid; grid-template-columns:repeat(7,auto); justify-content:space-between; align-items:center; gap:6px; margin-top:13px; }
.text-life-pattern b { display:grid; place-items:center; min-width:92px; height:66px; padding:6px 8px; box-sizing:border-box; border:1px solid rgba(8,145,178,.12); border-radius:10px; color:#0b5368; background:#eef9fb; font-size:17px; line-height:1.05; text-align:center; }
.text-life-pattern i { color:#16a6b7; font-size:25px; font-style:normal; }
.text-life-pattern p { margin:10px 0 0; color:#0f766e; font-size:16px; font-weight:900; text-align:center; }
.page9-stage-complete { display:grid; align-content:center; height:174px; padding-left:17px; opacity:.24; transition:opacity .3s; }
.page9-stage-complete > strong,.page9-stage-complete > b { color:#0f766e; font-size:17px; line-height:1.3; }
.page9-stage-complete > div { margin-top:5px; color:#0e7490; font-size:14px; font-weight:900; }
.page9-stage-complete hr { width:100%; margin:8px 0 6px; border:0; border-top:1px solid rgba(8,145,178,.18); }
.page9-stage-complete small { color:#718390; font-size:13px; font-weight:900; letter-spacing:1px; }
.reveal .page9-stage-complete h3 { margin:1px 0 0; color:#0b2946; font-size:19px; line-height:1.08; }
.page9-stage-complete h3 span { color:#0e7490; }
.page9-stage-complete em { margin-top:2px; color:#0e7490; font-size:15px; font-style:normal; font-weight:850; }
.page9-stage-complete p { margin:2px 0 0; color:#607887; font-size:14px; }
.read-apply-slide.is-complete .text-life-pattern,.read-apply-slide.is-complete .page9-stage-complete { opacity:1; }

.read-apply-slide .teaching-lens-panel { top:86px; right:64px; width:430px; height:440px; max-height:440px; padding:12px 16px; }
.read-apply-slide .teaching-lens-header strong { font-size:22px; }
.read-apply-slide .teaching-lens-header span { font-size:15px; }
.read-apply-slide .teaching-lens-close { width:34px; height:34px; font-size:23px; }
.read-apply-slide .teaching-lens-tags { gap:5px; margin:7px 0; }
.read-apply-slide .teaching-lens-tags span { padding:4px 8px; font-size:12px; }
.read-apply-slide .teaching-lens-body { font-size:14.5px; line-height:1.43; }
.read-apply-slide .teaching-lens-body p { margin:0 0 6px; }
.read-apply-slide .teaching-lens-concept { display:block; margin:3px 0 7px; padding:6px; border-radius:9px; color:#0e7490; background:#e8f9fb; font-size:16px; line-height:1.2; text-align:center; }
.page9-lens-flow { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; gap:5px; padding-top:7px; border-top:1px solid rgba(8,145,178,.17); }
.page9-lens-flow span { position:relative; display:grid; place-items:center; min-width:0; min-height:28px; padding:3px 16px 3px 6px; box-sizing:border-box; border-radius:7px; color:#173b5b; background:rgba(232,249,251,.7); font-size:10.5px; font-weight:850; line-height:1.1; text-align:center; white-space:normal; overflow-wrap:anywhere; }
.page9-lens-flow span:not(:last-child)::after { content:"→"; position:absolute; right:4px; color:#16a6b7; font-size:14px; }
.page9-lens-footer { display:block; margin-top:6px; color:#0e7490; font-size:16px; text-align:center; }
@keyframes p9Reveal { to{opacity:1} }
@keyframes p9Flow { to{stroke-dashoffset:-64} }
@keyframes p9DeviceGlow { 50%{filter:drop-shadow(0 0 12px #54f3ff);transform:scale(1.18)} }
@keyframes p9FamilyDisconnect { 0%{opacity:0;stroke-dasharray:4 8} 30%,60%{opacity:.48;stroke-dasharray:4 8} 100%{opacity:.08;stroke-dasharray:2 16} }
@keyframes p9PhaseMessage { 0%,100%{opacity:0;transform:translateY(6px)} 18%,78%{opacity:1;transform:translateY(0)} }
@keyframes p9FinalConclusion { from{opacity:0;transform:scale(.94)} to{opacity:1;transform:scale(1)} }
@media (prefers-reduced-motion:reduce) { .read-apply-slide .device-dots circle,.read-apply-slide .device-links path,.read-apply-slide .family-links path,.read-apply-slide .family-concept-reveal * { animation:none!important; } .read-apply-slide.is-complete .family-concept-reveal,.read-apply-slide.is-complete .family-concept-reveal strong,.read-apply-slide.is-complete .device-dots circle { opacity:1; } }

/* Page 15: use the existing lower area more evenly. */
.session-score-slide {
    padding-top: 28px;
    padding-bottom: 24px;
}

.session-score-slide .session-score-grid {
    margin-top: 22px;
}

.session-score-slide .session-dimension-card {
    padding-top: 18px;
    padding-bottom: 18px;
}

.session-score-slide .student-name-field {
    display: flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    margin: 14px auto 0;
}

.session-score-slide .student-name-field label {
    color: #0F766E;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 1.4px;
}

.session-score-slide .student-name-field input {
    width: 230px;
    padding: 9px 12px;
    border: 1px solid rgba(20, 184, 166, .35);
    border-radius: 8px;
    color: #0F172A;
    background: rgba(255, 255, 255, .94);
    font: inherit;
    font-size: 16px;
}

.session-score-slide .student-name-field input:focus {
    outline: 2px solid rgba(56, 189, 248, .48);
    outline-offset: 2px;
}

.session-score-slide .session-reflection {
    margin-top: 18px;
    padding-top: 16px;
    padding-bottom: 16px;
}

.session-score-slide .session-score-footer {
    margin-top: 16px;
}

/* Page 2: compact the simplified roadmap without reducing core text size. */
.objectives-slide .output-grid {
    margin-top: 6px;
}

.objectives-slide .output-card {
    display: flex;
    flex-direction: column;
    min-height: 146px;
    padding: 13px 20px;
}

.objectives-slide .output-card .translatable {
    min-height: 70px;
}

.objectives-slide .output-card .translation {
    margin-top: -20px;
}

.objectives-slide .output-process {
    margin-top: auto;
}

.objectives-slide .roadmap-bridge {
    margin-top: 6px;
}

.objectives-slide .input-grid {
    margin-top: 4px;
}

/* Page 15: fit the complete check-out sequence within one viewport. */
.session-score-slide {
    padding-top: 18px;
    padding-bottom: 10px;
}

.session-score-slide .session-score-header {
    margin-top: 2px;
}

.session-score-slide .session-score-grid {
    margin-top: 10px;
}

.session-score-slide .session-dimension-card {
    padding: 11px 14px;
}

.session-score-slide .dimension-skills {
    min-height: 20px;
    margin-top: 6px;
}

.session-score-slide .score-progress-track {
    margin-top: 6px;
}

.session-score-slide .student-name-field {
    margin-top: 8px;
}

.session-score-slide .session-reflection {
    margin-top: 10px;
    padding: 10px 12px;
}

.session-score-slide .session-can-do-grid {
    gap: 5px 8px;
    margin-top: 6px;
}

.session-score-slide .session-can-do-item {
    padding: 6px 8px;
}

.session-score-slide .session-score-footer {
    margin-top: 8px;
}

.session-score-slide .learning-record-feedback {
    min-height: 10px;
    margin-top: 2px;
}

/* =========================================================
   PAGE 2 · TRANSLATION SPACING FIX
   Keep translations in normal document flow
   ========================================================= */

.objectives-slide .translatable {
    position: relative;
}

/* Translation stays BELOW the English text */
.objectives-slide .translatable .translation {
    position: static;
    width: auto;
    margin: 5px 0 0;
    padding: 0;
}

/* Mini Debate translation */
.objectives-slide .output-card .translation {
    margin-top: 6px;
    margin-bottom: 4px;
    line-height: 1.25;
}

/* Knowledge / Skills translations */
.objectives-slide .input-card .translation {
    margin-top: 3px;
    margin-bottom: 3px;
    line-height: 1.2;
}

.objectives-slide .output-card {
    min-height: 158px;
}

/* =========================================================
   PAGE 9 · FINAL VIEWPORT FIT
========================================================= */

/* 再节省一点顶部空间 */
.read-apply-slide {
    padding-top: 10px !important;
    padding-bottom: 8px !important;
}

/* 标题与主体之间稍微收紧 */
.read-apply-slide .read-apply-layout {
    margin-top: 6px !important;
}

/* 图片再降低一点点，不明显影响视觉 */
.read-apply-slide .read-apply-image {
    height: 190px !important;
}

/* 图片下方提示靠近图片 */
.read-apply-slide .image-observation-prompt {
    margin-top: 3px !important;
}

/* toolbox 稍微压一点 */
.read-apply-slide .read-apply-tools {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* Self-check 尽量贴近上方主体 */
.read-apply-slide .read-apply-assessment {
    margin-top: 2px !important;
    padding: 6px 10px !important;
}

/* 保持原来已经很紧凑的 checklist */
.read-apply-slide .self-check-item {
    min-height: 0 !important;
    padding: 4px 7px !important;
    font-size: 10.5px !important;
    line-height: 1.15 !important;
}

/* feedback 留出完整显示空间 */
.read-apply-slide .read-apply-feedback {
    min-height: 18px !important;
    margin-top: 3px !important;
    line-height: 1.15 !important;
}

/* transition 也不要占太多高度 */
.read-apply-slide .read-apply-transition {
    margin-top: 2px !important;
    font-size: 10.5px !important;
}

/* =========================================================
   PAGE 14 · STEP 3 THINK OPTIONS · VERTICAL LAYOUT
========================================================= */

.assignment-slide .assignment-position-options {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch;
    justify-content: center;

    width: 100%;
    gap: 5px;

    box-sizing: border-box;
}

/* BENEFITS / PROBLEMS / BOTH */
.assignment-slide .assignment-position-options span {
    display: block;

    width: 100%;
    min-width: 0;

    padding: 5px 8px;

    box-sizing: border-box;

    font-size: 10px;
    line-height: 1.1;
    font-weight: 700;

    text-align: center;
    white-space: nowrap;

    overflow: visible;
}

/* =========================================================
   PAGE 15 · VERTICAL BALANCE FIX
   Use the empty bottom space more naturally
========================================================= */

/* 整页增加上下空间分配 */
.session-score-slide {
    padding-top: 34px !important;
    padding-bottom: 30px !important;
}

/* 标题与总分区域稍微拉开 */
.session-score-slide .session-score-header {
    margin-bottom: 18px !important;
}

/* 三个维度积分卡之间保持舒展 */
.session-score-slide .score-dimension-grid {
    margin-top: 18px !important;
    gap: 18px !important;
}

/* 三张积分卡稍微增加高度 */
.session-score-slide .score-dimension-card {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

/* TODAY I CAN 与上方积分区拉开 */
.session-score-slide .session-can-do {
    margin-top: 22px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

/* 每条 can-do 不要挤在一起 */
.session-score-slide .can-do-item {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}

/* 姓名 + Next Step + Copy 区域向下展开 */
.session-score-slide .session-score-footer {
    margin-top: 22px !important;
}

/* 姓名输入框增加一点呼吸空间 */
.session-score-slide .student-name-field {
    margin-bottom: 14px !important;
}

/* Copy 按钮与上方内容稍微拉开 */
.session-score-slide .copy-learning-record-button {
    margin-top: 14px !important;
}

/* feedback 保留自然高度 */
.session-score-slide .learning-record-feedback {
    margin-top: 8px !important;
    min-height: 22px !important;
}

/* Page 2: add space between Reading and Argumentation only */
.learning-objectives-slide .argumentation-row {
    margin-top: 20px !important;
}
/* =========================================================
   DIGITAL CITY · MISSION MAP V1
   Competition display rule: large, high-contrast typography
========================================================= */
.digital-city-slide{background:radial-gradient(circle at 50% 42%,#092653 0,#03152f 38%,#020916 78%);color:#eef8ff;overflow:hidden}
.digital-city-slide:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(29,206,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(29,206,255,.055) 1px,transparent 1px);background-size:34px 34px;transform:perspective(700px) rotateX(58deg) scale(1.5);transform-origin:center 62%;opacity:.45}
.dc-shell{position:relative;z-index:1;width:100%;height:100%;padding:22px 28px 18px;box-sizing:border-box;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden}
.dc-topbar{display:grid;grid-template-columns:1fr 1.35fr .72fr;align-items:center;gap:22px;border-bottom:1px solid rgba(75,218,255,.35);padding-bottom:12px}.dc-kicker{font-size:42px;font-weight:900;letter-spacing:1px;text-shadow:0 0 16px #2ccfff}.dc-subtitle{font-size:22px;font-weight:800;color:#26e4f4;letter-spacing:1.2px}.dc-mission{display:flex;align-items:baseline;justify-content:center;gap:16px}.dc-mission span{border:1px solid #19d9ff;border-radius:12px;padding:8px 14px;color:#22e6ff;font-size:21px;font-weight:800}.dc-mission strong{font-size:34px}.dc-mission small{font-size:18px;color:#2ee7f5}.dc-score{justify-self:end;border:1px solid rgba(91,209,255,.55);border-radius:14px;padding:9px 16px;text-align:center}.dc-score span{display:block;font-size:25px;font-weight:800}.dc-score small{font-size:14px}
.dc-main{display:grid;grid-template-columns:250px minmax(0,1fr) 300px;gap:18px;min-height:0;padding-top:15px;overflow:hidden}.nova-panel,.toolkit-panel{min-height:0;overflow:hidden;border:1px solid rgba(65,211,255,.42);border-radius:18px;background:rgba(2,14,35,.72);box-shadow:inset 0 0 25px rgba(0,169,255,.07)}.nova-panel{padding:15px;display:flex;flex-direction:column;justify-content:center}.nova-core{height:250px;flex:0 0 250px;position:relative;display:grid;place-items:center}.nova-ball{position:relative;z-index:3;width:155px;height:155px;border-radius:50%;border:3px solid #54e9ff;background:radial-gradient(circle,#2bc8ff 0,#0753bb 20%,#051633 60%);box-shadow:0 0 24px #16cfff,0 0 70px rgba(39,92,255,.75);display:flex;flex-direction:column;align-items:center;justify-content:center}.nova-ball strong{font-size:32px}.nova-ball span{font-size:16px;color:#4ef3ff;font-weight:800}.nova-ball em{font-size:15px;color:#7ff7ff;font-style:normal}.nova-orbit{position:absolute;border:1px solid #43e5ff;border-radius:50%;box-shadow:0 0 12px #1cbfff}.orbit-a{width:205px;height:205px;animation:novaSpin 12s linear infinite}.orbit-b{width:225px;height:115px;transform:rotate(28deg);animation:novaPulse 3s ease-in-out infinite}.nova-pedestal{position:absolute;bottom:4px;width:205px;height:35px;border-radius:50%;border:3px solid #42dfff;box-shadow:0 0 25px #1bbfff,inset 0 0 20px #176cff}.nova-pedestal:before{content:"";position:absolute;left:28px;right:28px;top:-20px;height:25px;background:linear-gradient(90deg,transparent,rgba(51,220,255,.55),transparent);clip-path:polygon(15% 100%,30% 0,70% 0,85% 100%)}@keyframes novaSpin{to{transform:rotate(360deg)}}@keyframes novaPulse{50%{opacity:.45;transform:rotate(28deg) scale(1.08)}}.nova-message{font-size:17px;line-height:1.32;padding:10px}.nova-message p{margin:4px 0}.nova-message strong{color:#2be9ff}.nova-message hr{border:0;border-top:1px solid rgba(62,218,255,.5);margin:9px 0}.nova-message [lang="zh-CN"]{color:#5ff2ff;font-size:16px}
.dc-map{position:relative;min-width:0;min-height:0;overflow:hidden}.dc-map:before{content:"";position:absolute;inset:4% 2%;background:radial-gradient(ellipse at center,rgba(19,112,221,.18),transparent 65%);border-radius:45%}.dc-routes{position:absolute;inset:0;width:100%;height:100%}.route{fill:none;stroke-width:8;stroke-linecap:round;filter:drop-shadow(0 0 8px currentColor)}.route.active{stroke:#22e7ff;color:#22e7ff;stroke-dasharray:18 10;animation:routeFlow 1.3s linear infinite}.route.locked{stroke:#304c72;stroke-width:5;opacity:.5}.route.risk{stroke:#704029}.route.final{stroke:#675c2d}@keyframes routeFlow{to{stroke-dashoffset:-28}}
.dc-node{position:absolute;width:190px;min-height:94px;padding:11px 12px 10px 68px;text-align:left;border:1px solid currentColor;border-radius:14px;background:rgba(3,16,40,.9);color:#5cecff;box-shadow:0 0 20px rgba(28,206,255,.22);cursor:pointer}.dc-node b{position:absolute;left:10px;top:12px;font-size:42px;line-height:1;font-weight:900;text-shadow:0 0 14px currentColor}.dc-node span{display:block;font-size:17px;font-weight:900;line-height:1.05}.dc-node em{display:block;font-size:17px;font-style:normal;font-weight:800;margin-top:4px;color:currentColor}.dc-node small{display:block;font-size:13px;line-height:1.15;color:#eaf7ff;margin-top:5px}.dc-node.current{transform:scale(1.08);box-shadow:0 0 12px currentColor,0 0 36px rgba(32,220,255,.5);animation:nodePulse 2s ease-in-out infinite}.dc-node.locked{filter:saturate(.55);opacity:.75;cursor:default}.node-01{left:38%;top:2%}.node-02{left:3%;top:26%;color:#4aa2ff}.node-03{right:2%;top:28%;color:#a26cff}.node-04{left:4%;top:55%;color:#65ef63}.node-05{right:1%;top:57%;color:#ff9d31}.node-06{left:39%;top:67%;color:#ff55bd}.node-07{left:14%;bottom:0;color:#ffd343}.node-08{right:12%;bottom:0;color:#ffe18b}@keyframes nodePulse{50%{box-shadow:0 0 20px currentColor,0 0 55px rgba(32,220,255,.7)}}
.toolkit-panel{padding:13px 14px}.toolkit-panel h3{font-size:22px;color:#eafaff;margin:0 0 6px;border-bottom:1px solid rgba(72,219,255,.35);padding-bottom:8px}.toolkit-panel h3 span{color:#30e5ef;font-size:17px}.tool-item{display:grid;grid-template-columns:42px 1fr;gap:9px;align-items:center;padding:7px 4px;border-bottom:1px solid rgba(83,188,255,.25)}.tool-item>b{display:grid;place-items:center;width:38px;height:38px;border:1px solid #38dfff;border-radius:9px;color:#54ecff;font-size:22px;box-shadow:inset 0 0 12px rgba(23,202,255,.18)}.tool-item p{margin:0}.tool-item strong{font-size:16px}.tool-item strong span{color:#58eff4;font-size:14px;margin-left:5px}.tool-item small{display:block;font-size:12px;line-height:1.15;margin-top:2px;color:#c7d8e9}.dc-instruction{text-align:center;font-size:16px;line-height:1.2;padding-top:5px;color:#cdefff}.dc-instruction strong{color:#34e8ff}
@media(max-width:1100px){.dc-main{grid-template-columns:210px 1fr 250px}.dc-node{width:165px;padding-left:58px}.dc-node b{font-size:34px}.dc-node span,.dc-node em{font-size:14px}.tool-item small{display:none}}

/* =========================================================
   DIGITAL CITY · PAGE 2 READABILITY
   Keep all labels on one line at the 1600 × 900 stage size.
========================================================= */

.digital-city-slide .dc-main {
    grid-template-columns: 390px minmax(0, 1fr) 400px;
    gap: 16px;
}

.digital-city-slide .nova-panel {
    padding: 12px 20px;
}

.digital-city-slide .nova-core {
    height: 178px;
    flex-basis: 178px;
}

.digital-city-slide .nova-ball {
    width: 120px;
    height: 120px;
}

.digital-city-slide .nova-ball strong {
    font-size: 27px;
}

.digital-city-slide .nova-ball span,
.digital-city-slide .nova-ball em {
    font-size: 13px;
}

.digital-city-slide .orbit-a {
    width: 158px;
    height: 158px;
}

.digital-city-slide .orbit-b {
    width: 176px;
    height: 92px;
}

.digital-city-slide .nova-pedestal {
    bottom: 0;
    width: 168px;
    height: 27px;
}

.digital-city-slide .nova-message {
    padding: 8px 4px 2px;
    font-size: 34px;
    line-height: 1.12;
}

.digital-city-slide .nova-message p {
    margin: 4px 0;
}

.digital-city-slide .nova-message hr {
    margin: 8px 0;
}

.digital-city-slide .nova-message [lang="zh-CN"] {
    font-size: 32px;
    line-height: 1.16;
}

.digital-city-slide .dc-node {
    width: 310px;
    min-height: 92px;
    padding: 10px 12px 9px 70px;
    box-sizing: border-box;
}

.digital-city-slide .dc-node b {
    font-size: 46px;
}

.digital-city-slide .dc-node span,
.digital-city-slide .dc-node em,
.digital-city-slide .dc-node small {
    white-space: nowrap;
}

.digital-city-slide .dc-node span {
    font-size: 20px;
    line-height: 1.08;
}

.digital-city-slide .dc-node em {
    font-size: 19px;
    line-height: 1.08;
}

.digital-city-slide .dc-node small {
    font-size: 16px;
    line-height: 1.08;
}

.digital-city-slide .dc-node.current {
    transform: scale(1.02);
}

.digital-city-slide .node-01,
.digital-city-slide .node-06 {
    left: 50%;
    right: auto;
    translate: -50% 0;
}

.digital-city-slide .node-01 { top: 1%; }
.digital-city-slide .node-02 { left: 0; top: 25%; }
.digital-city-slide .node-03 { right: 0; top: 27%; }
.digital-city-slide .node-04 { left: 0; top: 51%; }
.digital-city-slide .node-05 { right: 0; top: 53%; }
.digital-city-slide .node-06 { top: 68%; }
.digital-city-slide .node-07 { left: 0; bottom: 0; }
.digital-city-slide .node-08 { right: 0; bottom: 0; }

.digital-city-slide .toolkit-panel {
    padding: 12px 14px;
}

.digital-city-slide .toolkit-panel h3 {
    margin-bottom: 4px;
    padding-bottom: 7px;
    font-size: 26px;
    white-space: nowrap;
}

.digital-city-slide .toolkit-panel h3 span {
    font-size: 20px;
}

.digital-city-slide .tool-item {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
    padding: 7px 2px;
}

.digital-city-slide .tool-item > b {
    width: 42px;
    height: 42px;
    font-size: 24px;
}

.digital-city-slide .tool-item strong {
    display: block;
    font-size: 20px;
    line-height: 1.1;
    white-space: nowrap;
}

.digital-city-slide .tool-item strong span {
    font-size: 17px;
}

.digital-city-slide .tool-item small {
    font-size: 16px;
    line-height: 1.12;
    white-space: nowrap;
}

/* Page 1 only: 16:9 hero typography and right-side balance. */
.hero-slide .hero-content{left:7.5%;width:64%}
.hero-slide .course-label{padding:10px 20px;margin-bottom:22px;font-size:25px;letter-spacing:3.5px}
.hero-slide .unit-number{margin-bottom:12px;font-size:29px;letter-spacing:5px}
.reveal .hero-slide .hero-title{font-size:74px;line-height:1.06}
.hero-slide .title-translation{margin-top:9px;font-size:29px;line-height:1.35}
.hero-slide .hero-divider{width:92px;height:5px;margin:24px 0 22px}
.reveal .hero-slide .hero-subtitle{max-width:980px;margin-bottom:0;font-size:34px;line-height:1.38}
.hero-slide .subtitle-translation{max-width:980px;margin-top:8px;font-size:27px;line-height:1.35}
.hero-slide .start-button{gap:20px;margin-top:24px;padding:18px 32px;font-size:24px}
.hero-slide .button-arrow{font-size:29px}
.hero-slide .hero-footer{left:7.5%;font-size:20px}
.hero-slide .navigation-hint{right:5%;gap:11px;font-size:19px}
.hero-slide .navigation-hint .key{width:36px;height:36px;border-radius:9px;font-size:24px}
.hero-slide .network-icon{width:235px;right:6.5%;top:14%;opacity:.20}
.hero-slide .device-icon{width:160px;right:11%;bottom:15%;opacity:.20}
.hero-slide .glow-one{width:820px;height:820px;right:-190px;top:-105px;background:radial-gradient(circle at center,rgba(74,226,255,.24) 0%,rgba(47,156,255,.13) 34%,rgba(18,92,189,.05) 55%,transparent 74%)}

/* Page 1 preview: centered cover typography. */
.hero-slide .hero-content {
    left: 50%;
    width: 86%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.hero-slide .course-label,
.hero-slide .unit-number,
.hero-slide .hero-title,
.hero-slide .title-translation,
.hero-slide .hero-subtitle,
.hero-slide .subtitle-translation {
    text-align: center;
}

.hero-slide .hero-divider {
    margin-left: auto;
    margin-right: auto;
}

.reveal .hero-slide .hero-subtitle,
.hero-slide .title-translation,
.hero-slide .subtitle-translation {
    margin-left: auto;
    margin-right: auto;
}

.hero-slide .start-button {
    justify-content: center;
}

/* Page 1: double the requested vertical breathing space. */
.hero-slide .course-label {
    margin-bottom: 44px;
}

.hero-slide .hero-divider {
    margin-bottom: 44px;
}

/* =========================================================
   PAGE 2 ONLY · DIGITAL CITY 2.5D MISSION HUB
========================================================= */

.digital-city-slide {
    background:
        radial-gradient(circle at 52% 46%, rgba(16, 113, 226, .34), transparent 31%),
        radial-gradient(circle at 8% 55%, rgba(0, 224, 255, .10), transparent 29%),
        linear-gradient(145deg, #020916 0%, #041a39 52%, #020a19 100%);
}

.digital-city-slide::before {
    inset: 17% -9% -45%;
    background-image:
        linear-gradient(rgba(52, 213, 255, .10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(52, 213, 255, .10) 1px, transparent 1px);
    background-size: 50px 38px;
    transform: perspective(580px) rotateX(61deg) scale(1.28);
    transform-origin: center top;
    opacity: .58;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 72%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 72%, transparent);
}

.digital-city-slide .dc-shell {
    grid-template-rows: auto minmax(0, 1fr);
    padding: 20px 28px 18px;
}

.digital-city-slide .dc-topbar {
    position: relative;
    grid-template-columns: 1fr 1.18fr .72fr;
    padding: 2px 4px 14px;
    border-bottom: 1px solid rgba(72, 225, 255, .50);
    box-shadow: 0 14px 24px -24px rgba(46, 224, 255, .95);
}

.digital-city-slide .dc-topbar::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 28%;
    height: 3px;
    background: linear-gradient(90deg, #37e7ff, transparent);
    box-shadow: 0 0 14px #24dfff;
}

.digital-city-slide .dc-kicker {
    font-size: 45px;
    letter-spacing: 1.8px;
}

.digital-city-slide .dc-subtitle {
    font-size: 20px;
    letter-spacing: 2px;
    text-shadow: 0 0 14px rgba(38, 228, 244, .48);
}

.digital-city-slide .dc-mission span,
.digital-city-slide .dc-score {
    background: linear-gradient(135deg, rgba(8, 47, 91, .75), rgba(2, 15, 37, .82));
    box-shadow: inset 0 0 20px rgba(30, 211, 255, .08), 0 0 18px rgba(27, 200, 255, .10);
}

.digital-city-slide .dc-main {
    grid-template-columns: 340px minmax(0, 1fr) 390px;
    gap: 18px;
    padding-top: 14px;
}

.digital-city-slide .nova-panel,
.digital-city-slide .toolkit-panel {
    border-color: rgba(69, 224, 255, .55);
    background:
        linear-gradient(145deg, rgba(7, 38, 75, .74), rgba(1, 12, 31, .88));
    box-shadow:
        inset 0 0 34px rgba(17, 168, 255, .10),
        0 0 24px rgba(0, 176, 255, .10);
}

.digital-city-slide .nova-panel {
    position: relative;
    padding: 12px 18px 14px;
    justify-content: flex-start;
}

.digital-city-slide .nova-panel::before,
.digital-city-slide .toolkit-panel::before {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(104, 231, 255, .10);
    border-radius: 13px;
    pointer-events: none;
}

.digital-city-slide .nova-core {
    height: 294px;
    flex: 0 0 294px;
    isolation: isolate;
}

.digital-city-slide .nova-ball {
    width: 142px;
    height: 142px;
    border-width: 2px;
    background:
        radial-gradient(circle at 42% 35%, #7ff6ff 0 2%, #1bcbf5 3%, #0757be 22%, #041936 62%, #010817 100%);
    box-shadow:
        0 0 20px #35eaff,
        0 0 55px rgba(30, 200, 255, .78),
        0 0 110px rgba(30, 94, 255, .40),
        inset 0 0 30px rgba(80, 239, 255, .35);
    animation: novaBreathe 4.8s ease-in-out infinite;
}

.digital-city-slide .nova-ball::before {
    content: "";
    position: absolute;
    inset: 9px;
    border: 1px solid rgba(122, 247, 255, .42);
    border-radius: 50%;
    box-shadow: inset 0 0 14px rgba(66, 225, 255, .24);
}

.digital-city-slide .nova-ball strong { font-size: 31px; }
.digital-city-slide .nova-ball span { font-size: 15px; }
.digital-city-slide .nova-ball em { font-size: 14px; }

.digital-city-slide .nova-orbit {
    z-index: 2;
    border-color: rgba(81, 233, 255, .58);
    box-shadow: 0 0 13px rgba(28, 210, 255, .54), inset 0 0 13px rgba(28, 210, 255, .12);
}

.digital-city-slide .nova-orbit i {
    position: absolute;
    top: 50%;
    left: -4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #b8fbff;
    box-shadow: 0 0 8px #fff, 0 0 18px #23dfff;
}

.digital-city-slide .orbit-a {
    width: 202px;
    height: 202px;
    animation: novaOrbitA 15s linear infinite;
}

.digital-city-slide .orbit-b {
    width: 238px;
    height: 116px;
    animation: novaOrbitB 11s linear infinite reverse;
}

.digital-city-slide .orbit-c {
    width: 176px;
    height: 250px;
    transform: rotate(56deg);
    animation: novaOrbitC 19s linear infinite;
}

.digital-city-slide .nova-scan-ring {
    position: absolute;
    z-index: 1;
    width: 260px;
    height: 260px;
    border: 1px dashed rgba(66, 226, 255, .28);
    border-radius: 50%;
    animation: novaScan 18s linear infinite;
}

.digital-city-slide .nova-data-arc {
    position: absolute;
    z-index: 1;
    width: 274px;
    height: 274px;
    border-radius: 50%;
    border: 2px solid transparent;
    pointer-events: none;
}

.digital-city-slide .arc-a {
    border-top-color: rgba(66, 230, 255, .70);
    border-right-color: rgba(66, 230, 255, .18);
    transform: rotate(24deg);
    animation: novaScan 13s linear infinite reverse;
}

.digital-city-slide .arc-b {
    width: 226px;
    height: 226px;
    border-bottom-color: rgba(105, 111, 255, .68);
    border-left-color: rgba(66, 230, 255, .15);
    animation: novaScan 9s linear infinite;
}

.digital-city-slide .nova-pedestal {
    bottom: 5px;
    width: 212px;
    height: 29px;
    animation: novaPlatform 3.8s ease-in-out infinite;
}

.digital-city-slide .nova-pedestal::after {
    content: "";
    position: absolute;
    inset: -12px -22px;
    border: 1px solid rgba(65, 226, 255, .42);
    border-radius: 50%;
    animation: novaRipple 3.8s ease-out infinite;
}

.digital-city-slide .nova-message {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px 8px 5px;
    font-size: 23px;
    line-height: 1.34;
}

.digital-city-slide .nova-message p { margin: 5px 0; }
.digital-city-slide .nova-message hr { width: 100%; margin: 12px 0; }
.digital-city-slide .nova-message [lang="zh-CN"] { font-size: 21px; line-height: 1.42; }
.digital-city-slide .nova-message strong { color: #49efff; text-shadow: 0 0 12px rgba(48, 228, 255, .54); }

@keyframes novaBreathe {
    50% { filter: brightness(1.18); transform: scale(1.035); }
}
@keyframes novaOrbitA { to { transform: rotate(360deg); } }
@keyframes novaOrbitB { from { transform: rotate(28deg); } to { transform: rotate(388deg); } }
@keyframes novaOrbitC { from { transform: rotate(56deg); } to { transform: rotate(416deg); } }
@keyframes novaScan { to { transform: rotate(360deg); } }
@keyframes novaPlatform { 50% { filter: brightness(1.35); transform: scaleX(1.08); } }
@keyframes novaRipple { 0% { opacity: .65; transform: scale(.80); } 80%,100% { opacity: 0; transform: scale(1.18); } }

.digital-city-slide .dc-map {
    isolation: isolate;
    border-left: 1px solid rgba(67, 210, 255, .08);
    border-right: 1px solid rgba(67, 210, 255, .08);
    background: radial-gradient(ellipse at 50% 48%, rgba(22, 116, 235, .18), transparent 62%);
}

.digital-city-slide .dc-map::before {
    z-index: -2;
    inset: 38% 3% 2%;
    border-radius: 0;
    background:
        linear-gradient(90deg,
            transparent 0 3%, rgba(31, 190, 255, .10) 3% 7%, transparent 7% 10%,
            rgba(31, 190, 255, .16) 10% 14%, transparent 14% 18%,
            rgba(74, 115, 255, .13) 18% 23%, transparent 23% 29%,
            rgba(31, 190, 255, .14) 29% 34%, transparent 34% 40%,
            rgba(78, 129, 255, .13) 40% 47%, transparent 47% 54%,
            rgba(31, 190, 255, .16) 54% 60%, transparent 60% 66%,
            rgba(100, 80, 255, .12) 66% 72%, transparent 72% 79%,
            rgba(31, 190, 255, .14) 79% 84%, transparent 84% 90%,
            rgba(31, 190, 255, .10) 90% 95%, transparent 95%);
    clip-path: polygon(0 100%,0 75%,4% 75%,4% 50%,10% 50%,10% 69%,16% 69%,16% 38%,22% 38%,22% 62%,29% 62%,29% 28%,36% 28%,36% 70%,43% 70%,43% 42%,50% 42%,50% 18%,57% 18%,57% 55%,64% 55%,64% 33%,72% 33%,72% 66%,80% 66%,80% 45%,88% 45%,88% 72%,95% 72%,95% 52%,100% 52%,100% 100%);
    opacity: .62;
    filter: drop-shadow(0 0 9px rgba(42, 192, 255, .20));
}

.digital-city-slide .dc-map::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 24%, #65efff 0 1px, transparent 2px),
        radial-gradient(circle at 76% 19%, #9a79ff 0 1px, transparent 2px),
        radial-gradient(circle at 62% 61%, #56e8ff 0 1px, transparent 2px),
        radial-gradient(circle at 30% 72%, #57f0c8 0 1px, transparent 2px);
    background-size: 92px 87px, 127px 103px, 111px 118px, 149px 131px;
    opacity: .45;
    animation: cityDataDrift 14s linear infinite;
}

@keyframes cityDataDrift { to { background-position: 0 -87px, 0 -103px, 0 -118px, 0 -131px; } }

.digital-city-slide .dc-routes { z-index: 0; overflow: visible; }
.digital-city-slide .route { stroke-width: 7; filter: drop-shadow(0 0 7px currentColor); }
.digital-city-slide .route.active { stroke-width: 9; stroke-dasharray: 16 10; animation: routeFlow 1.1s linear infinite; }
.digital-city-slide .route.locked { opacity: .32; stroke-width: 4; }

.digital-city-slide .dc-node {
    z-index: 2;
    width: 300px;
    min-height: 92px;
    padding: 11px 12px 10px 69px;
    overflow: hidden;
    border: 1px solid currentColor;
    border-radius: 13px;
    background:
        linear-gradient(135deg, color-mix(in srgb, currentColor 11%, transparent), rgba(2, 12, 31, .92) 44%),
        rgba(3, 16, 40, .90);
    box-shadow:
        0 0 14px color-mix(in srgb, currentColor 24%, transparent),
        inset 0 0 21px rgba(85, 218, 255, .08);
    backdrop-filter: blur(5px);
}

.digital-city-slide .dc-node::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    top: 6px;
    height: 1px;
    background: linear-gradient(90deg, currentColor, transparent 72%);
    opacity: .64;
}

.digital-city-slide .dc-node b {
    font-size: 46px;
    color: currentColor;
    opacity: .94;
}

.digital-city-slide .dc-node span { font-size: 19px; line-height: 1.07; }
.digital-city-slide .dc-node em { font-size: 18px; line-height: 1.08; }
.digital-city-slide .dc-node small { font-size: 15px; line-height: 1.08; }
.digital-city-slide .dc-node.current {
    transform: scale(1.035);
    background: linear-gradient(135deg, rgba(29, 223, 255, .25), rgba(1, 13, 34, .94) 52%);
    box-shadow: 0 0 16px currentColor, 0 0 42px rgba(32, 220, 255, .47), inset 0 0 26px rgba(45, 228, 255, .16);
    animation: nodePulse 2.8s ease-in-out infinite;
}

.digital-city-slide .node-01,
.digital-city-slide .node-06 { left: 50%; translate: -50% 0; }
.digital-city-slide .node-01 { top: 1%; }
.digital-city-slide .node-02 { left: 0; top: 23%; min-height: 112px; }
.digital-city-slide .node-03 { right: 0; top: 26%; }
.digital-city-slide .node-04 { left: 0; top: 51%; }
.digital-city-slide .node-05 { right: 0; top: 53%; }
.digital-city-slide .node-06 { top: 68%; }
.digital-city-slide .node-07 { left: 0; bottom: 0; }
.digital-city-slide .node-08 { right: 0; bottom: 0; }

.digital-city-slide .toolkit-panel {
    position: relative;
    display: grid;
    grid-template-rows: auto repeat(6, minmax(0, 1fr));
    padding: 14px 16px 12px;
}

.digital-city-slide .toolkit-panel h3 {
    margin: 0;
    padding: 3px 2px 12px;
    font-size: 25px;
    line-height: 1.1;
    border-bottom-color: rgba(72, 219, 255, .48);
}

.digital-city-slide .toolkit-panel h3 span { font-size: 19px; }

.digital-city-slide .tool-item {
    min-height: 0;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
    align-content: center;
    padding: 7px 2px;
    border-bottom-color: rgba(83, 188, 255, .28);
}

.digital-city-slide .tool-item:last-child { border-bottom: 0; }

.digital-city-slide .tool-item > b {
    width: 48px;
    height: 48px;
    font-size: 27px;
    background: rgba(10, 63, 105, .28);
    box-shadow: inset 0 0 15px rgba(23, 202, 255, .18), 0 0 13px rgba(23, 202, 255, .12);
}

.digital-city-slide .tool-item strong {
    font-size: 20px;
    line-height: 1.12;
}

.digital-city-slide .tool-item strong span {
    font-size: 17px;
    margin-left: 7px;
}

.digital-city-slide .tool-item small {
    margin-top: 5px;
    font-size: 15px;
    line-height: 1.18;
}

@media (prefers-reduced-motion: reduce) {
    .digital-city-slide .nova-ball,
    .digital-city-slide .nova-orbit,
    .digital-city-slide .nova-scan-ring,
    .digital-city-slide .nova-data-arc,
    .digital-city-slide .nova-pedestal,
    .digital-city-slide .nova-pedestal::after,
    .digital-city-slide .dc-map::after,
    .digital-city-slide .route.active,
    .digital-city-slide .dc-node.current {
        animation: none !important;
    }
}

/* Page 3 final cascade: keep the classroom-scale pass above legacy rules. */
.communication-timeline-slide { padding:22px 64px; grid-template-rows:72px auto auto minmax(242px,1fr); row-gap:10px; }
.communication-timeline-slide .mission-header { height:72px; min-height:0; padding:0 0 12px; }
.communication-timeline-slide .mission-badge { min-height:40px; padding:0 19px; font-size:21px; }
.communication-timeline-slide .stage-badge { min-height:40px; padding:0 18px; font-size:19px; }
.communication-timeline-slide .mission-score { min-width:184px; padding:8px 16px; }
.communication-timeline-slide .mission-score > span { font-size:27px; }
.communication-timeline-slide .mission-score small { font-size:14px; }
.reveal .communication-timeline-slide .communication-title { margin:0 0 3px; font-size:47px; }
.reveal .communication-timeline-slide .timeline-challenge-prompt { font-size:25px; }
.reveal .communication-timeline-slide .timeline-instruction { margin-top:5px; font-size:19px; }
.communication-timeline-slide .timeline-game { margin:0; }
.communication-timeline-slide .timeline-items { gap:20px; margin-bottom:12px; }
.communication-timeline-slide .timeline-items .timeline-card { grid-template-columns:82px minmax(0,1fr); min-height:112px; padding:10px 18px; gap:14px; }
.communication-timeline-slide .communication-device-image { width:76px; height:76px; }
.communication-timeline-slide .timeline-items .timeline-card-text .translation-trigger { font-size:21px; }
.communication-timeline-slide .timeline-items .timeline-card-text .translation { display:block; margin-top:6px; color:#0e7490; font-size:17px; line-height:1.1; opacity:1; }
.communication-timeline-slide .timeline-track { gap:20px; padding-top:22px; }
.communication-timeline-slide .drop-zone { min-height:132px; padding:27px 12px 9px; }
.communication-timeline-slide .year { font-size:21px; }
.communication-timeline-slide .drop-label { font-size:15px; }
.communication-timeline-slide .drop-zone .timeline-card { grid-template-columns:54px minmax(0,1fr); min-height:82px; padding:6px 10px; }
.communication-timeline-slide .drop-zone .communication-device-image { width:51px; height:51px; }
.communication-timeline-slide .drop-zone .timeline-card-text .translation-trigger { font-size:17px; }
.communication-timeline-slide .drop-zone .timeline-card-text .translation { font-size:15px; }
.communication-timeline-slide .activity-control-bar { min-height:48px; margin-top:10px; padding:7px 14px; }
.communication-timeline-slide .activity-progress-label { font-size:17px; }
.communication-timeline-slide .activity-score { font-size:21px; }
.communication-timeline-slide #resetTimeline { font-size:16px; }
.communication-timeline-slide .nova-mission-update { min-height:0; height:auto; margin:0; padding:17px 22px; border-radius:18px; }
.communication-timeline-slide .nova-update-idle { justify-content:flex-start; min-height:100%; padding-left:10px; }
.communication-timeline-slide .nova-update-idle strong,
.communication-timeline-slide .nova-update-heading strong { font-size:18px; }
.communication-timeline-slide .nova-update-idle p { margin-top:13px; font-size:21px; }
.communication-timeline-slide .nova-update-complete { grid-template-columns:1fr 1fr; grid-template-areas:"head head" "evolution changed" "network question"; gap:10px 18px; height:100%; }
.communication-timeline-slide .nova-update-heading { grid-area:head; }
.communication-timeline-slide .nova-update-heading b { font-size:19px; }
.communication-timeline-slide .nova-update-heading em { font-size:17px; }
.communication-timeline-slide .device-evolution-summary { justify-content:flex-start; gap:7px; font-size:15px; white-space:normal; }
.communication-timeline-slide .evolution-keywords b { padding:7px 10px; font-size:14px; }
.communication-timeline-slide .network-update { grid-area:network; display:block; padding:8px 12px; }
.communication-timeline-slide .network-update > small { font-size:13px; }
.communication-timeline-slide .network-update strong { display:flex; align-items:center; gap:10px; font-size:18px; }
.communication-timeline-slide .transition-question { grid-area:question; align-self:center; margin:0; font-size:25px; line-height:1.12; text-align:left; }

/* =========================================================
   MISSION 01 · REUSABLE STAGE TRANSITION SYSTEM
========================================================= */
.mission-stage-transition {
    --stage-transition-fade-in:450ms;
    --stage-transition-fade-out:700ms;
    position:fixed;
    z-index:7800;
    left:50%;
    bottom:76px;
    display:grid;
    grid-template-columns:100px minmax(0,1fr);
    align-items:center;
    gap:22px;
    width:min(610px,calc(100vw - 190px));
    box-sizing:border-box;
    padding:18px 26px;
    border:1px solid rgba(15,181,190,.55);
    border-radius:22px;
    background:linear-gradient(135deg,rgba(247,254,255,.97),rgba(224,250,250,.94));
    box-shadow:0 18px 46px rgba(8,57,84,.2),inset 0 0 24px rgba(49,220,224,.1);
    color:#082f49;
    font-family:Inter,"Segoe UI","PingFang SC",sans-serif;
    opacity:0;
    pointer-events:none;
    transform:translate(-50%,18px) scale(.98);
    visibility:hidden;
}
.mission-stage-transition.is-visible {
    opacity:1;
    visibility:visible;
    transform:translate(-50%,0) scale(1);
}
.mission-stage-transition.is-full {
    animation:mission-stage-transition-in var(--stage-transition-fade-in) ease-out both;
}
.mission-stage-transition.is-fading {
    opacity:0;
    transform:translate(-50%,10px) scale(.985);
    transition:opacity var(--stage-transition-fade-out) ease,transform var(--stage-transition-fade-out) ease;
}
.mission-stage-transition__core {
    position:relative;
    width:92px;
    height:92px;
    border-radius:50%;
    background:radial-gradient(circle at 42% 38%,#d8ffff 0 8%,#20d7e5 18%,#087eaa 43%,#062744 70%);
    box-shadow:0 0 18px rgba(29,226,235,.8),0 0 40px rgba(17,157,211,.42);
}
.mission-stage-transition__core b {
    position:absolute;
    inset:31px;
    border-radius:50%;
    background:#eaffff;
    box-shadow:0 0 20px #5ff7ff;
}
.mission-stage-transition__core span {
    position:absolute;
    left:14px;
    right:14px;
    bottom:-12px;
    height:10px;
    border:2px solid rgba(28,215,225,.72);
    border-radius:50%;
    box-shadow:0 0 13px rgba(28,215,225,.55);
}
.mission-stage-transition__orbit {
    position:absolute;
    inset:-7px;
    border:1px solid rgba(35,223,232,.7);
    border-radius:50%;
    animation:mission-stage-orbit 4.8s linear infinite;
}
.mission-stage-transition__orbit.orbit-b {
    inset:5px -10px;
    transform:rotate(63deg);
    animation-duration:6.2s;
    animation-direction:reverse;
}
.mission-stage-transition__copy { min-width:0; text-align:left; }
.mission-stage-transition__task {
    display:block;
    margin-bottom:4px;
    color:#168696;
    font-size:13px;
    font-weight:800;
    letter-spacing:1.4px;
}
.mission-stage-transition__beacon {
    display:block;
    color:#0795a5;
    font-size:19px;
    line-height:1.15;
    letter-spacing:.4px;
}
.mission-stage-transition__complete {
    display:block;
    margin-top:4px;
    color:#0a334f;
    font-size:24px;
    line-height:1.12;
}
.mission-stage-transition__next {
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:baseline;
    column-gap:12px;
    margin-top:12px;
    padding-top:10px;
    border-top:1px solid rgba(14,148,162,.25);
}
.mission-stage-transition__next em {
    grid-row:1 / span 3;
    align-self:center;
    color:#118798;
    font-size:12px;
    font-style:normal;
    font-weight:800;
    letter-spacing:1px;
    white-space:nowrap;
}
.mission-stage-transition__next h3,
.mission-stage-transition__next p,
.mission-stage-transition__next small { margin:0; }
.mission-stage-transition__next h3 { color:#082f49; font-size:19px; line-height:1.15; }
.mission-stage-transition__next p { color:#087d88; font-size:15px; line-height:1.25; }
.mission-stage-transition__next small { color:#4b6577; font-size:14px; line-height:1.25; }
.mission-stage-transition.is-mission-complete .mission-stage-transition__complete { color:#087f76; }

@keyframes mission-stage-transition-in {
    from { opacity:0; transform:translate(-50%,18px) scale(.98); }
    to { opacity:1; transform:translate(-50%,0) scale(1); }
}
@keyframes mission-stage-orbit { to { rotate:360deg; } }

@media (max-width:900px) {
    .mission-stage-transition { left:18px; right:96px; width:auto; transform:translateY(18px) scale(.98); }
    .mission-stage-transition.is-visible { transform:translateY(0) scale(1); }
    .mission-stage-transition.is-fading { transform:translateY(10px) scale(.985); }
}

@media (prefers-reduced-motion:reduce) {
    .mission-stage-transition,
    .mission-stage-transition.is-full,
    .mission-stage-transition.is-fading { animation:none!important; transition:opacity .15s linear!important; }
    .mission-stage-transition__orbit { animation:none!important; }
}

/* PAGE 10 · FINAL FLOW OVERRIDES (must remain after legacy sizing rules) */
html .reveal .slides section.supporting-details-slide { grid-template-rows:60px 68px 34px minmax(400px,1fr) 90px 164px; }
html .supporting-details-slide .tf-grid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none; grid-auto-rows:auto; align-content:center; align-items:start; gap:8px 13px; overflow:visible; }
html .supporting-details-slide .tf-card { display:grid; grid-template-columns:34px minmax(0,1fr) auto; grid-template-rows:auto auto auto auto auto; align-items:start; align-content:start; gap:5px 10px; width:100%; height:auto; min-height:0; max-height:none; padding:11px 13px; overflow:visible; }
html .supporting-details-slide .tf-card::after { content:none; }
html .supporting-details-slide .tf-number { position:static; grid-column:1; grid-row:1; padding-top:2px; font-size:15px; }
html .supporting-details-slide .tf-statement { grid-column:2; grid-row:1; min-height:0; padding:0; font-size:15px; line-height:1.32; }
html .supporting-details-slide .tf-evidence-card-label { grid-column:3; grid-row:1; justify-self:end; padding:4px 7px; border:1px solid rgba(14,116,144,.16); border-radius:999px; color:#668493; background:#f4fafc; font-size:10px; font-weight:850; line-height:1; letter-spacing:.65px; white-space:nowrap; }
html .supporting-details-slide .tf-actions { grid-column:1/-1; grid-row:2; margin:0; }
html .supporting-details-slide .tf-feedback { grid-column:1/-1; grid-row:3; min-height:14px; margin:0; font-size:11px; }
html .supporting-details-slide .evidence-button { position:static; grid-column:1/-1; grid-row:4; align-self:auto; justify-self:start; min-width:154px; margin:0; padding:6px 10px; }
html .supporting-details-slide .tf-card.is-collected .evidence-button { display:none; }
html .supporting-details-slide .tf-evidence { display:none; position:static; grid-column:1/-1; grid-row:5; width:100%; max-height:none; margin:1px 0 0; padding:9px 11px; overflow:visible; border:1px solid rgba(14,165,233,.24); border-left:3px solid #22b8cf; border-radius:8px; color:#294a5e; background:#effbfe; box-shadow:none; text-align:left; white-space:normal; }
html .supporting-details-slide .tf-evidence.is-visible,html .supporting-details-slide .tf-card.is-collected .tf-evidence { display:grid; grid-template-columns:1fr; gap:5px; }
html .supporting-details-slide .tf-evidence::before,html .supporting-details-slide .tf-evidence::after { content:none; }
html .supporting-details-slide .tf-evidence-heading { display:block; color:#087f8c; font-size:15px; font-weight:900; line-height:1.15; letter-spacing:.5px; }
html .supporting-details-slide .tf-evidence-copy { display:grid; grid-template-columns:64px minmax(0,1fr); gap:7px; color:#385568; font-size:15px; line-height:1.38; white-space:normal; overflow-wrap:break-word; }
html .supporting-details-slide .tf-evidence-copy .evidence-source { margin:0; color:#087f8c; font-size:15px; font-weight:900; white-space:nowrap; }
html .supporting-details-slide .tf-evidence-collected { display:block; color:#0f8f83; font-size:15px; font-style:normal; font-weight:900; line-height:1.2; }
html .supporting-details-slide .page10-evidence-system { grid-template-columns:minmax(220px,19%) minmax(0,81%); gap:18px; height:calc(100% - 12px); margin-top:12px; padding:8px 14px; }
html .supporting-details-slide .evidence-collection-progress { grid-template-columns:1fr auto; align-self:stretch; align-content:center; padding-right:12px; border-right:1px solid rgba(14,116,144,.14); }
html .supporting-details-slide .evidence-collection-progress strong { max-width:145px; font-size:13px; line-height:1.15; }
html .supporting-details-slide .evidence-collection-progress > span { font-size:19px; }
html .supporting-details-slide .evidence-path { position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; min-width:0; isolation:isolate; }
html .supporting-details-slide .evidence-path::before { content:""; position:absolute; z-index:1; left:5%; right:5%; top:50%; height:2px; background:#cfe0e7; transform:translateY(-50%); }
html .supporting-details-slide .evidence-path > i { display:none; }
html .supporting-details-slide .evidence-path-node { position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; min-width:0; padding:9px 12px; background:#f8fbfc; }
html .supporting-details-slide .evidence-path-node b { font-size:15px; line-height:1; }
html .supporting-details-slide .evidence-path-node small { overflow:visible; font-size:15px; font-weight:850; line-height:1.05; text-overflow:clip; white-space:normal; overflow-wrap:break-word; }

/* =========================================================
   PAGE 10 · EVIDENCE CARD FLOW LAYOUT FIX
   Keeps expanded evidence in normal document flow.
========================================================= */
.reveal .slides section.supporting-details-slide {
    grid-template-rows:60px 68px 34px minmax(400px,1fr) 90px 164px;
    gap:7px;
}

.supporting-details-slide .tf-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:none;
    grid-auto-rows:auto;
    align-content:center;
    align-items:start;
    gap:8px 13px;
    min-height:0;
    overflow:visible;
}

.supporting-details-slide .tf-card {
    position:relative;
    display:grid;
    grid-template-columns:34px minmax(0,1fr) auto;
    grid-template-rows:auto auto auto auto auto;
    align-items:start;
    align-content:start;
    gap:5px 10px;
    width:100%;
    height:auto;
    min-height:0;
    max-height:none;
    box-sizing:border-box;
    padding:11px 13px;
    overflow:visible;
}

.supporting-details-slide .tf-card::after { content:none; }
.supporting-details-slide .tf-number {
    position:static;
    grid-column:1;
    grid-row:1;
    padding-top:2px;
    font-size:15px;
}
.supporting-details-slide .tf-statement {
    grid-column:2;
    grid-row:1;
    min-height:0;
    padding:0;
    font-size:15px;
    line-height:1.32;
}
.supporting-details-slide .tf-evidence-card-label {
    grid-column:3;
    grid-row:1;
    justify-self:end;
    padding:4px 7px;
    border:1px solid rgba(14,116,144,.16);
    border-radius:999px;
    color:#668493;
    background:#f4fafc;
    font-size:10px;
    font-weight:850;
    line-height:1;
    letter-spacing:.65px;
    white-space:nowrap;
}
.supporting-details-slide .tf-actions {
    grid-column:1/-1;
    grid-row:2;
    margin:0;
}
.supporting-details-slide .tf-feedback {
    grid-column:1/-1;
    grid-row:3;
    min-height:14px;
    margin:0;
    font-size:11px;
}
.supporting-details-slide .evidence-button {
    position:static;
    grid-column:1/-1;
    grid-row:4;
    align-self:auto;
    justify-self:start;
    min-width:154px;
    margin:0;
    padding:6px 10px;
}
.supporting-details-slide .tf-card.is-collected .evidence-button { display:none; }

.supporting-details-slide .tf-evidence,
.supporting-details-slide .tf-evidence.is-visible,
.supporting-details-slide .tf-card.is-collected .tf-evidence {
    position:static;
    grid-column:1/-1;
    grid-row:5;
    width:100%;
    max-height:none;
    box-sizing:border-box;
    margin:1px 0 0;
    padding:9px 11px;
    overflow:visible;
    border:1px solid rgba(14,165,233,.24);
    border-left:3px solid #22b8cf;
    border-radius:8px;
    color:#294a5e;
    background:#effbfe;
    box-shadow:none;
    white-space:normal;
}
.supporting-details-slide .tf-evidence { display:none; }
.supporting-details-slide .tf-evidence.is-visible,
.supporting-details-slide .tf-card.is-collected .tf-evidence {
    display:grid;
    grid-template-columns:1fr;
    gap:5px;
}
.supporting-details-slide .tf-evidence::before,
.supporting-details-slide .tf-evidence::after { content:none; }
.supporting-details-slide .tf-evidence-heading {
    display:block;
    color:#087f8c;
    font-size:15px;
    font-weight:900;
    line-height:1.15;
    letter-spacing:.5px;
}
.supporting-details-slide .tf-evidence-copy {
    display:grid;
    grid-template-columns:64px minmax(0,1fr);
    gap:7px;
    color:#385568;
    font-size:15px;
    line-height:1.38;
    white-space:normal;
    overflow-wrap:break-word;
}
.supporting-details-slide .tf-evidence-copy .evidence-source {
    margin:0;
    color:#087f8c;
    font-size:15px;
    font-weight:900;
    white-space:nowrap;
}
.supporting-details-slide .tf-evidence-collected {
    display:block;
    color:#0f8f83;
    font-size:15px;
    font-style:normal;
    font-weight:900;
    line-height:1.2;
}

.supporting-details-slide .page10-evidence-system {
    grid-template-columns:minmax(220px,19%) minmax(0,81%);
    gap:18px;
    height:calc(100% - 12px);
    box-sizing:border-box;
    margin-top:12px;
    padding:8px 14px;
}
.supporting-details-slide .evidence-collection-progress {
    grid-template-columns:1fr auto;
    align-self:stretch;
    align-content:center;
    padding-right:12px;
    border-right:1px solid rgba(14,116,144,.14);
}
.supporting-details-slide .evidence-collection-progress strong {
    max-width:145px;
    font-size:13px;
    line-height:1.15;
}
.supporting-details-slide .evidence-collection-progress > span { font-size:19px; }
.supporting-details-slide .evidence-path {
    position:relative;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    min-width:0;
    isolation:isolate;
}
.supporting-details-slide .evidence-path::before {
    content:"";
    position:absolute;
    z-index:1;
    left:5%;
    right:5%;
    top:50%;
    height:2px;
    background:#cfe0e7;
    transform:translateY(-50%);
}
.supporting-details-slide .evidence-path > i { display:none; }
.supporting-details-slide .evidence-path-node {
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:2px;
    min-width:0;
    padding:9px 12px;
    box-sizing:border-box;
    background:#f8fbfc;
}
.supporting-details-slide .evidence-path-node b {
    font-size:15px;
    line-height:1;
}
.supporting-details-slide .evidence-path-node small {
    overflow:visible;
    font-size:15px;
    font-weight:850;
    line-height:1.05;
    text-overflow:clip;
    white-space:normal;
    overflow-wrap:break-word;
}

/* =========================================================
   PAGE 10 · STAGE 04 EVIDENCE AVENUE
========================================================= */

.reveal .slides section.supporting-details-slide {
    position:relative;
    display:grid!important;
    grid-template-rows:66px 76px 40px minmax(316px,1fr) 72px 164px;
    gap:7px;
    width:100%;
    height:100%;
    box-sizing:border-box;
    padding:16px 64px 14px;
    overflow:hidden;
    color:#102a43;
    background:radial-gradient(circle at 88% 10%,rgba(34,211,238,.12),transparent 27%),radial-gradient(circle at 7% 88%,rgba(20,184,166,.08),transparent 25%),#f7fbfe;
}

.supporting-details-slide .page10-mission-header { display:grid; grid-template-columns:minmax(0,1fr) auto 210px; align-items:center; gap:18px; min-height:0; padding:0 0 9px; border-bottom:1px solid rgba(14,116,144,.2); }
.supporting-details-slide .mission-identity { display:flex; align-items:center; gap:12px; min-width:0; }
.supporting-details-slide .mission-identity span,.supporting-details-slide .mission-identity b { padding:7px 12px; border:1px solid rgba(8,145,178,.28); border-radius:8px; color:#0e5f78; background:rgba(236,254,255,.72); font-size:17px; line-height:1; letter-spacing:.25px; }
.supporting-details-slide .mission-identity b { font-size:15px; }
.supporting-details-slide .mission-identity small { color:#0f766e; font-size:14px; font-weight:750; }
.supporting-details-slide .teaching-lens-trigger { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:116px; padding:6px 10px; border:1px solid rgba(8,145,178,.22); border-radius:9px; color:#0e7490; background:rgba(255,255,255,.68); font:700 13px/1.15 inherit; cursor:pointer; }
.supporting-details-slide .teaching-lens-trigger small { margin-top:2px; font-size:11px; }
.supporting-details-slide .teaching-lens-trigger:hover { border-color:#22d3ee; box-shadow:0 0 15px rgba(34,211,238,.18); }
.supporting-details-slide .page10-mission-score { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:190px; height:58px; box-sizing:border-box; padding:0 12px; border:1px solid rgba(14,116,144,.3); border-radius:10px; background:rgba(255,255,255,.8); text-align:center; }
.supporting-details-slide .page10-mission-score .page10-score-value { display:flex; align-items:center; justify-content:center; gap:8px; margin:0 0 3px; color:#0b4f6c; font-size:24px; font-weight:700; line-height:1; white-space:nowrap; }
.supporting-details-slide .page10-mission-score .page10-score-value b { font:inherit; }
.supporting-details-slide .page10-mission-score .page10-score-label { margin:0 0 2px; color:#527083; font-size:13px; font-weight:700; line-height:1; letter-spacing:1px; white-space:nowrap; }
.supporting-details-slide .page10-mission-score .page10-score-label-zh { margin:0; color:#527083; font-size:12px; font-weight:650; line-height:1.2; white-space:nowrap; }
.supporting-details-slide .page10-mission-score em { position:absolute; right:-6px; top:0; color:#0f9f8f; font:900 17px/1 inherit; opacity:0; transform:translateY(4px); }
.supporting-details-slide .page10-mission-score em.is-visible { animation:page10ScoreGain 1.5s ease both; }
@keyframes page10ScoreGain { 0%{opacity:0;transform:translateY(5px)} 25%{opacity:1;transform:translateY(-7px)} 75%{opacity:1} 100%{opacity:0;transform:translateY(-18px)} }

.supporting-details-slide .page10-title-area { position:relative; text-align:left; }
.supporting-details-slide .page10-title-area .task-label { position:absolute; right:0; top:2px; display:flex; flex-direction:column; align-items:flex-end; color:#087f8c; font-size:13px; font-weight:850; letter-spacing:.5px; }
.supporting-details-slide .page10-title-area .task-label small { margin-top:3px; color:#64748b; font-size:10px; letter-spacing:.3px; }
.supporting-details-slide .page10-title-area .global-reading-kicker { color:#0f766e; font-size:12px; font-weight:850; letter-spacing:1.3px; }
.supporting-details-slide .page10-title-area .global-reading-title { max-width:1060px; margin:4px 0 2px; color:#123653; font-size:28px; line-height:1.06; letter-spacing:-.4px; }
.supporting-details-slide .page10-title-area .reading-range { color:#526b7c; font-size:14px; }
.supporting-details-slide .evidence-strategy { align-self:center; width:max-content; max-width:100%; margin:0 auto; padding:6px 14px; border-radius:999px; color:#3c5b6c; background:rgba(224,247,250,.75); font-size:13px; }
.supporting-details-slide .strategy-label { font-size:10px; }

.supporting-details-slide .tf-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,150px); align-content:center; align-items:stretch; gap:10px 13px; min-height:0; }
.supporting-details-slide .tf-card { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto 1fr; align-content:start; gap:4px 11px; min-height:0; height:100%; box-sizing:border-box; padding:12px 14px 10px 44px; overflow:hidden; border:1px solid rgba(14,116,144,.18); border-radius:13px; background:rgba(255,255,255,.94); box-shadow:0 7px 18px rgba(15,60,86,.06); }
.supporting-details-slide .tf-card::after { content:"EVIDENCE CARD"; position:absolute; right:12px; top:9px; color:#8aa2b1; font-size:9px; font-weight:850; letter-spacing:1px; }
.supporting-details-slide .tf-card.is-collected { border-color:rgba(20,184,166,.55); box-shadow:0 0 0 1px rgba(34,211,238,.1),0 8px 22px rgba(20,184,166,.09); }
.supporting-details-slide .tf-number { top:12px; left:13px; font-size:14px; }
.supporting-details-slide .tf-statement { grid-column:1/-1; min-height:0; padding-right:90px; color:#253f54; font-size:15px; line-height:1.24; font-weight:700; }
.supporting-details-slide .tf-actions { grid-column:1; display:flex; align-items:center; gap:7px; margin:2px 0 0; }
.supporting-details-slide .tf-actions::before { content:"A · JUDGE"; margin-right:2px; color:#71889a; font-size:10px; font-weight:850; letter-spacing:.5px; }
.supporting-details-slide .tf-button { padding:5px 12px; font-size:11px; }
.supporting-details-slide .tf-feedback { grid-column:1; min-height:14px; margin:0; color:#0f766e; font-size:10.5px; line-height:1.2; }
.supporting-details-slide .evidence-button { grid-column:2; grid-row:2/4; align-self:center; min-width:126px; margin:0; padding:7px 10px; border:1px solid rgba(2,132,199,.3); border-radius:8px; color:#02759b; background:#eefbff; font-size:10.5px; font-weight:850; }
.supporting-details-slide .evidence-button::before { content:"B · "; color:#6c8795; font-size:9px; }
.supporting-details-slide .evidence-button:disabled { color:#94a3b8; border-color:#dbe5eb; background:#f7fafc; cursor:not-allowed; }
.supporting-details-slide .tf-evidence { position:absolute; z-index:3; left:43px; right:13px; bottom:8px; display:none; box-sizing:border-box; max-height:71px; margin:0; padding:7px 10px 7px 91px; overflow:hidden; border:1px solid rgba(14,165,233,.2); border-left:3px solid #38bdf8; border-radius:7px; color:#415d6f; background:#effaff; font-size:10.5px; line-height:1.23; box-shadow:0 -3px 12px rgba(15,70,100,.05); }
.supporting-details-slide .tf-evidence::before { content:"C · COLLECT"; position:absolute; left:9px; top:8px; color:#0e7490; font-size:9px; font-weight:900; letter-spacing:.5px; }
.supporting-details-slide .tf-evidence::after { content:"✓ EVIDENCE CARD COLLECTED"; display:block; margin-top:3px; color:#0f9f8f; font-size:9px; font-weight:900; letter-spacing:.3px; }
.supporting-details-slide .tf-evidence.is-visible { display:block; }

.supporting-details-slide .page10-evidence-system { display:grid; grid-template-columns:250px minmax(0,1fr); align-items:center; gap:24px; min-height:0; padding:8px 14px; border:1px solid rgba(14,116,144,.16); border-radius:12px; background:rgba(255,255,255,.72); }
.supporting-details-slide .evidence-collection-progress { display:grid; grid-template-columns:1fr auto; align-items:center; gap:4px 10px; color:#28536a; }
.supporting-details-slide .evidence-collection-progress strong { font-size:11px; letter-spacing:.6px; }
.supporting-details-slide .evidence-collection-progress > span { color:#0e7490; font-size:18px; font-weight:900; }
.supporting-details-slide .evidence-card-dots { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.supporting-details-slide .evidence-card-dots i { height:5px; border-radius:9px; background:#d9e6ec; transition:.25s ease; }
.supporting-details-slide .evidence-card-dots i.is-active { background:#22c7c7; box-shadow:0 0 9px rgba(34,199,199,.5); }
.supporting-details-slide .evidence-path { display:grid; grid-template-columns:1fr 22px 1fr 22px 1fr 22px 1fr; align-items:center; min-width:0; }
.supporting-details-slide .evidence-path-node { display:flex; align-items:center; gap:7px; min-width:0; padding:6px 8px; border:1px solid #d9e6ec; border-radius:8px; color:#7a8f9e; background:#f8fbfc; }
.supporting-details-slide .evidence-path-node b { font-size:13px; }
.supporting-details-slide .evidence-path-node small { overflow:hidden; font-size:9px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.supporting-details-slide .evidence-path-node.is-active { color:#0b6672; border-color:#4fd1c5; background:#ecfeff; box-shadow:0 0 12px rgba(45,212,191,.14); }
.supporting-details-slide .evidence-path > i { color:#cbd5dc; font:900 15px/1 inherit; text-align:center; }
.supporting-details-slide .evidence-path > i.is-active { color:#22b8b5; }

.supporting-details-slide .page10-mission-update { display:grid; grid-template-columns:118px 1.1fr 1.25fr .9fr; align-items:center; gap:14px; min-height:0; padding:9px 14px; overflow:hidden; border:1px solid rgba(14,116,144,.18); border-radius:15px; background:linear-gradient(105deg,rgba(236,254,255,.8),rgba(255,255,255,.94)); }
.supporting-details-slide .page10-nova-core { position:relative; width:112px; height:125px; overflow:hidden; }
.supporting-details-slide .page10-nova-core .page3-nova-core { position:absolute; left:50%; top:50%; translate:-50% -50%; transform:scale(.42); transform-origin:center; }
.supporting-details-slide .page10-nova-copy strong { color:#0e7490; font-size:12px; letter-spacing:.6px; }
.supporting-details-slide .page10-nova-copy p { margin:8px 0 0; color:#526b7c; font-size:13px; line-height:1.35; }
.supporting-details-slide .page10-complete-copy { display:none; flex-direction:column; gap:4px; margin-top:7px; }
.supporting-details-slide .page10-complete-copy b { color:#0f766e; font-size:15px; }
.supporting-details-slide .page10-complete-copy span { color:#0e7490; font-size:12px; font-weight:850; }
.supporting-details-slide .page10-complete-copy em { color:#325d72; font-size:12px; font-style:normal; font-weight:800; }
.supporting-details-slide .page10-cognition-update,.supporting-details-slide .page10-next-stage { opacity:.25; transition:opacity .35s ease,transform .35s ease; transform:translateY(4px); }
.supporting-details-slide .page10-cognition-update { padding:8px 14px; border-left:1px solid rgba(14,116,144,.16); border-right:1px solid rgba(14,116,144,.16); text-align:center; }
.supporting-details-slide .page10-cognition-update small,.supporting-details-slide .page10-next-stage small { color:#0f766e; font-size:9px; font-weight:900; letter-spacing:1px; }
.supporting-details-slide .page10-cognition-update strong { display:block; margin:4px 0; color:#0b5f73; font-size:16px; line-height:1.08; }
.supporting-details-slide .page10-cognition-update p,.supporting-details-slide .page10-next-stage p { margin:2px 0 0; color:#587180; font-size:10px; line-height:1.25; }
.supporting-details-slide .page10-next-stage strong { display:block; margin-top:5px; color:#264c61; font-size:13px; }
.supporting-details-slide .page10-next-stage em { color:#0f766e; font-size:11px; font-style:normal; }
.supporting-details-slide .page10-mission-update.is-complete .page10-pending-copy { display:none; }
.supporting-details-slide .page10-mission-update.is-complete .page10-complete-copy { display:flex; }
.supporting-details-slide .page10-mission-update.is-complete .page10-cognition-update,.supporting-details-slide .page10-mission-update.is-complete .page10-next-stage { opacity:1; transform:none; }
.supporting-details-slide.is-task-complete .page10-evidence-system { border-color:rgba(20,184,166,.45); box-shadow:0 0 18px rgba(20,184,166,.09); }

.supporting-details-slide .page10-teaching-lens { top:82px; right:64px; width:430px; max-height:520px; padding:16px 19px; }
.supporting-details-slide .page10-teaching-lens .teaching-lens-body p { margin:10px 0; font-size:15px; line-height:1.55; }
.supporting-details-slide .page10-teaching-lens .teaching-lens-concept { display:block; padding:9px 10px; border-radius:8px; color:#0e7490; background:#e7fafd; font-size:16px; text-align:center; }
.supporting-details-slide .page10-teaching-lens .teaching-lens-flow { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-top:14px; }
.supporting-details-slide .page10-teaching-lens .teaching-lens-flow span { display:flex; flex-direction:column; align-items:center; padding:7px 3px; border-radius:7px; color:#174a61; background:#edf8fa; font-size:13px; font-weight:800; }
.supporting-details-slide .page10-teaching-lens .teaching-lens-flow small { margin-top:3px; color:#0e7490; font-size:8px; }

/* Page 9 final cleanup guards: override legacy viewport-compression rules. */
.reveal .slides .read-apply-slide .read-apply-layout { margin-top:0!important; }
.reveal .slides .read-apply-slide .read-apply-image { display:block; width:100%!important; max-width:100%!important; height:276px!important; margin:0!important; box-sizing:border-box; object-fit:cover; }
.reveal .slides .read-apply-slide .family-network-overlay { top:0; right:0; bottom:auto; left:0; height:276px; }
.reveal .slides .read-apply-slide .image-observation-prompt { margin-top:0!important; }
.reveal .slides .read-apply-slide .read-apply-assessment { margin-top:0!important; padding:10px 14px!important; }
.reveal .slides .read-apply-slide .self-check-item { min-height:54px!important; padding:7px 9px!important; font-size:16px!important; line-height:1.15!important; }
.reveal .slides .read-apply-slide .read-apply-feedback { min-height:0!important; margin:0!important; line-height:1.15!important; }

/* Page 9 overflow/positioning repair: keep ordinary content in local flow. */
.reveal .slides .read-apply-slide .self-check-title {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    width:100%;
    margin:0 0 7px;
}
.reveal .slides .read-apply-slide .read-apply-assessment { padding:3px 14px!important; }
.reveal .slides .read-apply-slide .self-check-title > span,
.reveal .slides .read-apply-slide .self-check-title > strong { position:static; flex:0 0 auto; margin:0; }
.reveal .slides .read-apply-slide .read-apply-feedback { display:none!important; position:static!important; }

.reveal .slides .read-apply-slide .read-apply-tools {
    position:relative;
    height:auto;
    min-height:320px;
    padding:10px 17px 12px!important;
    overflow:visible;
}
.reveal .slides .read-apply-slide .read-apply-task { position:relative; }
.reveal .slides .read-apply-slide .read-apply-hint-button { position:static; display:inline-flex; align-items:center; justify-content:center; margin-top:4px; }
.reveal .slides .read-apply-slide .read-apply-hints {
    position:static;
    z-index:auto;
    right:auto;
    bottom:auto;
    width:auto;
    max-width:none;
    box-sizing:border-box;
    margin:0;
    padding:8px 10px;
    border-left:3px solid #38bdf8;
    border-radius:9px;
    background:#f0f9ff;
    box-shadow:none;
    overflow:hidden;
}
.reveal .slides .read-apply-slide .read-apply-task:has(.read-apply-hints.is-visible) {
    display:block;
    margin-top:5px;
    padding-top:5px;
}
.reveal .slides .read-apply-slide .read-apply-hint-button { margin-top:9px; margin-bottom:0; }
.reveal .slides .read-apply-slide .read-apply-hints.is-visible {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin-top:6px;
    padding:8px 10px;
    border:1px solid rgba(8,145,178,.17);
    border-left:1px solid rgba(8,145,178,.17);
    border-radius:9px;
    background:#f0fbfd;
    opacity:1;
    transform:translateY(0);
}
.reveal .slides .read-apply-slide .read-apply-hints.is-visible::before {
    content:"HINT · BUILD YOUR RESPONSE";
    grid-column:1 / -1;
    color:#0e7490;
    font-size:16px;
    font-weight:900;
    letter-spacing:.5px;
}
.reveal .slides .read-apply-slide .read-apply-hints p { min-width:0; margin:0; font-size:15px; line-height:1.38; }
.reveal .slides .read-apply-slide .read-apply-hints p strong { display:block; margin-bottom:3px; color:#0b5368; font-size:15px; }




.reveal .slides .read-apply-slide .page9-stage-complete { gap:0; }
.reveal .slides .read-apply-slide .page9-stage-complete { height:178px; }
.reveal .slides .read-apply-slide .page9-stage-complete hr { margin:4px 0 3px; }
.reveal .slides .read-apply-slide .page9-stage-complete h3 { display:flex; flex-direction:column; gap:1px; margin:1px 0 0; }
.reveal .slides .read-apply-slide .page9-stage-complete h3 span { display:block; font-size:21px; line-height:1.05; }

/* Page 3 · Mission → Stage → Task architecture alignment. */
.communication-timeline-slide .timeline-title-area {
    position:relative;
    padding-top:25px;
}
.communication-timeline-slide .stage-badge {
    white-space:nowrap;
    font-size:18px;
}
.communication-timeline-slide .task-label {
    position:absolute;
    top:0;
    left:0;
    display:inline-flex;
    align-items:center;
    min-height:23px;
    margin:0;
    padding:0 9px;
    border-left:3px solid #1bb7c2;
    border-radius:3px;
    color:#0e7490;
    background:rgba(221,247,249,.68);
    font-size:14px;
    font-weight:900;
    letter-spacing:1px;
}
.reveal .communication-timeline-slide .task-label + .communication-title {
    margin-top:0;
}
.communication-timeline-slide .next-task-hint {
    display:grid;
    gap:2px;
    margin-top:9px;
    padding-top:7px;
    border-top:1px solid rgba(8,145,178,.18);
}
.communication-timeline-slide .next-task-hint small {
    color:#0e7490;
    font-size:11px;
    font-weight:900;
    letter-spacing:1px;
}
.communication-timeline-slide .next-task-hint span {
    color:#607887;
    font-size:14px;
    font-weight:650;
    line-height:1.15;
}

/* =========================================================
   PAGE 5 ONLY · STAGE 02 / PREDICTION & POLL
========================================================= */
.first-take-slide {
    display:grid;
    grid-template-rows:72px 92px 300px 270px;
    gap:10px;
    box-sizing:border-box;
    width:100%;
    height:100%;
    padding:20px 64px 18px;
    overflow:hidden;
    color:#0b1f3a;
    background:
        radial-gradient(circle at 88% 12%,rgba(82,126,220,.09),transparent 24%),
        radial-gradient(circle at 10% 88%,rgba(20,184,166,.09),transparent 25%),
        linear-gradient(rgba(30,142,169,.028) 1px,transparent 1px),
        linear-gradient(90deg,rgba(30,142,169,.028) 1px,transparent 1px),
        linear-gradient(145deg,#fff 0%,#f5fbff 66%,#eef8fc 100%);
    background-size:auto,auto,32px 32px,32px 32px,auto;
}
.first-take-slide > * { min-width:0; }
.first-take-slide .first-take-mission-header { height:72px; min-height:0; padding:0 0 12px; }
.first-take-slide .mission-badge { min-height:40px; padding:0 19px; font-size:21px; }
.first-take-slide .stage-badge { min-height:40px; padding:0 18px; font-size:18px; white-space:nowrap; }
.first-take-slide .mission-score { min-width:184px; padding:8px 16px; }
.first-take-slide .mission-score > span { font-size:27px; }
.first-take-slide .mission-score small { font-size:14px; }

.first-take-title-area { position:relative; display:grid; align-content:end; padding-top:23px; }
.first-take-slide .task-label { position:absolute; top:0; left:0; display:inline-flex; align-items:center; min-height:22px; padding:0 9px; border-left:3px solid #1bb7c2; border-radius:3px; color:#0e7490; background:rgba(221,247,249,.72); font-size:14px; font-weight:900; letter-spacing:1px; }
.reveal .first-take-slide .first-take-title { margin:0; color:#071f3d; font-size:43px; line-height:1; letter-spacing:-.7px; }
.reveal .first-take-slide .first-take-title span { color:#0e7490; }
.first-take-slide .first-take-subtitle { margin:7px 0 0; color:#607887; font-size:21px; font-weight:650; }

.prediction-poll-zone { display:grid; grid-template-columns:1.08fr .92fr; gap:20px; min-height:0; }
.prediction-step,.class-poll-step { min-width:0; padding:19px 21px; box-sizing:border-box; border:1px solid rgba(8,145,178,.20); border-radius:17px; background:rgba(255,255,255,.88); box-shadow:0 10px 25px rgba(15,76,105,.07); }
.poll-step-heading { display:grid; gap:3px; }
.poll-step-heading small { color:#0e7490; font-size:14px; font-weight:900; letter-spacing:1px; }
.poll-step-heading strong { color:#0b2946; font-size:22px; letter-spacing:.5px; }
.poll-step-heading span { color:#607887; font-size:17px; }
.first-take-slide .choice-buttons { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:17px; }
.first-take-slide .take-choice-button { display:grid; place-items:center; gap:4px; min-width:0; min-height:94px; padding:12px; border:2px solid transparent; border-radius:14px; font-family:inherit; cursor:pointer; box-shadow:0 7px 17px rgba(15,76,105,.06); transition:transform .18s,border-color .18s,box-shadow .18s,background .18s; }
.first-take-slide .take-choice-button > span { font-size:28px; font-weight:900; }
.first-take-slide .take-choice-button > small { font-size:15px; font-weight:650; }
.first-take-slide .benefits-choice { color:#0f766e; background:#ecfdf9; }
.first-take-slide .problems-choice { color:#ad5b16; background:#fff7ed; }
.first-take-slide .unsure-choice { color:#5446a8; background:#f4f1ff; }
.first-take-slide .take-choice-button:hover { transform:translateY(-2px); }
.first-take-slide .take-choice-button.is-selected { border-color:currentColor; color:inherit; box-shadow:0 0 0 3px rgba(8,145,178,.08),0 9px 22px rgba(15,76,105,.12); }
.position-selected { margin-top:13px; color:#718390; font-size:17px; font-weight:700; text-align:center; }
.position-selected.is-recorded { color:#0e7490; font-weight:900; }

.class-poll-step { display:grid; grid-template-rows:auto 1fr auto auto; }
.poll-results { display:grid; gap:7px; margin-top:10px; opacity:.26; filter:grayscale(.8); transition:opacity .25s,filter .25s; }
.poll-results.is-visible { opacity:1; filter:none; }
.poll-results > div { display:grid; grid-template-columns:88px 55px minmax(0,1fr) 70px; align-items:center; gap:8px; }
.poll-results span { color:#34596c; font-size:15px; font-weight:850; }
.poll-results b { color:#0b2946; font-size:27px; }
.poll-results i { position:relative; height:8px; overflow:hidden; border-radius:999px; background:#e3edf2; }
.poll-results i em { display:block; width:var(--poll-percent,0%); height:100%; border-radius:inherit; background:linear-gradient(90deg,#16a6b7,#52b7cf); transition:width .4s ease; }
.poll-results small { color:#718390; font-size:12px; }
.poll-results small strong { font-size:13px; }
.poll-actions { display:flex; align-items:center; gap:10px; margin-top:8px; }
.reveal-poll-button { padding:9px 16px; border:0; border-radius:999px; color:#fff; background:linear-gradient(100deg,#0f766e,#0891b2); font-family:inherit; font-size:17px; font-weight:850; cursor:pointer; }
.reveal-poll-button:disabled { cursor:not-allowed; opacity:.4; filter:saturate(.4); }
.first-take-slide .reset-vote-button { display:inline-flex; margin:0; padding:8px 13px; font-size:14px; }
.poll-recorded { display:grid; gap:2px; margin-top:7px; opacity:0; transform:translateY(4px); transition:.25s ease; }
.poll-recorded.is-visible { opacity:1; transform:none; }
.poll-recorded strong { color:#0e7490; font-size:15px; }
.poll-recorded span { color:#0b2946; font-size:17px; font-weight:750; }

.first-take-learning-zone { display:grid; grid-template-columns:200px minmax(0,1fr) 440px; gap:14px; min-height:0; }
.first-take-nova-core,.hypothesis-network,.stage-two-update { min-width:0; height:270px; box-sizing:border-box; overflow:hidden; border:1px solid rgba(8,145,178,.20); border-radius:17px; background:rgba(255,255,255,.87); box-shadow:0 10px 25px rgba(15,76,105,.07); }
.first-take-nova-core { position:relative; }
.first-take-nova-core .page3-nova-core { position:absolute; left:50%; top:50%; translate:-50% -50%; transform:scale(.64); transform-origin:center; }

.hypothesis-network { display:grid; grid-template-columns:minmax(0,1fr) 180px; grid-template-rows:auto 1fr; gap:10px 14px; padding:18px 20px; }
.nova-prediction-copy strong { color:#0e7490; font-size:18px; letter-spacing:.5px; }
.nova-prediction-copy p { margin:8px 0 0; color:#405f70; font-size:19px; font-weight:650; line-height:1.32; }
.current-hypothesis { display:grid; align-content:start; justify-items:end; text-align:right; }
.current-hypothesis small { color:#607887; font-size:13px; font-weight:850; }
.current-hypothesis strong { margin-top:5px; color:#0b2946; font-size:24px; }
.current-hypothesis span { margin-top:4px; color:#0e7490; font-size:14px; }
.branching-network { grid-column:1/-1; display:flex; align-items:center; justify-content:center; gap:10px; padding:13px; border-radius:14px; background:#eefafb; }
.branching-network > span { color:#0b5368; font-size:19px; font-weight:900; }
.branching-network > i { color:#15a7b3; font-size:24px; font-style:normal; }
.network-branches { display:grid; gap:14px; }
.network-branches b { padding:7px 13px; border:1px solid rgba(8,145,178,.22); border-radius:999px; color:#78909c; background:#fff; font-size:17px; transition:.3s ease; }
.hypothesis-network[data-position="benefit"] .benefit-route,
.hypothesis-network[data-position="both"] .benefit-route { color:#0f766e; border-color:#1bbca8; background:#e7fbf6; box-shadow:0 0 14px rgba(27,188,168,.22); }
.hypothesis-network[data-position="problem"] .problem-route,
.hypothesis-network[data-position="both"] .problem-route { color:#ad5b16; border-color:#e8a15f; background:#fff4e8; box-shadow:0 0 14px rgba(232,161,95,.22); }

.stage-two-update { padding:17px 22px 16px; }
.stage-two-idle { display:grid; align-content:center; height:100%; }
.stage-two-idle strong { color:#0e7490; font-size:20px; }
.stage-two-idle p { margin:13px 0 0; color:#405f70; font-size:20px; font-weight:650; line-height:1.35; }
.stage-two-complete { display:none; align-content:center; height:100%; }
.stage-two-update.is-complete .stage-two-idle { display:none; }
.stage-two-update.is-complete .stage-two-complete { display:grid; }
.stage-task-complete,.stage-cleared,.stage-unlocked,.stage-next-question { display:grid; }
.stage-task-complete { grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:12px; }
.stage-task-complete strong { color:#0f766e; font-size:19px; }
.stage-task-complete em { color:#0f9f8d; font-size:17px; font-style:normal; font-weight:900; white-space:nowrap; }
.stage-cleared { margin-top:6px; }
.stage-cleared b { color:#0b2946; font-size:19px; }
.stage-cleared span { margin-top:2px; color:#607887; font-size:14px; font-weight:800; line-height:1.22; }
.stage-unlocked { margin-top:6px; }
.stage-unlocked small,.stage-next-question small { color:#0e7490; font-size:13px; font-weight:900; letter-spacing:.55px; }
.reveal .stage-unlocked h3 { margin:2px 0 0; color:#0b2946; font-size:21px; line-height:1.15; }
.stage-next-question { margin-top:5px; }
.stage-next-question p { margin:2px 0 0; color:#0e7490; font-size:18px; font-weight:850; line-height:1.2; }
.stage-two-complete footer { margin-top:6px; padding-top:5px; border-top:1px solid rgba(8,145,178,.18); color:#0b2946; font-size:16px; font-weight:800; line-height:1.25; }

.first-take-slide .teaching-lens-panel { top:86px; right:64px; width:420px; max-height:450px; padding:14px 18px 13px; }
.first-take-slide .teaching-lens-header { padding-bottom:7px; }
.first-take-slide .teaching-lens-close { width:32px; height:32px; font-size:22px; }
.first-take-slide .teaching-lens-tags { gap:6px; margin:8px 0; }
.first-take-slide .teaching-lens-tags span { padding:5px 9px; font-size:14px; }
.first-take-slide .teaching-lens-body { font-size:16px; line-height:1.5; }
.first-take-slide .teaching-lens-body p { margin:0 0 8px; }
.first-take-slide .teaching-lens-concept { display:block; margin:2px 0 8px; padding:7px 10px; border-radius:9px; color:#0e7490; background:#e8f9fb; font-size:20px; text-align:center; }
.first-take-slide .page5-lens-flow { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin-top:8px; padding:9px 0 0; border-bottom:0; }
.first-take-slide .page5-lens-step { position:relative; display:grid; align-content:center; min-width:0; min-height:44px; gap:1px; padding:4px; box-sizing:border-box; border:1px solid rgba(8,145,178,.16); border-radius:9px; background:rgba(232,248,250,.68); text-align:center; }
.first-take-slide .page5-lens-step:nth-child(1) { grid-column:1 / 3; }
.first-take-slide .page5-lens-step:nth-child(2) { grid-column:3 / 5; }
.first-take-slide .page5-lens-step:nth-child(3) { grid-column:5 / 7; }
.first-take-slide .page5-lens-step:nth-child(4) { grid-column:2 / 4; }
.first-take-slide .page5-lens-step:nth-child(5) { grid-column:4 / 6; }
.first-take-slide .page5-lens-step:nth-child(1)::after,
.first-take-slide .page5-lens-step:nth-child(2)::after,
.first-take-slide .page5-lens-step:nth-child(4)::after { content:"→"; position:absolute; z-index:1; right:-10px; top:50%; translate:0 -50%; color:#16a6b7; font-size:15px; font-weight:900; }
.first-take-slide .page5-lens-step:nth-child(3)::after { content:"↙"; position:absolute; left:50%; bottom:-15px; translate:-50% 0; color:#16a6b7; font-size:15px; font-weight:900; }
.first-take-slide .page5-lens-step span { color:#173b5b; font-size:15px; font-weight:850; line-height:1.1; white-space:normal; overflow-wrap:anywhere; }
.first-take-slide .page5-lens-step small { color:#0e7490; font-size:14px; font-weight:850; line-height:1.05; white-space:normal; overflow-wrap:anywhere; }

@media (prefers-reduced-motion:reduce) {
    .first-take-slide .nova-ball,
    .first-take-slide .nova-orbit,
    .first-take-slide .nova-scan-ring,
    .poll-results i em { animation:none!important; transition:none!important; }
}

/* =========================================================
   PAGE 4 ONLY · MISSION 01 / STAGE 01 / TASK 02
========================================================= */
.watch-notice-slide {
    display:grid;
    grid-template-rows:72px 82px 360px 46px minmax(178px,1fr);
    gap:8px;
    padding:20px 64px 18px;
    overflow:hidden;
    background:
        radial-gradient(circle at 89% 10%,rgba(39,196,218,.12),transparent 25%),
        linear-gradient(rgba(30,142,169,.028) 1px,transparent 1px),
        linear-gradient(90deg,rgba(30,142,169,.028) 1px,transparent 1px),
        linear-gradient(145deg,#fff 0%,#f5fbff 65%,#edf8fc 100%);
    background-size:auto,32px 32px,32px 32px,auto;
}
.watch-notice-slide > * { min-width:0; }
.watch-notice-slide .watch-mission-header { height:72px; min-height:0; padding:0 0 12px; }
.watch-notice-slide .mission-badge { min-height:40px; padding:0 19px; font-size:21px; }
.watch-notice-slide .stage-badge { min-height:40px; padding:0 18px; font-size:18px; white-space:nowrap; }
.watch-notice-slide .mission-score { min-width:184px; padding:8px 16px; }
.watch-notice-slide .mission-score > span { font-size:27px; }
.watch-notice-slide .mission-score small { font-size:14px; }

.watch-title-area { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(440px,.8fr); align-items:end; gap:28px; padding-top:24px; }
.watch-notice-slide .task-label { position:absolute; top:0; left:0; display:inline-flex; align-items:center; min-height:22px; padding:0 9px; border-left:3px solid #1bb7c2; border-radius:3px; color:#0e7490; background:rgba(221,247,249,.72); font-size:14px; font-weight:900; letter-spacing:1px; }
.reveal .watch-notice-slide .watch-title { margin:0; color:#071f3d; font-size:41px; line-height:1; letter-spacing:-.7px; }
.watch-core-question { margin:4px 0 0; color:#0e7490; font-size:22px; font-weight:750; line-height:1.12; }
.watch-instruction-copy { align-self:center; display:grid; gap:4px; padding:9px 14px; border-left:3px solid #18aab7; color:#33566c; background:rgba(255,255,255,.70); }
.watch-instruction-copy strong { font-size:18px; }
.watch-instruction-copy span { color:#657c8c; font-size:16px; }

.watch-notice-slide .watch-layout { display:grid; grid-template-columns:minmax(0,1.42fr) minmax(500px,1fr); align-items:stretch; gap:22px; height:360px; }
.watch-notice-slide .video-panel { display:grid; grid-template-rows:318px 36px; min-height:0; }
.watch-notice-slide .video-frame { height:318px; aspect-ratio:auto; border-radius:16px; }
.watch-notice-slide .video-controls { height:36px; margin:6px 0 0; }
.watch-notice-slide .video-control-button { padding:6px 14px; font-size:15px; }
.watch-notice-slide .watch-task-panel { min-height:0; height:360px; padding:17px 20px; border-color:rgba(8,145,178,.22); border-radius:16px; background:rgba(255,255,255,.88); }
.watch-notice-slide .watch-stage-label { margin-bottom:5px; font-size:14px; }
.reveal .watch-notice-slide .watch-stage h3 { margin:0 0 8px; font-size:27px; }
.watch-notice-slide .watch-prompt { margin:0; font-size:21px; line-height:1.35; }
.watch-notice-slide .watch-tip { margin-top:15px; padding:11px 14px; font-size:17px; }
.watch-notice-slide .watch-next-button { margin-top:14px; padding:8px 16px; font-size:16px; }
.watch-notice-slide .watch-next-button:disabled { cursor:not-allowed; opacity:.42; filter:saturate(.45); }
.watch-notice-slide .listening-card { margin-bottom:8px; padding:10px 12px 10px 42px; border-color:rgba(8,145,178,.20); border-radius:10px; background:linear-gradient(110deg,#fff,#f1fbfd); }
.watch-notice-slide .listening-number { top:11px; left:13px; font-size:15px; }
.reveal .watch-notice-slide .listening-card p { margin:0; font-size:19px; line-height:1.32; }
.watch-notice-slide .answer-field { position:relative; display:inline-flex; align-items:center; min-width:76px; margin:0 4px; vertical-align:middle; }
.watch-notice-slide .answer-field.wide { min-width:116px; }
.watch-notice-slide .answer-blank { box-sizing:border-box; width:100%; min-width:0; height:30px; margin:0; padding:1px 24px 2px 6px; border:1px solid rgba(8,145,178,.28); border-bottom:3px solid #14b8a6; border-radius:6px 6px 2px 2px; outline:0; color:#0b5368; background:#fff; font-family:inherit; font-size:19px; font-weight:800; line-height:1.1; text-align:center; transition:border-color .2s,background .2s,box-shadow .2s; }
.watch-notice-slide .answer-blank:focus { border-color:#0891b2; box-shadow:0 0 0 3px rgba(8,145,178,.12); }
.watch-notice-slide .answer-blank.is-correct { border-color:#0f9f8d; color:#0f766e; background:#ecfdf5; box-shadow:inset 0 -2px rgba(15,159,141,.16); }
.watch-notice-slide .answer-blank.is-incorrect { border-color:#e47b4f; color:#9a492e; background:#fff7ed; box-shadow:0 0 0 2px rgba(228,123,79,.10); }
.watch-notice-slide .answer-field small { position:absolute; left:0; right:0; bottom:-12px; color:#c35f38; font-size:11px; font-weight:850; line-height:1; text-align:center; white-space:nowrap; }
.watch-notice-slide .answer-blank.is-correct + small { top:6px; right:6px; bottom:auto; left:auto; color:#0f9f8d; font-size:15px; }
.watch-task-actions { display:flex; align-items:center; gap:10px; margin-top:2px; }
.watch-notice-slide .watch-task-actions .watch-next-button { margin-top:0; font-size:17px; }
.watch-notice-slide .check-answers-button { background:linear-gradient(100deg,#0f766e,#0891b2); }

.watch-activity-control { display:flex; align-items:center; gap:14px; min-height:46px; padding:6px 14px; box-sizing:border-box; border:1px solid rgba(8,145,178,.18); border-radius:12px; background:rgba(255,255,255,.78); }
.watch-activity-control .activity-progress-label { color:#0f536a; font-size:17px; font-weight:900; letter-spacing:.8px; }
.watch-activity-control .activity-progress-dots { display:flex; gap:7px; }
.watch-activity-control .activity-progress-dots i,
.watch-notice-slide .nova-analysis-progress i { width:12px; height:12px; border:2px solid rgba(8,145,178,.32); border-radius:50%; background:#fff; transition:.24s ease; }
.watch-activity-control .activity-progress-dots i.is-complete,
.watch-notice-slide .nova-analysis-progress i.is-complete { border-color:#0e9fab; background:#22c8cf; box-shadow:0 0 8px rgba(34,200,207,.45); }
.watch-activity-control .activity-score { min-width:60px; color:#0b2946; font-size:21px; }
.watch-process { margin-left:auto; color:#6a7f8e; font-size:14px; font-weight:800; letter-spacing:.45px; }
.watch-process b { margin:0 4px; color:#10a4b2; }

.watch-nova-zone { display:grid; grid-template-columns:200px minmax(0,1fr); gap:14px; min-height:0; height:178px; overflow:hidden; }
.watch-notice-slide .watch-nova-core { min-height:178px; border-radius:16px; }
.watch-notice-slide .watch-nova-core .page3-nova-core { position:absolute; left:50%; top:50%; translate:-50% -50%; flex:0 0 314px; transform:scale(.58); transform-origin:center; }

.watch-mission-update { position:relative; min-width:0; height:178px; padding:15px 20px; box-sizing:border-box; overflow:hidden; border:1px solid rgba(8,145,178,.22); border-radius:16px; background:rgba(255,255,255,.88); box-shadow:0 9px 22px rgba(15,76,105,.07); }
.watch-update-idle { display:flex; flex-direction:column; justify-content:center; height:100%; }
.watch-update-idle strong { color:#0e7490; font-size:17px; letter-spacing:.8px; }
.watch-update-idle b { margin-top:5px; color:#0b2946; font-size:20px; }
.watch-update-idle p { margin:8px 0 10px; color:#526b7a; font-size:19px; }
.watch-notice-slide .nova-analysis-progress { display:flex; gap:9px; }
.watch-update-complete { display:none; grid-template-columns:.65fr .92fr .92fr .72fr 1.7fr; grid-template-areas:"head evidence network stage transition"; gap:0 14px; align-items:center; }
.watch-mission-update.is-task-complete .watch-update-idle { display:none; }
.watch-mission-update.is-task-complete .watch-update-complete { display:flex; align-items:center; }
.watch-mission-update.is-task-complete:not(.is-interpreted) .watch-update-complete > :not(.watch-complete-heading) { display:none; }
.watch-mission-update.is-interpreted .watch-update-complete { display:grid; }
.watch-complete-heading { grid-area:head; display:grid; gap:6px; align-content:center; }
.watch-complete-heading strong { color:#0b2946; font-size:18px; }
.watch-complete-heading em { color:#0f9f8d; font-size:15px; font-style:normal; font-weight:900; }
.watch-evidence { grid-area:evidence; }
.watch-evidence small,.watch-network-update small { color:#0e7490; font-size:11px; font-weight:900; letter-spacing:.8px; }
.watch-evidence p { margin:4px 0 0; color:#34596c; font-size:17px; line-height:1.28; }
.watch-network-update { grid-area:network; padding:7px 10px; border-radius:9px; background:#eafafb; }
.watch-network-update strong { display:block; margin-top:4px; color:#0b5368; font-size:16px; line-height:1.28; }
.watch-network-update i { color:#12a9b4; font-style:normal; }
.watch-stage-unlock { grid-area:stage; display:flex; flex-direction:column; justify-content:center; min-width:0; padding-left:13px; border-left:1px solid rgba(8,145,178,.20); }
.watch-stage-unlock strong { color:#0f766e; font-size:17px; }
.watch-stage-unlock span { margin-top:3px; color:#607887; font-size:12px; font-weight:800; }
.watch-stage-unlock b { margin-top:8px; color:#0b2946; font-size:16px; line-height:1.25; }
.watch-transition { grid-area:transition; align-self:center; min-width:0; padding-left:12px; border-left:1px solid rgba(8,145,178,.16); }
.watch-transition p { margin:0 0 8px; color:#0b2946; font-size:18px; font-weight:800; line-height:1.28; }
.watch-transition small { display:block; margin:0 0 5px; color:#0e7490; font-size:17px; font-weight:900; letter-spacing:.6px; }
.watch-transition strong { display:block; color:#0b2946; font-size:19px; font-weight:900; line-height:1.34; }
.watch-transition span { display:block; margin-top:6px; color:#607887; font-size:17px; font-weight:750; line-height:1.2; }
.watch-notice-slide .watch-reflection { display:none!important; }

@media (prefers-reduced-motion: reduce) {
    .watch-notice-slide .nova-ball,
    .watch-notice-slide .nova-orbit,
    .watch-notice-slide .nova-scan-ring { animation:none!important; }
}

/* =========================================================
   PAGE 2 FINAL CONCEPT MATCH · 1600 × 900
   Fully scoped to the Digital City slide.
========================================================= */
.reveal .slides .digital-city-slide .dc-shell {
    padding:14px 16px 14px;
    grid-template-rows:108px minmax(0,1fr);
}
.reveal .slides .digital-city-slide .dc-topbar {
    position:relative;
    display:grid;
    grid-template-columns:430px 470px 245px minmax(290px,1fr);
    align-items:center;
    gap:12px;
    min-height:108px;
    padding:0 0 10px;
    border-bottom:1px solid rgba(60,217,255,.40);
}
.reveal .slides .digital-city-slide .dc-topbar::before { display:none; }
.reveal .slides .digital-city-slide .dc-mission {
    position:relative;
    display:grid;
    justify-content:start;
    align-content:center;
    gap:5px;
    height:86px;
    padding:0 28px;
    border:1px solid rgba(57,229,255,.55);
    border-radius:4px 18px 18px 4px;
    background:linear-gradient(105deg,rgba(7,80,117,.38),rgba(3,18,43,.72));
    box-shadow:0 0 20px rgba(26,213,255,.22),inset 0 0 25px rgba(26,213,255,.08);
    clip-path:polygon(0 14px,14px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,14px 100%,0 calc(100% - 14px));
}
.reveal .slides .digital-city-slide .dc-mission > div { display:flex; align-items:baseline; gap:18px; }
.reveal .slides .digital-city-slide .dc-mission span { padding:0; border:0; border-radius:0; color:#9ef8ff; font-size:34px; font-weight:900; }
.reveal .slides .digital-city-slide .dc-mission strong { color:#fff; font-size:34px; line-height:1; }
.reveal .slides .digital-city-slide .dc-mission small { color:#30ebf5; font-size:21px; font-weight:800; }
.reveal .slides .digital-city-slide .dc-brand { justify-content:center; gap:15px; }
.reveal .slides .digital-city-slide .dc-brand > i { display:none; }
.reveal .slides .digital-city-slide .dc-brand > svg { width:62px; height:50px; fill:none; stroke:#bfefff; stroke-width:1.5; }
.reveal .slides .digital-city-slide .dc-kicker { color:#fff; font-size:38px; line-height:1; text-shadow:0 0 15px rgba(57,222,255,.38); }
.reveal .slides .digital-city-slide .dc-subtitle { margin-top:7px; color:#2fe4ef; font-size:18px; letter-spacing:0; }
.reveal .slides .digital-city-slide .dc-theme { display:grid; justify-items:start; gap:10px; color:#fff; }
.reveal .slides .digital-city-slide .dc-theme strong { font-size:21px; line-height:1.14; }
.reveal .slides .digital-city-slide .dc-theme i { width:138px; height:3px; background:repeating-linear-gradient(90deg,#31e8f1 0 29px,transparent 29px 35px); }
.reveal .slides .digital-city-slide .dc-score {
    position:relative;
    justify-self:stretch;
    min-width:0;
    padding:10px 18px 9px;
    border:1px solid rgba(255,197,61,.72);
    border-radius:4px 15px 15px 4px;
    color:#ffd23f;
    background:linear-gradient(110deg,rgba(88,58,6,.26),rgba(4,16,38,.88));
    box-shadow:0 0 17px rgba(255,190,37,.13),inset 0 0 20px rgba(255,190,37,.06);
    clip-path:polygon(0 12px,12px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,12px 100%,0 calc(100% - 12px));
}
.reveal .slides .digital-city-slide .dc-score::before,
.reveal .slides .digital-city-slide .dc-score::after { border-color:#ffd23f; }
.reveal .slides .digital-city-slide .dc-score span { color:#ffd23f; font-size:42px; line-height:1; font-weight:900; white-space:nowrap; }
.reveal .slides .digital-city-slide .dc-score span b { color:#ffd23f; }
.reveal .slides .digital-city-slide .dc-score small { margin-top:7px; color:#ffd23f; font-size:17px; font-weight:850; }
.reveal .slides .digital-city-slide .dc-score small em { color:#fff; font-style:normal; }

.reveal .slides .digital-city-slide .dc-main {
    grid-template-columns:310px minmax(0,1fr) 350px;
    gap:14px;
    padding-top:10px;
}
.reveal .slides .digital-city-slide .nova-panel,
.reveal .slides .digital-city-slide .toolkit-panel { border-radius:12px; }
.reveal .slides .digital-city-slide .nova-panel { padding:8px 15px 12px; justify-content:flex-start; }
.reveal .slides .digital-city-slide .nova-core { height:340px; flex:0 0 340px; transform:scale(1.08); }
.reveal .slides .digital-city-slide .nova-ball { width:158px; height:158px; }
.reveal .slides .digital-city-slide .nova-ball strong { font-size:35px; }
.reveal .slides .digital-city-slide .nova-message { padding:0 17px 5px; font-size:19px; line-height:1.42; }
.reveal .slides .digital-city-slide .nova-message p { margin:0 0 15px; }
.reveal .slides .digital-city-slide .nova-message hr { margin:5px 0 15px; }
.reveal .slides .digital-city-slide .nova-message [lang="zh-CN"] { font-size:18px; line-height:1.45; }

.reveal .slides .digital-city-slide .dc-map { overflow:visible; clip-path:none; }
.reveal .slides .digital-city-slide .dc-cityscape { inset:38% 0 0; height:62%; opacity:.58; }
.reveal .slides .digital-city-slide .dc-routes { z-index:1; inset:0; width:100%; height:100%; overflow:visible; }
.reveal .slides .digital-city-slide .city-core { z-index:0; bottom:7%; width:300px; }
.reveal .slides .digital-city-slide .dc-node {
    z-index:3;
    width:315px;
    min-height:124px;
    padding:12px 52px 11px 82px;
    border-radius:10px;
}
.reveal .slides .digital-city-slide .dc-node::after {
    content:"STAGE " attr(data-stage);
    position:absolute;
    left:82px;
    right:auto;
    top:10px;
    width:auto;
    height:auto;
    color:var(--beacon);
    background:none;
    font-size:14px;
    font-weight:800;
    line-height:1;
}
.reveal .slides .digital-city-slide .dc-node b { left:13px; top:17px; width:60px; font-size:48px; }
.reveal .slides .digital-city-slide .dc-node span { margin-top:14px; font-size:18px; line-height:1.05; }
.reveal .slides .digital-city-slide .dc-node em { font-size:18px; }
.reveal .slides .digital-city-slide .dc-node small { font-size:16px; line-height:1.18; }
.reveal .slides .digital-city-slide .dc-node > svg { right:10px; width:40px; height:40px; }
.reveal .slides .digital-city-slide .node-01 { top:0; min-height:128px; }
.reveal .slides .digital-city-slide .node-02 { left:0; top:20%; min-height:132px; }
.reveal .slides .digital-city-slide .node-03 { right:0; top:20%; min-height:132px; }
.reveal .slides .digital-city-slide .node-04 { left:0; top:42%; min-height:128px; }
.reveal .slides .digital-city-slide .node-05 { right:0; top:42%; min-height:128px; }
.reveal .slides .digital-city-slide .node-06 { top:63%; min-height:128px; }
.reveal .slides .digital-city-slide .node-07 { left:0; bottom:8px; min-height:120px; }
.reveal .slides .digital-city-slide .node-08 { right:0; bottom:8px; min-height:120px; }

.reveal .slides .digital-city-slide .toolkit-panel { padding:12px 13px 10px; gap:7px; }
.reveal .slides .digital-city-slide .toolkit-panel h3 { padding:2px 7px 9px; font-size:22px; }
.reveal .slides .digital-city-slide .tool-item { grid-template-columns:58px minmax(0,1fr); gap:10px; padding:8px 10px; }
.reveal .slides .digital-city-slide .tool-item > b { width:52px; height:52px; }
.reveal .slides .digital-city-slide .tool-item strong { font-size:18px; }
.reveal .slides .digital-city-slide .tool-item strong span { font-size:16px; }
.reveal .slides .digital-city-slide .tool-item small { font-size:15px; line-height:1.18; }
body:has(.digital-city-slide.present) .course-nav { right:50%; bottom:10px; transform:translateX(50%); }
.reveal .slides .digital-city-slide .dc-route-overlay {
    position:absolute;
    z-index:2;
    inset:0;
    width:100%;
    height:100%;
    overflow:visible;
    pointer-events:none;
}
.reveal .slides .digital-city-slide .dc-route-overlay path {
    fill:none;
    stroke:#2476ac;
    stroke-width:3;
    stroke-linecap:round;
    stroke-dasharray:5 8;
    opacity:.65;
    vector-effect:non-scaling-stroke;
    filter:drop-shadow(0 0 4px rgba(44,157,218,.55));
}
.reveal .slides .digital-city-slide .dc-route-overlay path.active {
    stroke:#4aeaff;
    stroke-width:4;
    opacity:.95;
    filter:drop-shadow(0 0 8px #28dfff);
    animation:energyFlow 3.2s linear infinite;
}
.reveal .slides .digital-city-slide .dc-route-overlay path.risk { stroke:#b26b3c; }

/* Reusable Teaching Lens overlay. */
.mission-header-actions { display:flex; align-items:center; gap:13px; }
.teaching-lens-trigger { display:grid; place-items:center; min-width:132px; min-height:48px; padding:6px 12px; border:1px solid rgba(8,145,178,.24); border-radius:9px; color:#17445c; background:rgba(255,255,255,.62); cursor:pointer; transition:border-color .2s ease,box-shadow .2s ease,background .2s ease; }
.teaching-lens-trigger span { font-size:15px; font-weight:820; line-height:1.1; }
.teaching-lens-trigger small { margin-top:3px; color:#0e7490; font-size:12px; font-weight:700; }
.teaching-lens-trigger:hover,
.teaching-lens-trigger:focus-visible { border-color:rgba(8,145,178,.55); background:rgba(244,253,255,.92); box-shadow:0 0 16px rgba(34,189,208,.18); outline:none; }
.teaching-lens-panel { position:absolute!important; z-index:40!important; top:94px; right:64px; width:410px; max-height:690px; box-sizing:border-box; padding:22px 23px 20px; border:1px solid rgba(8,145,178,.28); border-radius:16px; color:#17324d; background:rgba(247,253,255,.94); box-shadow:0 18px 48px rgba(15,67,101,.18); backdrop-filter:blur(13px); -webkit-backdrop-filter:blur(13px); opacity:0; visibility:hidden; transform:translateX(28px); pointer-events:none; transition:opacity .25s ease,transform .25s ease,visibility .25s; overflow:hidden; }
.teaching-lens-panel.is-open { opacity:1; visibility:visible; transform:translateX(0); pointer-events:auto; }
.teaching-lens-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding-bottom:14px; border-bottom:1px solid rgba(8,145,178,.18); }
.teaching-lens-header > div { display:grid; gap:3px; }
.teaching-lens-header strong { color:#0b2946; font-size:23px; letter-spacing:1px; }
.teaching-lens-header span { color:#0e7490; font-size:17px; font-weight:750; }
.teaching-lens-close { display:grid; place-items:center; width:36px; height:36px; padding:0; border:1px solid rgba(8,145,178,.24); border-radius:50%; color:#31576c; background:#fff; font-size:25px; line-height:1; cursor:pointer; }
.teaching-lens-close:hover,
.teaching-lens-close:focus-visible { color:#0e7490; border-color:#22bdd0; box-shadow:0 0 12px rgba(34,189,208,.20); outline:none; }
.teaching-lens-tags { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.teaching-lens-tags span { padding:6px 10px; border-radius:999px; color:#0f766e; background:#e7f8f7; font-size:15px; font-weight:750; }
.teaching-lens-body { color:#304c61; font-size:18px; line-height:1.68; }
.teaching-lens-body p { margin:0 0 14px; }
.teaching-lens-body strong { color:#0e7490; font-weight:850; }
.teaching-lens-flow { display:flex; align-items:center; justify-content:space-between; gap:5px; margin-top:16px; padding:12px 10px; border-top:1px solid rgba(8,145,178,.17); border-bottom:1px solid rgba(8,145,178,.17); color:#173b5b; }
.teaching-lens-flow span { display:grid; gap:2px; text-align:center; font-size:14px; font-weight:800; }
.teaching-lens-flow small { color:#0e7490; font-size:8px; letter-spacing:.3px; }
.teaching-lens-flow i { color:#16a6b7; font-size:16px; font-style:normal; }
@media (prefers-reduced-motion:reduce) { .teaching-lens-panel { transition:none!important; } }

/* Page 3 Teaching Lens layout repair. */
.communication-timeline-slide .teaching-lens-panel {
    width:440px;
    height:auto;
    max-height:calc(100vh - 150px);
    box-sizing:border-box;
    overflow-x:hidden;
}
.communication-timeline-slide .teaching-lens-body,
.communication-timeline-slide .teaching-lens-flow {
    box-sizing:border-box;
    min-width:0;
    white-space:normal;
}
.communication-timeline-slide .teaching-lens-concept {
    display:block;
    width:fit-content;
    max-width:100%;
    margin:6px 0;
    line-height:1.35;
    white-space:normal;
}
.communication-timeline-slide .teaching-lens-flow {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px 16px;
    margin-top:22px;
    padding:18px 0 0;
    border-top:1px solid rgba(8,145,178,.17);
    border-bottom:0;
}
.communication-timeline-slide .teaching-lens-flow-item {
    position:relative;
    display:grid;
    grid-template-columns:28px minmax(0,1fr);
    align-items:center;
    gap:8px;
    min-width:0;
    padding:10px 9px;
    border:1px solid rgba(8,145,178,.15);
    border-radius:10px;
    background:rgba(232,248,250,.68);
    text-align:center;
    box-sizing:border-box;
}
.communication-timeline-slide .teaching-lens-flow-item > i {
    display:grid;
    place-items:center;
    width:27px;
    height:27px;
    border-radius:50%;
    color:#fff;
    background:#159aaa;
    font-size:11px;
    font-style:normal;
    font-weight:900;
}
.communication-timeline-slide .teaching-lens-flow-item > span {
    display:grid;
    min-width:0;
    gap:3px;
    color:#173b5b;
    font-size:15px;
    font-weight:800;
    line-height:1.2;
    overflow-wrap:anywhere;
}
.communication-timeline-slide .teaching-lens-flow-item small {
    color:#0e7490;
    font-size:10px;
    font-weight:850;
    letter-spacing:.25px;
    line-height:1.2;
    white-space:normal;
}

/* Page 3 · fixed compact judge-facing Teaching Lens. */
.reveal .slides .communication-timeline-slide .teaching-lens-panel {
    top:94px;
    right:64px;
    display:flex;
    flex-direction:column;
    width:450px;
    height:412px;
    max-height:412px;
    padding:15px 21px 13px;
    box-sizing:border-box;
    overflow:hidden;
}
.reveal .slides .communication-timeline-slide .teaching-lens-header {
    flex:0 0 auto;
    padding-bottom:8px;
}
.reveal .slides .communication-timeline-slide .teaching-lens-header strong { font-size:26px; line-height:1; }
.reveal .slides .communication-timeline-slide .teaching-lens-header span { font-size:18px; }
.reveal .slides .communication-timeline-slide .teaching-lens-tags {
    flex:0 0 auto;
    gap:6px;
    margin:8px 0 8px;
}
.reveal .slides .communication-timeline-slide .teaching-lens-tags span {
    padding:5px 8px;
    font-size:15px;
}
.reveal .slides .communication-timeline-slide .teaching-lens-body {
    flex:0 0 auto;
    font-size:17px;
    line-height:1.48;
}
.reveal .slides .communication-timeline-slide .teaching-lens-body p {
    margin:0 0 5px;
}
.reveal .slides .communication-timeline-slide .teaching-lens-concept {
    display:block;
    width:100%;
    margin:1px 0 6px;
    padding:6px 8px;
    border-radius:8px;
    color:#0e7490;
    background:rgba(215,247,249,.78);
    font-size:19px;
    font-weight:900;
    line-height:1.15;
    text-align:center;
    white-space:nowrap;
    box-sizing:border-box;
}
.reveal .slides .communication-timeline-slide .teaching-lens-flow {
    flex:0 0 auto;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:7px;
    min-width:0;
    margin-top:auto;
    padding:8px 0 0;
    border-top:1px solid rgba(8,145,178,.17);
    overflow:hidden;
    box-sizing:border-box;
}
.reveal .slides .communication-timeline-slide .teaching-lens-flow-item {
    display:grid;
    grid-template-columns:1fr;
    min-width:0;
    padding:7px 4px;
    box-sizing:border-box;
}
.reveal .slides .communication-timeline-slide .teaching-lens-flow-item:not(:last-child)::after {
    content:none;
}
.reveal .slides .communication-timeline-slide .teaching-lens-flow-item > span {
    display:grid;
    gap:2px;
    min-width:0;
    font-size:15px;
    line-height:1.15;
    white-space:normal;
}
.reveal .slides .communication-timeline-slide .teaching-lens-flow-item small {
    font-size:8px;
    line-height:1.1;
    white-space:normal;
}

/* Page 3 locked cascade overrides. */
.reveal .slides .communication-timeline-slide .communication-title { font-size:42px; }
.reveal .slides .communication-timeline-slide .timeline-challenge-prompt { font-size:23px; }
.reveal .slides .communication-timeline-slide .timeline-instruction { font-size:18px; }
.reveal .slides .communication-timeline-slide .timeline-items .timeline-card { grid-template-columns:64px minmax(0,1fr); min-height:104px; padding:10px 14px; gap:10px; }
.reveal .slides .communication-timeline-slide .timeline-items .communication-device-image { width:62px; height:62px; }
.reveal .slides .communication-timeline-slide .timeline-items .timeline-card-text .translation-trigger { font-size:25px; line-height:1.08; }
.reveal .slides .communication-timeline-slide .timeline-items .timeline-card-text .translation { margin-top:5px; font-size:19px; line-height:1.08; }
.reveal .slides .communication-timeline-slide .timeline-track .year { font-size:24px; line-height:1.05; }
.reveal .slides .communication-timeline-slide .timeline-track .drop-label { margin-top:9px; font-size:18px; line-height:1; }
.reveal .slides .communication-timeline-slide .drop-zone .timeline-card-text .translation-trigger { font-size:21px; }
.reveal .slides .communication-timeline-slide .drop-zone .timeline-card-text .translation { font-size:17px; }
.reveal .slides .communication-timeline-slide .activity-progress-label { font-size:18px; }
.reveal .slides .communication-timeline-slide .activity-score { min-width:62px; font-size:23px; }
.reveal .slides .communication-timeline-slide #resetTimeline { padding:8px 15px; font-size:17px; }
.reveal .slides .communication-timeline-slide .activity-progress-dots i { width:11px; height:11px; }
.reveal .slides .communication-timeline-slide .timeline-track { padding-top:28px; }
.reveal .slides .communication-timeline-slide .evolution-line-bg,
.reveal .slides .communication-timeline-slide .evolution-line-energy { top:13px; height:7px; }
.reveal .slides .communication-timeline-slide .drop-zone::before { top:-22px; width:19px; height:19px; border-width:5px; }
.reveal .slides .communication-timeline-slide .nova-learning-zone { grid-template-columns:minmax(300px,27%) minmax(0,73%); }
.reveal .slides .communication-timeline-slide .nova-classroom-core { border-color:transparent; background:radial-gradient(circle at 50% 48%,rgba(23,207,225,.16),rgba(245,252,255,.25) 55%,transparent 74%); box-shadow:none; overflow:visible; }
.reveal .slides .communication-timeline-slide .nova-classroom-core .page3-nova-core { transform:scale(1.03); }
.reveal .slides .communication-timeline-slide .nova-mission-update { padding:20px 25px; background:linear-gradient(115deg,rgba(239,252,255,.96),rgba(255,255,255,.90)); }
.reveal .slides .communication-timeline-slide .nova-update-idle strong,
.reveal .slides .communication-timeline-slide .nova-update-heading strong { font-size:21px; }
.reveal .slides .communication-timeline-slide .nova-update-idle b { display:block; margin-top:18px; color:#173b5b; font-size:21px; letter-spacing:.6px; }
.reveal .slides .communication-timeline-slide .nova-update-idle p { margin-top:15px; font-size:20px; }
.reveal .slides .communication-timeline-slide .nova-update-complete { grid-template-columns:1.12fr .88fr; grid-template-areas:"head head" "evolution changed" "network reflection"; gap:11px 20px; }
.reveal .slides .communication-timeline-slide .nova-update-heading b { font-size:21px; }
.reveal .slides .communication-timeline-slide .nova-update-heading em { font-size:19px; }
.reveal .slides .communication-timeline-slide .device-evolution-summary { font-size:18px; }
.reveal .slides .communication-timeline-slide .evolution-keywords b { font-size:17px; }
.reveal .slides .communication-timeline-slide .network-update strong { font-size:20px; }
.reveal .slides .communication-timeline-slide .reflection-hook { grid-area:reflection; align-self:center; }
.reveal .slides .communication-timeline-slide .reflection-hook > strong { display:block; margin-bottom:5px; color:#0e7490; font-size:28px; }
.reveal .slides .communication-timeline-slide .reflection-hook .transition-question { margin:0; font-size:25px; line-height:1.12; text-align:left; }

/* Page 3 requested final typography scale. */
.reveal .communication-timeline-slide .timeline-items .timeline-card-text .translation-trigger { font-size:42px; line-height:1; }
.reveal .communication-timeline-slide .timeline-items .timeline-card-text .translation { margin-top:7px; font-size:34px; line-height:1; }
.reveal .communication-timeline-slide .timeline-track .year { font-size:42px; line-height:1; }
.reveal .communication-timeline-slide .timeline-track .drop-label { margin-top:10px; font-size:30px; line-height:1; }
.reveal .communication-timeline-slide .drop-zone .timeline-card-text .translation-trigger { font-size:34px; }
.reveal .communication-timeline-slide .drop-zone .timeline-card-text .translation { font-size:30px; }
.reveal .communication-timeline-slide .activity-control-bar .activity-progress-label { font-size:34px; line-height:1; }
.reveal .communication-timeline-slide .activity-control-bar .activity-score { min-width:92px; font-size:42px; line-height:1; }
.reveal .communication-timeline-slide .activity-control-bar #resetTimeline { padding:8px 18px; font-size:32px; line-height:1; }
.reveal .communication-timeline-slide .activity-progress-dots i { width:16px; height:16px; }
.reveal .communication-timeline-slide .timeline-items .timeline-card { grid-template-columns:50px minmax(0,1fr); gap:8px; padding-left:10px; padding-right:10px; }
.reveal .communication-timeline-slide .timeline-items .communication-device-image { width:58px; height:58px; }

/* Page 3 · use the Page 2 NOVA construction in compact assistant scale. */
:is(.communication-timeline-slide,.watch-notice-slide,.first-take-slide) .page3-nova-core {
    position:relative;
    display:grid;
    place-items:center;
    width:314px;
    height:314px;
    flex:0 0 314px;
    isolation:isolate;
    transform:scale(.72);
}
:is(.communication-timeline-slide,.watch-notice-slide,.first-take-slide) .page3-nova-core .nova-beam { position:absolute; z-index:0; bottom:18px; width:176px; height:230px; background:linear-gradient(to top,rgba(48,220,255,.29),rgba(48,220,255,.035) 72%,transparent); clip-path:polygon(32% 100%,68% 100%,88% 0,12% 0); filter:blur(7px); animation:novaBeam 5s ease-in-out infinite; }
:is(.communication-timeline-slide,.watch-notice-slide,.first-take-slide) .page3-nova-core .nova-ball { position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; width:148px; height:148px; border:2px solid #54e9ff; border-radius:50%; color:#fff; background:radial-gradient(circle at 42% 35%,#7ff6ff 0 2%,#1bcbf5 3%,#0757be 22%,#041936 62%,#010817 100%); box-shadow:0 0 20px #35eaff,0 0 55px rgba(30,200,255,.78),0 0 110px rgba(30,94,255,.40),inset 0 0 30px rgba(80,239,255,.35); animation:novaBreathe 4.8s ease-in-out infinite; }
:is(.communication-timeline-slide,.watch-notice-slide,.first-take-slide) .page3-nova-core .nova-ball::before { content:""; position:absolute; inset:9px; border:1px solid rgba(122,247,255,.42); border-radius:50%; box-shadow:inset 0 0 14px rgba(66,225,255,.24); }
:is(.communication-timeline-slide,.watch-notice-slide,.first-take-slide) .page3-nova-core .nova-ball strong { font-size:31px; }
:is(.communication-timeline-slide,.watch-notice-slide,.first-take-slide) .page3-nova-core .nova-ball span { color:#4ef3ff; font-size:15px; font-weight:800; }
:is(.communication-timeline-slide,.watch-notice-slide,.first-take-slide) .page3-nova-core .nova-ball em { color:#7ff7ff; font-size:14px; font-style:normal; }
:is(.communication-timeline-slide,.watch-notice-slide,.first-take-slide) .page3-nova-core .nova-orbit { position:absolute; z-index:2; border:1px solid rgba(81,233,255,.58); border-radius:50%; box-shadow:0 0 13px rgba(28,210,255,.54),inset 0 0 13px rgba(28,210,255,.12); }
:is(.communication-timeline-slide,.watch-notice-slide,.first-take-slide) .page3-nova-core .nova-orbit i { position:absolute; top:50%; left:-4px; width:9px; height:9px; border-radius:50%; background:#b8fbff; box-shadow:0 0 8px #fff,0 0 18px #23dfff; }
:is(.communication-timeline-slide,.watch-notice-slide,.first-take-slide) .page3-nova-core .orbit-a { width:205px; height:205px; animation:novaOrbitA 15s linear infinite; }
:is(.communication-timeline-slide,.watch-notice-slide,.first-take-slide) .page3-nova-core .orbit-b { width:246px; height:120px; animation:novaOrbitB 11s linear infinite reverse; }
:is(.communication-timeline-slide,.watch-notice-slide,.first-take-slide) .page3-nova-core .orbit-c { width:178px; height:262px; transform:rotate(56deg); animation:novaOrbitC 19s linear infinite; }
:is(.communication-timeline-slide,.watch-notice-slide,.first-take-slide) .page3-nova-core .nova-scan-ring { position:absolute; z-index:1; width:272px; height:272px; border:1px dashed rgba(66,226,255,.28); border-radius:50%; animation:novaScan 18s linear infinite; }
:is(.communication-timeline-slide,.watch-notice-slide,.first-take-slide) .page3-nova-core .nova-data-arc { position:absolute; z-index:1; width:286px; height:286px; border:2px solid transparent; border-radius:50%; pointer-events:none; }
:is(.communication-timeline-slide,.watch-notice-slide,.first-take-slide) .page3-nova-core .arc-a { border-top-color:rgba(66,230,255,.70); border-right-color:rgba(66,230,255,.18); transform:rotate(24deg); animation:novaScan 13s linear infinite reverse; }
:is(.communication-timeline-slide,.watch-notice-slide,.first-take-slide) .page3-nova-core .arc-b { width:232px; height:232px; border-bottom-color:rgba(105,111,255,.68); border-left-color:rgba(66,230,255,.15); animation:novaScan 9s linear infinite; }
:is(.communication-timeline-slide,.watch-notice-slide,.first-take-slide) .page3-nova-core .nova-platform { position:absolute; z-index:4; bottom:8px; width:232px; height:58px; }
:is(.communication-timeline-slide,.watch-notice-slide,.first-take-slide) .page3-nova-core .nova-platform i { position:absolute; left:50%; bottom:0; translate:-50% 0; border:2px solid rgba(68,231,255,.74); border-radius:50%; box-shadow:0 0 12px #20dfff,inset 0 0 15px rgba(30,204,255,.24); }
:is(.communication-timeline-slide,.watch-notice-slide,.first-take-slide) .page3-nova-core .nova-platform i:nth-child(1) { width:224px; height:39px; animation:platformWave 3.5s ease-in-out infinite; }
:is(.communication-timeline-slide,.watch-notice-slide,.first-take-slide) .page3-nova-core .nova-platform i:nth-child(2) { width:174px; height:29px; bottom:10px; opacity:.72; animation:platformWave 3.5s .7s ease-in-out infinite; }
:is(.communication-timeline-slide,.watch-notice-slide,.first-take-slide) .page3-nova-core .nova-platform i:nth-child(3) { width:116px; height:18px; bottom:21px; opacity:.60; animation:platformWave 3.5s 1.4s ease-in-out infinite; }

/* Page 3 · requested 2× typography inside the drag activity. */
.communication-timeline-slide .timeline-items .timeline-card-text .translation-trigger { font-size:42px; line-height:1; }
.communication-timeline-slide .timeline-items .timeline-card-text .translation { margin-top:7px; font-size:34px; line-height:1; }
.communication-timeline-slide .year { font-size:42px; line-height:1; }
.communication-timeline-slide .drop-label { margin-top:10px; font-size:30px; line-height:1; }
.communication-timeline-slide .drop-zone .timeline-card-text .translation-trigger { font-size:34px; }
.communication-timeline-slide .drop-zone .timeline-card-text .translation { font-size:30px; }
.communication-timeline-slide .activity-progress-label { font-size:34px; line-height:1; }
.communication-timeline-slide .activity-score { min-width:92px; font-size:42px; line-height:1; }
.communication-timeline-slide #resetTimeline { padding:8px 18px; font-size:32px; line-height:1; }
.communication-timeline-slide .activity-progress-dots i { width:16px; height:16px; }

/* =========================================================
   PAGE 3 ONLY · SECOND-PASS CLASSROOM SCALE + NOVA CORE
========================================================= */
.communication-timeline-slide {
    display: grid;
    grid-template-rows: 72px auto auto minmax(242px, 1fr);
    align-content: stretch;
    row-gap: 10px;
    padding: 22px 64px 22px;
}

.communication-timeline-slide .mission-header {
    min-height: 0;
    height: 72px;
    padding: 0 0 12px;
}

.communication-timeline-slide .mission-badge {
    min-height: 40px;
    padding: 0 19px;
    font-size: 21px;
}

.communication-timeline-slide .stage-badge {
    min-height: 40px;
    padding: 0 18px;
    font-size: 19px;
}

.communication-timeline-slide .mission-score {
    min-width: 184px;
    padding: 8px 16px;
}

.communication-timeline-slide .mission-score > span { font-size: 27px; }
.communication-timeline-slide .mission-score small { font-size: 14px; }

.reveal .communication-timeline-slide .communication-title {
    margin: 0 0 3px;
    font-size: 47px;
}

.reveal .communication-timeline-slide .timeline-challenge-prompt {
    font-size: 25px;
}

.reveal .communication-timeline-slide .timeline-instruction {
    margin-top: 5px;
    font-size: 19px;
}

.communication-timeline-slide .timeline-game { margin: 0; }

.communication-timeline-slide .timeline-items {
    gap: 20px;
    margin-bottom: 12px;
}

.communication-timeline-slide .timeline-items .timeline-card {
    grid-template-columns: 82px minmax(0,1fr);
    min-height: 112px;
    padding: 10px 18px;
    gap: 14px;
}

.communication-timeline-slide .communication-device-image {
    width: 76px;
    height: 76px;
}

.communication-timeline-slide .timeline-items .timeline-card-text .translation-trigger {
    font-size: 21px;
    line-height: 1.1;
}

.communication-timeline-slide .timeline-items .timeline-card-text .translation {
    display: block;
    margin-top: 6px;
    color: #0e7490;
    font-size: 17px;
    line-height: 1.1;
    opacity: 1;
}

.communication-timeline-slide .timeline-track {
    gap: 20px;
    padding-top: 22px;
}

.communication-timeline-slide .drop-zone {
    min-height: 132px;
    padding: 27px 12px 9px;
}

.communication-timeline-slide .year { font-size: 21px; }
.communication-timeline-slide .drop-label { font-size: 15px; }

.communication-timeline-slide .drop-zone .timeline-card {
    grid-template-columns: 54px minmax(0,1fr);
    min-height: 82px;
    padding: 6px 10px;
}

.communication-timeline-slide .drop-zone .communication-device-image {
    width: 51px;
    height: 51px;
}

.communication-timeline-slide .drop-zone .timeline-card-text .translation-trigger { font-size: 17px; }
.communication-timeline-slide .drop-zone .timeline-card-text .translation { font-size: 15px; }

.communication-timeline-slide .activity-control-bar {
    min-height: 48px;
    margin-top: 10px;
    padding: 7px 14px;
}

.communication-timeline-slide .activity-progress-label { font-size: 17px; }
.communication-timeline-slide .activity-score { font-size: 21px; }
.communication-timeline-slide #resetTimeline { font-size: 16px; }

.nova-learning-zone {
    display: grid;
    grid-template-columns: minmax(260px, 30%) minmax(0, 70%);
    gap: 22px;
    min-height: 242px;
    height: auto;
    min-width: 0;
    overflow: hidden;
}

.nova-classroom-core {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 242px;
    border: 1px solid rgba(8,145,178,.18);
    border-radius: 18px;
    background: radial-gradient(circle at 50% 45%,rgba(16,185,203,.14),rgba(242,252,255,.88) 48%,rgba(255,255,255,.75));
    box-shadow: inset 0 0 36px rgba(8,145,178,.07),0 10px 24px rgba(15,76,105,.07);
    overflow: hidden;
}

.nova-core-sphere {
    position: relative;
    z-index: 3;
    display: grid;
    place-content: center;
    width: 128px;
    height: 128px;
    text-align: center;
    border: 2px solid #37d9e9;
    border-radius: 50%;
    color: #eaffff;
    background: radial-gradient(circle at 42% 35%,#1f91ad 0%,#07527b 38%,#032645 72%);
    box-shadow: 0 0 18px #35d8e8,0 0 48px rgba(17,186,209,.44),inset 0 0 24px rgba(69,225,239,.35);
    animation: novaClassroomBreath 3.2s ease-in-out infinite;
}

.nova-core-sphere span { font-size: 27px; font-weight: 900; letter-spacing: 1px; }
.nova-core-sphere small { margin-top: 3px; color: #6ff1f4; font-size: 13px; font-weight: 850; letter-spacing: .6px; }

.nova-core-orbits,
.nova-core-orbits i {
    position: absolute;
    left: 50%;
    top: 45%;
    translate: -50% -50%;
    border: 1px solid rgba(18,184,211,.60);
    border-radius: 50%;
}

.nova-core-orbits { z-index: 2; width: 188px; height: 118px; transform: rotate(-14deg); animation:novaOrbitOne 9s linear infinite; }
.nova-core-orbits i:nth-child(1) { width: 174px; height: 100px; transform:rotate(50deg); }
.nova-core-orbits i:nth-child(2) { width: 182px; height: 88px; transform:rotate(105deg); }
.nova-core-orbits i:nth-child(3) { width: 156px; height: 132px; transform:rotate(145deg); }

.nova-orbit-particle { position:absolute; width:7px; height:7px; border-radius:50%; background:#63f3ef; box-shadow:0 0 10px #16cddd; }
.nova-orbit-particle.p1 { left:8px; top:53px; }
.nova-orbit-particle.p2 { right:19px; top:19px; }
.nova-orbit-particle.p3 { left:88px; bottom:-3px; }

.nova-scan-ring { position:absolute; z-index:4; width:151px; height:151px; border-top:2px solid rgba(108,244,245,.8); border-radius:50%; animation:novaOrbitOne 5s linear infinite reverse; }
.nova-hologram-base { position:absolute; z-index:1; left:50%; bottom:23px; width:190px; height:34px; translate:-50% 0; border:2px solid #24cee1; border-radius:50%; background:rgba(17,177,205,.08); box-shadow:0 0 18px rgba(21,197,222,.55),inset 0 0 18px rgba(21,197,222,.20); }

@keyframes novaClassroomBreath { 50% { box-shadow:0 0 25px #35d8e8,0 0 62px rgba(17,186,209,.54),inset 0 0 30px rgba(69,225,239,.42); } }
@keyframes novaOrbitOne { to { transform:rotate(346deg); } }

.communication-timeline-slide .nova-mission-update {
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 17px 22px;
    border-radius: 18px;
}

.communication-timeline-slide .nova-update-idle {
    justify-content: flex-start;
    min-height: 100%;
    padding-left: 10px;
}

.communication-timeline-slide .nova-update-idle strong,
.communication-timeline-slide .nova-update-heading strong { font-size: 18px; }
.communication-timeline-slide .nova-update-idle p { margin-top: 13px; font-size: 21px; }

.communication-timeline-slide .nova-update-complete {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "head head"
        "evolution changed"
        "network question";
    gap: 10px 18px;
    height: 100%;
}

.communication-timeline-slide .nova-update-heading { grid-area:head; }
.communication-timeline-slide .nova-update-heading b { font-size: 19px; }
.communication-timeline-slide .nova-update-heading em { font-size: 17px; }
.mission-insight { min-width:0; }
.mission-insight > small { display:block; margin-bottom:6px; color:#0e7490; font-size:13px; font-weight:900; letter-spacing:1px; }
.evolution-pattern { grid-area:evolution; }
.changed-pattern { grid-area:changed; }
.communication-timeline-slide .device-evolution-summary { justify-content:flex-start; gap:7px; font-size:15px; white-space:normal; }
.communication-timeline-slide .evolution-keywords b { padding:7px 10px; font-size:14px; }
.communication-timeline-slide .network-update { grid-area:network; display:block; padding:8px 12px; }
.communication-timeline-slide .network-update > small { font-size:13px; }
.communication-timeline-slide .network-update > div { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.communication-timeline-slide .network-update strong { display:flex; align-items:center; gap:10px; font-size:18px; }
.communication-timeline-slide .network-update strong i { font-size:21px; }
.communication-timeline-slide .network-update span { color:#0f766e; font-size:12px; font-weight:900; letter-spacing:.8px; }
.communication-timeline-slide .transition-question { grid-area:question; align-self:center; font-size:25px; line-height:1.12; text-align:left; }

@media (prefers-reduced-motion: reduce) {
    .nova-core-sphere,
    .nova-core-orbits,
    .nova-scan-ring { animation:none!important; }
}

/* Page 2 only: keep Reveal navigation clear of the Toolkit. */
body:has(.digital-city-slide.present) .course-nav {
    right: 50%;
    bottom: 14px;
    transform: translateX(50%);
}

/* =========================================================
   PAGE 3 ONLY · MISSION 01 / DISCOVER CHALLENGE
========================================================= */

.communication-timeline-slide {
    --timeline-progress: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 24px 64px 26px;
    overflow: hidden;
    color: #0b1f3a;
    background:
        radial-gradient(circle at 86% 14%, rgba(54, 211, 228, .10), transparent 22%),
        linear-gradient(rgba(30, 142, 169, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30, 142, 169, .035) 1px, transparent 1px),
        linear-gradient(145deg, #fff 0%, #f5fbff 62%, #edf8fc 100%);
    background-size: auto, 32px 32px, 32px 32px, auto;
}

.communication-timeline-slide::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: auto -8% -22% 50%;
    width: 62%;
    height: 48%;
    border-radius: 50%;
    border: 1px solid rgba(30, 169, 190, .10);
    box-shadow: 0 0 0 45px rgba(30,169,190,.025),0 0 0 90px rgba(30,169,190,.018);
    pointer-events: none;
}

.communication-timeline-slide > * {
    position: relative;
    z-index: 1;
}

.mission-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    padding: 0 0 10px;
    border-bottom: 1px solid rgba(15, 118, 110, .23);
}

.mission-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.mission-badge,
.stage-badge {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 16px;
    border-radius: 7px;
    font-size: 17px;
    font-weight: 850;
    letter-spacing: .8px;
}

.mission-badge {
    color: #fff;
    background: linear-gradient(105deg,#0f766e,#0891b2);
    box-shadow: 0 7px 18px rgba(8,145,178,.16);
}

.stage-badge {
    color: #0e7490;
    border: 1px solid rgba(8,145,178,.35);
    background: rgba(255,255,255,.78);
}

.mission-score {
    position: relative;
    display: grid;
    min-width: 170px;
    padding: 7px 14px;
    text-align: right;
    border: 1px solid rgba(8,145,178,.24);
    border-radius: 9px;
    background: rgba(255,255,255,.82);
    box-shadow: 0 7px 18px rgba(15,67,101,.08);
}

.mission-score > span {
    color: #0b2946;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
}

.mission-score small {
    margin-top: 4px;
    color: #0f766e;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 1.2px;
}

.mission-score em {
    position: absolute;
    right: 9px;
    top: -18px;
    color: #0f9f8d;
    font-size: 19px;
    font-style: normal;
    font-weight: 900;
    opacity: 0;
    pointer-events: none;
}

.mission-score em.is-visible { animation: missionGain 1.25s ease-out both; }
.mission-score b.score-updated { animation: missionScoreGlow .9s ease-out both; }

@keyframes missionGain {
    0% { opacity: 0; transform: translateY(8px); }
    20% { opacity: 1; }
    75% { opacity: 1; transform: translateY(-8px); }
    100% { opacity: 0; transform: translateY(-15px); }
}
@keyframes missionScoreGlow {
    45% { color:#0f9f8d; text-shadow:0 0 12px rgba(15,159,141,.55); }
}

.reveal .communication-timeline-slide .communication-title {
    margin: 18px 0 2px;
    color: #071f3d;
    font-size: 45px;
    line-height: 1.04;
    letter-spacing: -.8px;
}

.reveal .communication-timeline-slide .timeline-challenge-prompt {
    margin: 0;
    color: #1e5169;
    font-size: 22px;
    font-weight: 650;
    line-height: 1.2;
}

.reveal .communication-timeline-slide .timeline-instruction {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 16px;
    line-height: 1.25;
}

.communication-timeline-slide .timeline-game {
    margin: 14px 0 0;
}

.communication-timeline-slide .timeline-items {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 18px;
    margin: 0 0 13px;
}

.communication-timeline-slide .timeline-items .timeline-card {
    display: grid;
    grid-template-columns: 70px minmax(0,1fr);
    min-height: 90px;
    padding: 9px 15px;
    gap: 12px;
    border: 1px solid rgba(30,82,115,.16);
    border-radius: 13px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 8px 20px rgba(28,70,98,.08);
    text-align: left;
    cursor: grab;
}

.communication-timeline-slide .timeline-items .timeline-card:hover {
    transform: translateY(-2px);
    border-color: rgba(8,145,178,.42);
    box-shadow: 0 10px 25px rgba(8,145,178,.12);
}

.communication-timeline-slide .communication-device-image {
    width: 64px;
    height: 64px;
    margin: 0;
    fill: none;
    stroke: #173b5b;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    object-fit: initial;
}

.communication-timeline-slide .communication-device-image .accent {
    stroke: #0d9e9a;
}

.communication-timeline-slide .communication-device-image .message {
    fill: rgba(45,212,191,.10);
    stroke: #0d9e9a;
}

.communication-timeline-slide .timeline-items .timeline-card-text {
    width: auto;
    text-align: left;
}

.communication-timeline-slide .timeline-items .timeline-card-text .translation-trigger {
    font-size: 20px;
    color: #0b2946;
    text-align: left;
}

.communication-timeline-slide .timeline-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 18px;
    align-items: stretch;
    margin: 0;
    padding-top: 20px;
}

.communication-timeline-slide .timeline-track > .timeline-line {
    display: none;
}

.evolution-line-bg,
.evolution-line-energy {
    position: absolute;
    z-index: 0;
    left: 11%;
    right: 11%;
    top: 12px;
    height: 5px;
    border-radius: 10px;
}

.evolution-line-bg { background: #cbd8e1; }
.evolution-line-energy {
    right: auto;
    width: calc(78% * var(--timeline-progress));
    background: linear-gradient(90deg,#0f766e,#20bdd0,#5eead4);
    box-shadow: 0 0 10px rgba(32,189,208,.38);
    transition: width .45s ease;
}

.timeline-track.is-complete .evolution-line-energy::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
    transform: translateX(-100%);
    animation: timelineSweep 1.15s ease-out 1;
}

@keyframes timelineSweep { to { transform: translateX(100%); } }

.communication-timeline-slide .drop-zone {
    position: relative;
    z-index: 1;
    width: auto;
    min-height: 112px;
    padding: 24px 10px 8px;
    border: 1px dashed rgba(51,82,105,.26);
    border-radius: 12px;
    background: rgba(244,249,252,.80);
}

.communication-timeline-slide .drop-zone::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -16px;
    width: 14px;
    height: 14px;
    translate: -50% 0;
    border: 4px solid #f7fbfd;
    border-radius: 50%;
    background: #aabcc8;
    box-shadow: 0 0 0 1px #9fb4c1;
}

.communication-timeline-slide .drop-zone.correct {
    border-style: solid;
    border-color: rgba(15,159,141,.58);
    background: rgba(236,253,250,.88);
    box-shadow: inset 0 0 18px rgba(20,184,166,.07);
}

.communication-timeline-slide .drop-zone.correct::before {
    background: #14b8a6;
    box-shadow: 0 0 0 1px #0f9f8d,0 0 12px rgba(20,184,166,.44);
}

.communication-timeline-slide .drop-zone.wrong {
    border-color: #e78f8f;
    background: #fff8f8;
}

.communication-timeline-slide .year {
    color: #173b5b;
    font-size: 17px;
    font-weight: 850;
}

.communication-timeline-slide .drop-label {
    margin-top: 7px;
    color: #8496a3;
    font-size: 13px;
}

.communication-timeline-slide .drop-zone .timeline-card {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr);
    min-height: 64px;
    padding: 5px 8px;
    gap: 6px;
    background: rgba(255,255,255,.92);
}

.communication-timeline-slide .drop-zone .communication-device-image {
    width: 40px;
    height: 40px;
    margin: 0;
}

.communication-timeline-slide .drop-zone .timeline-card-text {
    width: auto;
    text-align: left;
}

.communication-timeline-slide .drop-zone .timeline-card-text .translation-trigger {
    font-size: 14px;
    text-align: left;
}

.communication-timeline-slide .activity-control-bar {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 16px;
    min-height: 43px;
    margin: 10px 0 0;
    padding: 7px 12px;
    border: 1px solid rgba(30,82,115,.13);
    border-radius: 10px;
    background: rgba(255,255,255,.78);
}

.activity-progress-label {
    color: #34566b;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: 1px;
}

.activity-progress-dots {
    display: flex;
    gap: 8px;
}

.activity-progress-dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd7de;
    transition: background .25s ease,box-shadow .25s ease;
}

.activity-progress-dots i.is-complete {
    background: #14b8a6;
    box-shadow: 0 0 8px rgba(20,184,166,.45);
}

.communication-timeline-slide .activity-score {
    min-width: 56px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #0b2946;
    font-size: 19px;
    font-weight: 900;
}

.communication-timeline-slide #resetTimeline {
    padding: 8px 15px;
    border: 1px solid rgba(15,118,110,.30);
    border-radius: 8px;
    background: #fff;
    color: #0f766e;
    font-size: 14px;
    font-weight: 850;
}

.nova-mission-update {
    min-height: 128px;
    margin-top: 11px;
    padding: 12px 18px;
    border: 1px solid rgba(8,145,178,.20);
    border-radius: 13px;
    background: linear-gradient(110deg,rgba(240,252,255,.95),rgba(255,255,255,.91));
    box-shadow: 0 8px 20px rgba(15,76,105,.07);
    overflow: hidden;
}

.nova-update-idle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 102px;
    color: #607887;
}

.nova-update-idle strong,
.nova-update-heading strong {
    color: #0e7490;
    font-size: 14px;
    letter-spacing: 1px;
}

.nova-update-idle p { margin: 4px 0 0; font-size: 18px; }

.mini-nova-core {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid #22bdd0;
    border-radius: 50%;
    box-shadow: 0 0 13px rgba(34,189,208,.28),inset 0 0 12px rgba(34,189,208,.12);
}

.mini-nova-core::before,
.mini-nova-core::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(34,189,208,.42);
    border-radius: 50%;
}
.mini-nova-core::before { width: 52px; height: 27px; transform: rotate(28deg); }
.mini-nova-core::after { width: 27px; height: 52px; transform: rotate(28deg); }
.mini-nova-core i { width: 13px; height: 13px; border-radius: 50%; background:#22bdd0; box-shadow:0 0 9px #22bdd0; }

.nova-update-complete {
    display: none;
    grid-template-columns: 1.1fr 1.05fr .95fr;
    grid-template-areas:
        "head devices network"
        "keywords question question";
    gap: 9px 18px;
    align-items: center;
}

.nova-mission-update.is-complete .nova-update-idle { display:none; }
.nova-mission-update.is-complete .nova-update-complete { display:grid; animation:updateReveal .55s ease both; }

@keyframes updateReveal { from { opacity:0; transform:translateY(8px); } }

.nova-update-heading { grid-area:head; display:flex; align-items:center; gap:13px; }
.nova-update-heading > div { display:grid; gap:3px; }
.nova-update-heading b { color:#0f766e; font-size:16px; }
.nova-update-heading em { margin-left:auto; color:#0f9f8d; font-size:13px; font-style:normal; font-weight:850; }
.device-evolution-summary { grid-area:devices; display:flex; align-items:center; justify-content:center; gap:7px; color:#244b61; font-size:13px; font-weight:750; white-space:nowrap; }
.device-evolution-summary i { color:#14a6b8; font-style:normal; }
.evolution-keywords { grid-area:keywords; display:flex; gap:8px; }
.evolution-keywords b { padding:5px 9px; border-radius:6px; background:#e6f8f7; color:#0f766e; font-size:12px; letter-spacing:.5px; }
.network-update { grid-area:network; display:grid; gap:4px; padding:7px 12px; border-left:3px solid #22bdd0; background:rgba(226,248,251,.68); }
.network-update small { color:#0e7490; font-size:11px; font-weight:900; letter-spacing:1px; }
.network-update strong { color:#0b2946; font-size:16px; }
.network-update i { color:#0f9f8d; font-style:normal; }
.transition-question { grid-area:question; margin:0; color:#071f3d; font-size:20px; font-weight:760; text-align:center; }

body:has(.communication-timeline-slide.present) .course-nav {
    right: 24px;
    bottom: 14px;
}

@media (prefers-reduced-motion: reduce) {
    .mission-score em,
    .mission-score b,
    .timeline-track.is-complete .evolution-line-energy::after,
    .nova-mission-update.is-complete .nova-update-complete {
        animation:none!important;
    }
}

/* =========================================================
   PAGE 2 ONLY · VISUAL COMPOSITION V2
   Holographic city + energy network + mission beacons
========================================================= */

.digital-city-slide .dc-shell {
    padding: 18px 24px 16px;
}

.digital-city-slide .dc-brand {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
}

.digital-city-slide .dc-brand > i {
    width: 7px;
    height: 58px;
    border: 1px solid #43e6ff;
    border-right: 0;
    box-shadow: -3px 0 12px rgba(67, 230, 255, .48);
}

.digital-city-slide .dc-topbar {
    grid-template-columns: 1.08fr 1.12fr .72fr;
    min-height: 78px;
    padding: 0 5px 12px;
}

.digital-city-slide .dc-topbar::before {
    content: "";
    position: absolute;
    right: 24%;
    bottom: 4px;
    width: 112px;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(67,230,255,.78) 0 13px, transparent 13px 19px);
    opacity: .58;
}

.digital-city-slide .dc-kicker { font-size: 42px; }
.digital-city-slide .dc-subtitle { font-size: 18px; }
.digital-city-slide .dc-mission strong { font-size: 32px; }
.digital-city-slide .dc-score { position: relative; }
.digital-city-slide .dc-score::before,
.digital-city-slide .dc-score::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    border-color: #53e7ff;
}
.digital-city-slide .dc-score::before { left: -5px; top: -5px; border-left: 2px solid; border-top: 2px solid; }
.digital-city-slide .dc-score::after { right: -5px; bottom: -5px; border-right: 2px solid; border-bottom: 2px solid; }

.digital-city-slide .dc-main {
    grid-template-columns: 310px minmax(0, 1fr) 370px;
    gap: 15px;
    padding-top: 12px;
}

.digital-city-slide .nova-panel,
.digital-city-slide .toolkit-panel {
    clip-path: polygon(0 14px,14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px));
}

.digital-city-slide .nova-panel {
    padding: 8px 16px 12px;
}

.digital-city-slide .nova-core {
    height: 314px;
    flex-basis: 314px;
}

.digital-city-slide .nova-beam {
    position: absolute;
    z-index: 0;
    bottom: 18px;
    width: 176px;
    height: 230px;
    background: linear-gradient(to top, rgba(48, 220, 255, .29), rgba(48, 220, 255, .035) 72%, transparent);
    clip-path: polygon(32% 100%,68% 100%,88% 0,12% 0);
    filter: blur(7px);
    animation: novaBeam 5s ease-in-out infinite;
}

.digital-city-slide .nova-platform {
    position: absolute;
    z-index: 4;
    bottom: 8px;
    width: 232px;
    height: 58px;
}

.digital-city-slide .nova-platform i {
    position: absolute;
    left: 50%;
    bottom: 0;
    translate: -50% 0;
    border: 2px solid rgba(68, 231, 255, .74);
    border-radius: 50%;
    box-shadow: 0 0 12px #20dfff, inset 0 0 15px rgba(30, 204, 255, .24);
}
.digital-city-slide .nova-platform i:nth-child(1) { width: 224px; height: 39px; animation: platformWave 3.5s ease-in-out infinite; }
.digital-city-slide .nova-platform i:nth-child(2) { width: 174px; height: 29px; bottom: 10px; opacity: .72; animation: platformWave 3.5s .7s ease-in-out infinite; }
.digital-city-slide .nova-platform i:nth-child(3) { width: 116px; height: 18px; bottom: 21px; opacity: .60; animation: platformWave 3.5s 1.4s ease-in-out infinite; }

.digital-city-slide .nova-ball { width: 148px; height: 148px; }
.digital-city-slide .nova-scan-ring { width: 272px; height: 272px; }
.digital-city-slide .orbit-a { width: 205px; height: 205px; }
.digital-city-slide .orbit-b { width: 246px; height: 120px; }
.digital-city-slide .orbit-c { width: 178px; height: 262px; }
.digital-city-slide .nova-data-arc { width: 286px; height: 286px; }
.digital-city-slide .arc-b { width: 232px; height: 232px; }
.digital-city-slide .nova-message { padding: 7px 9px 3px; font-size: 19px; line-height: 1.32; }
.digital-city-slide .nova-message p { margin: 4px 0; }
.digital-city-slide .nova-message hr { margin: 9px 0; }
.digital-city-slide .nova-message [lang="zh-CN"] { font-size: 18px; line-height: 1.36; }

@keyframes novaBeam { 50% { opacity: .68; transform: scaleX(1.12); } }
@keyframes platformWave { 0%,100% { opacity: .38; transform: scale(.90); } 50% { opacity: .92; transform: scale(1.05); } }

.digital-city-slide .dc-map {
    overflow: hidden;
    border: 0;
    background:
        radial-gradient(circle at 50% 58%, rgba(36, 155, 255, .23), transparent 27%),
        linear-gradient(to bottom, rgba(5, 28, 67, .16), rgba(2, 11, 29, .02));
    clip-path: polygon(0 7%,7% 0,93% 0,100% 7%,100% 93%,93% 100%,7% 100%,0 93%);
}

.digital-city-slide .dc-map::before {
    content: "";
    position: absolute;
    z-index: -3;
    inset: 37% -17% -32%;
    background-image:
        linear-gradient(rgba(62, 216, 255, .13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(62, 216, 255, .13) 1px, transparent 1px);
    background-size: 47px 34px;
    transform: perspective(390px) rotateX(64deg) scale(1.28);
    transform-origin: center top;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 82%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 82%, transparent);
    opacity: .76;
}

.digital-city-slide .dc-map::after {
    z-index: -1;
    background:
        radial-gradient(circle at 16% 18%, #86f6ff 0 1px, transparent 2px),
        radial-gradient(circle at 78% 28%, #a58cff 0 1px, transparent 2px),
        radial-gradient(circle at 62% 66%, #68e7ff 0 1px, transparent 2px),
        linear-gradient(90deg, transparent 13%, rgba(41, 190, 255, .06) 13% 14%, transparent 14% 48%, rgba(100, 90, 255, .08) 48% 49%, transparent 49% 82%, rgba(41, 190, 255, .06) 82% 83%, transparent 83%);
    background-size: 91px 83px, 137px 109px, 119px 127px, 100% 100%;
    opacity: .68;
}

.digital-city-slide .dc-cityscape {
    position: absolute;
    z-index: -2;
    inset: 16% 0 0;
    width: 100%;
    height: 84%;
    opacity: .72;
    filter: drop-shadow(0 0 9px rgba(36, 188, 255, .22));
}

.digital-city-slide .city-windows {
    stroke-dasharray: 3 9;
    animation: towerData 7s linear infinite;
}

.digital-city-slide .city-core {
    position: absolute;
    z-index: -1;
    left: 50%;
    bottom: 13%;
    width: 260px;
    height: 112px;
    translate: -50% 0;
}

.digital-city-slide .city-core i {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid rgba(77, 222, 255, .55);
    border-radius: 50%;
    translate: -50% -50%;
    box-shadow: 0 0 17px rgba(36, 201, 255, .35), inset 0 0 17px rgba(36, 201, 255, .13);
}
.digital-city-slide .city-core i:nth-child(1) { width: 260px; height: 78px; animation: cityCorePulse 5s ease-in-out infinite; }
.digital-city-slide .city-core i:nth-child(2) { width: 190px; height: 58px; animation: cityCorePulse 5s .8s ease-in-out infinite; }
.digital-city-slide .city-core i:nth-child(3) { width: 105px; height: 34px; background: radial-gradient(ellipse, rgba(52, 229, 255, .35), transparent 68%); animation: cityCorePulse 5s 1.6s ease-in-out infinite; }

@keyframes towerData { to { stroke-dashoffset: -24; } }
@keyframes cityCorePulse { 50% { opacity: .42; transform: scale(1.12); } }

.digital-city-slide .dc-routes { z-index: 0; }
.digital-city-slide .energy-route path { fill: none; vector-effect: non-scaling-stroke; }
.digital-city-slide .energy-route .route-base { stroke: #173e70; stroke-width: 5; opacity: .65; }
.digital-city-slide .energy-route .route-glow { stroke: #2f86ca; stroke-width: 2; opacity: .42; filter: drop-shadow(0 0 5px #1688d5); }
.digital-city-slide .energy-route .route-pulse { stroke: #8befff; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 3 54; opacity: .22; animation: energyFlow 3.2s linear infinite; }
.digital-city-slide .energy-route[data-state="active"] .route-base { stroke: #15bfe6; stroke-width: 8; opacity: .72; }
.digital-city-slide .energy-route[data-state="active"] .route-glow { stroke: #54efff; stroke-width: 4; opacity: .92; filter: drop-shadow(0 0 9px #28dfff); }
.digital-city-slide .energy-route[data-state="active"] .route-pulse { stroke: #fff; stroke-width: 6; stroke-dasharray: 5 34; opacity: 1; animation-duration: 1.5s; filter: drop-shadow(0 0 7px #bffcff); }
.digital-city-slide .energy-route[data-state="completed"] .route-base { stroke: #42e2a5; opacity: .80; }
.digital-city-slide .energy-route[data-state="completed"] .route-glow { stroke: #74ffd0; opacity: .75; }
.digital-city-slide .route-risk .route-base { stroke: #6f482f; }
.digital-city-slide .route-risk .route-glow { stroke: #b36538; }

@keyframes energyFlow { to { stroke-dashoffset: -114; } }

.digital-city-slide .dc-node {
    --beacon: #5cecff;
    z-index: 3;
    cursor: pointer;
    pointer-events: auto;
    width: 326px;
    min-height: 118px;
    padding: 13px 68px 12px 78px;
    color: var(--beacon);
    border: 1px solid color-mix(in srgb, var(--beacon) 78%, transparent);
    border-radius: 11px;
    background:
        linear-gradient(115deg, color-mix(in srgb, var(--beacon) 17%, transparent), rgba(3, 15, 37, .92) 42%, rgba(4, 18, 42, .82)),
        rgba(2, 12, 31, .92);
    box-shadow:
        0 0 17px color-mix(in srgb, var(--beacon) 30%, transparent),
        inset 0 0 24px color-mix(in srgb, var(--beacon) 10%, transparent);
    opacity: 1;
    filter: none;
    clip-path: polygon(0 12px,12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px));
}

.digital-city-slide .dc-node::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--beacon);
    box-shadow: 0 0 15px var(--beacon);
    opacity: .78;
    pointer-events: none;
}

.digital-city-slide .dc-node::after {
    left: 12px;
    right: 12px;
    top: 7px;
    background: linear-gradient(90deg, var(--beacon), transparent 60%);
    pointer-events: none;
}

.digital-city-slide .dc-node b {
    left: 15px;
    top: 18px;
    width: 56px;
    font-size: 48px;
    color: var(--beacon);
    text-align: center;
    text-shadow: 0 0 16px var(--beacon);
}

.digital-city-slide .dc-node span {
    font-size: 19px;
    line-height: 1.05;
    color: #f0fbff;
    white-space: normal;
}
.digital-city-slide .dc-node em { margin-top: 4px; font-size: 18px; color: var(--beacon); }
.digital-city-slide .dc-node small { margin-top: 5px; font-size: 15px; color: #d7e9f5; }
.digital-city-slide .dc-node > svg {
    position: absolute;
    right: 13px;
    top: 50%;
    width: 43px;
    height: 43px;
    translate: 0 -50%;
    fill: none;
    stroke: var(--beacon);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .76;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--beacon) 65%, transparent));
}

.digital-city-slide .dc-node[data-state="locked"] {
    opacity: 1;
    filter: brightness(.84) saturate(.86);
    box-shadow: 0 0 12px color-mix(in srgb, var(--beacon) 21%, transparent), inset 0 0 20px color-mix(in srgb, var(--beacon) 8%, transparent);
}
.digital-city-slide .dc-node[data-state="locked"] span { color: #d8e7f0; }
.digital-city-slide .dc-node[data-state="locked"] small { color: #b9cfdd; }
.digital-city-slide .dc-node[data-state="current"] {
    filter: none;
    box-shadow: 0 0 17px var(--beacon), 0 0 52px color-mix(in srgb, var(--beacon) 52%, transparent), inset 0 0 28px color-mix(in srgb, var(--beacon) 18%, transparent);
    animation: beaconCurrent 3.2s ease-in-out infinite;
}
.digital-city-slide .dc-node[data-state="completed"] {
    --beacon: #64f0b5;
    filter: none;
}

.digital-city-slide .node-01 { --beacon:#51edff; top:0; }
.digital-city-slide .node-02 { --beacon:#58a7ff; left:0; top:21%; min-height:132px; }
.digital-city-slide .node-03 { --beacon:#ad79ff; right:0; top:23%; }
.digital-city-slide .node-04 { --beacon:#65e985; left:0; top:45%; }
.digital-city-slide .node-05 { --beacon:#ff9b4a; right:0; top:47%; }
.digital-city-slide .node-06 { --beacon:#ff66bd; top:64%; }
.digital-city-slide .node-07 { --beacon:#ffd95b; left:0; bottom:0; }
.digital-city-slide .node-08 { --beacon:#71e7ff; right:0; bottom:0; }

@keyframes beaconCurrent {
    50% { box-shadow: 0 0 25px var(--beacon), 0 0 65px color-mix(in srgb, var(--beacon) 58%, transparent), inset 0 0 34px color-mix(in srgb, var(--beacon) 23%, transparent); }
}

/* Mission 01 global Stage/Beacon state layer. */
.digital-city-slide .dc-node .dc-beacon-indicator {
    position: absolute;
    right: 8px;
    top: 7px;
    z-index: 5;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--beacon) 70%, transparent);
    border-radius: 50%;
    color: #05233a;
    background: transparent;
    box-shadow: none;
    font-size: 17px;
    font-style: normal;
    font-weight: 900;
    opacity: .28;
}

.digital-city-slide .dc-node[data-state="completed"] .dc-beacon-indicator {
    color: #04251e;
    background: #75f6c0;
    border-color: #c6ffe8;
    box-shadow: 0 0 8px #64f0b5, 0 0 20px rgba(100, 240, 181, .68);
    opacity: 1;
}

.digital-city-slide .dc-node[data-state="current"] .dc-beacon-indicator {
    background: var(--beacon);
    box-shadow: 0 0 12px var(--beacon);
    opacity: .78;
    animation: missionMapBeaconPulse 1.8s ease-in-out infinite;
}

@keyframes missionMapBeaconPulse { 50% { opacity: .35; transform: scale(.82); } }

.digital-city-slide .mission-network-complete {
    position: absolute;
    left: 50%;
    top: 48%;
    z-index: 7;
    width: 430px;
    padding: 13px 20px;
    translate: -50% -50%;
    overflow: visible;
    border: 1px solid rgba(82, 231, 255, .58);
    border-radius: 10px;
    color: #eafff7;
    background: linear-gradient(90deg, rgba(3, 20, 35, .92), rgba(5, 42, 55, .96), rgba(3, 20, 35, .92));
    box-shadow: 0 0 18px rgba(0, 210, 255, .18), inset 0 0 18px rgba(0, 210, 255, .06);
    text-align: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .35s ease, transform .35s ease;
    transform: translateY(8px);
}

.digital-city-slide .mission-network-complete::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    border-top: 1px solid rgba(126, 240, 255, .9);
    border-bottom: 1px solid rgba(57, 212, 242, .75);
    border-left: 1px solid rgba(62, 201, 226, .25);
    border-right: 1px solid rgba(62, 201, 226, .25);
    background: linear-gradient(90deg, transparent, rgba(113, 237, 255, .18), transparent) border-box;
    box-shadow: 0 -4px 12px rgba(52, 220, 247, .14), 0 4px 12px rgba(52, 220, 247, .12);
    pointer-events: none;
}

.digital-city-slide .mission-network-complete::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -2;
    width: 520px;
    height: 190px;
    translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(65, 222, 255, .30), rgba(16, 139, 204, .10) 42%, transparent 72%);
    opacity: .18;
    pointer-events: none;
}

.digital-city-slide .mission-network-complete.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.digital-city-slide .mission-network-complete strong,
.digital-city-slide .mission-network-complete span { display: block; }
.digital-city-slide .mission-network-complete strong {
    position: relative;
    z-index: 2;
    font-size: 22px;
    letter-spacing: .8px;
    opacity: .96;
    text-shadow: 0 0 6px rgba(255,255,255,.55), 0 0 14px rgba(72,220,255,.65), 0 0 28px rgba(0,190,255,.35);
    animation: missionNetworkBreathingGlow 4.2s ease-in-out infinite;
}
.digital-city-slide .mission-network-complete strong i {
    margin-right: 8px;
    color: #d9fdff;
    font-size: .86em;
    font-style: normal;
    text-shadow: 0 0 7px rgba(255,255,255,.62), 0 0 13px rgba(61,221,255,.72);
}
.digital-city-slide .mission-network-complete span {
    position: relative;
    z-index: 2;
    margin-top: 4px;
    color: #68efc1;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .7px;
    text-shadow: 0 0 8px rgba(80,255,190,.3);
}
.digital-city-slide .mission-network-sweep {
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 5px;
    z-index: 1;
    width: 25%;
    border-radius: 50%;
    background: linear-gradient(90deg, transparent, rgba(224, 253, 255, .58), transparent);
    filter: blur(3px);
    opacity: 0;
    pointer-events: none;
}

.digital-city-slide .mission-network-complete.is-first-completion::before {
    animation: missionNetworkFrameActivate 1.15s .45s ease-out both;
}
.digital-city-slide .mission-network-complete.is-first-completion::after {
    animation: missionNetworkRadialPulse 1.4s .3s ease-out both;
}
.digital-city-slide .mission-network-complete.is-first-completion .mission-network-sweep {
    animation: missionNetworkSweep .95s .7s ease-in-out 1 both;
}
.digital-city-slide .mission-network-complete.is-first-completion strong {
    animation: missionNetworkTitleReveal .7s .86s ease-out both, missionNetworkBreathingGlow 4.2s 1.65s ease-in-out infinite;
}
.digital-city-slide .mission-network-complete.is-first-completion span {
    animation: missionNetworkSubtitleReveal .65s 1.25s ease-out both;
}
.digital-city-slide .dc-map.is-network-converging .energy-route[data-state="active"] path,
.digital-city-slide .dc-map.is-network-converging .dc-route-overlay path.active {
    animation: missionNetworkRouteConverge .85s ease-out 1;
}

@keyframes missionNetworkBreathingGlow {
    0%, 100% { opacity: .92; text-shadow: 0 0 5px rgba(255,255,255,.42), 0 0 12px rgba(72,220,255,.52), 0 0 24px rgba(0,190,255,.27); }
    50% { opacity: 1; text-shadow: 0 0 7px rgba(255,255,255,.62), 0 0 16px rgba(72,220,255,.72), 0 0 30px rgba(0,190,255,.40); }
}
@keyframes missionNetworkFrameActivate {
    0% { opacity: .28; filter: brightness(.75); }
    55% { opacity: 1; filter: brightness(1.45); }
    100% { opacity: 1; filter: brightness(1); }
}
@keyframes missionNetworkSweep {
    0% { left: -28%; opacity: 0; }
    18% { opacity: .82; }
    82% { opacity: .55; }
    100% { left: 103%; opacity: 0; }
}
@keyframes missionNetworkRadialPulse {
    0% { opacity: 0; transform: scale(.6); }
    45% { opacity: .35; }
    100% { opacity: 0; transform: scale(1.35); }
}
@keyframes missionNetworkTitleReveal {
    from { opacity: 0; filter: blur(3px); }
    to { opacity: 1; filter: blur(0); }
}
@keyframes missionNetworkSubtitleReveal {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes missionNetworkRouteConverge {
    0%, 100% { opacity: inherit; filter: none; }
    45% { opacity: 1; filter: drop-shadow(0 0 12px rgba(112, 239, 255, .95)) brightness(1.55); }
}

.digital-city-slide .toolkit-panel {
    grid-template-rows: auto repeat(6,minmax(0,1fr));
    gap: 7px;
    padding: 13px 14px 12px;
}

.digital-city-slide .toolkit-panel h3 {
    padding: 3px 3px 10px;
    border: 0;
    font-size: 23px;
}

.digital-city-slide .tool-item {
    position: relative;
    grid-template-columns: 57px minmax(0,1fr);
    gap: 11px;
    min-height: 0;
    padding: 8px 10px;
    border: 1px solid rgba(74, 210, 255, .32);
    border-radius: 9px;
    background: linear-gradient(120deg, rgba(17, 73, 116, .32), rgba(2, 14, 34, .76));
    box-shadow: inset 0 0 18px rgba(38, 191, 255, .07), 0 0 10px rgba(20, 165, 255, .06);
    clip-path: polygon(0 8px,8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);
}

.digital-city-slide .tool-item::after {
    content: "";
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 2px;
    background: #42e6ff;
    box-shadow: 0 0 9px #42e6ff;
}

.digital-city-slide .tool-item > b {
    width: 51px;
    height: 51px;
    border-color: rgba(82, 226, 255, .60);
    background: radial-gradient(circle, rgba(34, 154, 216, .25), rgba(4, 26, 56, .55));
}

.digital-city-slide .tool-item > b svg {
    width: 32px;
    height: 32px;
    fill: none;
    stroke: #67edff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 5px rgba(60, 225, 255, .56));
}

.digital-city-slide .tool-item:nth-of-type(3) > b svg { stroke:#9c8cff; }
.digital-city-slide .tool-item:nth-of-type(4) > b svg { stroke:#67efab; }
.digital-city-slide .tool-item:nth-of-type(5) > b svg { stroke:#ffd76b; }

.digital-city-slide .tool-item strong { font-size: 19px; }
.digital-city-slide .tool-item strong span { font-size: 16px; }
.digital-city-slide .tool-item small { margin-top: 4px; font-size: 14px; color: #c6dce9; }

/* Page 2 · Mission → Stage → Task information architecture. */
.reveal .slides .digital-city-slide .dc-node {
    width:310px;
    min-height:108px;
    padding:11px 60px 10px 72px;
}
.reveal .slides .digital-city-slide .dc-node b {
    left:12px;
    top:16px;
    width:52px;
    font-size:44px;
}
.reveal .slides .digital-city-slide .dc-node span {
    font-size:18px;
    line-height:1.04;
    white-space:normal;
    overflow-wrap:normal;
}
.reveal .slides .digital-city-slide .dc-node em {
    margin-top:3px;
    font-size:17px;
    line-height:1.08;
    white-space:normal;
}
.reveal .slides .digital-city-slide .dc-node small {
    margin-top:5px;
    font-size:14px;
    line-height:1.16;
    white-space:normal;
    overflow-wrap:anywhere;
}
.reveal .slides .digital-city-slide .dc-node > svg {
    right:10px;
    width:38px;
    height:38px;
}
.reveal .slides .digital-city-slide .dc-node[data-state="current"] {
    transform:scale(1.03);
}
.reveal .slides .digital-city-slide .dc-node[data-state="locked"] {
    opacity:1;
    filter:brightness(.88) saturate(.88);
}
.reveal .slides .digital-city-slide .node-01 { top:0; min-height:112px; }
.reveal .slides .digital-city-slide .node-02 { left:0; top:18%; min-height:122px; }
.reveal .slides .digital-city-slide .node-03 { right:0; top:20%; }
.reveal .slides .digital-city-slide .node-04 { left:0; top:39%; }
.reveal .slides .digital-city-slide .node-05 { right:0; top:41%; }
.reveal .slides .digital-city-slide .node-06 { top:58%; min-height:112px; }
.reveal .slides .digital-city-slide .node-07 { left:0; bottom:70px; }
.reveal .slides .digital-city-slide .node-08 { right:0; bottom:70px; }
.reveal .slides .digital-city-slide .nova-message {
    font-size:17px;
    line-height:1.28;
}
.reveal .slides .digital-city-slide .nova-message [lang="zh-CN"] {
    font-size:16px;
    line-height:1.30;
}

@media (prefers-reduced-motion: reduce) {
    .digital-city-slide .nova-beam,
    .digital-city-slide .nova-platform i,
    .digital-city-slide .city-windows,
    .digital-city-slide .city-core i,
    .digital-city-slide .route-pulse,
    .digital-city-slide .dc-node[data-state="current"] {
        animation: none !important;
    }
}

/* =========================================================
   PAGE 3 FINAL LOCK · BALANCE, EVOLUTION, NOVA FEEDBACK
========================================================= */
.reveal .communication-timeline-slide .communication-title { font-size:42px; }
.reveal .communication-timeline-slide .timeline-challenge-prompt { font-size:23px; }
.reveal .communication-timeline-slide .timeline-instruction { font-size:18px; }

.reveal .communication-timeline-slide .timeline-items .timeline-card {
    grid-template-columns:64px minmax(0,1fr);
    min-height:104px;
    padding:10px 14px;
    gap:10px;
}
.reveal .communication-timeline-slide .timeline-items .communication-device-image { width:62px; height:62px; }
.reveal .communication-timeline-slide .timeline-items .timeline-card-text .translation-trigger { font-size:25px; line-height:1.08; }
.reveal .communication-timeline-slide .timeline-items .timeline-card-text .translation { margin-top:5px; font-size:19px; line-height:1.08; }
.reveal .communication-timeline-slide .timeline-track .year { font-size:24px; line-height:1.05; }
.reveal .communication-timeline-slide .timeline-track .drop-label { margin-top:9px; font-size:18px; line-height:1; }
.reveal .communication-timeline-slide .drop-zone .timeline-card-text .translation-trigger { font-size:21px; }
.reveal .communication-timeline-slide .drop-zone .timeline-card-text .translation { font-size:17px; }

.communication-timeline-slide .timeline-track { padding-top:28px; }
.communication-timeline-slide .evolution-line-bg,
.communication-timeline-slide .evolution-line-energy { top:13px; height:7px; }
.communication-timeline-slide .evolution-line-bg { box-shadow:0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(127,151,167,.12); }
.communication-timeline-slide .drop-zone::before { top:-22px; width:19px; height:19px; border-width:5px; }
.communication-timeline-slide .drop-zone.correct::after { content:"✓"; position:absolute; right:12px; top:9px; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; color:#fff; background:#12a998; font-size:15px; font-weight:900; box-shadow:0 0 12px rgba(18,169,152,.34); }
.communication-timeline-slide .drop-zone.correct .drop-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

.reveal .communication-timeline-slide .activity-control-bar .activity-progress-label { font-size:18px; }
.reveal .communication-timeline-slide .activity-control-bar .activity-score { min-width:62px; font-size:23px; }
.reveal .communication-timeline-slide .activity-control-bar #resetTimeline { padding:8px 15px; font-size:17px; }
.reveal .communication-timeline-slide .activity-progress-dots i { width:11px; height:11px; }

.nova-learning-zone { grid-template-columns:minmax(300px,27%) minmax(0,73%); }
.nova-classroom-core { border-color:transparent; background:radial-gradient(circle at 50% 48%,rgba(23,207,225,.16),rgba(245,252,255,.25) 55%,transparent 74%); box-shadow:none; overflow:visible; }
.communication-timeline-slide .nova-classroom-core .page3-nova-core { transform:scale(1.03); }

.communication-timeline-slide .nova-mission-update { padding:20px 25px; background:linear-gradient(115deg,rgba(239,252,255,.96),rgba(255,255,255,.90)); box-shadow:0 10px 26px rgba(15,76,105,.08),inset 0 0 28px rgba(34,189,208,.035); }
.communication-timeline-slide .nova-update-idle { padding-left:5px; }
.communication-timeline-slide .nova-update-idle > div { width:100%; }
.communication-timeline-slide .nova-update-idle strong,
.communication-timeline-slide .nova-update-heading strong { display:block; color:#0e7490; font-size:21px; letter-spacing:1px; }
.communication-timeline-slide .nova-update-idle b { display:block; margin-top:18px; color:#173b5b; font-size:21px; letter-spacing:.6px; }
.communication-timeline-slide .nova-update-idle p { margin-top:15px; color:#526c7b; font-size:20px; }
.nova-analysis-progress { display:flex; gap:13px; margin-top:17px; }
.nova-analysis-progress i { width:16px; height:16px; border:2px solid #8daab8; border-radius:50%; background:transparent; transition:background .28s ease,border-color .28s ease,box-shadow .28s ease; }
.nova-analysis-progress i.is-complete { border-color:#19b8b3; background:#19b8b3; box-shadow:0 0 10px rgba(25,184,179,.45); }

.communication-timeline-slide .nova-update-complete { grid-template-columns:1.12fr .88fr; grid-template-areas:"head head" "evolution changed" "network reflection"; gap:11px 20px; }
.communication-timeline-slide .nova-update-heading b { font-size:21px; }
.communication-timeline-slide .nova-update-heading em { font-size:19px; }
.communication-timeline-slide .mission-insight > small { font-size:14px; }
.communication-timeline-slide .device-evolution-summary { font-size:18px; }
.communication-timeline-slide .evolution-keywords b { font-size:17px; }
.communication-timeline-slide .network-update strong { font-size:20px; }
.communication-timeline-slide .network-update span { font-size:13px; }
.reflection-hook { grid-area:reflection; align-self:center; }
.reflection-hook > strong { display:block; margin-bottom:5px; color:#0e7490; font-size:28px; letter-spacing:.4px; }
.communication-timeline-slide .reflection-hook .transition-question { margin:0; color:#071f3d; font-size:25px; line-height:1.12; text-align:left; }

@media (prefers-reduced-motion:reduce) {
    .nova-analysis-progress i,
    .communication-timeline-slide .drop-zone.correct::after { transition:none!important; }
}

/* Page 3 final overrides: identical NOVA construction + 2× game type. */
.communication-timeline-slide .nova-classroom-core .page3-nova-core {
    position:absolute;
    left:50%;
    top:50%;
    translate:-50% -50%;
}
.reveal .communication-timeline-slide .timeline-items .timeline-card-text .translation-trigger { font-size:42px; line-height:1; }
.reveal .communication-timeline-slide .timeline-items .timeline-card-text .translation { margin-top:7px; font-size:34px; line-height:1; }
.reveal .communication-timeline-slide .timeline-track .year { font-size:42px; line-height:1; }
.reveal .communication-timeline-slide .timeline-track .drop-label { margin-top:10px; font-size:30px; line-height:1; }
.reveal .communication-timeline-slide .drop-zone .timeline-card-text .translation-trigger { font-size:34px; }
.reveal .communication-timeline-slide .drop-zone .timeline-card-text .translation { font-size:30px; }
.reveal .communication-timeline-slide .activity-control-bar .activity-progress-label { font-size:34px; line-height:1; }
.reveal .communication-timeline-slide .activity-control-bar .activity-score { min-width:92px; font-size:42px; line-height:1; }
.reveal .communication-timeline-slide .activity-control-bar #resetTimeline { padding:8px 18px; font-size:32px; line-height:1; }
.reveal .communication-timeline-slide .activity-progress-dots i { width:16px; height:16px; }

/* Page 3 final specificity guards (placed after all legacy slide rules). */
.reveal .slides section.communication-timeline-slide { padding:22px 64px; grid-template-rows:72px auto auto minmax(242px,1fr); row-gap:10px; }
.communication-timeline-slide header.mission-header { height:72px; min-height:0; padding:0 0 12px; }
.communication-timeline-slide .mission-badge { min-height:40px; padding:0 19px; font-size:21px; }
.communication-timeline-slide .stage-badge { min-height:40px; padding:0 18px; font-size:19px; }
.communication-timeline-slide .mission-score { min-width:184px; padding:8px 16px; }
.communication-timeline-slide .mission-score > span { font-size:27px; }
.communication-timeline-slide .mission-score small { font-size:14px; }
.reveal .communication-timeline-slide .communication-title { margin:0 0 3px; font-size:47px; }
.reveal .communication-timeline-slide .timeline-challenge-prompt { font-size:25px; }
.reveal .communication-timeline-slide .timeline-instruction { margin-top:5px; font-size:19px; }
.communication-timeline-slide .timeline-game { margin:0; }
.communication-timeline-slide .timeline-items { gap:20px; margin-bottom:12px; }
.communication-timeline-slide .timeline-items .timeline-card { grid-template-columns:82px minmax(0,1fr); min-height:112px; padding:10px 18px; gap:14px; }
.communication-timeline-slide .communication-device-image { width:76px; height:76px; }
.communication-timeline-slide .timeline-items .timeline-card-text .translation-trigger { font-size:21px; }
.communication-timeline-slide .timeline-items .timeline-card-text .translation { display:block; margin-top:6px; color:#0e7490; font-size:17px; line-height:1.1; opacity:1; }
.communication-timeline-slide .timeline-track { gap:20px; padding-top:22px; }
.communication-timeline-slide .drop-zone { min-height:132px; padding:27px 12px 9px; }
.communication-timeline-slide .year { font-size:21px; }
.communication-timeline-slide .drop-label { font-size:15px; }
.communication-timeline-slide .drop-zone .timeline-card { grid-template-columns:54px minmax(0,1fr); min-height:82px; padding:6px 10px; }
.communication-timeline-slide .drop-zone .communication-device-image { width:51px; height:51px; }
.communication-timeline-slide .drop-zone .timeline-card-text .translation-trigger { font-size:17px; }
.communication-timeline-slide .drop-zone .timeline-card-text .translation { font-size:15px; }
.communication-timeline-slide .activity-control-bar { min-height:48px; margin-top:10px; padding:7px 14px; }
.communication-timeline-slide .activity-progress-label { font-size:17px; }
.communication-timeline-slide .activity-score { font-size:21px; }
.communication-timeline-slide #resetTimeline { font-size:16px; }
.communication-timeline-slide .nova-mission-update { min-height:0; height:auto; margin:0; padding:17px 22px; border-radius:18px; }
.communication-timeline-slide .nova-update-idle { justify-content:flex-start; min-height:100%; padding-left:10px; }
.communication-timeline-slide .nova-update-idle strong,
.communication-timeline-slide .nova-update-heading strong { font-size:18px; }
.communication-timeline-slide .nova-update-idle p { margin-top:13px; font-size:21px; }
.communication-timeline-slide .nova-update-complete { grid-template-columns:1fr 1fr; grid-template-areas:"head head" "evolution changed" "network question"; gap:10px 18px; height:100%; }
.communication-timeline-slide .nova-update-heading { grid-area:head; }
.communication-timeline-slide .nova-update-heading b { font-size:19px; }
.communication-timeline-slide .nova-update-heading em { font-size:17px; }
.communication-timeline-slide .device-evolution-summary { justify-content:flex-start; gap:7px; font-size:15px; white-space:normal; }
.communication-timeline-slide .evolution-keywords b { padding:7px 10px; font-size:14px; }
.communication-timeline-slide .network-update { grid-area:network; display:block; padding:8px 12px; }
.communication-timeline-slide .network-update > small { font-size:13px; }
.communication-timeline-slide .network-update strong { display:flex; align-items:center; gap:10px; font-size:18px; }
.communication-timeline-slide .transition-question { grid-area:question; align-self:center; margin:0; font-size:25px; line-height:1.12; text-align:left; }

/* 1. 缩短右上角 BEACONS ACTIVE 状态框 */
#page17Mission02Gateway .p17r-status{
    min-width: 215px !important;
    width: 215px !important;
    padding: 8px 12px !important;
    align-self: center !important;
}

/* 2. 让顶部标题与分界线彻底分离 */
#page17Mission02Gateway .p17r-top{
    position: relative !important;
    border-bottom: none !important;
    padding-bottom: 14px !important;
}

#page17Mission02Gateway .p17r-top::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(184,126,255,.18),
        rgba(184,126,255,.55),
        rgba(83,220,255,.30)
    );
}

/* =========================================================
   PAGE JUMP
========================================================= */

.page-jump-panel{

    position:fixed;

    right:26px;
    bottom:88px;

    z-index:9999;

    display:flex;

    align-items:center;

    gap:8px;

    padding:10px 12px;

    border:
        1px solid
        rgba(112,186,255,.45);

    border-radius:12px;

    background:
        rgba(5,24,57,.92);

    box-shadow:
        0 0 18px
        rgba(37,127,255,.18);

    opacity:0;

    visibility:hidden;

    transform:
        translateY(8px);

    transition:
        .2s ease;

}


.page-jump-panel.is-open{

    opacity:1;

    visibility:visible;

    transform:
        translateY(0);

}


.page-jump-panel span{

    color:#73E9FF;

    font-size:12px;

    font-weight:900;

    letter-spacing:1px;

}


.page-jump-panel input{

    width:60px;

    box-sizing:border-box;

    padding:6px 7px;

    border:
        1px solid
        rgba(100,205,255,.45);

    border-radius:7px;

    outline:none;

    color:white;

    background:
        rgba(8,34,72,.92);

    font-family:inherit;

    font-size:14px;

    font-weight:800;

    text-align:center;

}


.page-jump-panel button{

    border:
        1px solid
        rgba(82,221,255,.62);

    border-radius:7px;

    padding:
        6px 9px;

    color:white;

    background:
        rgba(27,126,191,.72);

    font-family:inherit;

    font-size:12px;

    font-weight:900;

    cursor:pointer;

}
/* =========================================================
   MISSION 02 · VIEWPORT-WIDE CITY BACKGROUND
   Page 17 / 18 only.
   This layer lives on .reveal, OUTSIDE the scaled 1600×900 slides,
   so it can cover the complete browser viewport without white side bars.
========================================================= */
.reveal{
    position:relative;
    overflow:hidden;
}

.reveal .m02-viewport-fx{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    transition:opacity .28s ease;
    background:#030c20;
}

.reveal .m02-viewport-fx.is-active{
    opacity:1;
    visibility:visible;
}

.reveal .m02-viewport-fx::before{
    content:"";
    position:absolute;
    inset:-2%;
    background:
        linear-gradient(
            115deg,
            rgba(4,15,32,.92) 0%,
            rgba(22,20,65,.70) 48%,
            rgba(4,15,32,.76) 100%
        ),
        url("../assets/images/cover-bg.jpg") center center / cover no-repeat;
    filter:saturate(.98) brightness(.92);
    transform:scale(1.03);
}

.reveal .m02-viewport-fx::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 50% 44%,transparent 18%,rgba(0,0,0,.18) 68%,rgba(0,0,0,.34) 100%),
        radial-gradient(circle at 78% 18%,rgba(113,86,255,.13),transparent 28%),
        radial-gradient(circle at 16% 76%,rgba(40,192,255,.09),transparent 29%);
}

/* Page-1/Page-2-like floating glow fields */
.reveal .m02-vp-glow{
    position:absolute;
    z-index:2;
    border-radius:50%;
    pointer-events:none;
    background:radial-gradient(
        circle at center,
        rgba(74,206,255,.20) 0%,
        rgba(91,95,255,.10) 34%,
        rgba(18,92,189,.035) 55%,
        transparent 72%
    );
    animation:m02ViewportGlowFloat 10s ease-in-out infinite;
}
.reveal .m02-vp-glow.g1{
    width:620px;height:620px;
    right:-170px;top:-160px;
}
.reveal .m02-vp-glow.g2{
    width:500px;height:500px;
    left:-240px;bottom:-230px;
    animation-delay:-4s;
}

.reveal .m02-vp-particles{
    position:absolute;
    inset:0;
    z-index:3;
    overflow:hidden;
    pointer-events:none;
}
.reveal .m02-vp-particle{
    position:absolute;
    display:block;
    border-radius:50%;
    background:#AFA7FF;
    opacity:.35;
    box-shadow:0 0 8px rgba(125,211,252,.8),0 0 18px rgba(158,105,255,.38);
    animation:m02ViewportParticleRise linear infinite;
}

/* Keep actual slides and course navigation above viewport background. */
.reveal > .slides{
    position:relative;
    z-index:2;
}
.course-nav,
.page-jump-panel{
    z-index:9999!important;
}

@keyframes m02ViewportGlowFloat{
    0%,100%{transform:translate(0,0) scale(1)}
    50%{transform:translate(-20px,20px) scale(1.08)}
}
@keyframes m02ViewportParticleRise{
    from{transform:translateY(70px) scale(.72);opacity:0}
    15%{opacity:.48}
    78%{opacity:.28}
    to{transform:translateY(-105vh) scale(1.28);opacity:0}
}
@media (prefers-reduced-motion:reduce){
    .reveal .m02-vp-glow,
    .reveal .m02-vp-particle{animation:none!important}
}

/* =========================================================
   MISSION 01 · UNIFIED STAGE COMPLETION OVERLAY
========================================================= */
.mission-stage-transition {
    --stage-transition-fade-in:350ms;
    --stage-transition-fade-out:450ms;
    left:50%;
    bottom:92px;
    grid-template-columns:156px minmax(0,1fr);
    gap:24px;
    width:min(690px,calc(100vw - 210px));
    min-height:214px;
    padding:22px 30px;
    border:1px solid rgba(70,227,242,.50);
    border-radius:18px;
    background:linear-gradient(180deg,rgba(7,25,55,.96),rgba(4,17,43,.96));
    box-shadow:0 0 28px rgba(70,227,242,.16),0 24px 58px rgba(0,5,20,.42),inset 0 0 34px rgba(38,184,223,.07);
    color:#f7fbff;
    opacity:0;
    pointer-events:none;
    transform:translate(-50%,0) scale(.96);
    visibility:hidden;
}
.mission-stage-transition.is-visible {
    opacity:1;
    visibility:visible;
    transform:translate(-50%,0) scale(1);
}
.mission-stage-transition.is-full {
    animation:mission-stage-transition-in var(--stage-transition-fade-in) ease-out both;
}
.mission-stage-transition.is-fading {
    opacity:0;
    transform:translate(-50%,0) scale(.98);
    transition:opacity var(--stage-transition-fade-out) ease,transform var(--stage-transition-fade-out) ease;
}
.mission-stage-transition__core {
    position:relative;
    width:156px;
    height:174px;
    overflow:visible;
    border-radius:0;
    background:none;
    box-shadow:none;
}
.mission-stage-transition__core > .page3-nova-core {
    position:absolute;
    left:50%;
    top:50%;
    width:286px;
    height:286px;
    min-height:286px;
    flex:0 0 286px;
    translate:-50% -50%;
    transform:scale(.56);
    transform-origin:center;
}
.mission-stage-transition__core .nova-ball {
    position:relative;
    z-index:3;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:148px;
    height:148px;
    border:2px solid #54e9ff;
    border-radius:50%;
    color:#fff;
    background:radial-gradient(circle at 42% 35%,#7ff6ff 0 2%,#1bcbf5 3%,#0757be 22%,#041936 62%,#010817 100%);
    box-shadow:0 0 20px #35eaff,0 0 55px rgba(30,200,255,.78),0 0 110px rgba(30,94,255,.40),inset 0 0 30px rgba(80,239,255,.35);
    animation:novaBreathe 4.8s ease-in-out infinite;
}
.mission-stage-transition__core .nova-ball::before { content:""; position:absolute; inset:9px; border:1px solid rgba(122,247,255,.42); border-radius:50%; box-shadow:inset 0 0 14px rgba(66,225,255,.24); }
.mission-stage-transition__core .nova-ball strong { font-size:31px; }
.mission-stage-transition__core .nova-ball span { color:#4ef3ff; font-size:15px; font-weight:800; }
.mission-stage-transition__core .nova-ball em { color:#7ff7ff; font-size:14px; font-style:normal; }
.mission-stage-transition__core .nova-orbit { position:absolute; z-index:2; border:1px solid rgba(81,233,255,.58); border-radius:50%; box-shadow:0 0 13px rgba(28,210,255,.54),inset 0 0 13px rgba(28,210,255,.12); }
.mission-stage-transition__core .nova-orbit i { position:absolute; top:50%; left:-4px; width:9px; height:9px; border-radius:50%; background:#b8fbff; box-shadow:0 0 8px #fff,0 0 18px #23dfff; }
.mission-stage-transition__core .orbit-a { width:205px; height:205px; animation:novaOrbitA 15s linear infinite; }
.mission-stage-transition__core .orbit-b { width:246px; height:120px; animation:novaOrbitB 11s linear infinite reverse; }
.mission-stage-transition__core .orbit-c { width:178px; height:262px; transform:rotate(56deg); animation:novaOrbitC 19s linear infinite; }
.mission-stage-transition__core .nova-scan-ring { position:absolute; z-index:1; width:272px; height:272px; border:1px dashed rgba(66,226,255,.28); border-radius:50%; animation:novaScan 18s linear infinite; }
.mission-stage-transition__core .nova-data-arc { position:absolute; z-index:1; width:286px; height:286px; border:2px solid transparent; border-radius:50%; pointer-events:none; }
.mission-stage-transition__core .arc-a { border-top-color:rgba(66,230,255,.70); border-right-color:rgba(66,230,255,.18); transform:rotate(24deg); animation:novaScan 13s linear infinite reverse; }
.mission-stage-transition__core .arc-b { width:232px; height:232px; border-bottom-color:rgba(105,111,255,.68); border-left-color:rgba(66,230,255,.15); animation:novaScan 9s linear infinite; }
.mission-stage-transition__core .nova-beam {
    position:absolute;
    z-index:0;
    bottom:18px;
    width:176px;
    height:230px;
    background:linear-gradient(to top,rgba(48,220,255,.29),rgba(48,220,255,.035) 72%,transparent);
    clip-path:polygon(32% 100%,68% 100%,88% 0,12% 0);
    filter:blur(7px);
}
.mission-stage-transition__core .nova-platform {
    position:absolute;
    z-index:4;
    bottom:8px;
    width:232px;
    height:58px;
}
.mission-stage-transition__core .nova-platform i {
    position:absolute;
    left:50%;
    bottom:0;
    translate:-50% 0;
    border:2px solid rgba(68,231,255,.74);
    border-radius:50%;
    box-shadow:0 0 12px #20dfff,inset 0 0 15px rgba(30,204,255,.24);
}
.mission-stage-transition__core .nova-platform i:nth-child(1) { width:224px; height:39px; animation:platformWave 3.5s ease-in-out infinite; }
.mission-stage-transition__core .nova-platform i:nth-child(2) { width:174px; height:29px; bottom:10px; opacity:.72; animation:platformWave 3.5s .7s ease-in-out infinite; }
.mission-stage-transition__core .nova-platform i:nth-child(3) { width:116px; height:18px; bottom:21px; opacity:.60; animation:platformWave 3.5s 1.4s ease-in-out infinite; }
.mission-stage-transition__copy {
    min-width:0;
    text-align:left;
}
.mission-stage-transition__task {
    display:block;
    margin-bottom:5px;
    color:#2ee0c4;
    font-size:15px;
    font-weight:900;
    letter-spacing:1.2px;
    text-shadow:0 0 12px rgba(46,224,196,.32);
}
.mission-stage-transition__beacon {
    display:block;
    color:#8beef6;
    font-size:13px;
    line-height:1.2;
    letter-spacing:.8px;
}
.mission-stage-transition__complete {
    display:block;
    margin-top:8px;
    color:#f7fbff;
    font-size:28px;
    line-height:1.08;
    text-shadow:0 0 16px rgba(247,251,255,.18);
}
.mission-stage-transition__next {
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:baseline;
    column-gap:13px;
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid rgba(70,227,242,.24);
}
.mission-stage-transition__next em {
    grid-row:1 / span 3;
    align-self:center;
    color:#46e3f2;
    font-size:12px;
    font-style:normal;
    font-weight:900;
    letter-spacing:1px;
    white-space:nowrap;
}
.mission-stage-transition__next h3,
.mission-stage-transition__next p,
.mission-stage-transition__next small { margin:0; }
.mission-stage-transition__next h3 { color:#f7fbff; font-size:20px; line-height:1.2; }
.mission-stage-transition__next h3 span:first-child { color:#46e3f2; }
.mission-stage-transition__next p { color:#8beef6; font-size:16px; line-height:1.35; }
.mission-stage-transition__next small { color:#d9eef5; font-size:15px; line-height:1.35; }
.mission-stage-transition.is-mission-complete .mission-stage-transition__complete {
    color:#2ee0c4;
    text-shadow:0 0 16px rgba(46,224,196,.34);
}
.mission-stage-transition.is-mission-complete .mission-stage-transition__next {
    grid-template-columns:1fr;
}
.mission-stage-transition.is-mission-complete .mission-stage-transition__next em {
    display:none;
}
@keyframes mission-stage-transition-in {
    from { opacity:0; transform:translate(-50%,0) scale(.96); }
    to { opacity:1; transform:translate(-50%,0) scale(1); }
}
@media (max-width:900px) {
    .mission-stage-transition {
        left:18px;
        right:96px;
        width:auto;
        min-height:190px;
        grid-template-columns:126px minmax(0,1fr);
        transform:scale(.96);
    }
    .mission-stage-transition.is-visible { transform:scale(1); }
    .mission-stage-transition.is-fading { transform:scale(.98); }
}
@media (prefers-reduced-motion:reduce) {
    .mission-stage-transition,
    .mission-stage-transition.is-full,
    .mission-stage-transition.is-fading {
        animation:none!important;
        transition:opacity .15s linear!important;
    }
}


/* =========================================================
   2026-08-23 · PAGE 2 FINAL PROFILE TEXT FIT
========================================================= */
.reveal .slides .digital-city-slide .tool-item:last-child > p {
    display: flex;
    min-width: 0;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    box-sizing: border-box;
    transform: translateY(-7px);
}
.reveal .slides .digital-city-slide .tool-item:last-child > p strong {
    display: block;
    line-height: 1.12;
}
.reveal .slides .digital-city-slide .tool-item:last-child > p small {
    display: block;
    margin-top: 5px;
    line-height: 1.18;
    white-space: normal;
    overflow: visible;
}