/* --- QUICK PRESETS CARDS & CARD DECK TUTORIAL FLOW --- */

.quick-presets-section {
    margin-bottom: 20px;
}

.quick-presets-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.quick-preset-card {
    background-color: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 16px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    position: relative;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), 
                border-color 0.2s ease, 
                box-shadow 0.25s ease;
    user-select: none;
}

.quick-preset-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary-color);
    box-shadow: 0 8px 20px var(--shadow-glow);
}

.quick-preset-card:active {
    transform: scale(0.97);
}

.quick-preset-card.active {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, rgba(255, 126, 103, 0.12), rgba(247, 208, 112, 0.04));
    box-shadow: 0 0 0 3px rgba(255, 126, 103, 0.25), 0 8px 20px var(--shadow-glow);
}

.quick-preset-card img {
    width: 68px;
    height: 68px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.quick-preset-card:hover img {
    transform: scale(1.08);
}

.quick-preset-title {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

.quick-preset-desc {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
    line-height: 1.3;
}

/* Advanced Presets Collapsible Accordion */
.advanced-presets-details {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px dashed var(--border-color);
    border-radius: 14px;
    padding: 12px 16px;
    margin-bottom: 20px;
    transition: border-color 0.2s ease;
}

.advanced-presets-details[open] {
    background-color: var(--bg-card);
    border-style: solid;
    border-color: rgba(255, 126, 103, 0.25);
}

.advanced-presets-summary {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    user-select: none;
}

.advanced-presets-summary:hover {
    color: var(--primary-color);
}

.advanced-presets-summary::-webkit-details-marker {
    display: none;
}

.accordion-arrow {
    font-size: 14px;
    transition: transform 0.2s ease;
}

.advanced-presets-details[open] .accordion-arrow {
    transform: rotate(180deg);
}

/* --- MISE EN PLACE (Duolingo-style chip bank) --- */

.mise-board-card {
    gap: clamp(10px, 1.2vh, 14px) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    /* Same fixed frame as lesson/quiz cards */
    width: 100%;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0;
    margin-block: 0 !important;
    padding: clamp(16px, 1.8vw, 24px) !important;
    box-shadow: none !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.mise-board-title {
    font-size: clamp(22px, 1.8vw, 26px) !important;
    font-weight: 800 !important;
    flex-shrink: 0;
    margin-bottom: 8px !important;
}

.mise-board-hint {
    display: none !important;
}
    margin: 0 0 2px 0;
    font-size: clamp(12px, 0.95vw, 13px);
    color: var(--text-secondary);
    line-height: 1.45;
    flex-shrink: 0;
}

.mise-board {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(12px, 1.4vw, 18px);
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
    align-items: stretch;
}

.mise-panel {
    background: rgba(255, 255, 255, 0.03);
    border: 2px dashed var(--border-color);
    border-radius: clamp(14px, 1.2vw, 18px);
    padding: clamp(14px, 1.3vw, 18px);
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1vh, 12px);
    min-height: 0;
    height: 100%;
    max-height: none;
    animation: miseSlideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.mise-panel:nth-child(2) {
    animation-delay: 0.1s;
}

@keyframes miseSlideUpFade {
    0% {
        opacity: 0;
        transform: translateY(16px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.mise-panel-ready {
    border-style: solid;
    border-color: rgba(255, 126, 103, 0.22);
    background: rgba(255, 126, 103, 0.04);
    transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

/* Feedback lives on the panel surface, not the chip */
.mise-panel-ready.has-chips {
    border-color: rgba(255, 126, 103, 0.4);
    background: rgba(255, 126, 103, 0.1);
}

.mise-board.is-complete .mise-panel-ready {
    border-color: rgba(255, 126, 103, 0.55);
    background: rgba(255, 126, 103, 0.14);
    box-shadow: none;
}

.theme-light .mise-panel-ready {
    background: rgba(255, 126, 103, 0.05);
}

.theme-light .mise-panel-ready.has-chips {
    background: rgba(255, 126, 103, 0.1);
}

.mise-panel-title {
    font-size: clamp(11px, 0.9vw, 13px);
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.mise-chip-bank {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(8px, 0.85vw, 11px);
    align-content: flex-start;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding: 2px 2px 10px;
    box-sizing: border-box;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.mise-chip-bank::-webkit-scrollbar {
    display: none;
}

.mise-chip {
    appearance: none;
    border: 1px solid var(--border-color);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.14);
    background: var(--bg-card);
    color: var(--text-primary);
    border-radius: clamp(12px, 1vw, 15px);
    padding: clamp(8px, 0.7vw, 11px) clamp(10px, 0.95vw, 13px);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: clamp(12px, 0.9vw, 14px);
    font-weight: 700;
    line-height: 1.2;
    transform: translate3d(0, 0, 0);
    transition: transform 0.12s cubic-bezier(0.2, 0.95, 0.38, 1), border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
    user-select: none;
    max-width: 100%;
    -webkit-font-smoothing: antialiased;
}

.theme-dark .mise-chip {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 3px 0 rgba(255, 255, 255, 0.08);
}

.mise-chip:hover:not(.mise-chip-flying):not(.mise-chip-press):not(.mise-chip-moving) {
    border-color: rgba(255, 126, 103, 0.5);
    box-shadow: 0 3px 0 rgba(255, 126, 103, 0.45);
    background: rgba(255, 126, 103, 0.04);
    color: var(--text-primary);
}

.theme-dark .mise-chip:hover:not(.mise-chip-flying):not(.mise-chip-press):not(.mise-chip-moving) {
    border-color: var(--primary-color);
    box-shadow: 0 3px 0 rgba(255, 126, 103, 0.55);
    background: rgba(255, 126, 103, 0.08);
}

/* Tactile Button Press Feedback: translateY without layout shift */
.mise-chip:active:not(.mise-chip-flying),
.mise-chip.mise-chip-press:not(.mise-chip-flying) {
    transform: translateY(3px) translate3d(0, 0, 0) !important;
    box-shadow: 0 0 0 rgba(255, 126, 103, 0.6) !important;
    border-color: rgba(255, 126, 103, 0.6) !important;
    transition: transform 0.08s ease, box-shadow 0.08s ease !important;
}

/* Ready feedback is on the panel background only — chips stay neutral */

.mise-chip-emoji {
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    transition: filter 0.35s ease, opacity 0.35s ease;
}

.mise-chip-label {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: clamp(5.5em, 12vw, 10em);
    transition: color 0.35s ease;
}

.mise-chip-weight {
    font-size: clamp(11px, 0.9vw, 13px);
    font-weight: 800;
    color: var(--primary-color);
    margin-left: 2px;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    transition: color 0.35s ease;
}

/* --- Duolingo-style Grayed-out Checked State for Prepared Ingredients --- */
.mise-panel-ready .mise-chip,
.mise-chip.is-ready {
    background: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 3px 0 #b0c0d1 !important;
    color: #64748b !important;
    transition: transform 0.28s cubic-bezier(0.2, 0.95, 0.38, 1), background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease !important;
}

:root:not(.theme-dark) .mise-panel-ready .mise-chip,
.theme-light .mise-panel-ready .mise-chip {
    background: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 3px 0 #b0c0d1 !important;
    color: #64748b !important;
    transition: transform 0.28s cubic-bezier(0.2, 0.95, 0.38, 1), background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease !important;
}

.theme-dark .mise-panel-ready .mise-chip,
.theme-dark .mise-chip.is-ready {
    background: #272c36 !important;
    border-color: #383f4d !important;
    box-shadow: 0 3px 0 #2b323d !important;
    color: #8b949e !important;
    transition: transform 0.28s cubic-bezier(0.2, 0.95, 0.38, 1), background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease !important;
}

.mise-panel-ready .mise-chip .mise-chip-weight,
.mise-chip.is-ready .mise-chip-weight {
    color: #64748b !important;
    font-weight: 700;
}

.mise-panel-ready .mise-chip .mise-chip-emoji,
.mise-chip.is-ready .mise-chip-emoji {
    filter: grayscale(80%) opacity(0.65);
    transition: filter 0.25s ease;
}

/* Standard app tactile press state for ready chips */
.mise-panel-ready .mise-chip:active:not(.mise-chip-flying),
.mise-panel-ready .mise-chip.mise-chip-press:not(.mise-chip-flying),
.mise-chip.is-ready:active:not(.mise-chip-flying),
.mise-chip.is-ready.mise-chip-press:not(.mise-chip-flying) {
    transform: translateY(3px) translate3d(0, 0, 0) !important;
    box-shadow: 0 0 0 #94a3b8 !important;
    border-color: #94a3b8 !important;
    transition: transform 0.08s ease, box-shadow 0.08s ease !important;
}

.mise-chip,
.mise-chip:focus,
.mise-chip:focus-visible,
.mise-chip:active {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Fixed-layer flight: GPU transform only, no CSS transition fight */
.mise-chip.mise-chip-flying {
    z-index: 10000 !important;
    pointer-events: none !important;
    margin: 0 !important;
    white-space: nowrap !important;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    /* Keep solid 3D clay shadow intact during flight so shadow never vanishes or pops */
    box-shadow: var(--shadow-card) !important;
}

.mise-chip.mise-chip-flying.is-ready {
    box-shadow: var(--shadow-card) !important;
}

.theme-dark .mise-chip.mise-chip-flying,
.theme-dark .mise-chip.mise-chip-flying.is-ready {
    border-color: #383f4d !important;
    box-shadow: var(--shadow-card) !important;
}

.mise-chip.mise-chip-moving:not(.mise-chip-flying) {
    pointer-events: none;
}

/* Invisible layout reservation while the real chip flies */
.mise-chip-slot {
    flex: 0 0 auto;
    visibility: hidden;
    pointer-events: none;
    border-radius: 14px;
    flex-shrink: 0;
}

/* Prep step: hide top progress (counter lives on mise card) */
.tutorial-progress.is-mise-phase {
    display: none !important;
}

/* Prep stage: same shell/stage as lesson steps so white card size is stable */
.tutorial-shell:has(.mise-board-card) .tutorial-stage {
    flex: 1 1 auto;
    min-height: 0;
}

.tutorial-shell:has(.mise-board-card) .tutorial-card-deck-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    align-items: stretch;
}

.tutorial-shell:has(.mise-board-card) .tutorial-footer-actions {
    margin-top: clamp(6px, 0.8vh, 10px);
}

.mise-empty {
    width: 100%;
    font-size: clamp(12px, 0.95vw, 13px);
    color: var(--text-secondary);
    padding: clamp(20px, 3vh, 36px) 12px;
    text-align: center;
    line-height: 1.5;
    align-self: center;
    margin: auto 0;
}

.tutorial-footer-actions.is-mise .tutorial-nav-primary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: var(--shadow-card) !important;
    filter: grayscale(0.25);
}

:root:not(.theme-dark) .mise-panel,
.theme-light .mise-panel {
    background: rgba(0, 0, 0, 0.02);
}

:root:not(.theme-dark) .mise-chip,
.theme-light .mise-chip {
    background: #ffffff;
}



.mise-board {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(12px, 1.4vw, 18px);
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
    align-items: stretch;
}

/* Phone only media query */
@media (max-width: 520px) {
    .mise-board {
        display: flex !important;
        flex-direction: column-reverse !important;
        min-height: 0;
        max-height: none;
        gap: 12px;
    }

    .mise-panel {
        min-height: 60px;
        padding: 12px;
        height: auto;
        flex: 0 1 auto;
    }
    
    .mise-empty {
        display: none !important;
    }

    .mise-board-card {
        height: auto !important;
        max-height: none !important;
        margin-block: 0;
    }

    .tutorial-shell:has(.mise-board-card) {
        max-width: 100%;
        width: 100%;
        height: auto !important;
        max-height: none !important;
        overflow-y: visible;
    }
}

/* Large desktops: modest bump only, keep outer air */
@media (min-width: 1400px) {
    .mise-board {
        min-height: 0;
        max-height: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mise-chip.mise-chip-moving {
        transition: none !important;
    }
}

/* --- TUTORIAL SCHEME A: fluid shell + step cards --- */

.tutorial-shell {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 1.6vh, 20px);
    width: min(100%, 700px);
    max-width: min(700px, 100%);
    margin: 0 auto;
    /* Fixed lesson shell height so footer can pin */
    height: calc(100dvh - 220px);
    max-height: calc(100dvh - 220px);
    min-height: 0;
    padding-inline: clamp(4px, 1vw, 12px);
    box-sizing: border-box;
    overflow: hidden;
    will-change: transform, opacity;
    transform: translateZ(0); /* Force GPU compositing to prevent iOS flash */
}

@supports not (height: 100dvh) {
    .tutorial-shell {
        height: calc(100vh - 220px);
        max-height: calc(100vh - 220px);
    }
}

.tutorial-topbar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    min-height: 44px;
    padding-top: 4px;
    box-sizing: border-box;
    flex-shrink: 0;
    margin-bottom: 12px;
}

.btn-icon-only {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, border-color 0.2s ease;
}

.btn-icon-only:hover {
    transform: translateY(-50%) scale(1.1) !important;
    border-color: var(--primary-color) !important;
}

.btn-icon-only:active {
    transform: translateY(-50%) scale(0.92) !important;
}

.tutorial-topbar .tutorial-segments {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}

.tutorial-topbar .btn {
    padding: 8px 14px;
    font-size: 13px;
    border-radius: 12px;
}

.tutorial-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-recipe-chip {
    font-weight: 700;
}

.tutorial-progress {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex-shrink: 0;
    padding: 2px 0 4px;
}

/* One row: segments grow · meta (count + phase) sits right */
.tutorial-progress-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.tutorial-segments {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: 5px;
}

.tutorial-seg {
    flex: 1 1 0;
    min-width: 6px;
    height: 6px;
    border: none;
    padding: 0;
    margin: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.15s ease;
    appearance: none;
    -webkit-appearance: none;
}

.theme-dark .tutorial-seg {
    background: rgba(255, 255, 255, 0.12);
}

.tutorial-seg:hover {
    transform: scaleY(1.35);
}

.tutorial-seg:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Done: theme coral (no green, no glow) */
.tutorial-seg.is-done:not(.is-current) {
    background: rgba(255, 126, 103, 0.55);
}

/* Current: brand coral, slightly taller — wins over is-done */
.tutorial-seg.is-current {
    background: var(--primary-color);
    transform: scaleY(1.25);
}

.tutorial-seg.is-current:hover {
    transform: scaleY(1.4);
}

.tutorial-progress-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    min-width: 0;
}

.step-progress-count {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tutorial-progress-hint {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0;
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 7.5em;
}

.tutorial-progress-hint:empty {
    display: none;
}

.tutorial-progress-hint:not(:empty)::before {
    content: '·';
    margin-right: 6px;
    opacity: 0.45;
}

/* Legacy class hooks (if any leftover JS) */
.step-progress-badge {
    /* remapped to count style */
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    background: none;
    border: none;
    padding: 0;
}

.deck-dots-indicator {
    display: flex;
    align-items: center;
    gap: 5px;
}

.dot-step {
    /* kept for safety; unused in segmented UI */
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--border-color);
    border: none;
    padding: 0;
}

.tutorial-stage {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0; /* critical: stage shrinks, footer stays pinned */
    overflow: hidden;
    /* tight gap above footer — was too airy */
    padding-bottom: clamp(4px, 0.6vh, 8px);
    box-sizing: border-box;
}

.tutorial-card-deck-wrapper {
    position: relative;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    /* Stretch so every phase (mise / teach / quiz) shares one white-card frame */
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
    height: 100%;
}

.deck-step-card {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 24px;
    padding: 14px 16px 16px;
    /* Panels are not pressable — no clay shadow (only interactive buttons get depth) */
    box-shadow: none !important;
    filter: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}

/* ===== Lesson card: fixed stage frame (same size teach ↔ quiz) ===== */
.deck-step-card.lesson-card {
    gap: 0;
    padding: 0;
    border-radius: 24px;
    overflow: hidden;
    width: 100%;
    height: 100%;
    max-height: 100%;
    align-self: stretch;
    box-shadow: none !important;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background-clip: padding-box;
}

.lesson-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-sizing: border-box;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.lesson-scroll::-webkit-scrollbar {
    display: none;
}

/* Prefer zero scroll: fit content in stage height */
.lesson-scroll.lesson-fit {
    overflow-y: auto; /* safety net: short viewports scroll instead of hard-clipping */
    overflow-x: hidden;
    justify-content: flex-start;
    gap: 10px;
    padding: 12px 16px 14px;
}

.lesson-phase-tag {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(120, 120, 140, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.lesson-phase-tag.is-quiz {
    color: var(--primary-color);
    background: rgba(255, 126, 103, 0.1);
    border-color: rgba(255, 126, 103, 0.25);
}

/* Teach page: Duolingo-style lesson — square hero is the star, short copy below */
.deck-step-card.lesson-card-teach {
    background: var(--bg-card);
}

:root:not(.theme-dark) .deck-step-card.lesson-card-teach,
.theme-light .deck-step-card.lesson-card-teach {
    background: #ffffff;
}

/* Must beat .lesson-scroll.lesson-fit { justify-content: flex-start } */
.lesson-scroll.lesson-fit.lesson-teach-layout {
    position: relative;
    height: 100%;
    min-height: 100%;
    flex: 1 1 auto;
    gap: 32px;
    padding: 32px 24px 10vh; /* Bottom padding pushes the centered content slightly upwards for optical balance */
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
}

/* fallback if classes differ */
.lesson-teach-layout {
    position: relative;
    align-items: center;
    text-align: center;
}

.lesson-teach-hero {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 100%;
    padding: 0;
    background: none;
}

/* Square media — scaled up and elevated */
.lesson-card-teach .lesson-media {
    width: min(100%, 420px);
    max-width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 240px;
    max-height: min(45vh, 420px);
    margin: 0 auto;
    border-radius: 22px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08); /* display only, not a pressable control */
}

.theme-dark .lesson-card-teach .lesson-media {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}

.lesson-card-teach .lesson-media.has-kenburns .lesson-media-el {
    animation-duration: 10s;
}

.lesson-copy-duo {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    flex: 0 0 auto;
}

.lesson-title-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.lesson-card-teach .lesson-title {
    display: block;
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.4px;
    text-align: center;
    line-height: 1.2;
}

.lesson-title-text {
    min-width: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}

.lesson-card-teach .lesson-meters {
    justify-content: center;
    margin: 0;
    flex-shrink: 0;
}

/* Soft, compact meters (game chips, not form badges) */
.lesson-card-teach .lesson-meter {
    padding: 5px 10px;
    border-radius: 999px;
    box-shadow: none;
    gap: 4px;
}

.lesson-card-teach .lesson-meter-value {
    font-size: 13px;
    font-weight: 700;
}

.lesson-card-teach .lesson-meter-icon {
    font-size: 12px;
}

.lesson-section {
    min-width: 0;
    width: 100%;
}

.lesson-section-title {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--text-secondary);
    text-transform: uppercase;
    text-align: center;
}

/* How-to: primary “speech” under the illustration */
.lesson-howto-main {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -0.15px;
    word-break: normal;
    overflow-wrap: break-word;
    white-space: normal;
    color: var(--text-primary);
    text-align: center;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    max-width: 32em;
    margin-inline: auto;
}

/* Ingredients: same visual language as mise chips (emoji + name + coral g) */
.lesson-ing-chips {
    list-style: none;
    margin: 12px 0 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-height: 8.5em;
    overflow: hidden;
}

.lesson-ing-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 14px;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    background: rgba(0, 0, 0, 0.04);
    border: none;
    box-shadow: none; /* labels only — borderless capsule */
    color: var(--text-primary);
}

.theme-dark .lesson-ing-chip {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    box-shadow: none;
}

.lesson-ing-chip-emoji {
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}

.lesson-ing-chip-name {
    font-weight: 700;
    max-width: 8em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lesson-ing-chip-wt {
    font-family: var(--font-heading);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--primary-color);
    font-size: 12.5px;
    margin-left: 1px;
}

.lesson-card-teach .lesson-copy {
    gap: 10px;
}

/* Quiz: left art + right question, options tucked under as one block */
.lesson-scroll.lesson-fit.lesson-quiz-layout {
    position: relative;
    height: 100%;
    min-height: 100%;
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    gap: 0;
    padding: 36px 24px 36px;
    box-sizing: border-box;
}

/* Head + options + feedback share one column */
.lesson-quiz-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* head → options roomy; feedback sits closer to options */
    gap: 36px;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    transform: translateY(-3%);
}

/* Image left · title + prompt right (vertically centered to thumb) */
.lesson-quiz-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 18px;
    min-width: 0;
    width: 100%;
    flex-shrink: 0;
    text-align: left;
    padding: 0 4px;
}

.lesson-quiz-thumb {
    width: 100px;
    height: 100px;
    border-radius: 20px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: none; /* display only */
    background: rgba(0, 0, 0, 0.03);
}

.lesson-quiz-thumb.is-emoji {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
}

.lesson-quiz-head-text {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    padding-top: 2px;
}

.lesson-card-quiz .lesson-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.35px;
    line-height: 1.25;
    margin: 0;
    text-align: left;
}

.lesson-card-quiz .lesson-quiz-prompt {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-secondary);
    text-align: left;
}

.lesson-card-quiz .quiz-options {
    margin-top: 0;
    flex: 0 0 auto;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    max-width: 100%;
}

.lesson-card-quiz .quiz-option {
    min-height: 50px;
    padding: 13px 18px;
    font-size: 15px;
    max-width: 100%;
    border-radius: 16px;
}

@media (max-width: 480px) {
    .lesson-quiz-thumb {
        width: 84px;
        height: 84px;
        border-radius: 16px;
    }

    .lesson-card-quiz .lesson-title {
        font-size: 19px;
    }

    .lesson-quiz-stack {
        max-width: 100%;
        gap: 28px;
        transform: none;
    }
}

.quiz-options.lesson-shake {
    animation: lessonShake 0.4s ease;
}

.lesson-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-shrink: 0;
}

/* Parameter meters under title — solid, readable (not image corner stickers) */
.lesson-meters {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    margin: 0;
}

.lesson-meter {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-family: var(--font-heading);
    line-height: 1.15;
    box-shadow: var(--shadow-card);
}

.lesson-meter-icon {
    font-size: 14px;
    line-height: 1;
    opacity: 0.9;
}

.lesson-meter-value {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: var(--text-primary);
}

.lesson-meter-time {
    background: rgba(247, 208, 112, 0.28);
    border-color: rgba(201, 162, 39, 0.35);
    color: #8a6a10;
}

.lesson-meter-time .lesson-meter-value {
    color: #6b5210;
}

.lesson-meter-temp {
    background: rgba(91, 141, 239, 0.16);
    border-color: rgba(91, 141, 239, 0.35);
    color: #3a5fad;
}

.lesson-meter-temp .lesson-meter-value {
    color: #2a4a9a;
}

.theme-dark .lesson-meter-time {
    background: rgba(247, 208, 112, 0.14);
    border-color: rgba(247, 208, 112, 0.28);
}

.theme-dark .lesson-meter-time .lesson-meter-value {
    color: #f0d78a;
}

.theme-dark .lesson-meter-temp {
    background: rgba(91, 141, 239, 0.14);
    border-color: rgba(91, 141, 239, 0.3);
}

.theme-dark .lesson-meter-temp .lesson-meter-value {
    color: #9bb8f5;
}

/* Media: square (matches Agnes step art) — not ultra-wide strips */
.lesson-media {
    position: relative;
    width: min(100%, 360px);
    max-width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 200px;
    max-height: min(42vh, 340px);
    margin-inline: auto;
    border-radius: 22px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: none; /* display only — depth reserved for pressable buttons */
    background: linear-gradient(145deg, rgba(255, 126, 103, 0.1), rgba(247, 208, 112, 0.08));
    display: flex;
    align-items: center;
    justify-content: center;
}

.lesson-media.has-enter {
    animation: lessonMediaEnter 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes lessonMediaEnter {
    from { opacity: 0; }
    to { opacity: 1; }
}

.lesson-media-el {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.lesson-media video.lesson-media-el {
    background: #1a1a1a;
}

/* Subtle motion on stills when no video/seq */
.lesson-media.has-kenburns .lesson-media-el {
    animation: lessonKenBurns 8s ease-in-out infinite alternate;
    transform-origin: center center;
    will-change: transform;
}

.lesson-media.is-paused.has-kenburns .lesson-media-el,
.lesson-media.is-success.has-kenburns .lesson-media-el {
    animation-play-state: paused;
}

@keyframes lessonKenBurns {
    from { transform: scale(1); }
    to { transform: scale(1.06); }
}

.lesson-media-poster-fallback {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lesson-media-image .lesson-media-emoji-fallback {
    display: none;
    font-size: 56px;
}

.lesson-media-image.is-fallback .lesson-media-emoji-fallback,
.lesson-media.is-fallback .step-visual-emoji {
    display: flex;
    font-size: 56px;
}

.lesson-seq-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.45s ease-in-out;
    pointer-events: none;
    z-index: 1;
}

.lesson-seq-frame.is-prev {
    opacity: 1;
    z-index: 2;
}

.lesson-seq-frame.is-active {
    opacity: 1;
    z-index: 3;
}

.lesson-media-fallback-only .step-visual-emoji {
    font-size: 56px;
}

.lesson-copy {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    align-items: stretch;
}

.lesson-title.step-card-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.4px;
    line-height: 1.25;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.lesson-title-emoji {
    font-size: 1.05em;
    line-height: 1;
}

.lesson-quiz-prompt {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: -0.1px;
}

/* Choice options — centered short bars (scheme A), not full-bleed form rows */
.quiz-options {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.quiz-option {
    appearance: none;
    width: 100%;
    max-width: min(420px, 100%);
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 14px;
    border: 2px solid rgba(0, 0, 0, 0.08);
    /* Tactile key: darker thick bottom edge, press travels 2px */
    border-bottom: 4px solid rgba(0, 0, 0, 0.16);
    background: #ffffff;
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    box-shadow: none;
    transition:
        transform 0.12s cubic-bezier(0.25, 0.8, 0.25, 1),
        border-color 0.15s ease,
        border-bottom-width 0.08s ease,
        background 0.15s ease,
        color 0.15s ease,
        opacity 0.15s ease;
}

.theme-dark .quiz-option {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    border-bottom-color: rgba(255, 255, 255, 0.18);
}

.quiz-option:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(255, 126, 103, 0.5);
    border-bottom-color: rgba(255, 126, 103, 0.45);
}

.theme-dark .quiz-option:hover:not(:disabled) {
    border-color: rgba(255, 126, 103, 0.55);
    border-bottom-color: rgba(255, 126, 103, 0.5);
}

.quiz-option:active:not(:disabled),
.quiz-option.step-check-press {
    transform: translateY(2px);
    border-bottom-width: 2px;
}

.quiz-option.is-selected:not(.is-correct):not(.is-wrong-flash) {
    border-color: rgba(255, 126, 103, 0.7);
    border-bottom-color: rgba(255, 126, 103, 0.7);
    color: var(--primary-color);
}

/*
 * Correct — visual only, brand-aligned (not Duo green):
 * soft coral wash + primary border. Reads as “selected right”
 * without introducing a second accent color.
 */
.quiz-option.is-correct {
    background: rgba(255, 126, 103, 0.12);
    border-color: var(--primary-color);
    border-width: 2px;
    color: var(--text-primary);
    box-shadow: 0 0 0 3px rgba(255, 126, 103, 0.12);
    min-height: 50px;
    padding: 12px 18px;
    pointer-events: none;
    cursor: default;
    transform: none;
    animation: quizCorrectIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.theme-dark .quiz-option.is-correct {
    background: rgba(255, 126, 103, 0.16);
    border-color: var(--primary-color);
    color: var(--text-primary);
    box-shadow: 0 0 0 3px rgba(255, 126, 103, 0.14);
}

.quiz-option.is-correct .quiz-option-label {
    white-space: normal;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--text-primary);
}

@keyframes quizCorrectIn {
    from {
        opacity: 0.85;
        transform: scale(0.985);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.quiz-option.is-dimmed {
    opacity: 0.32;
    box-shadow: none;
    border-color: rgba(0, 0, 0, 0.05);
    background: rgba(0, 0, 0, 0.02);
}

.theme-dark .quiz-option.is-dimmed {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}

.quiz-option.is-wrong-flash {
    animation: quizWrong 0.42s ease;
    border-color: rgba(255, 71, 87, 0.55);
    background: rgba(255, 71, 87, 0.08);
}

@keyframes quizWrong {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

.quiz-option:disabled {
    cursor: default;
}

.quiz-option-label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Soft pass — border tint only, still no panel shadow */
.deck-step-card.lesson-card.is-quiz-passed,
.deck-step-card.lesson-card.completed-step-card {
    border-color: rgba(255, 126, 103, 0.28);
    box-shadow: none;
}

:root:not(.theme-dark) .deck-step-card.lesson-card.is-quiz-passed,
:root:not(.theme-dark) .deck-step-card.lesson-card.completed-step-card,
.theme-light .deck-step-card.lesson-card.is-quiz-passed,
.theme-light .deck-step-card.lesson-card.completed-step-card {
    box-shadow: none;
}

/* Footnote-style ingredient line (scheme 1) — not colored pills */
.lesson-ing-line {
    margin: 0;
    max-width: min(480px, 100%);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--text-secondary);
    letter-spacing: -0.1px;
}

.lesson-ing-kicker {
    display: inline;
    font-weight: 700;
    color: var(--text-secondary);
    opacity: 0.85;
    margin-right: 0.35em;
}

.lesson-ing-kicker::after {
    content: ' ';
}

/* How-to: no grey bar — inline muted text or clamp + text link */
/* How-to: always max 2 lines, no expand UI, no footer fight */
.lesson-howto-inline {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.deck-step-card.lesson-card.is-checks-done {
    border-color: rgba(255, 126, 103, 0.35);
}

/* Done mark: soft pill, no checkmark glyph */
.deck-step-card.lesson-card .step-done-mark {
    display: none;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 126, 103, 0.12);
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 800;
}

.deck-step-card.lesson-card.completed-step-card .step-done-mark,
.deck-step-card.lesson-card.is-checks-done .step-done-mark {
    display: inline-flex;
}

@keyframes lessonShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

.deck-step-card.lesson-card.lesson-shake {
    animation: lessonShake 0.4s ease;
}

:root:not(.theme-dark) .deck-step-card.lesson-card,
.theme-light .deck-step-card.lesson-card,
:root:not(.theme-dark) .deck-step-card.mise-board-card,
.theme-light .deck-step-card.mise-board-card,
:root:not(.theme-dark) .deck-step-card,
.theme-light .deck-step-card,
:root:not(.theme-dark) .mise-board-card,
.theme-light .mise-board-card,
:root:not(.theme-dark) .celebration-card,
.theme-light .celebration-card {
    background: #ffffff;
    border: none !important;
    box-shadow: none !important;
}

.theme-dark .deck-step-card.lesson-card,
.theme-dark .deck-step-card.mise-board-card,
.theme-dark .deck-step-card,
.theme-dark .mise-board-card,
.theme-dark .celebration-card {
    background: #000000;
    border: none !important;
    box-shadow: none !important;
}

/* User preference: Hide top-right recipe chip button & progress meta text */
#btn-toggle-recipe-drawer,
.btn-recipe-chip,
.tutorial-progress-meta {
    display: none !important;
}

/* Pinned footer — close under the white card (not a big empty band) */
.tutorial-footer-actions {
    display: grid;
    grid-template-columns: 1fr 1.65fr;
    gap: 12px;
    flex-shrink: 0;
    position: relative;
    z-index: 6;
    margin: clamp(6px, 0.8vh, 10px) 0 0;
    padding: 2px 4px 14px;
    border-top: none;
    background: transparent;
    box-shadow: none;
}

:root:not(.theme-dark) .tutorial-footer-actions,
.theme-light .tutorial-footer-actions {
    background: transparent;
}

.theme-dark .tutorial-footer-actions {
    background: transparent;
}

.tutorial-footer-actions .tutorial-nav-primary {
    font-weight: 800;
    min-height: 52px;
    border-radius: 16px;
}

.tutorial-footer-actions .tutorial-nav-btn:not(.tutorial-nav-primary) {
    min-height: 52px;
    border-radius: 16px;
    box-shadow: none;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: transparent;
    font-weight: 700;
}

.tutorial-footer-actions .tutorial-nav-primary.step-check-press {
    transform: translateY(2px);
    border-bottom-width: 2px;
}

.tutorial-nav-primary:disabled {
    opacity: 1;
    cursor: not-allowed;
    transform: none !important;
    background: #e5e5ea !important;
    color: #8a8a96 !important;
    border-bottom-color: rgba(0, 0, 0, 0.10) !important;
    box-shadow: none !important;
    filter: none;
}

.deck-step-card.slide-in-next {
    animation: tutorialSlideNext 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.deck-step-card.slide-in-prev {
    animation: tutorialSlidePrev 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Smooth GPU-accelerated slide transitions between cards and phases */
@keyframes tutorialSlideNext {
    from { opacity: 0; transform: translate3d(24px, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes tutorialSlidePrev {
    from { opacity: 0; transform: translate3d(-24px, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.deck-step-card.completed-step-card {
    border-color: rgba(255, 126, 103, 0.28);
    box-shadow: none !important;
}

.step-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.step-number-tag {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 800;
    color: var(--primary-color);
    background-color: var(--primary-glow);
    padding: 4px 9px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.step-timer-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #c9a227;
    background-color: rgba(247, 208, 112, 0.14);
    border: 1px solid rgba(247, 208, 112, 0.35);
    padding: 4px 9px;
    border-radius: 999px;
}

/* Left larger image (near-square) + narrower right copy */
.step-card-main {
    display: grid;
    grid-template-columns: minmax(220px, 1.1fr) minmax(150px, 0.9fr);
    gap: 14px;
    align-items: start;
    min-height: 0;
    flex: 1;
    overflow: hidden;
}

.step-visual {
    width: 100%;
    /* Pull height down toward square: slightly taller than wide-strip look */
    aspect-ratio: 1 / 1;
    height: auto;
    min-height: 220px;
    max-height: min(280px, 38vh);
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(255, 126, 103, 0.12), rgba(247, 208, 112, 0.1));
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    align-self: start;
}

.step-visual-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.step-visual.is-fallback {
    min-height: 0;
    aspect-ratio: 1 / 1;
}

.step-visual-emoji {
    font-size: 40px;
    line-height: 1;
}

.step-card-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    overflow: auto;
}

.step-card-title {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--text-primary);
    letter-spacing: -0.3px;
    margin: 0;
}

.step-card-body {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
    /* Prefer one-screen: clamp long prose, still scrollable via copy column if needed */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}

.step-goal-box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(46, 213, 115, 0.08);
    border: 1px solid rgba(46, 213, 115, 0.28);
}

.step-goal-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--success-color, #2ed573);
    white-space: nowrap;
}

.step-goal-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.35;
}

.step-temp-chip {
    color: #5b8def;
    background-color: rgba(91, 141, 239, 0.12);
    border-color: rgba(91, 141, 239, 0.3);
}

.step-ingredients-highlight {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 8px 10px;
}

.step-ingredients-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
}

.step-ingredients-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ingredient-pill {
    background-color: var(--primary-glow);
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 126, 103, 0.25);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ingredient-pill strong {
    font-weight: 800;
    color: var(--primary-color);
}

.step-done-mark {
    display: none;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--success-color, #2ed573);
}

.deck-step-card.completed-step-card .step-done-mark {
    display: inline-flex;
}

/* (footer layout defined with lesson shell pin above) */

.tutorial-nav-btn {
    min-height: 44px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
}

.tutorial-nav-primary {
    /* bottom edge comes from .btn-primary */
}

.tutorial-nav-primary:hover {
    /* Duo hover brightens via .btn-primary filter — no lift */
    transform: none;
}

.tutorial-nav-primary:active {
    transform: translateY(2px);
    border-bottom-width: 2px;
}

.tutorial-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.tutorial-footer-actions.is-celebration {
    grid-template-columns: 1fr;
}

/* Duolingo-style celebration screen */
.celebration-card.duo-celebration {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    gap: 20px;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(255, 126, 103, 0.08) 0%, var(--bg-card) 40%);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
}

.duo-hero-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.duo-sunburst {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    margin-top: -75px;
    margin-left: -75px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(247, 208, 112, 0.35) 0deg 30deg, transparent 30deg 60deg, rgba(247, 208, 112, 0.35) 60deg 90deg, transparent 90deg 120deg, rgba(247, 208, 112, 0.35) 120deg 150deg, transparent 150deg 180deg, rgba(247, 208, 112, 0.35) 180deg 210deg, transparent 210deg 240deg, rgba(247, 208, 112, 0.35) 240deg 270deg, transparent 270deg 300deg, rgba(247, 208, 112, 0.35) 300deg 330deg, transparent 330deg 360deg);
    animation: duoSunburstRotate 14s linear infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes duoSunburstRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.duo-trophy-badge {
    font-size: 72px;
    line-height: 1;
    z-index: 2;
    filter: drop-shadow(0 10px 18px rgba(255, 126, 103, 0.35));
    animation: duoTrophyPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes duoTrophyPop {
    0% { transform: scale(0) rotate(-20deg); opacity: 0; }
    60% { transform: scale(1.25) rotate(10deg); opacity: 1; }
    80% { transform: scale(0.95) rotate(-4deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.duo-sparkle {
    position: absolute;
    font-size: 22px;
    z-index: 3;
    animation: duoSparkleFloat 2s ease-in-out infinite alternate;
}

.duo-sparkle-1 { top: -4px; left: -8px; animation-delay: 0.1s; }
.duo-sparkle-2 { top: -4px; right: -8px; animation-delay: 0.5s; }
.duo-sparkle-3 { bottom: 4px; right: -8px; animation-delay: 0.9s; }

@keyframes duoSparkleFloat {
    0% { transform: translateY(0) scale(0.9); }
    100% { transform: translateY(-8px) scale(1.15); }
}

.duo-title-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.duo-achievement-tag {
    font-size: 12px;
    font-weight: 700;
    color: #ff7e67;
    background: rgba(255, 126, 103, 0.12);
    border: 1px solid rgba(255, 126, 103, 0.3);
    padding: 4px 14px;
    border-radius: 20px;
    letter-spacing: 0.5px;
}

.duo-main-title {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 800;
    margin: 4px 0 0 0;
    background: linear-gradient(135deg, #ff7e67 0%, #f77062 40%, #f7d070 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.duo-sub-title {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    max-width: 380px;
    line-height: 1.5;
}

.duo-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    width: 100%;
    max-width: 420px;
    margin-top: 6px;
}

.duo-stat-card {
    background: none;
    border: none;
    border-radius: 0;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    box-shadow: none;
    position: relative;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: duoStatPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Hairline dividers between text-only stats */
.duo-stat-card + .duo-stat-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 1px;
    background: var(--border-color);
}

.duo-stat-card:nth-child(1) { animation-delay: 0.2s; }
.duo-stat-card:nth-child(2) { animation-delay: 0.35s; }
.duo-stat-card:nth-child(3) { animation-delay: 0.5s; }

@keyframes duoStatPop {
    0% { transform: translateY(20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.duo-stat-value {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: var(--text-primary);
}

.duo-stat-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}

@keyframes bounceIn {
    0% { transform: scale(0); }
    70% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Recipe drawer */
.recipe-drawer {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    justify-content: flex-end;
}



.recipe-drawer.hidden {
    display: none !important;
}

.recipe-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
}

.recipe-drawer-panel {
    position: relative;
    width: min(400px, 92vw);
    height: 100%;
    background: var(--bg-card);
    border-left: 1px solid var(--border-color);
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.2);
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    animation: drawerSlideIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes drawerSlideIn {
    from { transform: translateX(24px); opacity: 0.6; }
    to { transform: translateX(0); opacity: 1; }
}

.recipe-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.recipe-drawer-header h4 {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 4px 0;
    color: var(--text-primary);
}

.recipe-drawer-header span {
    font-size: 13px;
    color: var(--text-secondary);
}

.recipe-drawer-table {
    border: none;
    padding: 0;
    flex: 1;
}

.recipe-drawer-stats {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.recipe-drawer-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 600;
}

.recipe-drawer-stat strong {
    color: var(--primary-color);
    font-weight: 800;
}

:root:not(.theme-dark) .deck-step-card,
.theme-light .deck-step-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow: none;
}

.theme-dark .deck-step-card {
    background: #000000;
    border: none;
    box-shadow: none;
}

:root:not(.theme-dark) .step-ingredients-highlight,
.theme-light .step-ingredients-highlight {
    background: rgba(0, 0, 0, 0.02);
}

:root:not(.theme-dark) .celebration-card,
.theme-light .celebration-card {
    background: #ffffff;
}

:root:not(.theme-dark) .recipe-drawer-panel,
.theme-light .recipe-drawer-panel {
    background: #ffffff;
}

@media (max-width: 640px) {
    .step-card-main {
        grid-template-columns: minmax(150px, 1.05fr) minmax(120px, 0.95fr);
        gap: 10px;
    }

    .step-visual {
        aspect-ratio: 1 / 1;
        min-height: 150px;
        max-height: min(200px, 32vh);
    }

    .lesson-media,
    .lesson-card-teach .lesson-media {
        width: min(100%, 280px);
        aspect-ratio: 1 / 1;
        min-height: 170px;
        max-height: min(36vh, 270px);
    }

    .lesson-card-teach .lesson-title {
        font-size: 20px;
    }

    .lesson-howto-main {
        font-size: 14px;
        -webkit-line-clamp: 3;
    }

    .lesson-visual.step-visual {
        aspect-ratio: 1 / 1;
        min-height: 160px;
        max-height: min(32vh, 240px);
    }

    .lesson-title.step-card-title {
        font-size: 18px;
    }

    .lesson-goal-line {
        font-size: 15px;
    }

    .step-check-key.is-hero {
        min-height: 52px;
        font-size: 16px;
    }

    .step-card-title {
        font-size: 15px;
    }

    .step-card-body {
        -webkit-line-clamp: 4;
        font-size: 12px;
    }

    .tutorial-footer-actions {
        grid-template-columns: 1fr 1.4fr;
    }

    .tutorial-topbar {
        padding-left: 44px;
        padding-right: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tutorial-topbar .btn-icon-only {
        position: absolute !important;
        left: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
    }

    .tutorial-topbar .tutorial-segments {
        width: 100%;
        margin: 0;
    }

    .deck-step-card {
        padding: 12px;
    }

    .deck-step-card.lesson-card {
        padding: 0;
        max-height: 100%;
        height: 100%;
    }

    .mise-board-card {
        height: 100% !important;
        max-height: 100% !important;
    }

    .lesson-scroll {
        padding: 14px;
    }
}

@media (max-width: 420px) {
    .step-card-main {
        grid-template-columns: 1fr;
    }

    .step-visual {
        width: 100%;
        min-height: 160px;
        max-height: min(200px, 28vh);
        aspect-ratio: 1 / 1;
    }

    .lesson-media,
    .lesson-card-teach .lesson-media {
        width: min(100%, 220px);
        aspect-ratio: 1 / 1;
        max-height: min(30vh, 220px);
    }

    .lesson-visual.step-visual {
        aspect-ratio: 1 / 1;
        min-height: 120px;
        max-height: min(30vh, 220px);
    }
    
    .duo-stat-value {
        font-size: 18px;
        white-space: nowrap;
    }

    .tutorial-footer-actions {
        grid-template-columns: 1fr 1.6fr;
    }
    
    .tutorial-footer-actions .btn {
        padding: 10px 14px;
        font-size: 13px;
        border-radius: 10px;
    }
    
    .lesson-intro-img {
        width: 90px;
        height: 90px;
    }
}

/* Short viewports: squeeze further so one page fits */
@media (max-height: 780px) {
    .tutorial-shell {
        gap: 8px;
        height: calc(100dvh - 200px);
        max-height: calc(100dvh - 200px);
    }

    @supports not (height: 100dvh) {
        .tutorial-shell {
            height: calc(100vh - 200px);
            max-height: calc(100vh - 200px);
        }
    }

    .tutorial-progress-hint {
        display: none;
    }

    .mise-board {
        min-height: 0;
        max-height: none;
    }

    .mise-board-card {
        height: 100% !important;
        max-height: 100% !important;
    }

    .step-visual {
        aspect-ratio: 1 / 1;
        min-height: 180px;
        max-height: min(220px, 34vh);
    }

    .lesson-media,
    .lesson-card-teach .lesson-media {
        width: min(100%, 240px);
        aspect-ratio: 1 / 1;
        min-height: 150px;
        max-height: min(32vh, 230px);
    }

    .lesson-scroll.lesson-fit.lesson-teach-layout {
        gap: 10px;
        padding: 20px 12px 18px;
    }

    .lesson-card-teach .lesson-title {
        font-size: 18px;
    }

    .lesson-howto-main {
        font-size: 13.5px;
        -webkit-line-clamp: 2;
    }

    .lesson-visual.step-visual {
        aspect-ratio: 1 / 1;
        min-height: 140px;
        max-height: min(28vh, 200px);
    }

    .step-card-main {
        grid-template-columns: minmax(190px, 1.1fr) minmax(140px, 0.9fr);
    }

    .step-card-body {
        -webkit-line-clamp: 4;
    }

    .tutorial-nav-btn {
        min-height: 40px;
        font-size: 13px;
    }

    .lesson-goal-line {
        font-size: 15px;
    }

    .step-check-key {
        min-height: 48px;
        padding: 12px 14px;
        font-size: 14px;
    }

    .step-check-key.is-hero {
        min-height: 52px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .deck-step-card.slide-in-next,
    .deck-step-card.slide-in-prev,
    .deck-step-card.lesson-shake,
    .celebration-card,
    .recipe-drawer-panel,
    .celebration-icon {
        animation: none !important;
    }
}

/* Light mode overrides for Quick Presets & Card Deck */
:root:not(.theme-dark) .quick-preset-card {
    background-color: rgba(255, 255, 255, 0.9);
}

/* --- Professional Science Tutorial Engine Cards --- */
.science-tip-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(247, 208, 112, 0.12), rgba(255, 126, 103, 0.06));
    border: 1.5px solid rgba(247, 208, 112, 0.4);
    box-shadow: 0 4px 12px rgba(247, 208, 112, 0.08);
}

.science-tip-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.science-tip-title {
    font-size: 13px;
    font-weight: 800;
    color: #e09400;
}

.theme-dark .science-tip-title {
    color: #f7d070;
}

.science-tip-body {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-primary);
    margin: 0;
    opacity: 0.92;
}

.preset-science-badge {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(78, 190, 150, 0.1), rgba(84, 160, 255, 0.05));
    border: 1.5px dashed rgba(78, 190, 150, 0.45);
}

.preset-science-title {
    font-size: 12px;
    font-weight: 800;
    color: #2e9370;
}

.theme-dark .preset-science-title {
    color: #4ebe96;
}

.preset-science-body {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-primary);
    margin: 0;
    opacity: 0.9;
}

/* Collapsible Science Secrets Accordion Pill */
.science-accordion {
    margin-top: 10px;
    border-radius: 14px;
    border: 1.5px solid rgba(247, 208, 112, 0.4);
    background: linear-gradient(135deg, rgba(247, 208, 112, 0.1), rgba(255, 126, 103, 0.05));
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.science-accordion[open] {
    border-color: rgba(255, 126, 103, 0.5);
    box-shadow: 0 6px 18px rgba(255, 126, 103, 0.12);
}

.science-accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    cursor: pointer;
    user-select: none;
    outline: none;
    list-style: none;
}

.science-accordion-trigger::-webkit-details-marker {
    display: none;
}

.science-trigger-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.science-trigger-icon {
    font-size: 16px;
}

.science-trigger-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-primary);
}

.science-trigger-pill {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(78, 190, 150, 0.2);
    color: #2e9370;
}

.theme-dark .science-trigger-pill {
    color: #4ebe96;
}

.science-trigger-arrow {
    font-size: 10px;
    color: var(--text-secondary);
    transition: transform 0.25s ease;
}

.science-accordion[open] .science-trigger-arrow {
    transform: rotate(180deg);
}

.science-accordion-body {
    padding: 2px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

:root:not(.theme-dark) .deck-step-card {
    background-color: #ffffff;
    box-shadow: none; /* panels never cast shadow */
}


/* ===== Intro card (course overview) & note card (science / pitfall) =====
   Editorial, premium-minimal: eyebrow label, product hero, hairline list. */

/* Eyebrow: quiet uppercase label above the title */
.lesson-eyebrow {
    margin: 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--primary-color);
    opacity: 0.9;
}

.lesson-scroll.lesson-fit.lesson-intro-layout,
.lesson-scroll.lesson-fit.lesson-note-layout {
    position: relative;
    height: 100%;
    min-height: 100%;
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 28px 24px 36px;
    box-sizing: border-box;
}

/* —— Intro card —— */
.lesson-intro-hero {
    flex-shrink: 0;
    line-height: 0;
}

.cr-photo-hero-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
}

/* --- Clash Royale Style Photo Card Timer Badge (Warm Baking Cream Theme) --- */
.cr-badge-timer {
    position: absolute;
    top: -12px;
    left: -12px;
    height: 32px;
    background: linear-gradient(180deg, #fffcf5 0%, #fef3d6 60%, #fdecc8 100%);
    border: 3px solid #6b4018;
    border-radius: 12px;
    padding: 0 14px 0 38px;
    display: flex;
    align-items: center;
    box-shadow: 0 6px 14px rgba(107, 64, 24, 0.22);
    z-index: 10;
    line-height: 1;
}

.cr-badge-clock-box {
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    filter: drop-shadow(0 3px 6px rgba(107, 64, 24, 0.35));
}

.cr-badge-clock-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Mode A: Single Hand, 90deg smooth elastic snap, NO shadow, normal frequency (4s) */
.cr-b-hands {
    transform-origin: 50px 50px;
    filter: none !important;
    animation: cr-snap-rotate-90 4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

@keyframes cr-snap-rotate-90 {
    0%, 20% { transform: rotate(180deg); }   /* 6点 */
    25%, 45% { transform: rotate(270deg); }  /* 9点 */
    50%, 70% { transform: rotate(360deg); }  /* 12点 */
    75%, 95% { transform: rotate(450deg); }  /* 3点 */
    100% { transform: rotate(540deg); }      /* 6点 */
}

.cr-badge-time-text {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 900;
    color: #4a280e;
    letter-spacing: -0.2px;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Dark mode badge adjustments */
.theme-dark .cr-badge-timer {
    background: linear-gradient(180deg, #382516 0%, #2a1b0f 100%);
    border-color: #1a0f08;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
}

.theme-dark .cr-badge-time-text {
    color: #fce4c4;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.cr-mini-step-clock {
    vertical-align: middle;
    margin-right: 2px;
}



.lesson-intro-img {
    width: 172px;
    height: 172px;
    object-fit: cover;
    border-radius: 26px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 12px 32px rgba(30, 25, 20, 0.12);
}

.theme-dark .lesson-intro-img {
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.lesson-intro-emoji {
    font-size: 64px;
    line-height: 1.15;
}

.lesson-intro-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.3px;
    line-height: 1.2;
}

.lesson-intro-meta {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

.lesson-intro-meta-sep {
    opacity: 0.5;
}

/* Item Intro Description Paragraph */
.lesson-intro-body-block {
    width: 100%;
    margin-top: 14px;
}

.lesson-intro-body-text {
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-secondary);
    margin: 0;
    text-align: left;
}
.lesson-intro-keys-block {
    width: 100%;
    max-width: 430px;
    margin-top: 6px;
}

.lesson-intro-keys {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
}

.lesson-intro-keys li {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 10px 2px;
    border-top: 1px solid rgba(128, 128, 148, 0.18);
}

.lesson-intro-keys li:last-child {
    border-bottom: 1px solid rgba(128, 128, 148, 0.18);
}

.lesson-intro-key-num {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--primary-color);
    font-variant-numeric: tabular-nums;
}

.lesson-intro-key-text {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.55;
    color: var(--text-primary);
}

/* —— Note card (science / pitfall) —— */
.lesson-note-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.3px;
    line-height: 1.25;
}

.lesson-note-body {
    margin: 0;
    max-width: 540px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.75;
    color: var(--text-primary);
    text-align: left;
}

/* Pitfall: soft amber note, hairline border — caution without alarm */
.lesson-pitfall {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    max-width: 540px;
    padding: 13px 16px;
    border-radius: 14px;
    background: rgba(201, 162, 39, 0.08);
    border: 1px solid rgba(201, 162, 39, 0.28);
    text-align: left;
    box-sizing: border-box;
}

.lesson-pitfall-icon {
    flex-shrink: 0;
    font-size: 14px;
    line-height: 1.7;
}

.lesson-pitfall-text {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.7;
    color: var(--text-primary);
}

/* ===== Note card as "lab note": warm paper, badge, pull-quote, compare ===== */

/* Warm cream paper distinguishes knowledge cards from pure-white lesson cards */
:root:not(.theme-dark) .deck-step-card.lesson-card-note,
.theme-light .deck-step-card.lesson-card-note {
    background-color: #fbf7ef;
}

.theme-dark .deck-step-card.lesson-card-note {
    background-color: #000000;
}

/* Icon badge: enlarged visual hero lightbulb for science note card */
.lesson-note-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 58px;
    line-height: 1;
    margin-bottom: 14px;
    margin-left: auto;
    margin-right: auto;
    background: transparent;
    border: none;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 14px rgba(255, 190, 60, 0.32));
    transition: transform 0.2s ease;
}

.lesson-note-badge:hover {
    transform: scale(1.06) rotate(-4deg);
}

.theme-dark .lesson-note-badge {
    background: transparent;
    border: none;
    filter: drop-shadow(0 4px 16px rgba(255, 200, 80, 0.45));
}

/* Takeaway: coral pull-quote, the one line to remember */
.lesson-note-takeaway {
    margin: 2px 0 0;
    padding: 2px 0 2px 16px;
    max-width: 540px;
    border-left: 3px solid var(--primary-color);
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.55;
    letter-spacing: -0.2px;
    color: var(--primary-color);
    text-align: left;
}

/* Compare block: two quiet columns, labels may carry ✓/✗ */
.lesson-note-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    max-width: 540px;
}

.lesson-note-compare-side {
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(128, 128, 148, 0.08);
    border: 1px solid rgba(128, 128, 148, 0.16);
    text-align: left;
}

.lesson-note-compare-label {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--text-primary);
}

.lesson-note-compare-text {
    margin: 0;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* ===== Two-column editorial split (intro & note cards) =====
   Default: stacked single centered column (narrow screens).
   ≥1024px: left/right split to relieve vertical crowding. */
.lesson-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    width: 100%;
    max-width: 560px;
    justify-items: center;
}

.lesson-split-media,
.lesson-split-content,
.lesson-split-head,
.lesson-split-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    align-items: center;
    text-align: center;
}

@media (min-width: 1024px) {
    .lesson-split {
        max-width: 840px;
        gap: 44px;
        align-items: center;
    }

    .lesson-card-intro .lesson-split {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .lesson-card-note .lesson-split {
        grid-template-columns: minmax(230px, 290px) minmax(0, 1fr);
    }

    .lesson-split-content,
    .lesson-split-head,
    .lesson-split-body {
        align-items: flex-start;
        text-align: left;
    }

    .lesson-card-note .lesson-split-head {
        align-items: center;
        text-align: center;
    }

    /* Product photo becomes the visual lead on wide screens */
    .lesson-split-media .lesson-intro-img {
        width: 220px;
        height: 220px;
    }
}

/* ===== Pitfall card: quiet cream paper, pitfall headline + takeaway ===== */

:root:not(.theme-dark) .deck-step-card.lesson-card-pitfall,
.theme-light .deck-step-card.lesson-card-pitfall {
    background-color: #fbf7ef;
}

.theme-dark .deck-step-card.lesson-card-pitfall {
    background-color: #000000;
}

/* The pitfall itself is the headline of this card */
.lesson-pitfall-main {
    margin: 0;
    max-width: 560px;
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.65;
    letter-spacing: -0.2px;
    color: var(--text-primary);
    text-align: center;
}

/* Pitfall card content is a single centered column at every width */
.lesson-card-pitfall .lesson-split {
    max-width: 620px;
}

/* Word-by-word fade up animation for text blocks */
.anim-word-up {
    display: inline-block;
    opacity: 0;
    transform: translateY(12px);
    animation: wordFadeUp 0.65s cubic-bezier(0.2, 0.95, 0.38, 1) forwards;
    white-space: pre-wrap; /* Ensure spaces between span elements are preserved if wrapped */
}

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

/* Takeaway here is a centered coral line — no pull-quote bar */
.lesson-card-pitfall .lesson-note-takeaway {
    border-left: none;
    padding-left: 0;
    text-align: center;
}

/* ===== Intro split: balance the media column so the photo sits centered ===== */
@media (min-width: 1024px) {
    /* Photo + text form a compact content-sized group, centered as one —
       stretched fr tracks pushed the pair apart on wide screens */
    .lesson-card-intro .lesson-split {
        grid-template-columns: auto auto;
        justify-content: center;
        gap: 56px;
        max-width: none;
    }

    .lesson-card-intro .lesson-split-content {
        max-width: 430px;
    }

    .lesson-split-media {
        justify-self: center;
    }

    /* Extra side padding so the split never nears the card edge */
    .lesson-scroll.lesson-fit.lesson-intro-layout,
    .lesson-scroll.lesson-fit.lesson-note-layout {
        padding: 32px 48px 40px;
    }
}

/* Pitfall card stays a centered single column even on wide screens
   (overrides the split-layout left alignment) */
.lesson-card-pitfall .lesson-split,
.lesson-card-pitfall .lesson-split-head {
    justify-items: center;
    align-items: center;
    text-align: center;
}

/* Generated illustration on science note cards */
.lesson-note-img {
    width: 100%;
    max-width: 540px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    display: block;
}

/* Short viewports (browser chrome eats height): shrink the teach hero
   and clamp the how-to so the whole card always fits */
@media (max-height: 940px) {
    .lesson-card-teach .lesson-media {
        width: min(100%, 240px);
        max-height: min(28vh, 240px);
    }

    .lesson-howto-main {
        -webkit-line-clamp: 2;
    }
}

/* ===== Prep-complete celebration (paced to the fantasy chime) ===== */
.mise-board.is-celebrating .mise-panel-ready {
    overflow: hidden;
    position: relative;
    animation: misePanelFlare 2.4s cubic-bezier(0.25, 0.8, 0.25, 1) both;
}

/* Shine sweep across the ready panel */
.mise-board.is-celebrating .mise-panel-ready::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 236, 180, 0.5) 48%, rgba(255, 255, 255, 0.65) 52%, rgba(255, 236, 180, 0.5) 56%, transparent 74%);
    transform: translateX(-120%);
    animation: misePanelShine 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both;
}

@keyframes misePanelShine {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
}

@keyframes misePanelFlare {
    0% {
        border-color: rgba(247, 208, 112, 0.6);
        box-shadow: 0 0 18px rgba(247, 208, 112, 0.18), inset 0 0 14px rgba(247, 208, 112, 0.08);
    }
    20% {
        border-color: rgba(247, 208, 112, 0.95);
        box-shadow:
            0 0 0 4px rgba(247, 208, 112, 0.35),
            0 0 34px rgba(247, 208, 112, 0.5),
            0 10px 44px rgba(255, 126, 103, 0.25),
            inset 0 0 28px rgba(247, 208, 112, 0.22);
    }
    45% {
        border-color: rgba(247, 208, 112, 0.8);
        box-shadow:
            0 0 0 2px rgba(247, 208, 112, 0.22),
            0 0 22px rgba(247, 208, 112, 0.35),
            inset 0 0 18px rgba(247, 208, 112, 0.14);
    }
    /* Long tail settling into the persistent is-complete glow — no hard cut */
    100% {
        border-color: rgba(247, 208, 112, 0.6);
        box-shadow: 0 0 18px rgba(247, 208, 112, 0.18), inset 0 0 14px rgba(247, 208, 112, 0.08);
    }
}

/* Persistent warm glow once everything is prepped */
.mise-board.is-complete .mise-panel-ready {
    border-color: rgba(247, 208, 112, 0.6);
    box-shadow: 0 0 18px rgba(247, 208, 112, 0.18), inset 0 0 14px rgba(247, 208, 112, 0.08);
}

.mise-chip.mise-chip-celebrate {
    animation: miseChipCelebrate 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes miseChipCelebrate {
    0% { transform: scale(1); }
    40% { transform: scale(1.14); }
    100% { transform: scale(1); }
}

.mise-sparkle {
    position: fixed;
    z-index: 9998;
    font-size: 18px;
    pointer-events: none;
    opacity: 0;
    animation: miseSparkleRise 1s cubic-bezier(0.25, 0.8, 0.25, 1) both;
}

@keyframes miseSparkleRise {
    0% { opacity: 0; transform: translateY(0) scale(0.5); }
    25% { opacity: 1; transform: translateY(-14px) scale(1.1); }
    100% { opacity: 0; transform: translateY(-56px) scale(0.8); }
}

/* ===== Victory celebration (paced to the melodic bonus jingle) ===== */
.duo-trophy-badge {
    animation: duoTrophyPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}

@keyframes duoTrophyPop {
    0% { transform: scale(0) rotate(-12deg); }
    60% { transform: scale(1.18) rotate(4deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.duo-stat-card {
    animation: duoStatRise 0.45s cubic-bezier(0.25, 0.8, 0.25, 1) both;
}

.duo-stat-card:nth-child(1) { animation-delay: 0.5s; }
.duo-stat-card:nth-child(2) { animation-delay: 0.72s; }
.duo-stat-card:nth-child(3) { animation-delay: 0.94s; }

@keyframes duoStatRise {
    0% { opacity: 0; transform: translateY(14px) scale(0.9); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== Quiz correct pop (matching the 0.37s ding, theme coral + gold) ===== */
.quiz-option.quiz-correct-pop {
    animation: quizCorrectPop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes quizCorrectPop {
    0% {
        transform: scale(1);
        box-shadow:
            0 0 0 0 rgba(255, 126, 103, 0.5),
            0 0 0 rgba(247, 208, 112, 0);
    }
    45% {
        transform: scale(1.05);
        box-shadow:
            0 0 0 7px rgba(255, 126, 103, 0.2),
            0 0 24px rgba(247, 208, 112, 0.45);
    }
    100% {
        transform: scale(1);
        box-shadow:
            0 0 0 15px rgba(255, 126, 103, 0),
            0 0 0 rgba(247, 208, 112, 0);
    }
}

/* Mobile specific fixes */
@media (max-width: 768px) {
    /* Prevent flex center from clipping top content when overflow occurs */
    .lesson-scroll.lesson-fit.lesson-intro-layout,
    .lesson-scroll.lesson-fit.lesson-note-layout,
    .lesson-scroll.lesson-fit.lesson-teach-layout {
        justify-content: flex-start !important;
        padding-top: 12px !important;
    }
    
    .lesson-scroll.lesson-fit.lesson-intro-layout::before,
    .lesson-scroll.lesson-fit.lesson-intro-layout::after,
    .lesson-scroll.lesson-fit.lesson-note-layout::before,
    .lesson-scroll.lesson-fit.lesson-note-layout::after,
    .lesson-scroll.lesson-fit.lesson-teach-layout::before,
    .lesson-scroll.lesson-fit.lesson-teach-layout::after {
        content: "";
        margin: auto;
    }
}