:root {
            --wine-red: #a51034;
            --amber-orange: #F49138;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: #FBF9F7;
            color: #1C1917;
            overflow-x: hidden;
        }

        .bg-wine {
            background-color: var(--wine-red);
        }

        .text-wine {
            color: var(--wine-red);
        }

        .border-wine-5 {
            border-color: rgba(123, 3, 35, 0.05);
        }

        .bg-amber-light {
            background-color: rgba(244, 145, 56, 0.05);
        }

        .nav-button.active {
            background-color: white;
            color: var(--wine-red);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        .focus-ring:focus-visible {
            outline: 3px solid rgba(244, 145, 56, 0.45);
            outline-offset: 3px;
        }

        .glass {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }

        .orb {
            position: fixed;
            filter: blur(120px);
            z-index: -1;
            opacity: 0.04;
            pointer-events: none;
        }

        .pill-nav-shadow {
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
        }

        .profile-menu {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0);
        }

        .profile-menu.hidden {
            display: block;
            opacity: 0;
            pointer-events: none;
            transform: translateY(-6px);
        }

        .profile-menu-item:hover {
            background-color: #F8F5F2;
        }

        .profile-menu-item.sign-out:hover {
            background-color: #FDF0F2;
        }

        /* Cinematic overlay for full-card images */
        .hero-gradient-overlay {
            background: linear-gradient(75deg, rgb(0 0 0 / 0.78) 0%, rgb(0 0 0 / 0.54) 42%, rgb(0 0 0 / 0) 100%);
        }

        .card-shadow {
            box-shadow: 0 30px 60px -12px rgba(28, 25, 23, 0.15);
        }

        @keyframes fade-in {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

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

        .today-fade-in {
            animation: fade-in 0.8s ease-out forwards;
        }

        .subject-card {
            isolation: isolate;
            background-color: color-mix(in srgb, var(--subject-accent, #a51034) 4%, #ffffff);
            background-image:
                linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.94) 48%, rgba(255, 255, 255, 0.68) 100%),
                linear-gradient(rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.38)),
                radial-gradient(circle at 90% 12%, color-mix(in srgb, var(--subject-accent, #a51034) 16%, transparent), transparent 46%),
                var(--subject-bg);
            background-position: center, center, center, calc(100% - 3rem) center;
            background-repeat: no-repeat;
            background-size: 100% 100%, 100% 100%, 100% 100%, contain;
            box-shadow: 0 18px 52px rgba(28, 25, 23, 0.035);
        }

        .subject-card:hover {
            border-color: color-mix(in srgb, var(--subject-accent, #a51034) 22%, transparent);
            box-shadow: 0 24px 60px rgba(28, 25, 23, 0.07);
        }

        .subject-illustration {
            filter: drop-shadow(0 18px 24px color-mix(in srgb, var(--subject-accent, #a51034) 12%, transparent));
        }

        .subject-icon-image {
            filter: saturate(0.82) contrast(0.9) brightness(1.08) drop-shadow(0 12px 18px color-mix(in srgb, var(--subject-accent, #a51034) 8%, transparent));
        }

        .subject-card-arrow {
            background: color-mix(in srgb, #ffffff 72%, var(--subject-accent, #a51034));
            border: 1px solid color-mix(in srgb, var(--subject-accent, #a51034) 30%, #ffffff);
            color: var(--subject-accent, #a51034);
            box-shadow: 0 8px 18px color-mix(in srgb, var(--subject-accent, #a51034) 14%, transparent);
        }

        .subject-card:hover .subject-card-arrow {
            background: var(--subject-accent, #a51034);
            color: #ffffff;
            border-color: color-mix(in srgb, var(--subject-accent, #a51034) 80%, #ffffff);
            transform: translate3d(2px, -2px, 0);
        }

        .parent-subject-row {
            background:
                radial-gradient(circle at 92% 18%, color-mix(in srgb, var(--subject-accent, #a51034) 10%, transparent), transparent 20rem),
                linear-gradient(135deg, rgba(255, 255, 255, 0.985) 0%, rgba(255, 250, 248, 0.94) 100%),
                color-mix(in srgb, var(--subject-accent, #a51034) 4%, #ffffff);
            box-shadow: 0 14px 36px rgba(28, 25, 23, 0.04);
        }

        .parent-subject-row:hover {
            border-color: color-mix(in srgb, var(--subject-accent, #a51034) 34%, #ffffff);
            box-shadow: 0 20px 48px rgba(28, 25, 23, 0.075);
            transform: translateY(-1px);
        }

        .parent-subject-row button {
            cursor: pointer;
        }

        .blocks-page-header {
            position: relative;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.94) 7%, rgba(255, 255, 255, 0.94) 93%, rgba(255, 255, 255, 0));
            box-shadow: 0 14px 34px rgba(28, 25, 23, 0.035);
        }

        .blocks-page-header::after {
            content: "";
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(233, 221, 217, 0.95) 8%, rgba(233, 221, 217, 0.95) 92%, transparent);
            pointer-events: none;
        }

        .block-card {
            --block-card-pad-x: 1.25rem;
            --block-card-pad-y: 1.25rem;
            background: #FFFFFF;
            border: 0;
            box-shadow: none;
            transition: none;
        }

        .block-card:hover {
            border-color: transparent;
            box-shadow: none;
        }

        .block-image-badge {
            background: #FFFFFF;
            border: 0;
            box-shadow: none;
        }

        .block-image-badge img {
            filter: none;
        }

        .block-image-badge-number {
            background: var(--block-accent, #a51034);
            box-shadow: 0 7px 16px color-mix(in srgb, var(--block-accent, #a51034) 26%, transparent);
        }

        .block-toggle-icon {
            position: static;
            z-index: 3;
            display: grid;
            width: 36px;
            height: 36px;
            flex: 0 0 auto;
            place-items: center;
            border-radius: 999px;
            background: #F9FAFB;
            color: #a51034;
            border: 1px solid #E5E7EB;
            box-shadow: none;
            transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
        }

        .block-header-sticky:hover .block-toggle-icon {
            background: #FFFFFF;
            border-color: #D1D5DB;
            box-shadow: none;
        }

        .block-toggle-icon svg {
            transition: transform 200ms ease;
        }

        .block-header-sticky[aria-expanded="true"] .block-toggle-icon svg {
            transform: rotate(180deg);
        }

        .block-header-actions {
            width: 100%;
            max-width: 14rem;
            flex: 1 1 12rem;
        }

        .block-header-sticky {
            width: 100%;
            margin: 0;
            border-radius: 0;
            border-bottom: 0;
            position: sticky;
            padding: 0;
            background: #FFFFFF;
            box-shadow: none;
        }

        .block-header-control {
            display: flex;
            width: 100%;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
        }

        @media (min-width: 768px) {
            .block-card {
                --block-card-pad-x: 1.5rem;
                --block-card-pad-y: 1.5rem;
            }

            .block-header-sticky {
                align-items: center;
                padding: 0;
            }

            .block-header-actions {
                position: static;
                width: 12rem;
                flex: 0 0 12rem;
                transform: none;
            }

            .block-header-control {
                width: auto;
                align-self: center;
                justify-content: flex-end;
            }
        }

        .block-card.is-collapsed {
            overflow: hidden;
        }

        .block-card.is-collapsed .block-header-sticky {
            width: 100%;
            margin: 0;
            border-radius: 0;
            border-bottom: 0;
        }

        .block-card.is-collapsed .block-header-actions {
            transform: none;
        }

        .tab-panel[data-tab-panel="Communication"],
        .tab-panel[data-tab-panel="Learnometer"],
        .tab-panel[data-tab-panel="Practice Test"] {
            font-family: 'Inter', sans-serif;
            letter-spacing: 0;
        }

        .tab-panel[data-tab-panel="Communication"] .font-black,
        .tab-panel[data-tab-panel="Learnometer"] .font-black,
        .tab-panel[data-tab-panel="Practice Test"] .font-black {
            font-weight: 700 !important;
        }

        .tab-panel[data-tab-panel="Communication"] .tracking-tight,
        .tab-panel[data-tab-panel="Communication"] .tracking-wider,
        .tab-panel[data-tab-panel="Communication"] .tracking-widest,
        .tab-panel[data-tab-panel="Learnometer"] .tracking-tight,
        .tab-panel[data-tab-panel="Learnometer"] .tracking-wider,
        .tab-panel[data-tab-panel="Learnometer"] .tracking-widest,
        .tab-panel[data-tab-panel="Practice Test"] .tracking-tight,
        .tab-panel[data-tab-panel="Practice Test"] .tracking-wider,
        .tab-panel[data-tab-panel="Practice Test"] .tracking-widest {
            letter-spacing: 0 !important;
        }

        .tab-panel[data-tab-panel="Communication"] h1,
        .tab-panel[data-tab-panel="Communication"] h2,
        .tab-panel[data-tab-panel="Learnometer"] h1,
        .tab-panel[data-tab-panel="Learnometer"] h2,
        .tab-panel[data-tab-panel="Practice Test"] h1,
        .tab-panel[data-tab-panel="Practice Test"] h2 {
            font-weight: 700;
            letter-spacing: 0;
        }

        .communication-title {
            font-family: 'Poppins', sans-serif;
            font-size: 24px;
            font-weight: 600 !important;
            letter-spacing: -0.3px !important;
        }

        .communication-card-title {
            font-family: 'Inter', sans-serif;
            font-size: 16px;
            font-weight: 600 !important;
            letter-spacing: 0;
        }

        .communication-meta {
            color: #8B8B8B;
            font-size: 12px;
            font-weight: 500 !important;
            letter-spacing: 0.2px !important;
        }

        .communication-content-text {
            color: #2C2C2C;
            font-size: 14px;
            font-weight: 400;
            line-height: 1.7;
            margin-bottom: 12px;
        }

        .communication-content-text:last-child {
            margin-bottom: 0;
        }

        .communication-action {
            font-size: 13px;
            font-weight: 600 !important;
            letter-spacing: 0.3px !important;
        }

        .communication-avatar {
            font-size: 13px;
            font-weight: 600 !important;
            letter-spacing: 0;
        }

        .lesson-block {
            --timeline-progress: 0%;
            --timeline-x: 28px;
            --timeline-node-size: 36px;
            isolation: isolate;
        }

        .lesson-block::before,
        .lesson-block::after {
            content: "";
            position: absolute;
            left: calc(var(--timeline-x) - 1.5px);
            top: 0;
            z-index: 0;
            width: 3px;
            border-radius: 999px;
            pointer-events: none;
        }

        .lesson-block::before {
            bottom: 0;
            background: rgba(120, 120, 120, 0.16);
        }

        .lesson-block::after {
            height: var(--timeline-progress);
            background: linear-gradient(180deg, #8F0B2E 0%, #B10F3A 54%, #D65A70 100%);
            box-shadow: 0 0 18px rgba(177, 15, 58, 0.13);
            animation: timeline-grow 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
        }

        .lesson-session {
            isolation: isolate;
            z-index: 1;
            border-radius: 26px;
            padding: 1rem;
            background:
                linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 252, 249, 0.78)),
                rgba(255, 250, 246, 0.72);
            box-shadow: 0 16px 40px rgba(28, 25, 23, 0.055);
            animation: session-rise 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
            transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
        }

        .lesson-session::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            border-radius: 26px;
            background: transparent;
            opacity: 0;
            transition: background 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
        }

        .lesson-session:hover {
            transform: translateY(-4px);
            box-shadow: 0 22px 52px rgba(28, 25, 23, 0.075);
        }

        .lesson-session.is-active::before {
            background: linear-gradient(180deg, rgb(177 15 58 / 2%), rgba(255, 255, 255, 0.68) 76%, rgba(255, 255, 255, 0.18));
            box-shadow: inset 0 0 0 1px rgb(177 15 58 / 25%);
            opacity: 1;
        }

        .lesson-session:hover::before {
            background: rgba(255, 255, 255, 0.42);
            box-shadow: 0 14px 34px rgba(28, 25, 23, 0.05);
            opacity: 1;
        }

        .lesson-session.is-active:hover::before {
            background: linear-gradient(180deg, rgb(177 15 58 / 2%), rgba(255, 255, 255, 0.68) 76%, rgba(255, 255, 255, 0.18));
            box-shadow: inset 0 0 0 1px rgb(177 15 58 / 25%);
            opacity: 1;
        }

        .timeline-node-wrap {
            position: absolute;
            left: calc(var(--timeline-x) - 84px);
            top: 92px;
            z-index: 2;
            display: grid;
            width: var(--timeline-node-size);
            height: var(--timeline-node-size);
            place-items: center;
        }

        .timeline-node-wrap::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 999px;
            /* background: rgba(255, 253, 252, 0.92); */
            /* box-shadow: 0 0 0 5px rgba(255, 253, 252, 0.88); */
        }

        .timeline-node {
            position: relative;
            z-index: 2;
            display: grid;
            place-items: center;
            border-radius: 999px;
            animation: node-bloom 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
        }

        .timeline-node.completed {
            width: 24px;
            height: 24px;
            background: linear-gradient(135deg, #8F0B2E, #B10F3A 58%, #D65A70);
            color: white;
            box-shadow: 0 0 0 6px rgba(177, 15, 58, 0.08), 0 10px 20px rgba(177, 15, 58, 0.16);
        }

        .timeline-node.progress {
            width: 28px;
            height: 28px;
            background: linear-gradient(135deg, #B10F3A, #DF6B7F);
            box-shadow: 0 0 0 7px rgba(177, 15, 58, 0.10), 0 12px 24px rgba(177, 15, 58, 0.16);
        }

        .timeline-node.progress::after {
            content: "";
            position: absolute;
            inset: -10px;
            border-radius: inherit;
            border: 1px solid rgba(177, 15, 58, 0.32);
            opacity: 0.72;
            animation: pulse-ring 1600ms ease-out infinite;
        }

        .timeline-node.not-started {
            width: 20px;
            height: 20px;
            background: rgba(255, 253, 252, 0.96);
            border: 2px solid rgba(140, 123, 119, 0.25);
            box-shadow: 0 0 0 5px rgba(255, 253, 252, 0.9);
            opacity: 0.82;
        }

        .lesson-image-wrap {
            box-shadow: 0 16px 30px rgba(28, 25, 23, 0.09);
        }

        .lesson-detail-shell {
            background: #fffdf9;
        }

        .lesson-detail-title {
            font-family: 'Poppins', 'Inter', sans-serif;
            letter-spacing: 0;
        }

        .lesson-detail-editorial {
            background: #fffdf9;
        }

        .lesson-detail-hero-bar {
            background: linear-gradient(180deg, #b2133f 0%, #a51034 100%);
            box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
        }

        .lesson-detail-media {
            box-shadow: 0 22px 48px rgba(41, 26, 24, 0.08);
        }

        .lesson-detail-section {
            padding-top: 0;
        }

        .lesson-detail-rule {
            display: none;
        }

        .lesson-detail-pill {
            border: 1px solid #ead9d3;
            background: #fff8f5;
            color: #733337;
        }

        .lesson-detail-note {
            border: 1px solid #efdfd9;
            background: linear-gradient(180deg, #fffaf8 0%, #fff5f2 100%);
        }

        .lesson-step-number {
            color: rgba(177, 15, 58, 0.36);
            font-variant-numeric: tabular-nums;
        }

        .lesson-complete-rail {
            background: linear-gradient(90deg, #f6d0d5 0%, #f7e9e4 100%);
            box-shadow: inset 0 0 0 1px rgba(178, 90, 111, 0.08);
        }

        .lesson-complete-thumb {
            box-shadow: 0 10px 22px rgba(164, 16, 52, 0.28);
        }

        .lesson-complete-button {
            box-shadow: 0 14px 30px rgba(164, 16, 52, 0.22);
        }

        .lp-title-strip {
            background: #a51034;
            padding: 24px 0 20px;
            margin: -1.5rem -1.5rem 0;
        }

        @media (min-width: 768px) {
            .lp-title-strip {
                margin: -2rem -3rem 0;
            }
        }

        .lp-title-strip-inner {
            max-width: 1040px;
            margin: 0 auto;
            padding: 0 28px;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 20px;
            flex-wrap: wrap;
        }

        .lp-eyebrow {
            font-family: 'Poppins', 'Inter', sans-serif;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.78);
            margin-bottom: 5px;
            white-space: nowrap;
        }

        .lp-title {
            font-family: 'Poppins', 'Inter', sans-serif;
            font-size: 28px;
            font-weight: 800;
            color: #fff;
            letter-spacing: -0.02em;
            line-height: 1.1;
        }

        .lp-chips,
        .lp-vocab-list {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .lp-chip,
        .lp-projector-trigger {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: rgba(255, 255, 255, 0.88);
            font-size: 11px;
            font-weight: 500;
            padding: 5px 12px;
            border-radius: 20px;
            white-space: nowrap;
        }

        .lp-projector-trigger {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            font-weight: 700;
        }

        .lp-hero-figure {
            max-width: 1040px;
            margin: 24px auto 0;
            padding: 0 28px;
        }

        .lp-hero-figure img,
        .lp-inline-figure img {
            display: block;
            width: 100%;
            height: auto;
            object-fit: cover;
        }

        .lp-hero-figure img {
            max-height: 360px;
            border-radius: 18px;
            border: 1px solid rgba(28, 20, 22, 0.08);
            background: #f6f1ee;
        }

        .lp-section-stack,
        .lp-section-flow,
        .lp-analysis-stack,
        .lp-diff-items {
            display: flex;
            flex-direction: column;
        }

        .lp-section-stack {
            gap: 8px;
        }

        .lp-section-flow {
            gap: 26px;
            min-width: 0;
        }

        .lp-lesson-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            align-items: start;
        }

        .lp-section-heading,
        .lp-section-heading-copy {
            display: flex;
            align-items: center;
            min-height: 82px;
            width: 100%;
        }

        .lp-sec-heading-line {
            display: flex;
            align-items: center;
            gap: 14px;
            width: 100%;
        }

        .lp-sec-rule,
        .lp-divider {
            height: 1px;
            background: transparent;
            flex: 1 1 auto;
        }

        .lp-sec-title,
        .lp-sub-lbl,
        .lp-step-label,
        .lp-outcome-level,
        .lp-tip-lbl,
        .lp-analysis-question-lbl,
        .lp-diff-col-lbl {
            font-family: 'Poppins', 'Inter', sans-serif;
        }

        .lp-sec-title {
            font-size: 29px;
            font-weight: 900;
            color: #271f1d;
            letter-spacing: -0.05em;
            line-height: 1;
            text-transform: uppercase;
        }

        .lp-sec-meta-actions {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-left: auto;
        }

        .lp-sec-meta,
        .lp-sub-lbl {
            font-size: 11px;
            color: #8b7a74;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .lp-sub-lbl {
            font-size: 12px;
            color: #94857d;
            margin-bottom: 10px;
        }

        .lp-sub-lbl.accent {
            color: #6f625d;
        }

        .lp-section-chip,
        .lp-vocab-trigger {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            border-radius: 999px;
            border: 1px solid #eadfd7;
            background: #fffdfb;
            color: #7a0c26;
        }

        .lp-section-chip {
            min-height: 34px;
            padding: 0 12px;
            font-size: 10.5px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .lp-notes-trigger.has-note {
            border-color: rgba(164, 16, 52, 0.16);
            background: rgba(164, 16, 52, 0.07);
        }

        .lp-notes-trigger.is-open {
            border-color: rgba(164, 16, 52, 0.24);
            background: rgba(164, 16, 52, 0.11);
        }

        .lp-audio-trigger {
            justify-content: center;
            width: 34px;
            min-width: 34px;
            padding: 0;
            color: #5f5854;
        }

        .lp-notes-dot {
            width: 7px;
            height: 7px;
            border-radius: 999px;
            background: #d6cbc6;
        }

        .lp-notes-trigger.has-note .lp-notes-dot {
            background: #a51034;
        }

        .lp-inline-notes-card {
            margin-bottom: 18px;
            padding: 16px;
            border: 1px solid rgba(164, 16, 52, 0.12);
            border-radius: 18px;
            background: linear-gradient(180deg, rgba(255, 251, 248, 0.96), rgba(252, 244, 241, 0.96));
            box-shadow: 0 14px 36px rgba(123, 3, 35, 0.08);
        }

        .lp-inline-notes-label {
            display: block;
            margin-bottom: 10px;
            font-size: 11px;
            font-weight: 900;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #7a0c26;
        }

        .lp-inline-notes-shell {
            display: flex;
            align-items: flex-end;
            gap: 12px;
        }

        .lp-inline-notes-input {
            width: 100%;
            min-height: 104px;
            resize: vertical;
            border: 1px solid rgba(164, 16, 52, 0.12);
            border-radius: 16px;
            background: #fffdfb;
            padding: 14px 16px;
            font-size: 14px;
            line-height: 1.6;
            color: #3d312e;
            outline: none;
            box-shadow: inset 0 1px 2px rgba(26, 18, 16, 0.03);
        }

        .lp-inline-notes-input::placeholder {
            color: #a69690;
        }

        .lp-inline-notes-input:focus {
            border-color: rgba(164, 16, 52, 0.3);
            box-shadow: 0 0 0 4px rgba(164, 16, 52, 0.08);
        }

        .lp-inline-notes-submit {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            flex: 0 0 44px;
            border: 0;
            border-radius: 14px;
            background: #a51034;
            color: #fff;
            box-shadow: 0 12px 22px rgba(164, 16, 52, 0.22);
            transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
        }

        .lp-inline-notes-submit:hover {
            background: #840d2a;
            transform: translateY(-1px);
            box-shadow: 0 16px 28px rgba(164, 16, 52, 0.24);
        }

        @media (max-width: 640px) {
            .lp-inline-notes-shell {
                flex-direction: column;
                align-items: stretch;
            }

            .lp-inline-notes-submit {
                width: 100%;
                flex-basis: auto;
            }
        }

        .lp-section-body {
            padding: 22px 24px;
        }

        .lp-aim-statement {
            font-family: 'Poppins', 'Inter', sans-serif;
            font-size: 18px;
            font-weight: 800;
            color: #1C1917;
            line-height: 1.45;
            letter-spacing: -0.01em;
            margin-bottom: 12px;
        }

        .lp-aim-context,
        .lp-practice-intro {
            font-size: 14px;
            color: #5C524E;
            font-weight: 500;
            line-height: 1.7;
            padding: 13px 17px;
            background: rgba(164, 16, 52, 0.05);
            border: 1px solid rgba(164, 16, 52, 0.12);
            border-radius: 14px;
            margin-bottom: 18px;
        }

        .lp-aim-support-grid,
        .lp-diff-cols,
        .lp-outcomes-grid {
            display: grid;
            gap: 12px;
        }

        .lp-aim-support-grid {
            grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
            gap: 14px;
        }

        .lp-vocab-trigger {
            border-radius: 12px;
            background: #f8f2ed;
            cursor: pointer;
            padding: 10px 14px;
            font-size: 13px;
            font-weight: 800;
            color: #5f3127;
        }

        .lp-vocab-trigger.is-active {
            background: #efe0d6;
            border-color: #d7c4b8;
            color: #3d2823;
        }

        .lp-vocab-panel,
        .lp-analysis-answer,
        .lp-homework-box {
            border-radius: 12px;
            border: 1px solid #e7dbd4;
            background: #fffdfb;
            padding: 12px 14px;
        }

        .lp-resource-list {
            display: flex;
            flex-direction: column;
            gap: 1px;
        }

        .lp-resource-row {
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 8px 0;
            font-size: 14.5px;
            font-weight: 500;
            color: #3A2D2A;
            border-bottom: 1px solid #f2ece7;
        }

        .lp-res-index {
            width: 22px;
            flex: 0 0 22px;
            font-family: 'Poppins', 'Inter', sans-serif;
            font-size: 12px;
            font-weight: 800;
            color: #8c5b4c;
        }

        .lp-steps {
            display: flex;
            flex-direction: column;
        }

        .lp-step-row {
            display: grid;
            grid-template-columns: 52px 1fr;
            gap: 4px;
            padding: 14px 16px;
            align-items: flex-start;
            border: 1px solid #F0EAE6;
            border-radius: 14px;
            background: #FFFFFF;
        }

        .lp-step-row+.lp-step-row {
            margin-top: 10px;
        }

        .lp-step-big-num {
            font-family: 'Poppins', 'Inter', sans-serif;
            font-size: 26px;
            font-weight: 800;
            color: rgba(164, 16, 52, 0.16);
            line-height: 1;
            padding-top: 4px;
        }

        .lp-step-label {
            font-size: 15px;
            font-weight: 800;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            color: #5f3127;
            margin-bottom: 6px;
        }

        .lp-step-text,
        .lp-analysis-answer p,
        .lp-diff-item,
        .lp-outcome-text,
        .lp-tip-txt {
            font-size: 14px;
            font-weight: 500;
            color: #3A2D2A;
            line-height: 1.65;
        }

        .lp-inline-figure {
            margin: 18px 0 0;
            overflow: hidden;
            border-radius: 16px;
            border: 1px solid #E7E5E4;
            background: #F8F7F5;
        }

        .lp-tip-box {
            display: flex;
            gap: 11px;
            align-items: flex-start;
            padding: 13px 15px;
            border-radius: 10px;
            background: rgba(164, 16, 52, 0.18);
            border: 1px solid rgba(164, 16, 52, 0.32);
            margin-top: 16px;
        }

        .lp-analysis-layout {
            display: grid;
            grid-template-columns: 1fr;
            gap: 18px;
            align-items: start;
        }

        .lp-analysis-stack {
            gap: 16px;
        }

        .lp-analysis-question {
            margin-bottom: 12px;
            padding: 15px 16px;
            border-radius: 14px;
            background: rgba(164, 16, 52, 0.09);
            border: 1px solid rgba(164, 16, 52, 0.18);
        }

        .lp-analysis-question-text {
            font-family: 'Poppins', 'Inter', sans-serif;
            font-size: 14px;
            font-weight: 800;
            color: #5a0219;
            line-height: 1.5;
        }

        .lp-diff-cols {
            grid-template-columns: 1fr 1fr;
        }

        .lp-diff-items {
            gap: 8px;
        }

        .lp-diff-item {
            display: flex;
            gap: 7px;
        }

        .lp-diff-dot {
            width: 5px;
            height: 5px;
            background: #b6805d;
            border-radius: 50%;
            flex-shrink: 0;
            margin-top: 6px;
        }

        .lp-outcomes-grid {
            grid-template-columns: repeat(3, 1fr);
        }

        .lp-outcome-card {
            border-radius: 12px;
            padding: 16px 18px;
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .lp-outcome-card.approaching {
            background: #f8f1e4;
            border: 1px solid #ead6a5;
        }

        .lp-outcome-card.meeting {
            background: #eef5ed;
            border: 1px solid #b9d4bf;
        }

        .lp-outcome-card.exceeding {
            background: #f1f3f8;
            border: 1px solid #c6d0e2;
        }

        .lp-complete-wrap {
            display: flex;
            justify-content: center;
            margin-top: 26px;
        }

        .lp-complete-card {
            width: min(100%, 460px);
            padding: 8px 0 0;
            border-radius: 24px;
            text-align: center;
        }

        .lp-complete-title {
            font-family: 'Poppins', 'Inter', sans-serif;
            font-size: 18px;
            font-weight: 700;
            line-height: 1.3;
            letter-spacing: -0.02em;
            color: #271f1d;
            margin-bottom: 14px;
        }

        @media (max-width: 640px) {
            .lp-outcomes-grid,
            .lp-diff-cols,
            .lp-aim-support-grid,
            .lp-analysis-layout {
                grid-template-columns: 1fr;
            }

            .lp-section-body {
                padding: 18px 16px;
            }

            .lp-sec-title {
                font-size: 23px;
            }
        }

        .edge-gold-panel {
            background: linear-gradient(135deg, #f7b84b 0%, #f39a2f 100%);
        }

        .lesson-action-arrow {
            opacity: 0.62;
            transition: transform 200ms ease, opacity 200ms ease;
        }

        .lesson-session:hover .lesson-action-arrow {
            transform: translateX(3px);
            opacity: 1;
        }

        @keyframes timeline-grow {
            from {
                height: 0;
            }
        }

        @keyframes node-bloom {
            from {
                opacity: 0;
                transform: scale(0.72);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes session-rise {
            from {
                opacity: 0;
                transform: translateY(12px);
            }

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

        @keyframes pulse-ring {
            0% {
                opacity: 0.5;
                transform: scale(0.82);
            }

            100% {
                opacity: 0;
                transform: scale(1.36);
            }
        }

        @media (min-width: 768px) {
            .timeline-node-wrap {
                top: 50%;
                transform: translateY(-50%);
            }
        }

        @media (max-width: 767px) {
            .lesson-block {
                --timeline-x: 18px;
                --timeline-node-size: 32px;
            }

            .lesson-block::before,
            .lesson-block::after {
                left: calc(var(--timeline-x) - 1.5px);
            }

            .timeline-node-wrap {
                left: calc(var(--timeline-x) - 65px);
            }
        }

        @media (prefers-reduced-motion: reduce) {

            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                scroll-behavior: auto !important;
                transition-duration: 0.01ms !important;
            }
        }

        /* ─── LEARNOMETER LOGIN PREMIUM ─── */
        @keyframes learno-float-a {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-8px); }
        }
        @keyframes learno-float-b {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-5px); }
        }

        .learno-hero-overlay {
            background: linear-gradient(108deg,
                rgba(6,3,2,0.86) 0%,
                rgba(6,3,2,0.62) 36%,
                rgba(6,3,2,0.18) 64%,
                transparent 100%);
        }

        .learno-glass-card {
            background: rgba(255, 255, 255, 0.13);
            backdrop-filter: blur(28px);
            -webkit-backdrop-filter: blur(28px);
            border: 1px solid rgba(255, 255, 255, 0.22);
            border-radius: 18px;
            padding: 14px 16px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.28);
            animation: learno-float-a 4s ease-in-out infinite;
        }

        .learno-glass-card:nth-child(2),
        .learno-glass-card:nth-child(4) {
            animation-name: learno-float-b;
            animation-duration: 5.4s;
        }

        .learno-auth-card {
            background: #FFFFFF;
            border-radius: 30px;
            padding: 42px;
            box-shadow: 0 28px 72px rgba(28, 25, 23, 0.10), 0 6px 20px rgba(28, 25, 23, 0.04);
            border: 1px solid rgba(232, 224, 216, 0.9);
        }

        .learno-input-wrap {
            display: flex;
            align-items: center;
            gap: 12px;
            height: 54px;
            padding: 0 16px;
            border: 1.5px solid #E5DDD6;
            border-radius: 14px;
            background: #FAFAF9;
            transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
        }

        .learno-input-wrap:focus-within {
            border-color: #a51034;
            background: #FFFFFF;
            box-shadow: 0 0 0 4px rgba(164, 16, 52, 0.08);
        }

        .learno-input-icon {
            width: 16px !important;
            height: 16px !important;
            color: #a51034;
            flex-shrink: 0;
        }

        .learno-input {
            flex: 1;
            min-width: 0;
            background: transparent;
            border: none;
            outline: none;
            font-size: 14px;
            font-weight: 500;
            color: #1C1917;
            text-transform: uppercase;
        }

        .learno-input::placeholder {
            color: #BDB6B0;
            font-weight: 400;
        }

        .xseed-site-footer {
            margin-top: auto;
            border-top: 1px solid rgba(168, 139, 118, 0.18);
            background: rgba(255, 252, 248, 0.98);
            font-family: 'Inter', sans-serif;
        }

        .xseed-site-footer__inner {
            max-width: 1600px;
            margin: 0 auto;
            min-height: 88px;
            padding: 14px 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 24px;
        }

        .xseed-site-footer__brand {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .xseed-site-footer__brand img {
            display: block;
            width: auto;
            height: auto;
            max-height: 54px;
            max-width: min(150px, 100%);
            object-fit: contain;
        }

        .xseed-site-footer__copy {
            min-width: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 4px;
            text-align: left;
            color: #6f6761;
        }

        .xseed-site-footer__title {
            font-family: 'Poppins', 'Inter', sans-serif;
            font-size: clamp(14px, 2vw, 14px);
            line-height: 1.35;
            font-weight: 500;
            color: #4e4742;
            letter-spacing: -0.01em;
        }

        .xseed-site-footer__meta {
            font-family: 'Poppins', 'Inter', sans-serif;
            font-size: clamp(10px, 1vw, 12px);
            line-height: 1.45;
            font-weight: 500;
            color: #8a817a;
        }

        .xseed-site-footer__title strong,
        .xseed-site-footer__meta strong {
            font-weight: 700;
            color: #2f2a27;
        }

        body[data-initial-tab="Learnometer"] {
            margin: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        body[data-initial-tab="Learnometer"] #learnometerPanel {
            flex: 1 0 auto;
        }

        body[data-initial-tab="Learnometer"] .xseed-site-footer {
            margin-top: auto;
            margin-bottom: 0;
        }

        @media (max-width: 767px) {
            .xseed-site-footer__inner {
                min-height: 0;
                padding: 14px 16px;
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }

            .xseed-site-footer__brand img {
                max-height: 42px;
                max-width: 132px;
            }

            .xseed-site-footer__title {
                font-size: 15px;
                line-height: 1.4;
            }

            .xseed-site-footer__meta {
                font-size: 13px;
                line-height: 1.45;
            }
        }

        .learno-cta {
            width: 100%;
            height: 56px;
            border-radius: 14px;
            font-size: 15px;
            font-weight: 700;
            border: none;
            cursor: pointer;
            letter-spacing: 0.01em;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: transform 0.18s ease, box-shadow 0.18s ease;
        }

        .learno-cta-on {
            background: linear-gradient(135deg, #a51034 0%, #7C0C27 100%);
            color: #FFFFFF;
            box-shadow: 0 14px 32px rgba(164, 16, 52, 0.30);
        }

        .learno-cta-on:hover {
            transform: translateY(-2px);
            box-shadow: 0 20px 44px rgba(164, 16, 52, 0.36);
        }

        .learno-cta-on:active {
            transform: translateY(0);
        }

        .learno-cta-off {
            background: #F2EFEC;
            color: #A8A29E;
            cursor: not-allowed;
            box-shadow: none;
        }