/* ================================================================
   CodeBhavya — Artificial Intelligence & Machine Learning
   Premium course system inspired by the Advanced Data Structures UI
   ================================================================ */

.aiml-page {
    --aiml-navy-950: #04101f;
    --aiml-navy-900: #07182c;
    --aiml-navy-800: #0b2545;
    --aiml-blue-700: #155eef;
    --aiml-blue-600: #2563eb;
    --aiml-blue-500: #3b82f6;
    --aiml-cyan-500: #22d3ee;
    --aiml-teal-500: #14b8a6;
    --aiml-purple-500: #8b5cf6;
    --aiml-gold: #d4af37;
    --aiml-gold-light: #f5d76e;
    --aiml-green: #16a34a;
    --aiml-red: #dc2626;
    --aiml-slate-700: #334155;
    --aiml-slate-600: #475569;
    --aiml-slate-500: #64748b;
    --aiml-slate-300: #cbd5e1;
    --aiml-slate-200: #e2e8f0;
    --aiml-slate-100: #f1f5f9;
    --aiml-surface: #ffffff;
    --aiml-page-bg: #f4f7fb;
    --aiml-heading: #071d3b;
    --aiml-border: #d7e2ef;
    --aiml-shadow: 0 14px 38px rgba(7, 24, 44, 0.08);
    --aiml-shadow-strong: 0 22px 60px rgba(7, 24, 44, 0.15);
    margin: 0;
    background: var(--aiml-page-bg);
    color: var(--aiml-slate-700);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
}

/* =========================================================
   AI & ML LEVEL 22 — GENERATIVE AI, RAG & AGENTS
   ========================================================= */

.aiml-level-twenty-two-page .aiml-genai-hero {
    background:
        radial-gradient(circle at 86% 23%, rgba(139, 92, 246, .28), transparent 31%),
        radial-gradient(circle at 67% 93%, rgba(16, 185, 129, .18), transparent 34%),
        linear-gradient(112deg, #06182b 0%, #0a304b 54%, #182d69 100%);
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(430px, .75fr);
    min-height: 625px;
    overflow: hidden;
    position: relative;
}

.aiml-level-twenty-two-page .aiml-genai-hero::before {
    background-image:
        linear-gradient(rgba(125, 211, 252, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 211, 252, .05) 1px, transparent 1px);
    background-size: 40px 40px;
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.aiml-level-twenty-two-page .aiml-genai-hero .aiml-lesson-hero-copy,
.aiml-level-twenty-two-page .aiml-genai-hero-visual {
    position: relative;
    z-index: 1;
}

.aiml-level-twenty-two-page .aiml-genai-hero-visual {
    align-self: center;
    background: rgba(3, 18, 34, .82);
    border: 1px solid #286487;
    border-radius: 30px;
    box-shadow: inset 0 0 48px rgba(34, 211, 238, .05), 0 28px 64px rgba(2, 12, 28, .3);
    margin: 34px 34px 34px 4px;
    min-height: 510px;
    overflow: hidden;
    padding: 18px 15px 135px;
}

.aiml-level-twenty-two-page .aiml-genai-hero-visual svg {
    display: block;
    height: 390px;
    margin: 0 auto;
    max-width: 100%;
    width: 610px;
}

.aiml-level-twenty-two-page .genai-source rect {
    fill: #102d49;
    stroke: #38bdf8;
    stroke-width: 1.8;
}

.aiml-level-twenty-two-page .genai-source text,
.aiml-level-twenty-two-page .genai-core text,
.aiml-level-twenty-two-page .genai-output text {
    fill: #edfaff;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    text-anchor: middle;
}

.aiml-level-twenty-two-page .genai-route path {
    fill: none;
    stroke: #38bdf8;
    stroke-dasharray: 6 6;
    stroke-width: 2.2;
}

.aiml-level-twenty-two-page .genai-core circle {
    fill: #132b58;
    filter: drop-shadow(0 0 20px rgba(167, 139, 250, .3));
    stroke: #a78bfa;
    stroke-width: 2.4;
}

.aiml-level-twenty-two-page .genai-output-line {
    fill: none;
    stroke: #facc15;
    stroke-width: 3;
}

.aiml-level-twenty-two-page .genai-output rect {
    fill: #123447;
    filter: drop-shadow(0 0 16px rgba(52, 211, 153, .3));
    stroke: #34d399;
    stroke-width: 2.3;
}

.aiml-level-twenty-two-page .genai-loop {
    fill: none;
    stroke: #34d399;
    stroke-dasharray: 7 7;
    stroke-width: 2.2;
}

.aiml-level-twenty-two-page .genai-loop-label {
    fill: #67e8f9;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .06em;
    text-anchor: middle;
}

.aiml-level-twenty-two-page .aiml-genai-hero-note {
    background: rgba(5, 20, 38, .97);
    border: 1px solid #315f7c;
    border-radius: 18px;
    bottom: 23px;
    display: grid;
    gap: 8px;
    left: 25px;
    padding: 16px 20px;
    position: absolute;
    right: 25px;
}

.aiml-level-twenty-two-page .aiml-genai-hero-note span {
    color: #6ee7b7;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .11em;
}

.aiml-level-twenty-two-page .aiml-genai-hero-note strong {
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.45;
}

.aiml-level-twenty-two-page .aiml-genai-hero-note code {
    color: #facc15;
    font-size: 13px;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.aiml-level-twenty-two-page .aiml-twenty-two-family-grid,
.aiml-level-twenty-two-page .aiml-twenty-two-prompt-grid,
.aiml-level-twenty-two-page .aiml-twenty-two-ground-grid,
.aiml-level-twenty-two-page .aiml-twenty-two-security-grid,
.aiml-level-twenty-two-page .aiml-twenty-two-production-grid {
    display: grid;
    gap: 16px;
}

.aiml-level-twenty-two-page .aiml-twenty-two-family-grid,
.aiml-level-twenty-two-page .aiml-twenty-two-prompt-grid,
.aiml-level-twenty-two-page .aiml-twenty-two-ground-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.aiml-level-twenty-two-page .aiml-twenty-two-security-grid,
.aiml-level-twenty-two-page .aiml-twenty-two-production-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.aiml-level-twenty-two-page .aiml-twenty-two-family-grid article,
.aiml-level-twenty-two-page .aiml-twenty-two-prompt-grid article,
.aiml-level-twenty-two-page .aiml-twenty-two-ground-grid article,
.aiml-level-twenty-two-page .aiml-twenty-two-security-grid article,
.aiml-level-twenty-two-page .aiml-twenty-two-production-grid article {
    background: linear-gradient(145deg, #fff, #f3f8fd);
    border: 1px solid #d1e1ee;
    border-radius: 18px;
    min-width: 0;
    padding: 22px;
}

.aiml-level-twenty-two-page .aiml-twenty-two-family-grid article { border-top: 4px solid #8b5cf6; }
.aiml-level-twenty-two-page .aiml-twenty-two-prompt-grid article { border-top: 4px solid #06b6d4; }
.aiml-level-twenty-two-page .aiml-twenty-two-ground-grid article { border-top: 4px solid #10b981; }
.aiml-level-twenty-two-page .aiml-twenty-two-security-grid article { border-left: 5px solid #ef4444; }
.aiml-level-twenty-two-page .aiml-twenty-two-production-grid article { border-left: 5px solid #2563eb; }

.aiml-level-twenty-two-page .aiml-twenty-two-family-grid span,
.aiml-level-twenty-two-page .aiml-twenty-two-prompt-grid span,
.aiml-level-twenty-two-page .aiml-twenty-two-ground-grid span,
.aiml-level-twenty-two-page .aiml-twenty-two-security-grid span,
.aiml-level-twenty-two-page .aiml-twenty-two-production-grid span {
    color: #1d4ed8;
    display: block;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .07em;
}

.aiml-level-twenty-two-page .aiml-twenty-two-family-grid strong,
.aiml-level-twenty-two-page .aiml-twenty-two-ground-grid strong {
    color: #071d3b;
    display: block;
    font-size: 18px;
    margin-top: 10px;
}

.aiml-level-twenty-two-page .aiml-twenty-two-prompt-grid code {
    color: #7c3aed;
    display: block;
    font-size: 15px;
    font-weight: 900;
    margin-top: 11px;
    overflow-wrap: anywhere;
}

.aiml-level-twenty-two-page .aiml-twenty-two-family-grid p,
.aiml-level-twenty-two-page .aiml-twenty-two-prompt-grid p,
.aiml-level-twenty-two-page .aiml-twenty-two-ground-grid p,
.aiml-level-twenty-two-page .aiml-twenty-two-security-grid p,
.aiml-level-twenty-two-page .aiml-twenty-two-production-grid p {
    color: #526980;
    line-height: 1.62;
    margin: 9px 0 0;
    overflow-wrap: break-word;
}

.aiml-level-twenty-two-page .aiml-twenty-two-rag-flow,
.aiml-level-twenty-two-page .aiml-twenty-two-agent-flow {
    align-items: stretch;
    display: grid;
    gap: 9px;
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr);
}

.aiml-level-twenty-two-page .aiml-twenty-two-rag-flow article,
.aiml-level-twenty-two-page .aiml-twenty-two-agent-flow article {
    background: #fff;
    border: 1px solid #d2e1ef;
    border-radius: 18px;
    min-width: 0;
    padding: 21px 14px;
    text-align: center;
}

.aiml-level-twenty-two-page .aiml-twenty-two-rag-flow span,
.aiml-level-twenty-two-page .aiml-twenty-two-agent-flow strong {
    color: #1d4ed8;
    display: block;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .06em;
}

.aiml-level-twenty-two-page .aiml-twenty-two-agent-flow b {
    align-items: center;
    background: #e0f2fe;
    border-radius: 50%;
    color: #0369a1;
    display: inline-flex;
    height: 28px;
    justify-content: center;
    margin-bottom: 9px;
    width: 28px;
}

.aiml-level-twenty-two-page .aiml-twenty-two-rag-flow code {
    color: #7c3aed;
    display: block;
    font-size: 12px;
    font-weight: 850;
    margin-top: 9px;
    overflow-wrap: anywhere;
}

.aiml-level-twenty-two-page .aiml-twenty-two-rag-flow p,
.aiml-level-twenty-two-page .aiml-twenty-two-agent-flow p {
    color: #536a82;
    font-size: 14px;
    line-height: 1.52;
    margin: 8px 0 0;
}

.aiml-level-twenty-two-page .aiml-twenty-two-rag-flow > i,
.aiml-level-twenty-two-page .aiml-twenty-two-agent-flow > i {
    align-self: center;
    color: #d3a90b;
    font-size: 22px;
    font-style: normal;
    font-weight: 900;
    text-align: center;
}

.aiml-level-twenty-two-page .aiml-fifteen-lab-section {
    background: #061426;
    border-color: #244663;
    overflow: hidden;
    padding: 0;
}

.aiml-level-twenty-two-page .aiml-fifteen-lab-heading {
    align-items: center;
    background: #0b2038;
    border-bottom: 1px solid #294967;
    display: flex;
    gap: 22px;
    justify-content: space-between;
    padding: 27px 30px;
}

.aiml-level-twenty-two-page .aiml-fifteen-lab-heading > div { min-width: 0; }

.aiml-level-twenty-two-page .aiml-fifteen-lab-heading span {
    color: #7dd3fc;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .08em;
}

.aiml-level-twenty-two-page .aiml-fifteen-lab-heading h2 {
    color: #fff;
    font-size: clamp(27px, 3vw, 42px);
    line-height: 1.14;
    margin: 7px 0;
}

.aiml-level-twenty-two-page .aiml-fifteen-lab-heading p {
    color: #b8d9f4;
    line-height: 1.55;
    margin: 0;
    max-width: 930px;
}

.aiml-level-twenty-two-page .aiml-fifteen-lab-heading > strong {
    border: 1px solid #0891b2;
    border-radius: 999px;
    color: #67e8f9;
    flex: 0 0 auto;
    font-size: 11px;
    letter-spacing: .05em;
    padding: 12px 17px;
}

.aiml-level-twenty-two-page #ragCanvas,
.aiml-level-twenty-two-page #agentCanvas {
    background: #07192d;
    display: block;
    height: 500px;
    width: 100%;
}

.aiml-level-twenty-two-page .aiml-twenty-two-rag-metrics,
.aiml-level-twenty-two-page .aiml-twenty-two-agent-metrics {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.aiml-level-twenty-two-page .aiml-twenty-two-equation,
.aiml-level-twenty-two-page .aiml-twenty-two-evidence {
    background: #061426;
    border: 1px solid #315775;
    border-radius: 12px;
    display: grid;
    gap: 8px;
    margin: 17px 0;
    min-width: 0;
    padding: 15px;
}

.aiml-level-twenty-two-page .aiml-twenty-two-equation span,
.aiml-level-twenty-two-page .aiml-twenty-two-evidence span {
    color: #7dd3fc;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
}

.aiml-level-twenty-two-page .aiml-twenty-two-equation code {
    color: #fde047;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.55;
    overflow-wrap: anywhere;
    white-space: normal;
}

.aiml-level-twenty-two-page .aiml-twenty-two-evidence strong {
    color: #a7f3d0;
    font-size: 12px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

@media (max-width: 1280px) {
    .aiml-level-twenty-two-page .aiml-genai-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .aiml-level-twenty-two-page .aiml-genai-hero-visual {
        margin: 0 auto 36px;
        max-width: 810px;
        width: calc(100% - 72px);
    }

    .aiml-level-twenty-two-page .aiml-twenty-two-family-grid,
    .aiml-level-twenty-two-page .aiml-twenty-two-prompt-grid,
    .aiml-level-twenty-two-page .aiml-twenty-two-ground-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1020px) {
    .aiml-level-twenty-two-page .aiml-twenty-two-rag-flow,
    .aiml-level-twenty-two-page .aiml-twenty-two-agent-flow {
        grid-template-columns: repeat(5, minmax(170px, 1fr));
        overflow-x: auto;
        padding-bottom: 10px;
        scrollbar-width: thin;
    }

    .aiml-level-twenty-two-page .aiml-twenty-two-rag-flow > i,
    .aiml-level-twenty-two-page .aiml-twenty-two-agent-flow > i {
        display: none;
    }
}

@media (max-width: 850px) {
    .aiml-level-twenty-two-page .aiml-twenty-two-security-grid,
    .aiml-level-twenty-two-page .aiml-twenty-two-production-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aiml-level-twenty-two-page .aiml-twenty-two-rag-metrics,
    .aiml-level-twenty-two-page .aiml-twenty-two-agent-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aiml-level-twenty-two-page .aiml-twenty-two-rag-metrics article:last-child,
    .aiml-level-twenty-two-page .aiml-twenty-two-agent-metrics article:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .aiml-level-twenty-two-page .main-content { font-size: 16px; }

    .aiml-level-twenty-two-page .aiml-genai-hero-visual {
        border-radius: 22px;
        margin: 0 14px 22px;
        min-height: 435px;
        padding: 9px 8px 139px;
        width: calc(100% - 28px);
    }

    .aiml-level-twenty-two-page .aiml-genai-hero-visual svg { height: 310px; }

    .aiml-level-twenty-two-page .aiml-genai-hero-note {
        bottom: 14px;
        left: 13px;
        padding: 13px 15px;
        right: 13px;
    }

    .aiml-level-twenty-two-page .aiml-fifteen-lab-heading {
        align-items: flex-start;
        flex-direction: column;
        padding: 23px 19px;
    }

    .aiml-level-twenty-two-page .aiml-fifteen-lab-heading > strong {
        white-space: normal;
    }

    .aiml-level-twenty-two-page #ragCanvas,
    .aiml-level-twenty-two-page #agentCanvas {
        height: 660px;
    }
}

/* ============================================================
   AI & ML PRACTICE ARENA — 12 LEVELS / 60 JUDGE CHALLENGES
   ============================================================ */

.aiml-practice-page .main-content {
    min-width: 0;
}

.aiml-practice-page .cb-practice-arena-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid #cfe0f3;
    background:
        radial-gradient(circle at 92% 8%, rgba(37, 99, 235, .13), transparent 32%),
        radial-gradient(circle at 8% 100%, rgba(229, 185, 51, .13), transparent 31%),
        #fff;
}

.aiml-practice-page .cb-practice-arena-kicker,
.aiml-practice-page .section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #b17800;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .08em;
}

.aiml-practice-page .cb-practice-arena-kicker {
    padding: 8px 13px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
}

.aiml-practice-page .cb-practice-arena-hero h1 {
    margin: 18px 0 10px;
    color: #071d3b;
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1.08;
}

.aiml-practice-page .cb-practice-arena-intro {
    max-width: 970px;
    margin: 0;
    color: #405a76;
    font-size: 18px;
    line-height: 1.75;
}

.aiml-practice-page .cb-arena-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 22px;
}

.aiml-practice-page .cb-arena-stat {
    min-width: 0;
    padding: 16px;
    border: 1px solid #d5e1ee;
    border-radius: 14px;
    background: rgba(248, 251, 255, .94);
}

.aiml-practice-page .cb-arena-stat strong {
    display: block;
    color: #071d3b;
    font-size: 23px;
    line-height: 1.25;
}

.aiml-practice-page .cb-arena-stat span {
    display: block;
    margin-top: 5px;
    color: #58708a;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
}

.aiml-practice-page .cb-arena-online-progress {
    margin-top: 18px;
    padding: 17px;
    border: 1px solid #cfe0f3;
    border-radius: 15px;
    background: #f8fbff;
}

.aiml-practice-page .cb-arena-progress-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
    color: #071d3b;
    font-size: 15px;
    font-weight: 900;
}

.aiml-practice-page .cb-arena-progress-track {
    height: 11px;
    overflow: hidden;
    border-radius: 999px;
    background: #dce7f2;
}

.aiml-practice-page #cbPracticeOverallBar {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #22d3ee);
    transition: width .25s ease;
}

.aiml-practice-page .cb-progress-stats {
    margin-top: 13px;
}

.aiml-practice-page .cb-path-card > h2,
.aiml-practice-page .cb-practice-guide h2 {
    margin: 10px 0 6px;
    color: #071d3b;
}

.aiml-practice-page .cb-path-card > p,
.aiml-practice-page .cb-practice-guide > div > p {
    color: #526a82;
    font-size: 16px;
}

.aiml-practice-page .cb-stage-block {
    margin-top: 28px;
}

.aiml-practice-page .cb-stage-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 13px;
}

.aiml-practice-page .cb-stage-heading h2 {
    margin: 0;
    color: #153b6f;
    font-size: 24px;
}

.aiml-practice-page .cb-stage-heading p {
    max-width: 590px;
    margin: 0;
    color: #617991;
    font-size: 14px;
    line-height: 1.5;
    text-align: right;
}

.aiml-practice-page .cb-level-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.aiml-practice-page .cb-level-card {
    display: flex;
    min-height: 230px;
    min-width: 0;
    flex-direction: column;
    padding: 19px;
    border: 1px solid #d6e2ef;
    border-top: 4px solid #2563eb;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 9px 25px rgba(7, 29, 59, .06);
    color: inherit;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.aiml-practice-page .cb-level-card:hover {
    transform: translateY(-3px);
    border-color: #76a8e8;
    box-shadow: 0 14px 30px rgba(37, 99, 235, .12);
}

.aiml-practice-page .cb-level-card.cb-level-placement {
    border-color: #e1bd4b;
    background: linear-gradient(180deg, #fffdf4, #fff);
}

.aiml-practice-page .cb-level-card-top,
.aiml-practice-page .cb-challenge-topline,
.aiml-practice-page .cb-level-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.aiml-practice-page .cb-level-number {
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: .08em;
}

.aiml-practice-page .cb-level-icon {
    font-size: 28px;
}

.aiml-practice-page .cb-level-card h3 {
    margin: 17px 0 8px;
    color: #071d3b;
    font-size: 21px;
    line-height: 1.3;
}

.aiml-practice-page .cb-level-card p {
    margin: 0;
    color: #5a7189;
    font-size: 15px;
    line-height: 1.6;
}

.aiml-practice-page .cb-level-meta,
.aiml-practice-page .cb-challenge-summary-meta,
.aiml-practice-page .cb-concept-row,
.aiml-practice-page .cb-challenge-actions,
.aiml-practice-page .cb-c-practice-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.aiml-practice-page .cb-level-meta {
    margin-top: auto;
    padding-top: 16px;
}

.aiml-practice-page .cb-level-meta span,
.aiml-practice-page .cb-challenge-summary-meta span {
    padding: 6px 9px;
    border-radius: 999px;
    background: #eef3f8;
    color: #405a76;
    font-size: 12px;
    font-weight: 850;
}

.aiml-practice-page .cb-level-start,
.aiml-practice-page .cb-view-challenge {
    display: inline-flex;
    margin-top: 13px;
    color: #1d4ed8;
    font-size: 14px;
    font-weight: 950;
}

.aiml-practice-page .cb-level-section {
    scroll-margin-top: 92px;
    margin: 18px 0;
    overflow: hidden;
    border: 1px solid #cfdeed;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(7, 29, 59, .04);
}

.aiml-practice-page .cb-level-section > summary,
.aiml-practice-page .cb-challenge-card > summary {
    list-style: none;
    cursor: pointer;
}

.aiml-practice-page .cb-level-section > summary::-webkit-details-marker,
.aiml-practice-page .cb-challenge-card > summary::-webkit-details-marker {
    display: none;
}

.aiml-practice-page .cb-level-section > summary {
    padding: 20px 22px;
    background: linear-gradient(90deg, #f4f8fc, #fff);
}

.aiml-practice-page .cb-level-summary-main {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 14px;
}

.aiml-practice-page .cb-level-summary-icon {
    display: grid;
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    place-items: center;
    border-radius: 14px;
    background: #eaf3ff;
    font-size: 27px;
}

.aiml-practice-page .cb-level-summary-text {
    min-width: 0;
}

.aiml-practice-page .cb-level-summary-text strong {
    display: block;
    color: #071d3b;
    font-size: 20px;
    line-height: 1.35;
}

.aiml-practice-page .cb-level-summary-text > span {
    display: block;
    margin-top: 4px;
    color: #5a7189;
    font-size: 14px;
    line-height: 1.45;
}

.aiml-practice-page .cb-level-open-pill {
    flex: 0 0 auto;
    padding: 9px 12px;
    border-radius: 999px;
    background: #eaf3ff;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 900;
}

.aiml-practice-page .cb-level-section[open] .cb-level-open-pill {
    background: #dff7ec;
    color: #08764d;
}

.aiml-practice-page .cb-level-content {
    padding: 0 19px 21px;
    border-top: 1px solid #e4ecf4;
}

.aiml-practice-page .cb-level-content-intro {
    margin: 17px 2px 15px;
    color: #5b7289;
    font-size: 15px;
    line-height: 1.65;
}

.aiml-practice-page .cb-challenge-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.aiml-practice-page .cb-challenge-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #dbe5ef;
    border-radius: 15px;
    background: #fff;
}

.aiml-practice-page .cb-challenge-card[open] {
    grid-column: 1 / -1;
    border-color: #9cc3ef;
    box-shadow: 0 10px 26px rgba(37, 99, 235, .10);
}

.aiml-practice-page .cb-challenge-card > summary {
    padding: 17px;
}

.aiml-practice-page .cb-challenge-number {
    color: #5b7289;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: .04em;
}

.aiml-practice-page .cb-difficulty,
.aiml-practice-page .cb-practice-badge {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.aiml-practice-page .cb-diff-easy { background: #e7f8ef; color: #08764d; }
.aiml-practice-page .cb-diff-medium { background: #fff5df; color: #9a6000; }
.aiml-practice-page .cb-diff-hard { background: #fdecec; color: #b42323; }
.aiml-practice-page .cb-practice-badge:empty { display: none; }
.aiml-practice-page .cb-practice-badge.solved { background: #dff7ec; color: #08764d; }
.aiml-practice-page .cb-practice-badge.completed { background: #e8f1ff; color: #1d4ed8; }

.aiml-practice-page .cb-challenge-card h3 {
    margin: 12px 0 6px;
    color: #071d3b;
    font-size: 19px;
    line-height: 1.35;
}

.aiml-practice-page .cb-core-skill {
    margin: 0;
    color: #5b7289;
    font-size: 14px;
}

.aiml-practice-page .cb-challenge-summary-meta {
    margin-top: 12px;
}

.aiml-practice-page .cb-challenge-body {
    padding: 0 17px 18px;
    border-top: 1px solid #e8eef5;
}

.aiml-practice-page .cb-challenge-hero {
    margin-top: 17px;
    padding: 18px;
    border: 1px solid #cee2f7;
    border-radius: 14px;
    background: #f7fbff;
}

.aiml-practice-page .cb-challenge-label {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    background: #071d3b;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .07em;
}

.aiml-practice-page .cb-challenge-hero h2 {
    margin: 12px 0 8px;
    color: #153b6f;
    font-size: 25px;
}

.aiml-practice-page .cb-challenge-hero p {
    margin: 0;
    color: #405a76;
    font-size: 16px;
    line-height: 1.7;
}

.aiml-practice-page .cb-challenge-spec-grid,
.aiml-practice-page .cb-example-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
    margin-top: 15px;
}

.aiml-practice-page .cb-challenge-spec {
    min-width: 0;
    padding: 15px;
    border: 1px solid #dbe5ef;
    border-radius: 13px;
    background: #fff;
}

.aiml-practice-page .cb-challenge-spec h4 {
    margin: 0 0 8px;
    color: #153b6f;
    font-size: 16px;
}

.aiml-practice-page .cb-challenge-spec p {
    margin: 0;
    color: #405a76;
    font-size: 15px;
    line-height: 1.65;
}

.aiml-practice-page .cb-example-box {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #253c58;
    border-radius: 13px;
    background: #071526;
}

.aiml-practice-page .cb-example-box strong {
    display: block;
    padding: 11px 13px;
    background: #11263e;
    color: #dce9f7;
    font-size: 14px;
}

.aiml-practice-page .cb-example-box pre {
    min-height: 76px;
    margin: 0;
    padding: 14px;
    overflow: auto;
    background: #071526;
    color: #f8fafc;
    font-family: Consolas, "Courier New", monospace;
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.aiml-practice-page .cb-explanation-box {
    margin-top: 15px;
    padding: 14px 16px;
    border-left: 4px solid #d4a514;
    border-radius: 10px;
    background: #fffaf0;
    color: #405a76;
    font-size: 15px;
    line-height: 1.65;
}

.aiml-practice-page .cb-concept-row {
    margin-top: 14px;
}

.aiml-practice-page .cb-concept-row span {
    padding: 6px 9px;
    border-radius: 999px;
    background: #eaf3ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
}

.aiml-practice-page .cb-challenge-actions {
    margin-top: 16px;
}

.aiml-practice-page .cb-challenge-actions button,
.aiml-practice-page .cb-c-practice-actions button {
    min-height: 44px;
    border: 1px solid #b9cee3;
    border-radius: 10px;
    padding: 10px 15px;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 900;
    transition: transform .15s ease, filter .15s ease;
}

.aiml-practice-page .cb-challenge-actions button:hover,
.aiml-practice-page .cb-c-practice-actions button:hover {
    transform: translateY(-1px);
    filter: brightness(.98);
}

.aiml-practice-page .cb-practice-start-button {
    border-color: #d7ad28 !important;
    background: #e8bd35;
    color: #071d3b;
}

.aiml-practice-page .cb-practice-hint-button,
.aiml-practice-page .cb-practice-program-button {
    background: #fff;
    color: #153b6f;
}

.aiml-practice-page .cb-c-practice-hint {
    margin-top: 12px;
    padding: 13px 15px;
    border-left: 4px solid #d4a514;
    border-radius: 9px;
    background: #fff8e7;
    color: #6f4c00;
    font-size: 15px;
    line-height: 1.6;
}

.aiml-practice-page .cb-c-practice-workspace {
    margin-top: 14px;
    padding: 0 13px 13px;
    overflow: hidden;
    border: 1px solid #274663;
    border-radius: 13px;
    background: #071526;
}

.aiml-practice-page .cb-c-practice-workspace-title {
    margin: 0 -13px 13px;
    padding: 13px 16px;
    border-bottom: 1px solid #274663;
    background: #0c2138;
    color: #fff;
    font-size: 16px;
    font-weight: 900;
}

.aiml-practice-page .cb-c-practice-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(310px, .85fr);
    gap: 12px;
}

.aiml-practice-page .cb-c-practice-panel {
    min-width: 0;
    padding: 12px;
    border: 1px solid #294965;
    border-radius: 10px;
    background: #0b1d31;
}

.aiml-practice-page .cb-c-practice-panel h4 {
    margin: 0 0 8px;
    color: #d9e7f5;
    font-size: 14px;
}

.aiml-practice-page .cb-c-code-editor,
.aiml-practice-page .cb-c-practice-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #3e607e;
    border-radius: 9px;
    outline: none;
    background: #030d1c;
    color: #e7f2ff;
    font-family: Consolas, "Courier New", monospace;
    font-size: 14px;
    line-height: 1.55;
    resize: vertical;
}

.aiml-practice-page .cb-c-code-editor:focus,
.aiml-practice-page .cb-c-practice-input:focus {
    border-color: #4ea8ff;
    box-shadow: 0 0 0 3px rgba(78, 168, 255, .14);
}

.aiml-practice-page .cb-c-code-editor {
    min-height: 330px;
    padding: 13px;
}

.aiml-practice-page .cb-c-practice-input {
    min-height: 94px;
    padding: 11px;
}

.aiml-practice-page .cb-c-practice-actions {
    margin-top: 10px;
}

.aiml-practice-page .cb-c-run-btn { background: #138a58; color: #fff; border-color: #26a873 !important; }
.aiml-practice-page .cb-c-check-btn { background: #1769e0; color: #fff; border-color: #4a8ae8 !important; }
.aiml-practice-page .cb-c-reset-btn { background: #304b65; color: #fff; border-color: #496983 !important; }
.aiml-practice-page .cb-c-run-btn:disabled,
.aiml-practice-page .cb-c-check-btn:disabled { cursor: not-allowed; opacity: .55; transform: none; }

.aiml-practice-page .cb-c-practice-note {
    margin: 9px 0 0;
    color: #a9bfd4;
    font-size: 13px;
    line-height: 1.55;
}

.aiml-practice-page .cb-c-output-heading,
.aiml-practice-page .cb-c-tests-heading {
    margin-top: 12px !important;
}

.aiml-practice-page .cb-c-practice-output {
    min-height: 92px;
    max-height: 210px;
    margin: 0;
    padding: 11px;
    overflow: auto;
    border: 1px solid #3e607e;
    border-radius: 9px;
    background: #030d1c;
    color: #e7f2ff;
    font-family: Consolas, "Courier New", monospace;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.aiml-practice-page .cb-c-test-results {
    display: grid;
    gap: 7px;
}

.aiml-practice-page .cb-c-test-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid #2c4b67;
    border-radius: 8px;
    background: #071526;
    color: #c1d3e4;
    font-size: 13px;
}

.aiml-practice-page .cb-c-test-row.pass { border-color: #267d5a; }
.aiml-practice-page .cb-c-test-row.pass strong { color: #7ce7b5; }
.aiml-practice-page .cb-c-test-row.fail { border-color: #9c4444; }
.aiml-practice-page .cb-c-test-row.fail strong { color: #ffaaaa; }

.aiml-practice-page .cb-c-practice-score {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #294965;
}

.aiml-practice-page .cb-c-practice-score-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.aiml-practice-page .cb-c-score-item {
    min-width: 0;
    padding: 9px;
    border: 1px solid #2c4b67;
    border-radius: 8px;
    background: #071526;
    text-align: center;
}

.aiml-practice-page .cb-c-score-item strong {
    display: block;
    color: #9eb6cc;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.aiml-practice-page .cb-c-score-item span {
    display: block;
    margin-top: 4px;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.aiml-practice-page .cb-c-practice-message {
    margin-top: 10px;
    padding: 10px;
    border-radius: 8px;
    background: #102c5b;
    color: #e1edff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.5;
    text-align: center;
}

.aiml-practice-page .cb-c-practice-solution {
    margin-top: 13px;
    overflow: hidden;
    border: 1px solid #bcd5ef;
    border-radius: 11px;
    background: #fff;
}

.aiml-practice-page .cb-c-practice-solution-title {
    padding: 11px 13px;
    background: #e5f1ff;
    color: #1d4ed8;
    font-size: 14px;
    font-weight: 900;
}

.aiml-practice-page .cb-c-practice-solution pre {
    max-height: 480px;
    margin: 0;
    padding: 15px;
    overflow: auto;
    border: 0;
    border-radius: 0;
    background: #071526;
    color: #e7f2ff;
    font-family: Consolas, "Courier New", monospace;
    font-size: 14px;
    line-height: 1.55;
    white-space: pre;
}

.aiml-practice-page .cb-practice-guide {
    display: grid;
    grid-template-columns: minmax(240px, .65fr) minmax(0, 1.35fr);
    gap: 22px;
    align-items: start;
}

.aiml-practice-page .cb-practice-guide-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.aiml-practice-page .cb-practice-guide-grid article {
    padding: 16px;
    border: 1px solid #d5e1ee;
    border-radius: 13px;
    background: #f8fbff;
}

.aiml-practice-page .cb-practice-guide-grid strong {
    display: block;
    color: #153b6f;
    font-size: 17px;
}

.aiml-practice-page .cb-practice-guide-grid p {
    margin: 6px 0 0;
    color: #526a82;
    font-size: 14px;
    line-height: 1.55;
}

@media (max-width: 1050px) {
    .aiml-practice-page .cb-level-card-grid,
    .aiml-practice-page .cb-arena-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aiml-practice-page .cb-practice-guide {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .aiml-practice-page .cb-challenge-grid,
    .aiml-practice-page .cb-challenge-spec-grid,
    .aiml-practice-page .cb-example-grid,
    .aiml-practice-page .cb-c-practice-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .aiml-practice-page .cb-challenge-card[open] {
        grid-column: auto;
    }

    .aiml-practice-page .cb-stage-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .aiml-practice-page .cb-stage-heading p {
        text-align: left;
    }
}

@media (max-width: 640px) {
    .aiml-practice-page .cb-level-card-grid,
    .aiml-practice-page .cb-arena-stats,
    .aiml-practice-page .cb-practice-guide-grid,
    .aiml-practice-page .cb-c-practice-score-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .aiml-practice-page .cb-practice-arena-hero h1 {
        font-size: 34px;
    }

    .aiml-practice-page .cb-practice-arena-intro {
        font-size: 16px;
    }

    .aiml-practice-page .cb-level-open-pill {
        display: none;
    }

    .aiml-practice-page .cb-level-section > summary {
        padding: 16px;
    }

    .aiml-practice-page .cb-level-content {
        padding: 0 10px 12px;
    }

    .aiml-practice-page .cb-level-summary-main {
        align-items: flex-start;
    }

    .aiml-practice-page .cb-level-summary-icon {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        font-size: 23px;
    }

    .aiml-practice-page .cb-level-summary-text strong {
        font-size: 17px;
    }

    .aiml-practice-page .cb-challenge-body {
        padding: 0 11px 13px;
    }

    .aiml-practice-page .cb-c-code-editor {
        min-height: 280px;
    }
}

@media (max-width: 560px) {
    .aiml-level-twenty-two-page .aiml-twenty-two-family-grid,
    .aiml-level-twenty-two-page .aiml-twenty-two-prompt-grid,
    .aiml-level-twenty-two-page .aiml-twenty-two-ground-grid,
    .aiml-level-twenty-two-page .aiml-twenty-two-security-grid,
    .aiml-level-twenty-two-page .aiml-twenty-two-production-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .aiml-level-twenty-two-page .aiml-twenty-two-rag-flow,
    .aiml-level-twenty-two-page .aiml-twenty-two-agent-flow {
        grid-template-columns: repeat(5, minmax(215px, 1fr));
    }
}

@media (max-width: 430px) {
    .aiml-level-twenty-two-page .aiml-genai-hero-visual {
        min-height: 420px;
    }

    .aiml-level-twenty-two-page .aiml-genai-hero-visual svg { height: 280px; }
    .aiml-level-twenty-two-page .aiml-genai-hero-note code { font-size: 11px; }
}

/* Level 22 cascade-safe laboratory overrides. */
.aiml-level-twenty-two-page .aiml-twenty-two-rag-metrics,
.aiml-level-twenty-two-page .aiml-twenty-two-agent-metrics {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 850px) {
    .aiml-level-twenty-two-page .aiml-twenty-two-rag-metrics,
    .aiml-level-twenty-two-page .aiml-twenty-two-agent-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aiml-level-twenty-two-page .aiml-twenty-two-rag-metrics article:last-child,
    .aiml-level-twenty-two-page .aiml-twenty-two-agent-metrics article:last-child {
        grid-column: 1 / -1;
    }
}

/* Level 22 tracer and practice alignment with the CodeBhavya lesson system. */
.aiml-level-twenty-two-page .aiml-code-lines {
    height: 360px;
}

.aiml-level-twenty-two-page .aiml-code-panel,
.aiml-level-twenty-two-page .aiml-live-panel {
    height: 409px;
}

.aiml-level-twenty-two-page .aiml-live-panel {
    overflow-y: auto;
    scrollbar-width: thin;
}

.aiml-level-twenty-two-page .aiml-variable code {
    line-height: 1.45;
    overflow-wrap: anywhere;
    white-space: normal;
    word-break: break-word;
}

.aiml-level-twenty-two-page .aiml-problem-data span {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.aiml-level-twenty-two-page .aiml-workspace textarea {
    box-sizing: border-box;
    display: block;
    min-height: 210px;
}

.aiml-level-twenty-two-page .aiml-quiz-option span,
.aiml-level-twenty-two-page .aiml-interview-question strong {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: normal;
}

@media (max-width: 980px) {
    .aiml-level-twenty-two-page .aiml-code-panel,
    .aiml-level-twenty-two-page .aiml-live-panel {
        height: auto;
    }

    .aiml-level-twenty-two-page .aiml-live-panel {
        max-height: 430px;
    }
}

@media (max-width: 700px) {
    .aiml-level-twenty-two-page .aiml-code-lines {
        height: 330px;
    }

    .aiml-level-twenty-two-page .aiml-quiz-options {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Level 23 — Classical AI, Search and Reasoning */
.aiml-level-twenty-three-page .aiml-search-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.42fr) minmax(430px, .86fr);
    min-height: 600px;
    overflow: hidden;
    border: 1px solid #244a68;
    border-radius: 28px;
    background: radial-gradient(circle at 86% 9%, rgba(139,92,246,.25), transparent 31%), linear-gradient(135deg, #06172a 0%, #0b3153 61%, #182b68 100%);
    color: #fff;
}
.aiml-level-twenty-three-page .aiml-search-hero::before {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(92,181,229,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(92,181,229,.055) 1px, transparent 1px);
    background-size: 42px 42px;
    content: "";
    pointer-events: none;
}
.aiml-level-twenty-three-page .aiml-search-hero .aiml-lesson-hero-copy,
.aiml-level-twenty-three-page .aiml-search-hero-visual { position: relative; z-index: 1; }
.aiml-level-twenty-three-page .aiml-search-hero-visual {
    align-self: center;
    width: calc(100% - 54px);
    margin: 27px 27px 27px 0;
    padding: 22px 20px 20px;
    overflow: hidden;
    border: 1px solid #315f7e;
    border-radius: 28px;
    background: rgba(4,22,41,.9);
    box-shadow: 0 26px 70px rgba(0,0,0,.25);
}
.aiml-level-twenty-three-page .aiml-search-hero-visual svg { display: block; width: 100%; height: auto; }
.aiml-level-twenty-three-page .search-edges path { fill: none; stroke: #315c7c; stroke-width: 3; }
.aiml-level-twenty-three-page .search-route path { fill: none; stroke: #f8c928; stroke-dasharray: 14 8; stroke-linecap: round; stroke-width: 7; }
.aiml-level-twenty-three-page .search-nodes circle { fill: #0c2844; stroke: #39d9f3; stroke-width: 3; }
.aiml-level-twenty-three-page .search-nodes circle:last-of-type { fill: #135940; stroke: #45e3a2; }
.aiml-level-twenty-three-page .search-nodes text { fill: #fff; font: 900 16px Arial, sans-serif; text-anchor: middle; }
.aiml-level-twenty-three-page .aiml-search-hero-note { margin-top: -6px; padding: 18px 20px; border: 1px solid #315f7e; border-radius: 18px; background: #07182c; }
.aiml-level-twenty-three-page .aiml-search-hero-note span { display: block; color: #7dd3fc; font-size: 11px; font-weight: 950; letter-spacing: .09em; }
.aiml-level-twenty-three-page .aiml-search-hero-note strong { display: block; margin: 9px 0; color: #eff7ff; line-height: 1.5; }
.aiml-level-twenty-three-page .aiml-search-hero-note code { display: inline-block; padding: 7px 10px; border-radius: 8px; background: #eef6ff; color: #1361c8; font-weight: 900; }

.aiml-level-twenty-three-page .aiml-twenty-three-model-grid,
.aiml-level-twenty-three-page .aiml-twenty-three-equations,
.aiml-level-twenty-three-page .aiml-twenty-three-game-grid,
.aiml-level-twenty-three-page .aiml-twenty-three-csp-grid,
.aiml-level-twenty-three-page .aiml-twenty-three-logic-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
}
.aiml-level-twenty-three-page .aiml-twenty-three-compare,
.aiml-level-twenty-three-page .aiml-twenty-three-bayes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
}
.aiml-level-twenty-three-page .aiml-twenty-three-model-grid article,
.aiml-level-twenty-three-page .aiml-twenty-three-compare article,
.aiml-level-twenty-three-page .aiml-twenty-three-equations article,
.aiml-level-twenty-three-page .aiml-twenty-three-game-grid article,
.aiml-level-twenty-three-page .aiml-twenty-three-csp-grid article,
.aiml-level-twenty-three-page .aiml-twenty-three-logic-grid article,
.aiml-level-twenty-three-page .aiml-twenty-three-bayes article {
    min-width: 0;
    padding: 20px;
    border: 1px solid #cbdced;
    border-top: 4px solid #2563eb;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(7,29,59,.05);
}
.aiml-level-twenty-three-page .aiml-twenty-three-compare article { border-top-color: #d5a817; }
.aiml-level-twenty-three-page .aiml-twenty-three-equations article { border-top-color: #8b5cf6; }
.aiml-level-twenty-three-page .aiml-twenty-three-game-grid article { border-top-color: #ef7d32; }
.aiml-level-twenty-three-page .aiml-twenty-three-csp-grid article { border-top-color: #16a36a; }
.aiml-level-twenty-three-page .aiml-twenty-three-logic-grid article { border-top-color: #0891b2; }
.aiml-level-twenty-three-page .aiml-twenty-three-bayes article { border-top-color: #7c3aed; }
.aiml-level-twenty-three-page .aiml-twenty-three-model-grid span,
.aiml-level-twenty-three-page .aiml-twenty-three-compare span,
.aiml-level-twenty-three-page .aiml-twenty-three-equations span,
.aiml-level-twenty-three-page .aiml-twenty-three-game-grid span,
.aiml-level-twenty-three-page .aiml-twenty-three-csp-grid span,
.aiml-level-twenty-three-page .aiml-twenty-three-logic-grid span,
.aiml-level-twenty-three-page .aiml-twenty-three-bayes span { display: block; color: #1954c6; font-size: 11px; font-weight: 950; letter-spacing: .08em; }
.aiml-level-twenty-three-page .aiml-twenty-three-model-grid strong,
.aiml-level-twenty-three-page .aiml-twenty-three-compare strong,
.aiml-level-twenty-three-page .aiml-twenty-three-equations strong,
.aiml-level-twenty-three-page .aiml-twenty-three-game-grid strong,
.aiml-level-twenty-three-page .aiml-twenty-three-csp-grid strong,
.aiml-level-twenty-three-page .aiml-twenty-three-logic-grid strong { display: block; margin-top: 8px; color: #071d3b; font-size: 17px; line-height: 1.35; }
.aiml-level-twenty-three-page .aiml-twenty-three-model-grid p,
.aiml-level-twenty-three-page .aiml-twenty-three-compare p,
.aiml-level-twenty-three-page .aiml-twenty-three-equations p,
.aiml-level-twenty-three-page .aiml-twenty-three-game-grid p,
.aiml-level-twenty-three-page .aiml-twenty-three-csp-grid p,
.aiml-level-twenty-three-page .aiml-twenty-three-logic-grid p,
.aiml-level-twenty-three-page .aiml-twenty-three-bayes p { margin: 8px 0 0; color: #526a82; line-height: 1.55; }
.aiml-level-twenty-three-page .aiml-twenty-three-compare code,
.aiml-level-twenty-three-page .aiml-twenty-three-equations code,
.aiml-level-twenty-three-page .aiml-twenty-three-bayes code { display: block; margin-top: 12px; padding: 9px; overflow-wrap: anywhere; border-radius: 8px; background: #eef5ff; color: #6d28d9; font-size: 12px; font-weight: 850; white-space: normal; }

.aiml-level-twenty-three-page .aiml-fifteen-lab-section { padding: 0; overflow: hidden; border-color: #244663; background: #061426; }
.aiml-level-twenty-three-page .aiml-fifteen-lab-heading { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 27px 30px; border-bottom: 1px solid #294967; background: #0b2038; }
.aiml-level-twenty-three-page .aiml-fifteen-lab-heading > div { min-width: 0; }
.aiml-level-twenty-three-page .aiml-fifteen-lab-heading span { color: #7dd3fc; font-size: 12px; font-weight: 950; letter-spacing: .08em; }
.aiml-level-twenty-three-page .aiml-fifteen-lab-heading h2 { margin: 7px 0; color: #fff; font-size: clamp(27px, 3vw, 42px); line-height: 1.14; }
.aiml-level-twenty-three-page .aiml-fifteen-lab-heading p { max-width: 930px; margin: 0; color: #b8d9f4; line-height: 1.55; }
.aiml-level-twenty-three-page .aiml-fifteen-lab-heading > strong { flex: 0 0 auto; padding: 12px 17px; border: 1px solid #0891b2; border-radius: 999px; color: #67e8f9; font-size: 11px; letter-spacing: .05em; white-space: nowrap; }
.aiml-level-twenty-three-page .aiml-fifteen-lab-grid { display: grid; grid-template-columns: minmax(230px,.62fr) minmax(480px,1.45fr) minmax(270px,.78fr); gap: 16px; padding: 22px; background: #061426; }
.aiml-level-twenty-three-page .aiml-fifteen-controls,
.aiml-level-twenty-three-page .aiml-fifteen-stage,
.aiml-level-twenty-three-page .aiml-fifteen-inspector { min-width: 0; overflow: hidden; border: 1px solid #2b4a67; border-radius: 18px; background: #0a1d33; }
.aiml-level-twenty-three-page .aiml-fifteen-controls,
.aiml-level-twenty-three-page .aiml-fifteen-inspector { padding: 20px; }
.aiml-level-twenty-three-page .aiml-fifteen-controls { display: flex; flex-direction: column; gap: 13px; }
.aiml-level-twenty-three-page .aiml-fifteen-controls label { color: #93c5fd; font-size: 13px; font-weight: 850; letter-spacing: .035em; }
.aiml-level-twenty-three-page .aiml-fifteen-controls select { display: block; width: 100%; min-height: 43px; margin-top: 7px; padding: 8px 10px; border: 1px solid #3b5b76; border-radius: 10px; background: #07182c; color: #f8fafc; font: inherit; letter-spacing: 0; }
.aiml-level-twenty-three-page .aiml-fifteen-controls button { width: 100%; min-height: 43px; padding: 9px 13px; border: 1px solid #4f718e; border-radius: 10px; background: #1d3348; color: #fff; font: inherit; font-weight: 850; cursor: pointer; }
.aiml-level-twenty-three-page .aiml-fifteen-controls button:hover { background: #29475f; }
.aiml-level-twenty-three-page .aiml-fifteen-controls button:disabled { cursor: not-allowed; opacity: .45; }
.aiml-level-twenty-three-page .aiml-fifteen-controls .aiml-lab-primary { border-color: #e2b827; background: #e6be36; color: #061426; box-shadow: 0 13px 24px rgba(230,190,54,.14); }
.aiml-level-twenty-three-page .aiml-fifteen-controls > p { margin: 3px 0 0; color: #91a9c0; font-size: 14px; line-height: 1.55; }
.aiml-level-twenty-three-page #searchCanvas,
.aiml-level-twenty-three-page #gameCanvas { display: block; width: 100%; height: 500px; background: #07192d; }
.aiml-level-twenty-three-page .aiml-fifteen-metrics { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 1px; border-top: 1px solid #2b4a67; background: #2b4a67; }
.aiml-level-twenty-three-page .aiml-fifteen-metrics article { min-width: 0; padding: 13px 8px; background: #0b2038; text-align: center; }
.aiml-level-twenty-three-page .aiml-fifteen-metrics span,
.aiml-level-twenty-three-page .aiml-fifteen-inspector > span { display: block; color: #7dd3fc; font-size: 10px; font-weight: 900; letter-spacing: .07em; }
.aiml-level-twenty-three-page .aiml-fifteen-metrics strong { display: block; margin-top: 4px; overflow-wrap: anywhere; color: #f8fafc; font-size: 14px; }
.aiml-level-twenty-three-page .aiml-fifteen-inspector h3 { margin: 10px 0 0; color: #f8fafc; font-size: 19px; line-height: 1.42; }
.aiml-level-twenty-three-page .aiml-fifteen-inspector > p { color: #b5c7d8; font-size: 14px; line-height: 1.62; }
.aiml-level-twenty-three-page .aiml-twenty-three-equation,
.aiml-level-twenty-three-page .aiml-twenty-three-evidence { display: grid; gap: 8px; min-width: 0; margin: 17px 0; padding: 15px; border: 1px solid #315775; border-radius: 12px; background: #061426; }
.aiml-level-twenty-three-page .aiml-twenty-three-equation span,
.aiml-level-twenty-three-page .aiml-twenty-three-evidence span,
.aiml-level-twenty-three-page .aiml-fifteen-next span { color: #7dd3fc; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.aiml-level-twenty-three-page .aiml-twenty-three-equation code { color: #fde047; font-size: 12px; font-weight: 850; line-height: 1.55; overflow-wrap: anywhere; white-space: normal; }
.aiml-level-twenty-three-page .aiml-twenty-three-evidence strong { color: #a7f3d0; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.aiml-level-twenty-three-page .aiml-fifteen-next { margin-top: 17px; padding: 15px; border-left: 5px solid #22d3ee; border-radius: 11px; background: #eef7ff; }
.aiml-level-twenty-three-page .aiml-fifteen-next span { color: #155eef; }
.aiml-level-twenty-three-page .aiml-fifteen-next strong { display: block; margin-top: 7px; color: #0d355f; font-size: 14px; line-height: 1.52; }

/* Level 23 cascade-safe tracer and practice alignment. */
.aiml-level-twenty-three-page .aiml-code-lines { height: 360px; }
.aiml-level-twenty-three-page .aiml-code-panel,
.aiml-level-twenty-three-page .aiml-live-panel { height: 409px; }
.aiml-level-twenty-three-page .aiml-live-panel { overflow-y: auto; scrollbar-width: thin; }
.aiml-level-twenty-three-page .aiml-variable code { line-height: 1.45; overflow-wrap: anywhere; white-space: normal; word-break: break-word; }
.aiml-level-twenty-three-page .aiml-problem-data span { max-width: 100%; overflow-wrap: anywhere; }
.aiml-level-twenty-three-page .aiml-workspace textarea { box-sizing: border-box; display: block; min-height: 210px; }
.aiml-level-twenty-three-page .aiml-quiz-option span,
.aiml-level-twenty-three-page .aiml-interview-question strong { min-width: 0; overflow-wrap: break-word; word-break: normal; }

@media (max-width: 1280px) {
    .aiml-level-twenty-three-page .aiml-search-hero { grid-template-columns: minmax(0,1fr); }
    .aiml-level-twenty-three-page .aiml-search-hero-visual { width: calc(100% - 72px); max-width: 780px; margin: 0 auto 36px; }
    .aiml-level-twenty-three-page .aiml-fifteen-lab-grid { grid-template-columns: minmax(220px,.62fr) minmax(0,1.38fr); }
    .aiml-level-twenty-three-page .aiml-fifteen-inspector { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
    .aiml-level-twenty-three-page .aiml-twenty-three-model-grid,
    .aiml-level-twenty-three-page .aiml-twenty-three-equations,
    .aiml-level-twenty-three-page .aiml-twenty-three-game-grid,
    .aiml-level-twenty-three-page .aiml-twenty-three-csp-grid,
    .aiml-level-twenty-three-page .aiml-twenty-three-logic-grid,
    .aiml-level-twenty-three-page .aiml-twenty-three-compare,
    .aiml-level-twenty-three-page .aiml-twenty-three-bayes { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .aiml-level-twenty-three-page .aiml-fifteen-lab-grid { grid-template-columns: minmax(0,1fr); }
    .aiml-level-twenty-three-page .aiml-fifteen-inspector { grid-column: auto; }
    .aiml-level-twenty-three-page .aiml-code-panel,
    .aiml-level-twenty-three-page .aiml-live-panel { height: auto; }
    .aiml-level-twenty-three-page .aiml-live-panel { max-height: none; }
    .aiml-level-twenty-three-page .aiml-code-lines { height: 390px; }
}
@media (max-width: 700px) {
    .aiml-level-twenty-three-page .main-content { font-size: 16px; }
    .aiml-level-twenty-three-page .aiml-search-hero-visual { width: calc(100% - 32px); margin: 0 16px 20px; padding: 13px; border-radius: 20px; }
    .aiml-level-twenty-three-page .aiml-fifteen-lab-heading { align-items: flex-start; flex-direction: column; padding: 22px 18px; }
    .aiml-level-twenty-three-page .aiml-fifteen-lab-heading > strong { white-space: normal; }
    .aiml-level-twenty-three-page .aiml-fifteen-lab-grid { padding: 12px; }
    .aiml-level-twenty-three-page .aiml-fifteen-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .aiml-level-twenty-three-page .aiml-fifteen-metrics article:last-child { grid-column: 1 / -1; }
    .aiml-level-twenty-three-page .aiml-twenty-three-model-grid,
    .aiml-level-twenty-three-page .aiml-twenty-three-equations,
    .aiml-level-twenty-three-page .aiml-twenty-three-game-grid,
    .aiml-level-twenty-three-page .aiml-twenty-three-csp-grid,
    .aiml-level-twenty-three-page .aiml-twenty-three-logic-grid,
    .aiml-level-twenty-three-page .aiml-twenty-three-compare,
    .aiml-level-twenty-three-page .aiml-twenty-three-bayes,
    .aiml-level-twenty-three-page .aiml-quiz-options { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 480px) {
    .aiml-level-twenty-three-page .aiml-search-hero-note { padding: 14px; }
    .aiml-level-twenty-three-page .aiml-search-hero-note code { font-size: 11px; }
    .aiml-level-twenty-three-page .aiml-code-lines { height: 350px; }
}

/* ========================================================================== */
/* LEVEL 14 — DIMENSIONALITY REDUCTION                                        */
/* ========================================================================== */

.aiml-level-fourteen-page .main-content {
    font-size: 16px;
}

.aiml-level-fourteen-page .aiml-reduction-hero {
    position: relative;
    overflow: hidden;
    min-height: 610px;
    background:
        radial-gradient(circle at 84% 15%, rgba(34, 211, 238, .18), transparent 28%),
        radial-gradient(circle at 63% 100%, rgba(139, 92, 246, .2), transparent 38%),
        linear-gradient(130deg, #051526 0%, #0a2948 54%, #1d376f 100%);
}

.aiml-level-fourteen-page .aiml-reduction-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(125, 211, 252, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 211, 252, .045) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(90deg, transparent 10%, #000 70%);
}

.aiml-level-fourteen-page .aiml-reduction-hero .aiml-lesson-hero-copy {
    position: relative;
    z-index: 2;
}

.aiml-level-fourteen-page .aiml-reduction-hero-visual {
    position: relative;
    z-index: 1;
    align-self: center;
    min-width: 0;
    min-height: 500px;
    margin: 32px 42px 32px 0;
    overflow: hidden;
    border: 1px solid #2c6082;
    border-radius: 28px;
    background: rgba(3, 18, 34, .84);
    box-shadow: inset 0 0 54px rgba(34, 211, 238, .05), 0 28px 70px rgba(1, 10, 24, .24);
}

.aiml-level-fourteen-page .aiml-reduction-hero-visual svg {
    display: block;
    width: 100%;
    height: 405px;
}

.aiml-level-fourteen-page .aiml-reduction-hero-visual .hero-grid {
    fill: none;
    stroke: #1a3c57;
    stroke-width: 1;
}

.aiml-level-fourteen-page .aiml-reduction-hero-visual .hero-points {
    fill: #22d3ee;
    stroke: #dffaff;
    stroke-width: 2;
    filter: drop-shadow(0 0 8px rgba(34, 211, 238, .78));
}

.aiml-level-fourteen-page .aiml-reduction-hero-visual .hero-pc {
    fill: none;
    stroke: url(#pcLine);
    stroke-linecap: round;
    stroke-width: 7;
}

.aiml-level-fourteen-page .aiml-reduction-hero-visual .hero-drops {
    fill: none;
    stroke: #a78bfa;
    stroke-dasharray: 4 4;
    stroke-width: 2;
}

.aiml-level-fourteen-page .aiml-reduction-hero-visual text {
    fill: #bff6ff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .02em;
}

.aiml-level-fourteen-page .aiml-reduction-hero-note {
    position: absolute;
    right: 26px;
    bottom: 24px;
    left: 26px;
    display: grid;
    gap: 5px;
    padding: 16px 20px;
    border: 1px solid #315473;
    border-radius: 16px;
    background: rgba(8, 29, 51, .96);
}

.aiml-level-fourteen-page .aiml-reduction-hero-note span {
    color: #67e8f9;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .09em;
}

.aiml-level-fourteen-page .aiml-reduction-hero-note strong {
    color: #f8fafc;
    font-size: 15px;
}

.aiml-level-fourteen-page .aiml-reduction-hero-note code {
    width: max-content;
    max-width: 100%;
    padding: 3px 8px;
    border-radius: 6px;
    background: #f8fafc;
    color: #d6a900;
    font-size: 15px;
    font-weight: 900;
}

.aiml-level-fourteen-page .aiml-fourteen-revision,
.aiml-level-fourteen-page .aiml-fourteen-pressure,
.aiml-level-fourteen-page .aiml-fourteen-math,
.aiml-level-fourteen-page .aiml-fourteen-evidence,
.aiml-level-fourteen-page .aiml-fourteen-nonlinear,
.aiml-level-fourteen-page .aiml-fourteen-placement,
.aiml-level-fourteen-page .aiml-fourteen-algorithms {
    display: grid;
    gap: 18px;
}

.aiml-level-fourteen-page .aiml-fourteen-revision,
.aiml-level-fourteen-page .aiml-fourteen-placement {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.aiml-level-fourteen-page .aiml-fourteen-pressure,
.aiml-level-fourteen-page .aiml-fourteen-math,
.aiml-level-fourteen-page .aiml-fourteen-nonlinear,
.aiml-level-fourteen-page .aiml-fourteen-algorithms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.aiml-level-fourteen-page .aiml-fourteen-evidence {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.aiml-level-fourteen-page .aiml-fourteen-revision > article,
.aiml-level-fourteen-page .aiml-fourteen-pressure > article,
.aiml-level-fourteen-page .aiml-fourteen-math > article,
.aiml-level-fourteen-page .aiml-fourteen-evidence > article,
.aiml-level-fourteen-page .aiml-fourteen-nonlinear > article,
.aiml-level-fourteen-page .aiml-fourteen-placement > article,
.aiml-level-fourteen-page .aiml-fourteen-algorithms > article {
    min-width: 0;
    padding: 23px;
    border: 1px solid #d3e1ef;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(7, 29, 59, .045);
}

.aiml-level-fourteen-page .aiml-fourteen-revision > article,
.aiml-level-fourteen-page .aiml-fourteen-placement > article {
    border-top: 5px solid #2563eb;
}

.aiml-level-fourteen-page .aiml-fourteen-pressure > article:nth-child(2),
.aiml-level-fourteen-page .aiml-fourteen-math > article:nth-child(2),
.aiml-level-fourteen-page .aiml-fourteen-nonlinear > article:nth-child(2) {
    border-top: 5px solid #22d3ee;
}

.aiml-level-fourteen-page .aiml-fourteen-pressure > article:nth-child(3),
.aiml-level-fourteen-page .aiml-fourteen-math > article:nth-child(3),
.aiml-level-fourteen-page .aiml-fourteen-nonlinear > article:nth-child(3) {
    border-top: 5px solid #8b5cf6;
}

.aiml-level-fourteen-page .aiml-fourteen-pressure > article:nth-child(4),
.aiml-level-fourteen-page .aiml-fourteen-math > article:nth-child(4),
.aiml-level-fourteen-page .aiml-fourteen-nonlinear > article:nth-child(4) {
    border-top: 5px solid #d4af37;
}

.aiml-level-fourteen-page .aiml-fourteen-pressure span,
.aiml-level-fourteen-page .aiml-fourteen-revision span,
.aiml-level-fourteen-page .aiml-fourteen-math span,
.aiml-level-fourteen-page .aiml-fourteen-evidence span,
.aiml-level-fourteen-page .aiml-fourteen-nonlinear span,
.aiml-level-fourteen-page .aiml-fourteen-placement span,
.aiml-level-fourteen-page .aiml-fourteen-algorithms > article > span {
    display: block;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .055em;
}

.aiml-level-fourteen-page .aiml-fourteen-revision strong,
.aiml-level-fourteen-page .aiml-fourteen-pressure strong,
.aiml-level-fourteen-page .aiml-fourteen-math strong,
.aiml-level-fourteen-page .aiml-fourteen-evidence strong,
.aiml-level-fourteen-page .aiml-fourteen-nonlinear strong {
    display: block;
    margin-top: 9px;
    color: #071d3b;
    font-size: 18px;
}

.aiml-level-fourteen-page .aiml-fourteen-revision p,
.aiml-level-fourteen-page .aiml-fourteen-pressure p,
.aiml-level-fourteen-page .aiml-fourteen-math p,
.aiml-level-fourteen-page .aiml-fourteen-evidence p,
.aiml-level-fourteen-page .aiml-fourteen-nonlinear p,
.aiml-level-fourteen-page .aiml-fourteen-placement p {
    margin: 8px 0 0;
    color: #50677e;
    line-height: 1.58;
}

.aiml-level-fourteen-page .aiml-fourteen-math code,
.aiml-level-fourteen-page .aiml-fourteen-evidence code {
    display: block;
    width: max-content;
    max-width: 100%;
    margin-top: 13px;
    padding: 7px 10px;
    border-radius: 8px;
    background: #edf5ff;
    color: #0c4dba;
    font-size: 15px;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.aiml-level-fourteen-page .aiml-fourteen-pca-flow,
.aiml-level-fourteen-page .aiml-fourteen-workflow,
.aiml-level-fourteen-page .aiml-fourteen-pipeline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
}

.aiml-level-fourteen-page .aiml-fourteen-pca-flow > article,
.aiml-level-fourteen-page .aiml-fourteen-workflow > article,
.aiml-level-fourteen-page .aiml-fourteen-pipeline > article {
    min-width: 0;
    padding: 21px 17px;
    border: 1px solid #d2e1ef;
    border-radius: 18px;
    background: #fff;
    text-align: center;
}

.aiml-level-fourteen-page .aiml-fourteen-pca-flow b,
.aiml-level-fourteen-page .aiml-fourteen-workflow b {
    display: grid;
    width: 40px;
    height: 40px;
    margin: 0 auto 13px;
    place-items: center;
    border-radius: 50%;
    background: #dbeafe;
    color: #155eef;
}

.aiml-level-fourteen-page .aiml-fourteen-pca-flow strong,
.aiml-level-fourteen-page .aiml-fourteen-workflow strong,
.aiml-level-fourteen-page .aiml-fourteen-pipeline b {
    display: block;
    color: #071d3b;
    font-size: 16px;
}

.aiml-level-fourteen-page .aiml-fourteen-pca-flow p,
.aiml-level-fourteen-page .aiml-fourteen-workflow p {
    margin: 7px 0 0;
    color: #536a82;
    line-height: 1.5;
}

.aiml-level-fourteen-page .aiml-fourteen-pca-flow > i,
.aiml-level-fourteen-page .aiml-fourteen-workflow > i,
.aiml-level-fourteen-page .aiml-fourteen-pipeline > i {
    align-self: center;
    color: #d3a90b;
    font-size: 24px;
    font-style: normal;
    font-weight: 900;
    text-align: center;
}

.aiml-level-fourteen-page .aiml-fourteen-pipeline > article {
    display: grid;
    align-content: center;
    gap: 8px;
    border-top: 5px solid #2563eb;
}

.aiml-level-fourteen-page .aiml-fourteen-pipeline span {
    color: #526981;
    line-height: 1.48;
}

.aiml-level-fourteen-page .aiml-fourteen-svd-formula {
    display: grid;
    grid-template-columns: minmax(170px, .58fr) repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

.aiml-level-fourteen-page .aiml-fourteen-svd-formula > code {
    display: grid;
    min-height: 170px;
    place-items: center;
    border-radius: 20px;
    background: linear-gradient(145deg, #07182c, #11366c);
    color: #f8d54a;
    font-size: clamp(26px, 3vw, 42px);
    font-weight: 900;
    box-shadow: 0 18px 40px rgba(7, 24, 44, .16);
}

.aiml-level-fourteen-page .aiml-fourteen-svd-formula > article {
    padding: 24px;
    border: 1px solid #d3e1ef;
    border-radius: 20px;
    background: #fff;
}

.aiml-level-fourteen-page .aiml-fourteen-svd-formula span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    background: #dbeafe;
    color: #155eef;
    font-size: 20px;
    font-weight: 900;
}

.aiml-level-fourteen-page .aiml-fourteen-svd-formula strong {
    display: block;
    margin-top: 15px;
    color: #071d3b;
    font-size: 17px;
}

.aiml-level-fourteen-page .aiml-fourteen-svd-formula p {
    margin: 7px 0 0;
    color: #526981;
    line-height: 1.55;
}

.aiml-level-fourteen-page .aiml-fourteen-rank {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
}

.aiml-level-fourteen-page .aiml-fourteen-rank > article {
    min-width: 0;
    padding: 24px;
    border: 1px solid #d3e1ef;
    border-radius: 18px;
    background: #fff;
    text-align: center;
}

.aiml-level-fourteen-page .aiml-fourteen-rank > i {
    align-self: center;
    color: #d4af37;
    font-size: 27px;
    font-style: normal;
    font-weight: 900;
    text-align: center;
}

.aiml-level-fourteen-page .aiml-fourteen-rank span {
    color: #155eef;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .06em;
}

.aiml-level-fourteen-page .aiml-fourteen-rank strong,
.aiml-level-fourteen-page .aiml-fourteen-rank code {
    display: block;
    margin-top: 8px;
    color: #071d3b;
    font-size: 18px;
}

.aiml-level-fourteen-page .aiml-fourteen-rank code {
    color: #7c3aed;
    font-size: 16px;
}

.aiml-level-fourteen-page .aiml-fourteen-rank p {
    margin: 8px 0 0;
    color: #526981;
}

.aiml-level-fourteen-page .aiml-fourteen-lda {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.aiml-level-fourteen-page .aiml-fourteen-lda > article {
    min-width: 0;
    padding: 25px;
    border: 1px solid #d3e1ef;
    border-top: 5px solid #2563eb;
    border-radius: 19px;
    background: #fff;
}

.aiml-level-fourteen-page .aiml-fourteen-lda > article:nth-child(2) { border-top-color: #8b5cf6; }
.aiml-level-fourteen-page .aiml-fourteen-lda > article:nth-child(3) { border-top-color: #d4af37; }

.aiml-level-fourteen-page .aiml-fourteen-lda span {
    color: #155eef;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .07em;
}

.aiml-level-fourteen-page .aiml-fourteen-lda strong,
.aiml-level-fourteen-page .aiml-fourteen-lda code {
    display: block;
    margin-top: 10px;
}

.aiml-level-fourteen-page .aiml-fourteen-lda strong { color: #071d3b; font-size: 18px; }
.aiml-level-fourteen-page .aiml-fourteen-lda code { color: #7c3aed; overflow-wrap: anywhere; }
.aiml-level-fourteen-page .aiml-fourteen-lda p { margin: 8px 0 0; color: #526981; line-height: 1.58; }

.aiml-level-fourteen-page .aiml-fourteen-pca-lab,
.aiml-level-fourteen-page .aiml-fourteen-svd-lab {
    display: grid;
    grid-template-columns: minmax(230px, .62fr) minmax(480px, 1.45fr) minmax(260px, .78fr);
    gap: 16px;
    padding: 22px;
    background: #061426;
}

.aiml-level-fourteen-page .aiml-fourteen-controls,
.aiml-level-fourteen-page .aiml-fourteen-inspector,
.aiml-level-fourteen-page .aiml-fourteen-stage,
.aiml-level-fourteen-page .aiml-fourteen-svd-stage {
    min-width: 0;
    border: 1px solid #2b4a67;
    border-radius: 18px;
    background: #0a1d33;
}

.aiml-level-fourteen-page .aiml-fourteen-controls,
.aiml-level-fourteen-page .aiml-fourteen-inspector {
    padding: 20px;
}

.aiml-level-fourteen-page .aiml-fourteen-controls {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.aiml-level-fourteen-page .aiml-fourteen-controls label {
    display: grid;
    gap: 7px;
    color: #93c5fd;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: .035em;
}

.aiml-level-fourteen-page .aiml-fourteen-controls select,
.aiml-level-fourteen-page .aiml-fourteen-controls input[type="range"] {
    width: 100%;
}

.aiml-level-fourteen-page .aiml-fourteen-controls select {
    min-height: 43px;
    padding: 8px 10px;
    border: 1px solid #3b5b76;
    border-radius: 10px;
    background: #07182c;
    color: #f8fafc;
    font: inherit;
    letter-spacing: 0;
}

.aiml-level-fourteen-page .aiml-fourteen-controls output {
    color: #facc15;
    font-size: 16px;
}

.aiml-level-fourteen-page .aiml-fourteen-controls .aiml-button {
    width: 100%;
    min-height: 43px;
    justify-content: center;
    padding: 9px 13px;
}

.aiml-level-fourteen-page .aiml-fourteen-controls > p {
    margin: 3px 0 0;
    color: #91a9c0;
    font-size: 14px;
    line-height: 1.55;
}

.aiml-level-fourteen-page .aiml-fourteen-stage,
.aiml-level-fourteen-page .aiml-fourteen-svd-stage {
    overflow: hidden;
}

.aiml-level-fourteen-page #pcaCanvas {
    display: block;
    width: 100%;
    height: 465px;
}

.aiml-level-fourteen-page .aiml-fourteen-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    border-top: 1px solid #2b4a67;
    background: #2b4a67;
}

.aiml-level-fourteen-page .aiml-fourteen-metrics article {
    min-width: 0;
    padding: 13px 10px;
    background: #0b2038;
    text-align: center;
}

.aiml-level-fourteen-page .aiml-fourteen-metrics span,
.aiml-level-fourteen-page .aiml-fourteen-inspector > span,
.aiml-level-fourteen-page .aiml-fourteen-best span {
    display: block;
    color: #7dd3fc;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .07em;
}

.aiml-level-fourteen-page .aiml-fourteen-metrics strong {
    display: block;
    margin-top: 4px;
    color: #f8fafc;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.aiml-level-fourteen-page .aiml-fourteen-inspector > strong {
    display: block;
    margin-top: 10px;
    color: #f8fafc;
    font-size: 18px;
    line-height: 1.4;
}

.aiml-level-fourteen-page .aiml-fourteen-inspector > p {
    color: #b5c7d8;
    font-size: 14px;
    line-height: 1.62;
}

.aiml-level-fourteen-page .aiml-fourteen-matrix,
.aiml-level-fourteen-page .aiml-fourteen-loadings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 15px;
}

.aiml-level-fourteen-page .aiml-fourteen-matrix article,
.aiml-level-fourteen-page .aiml-fourteen-loadings article {
    min-width: 0;
    padding: 12px;
    border: 1px solid #2f516f;
    border-radius: 10px;
    background: #07182c;
}

.aiml-level-fourteen-page .aiml-fourteen-matrix span,
.aiml-level-fourteen-page .aiml-fourteen-loadings span {
    display: block;
    color: #82bdec;
    font-size: 11px;
    font-weight: 850;
}

.aiml-level-fourteen-page .aiml-fourteen-matrix code,
.aiml-level-fourteen-page .aiml-fourteen-loadings code {
    display: block;
    margin-top: 4px;
    color: #fde047;
    font-size: 13px;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.aiml-level-fourteen-page .aiml-fourteen-best {
    margin-top: 17px;
    padding: 14px;
    border-left: 5px solid #22d3ee;
    border-radius: 11px;
    background: #eef7ff;
}

.aiml-level-fourteen-page .aiml-fourteen-best span { color: #155eef; }

.aiml-level-fourteen-page .aiml-fourteen-best strong {
    display: block;
    margin-top: 7px;
    color: #0d355f;
    font-size: 14px;
    line-height: 1.52;
}

.aiml-level-fourteen-page .aiml-fourteen-heatmaps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 18px;
}

.aiml-level-fourteen-page .aiml-fourteen-heatmaps figure {
    min-width: 0;
    margin: 0;
    padding: 10px;
    border: 1px solid #294965;
    border-radius: 14px;
    background: #07182c;
}

.aiml-level-fourteen-page .aiml-fourteen-heatmaps canvas {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 8px;
    image-rendering: pixelated;
}

.aiml-level-fourteen-page .aiml-fourteen-heatmaps figcaption {
    margin-top: 8px;
    color: #dbeafe;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
}

.aiml-level-fourteen-page .aiml-fourteen-spectrum {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.aiml-level-fourteen-page .aiml-fourteen-spectrum article {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 58px;
    gap: 8px;
    align-items: center;
}

.aiml-level-fourteen-page .aiml-fourteen-spectrum span,
.aiml-level-fourteen-page .aiml-fourteen-spectrum strong {
    color: #c9e4fb;
    font-size: 12px;
}

.aiml-level-fourteen-page .aiml-fourteen-spectrum i {
    display: block;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #213b56;
}

.aiml-level-fourteen-page .aiml-fourteen-spectrum i b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #22d3ee, #8b5cf6);
}

.aiml-level-fourteen-page .aiml-fourteen-algorithms ol {
    margin: 15px 0 0;
    padding-left: 23px;
    color: #405c75;
}

.aiml-level-fourteen-page .aiml-fourteen-algorithms li {
    margin: 8px 0;
    line-height: 1.5;
}

@media (max-width: 1180px) {
    .aiml-level-fourteen-page .aiml-reduction-hero { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-fourteen-page .aiml-reduction-hero-visual { width: calc(100% - 72px); min-height: 480px; margin: 0 36px 34px; }
    .aiml-level-fourteen-page .aiml-fourteen-pca-lab,
    .aiml-level-fourteen-page .aiml-fourteen-svd-lab { grid-template-columns: minmax(220px, .62fr) minmax(0, 1.38fr); }
    .aiml-level-fourteen-page .aiml-fourteen-inspector { grid-column: 1 / -1; }
    .aiml-level-fourteen-page .aiml-fourteen-svd-formula { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .aiml-level-fourteen-page .aiml-fourteen-svd-formula > code { grid-column: 1 / -1; min-height: 120px; }
}

@media (max-width: 900px) {
    .aiml-level-fourteen-page .aiml-fourteen-revision,
    .aiml-level-fourteen-page .aiml-fourteen-pressure,
    .aiml-level-fourteen-page .aiml-fourteen-math,
    .aiml-level-fourteen-page .aiml-fourteen-evidence,
    .aiml-level-fourteen-page .aiml-fourteen-nonlinear,
    .aiml-level-fourteen-page .aiml-fourteen-placement,
    .aiml-level-fourteen-page .aiml-fourteen-algorithms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aiml-level-fourteen-page .aiml-fourteen-pca-flow,
    .aiml-level-fourteen-page .aiml-fourteen-workflow,
    .aiml-level-fourteen-page .aiml-fourteen-pipeline { grid-template-columns: repeat(5, minmax(205px, 1fr)); overflow-x: auto; padding-bottom: 12px; }
    .aiml-level-fourteen-page .aiml-fourteen-pca-flow > i,
    .aiml-level-fourteen-page .aiml-fourteen-workflow > i,
    .aiml-level-fourteen-page .aiml-fourteen-pipeline > i { display: none; }
    .aiml-level-fourteen-page .aiml-fourteen-rank { grid-template-columns: repeat(3, minmax(190px, 1fr)); overflow-x: auto; padding-bottom: 10px; }
    .aiml-level-fourteen-page .aiml-fourteen-rank > i { display: none; }
    .aiml-level-fourteen-page .aiml-fourteen-pca-lab,
    .aiml-level-fourteen-page .aiml-fourteen-svd-lab { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-fourteen-page .aiml-fourteen-inspector { grid-column: auto; }
}

@media (max-width: 700px) {
    .aiml-level-fourteen-page .main-content { font-size: 16px; }
    .aiml-level-fourteen-page .aiml-reduction-hero-visual { width: calc(100% - 28px); min-height: 390px; margin: 0 14px 22px; }
    .aiml-level-fourteen-page .aiml-reduction-hero-visual svg { height: 300px; }
    .aiml-level-fourteen-page .aiml-reduction-hero-note { right: 13px; bottom: 14px; left: 13px; padding: 13px 15px; }
    .aiml-level-fourteen-page .aiml-fourteen-revision,
    .aiml-level-fourteen-page .aiml-fourteen-pressure,
    .aiml-level-fourteen-page .aiml-fourteen-math,
    .aiml-level-fourteen-page .aiml-fourteen-evidence,
    .aiml-level-fourteen-page .aiml-fourteen-nonlinear,
    .aiml-level-fourteen-page .aiml-fourteen-placement,
    .aiml-level-fourteen-page .aiml-fourteen-algorithms,
    .aiml-level-fourteen-page .aiml-fourteen-lda,
    .aiml-level-fourteen-page .aiml-fourteen-svd-formula { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-fourteen-page .aiml-fourteen-svd-formula > code { grid-column: auto; min-height: 105px; }
    .aiml-level-fourteen-page .aiml-fourteen-pca-lab,
    .aiml-level-fourteen-page .aiml-fourteen-svd-lab { padding: 15px 10px 21px; }
    .aiml-level-fourteen-page .aiml-fourteen-controls,
    .aiml-level-fourteen-page .aiml-fourteen-inspector { padding: 16px; }
    .aiml-level-fourteen-page #pcaCanvas { height: 385px; }
    .aiml-level-fourteen-page .aiml-fourteen-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aiml-level-fourteen-page .aiml-fourteen-heatmaps { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-fourteen-page .aiml-fourteen-heatmaps figure { max-width: 310px; width: 100%; margin: 0 auto; }
}

/* ========================================================================== */
/* LEVEL 15 — ANOMALY DETECTION                                               */
/* ========================================================================== */

.aiml-level-fifteen-page .main-content { font-size: 16px; }

.aiml-level-fifteen-page .aiml-anomaly-hero {
    position: relative;
    overflow: hidden;
    min-height: 610px;
    background:
        radial-gradient(circle at 84% 15%, rgba(239, 68, 68, .18), transparent 28%),
        radial-gradient(circle at 65% 100%, rgba(34, 211, 238, .16), transparent 38%),
        linear-gradient(130deg, #051526 0%, #0a2948 54%, #342053 100%);
}

.aiml-level-fifteen-page .aiml-anomaly-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(125, 211, 252, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 211, 252, .04) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(90deg, transparent 8%, #000 72%);
}

.aiml-level-fifteen-page .aiml-anomaly-hero .aiml-lesson-hero-copy { position: relative; z-index: 2; }

.aiml-level-fifteen-page .aiml-anomaly-hero-visual {
    position: relative;
    z-index: 1;
    align-self: center;
    min-width: 0;
    min-height: 500px;
    margin: 32px 42px 32px 0;
    overflow: hidden;
    border: 1px solid #395b7a;
    border-radius: 28px;
    background: rgba(3, 18, 34, .88);
    box-shadow: inset 0 0 58px rgba(239, 68, 68, .05), 0 28px 70px rgba(1, 10, 24, .24);
}

.aiml-level-fifteen-page .aiml-anomaly-hero-visual svg { display: block; width: 100%; height: 405px; }
.aiml-level-fifteen-page .anomaly-rings { fill: none; stroke: #24445f; stroke-width: 1.5; stroke-dasharray: 7 7; }
.aiml-level-fifteen-page .normal-points { fill: #22d3ee; stroke: #dcfaff; stroke-width: 2; filter: drop-shadow(0 0 7px rgba(34, 211, 238, .7)); }
.aiml-level-fifteen-page .outlier-points { fill: #fb4f5e; stroke: #fff; stroke-width: 2; filter: drop-shadow(0 0 10px rgba(239, 68, 68, .8)); }
.aiml-level-fifteen-page .score-arrow { fill: none; stroke: #facc15; stroke-linecap: round; stroke-width: 4; }
.aiml-level-fifteen-page .aiml-anomaly-hero-visual text { fill: #c9f8ff; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; font-weight: 800; }

.aiml-level-fifteen-page .aiml-anomaly-hero-note {
    position: absolute;
    right: 26px;
    bottom: 24px;
    left: 26px;
    display: grid;
    gap: 5px;
    padding: 16px 20px;
    border: 1px solid #3a5773;
    border-radius: 16px;
    background: rgba(8, 29, 51, .97);
}

.aiml-level-fifteen-page .aiml-anomaly-hero-note span { color: #fb7185; font-size: 12px; font-weight: 900; letter-spacing: .09em; }
.aiml-level-fifteen-page .aiml-anomaly-hero-note strong { color: #f8fafc; font-size: 15px; }
.aiml-level-fifteen-page .aiml-anomaly-hero-note code { width: max-content; max-width: 100%; padding: 3px 8px; border-radius: 6px; background: #f8fafc; color: #c52b3b; font-size: 15px; font-weight: 900; }

.aiml-level-fifteen-page .aiml-fifteen-revision,
.aiml-level-fifteen-page .aiml-fifteen-types,
.aiml-level-fifteen-page .aiml-fifteen-statistics,
.aiml-level-fifteen-page .aiml-fifteen-local,
.aiml-level-fifteen-page .aiml-fifteen-production,
.aiml-level-fifteen-page .aiml-fifteen-placement,
.aiml-level-fifteen-page .aiml-fifteen-algorithms { display: grid; gap: 18px; }

.aiml-level-fifteen-page .aiml-fifteen-revision,
.aiml-level-fifteen-page .aiml-fifteen-placement { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aiml-level-fifteen-page .aiml-fifteen-types,
.aiml-level-fifteen-page .aiml-fifteen-local { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aiml-level-fifteen-page .aiml-fifteen-statistics,
.aiml-level-fifteen-page .aiml-fifteen-production,
.aiml-level-fifteen-page .aiml-fifteen-algorithms { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.aiml-level-fifteen-page .aiml-fifteen-revision > article,
.aiml-level-fifteen-page .aiml-fifteen-types > article,
.aiml-level-fifteen-page .aiml-fifteen-statistics > article,
.aiml-level-fifteen-page .aiml-fifteen-local > article,
.aiml-level-fifteen-page .aiml-fifteen-production > article,
.aiml-level-fifteen-page .aiml-fifteen-placement > article,
.aiml-level-fifteen-page .aiml-fifteen-algorithms > article {
    min-width: 0;
    padding: 23px;
    border: 1px solid #d3e1ef;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(7, 29, 59, .045);
}

.aiml-level-fifteen-page .aiml-fifteen-revision > article,
.aiml-level-fifteen-page .aiml-fifteen-types > article,
.aiml-level-fifteen-page .aiml-fifteen-placement > article { border-top: 5px solid #2563eb; }
.aiml-level-fifteen-page .aiml-fifteen-types > article:nth-child(2),
.aiml-level-fifteen-page .aiml-fifteen-local > article:nth-child(2) { border-top: 5px solid #8b5cf6; }
.aiml-level-fifteen-page .aiml-fifteen-types > article:nth-child(3),
.aiml-level-fifteen-page .aiml-fifteen-local > article:nth-child(3) { border-top: 5px solid #ef4444; }

.aiml-level-fifteen-page .aiml-fifteen-revision span,
.aiml-level-fifteen-page .aiml-fifteen-types span,
.aiml-level-fifteen-page .aiml-fifteen-statistics span,
.aiml-level-fifteen-page .aiml-fifteen-local span,
.aiml-level-fifteen-page .aiml-fifteen-production span,
.aiml-level-fifteen-page .aiml-fifteen-placement span,
.aiml-level-fifteen-page .aiml-fifteen-algorithms > article > span { display: block; color: #1d4ed8; font-size: 13px; font-weight: 900; letter-spacing: .055em; }

.aiml-level-fifteen-page .aiml-fifteen-revision strong,
.aiml-level-fifteen-page .aiml-fifteen-types strong,
.aiml-level-fifteen-page .aiml-fifteen-statistics strong,
.aiml-level-fifteen-page .aiml-fifteen-local strong,
.aiml-level-fifteen-page .aiml-fifteen-production strong { display: block; margin-top: 9px; color: #071d3b; font-size: 18px; }

.aiml-level-fifteen-page .aiml-fifteen-revision p,
.aiml-level-fifteen-page .aiml-fifteen-types p,
.aiml-level-fifteen-page .aiml-fifteen-statistics p,
.aiml-level-fifteen-page .aiml-fifteen-local p,
.aiml-level-fifteen-page .aiml-fifteen-production p,
.aiml-level-fifteen-page .aiml-fifteen-placement p { margin: 8px 0 0; color: #50677e; line-height: 1.58; overflow-wrap: break-word; }

.aiml-level-fifteen-page .aiml-fifteen-statistics code,
.aiml-level-fifteen-page .aiml-fifteen-local code { display: block; width: max-content; max-width: 100%; margin-top: 13px; padding: 7px 10px; border-radius: 8px; background: #edf5ff; color: #0c4dba; font-size: 14px; font-weight: 850; overflow-wrap: anywhere; }

.aiml-level-fifteen-page .aiml-fifteen-threshold,
.aiml-level-fifteen-page .aiml-fifteen-autoencoder {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
}

.aiml-level-fifteen-page .aiml-fifteen-isolation-flow,
.aiml-level-fifteen-page .aiml-fifteen-workflow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
}

.aiml-level-fifteen-page .aiml-fifteen-threshold > article,
.aiml-level-fifteen-page .aiml-fifteen-autoencoder > article,
.aiml-level-fifteen-page .aiml-fifteen-isolation-flow > article,
.aiml-level-fifteen-page .aiml-fifteen-workflow > article { min-width: 0; padding: 21px 17px; border: 1px solid #d2e1ef; border-radius: 18px; background: #fff; text-align: center; }

.aiml-level-fifteen-page .aiml-fifteen-isolation-flow b,
.aiml-level-fifteen-page .aiml-fifteen-workflow b { display: grid; width: 40px; height: 40px; margin: 0 auto 13px; place-items: center; border-radius: 50%; background: #fee2e2; color: #c52b3b; }
.aiml-level-fifteen-page .aiml-fifteen-threshold span,
.aiml-level-fifteen-page .aiml-fifteen-autoencoder span { color: #1d4ed8; font-size: 13px; font-weight: 900; letter-spacing: .06em; }
.aiml-level-fifteen-page .aiml-fifteen-threshold strong,
.aiml-level-fifteen-page .aiml-fifteen-autoencoder strong,
.aiml-level-fifteen-page .aiml-fifteen-isolation-flow strong,
.aiml-level-fifteen-page .aiml-fifteen-workflow strong { display: block; margin-top: 8px; color: #071d3b; font-size: 17px; }
.aiml-level-fifteen-page .aiml-fifteen-threshold p,
.aiml-level-fifteen-page .aiml-fifteen-autoencoder p,
.aiml-level-fifteen-page .aiml-fifteen-isolation-flow p,
.aiml-level-fifteen-page .aiml-fifteen-workflow p { margin: 7px 0 0; color: #536a82; line-height: 1.5; overflow-wrap: break-word; }
.aiml-level-fifteen-page .aiml-fifteen-autoencoder code { display: block; margin-top: 10px; color: #7c3aed; font-weight: 850; }
.aiml-level-fifteen-page .aiml-fifteen-threshold > i,
.aiml-level-fifteen-page .aiml-fifteen-autoencoder > i,
.aiml-level-fifteen-page .aiml-fifteen-isolation-flow > i,
.aiml-level-fifteen-page .aiml-fifteen-workflow > i { align-self: center; color: #d3a90b; font-size: 24px; font-style: normal; font-weight: 900; text-align: center; }

.aiml-level-fifteen-page .content-card.aiml-visualizer-shell { padding: 0; overflow: hidden; border-color: #244663; background: #061426; }
.aiml-level-fifteen-page .aiml-visualizer-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 30px; border-bottom: 1px solid #294967; background: #0b2038; }
.aiml-level-fifteen-page .aiml-visualizer-head span { color: #7dd3fc; font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.aiml-level-fifteen-page .aiml-visualizer-head h2 { margin: 6px 0; color: #fff; font-size: clamp(25px, 2.8vw, 39px); }
.aiml-level-fifteen-page .aiml-visualizer-head p { max-width: 920px; margin: 0; color: #b9cee2; line-height: 1.6; }
.aiml-level-fifteen-page .aiml-visualizer-head > strong { flex: 0 0 auto; padding: 7px 12px; border: 1px solid rgba(34, 211, 238, .42); border-radius: 999px; background: rgba(6, 182, 212, .12); color: #a5f3fc; font-size: 11px; letter-spacing: .06em; white-space: nowrap; }

.aiml-level-fifteen-page .aiml-fifteen-score-lab,
.aiml-level-fifteen-page .aiml-fifteen-tree-lab { display: grid; grid-template-columns: minmax(230px, .62fr) minmax(480px, 1.45fr) minmax(270px, .78fr); gap: 16px; padding: 22px; background: #061426; }

.aiml-level-fifteen-page .aiml-fifteen-controls,
.aiml-level-fifteen-page .aiml-fifteen-inspector,
.aiml-level-fifteen-page .aiml-fifteen-score-stage,
.aiml-level-fifteen-page .aiml-fifteen-tree-stage { min-width: 0; border: 1px solid #2b4a67; border-radius: 18px; background: #0a1d33; }
.aiml-level-fifteen-page .aiml-fifteen-controls,
.aiml-level-fifteen-page .aiml-fifteen-inspector { padding: 20px; }
.aiml-level-fifteen-page .aiml-fifteen-controls { display: flex; flex-direction: column; gap: 13px; }
.aiml-level-fifteen-page .aiml-fifteen-controls label { display: grid; gap: 7px; color: #93c5fd; font-size: 13px; font-weight: 850; letter-spacing: .035em; }
.aiml-level-fifteen-page .aiml-fifteen-controls select,
.aiml-level-fifteen-page .aiml-fifteen-controls input[type="range"] { width: 100%; }
.aiml-level-fifteen-page .aiml-fifteen-controls select { min-height: 43px; padding: 8px 10px; border: 1px solid #3b5b76; border-radius: 10px; background: #07182c; color: #f8fafc; font: inherit; letter-spacing: 0; }
.aiml-level-fifteen-page .aiml-fifteen-controls output { color: #facc15; font-size: 16px; }
.aiml-level-fifteen-page .aiml-fifteen-controls .aiml-button { width: 100%; min-height: 43px; justify-content: center; padding: 9px 13px; }
.aiml-level-fifteen-page .aiml-fifteen-controls > p { margin: 3px 0 0; color: #91a9c0; font-size: 14px; line-height: 1.55; }

.aiml-level-fifteen-page .aiml-fifteen-score-stage,
.aiml-level-fifteen-page .aiml-fifteen-tree-stage { overflow: hidden; }
.aiml-level-fifteen-page #anomalyCanvas,
.aiml-level-fifteen-page #isolationCanvas { display: block; width: 100%; height: 465px; }

.aiml-level-fifteen-page .aiml-fifteen-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; border-top: 1px solid #2b4a67; background: #2b4a67; }
.aiml-level-fifteen-page .aiml-fifteen-tree-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border-top: 1px solid #2b4a67; background: #2b4a67; }
.aiml-level-fifteen-page .aiml-fifteen-metrics article,
.aiml-level-fifteen-page .aiml-fifteen-tree-metrics article { min-width: 0; padding: 13px 8px; background: #0b2038; text-align: center; }
.aiml-level-fifteen-page .aiml-fifteen-metrics span,
.aiml-level-fifteen-page .aiml-fifteen-tree-metrics span,
.aiml-level-fifteen-page .aiml-fifteen-inspector > span,
.aiml-level-fifteen-page .aiml-fifteen-best span { display: block; color: #7dd3fc; font-size: 10px; font-weight: 900; letter-spacing: .07em; }
.aiml-level-fifteen-page .aiml-fifteen-metrics strong,
.aiml-level-fifteen-page .aiml-fifteen-tree-metrics strong { display: block; margin-top: 4px; color: #f8fafc; font-size: 14px; overflow-wrap: anywhere; }
.aiml-level-fifteen-page .aiml-fifteen-inspector > strong { display: block; margin-top: 10px; color: #f8fafc; font-size: 18px; line-height: 1.4; }
.aiml-level-fifteen-page .aiml-fifteen-inspector > p { color: #b5c7d8; font-size: 14px; line-height: 1.62; }

.aiml-level-fifteen-page .aiml-fifteen-ranking,
.aiml-level-fifteen-page .aiml-fifteen-path { display: grid; gap: 8px; margin-top: 16px; }
.aiml-level-fifteen-page .aiml-fifteen-ranking article { display: grid; grid-template-columns: 34px minmax(0, 1fr) 52px; gap: 8px; align-items: center; padding: 9px; border: 1px solid #2f516f; border-radius: 10px; background: #07182c; }
.aiml-level-fifteen-page .aiml-fifteen-ranking article.is-alert { border-color: #e34c5d; background: rgba(127, 29, 29, .2); }
.aiml-level-fifteen-page .aiml-fifteen-ranking b { color: #93c5fd; font-size: 11px; }
.aiml-level-fifteen-page .aiml-fifteen-ranking i { display: block; height: 8px; overflow: hidden; border-radius: 999px; background: #233d56; }
.aiml-level-fifteen-page .aiml-fifteen-ranking i span { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #22d3ee, #fb4f5e); }
.aiml-level-fifteen-page .aiml-fifteen-ranking strong { color: #fde047; font-size: 11px; text-align: right; }
.aiml-level-fifteen-page .aiml-fifteen-path article { padding: 10px 12px; border-left: 4px solid #22d3ee; border-radius: 9px; background: #07182c; color: #dbeafe; font-size: 12px; line-height: 1.5; }
.aiml-level-fifteen-page .aiml-fifteen-path article.is-current { border-left-color: #facc15; background: #102a46; color: #fff; }

.aiml-level-fifteen-page .aiml-fifteen-best { margin-top: 17px; padding: 14px; border-left: 5px solid #22d3ee; border-radius: 11px; background: #eef7ff; }
.aiml-level-fifteen-page .aiml-fifteen-best span { color: #155eef; }
.aiml-level-fifteen-page .aiml-fifteen-best strong { display: block; margin-top: 7px; color: #0d355f; font-size: 14px; line-height: 1.52; }

.aiml-level-fifteen-page .aiml-fifteen-algorithms ol { margin: 15px 0 0; padding-left: 23px; color: #405c75; }
.aiml-level-fifteen-page .aiml-fifteen-algorithms li { margin: 8px 0; line-height: 1.5; }

@media (max-width: 1180px) {
    .aiml-level-fifteen-page .aiml-anomaly-hero { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-fifteen-page .aiml-anomaly-hero-visual { width: calc(100% - 72px); min-height: 480px; margin: 0 36px 34px; }
    .aiml-level-fifteen-page .aiml-fifteen-score-lab,
    .aiml-level-fifteen-page .aiml-fifteen-tree-lab { grid-template-columns: minmax(220px, .62fr) minmax(0, 1.38fr); }
    .aiml-level-fifteen-page .aiml-fifteen-inspector { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    .aiml-level-fifteen-page .aiml-fifteen-revision,
    .aiml-level-fifteen-page .aiml-fifteen-types,
    .aiml-level-fifteen-page .aiml-fifteen-statistics,
    .aiml-level-fifteen-page .aiml-fifteen-local,
    .aiml-level-fifteen-page .aiml-fifteen-production,
    .aiml-level-fifteen-page .aiml-fifteen-placement,
    .aiml-level-fifteen-page .aiml-fifteen-algorithms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aiml-level-fifteen-page .aiml-fifteen-isolation-flow,
    .aiml-level-fifteen-page .aiml-fifteen-workflow { grid-template-columns: repeat(5, minmax(205px, 1fr)); overflow-x: auto; padding-bottom: 12px; }
    .aiml-level-fifteen-page .aiml-fifteen-isolation-flow > i,
    .aiml-level-fifteen-page .aiml-fifteen-workflow > i { display: none; }
    .aiml-level-fifteen-page .aiml-fifteen-score-lab,
    .aiml-level-fifteen-page .aiml-fifteen-tree-lab { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-fifteen-page .aiml-fifteen-inspector { grid-column: auto; }
}

@media (max-width: 700px) {
    .aiml-level-fifteen-page .main-content { font-size: 16px; }
    .aiml-level-fifteen-page .aiml-anomaly-hero-visual { width: calc(100% - 28px); min-height: 390px; margin: 0 14px 22px; }
    .aiml-level-fifteen-page .aiml-anomaly-hero-visual svg { height: 300px; }
    .aiml-level-fifteen-page .aiml-anomaly-hero-note { right: 13px; bottom: 14px; left: 13px; padding: 13px 15px; }
    .aiml-level-fifteen-page .aiml-fifteen-revision,
    .aiml-level-fifteen-page .aiml-fifteen-types,
    .aiml-level-fifteen-page .aiml-fifteen-statistics,
    .aiml-level-fifteen-page .aiml-fifteen-local,
    .aiml-level-fifteen-page .aiml-fifteen-production,
    .aiml-level-fifteen-page .aiml-fifteen-placement,
    .aiml-level-fifteen-page .aiml-fifteen-algorithms { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-fifteen-page .aiml-fifteen-threshold,
    .aiml-level-fifteen-page .aiml-fifteen-autoencoder { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-fifteen-page .aiml-fifteen-threshold > i,
    .aiml-level-fifteen-page .aiml-fifteen-autoencoder > i { transform: rotate(90deg); }
    .aiml-level-fifteen-page .aiml-visualizer-head { padding: 18px; align-items: flex-start; flex-direction: column; }
    .aiml-level-fifteen-page .aiml-visualizer-head > strong { white-space: normal; }
    .aiml-level-fifteen-page .aiml-fifteen-score-lab,
    .aiml-level-fifteen-page .aiml-fifteen-tree-lab { padding: 15px 10px 21px; }
    .aiml-level-fifteen-page .aiml-fifteen-controls,
    .aiml-level-fifteen-page .aiml-fifteen-inspector { padding: 16px; }
    .aiml-level-fifteen-page #anomalyCanvas,
    .aiml-level-fifteen-page #isolationCanvas { height: 385px; }
    .aiml-level-fifteen-page .aiml-fifteen-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aiml-level-fifteen-page .aiml-fifteen-metrics article:first-child { grid-column: 1 / -1; }
    .aiml-level-fifteen-page .aiml-fifteen-tree-metrics { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 420px) {
    .aiml-level-fifteen-page .aiml-anomaly-hero-visual { min-height: 365px; }
    .aiml-level-fifteen-page .aiml-anomaly-hero-visual svg { height: 275px; }
    .aiml-level-fifteen-page .aiml-anomaly-hero-visual text { font-size: 13px; }
}

@media (max-width: 420px) {
    .aiml-level-fourteen-page .aiml-reduction-hero-visual { min-height: 365px; }
    .aiml-level-fourteen-page .aiml-reduction-hero-visual svg { height: 275px; }
    .aiml-level-fourteen-page .aiml-reduction-hero-visual text { font-size: 13px; }
    .aiml-level-fourteen-page .aiml-fourteen-matrix,
    .aiml-level-fourteen-page .aiml-fourteen-loadings { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   LEVEL 13 — CLUSTERING ALGORITHMS
   ========================================================= */

.aiml-level-thirteen-page .main-content {
    font-size: 16px;
}

.aiml-level-thirteen-page .aiml-clustering-hero {
    position: relative;
    overflow: hidden;
    min-height: 610px;
    background:
        radial-gradient(circle at 82% 18%, rgba(34, 211, 238, .16), transparent 30%),
        radial-gradient(circle at 62% 90%, rgba(124, 58, 237, .18), transparent 36%),
        linear-gradient(130deg, #061628 0%, #0a2747 54%, #17366e 100%);
}

.aiml-level-thirteen-page .aiml-clustering-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(125, 211, 252, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 211, 252, .045) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(90deg, transparent 15%, #000 65%);
}

.aiml-level-thirteen-page .aiml-clustering-hero .aiml-lesson-hero-copy {
    position: relative;
    z-index: 2;
}

.aiml-level-thirteen-page .aiml-clustering-hero-visual {
    position: relative;
    z-index: 1;
    align-self: center;
    min-width: 0;
    min-height: 485px;
    margin: 34px 42px 34px 0;
    overflow: hidden;
    border: 1px solid #2c6082;
    border-radius: 28px;
    background: rgba(3, 18, 34, .83);
    box-shadow: inset 0 0 50px rgba(34, 211, 238, .05), 0 28px 70px rgba(1, 10, 24, .24);
}

.aiml-level-thirteen-page .cluster-cloud {
    position: absolute;
    width: 150px;
    height: 140px;
}

.aiml-level-thirteen-page .cluster-cloud.cluster-one { top: 47px; left: 38px; color: #22d3ee; }
.aiml-level-thirteen-page .cluster-cloud.cluster-two { top: 72px; right: 31px; color: #fbbf24; }
.aiml-level-thirteen-page .cluster-cloud.cluster-three { top: 218px; left: 145px; color: #a78bfa; }

.aiml-level-thirteen-page .cluster-cloud::before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px dashed currentColor;
    border-radius: 50%;
    opacity: .38;
}

.aiml-level-thirteen-page .cluster-cloud i {
    position: absolute;
    width: 15px;
    height: 15px;
    border: 3px solid #061628;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 18px currentColor;
}

.aiml-level-thirteen-page .cluster-cloud i:nth-child(1) { top: 23px; left: 55px; }
.aiml-level-thirteen-page .cluster-cloud i:nth-child(2) { top: 51px; left: 24px; }
.aiml-level-thirteen-page .cluster-cloud i:nth-child(3) { top: 60px; right: 24px; }
.aiml-level-thirteen-page .cluster-cloud i:nth-child(4) { bottom: 27px; left: 47px; }
.aiml-level-thirteen-page .cluster-cloud i:nth-child(5) { bottom: 18px; right: 47px; }

.aiml-level-thirteen-page .cluster-cloud b {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 2px solid currentColor;
    border-radius: 12px;
    background: #07192d;
    color: currentColor;
    font-size: 16px;
    transform: translate(-50%, -50%) rotate(45deg);
}

.aiml-level-thirteen-page .cluster-cloud b::first-letter { transform: rotate(-45deg); }

.aiml-level-thirteen-page .cluster-objective {
    position: absolute;
    right: 26px;
    bottom: 30px;
    left: 26px;
    padding: 17px 20px;
    border: 1px solid #315473;
    border-radius: 16px;
    background: rgba(8, 29, 51, .95);
}

.aiml-level-thirteen-page .cluster-objective span,
.aiml-level-thirteen-page .cluster-signal {
    color: #67e8f9;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
}

.aiml-level-thirteen-page .cluster-objective strong {
    display: block;
    margin: 6px 0;
    color: #f8fafc;
    font-size: 15px;
}

.aiml-level-thirteen-page .cluster-objective code {
    color: #fde047;
    font-size: 15px;
    font-weight: 850;
}

.aiml-level-thirteen-page .cluster-signal {
    position: absolute;
    right: 28px;
    bottom: 178px;
    left: 28px;
    line-height: 1.35;
    text-align: center;
}

.aiml-level-thirteen-page .aiml-thirteen-revision,
.aiml-level-thirteen-page .aiml-thirteen-contract,
.aiml-level-thirteen-page .aiml-thirteen-distance,
.aiml-level-thirteen-page .aiml-thirteen-selection,
.aiml-level-thirteen-page .aiml-thirteen-dbscan,
.aiml-level-thirteen-page .aiml-thirteen-gmm,
.aiml-level-thirteen-page .aiml-thirteen-evaluation,
.aiml-level-thirteen-page .aiml-thirteen-placement,
.aiml-level-thirteen-page .aiml-thirteen-algorithms {
    display: grid;
    gap: 15px;
}

.aiml-level-thirteen-page .aiml-thirteen-revision,
.aiml-level-thirteen-page .aiml-thirteen-placement { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aiml-level-thirteen-page .aiml-thirteen-distance,
.aiml-level-thirteen-page .aiml-thirteen-selection,
.aiml-level-thirteen-page .aiml-thirteen-gmm,
.aiml-level-thirteen-page .aiml-thirteen-algorithms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aiml-level-thirteen-page .aiml-thirteen-dbscan { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aiml-level-thirteen-page .aiml-thirteen-evaluation { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.aiml-level-thirteen-page .aiml-thirteen-revision > article,
.aiml-level-thirteen-page .aiml-thirteen-distance > article,
.aiml-level-thirteen-page .aiml-thirteen-selection > article,
.aiml-level-thirteen-page .aiml-thirteen-dbscan > article,
.aiml-level-thirteen-page .aiml-thirteen-gmm > article,
.aiml-level-thirteen-page .aiml-thirteen-evaluation > article,
.aiml-level-thirteen-page .aiml-thirteen-placement > article,
.aiml-level-thirteen-page .aiml-thirteen-algorithms > article {
    min-width: 0;
    padding: 22px;
    border: 1px solid #d2e1ee;
    border-radius: 17px;
    background: linear-gradient(145deg, #fff, #f6faff);
    box-shadow: 0 12px 27px rgba(15, 48, 80, .05);
}

.aiml-level-thirteen-page .aiml-thirteen-revision span,
.aiml-level-thirteen-page .aiml-thirteen-distance span,
.aiml-level-thirteen-page .aiml-thirteen-selection span,
.aiml-level-thirteen-page .aiml-thirteen-dbscan span,
.aiml-level-thirteen-page .aiml-thirteen-gmm span,
.aiml-level-thirteen-page .aiml-thirteen-evaluation span,
.aiml-level-thirteen-page .aiml-thirteen-placement span,
.aiml-level-thirteen-page .aiml-thirteen-algorithms > article > span {
    display: block;
    color: #1458cf;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .06em;
}

.aiml-level-thirteen-page .aiml-thirteen-revision strong,
.aiml-level-thirteen-page .aiml-thirteen-distance strong,
.aiml-level-thirteen-page .aiml-thirteen-selection strong,
.aiml-level-thirteen-page .aiml-thirteen-dbscan strong,
.aiml-level-thirteen-page .aiml-thirteen-gmm strong,
.aiml-level-thirteen-page .aiml-thirteen-evaluation strong {
    display: block;
    margin: 9px 0;
    color: #071d3b;
    font-size: 18px;
}

.aiml-level-thirteen-page .aiml-thirteen-revision p,
.aiml-level-thirteen-page .aiml-thirteen-distance p,
.aiml-level-thirteen-page .aiml-thirteen-selection p,
.aiml-level-thirteen-page .aiml-thirteen-dbscan p,
.aiml-level-thirteen-page .aiml-thirteen-gmm p,
.aiml-level-thirteen-page .aiml-thirteen-evaluation p,
.aiml-level-thirteen-page .aiml-thirteen-placement p {
    margin: 7px 0 0;
    color: #526981;
    font-size: 15px;
    line-height: 1.58;
    overflow-wrap: break-word;
}

.aiml-level-thirteen-page .aiml-thirteen-distance code {
    display: inline-block;
    margin-top: 10px;
    padding: 6px 9px;
    border-radius: 8px;
    background: #ecf5ff;
    color: #075bc2;
    font-size: 15px;
    font-weight: 850;
    white-space: normal;
}

.aiml-level-thirteen-page .aiml-thirteen-framing,
.aiml-level-thirteen-page .aiml-thirteen-kmeans-flow,
.aiml-level-thirteen-page .aiml-thirteen-workflow {
    display: grid;
    align-items: stretch;
    gap: 10px;
}

.aiml-level-thirteen-page .aiml-thirteen-framing { grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) 34px minmax(0, 1fr); }
.aiml-level-thirteen-page .aiml-thirteen-kmeans-flow,
.aiml-level-thirteen-page .aiml-thirteen-workflow { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr); }

.aiml-level-thirteen-page .aiml-thirteen-framing > article,
.aiml-level-thirteen-page .aiml-thirteen-kmeans-flow > article,
.aiml-level-thirteen-page .aiml-thirteen-workflow > article {
    min-width: 0;
    padding: 21px 16px;
    border: 1px solid #d2e1ee;
    border-radius: 16px;
    background: #fff;
    text-align: center;
}

.aiml-level-thirteen-page .aiml-thirteen-framing > article { border-top: 5px solid #2563eb; }

.aiml-level-thirteen-page .aiml-thirteen-framing span {
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .07em;
}

.aiml-level-thirteen-page .aiml-thirteen-framing strong,
.aiml-level-thirteen-page .aiml-thirteen-kmeans-flow strong,
.aiml-level-thirteen-page .aiml-thirteen-workflow strong {
    display: block;
    margin: 8px 0;
    color: #071d3b;
    font-size: 17px;
}

.aiml-level-thirteen-page .aiml-thirteen-framing p,
.aiml-level-thirteen-page .aiml-thirteen-kmeans-flow p,
.aiml-level-thirteen-page .aiml-thirteen-workflow p {
    margin: 0;
    color: #536a82;
    font-size: 14px;
    line-height: 1.5;
}

.aiml-level-thirteen-page .aiml-thirteen-framing > i,
.aiml-level-thirteen-page .aiml-thirteen-kmeans-flow > b,
.aiml-level-thirteen-page .aiml-thirteen-workflow > i {
    align-self: center;
    color: #d4a600;
    font-size: 24px;
    font-style: normal;
    text-align: center;
}

.aiml-level-thirteen-page .aiml-thirteen-kmeans-flow span,
.aiml-level-thirteen-page .aiml-thirteen-workflow b {
    display: grid;
    width: 39px;
    height: 39px;
    margin: 0 auto;
    place-items: center;
    border-radius: 50%;
    background: #155eef;
    color: #fff;
    font-size: 13px;
}

.aiml-level-thirteen-page .aiml-thirteen-objective,
.aiml-level-thirteen-page .aiml-thirteen-silhouette {
    display: grid;
    grid-template-columns: minmax(230px, .7fr) minmax(0, 1.3fr);
    gap: 18px;
    align-items: center;
    margin-top: 18px;
    padding: 23px;
    border: 1px solid #bfd6e8;
    border-radius: 17px;
    background: linear-gradient(120deg, #eaf7ff, #f6f0ff);
}

.aiml-level-thirteen-page .aiml-thirteen-objective code,
.aiml-level-thirteen-page .aiml-thirteen-silhouette > code {
    padding: 13px;
    border-radius: 12px;
    background: #09213b;
    color: #fde047;
    font-size: clamp(16px, 2vw, 24px);
    font-weight: 850;
    text-align: center;
    white-space: normal;
}

.aiml-level-thirteen-page .aiml-thirteen-objective p { margin: 7px 0 0; color: #526981; line-height: 1.55; }
.aiml-level-thirteen-page .aiml-thirteen-silhouette { grid-template-columns: minmax(220px, .8fr) repeat(2, minmax(0, 1fr)); }
.aiml-level-thirteen-page .aiml-thirteen-silhouette > strong { grid-column: 1 / -1; color: #0a3a71; text-align: center; }
.aiml-level-thirteen-page .aiml-thirteen-silhouette > span { color: #425d76; font-size: 15px; }

.aiml-level-thirteen-page .aiml-thirteen-dbscan .core { border-top: 5px solid #22c55e; }
.aiml-level-thirteen-page .aiml-thirteen-dbscan .border { border-top: 5px solid #f59e0b; }
.aiml-level-thirteen-page .aiml-thirteen-dbscan .noise { border-top: 5px solid #ef4444; }

.aiml-level-thirteen-page .aiml-thirteen-hierarchy {
    display: grid;
    grid-template-columns: minmax(300px, .85fr) minmax(0, 1.15fr);
    gap: 18px;
}

.aiml-level-thirteen-page .hierarchy-tree {
    position: relative;
    min-height: 355px;
    padding: 30px;
    overflow: hidden;
    border: 1px solid #2f5673;
    border-radius: 20px;
    background: #071a2e;
    color: #e6f4ff;
}

.aiml-level-thirteen-page .h-root {
    width: max-content;
    margin: 0 auto;
    padding: 10px 18px;
    border: 1px solid #facc15;
    border-radius: 10px;
    color: #fde047;
    font-weight: 900;
}

.aiml-level-thirteen-page .h-line {
    width: 2px;
    height: 62px;
    margin: 0 auto;
    background: #4f7d9e;
}

.aiml-level-thirteen-page .h-branches {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    padding-top: 28px;
}

.aiml-level-thirteen-page .h-branches::before {
    content: "";
    position: absolute;
    top: 0;
    right: 23%;
    left: 23%;
    height: 2px;
    background: #4f7d9e;
}

.aiml-level-thirteen-page .h-branches article {
    position: relative;
    padding: 16px;
    border: 1px solid #2d506d;
    border-radius: 13px;
    background: #0d2742;
    text-align: center;
}

.aiml-level-thirteen-page .h-branches article::before {
    content: "";
    position: absolute;
    top: -28px;
    left: 50%;
    width: 2px;
    height: 28px;
    background: #4f7d9e;
}

.aiml-level-thirteen-page .h-branches span { color: #7dd3fc; font-weight: 900; }
.aiml-level-thirteen-page .h-branches div { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.aiml-level-thirteen-page .h-branches i { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; background: #14476c; color: #fff; font-size: 12px; font-style: normal; }

.aiml-level-thirteen-page .hierarchy-notes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.aiml-level-thirteen-page .hierarchy-notes article {
    padding: 20px;
    border: 1px solid #d2e1ee;
    border-radius: 15px;
    background: #fff;
}

.aiml-level-thirteen-page .hierarchy-notes span { color: #1658c8; font-size: 12px; font-weight: 950; }
.aiml-level-thirteen-page .hierarchy-notes p { margin: 9px 0 0; color: #526981; font-size: 15px; line-height: 1.55; }

.aiml-level-thirteen-page .aiml-thirteen-comparison {
    display: grid;
    grid-template-columns: minmax(150px, 1.1fr) repeat(4, minmax(115px, 1fr));
    overflow-x: auto;
    border: 1px solid #cadae7;
    border-radius: 17px;
    background: #fff;
}

.aiml-level-thirteen-page .aiml-thirteen-comparison > div {
    min-width: 0;
    padding: 15px 12px;
    border-right: 1px solid #d9e4ed;
    border-bottom: 1px solid #d9e4ed;
    color: #344e68;
    font-size: 14px;
    line-height: 1.45;
}

.aiml-level-thirteen-page .aiml-thirteen-comparison > div:nth-child(5n) { border-right: 0; }
.aiml-level-thirteen-page .aiml-thirteen-comparison > div:nth-last-child(-n+5) { border-bottom: 0; }
.aiml-level-thirteen-page .aiml-thirteen-comparison .head { background: #09213b; color: #7dd3fc; font-weight: 900; }
.aiml-level-thirteen-page .aiml-thirteen-comparison [role="rowheader"] { background: #eff6ff; color: #123a67; font-weight: 850; }

.aiml-level-thirteen-page .aiml-thirteen-kmeans-lab,
.aiml-level-thirteen-page .aiml-thirteen-density-lab {
    display: grid;
    grid-template-columns: minmax(220px, .65fr) minmax(460px, 1.5fr) minmax(250px, .78fr);
    gap: 14px;
    padding: 20px;
    background: #061426;
}

.aiml-level-thirteen-page .aiml-thirteen-controls,
.aiml-level-thirteen-page .aiml-thirteen-inspector {
    min-width: 0;
    padding: 20px;
    border: 1px solid #294965;
    border-radius: 17px;
    background: #0b2037;
    color: #d8e9f7;
}

.aiml-level-thirteen-page .aiml-thirteen-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.aiml-level-thirteen-page .aiml-thirteen-controls label {
    display: grid;
    gap: 7px;
    color: #9dc5e5;
    font-size: 14px;
    font-weight: 850;
}

.aiml-level-thirteen-page .aiml-thirteen-controls select,
.aiml-level-thirteen-page .aiml-thirteen-controls input[type="range"] {
    width: 100%;
}

.aiml-level-thirteen-page .aiml-thirteen-controls select {
    min-height: 44px;
    padding: 9px;
    border: 1px solid #3b607c;
    border-radius: 9px;
    background: #07192d;
    color: #fff;
    font-size: 14px;
}

.aiml-level-thirteen-page .aiml-thirteen-controls output { color: #fde047; font-weight: 900; }
.aiml-level-thirteen-page .aiml-thirteen-controls > p { margin: 4px 0 0; color: #93adc1; font-size: 14px; line-height: 1.5; }

.aiml-level-thirteen-page .aiml-thirteen-stage {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #294965;
    border-radius: 17px;
    background: #061426;
}

.aiml-level-thirteen-page #kmeansCanvas,
.aiml-level-thirteen-page #densityCanvas {
    display: block;
    width: 100%;
    height: 455px;
    cursor: crosshair;
}

.aiml-level-thirteen-page .aiml-thirteen-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    padding: 12px;
}

.aiml-level-thirteen-page .aiml-thirteen-metrics article {
    min-width: 0;
    padding: 12px 9px;
    border: 1px solid #284964;
    border-radius: 11px;
    background: #0b2037;
    text-align: center;
}

.aiml-level-thirteen-page .aiml-thirteen-metrics span,
.aiml-level-thirteen-page .aiml-thirteen-inspector > span,
.aiml-level-thirteen-page .aiml-thirteen-best span {
    display: block;
    color: #7dd3fc;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .05em;
}

.aiml-level-thirteen-page .aiml-thirteen-metrics strong {
    display: block;
    margin-top: 5px;
    overflow-wrap: anywhere;
    color: #fde047;
    font-size: 16px;
}

.aiml-level-thirteen-page .aiml-thirteen-inspector > strong {
    display: block;
    margin: 14px 0;
    color: #f8fafc;
    font-size: 18px;
    line-height: 1.45;
}

.aiml-level-thirteen-page .aiml-thirteen-inspector > p {
    color: #b7cada;
    font-size: 14px;
    line-height: 1.6;
}

.aiml-level-thirteen-page .aiml-thirteen-cluster-stats {
    display: grid;
    gap: 8px;
}

.aiml-level-thirteen-page .aiml-thirteen-cluster-stats article {
    display: grid;
    grid-template-columns: 13px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    padding: 10px;
    border: 1px solid #294965;
    border-radius: 10px;
    background: #07192d;
    font-size: 13px;
}

.aiml-level-thirteen-page .aiml-thirteen-cluster-stats i { width: 12px; height: 12px; border-radius: 50%; }
.aiml-level-thirteen-page .aiml-thirteen-cluster-stats b { color: #fff; }
.aiml-level-thirteen-page .aiml-thirteen-cluster-stats span { color: #a9bfd2; }

.aiml-level-thirteen-page .aiml-thirteen-best,
.aiml-level-thirteen-page .aiml-thirteen-point-info {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid #315473;
    border-left: 5px solid #22d3ee;
    border-radius: 12px;
    background: #07192d;
}

.aiml-level-thirteen-page .aiml-thirteen-best strong {
    display: block;
    margin-top: 8px;
    color: #dff8ff;
    font-size: 14px;
    line-height: 1.55;
}

.aiml-level-thirteen-page .aiml-thirteen-point-info {
    color: #dbeafe;
    font-size: 14px;
    line-height: 1.55;
}

.aiml-level-thirteen-page .aiml-thirteen-algorithms ol {
    margin: 15px 0 0;
    padding-left: 23px;
    color: #405c75;
}

.aiml-level-thirteen-page .aiml-thirteen-algorithms li {
    margin: 8px 0;
    line-height: 1.5;
}

@media (max-width: 1180px) {
    .aiml-level-thirteen-page .aiml-clustering-hero { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-thirteen-page .aiml-clustering-hero-visual { width: calc(100% - 72px); min-height: 450px; margin: 0 36px 34px; }
    .aiml-level-thirteen-page .aiml-thirteen-evaluation { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .aiml-level-thirteen-page .aiml-thirteen-kmeans-lab,
    .aiml-level-thirteen-page .aiml-thirteen-density-lab { grid-template-columns: minmax(220px, .65fr) minmax(0, 1.35fr); }
    .aiml-level-thirteen-page .aiml-thirteen-inspector { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    .aiml-level-thirteen-page .aiml-thirteen-revision,
    .aiml-level-thirteen-page .aiml-thirteen-placement,
    .aiml-level-thirteen-page .aiml-thirteen-dbscan,
    .aiml-level-thirteen-page .aiml-thirteen-evaluation { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aiml-level-thirteen-page .aiml-thirteen-hierarchy { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-thirteen-page .aiml-thirteen-kmeans-flow,
    .aiml-level-thirteen-page .aiml-thirteen-workflow { grid-template-columns: repeat(5, minmax(185px, 1fr)); overflow-x: auto; padding-bottom: 12px; }
    .aiml-level-thirteen-page .aiml-thirteen-kmeans-flow > b,
    .aiml-level-thirteen-page .aiml-thirteen-workflow > i { display: none; }
    .aiml-level-thirteen-page .aiml-thirteen-kmeans-lab,
    .aiml-level-thirteen-page .aiml-thirteen-density-lab { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-thirteen-page .aiml-thirteen-inspector { grid-column: auto; }
}

@media (max-width: 700px) {
    .aiml-level-thirteen-page .main-content { font-size: 16px; }
    .aiml-level-thirteen-page .aiml-clustering-hero-visual { width: calc(100% - 28px); min-height: 430px; margin: 0 14px 22px; }
    .aiml-level-thirteen-page .cluster-cloud { width: 125px; height: 118px; }
    .aiml-level-thirteen-page .cluster-cloud.cluster-one { top: 29px; left: 11px; }
    .aiml-level-thirteen-page .cluster-cloud.cluster-two { top: 43px; right: 9px; }
    .aiml-level-thirteen-page .cluster-cloud.cluster-three { top: 152px; left: 50%; transform: translateX(-50%); }
    .aiml-level-thirteen-page .cluster-signal { right: 14px; bottom: 139px; left: 14px; text-align: center; }
    .aiml-level-thirteen-page .cluster-objective { right: 13px; bottom: 17px; left: 13px; }
    .aiml-level-thirteen-page .aiml-thirteen-revision,
    .aiml-level-thirteen-page .aiml-thirteen-distance,
    .aiml-level-thirteen-page .aiml-thirteen-selection,
    .aiml-level-thirteen-page .aiml-thirteen-dbscan,
    .aiml-level-thirteen-page .aiml-thirteen-gmm,
    .aiml-level-thirteen-page .aiml-thirteen-evaluation,
    .aiml-level-thirteen-page .aiml-thirteen-placement,
    .aiml-level-thirteen-page .aiml-thirteen-algorithms { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-thirteen-page .aiml-thirteen-framing { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-thirteen-page .aiml-thirteen-framing > i { transform: rotate(90deg); }
    .aiml-level-thirteen-page .aiml-thirteen-objective,
    .aiml-level-thirteen-page .aiml-thirteen-silhouette { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-thirteen-page .aiml-thirteen-silhouette > strong { grid-column: auto; }
    .aiml-level-thirteen-page .hierarchy-notes { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-thirteen-page .hierarchy-tree { min-height: 335px; padding: 23px 13px; }
    .aiml-level-thirteen-page .aiml-thirteen-kmeans-lab,
    .aiml-level-thirteen-page .aiml-thirteen-density-lab { padding: 15px 10px 21px; }
    .aiml-level-thirteen-page .aiml-thirteen-controls,
    .aiml-level-thirteen-page .aiml-thirteen-inspector { padding: 16px; }
    .aiml-level-thirteen-page #kmeansCanvas,
    .aiml-level-thirteen-page #densityCanvas { height: 380px; }
    .aiml-level-thirteen-page .aiml-thirteen-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aiml-level-thirteen-page .aiml-thirteen-comparison { grid-template-columns: minmax(130px, 1.1fr) repeat(4, minmax(120px, 1fr)); }
    .aiml-level-thirteen-page .aiml-thirteen-comparison > div { padding: 12px 9px; font-size: 13px; }
}

@media (max-width: 420px) {
    .aiml-level-thirteen-page .aiml-clustering-hero-visual { min-height: 410px; }
    .aiml-level-thirteen-page .cluster-cloud { width: 112px; height: 105px; }
    .aiml-level-thirteen-page .cluster-cloud.cluster-one { left: 4px; }
    .aiml-level-thirteen-page .cluster-cloud.cluster-two { right: 4px; }
    .aiml-level-thirteen-page .cluster-cloud.cluster-three { top: 142px; }
    .aiml-level-thirteen-page .cluster-objective code { font-size: 13px; }
}

/* ========================================================================== */
/* LEVEL 11 — ENSEMBLE LEARNING                                               */
/* ========================================================================== */

.aiml-level-eleven-page .main-content {
    font-size: 16px;
}

.aiml-level-eleven-page .aiml-ensemble-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 86% 18%, rgba(34, 211, 238, .18), transparent 28%),
        radial-gradient(circle at 66% 100%, rgba(37, 99, 235, .23), transparent 34%),
        linear-gradient(135deg, #07192e 0%, #0a2747 55%, #10245d 100%);
}

.aiml-level-eleven-page .aiml-ensemble-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(125, 211, 252, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(125, 211, 252, .035) 1px, transparent 1px);
    background-size: 34px 34px;
}

.aiml-level-eleven-page .aiml-lesson-hero-copy,
.aiml-level-eleven-page .aiml-ensemble-hero-visual {
    position: relative;
    z-index: 1;
}

.aiml-level-eleven-page .aiml-ensemble-hero-visual {
    min-height: 390px;
    padding: 32px;
    border: 1px solid rgba(125, 211, 252, .3);
    border-radius: 28px;
    background: rgba(2, 15, 31, .72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 22px 60px rgba(2, 8, 23, .35);
    display: grid;
    grid-template-columns: minmax(155px, 1fr) 62px minmax(145px, .95fr);
    align-items: center;
    gap: 18px;
}

.aiml-level-eleven-page .ensemble-model-stack {
    display: grid;
    gap: 13px;
}

.aiml-level-eleven-page .ensemble-model-stack > article,
.aiml-level-eleven-page .ensemble-combine,
.aiml-level-eleven-page .ensemble-final {
    border: 1px solid rgba(96, 165, 250, .34);
    border-radius: 16px;
    background: rgba(15, 36, 65, .92);
    color: #f8fafc;
}

.aiml-level-eleven-page .ensemble-model-stack > article {
    padding: 13px 15px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 9px 12px;
    align-items: center;
}

.aiml-level-eleven-page .ensemble-model-stack b {
    color: #bae6fd;
    font-size: 13px;
}

.aiml-level-eleven-page .ensemble-model-stack span {
    justify-self: end;
    color: #facc15;
    font-weight: 900;
}

.aiml-level-eleven-page .ensemble-model-stack i {
    grid-column: 1 / -1;
    height: 7px;
    border-radius: 99px;
    background: linear-gradient(90deg, #22d3ee var(--confidence), rgba(148, 163, 184, .16) var(--confidence));
}

.aiml-level-eleven-page .ensemble-combine {
    min-height: 118px;
    padding: 18px 8px;
    display: grid;
    place-content: center;
    text-align: center;
    gap: 8px;
    color: #67e8f9;
}

.aiml-level-eleven-page .ensemble-combine span {
    font-size: 28px;
}

.aiml-level-eleven-page .ensemble-combine b {
    font-size: 12px;
    letter-spacing: .08em;
}

.aiml-level-eleven-page .ensemble-final {
    width: 100%;
    min-width: 0;
    padding: 24px 18px;
    overflow: hidden;
    text-align: center;
    border-color: rgba(250, 204, 21, .5);
    background: linear-gradient(145deg, rgba(30, 58, 138, .75), rgba(15, 23, 42, .96));
}

.aiml-level-eleven-page .ensemble-final span {
    display: block;
    max-width: 100%;
    margin-bottom: 8px;
    color: #f8fafc;
    font-size: clamp(21px, 1.55vw, 27px);
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: -.02em;
    overflow-wrap: normal;
    white-space: normal;
}

.aiml-level-eleven-page .ensemble-final b {
    display: block;
    color: #fde68a;
}

.aiml-level-eleven-page .ensemble-final small {
    display: block;
    margin-top: 6px;
    color: #bfdbfe;
}

.aiml-level-eleven-page .ensemble-signal {
    position: absolute;
    right: 30px;
    bottom: 17px;
    color: #67e8f9;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
}

.aiml-level-eleven-page .aiml-eleven-revision {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.aiml-level-eleven-page .aiml-eleven-definition-grid,
.aiml-level-eleven-page .aiml-eleven-vote-grid,
.aiml-level-eleven-page .aiml-eleven-placement,
.aiml-level-eleven-page .aiml-eleven-safety-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.aiml-level-eleven-page .aiml-eleven-definition-grid > article,
.aiml-level-eleven-page .aiml-eleven-vote-grid > article,
.aiml-level-eleven-page .aiml-eleven-placement > article,
.aiml-level-eleven-page .aiml-eleven-safety-grid > article,
.aiml-level-eleven-page .aiml-eleven-xgb-grid > article,
.aiml-level-eleven-page .aiml-eleven-algorithms > article {
    min-width: 0;
    padding: 20px;
    border: 1px solid #d7e2ef;
    border-radius: 18px;
    background: linear-gradient(145deg, #fff, #f7faff);
}

.aiml-level-eleven-page .aiml-eleven-definition-grid article > span,
.aiml-level-eleven-page .aiml-eleven-vote-grid article > span,
.aiml-level-eleven-page .aiml-eleven-placement article > span,
.aiml-level-eleven-page .aiml-eleven-safety-grid article > span,
.aiml-level-eleven-page .aiml-eleven-xgb-grid article > span,
.aiml-level-eleven-page .aiml-eleven-algorithms article > span {
    display: block;
    margin-bottom: 8px;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .07em;
}

.aiml-level-eleven-page .aiml-eleven-definition-grid article > strong,
.aiml-level-eleven-page .aiml-eleven-placement article > strong,
.aiml-level-eleven-page .aiml-eleven-safety-grid article > strong,
.aiml-level-eleven-page .aiml-eleven-xgb-grid article > strong {
    display: block;
    margin: 0 0 10px;
    color: #071d3b;
    font-size: 18px;
}

.aiml-level-eleven-page .aiml-eleven-definition-grid p,
.aiml-level-eleven-page .aiml-eleven-vote-grid p,
.aiml-level-eleven-page .aiml-eleven-placement p,
.aiml-level-eleven-page .aiml-eleven-safety-grid p,
.aiml-level-eleven-page .aiml-eleven-xgb-grid p,
.aiml-level-eleven-page .aiml-eleven-algorithms p {
    margin: 0;
    overflow-wrap: anywhere;
}

.aiml-level-eleven-page .aiml-eleven-diversity {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
    gap: 20px;
    align-items: stretch;
}

.aiml-level-eleven-page .diversity-formula {
    padding: 28px;
    border-radius: 20px;
    background: #07192e;
    color: #dbeafe;
    display: grid;
    place-content: center;
    text-align: center;
}

.aiml-level-eleven-page .diversity-formula strong {
    color: #67e8f9;
    font-size: clamp(19px, 2vw, 28px);
}

.aiml-level-eleven-page .diversity-formula span {
    margin-top: 12px;
    color: #fde68a;
}

.aiml-level-eleven-page .diversity-cases {
    display: grid;
    gap: 12px;
}

.aiml-level-eleven-page .diversity-cases > article,
.aiml-level-eleven-page .aiml-eleven-recommendation {
    padding: 18px;
    border-left: 5px solid #2563eb;
    border-radius: 14px;
    background: #eff6ff;
}

.aiml-level-eleven-page .diversity-cases .warning {
    border-color: #f59e0b;
    background: #fffbeb;
}

.aiml-level-eleven-page .aiml-eleven-bagging-flow,
.aiml-level-eleven-page .aiml-eleven-forest-bridge,
.aiml-level-eleven-page .aiml-eleven-boost-sequence,
.aiml-level-eleven-page .aiml-eleven-training-flow {
    display: grid;
    gap: 10px;
    align-items: stretch;
}

.aiml-level-eleven-page .aiml-eleven-bagging-flow,
.aiml-level-eleven-page .aiml-eleven-boost-sequence {
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) 34px minmax(0, 1fr) 34px minmax(0, 1fr);
}

.aiml-level-eleven-page .aiml-eleven-forest-bridge {
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) 34px minmax(0, 1fr);
}

.aiml-level-eleven-page .aiml-eleven-training-flow {
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr);
}

.aiml-level-eleven-page .aiml-eleven-bagging-flow > article,
.aiml-level-eleven-page .aiml-eleven-forest-bridge > article,
.aiml-level-eleven-page .aiml-eleven-boost-sequence > article,
.aiml-level-eleven-page .aiml-eleven-training-flow > article {
    min-width: 0;
    padding: 18px 10px;
    border: 1px solid #cfe0f1;
    border-radius: 16px;
    background: #f8fbff;
    text-align: center;
}

.aiml-level-eleven-page .aiml-eleven-bagging-flow > i,
.aiml-level-eleven-page .aiml-eleven-forest-bridge > b,
.aiml-level-eleven-page .aiml-eleven-boost-sequence > i,
.aiml-level-eleven-page .aiml-eleven-training-flow > i {
    align-self: center;
    color: #d69e00;
    font-size: 22px;
    font-style: normal;
    text-align: center;
}

.aiml-level-eleven-page .aiml-eleven-bagging-flow article > b,
.aiml-level-eleven-page .aiml-eleven-forest-bridge article > span,
.aiml-level-eleven-page .aiml-eleven-boost-sequence article > b,
.aiml-level-eleven-page .aiml-eleven-training-flow article > b {
    display: block;
    margin-bottom: 9px;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .07em;
}

.aiml-level-eleven-page .aiml-eleven-adaboost-math,
.aiml-level-eleven-page .aiml-eleven-gradient-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.aiml-level-eleven-page .aiml-eleven-adaboost-math > article,
.aiml-level-eleven-page .aiml-eleven-gradient-flow > article {
    min-width: 0;
    padding: 20px;
    border: 1px solid #d3e0ee;
    border-radius: 17px;
    background: #f8fbff;
}

.aiml-level-eleven-page .aiml-eleven-adaboost-math code,
.aiml-level-eleven-page .aiml-eleven-gradient-flow code {
    display: block;
    margin: 10px 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.aiml-level-eleven-page .aiml-eleven-xgb-grid,
.aiml-level-eleven-page .aiml-eleven-algorithms {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.aiml-level-eleven-page .aiml-eleven-algorithms > article {
    padding: 24px 26px;
}

.aiml-level-eleven-page .aiml-eleven-algorithms ol {
    display: grid;
    gap: 8px;
    margin: 14px 0 0;
    padding-left: 24px;
}

.aiml-level-eleven-page .aiml-eleven-algorithms li {
    padding-left: 3px;
    line-height: 1.5;
    overflow-wrap: break-word;
}

.aiml-level-eleven-page .aiml-eleven-stacking {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 65px minmax(0, .8fr) 65px minmax(0, .8fr);
    gap: 12px;
    align-items: center;
}

.aiml-level-eleven-page .stacking-base,
.aiml-level-eleven-page .stacking-meta,
.aiml-level-eleven-page .stacking-final {
    min-width: 0;
    padding: 22px;
    border: 1px solid #cfe0f1;
    border-radius: 18px;
    background: #f8fbff;
    text-align: center;
}

.aiml-level-eleven-page .stacking-base span {
    display: inline-block;
    margin: 8px 3px 0;
    padding: 7px 10px;
    border-radius: 9px;
    background: #dbeafe;
    color: #1d4ed8;
    font-weight: 800;
}

.aiml-level-eleven-page .stacking-meta {
    background: #ecfeff;
}

.aiml-level-eleven-page .stacking-final {
    background: #fffbeb;
}

.aiml-level-eleven-page .aiml-eleven-stacking > i {
    color: #d69e00;
    font-size: 24px;
    font-style: normal;
    text-align: center;
}

.aiml-level-eleven-page .aiml-eleven-comparison {
    display: grid;
    grid-template-columns: minmax(145px, .8fr) repeat(3, minmax(170px, 1fr));
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid #cad9e8;
    border-radius: 16px;
    background: #fff;
}

.aiml-level-eleven-page .aiml-eleven-comparison > div {
    min-width: 0;
    padding: 14px;
    border-right: 1px solid #dbe5ef;
    border-bottom: 1px solid #dbe5ef;
    overflow-wrap: anywhere;
}

.aiml-level-eleven-page .aiml-eleven-comparison > .head {
    background: #0b2340;
    color: #fff;
    font-weight: 900;
}

.aiml-level-eleven-page .aiml-visualizer-card {
    padding: 0;
    overflow: hidden;
    border: 1px solid #173d61;
    background: #07192e;
}

.aiml-level-eleven-page .aiml-visualizer-head {
    padding: 22px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid #284866;
    background: #0c223b;
    color: #f8fafc;
}

.aiml-level-eleven-page .aiml-visualizer-head span {
    color: #67e8f9;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .12em;
}

.aiml-level-eleven-page .aiml-visualizer-head h2 {
    margin: 6px 0 0;
    color: #fff;
}

.aiml-level-eleven-page .aiml-visualizer-head > strong {
    flex: 0 0 auto;
    padding: 7px 12px;
    border: 1px solid rgba(34, 211, 238, .42);
    border-radius: 99px;
    background: rgba(6, 182, 212, .12);
    color: #a5f3fc;
    font-size: 11px;
    letter-spacing: .08em;
}

.aiml-level-eleven-page .aiml-eleven-boost-lab,
.aiml-level-eleven-page .aiml-eleven-battle-lab {
    padding: 24px;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 300px;
    gap: 18px;
    background: linear-gradient(145deg, #07192e, #09172a);
    color: #dbeafe;
}

.aiml-level-eleven-page .aiml-eleven-lab-controls,
.aiml-level-eleven-page .aiml-eleven-boost-inspector,
.aiml-level-eleven-page .aiml-eleven-battle-inspector {
    min-width: 0;
    padding: 18px;
    border: 1px solid #294967;
    border-radius: 16px;
    background: rgba(12, 34, 59, .86);
}

.aiml-level-eleven-page .aiml-eleven-lab-controls label {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
    color: #bfdbfe;
    font-size: 14px;
    font-weight: 800;
}

.aiml-level-eleven-page .aiml-eleven-lab-controls label span {
    color: #fde047;
}

.aiml-level-eleven-page .aiml-eleven-lab-controls select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #416484;
    border-radius: 10px;
    background: #061426;
    color: #fff;
    font: inherit;
}

.aiml-level-eleven-page .aiml-eleven-lab-controls input[type="range"] {
    width: 100%;
    accent-color: #22d3ee;
}

.aiml-level-eleven-page .aiml-eleven-lab-controls > button,
.aiml-level-eleven-page .aiml-eleven-auto-controls button {
    width: 100%;
    min-height: 42px;
    margin-top: 9px;
    border: 0;
    border-radius: 10px;
    background: #2563eb;
    color: #fff;
    font-weight: 900;
    cursor: pointer;
}

.aiml-level-eleven-page .aiml-eleven-lab-controls > button:disabled,
.aiml-level-eleven-page .aiml-eleven-auto-controls button:disabled {
    cursor: not-allowed;
    opacity: .42;
}

.aiml-level-eleven-page .aiml-eleven-auto-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.aiml-level-eleven-page .aiml-eleven-auto-controls .success {
    background: #059669;
}

.aiml-level-eleven-page .aiml-eleven-auto-controls .warning {
    background: #d97706;
}

.aiml-level-eleven-page .aiml-eleven-boost-stage,
.aiml-level-eleven-page .aiml-eleven-battle-stage {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 14px;
}

.aiml-level-eleven-page #boostCanvas,
.aiml-level-eleven-page #battleCanvas {
    display: block;
    width: 100%;
    height: 430px;
    border: 1px solid #294967;
    border-radius: 16px;
    background: #061426;
}

.aiml-level-eleven-page .aiml-eleven-boost-metrics,
.aiml-level-eleven-page .aiml-eleven-battle-metrics {
    display: grid;
    gap: 9px;
}

.aiml-level-eleven-page .aiml-eleven-boost-metrics {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.aiml-level-eleven-page .aiml-eleven-battle-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.aiml-level-eleven-page .aiml-eleven-boost-metrics > article,
.aiml-level-eleven-page .aiml-eleven-battle-metrics > article {
    min-width: 0;
    padding: 11px 8px;
    border: 1px solid #294967;
    border-radius: 12px;
    background: #0c223b;
    text-align: center;
}

.aiml-level-eleven-page .aiml-eleven-boost-metrics span,
.aiml-level-eleven-page .aiml-eleven-battle-metrics span {
    display: block;
    margin-bottom: 5px;
    color: #7dd3fc;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .07em;
}

.aiml-level-eleven-page .aiml-eleven-boost-metrics strong,
.aiml-level-eleven-page .aiml-eleven-battle-metrics strong {
    color: #fde047;
    overflow-wrap: anywhere;
}

.aiml-level-eleven-page .aiml-eleven-boost-inspector h4,
.aiml-level-eleven-page .aiml-eleven-battle-inspector h4 {
    margin: 0 0 13px;
    color: #7dd3fc;
}

.aiml-level-eleven-page #boostWeightRows {
    display: grid;
    gap: 8px;
    max-height: 355px;
    overflow-y: auto;
}

.aiml-level-eleven-page #boostWeightRows > div {
    padding: 9px 10px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 52px;
    gap: 8px;
    align-items: center;
    border-radius: 9px;
    background: #061426;
    font-size: 12px;
}

.aiml-level-eleven-page #boostWeightRows i {
    height: 7px;
    border-radius: 99px;
    background: linear-gradient(90deg, #22d3ee var(--weight), rgba(148, 163, 184, .15) var(--weight));
}

.aiml-level-eleven-page #boostWeightRows b {
    color: #fde047;
    text-align: right;
}

.aiml-level-eleven-page .aiml-eleven-active-formula,
.aiml-level-eleven-page #battleVerdict,
.aiml-level-eleven-page #battleNextCheck {
    margin-top: 14px;
    padding: 13px;
    border: 1px solid #315775;
    border-radius: 11px;
    background: #061426;
    color: #a5f3fc;
    overflow-wrap: anywhere;
}

.aiml-level-eleven-page .aiml-eleven-battle-inspector > span {
    display: block;
    margin: 0 0 12px;
    color: #7dd3fc;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: .08em;
}

.aiml-level-eleven-page #battleVerdict,
.aiml-level-eleven-page #battleNextCheck {
    display: block;
    width: 100%;
    box-sizing: border-box;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    font-size: 15px;
    line-height: 1.55;
}

.aiml-level-eleven-page #battleVerdict {
    margin-top: 0;
}

.aiml-level-eleven-page #boostExplanation,
.aiml-level-eleven-page #battleExplanation {
    margin-top: 13px;
    color: #cbd5e1;
    line-height: 1.65;
}

.aiml-level-eleven-page .aiml-eleven-recommendation {
    width: 100%;
    box-sizing: border-box;
    margin-top: 16px;
    padding: 15px 16px;
    border: 1px solid rgba(96, 165, 250, .32);
    border-left: 5px solid #3b82f6;
    background: rgba(37, 99, 235, .11);
}

.aiml-level-eleven-page .aiml-eleven-recommendation > span {
    display: block;
    margin: 0 0 8px;
    color: #93c5fd;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: .08em;
}

.aiml-level-eleven-page .aiml-eleven-recommendation #battleNextCheck {
    margin-top: 0;
}

@media (max-width: 1250px) {
    .aiml-level-eleven-page .aiml-eleven-revision { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .aiml-level-eleven-page .aiml-eleven-boost-lab,
    .aiml-level-eleven-page .aiml-eleven-battle-lab { grid-template-columns: 235px minmax(0, 1fr); }
    .aiml-level-eleven-page .aiml-eleven-boost-inspector,
    .aiml-level-eleven-page .aiml-eleven-battle-inspector { grid-column: 1 / -1; }
    .aiml-level-eleven-page #boostWeightRows { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; }
}

@media (max-width: 1050px) {
    .aiml-level-eleven-page .aiml-ensemble-hero { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-eleven-page .aiml-ensemble-hero-visual { max-width: 680px; width: 100%; margin: 0 auto; }
    .aiml-level-eleven-page .aiml-eleven-definition-grid,
    .aiml-level-eleven-page .aiml-eleven-vote-grid,
    .aiml-level-eleven-page .aiml-eleven-placement,
    .aiml-level-eleven-page .aiml-eleven-safety-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aiml-level-eleven-page .aiml-eleven-diversity { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-eleven-page .aiml-eleven-adaboost-math,
    .aiml-level-eleven-page .aiml-eleven-gradient-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aiml-level-eleven-page .aiml-eleven-boost-lab,
    .aiml-level-eleven-page .aiml-eleven-battle-lab { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-eleven-page .aiml-eleven-boost-inspector,
    .aiml-level-eleven-page .aiml-eleven-battle-inspector { grid-column: auto; }
}

@media (max-width: 700px) {
    .aiml-level-eleven-page .main-content { font-size: 16px; }
    .aiml-level-eleven-page .aiml-eleven-revision,
    .aiml-level-eleven-page .aiml-eleven-definition-grid,
    .aiml-level-eleven-page .aiml-eleven-vote-grid,
    .aiml-level-eleven-page .aiml-eleven-placement,
    .aiml-level-eleven-page .aiml-eleven-safety-grid,
    .aiml-level-eleven-page .aiml-eleven-adaboost-math,
    .aiml-level-eleven-page .aiml-eleven-gradient-flow,
    .aiml-level-eleven-page .aiml-eleven-xgb-grid,
    .aiml-level-eleven-page .aiml-eleven-algorithms { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-eleven-page .aiml-ensemble-hero-visual {
        min-height: 0;
        padding: 20px;
        grid-template-columns: minmax(0, 1fr);
    }
    .aiml-level-eleven-page .ensemble-combine { min-height: 76px; }
    .aiml-level-eleven-page .ensemble-combine span { transform: rotate(90deg); }
    .aiml-level-eleven-page .ensemble-signal { position: static; grid-column: 1; text-align: center; }
    .aiml-level-eleven-page .aiml-eleven-bagging-flow,
    .aiml-level-eleven-page .aiml-eleven-forest-bridge,
    .aiml-level-eleven-page .aiml-eleven-boost-sequence,
    .aiml-level-eleven-page .aiml-eleven-training-flow { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-eleven-page .aiml-eleven-bagging-flow > i,
    .aiml-level-eleven-page .aiml-eleven-forest-bridge > b,
    .aiml-level-eleven-page .aiml-eleven-boost-sequence > i,
    .aiml-level-eleven-page .aiml-eleven-training-flow > i { transform: rotate(90deg); }
    .aiml-level-eleven-page .aiml-eleven-stacking { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-eleven-page .aiml-eleven-stacking > i { transform: rotate(90deg); }
    .aiml-level-eleven-page .aiml-eleven-comparison { grid-template-columns: 145px repeat(3, 170px); }
    .aiml-level-eleven-page .aiml-visualizer-head { padding: 18px; align-items: flex-start; }
    .aiml-level-eleven-page .aiml-visualizer-head > strong { white-space: nowrap; }
    .aiml-level-eleven-page .aiml-eleven-boost-lab,
    .aiml-level-eleven-page .aiml-eleven-battle-lab { padding: 16px 11px 22px; }
    .aiml-level-eleven-page #boostCanvas,
    .aiml-level-eleven-page #battleCanvas { height: 340px; }
    .aiml-level-eleven-page .aiml-eleven-boost-metrics,
    .aiml-level-eleven-page .aiml-eleven-battle-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aiml-level-eleven-page #boostWeightRows { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-eleven-page .aiml-eleven-algorithms > article { padding: 20px; }
    .aiml-level-eleven-page .aiml-eleven-algorithms ol { padding-left: 22px; }
    .aiml-level-eleven-page .aiml-eleven-battle-inspector { padding: 16px; }
}

/* Level 09 and Level 10 styles are placed at the end of this file
   so their page-specific layout rules win over shared lesson defaults. */
/* =========================================================
   AI & ML LEVEL 08 — k-NN AND NAIVE BAYES
   ========================================================= */
.aiml-level-eight-page .aiml-neighbour-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(380px, .88fr);
    min-height: 590px;
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 28%, rgba(56, 189, 248, .22), transparent 28%),
        radial-gradient(circle at 82% 72%, rgba(251, 113, 133, .16), transparent 31%),
        linear-gradient(132deg, #06172a 0%, #0a2848 58%, #192b63 100%);
}

.aiml-level-eight-page .aiml-neighbour-hero-visual {
    position: relative;
    min-height: 500px;
    margin: 34px 34px 34px 0;
    overflow: hidden;
    border: 1px solid rgba(125, 211, 252, .32);
    border-radius: 27px;
    background:
        linear-gradient(rgba(125, 211, 252, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 211, 252, .08) 1px, transparent 1px),
        #061b30;
    background-size: 36px 36px;
    box-shadow: inset 0 0 55px rgba(56, 189, 248, .08), 0 24px 55px rgba(0, 0, 0, .22);
}

.aiml-level-eight-page .aiml-hero-neighbourhood {
    position: absolute;
    inset: 28px 28px 135px;
}

.aiml-level-eight-page .aiml-hero-neighbourhood > i,
.aiml-level-eight-page .aiml-hero-neighbourhood > .query {
    position: absolute;
    left: var(--x, 50%);
    top: var(--y, 50%);
    width: 17px;
    height: 17px;
    border: 2px solid rgba(255, 255, 255, .85);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 20px currentColor;
}

.aiml-level-eight-page .aiml-hero-neighbourhood > i.blue { background: #38bdf8; color: #38bdf8; }
.aiml-level-eight-page .aiml-hero-neighbourhood > i.pink { background: #fb7185; color: #fb7185; }
.aiml-level-eight-page .aiml-hero-neighbourhood > .query {
    z-index: 2;
    left: 53%;
    top: 50%;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    background: #f6cc35;
    color: #07182c;
    font-size: 24px;
    font-weight: 950;
}

.aiml-level-eight-page .aiml-hero-neighbourhood > b {
    position: absolute;
    left: 53%;
    top: 50%;
    width: 190px;
    height: 190px;
    border: 2px dashed rgba(246, 204, 53, .75);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: rgba(246, 204, 53, .055);
}

.aiml-level-eight-page .aiml-hero-model-choice {
    position: absolute;
    right: 22px;
    bottom: 22px;
    left: 22px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 16px;
    padding: 17px 19px;
    border: 1px solid #315571;
    border-radius: 16px;
    background: rgba(5, 19, 34, .92);
}

.aiml-level-eight-page .aiml-hero-model-choice span {
    color: #7dd3fc;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .08em;
}

.aiml-level-eight-page .aiml-hero-model-choice strong { color: #fff; font-size: 14px; }
.aiml-level-eight-page .aiml-eight-revision { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.aiml-level-eight-page .aiml-eight-revision article { min-height: 180px; }

.aiml-level-eight-page .aiml-eight-method-grid,
.aiml-level-eight-page .aiml-eight-formula-grid,
.aiml-level-eight-page .aiml-eight-complexity-grid,
.aiml-level-eight-page .aiml-eight-binary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.aiml-level-eight-page .aiml-eight-method-grid article,
.aiml-level-eight-page .aiml-eight-formula-grid article,
.aiml-level-eight-page .aiml-eight-complexity-grid article,
.aiml-level-eight-page .aiml-eight-binary-grid article,
.aiml-level-eight-page .aiml-eight-k-grid article,
.aiml-level-eight-page .aiml-eight-vote-grid article,
.aiml-level-eight-page .aiml-eight-stability-grid article {
    min-width: 0;
    padding: 21px;
    border: 1px solid #d3e1ed;
    border-radius: 16px;
    background: linear-gradient(145deg, #fff, #f5f9fd);
    box-shadow: 0 9px 24px rgba(7, 29, 59, .05);
}

.aiml-level-eight-page .aiml-eight-method-grid span,
.aiml-level-eight-page .aiml-eight-formula-grid span,
.aiml-level-eight-page .aiml-eight-complexity-grid span,
.aiml-level-eight-page .aiml-eight-binary-grid span,
.aiml-level-eight-page .aiml-eight-k-grid span,
.aiml-level-eight-page .aiml-eight-vote-grid span,
.aiml-level-eight-page .aiml-eight-stability-grid span {
    display: block;
    margin-bottom: 10px;
    color: #0d64c8;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .08em;
}

.aiml-level-eight-page .aiml-eight-method-grid strong,
.aiml-level-eight-page .aiml-eight-complexity-grid strong,
.aiml-level-eight-page .aiml-eight-k-grid strong,
.aiml-level-eight-page .aiml-eight-binary-grid strong {
    display: block;
    color: #071d37;
    font-size: 19px;
}

.aiml-level-eight-page .aiml-eight-method-grid p,
.aiml-level-eight-page .aiml-eight-formula-grid p,
.aiml-level-eight-page .aiml-eight-complexity-grid p,
.aiml-level-eight-page .aiml-eight-binary-grid p,
.aiml-level-eight-page .aiml-eight-k-grid p,
.aiml-level-eight-page .aiml-eight-vote-grid p,
.aiml-level-eight-page .aiml-eight-stability-grid p {
    margin: 8px 0 0;
    color: #50677f;
    font-size: 16px;
}

.aiml-level-eight-page .aiml-eight-formula-grid code,
.aiml-level-eight-page .aiml-eight-vote-grid code,
.aiml-level-eight-page .aiml-eight-stability-grid code {
    display: block;
    overflow-wrap: anywhere;
    color: #0756bd;
    font-size: 16px;
    font-weight: 800;
    white-space: normal;
}

.aiml-level-eight-page .aiml-eight-scale-demo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: 16px;
}

.aiml-level-eight-page .aiml-eight-scale-demo > div {
    padding: 25px;
    border: 1px solid #cfddea;
    border-radius: 18px;
    background: #f7fbff;
}

.aiml-level-eight-page .aiml-eight-scale-demo > b {
    align-self: center;
    color: #d3a719;
    font-size: 34px;
}

.aiml-level-eight-page .aiml-eight-scale-demo span,
.aiml-level-eight-page .aiml-eight-bayes-equation > span,
.aiml-level-eight-page .aiml-eight-variant-card article > span,
.aiml-level-eight-page .aiml-eight-text-model span {
    display: block;
    margin-bottom: 11px;
    color: #075bbf;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .08em;
}

.aiml-level-eight-page .aiml-eight-scale-demo p { margin: 7px 0; font-size: 16px; }
.aiml-level-eight-page .aiml-eight-scale-demo strong { display: block; margin-top: 15px; color: #173d65; }
.aiml-level-eight-page .aiml-eight-k-grid,
.aiml-level-eight-page .aiml-eight-vote-grid,
.aiml-level-eight-page .aiml-eight-stability-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.aiml-level-eight-page .aiml-eight-k-grid .balanced {
    border-color: #3bbf8a;
    background: linear-gradient(145deg, #effdf6, #fff);
    box-shadow: 0 9px 24px rgba(16, 185, 129, .11);
}

.aiml-level-eight-page .aiml-eight-bayes-equation {
    display: grid;
    grid-template-columns: auto minmax(260px, .8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 22px;
    padding: 28px;
    border: 1px solid #c9dcf0;
    border-radius: 19px;
    background: linear-gradient(135deg, #eef7ff, #fff9e5);
}

.aiml-level-eight-page .aiml-eight-bayes-equation > code {
    padding: 17px;
    border-radius: 12px;
    background: #07182c;
    color: #ffe36b;
    font-size: clamp(16px, 2vw, 23px);
    text-align: center;
    white-space: normal;
}

.aiml-level-eight-page .aiml-eight-bayes-equation p { margin: 6px 0; font-size: 16px; }
.aiml-level-eight-page .aiml-eight-factorization { padding: 27px; border: 1px solid #d1dfec; border-radius: 18px; background: #fff; text-align: center; }
.aiml-level-eight-page .aiml-eight-factorization > code { display: inline-block; padding: 15px 20px; background: #07182c; color: #ffe36b; font-size: clamp(16px, 2.1vw, 24px); white-space: normal; }
.aiml-level-eight-page .aiml-eight-factorization > div { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 11px; margin-top: 22px; }
.aiml-level-eight-page .aiml-eight-factorization span { padding: 12px 18px; border-radius: 11px; background: #eaf4ff; color: #124d88; font-weight: 800; }
.aiml-level-eight-page .aiml-eight-factorization b { color: #c99c0b; font-size: 23px; }

.aiml-level-eight-page .aiml-eight-variant-card {
    display: grid;
    grid-template-columns: minmax(240px, .7fr) repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.aiml-level-eight-page .aiml-eight-variant-card article { padding: 23px; border: 1px solid #cfdfed; border-radius: 17px; background: #f8fbff; }
.aiml-level-eight-page .aiml-eight-variant-card article strong { display: block; color: #0b2949; font-size: 18px; }
.aiml-level-eight-page .aiml-eight-variant-card article p { color: #526a82; font-size: 16px; }
.aiml-level-eight-page .aiml-eight-variant-card code { overflow-wrap: anywhere; white-space: normal; }
.aiml-level-eight-page .aiml-eight-bell { position: relative; min-height: 220px; overflow: hidden; border: 1px solid #284b6a; border-radius: 17px; background: linear-gradient(rgba(125,211,252,.08) 1px, transparent 1px), linear-gradient(90deg,rgba(125,211,252,.08) 1px, transparent 1px), #07182c; background-size: 28px 28px; }
.aiml-level-eight-page .aiml-eight-bell::before { position: absolute; right: 18px; bottom: 35px; left: 35px; height: 2px; background: #7690a8; content: ""; }
.aiml-level-eight-page .aiml-eight-bell::after { position: absolute; top: 18px; bottom: 35px; left: 35px; width: 2px; background: #7690a8; content: ""; }
.aiml-level-eight-page .aiml-eight-bell i,
.aiml-level-eight-page .aiml-eight-bell b { position: absolute; right: 18%; bottom: 36px; left: 15%; height: 65%; border: 4px solid #38bdf8; border-color: #38bdf8 transparent transparent; border-radius: 50% 50% 0 0; transform: translateY(28%) scaleX(.66); }
.aiml-level-eight-page .aiml-eight-bell b { right: 3%; left: 35%; height: 48%; border-top-color: #fb7185; transform: translateY(40%) scaleX(.62); }

.aiml-level-eight-page .aiml-eight-text-model {
    display: grid;
    grid-template-columns: minmax(0, .8fr) auto minmax(0, 1fr) auto minmax(0, 1.25fr);
    align-items: stretch;
    gap: 13px;
}

.aiml-level-eight-page .aiml-eight-text-model > div { padding: 21px; border: 1px solid #d0dfed; border-radius: 16px; background: #fff; }
.aiml-level-eight-page .aiml-eight-text-model > b { align-self: center; color: #d4a514; font-size: 27px; }
.aiml-level-eight-page .aiml-eight-text-model strong,
.aiml-level-eight-page .aiml-eight-text-model code { display: block; overflow-wrap: anywhere; color: #0a3158; font-size: 16px; white-space: normal; }
.aiml-level-eight-page .aiml-eight-binary-grid article { text-align: center; }
.aiml-level-eight-page .aiml-eight-binary-grid strong { font-size: 32px; }

.aiml-level-eight-page .aiml-eight-comparison {
    display: grid;
    grid-template-columns: minmax(150px, .7fr) repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid #cadbea;
    border-radius: 17px;
}

.aiml-level-eight-page .aiml-eight-comparison > div { min-width: 0; padding: 15px; border-right: 1px solid #d6e2ee; border-bottom: 1px solid #d6e2ee; overflow-wrap: anywhere; background: #fff; color: #344e69; font-size: 15px; }
.aiml-level-eight-page .aiml-eight-comparison > div:nth-child(3n) { border-right: 0; }
.aiml-level-eight-page .aiml-eight-comparison > div:nth-last-child(-n+3) { border-bottom: 0; }
.aiml-level-eight-page .aiml-eight-comparison .head { background: #0a2b4a; color: #fff; font-weight: 900; }

.aiml-level-eight-page .aiml-eight-workflow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 0;
    list-style: none;
}

.aiml-level-eight-page .aiml-eight-workflow li { display: flex; gap: 14px; padding: 20px; border: 1px solid #d0dfec; border-radius: 16px; background: #fff; }
.aiml-level-eight-page .aiml-eight-workflow li > span { display: grid; flex: 0 0 40px; height: 40px; place-items: center; border-radius: 12px; background: #1265c6; color: #fff; font-size: 12px; font-weight: 950; }
.aiml-level-eight-page .aiml-eight-workflow strong { color: #0b2b4b; font-size: 18px; }
.aiml-level-eight-page .aiml-eight-workflow p { margin: 5px 0 0; color: #526b83; font-size: 15px; }

/* Level 08 k-NN laboratory */
.aiml-level-eight-page .aiml-eight-lab-grid {
    display: grid;
    grid-template-columns: minmax(220px, .52fr) minmax(420px, 1.18fr) minmax(260px, .7fr);
    gap: 18px;
    padding: 25px 28px 30px;
}

.aiml-level-eight-page .aiml-eight-lab-controls,
.aiml-level-eight-page .aiml-eight-neighbour-list,
.aiml-level-eight-page .aiml-eight-token-controls,
.aiml-level-eight-page .aiml-eight-score-board,
.aiml-level-eight-page .aiml-eight-likelihoods {
    min-width: 0;
    padding: 20px;
    border: 1px solid #294b69;
    border-radius: 16px;
    background: #081c31;
}

.aiml-level-eight-page .aiml-eight-lab-controls label,
.aiml-level-eight-page .aiml-eight-token-controls label {
    display: block;
    margin-bottom: 18px;
    color: #d6e6f4;
    font-size: 14px;
    font-weight: 800;
}

.aiml-level-eight-page .aiml-eight-lab-controls output,
.aiml-level-eight-page .aiml-eight-token-controls output { float: right; color: #ffe36d; }
.aiml-level-eight-page .aiml-eight-lab-controls input,
.aiml-level-eight-page .aiml-eight-token-controls input { width: 100%; margin-top: 9px; accent-color: #f6cc35; }
.aiml-level-eight-page .aiml-eight-lab-controls select { width: 100%; min-height: 44px; margin-top: 8px; padding: 9px 11px; border: 1px solid #3c617e; border-radius: 9px; background: #061322; color: #fff; font-size: 14px; }
.aiml-level-eight-page .aiml-eight-lab-controls .aiml-button,
.aiml-level-eight-page .aiml-eight-token-controls .aiml-button { width: 100%; margin-top: 3px; color: #fff; }
.aiml-level-eight-page .aiml-eight-lab-controls > p { margin: 15px 0 0; color: #89a3ba; font-size: 13px; }

.aiml-level-eight-page .aiml-eight-knn-stage { min-width: 0; }
.aiml-level-eight-page #knnCanvas { display: block; width: 100%; border: 1px solid #315471; border-radius: 16px; background: #071b30; cursor: crosshair; touch-action: manipulation; }
.aiml-level-eight-page .aiml-eight-vote-result { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(155px, .85fr); gap: 10px; margin-top: 12px; }
.aiml-level-eight-page .aiml-eight-vote-result article,
.aiml-level-eight-page .aiml-eight-vote-result > div { padding: 13px; border: 1px solid #2e4d68; border-radius: 12px; background: #081c31; }
.aiml-level-eight-page .aiml-eight-vote-result span { display: block; color: #82b5dd; font-size: 10px; font-weight: 950; letter-spacing: .07em; }
.aiml-level-eight-page .aiml-eight-vote-result strong { display: block; margin: 5px 0; color: #fff; font-size: 20px; }
.aiml-level-eight-page .aiml-eight-vote-result strong.blue { color: #38bdf8; }
.aiml-level-eight-page .aiml-eight-vote-result strong.pink { color: #fb7185; }
.aiml-level-eight-page .aiml-eight-vote-result small { color: #a9c0d4; font-size: 11px; }
.aiml-level-eight-page .aiml-eight-vote-result i { display: block; height: 7px; overflow: hidden; border-radius: 999px; background: #1c354c; }
.aiml-level-eight-page .aiml-eight-vote-result i b { display: block; width: 0; height: 100%; border-radius: inherit; transition: width .25s ease; }
.aiml-level-eight-page .aiml-eight-vote-result article:first-child i b { background: #38bdf8; }
.aiml-level-eight-page .aiml-eight-vote-result article:nth-child(2) i b { background: #fb7185; }

.aiml-level-eight-page .aiml-eight-neighbour-list > span,
.aiml-level-eight-page .aiml-eight-token-controls > span,
.aiml-level-eight-page .aiml-eight-likelihoods > span { display: block; margin-bottom: 14px; color: #7dd3fc; font-size: 11px; font-weight: 950; letter-spacing: .09em; }
.aiml-level-eight-page #knnNeighbourRows { display: grid; gap: 8px; }
.aiml-level-eight-page #knnNeighbourRows article { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; padding: 10px; border: 1px solid #2b4963; border-radius: 10px; background: #061525; }
.aiml-level-eight-page #knnNeighbourRows article.blue { border-left: 4px solid #38bdf8; }
.aiml-level-eight-page #knnNeighbourRows article.pink { border-left: 4px solid #fb7185; }
.aiml-level-eight-page #knnNeighbourRows span { color: #91abc1; font-size: 11px; }
.aiml-level-eight-page #knnNeighbourRows strong { color: #fff; font-size: 13px; }
.aiml-level-eight-page #knnNeighbourRows code { background: transparent; color: #ffe16d; font-size: 11px; }
.aiml-level-eight-page #knnNeighbourRows small { color: #91abc1; font-size: 10px; text-align: right; }
.aiml-level-eight-page #knnExplanation { margin: 15px 0 0; color: #b7cce0; font-size: 14px; line-height: 1.6; }

/* Level 08 Naive Bayes laboratory */
.aiml-level-eight-page .aiml-eight-bayes-lab-grid { display: grid; grid-template-columns: minmax(250px, .6fr) minmax(320px, .85fr) minmax(300px, .8fr); gap: 18px; padding: 25px 28px 30px; }
.aiml-level-eight-page #bayesTokens { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.aiml-level-eight-page #bayesTokens button { min-height: 39px; padding: 8px 12px; border: 1px solid #3b5d78; border-radius: 999px; background: #061423; color: #b8cce0; font-size: 13px; font-weight: 800; cursor: pointer; }
.aiml-level-eight-page #bayesTokens button.active { border-color: #f6cc35; background: #503e08; color: #fff3a3; box-shadow: 0 0 0 3px rgba(246,204,53,.1); }
.aiml-level-eight-page .aiml-eight-posterior-bars { display: grid; gap: 11px; }
.aiml-level-eight-page .aiml-eight-posterior-bars article { padding: 14px; border: 1px solid #294b68; border-radius: 11px; background: #061525; }
.aiml-level-eight-page .aiml-eight-posterior-bars span,
.aiml-level-eight-page .aiml-eight-log-scores span,
.aiml-level-eight-page .aiml-eight-bayes-decision > span { color: #7eb2dc; font-size: 10px; font-weight: 950; letter-spacing: .08em; }
.aiml-level-eight-page .aiml-eight-posterior-bars strong { display: block; margin: 6px 0; color: #fff; font-size: 24px; }
.aiml-level-eight-page .aiml-eight-posterior-bars i { display: block; height: 8px; overflow: hidden; border-radius: 999px; background: #1d354b; }
.aiml-level-eight-page .aiml-eight-posterior-bars i b { display: block; width: 0; height: 100%; border-radius: inherit; transition: width .25s ease; }
.aiml-level-eight-page .aiml-eight-posterior-bars article:first-child i b { background: #fb7185; }
.aiml-level-eight-page .aiml-eight-posterior-bars article:nth-child(2) i b { background: #38bdf8; }
.aiml-level-eight-page .aiml-eight-log-scores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 11px; }
.aiml-level-eight-page .aiml-eight-log-scores article { min-width: 0; padding: 12px; border-radius: 10px; background: #0d2944; }
.aiml-level-eight-page .aiml-eight-log-scores code { display: block; margin-top: 6px; overflow-wrap: anywhere; background: transparent; color: #ffe374; font-size: 14px; }
.aiml-level-eight-page .aiml-eight-bayes-decision { margin-top: 12px; padding: 16px; border: 1px solid #326386; border-radius: 12px; background: linear-gradient(135deg, #0b2a47, #102f55); text-align: center; }
.aiml-level-eight-page .aiml-eight-bayes-decision strong { display: block; margin: 7px 0; color: #fff; font-size: 29px; }
.aiml-level-eight-page .aiml-eight-bayes-decision strong.spam { color: #fb7185; }
.aiml-level-eight-page .aiml-eight-bayes-decision strong.normal { color: #38bdf8; }
.aiml-level-eight-page .aiml-eight-bayes-decision p { margin: 8px 0 0; color: #b9cee1; font-size: 14px; line-height: 1.55; }
.aiml-level-eight-page #bayesLikelihoodRows { display: grid; gap: 9px; }
.aiml-level-eight-page #bayesLikelihoodRows article { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 12px; padding: 11px; border: 1px solid #294a65; border-radius: 10px; background: #061525; }
.aiml-level-eight-page #bayesLikelihoodRows strong { grid-row: 1 / 3; align-self: center; color: #fff; font-size: 14px; }
.aiml-level-eight-page #bayesLikelihoodRows span { color: #9fb6ca; font-size: 11px; }
.aiml-level-eight-page #bayesLikelihoodRows span b { color: #ffe171; }
.aiml-level-eight-page #bayesLikelihoodRows em { grid-column: 1 / -1; padding-top: 4px; border-top: 1px solid #1e3b54; color: #9eb4c7; font-size: 10px; font-style: normal; font-weight: 900; text-align: right; }
.aiml-level-eight-page #bayesLikelihoodRows em.spam { color: #fb9bac; }
.aiml-level-eight-page #bayesLikelihoodRows em.normal { color: #79d2f7; }
.aiml-level-eight-page #bayesLikelihoodRows .empty { display: block; color: #a9bfd1; }

@media (max-width: 1320px) {
    .aiml-level-eight-page .aiml-eight-revision { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .aiml-level-eight-page .aiml-eight-lab-grid { grid-template-columns: minmax(220px, .55fr) minmax(0, 1.45fr); }
    .aiml-level-eight-page .aiml-eight-neighbour-list { grid-column: 1 / -1; }
    .aiml-level-eight-page #knnNeighbourRows { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .aiml-level-eight-page .aiml-eight-bayes-lab-grid { grid-template-columns: minmax(260px, .65fr) minmax(0, 1.35fr); }
    .aiml-level-eight-page .aiml-eight-likelihoods { grid-column: 1 / -1; }
    .aiml-level-eight-page #bayesLikelihoodRows { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
    .aiml-level-eight-page .aiml-neighbour-hero { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-eight-page .aiml-neighbour-hero-visual { min-height: 410px; margin: 0 36px 34px; }
    .aiml-level-eight-page .aiml-eight-method-grid,
    .aiml-level-eight-page .aiml-eight-formula-grid,
    .aiml-level-eight-page .aiml-eight-complexity-grid,
    .aiml-level-eight-page .aiml-eight-binary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aiml-level-eight-page .aiml-eight-workflow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aiml-level-eight-page .aiml-eight-text-model { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-eight-page .aiml-eight-text-model > b { transform: rotate(90deg); text-align: center; }
}

@media (max-width: 760px) {
    .aiml-level-eight-page .aiml-neighbour-hero { display: block; min-height: 0; }
    .aiml-level-eight-page .aiml-neighbour-hero-visual { min-height: 360px; margin: 0 14px 22px; border-radius: 18px; }
    .aiml-level-eight-page .aiml-hero-neighbourhood { inset: 18px 12px 125px; }
    .aiml-level-eight-page .aiml-hero-neighbourhood > b { width: 135px; height: 135px; }
    .aiml-level-eight-page .aiml-hero-neighbourhood > i { width: 13px; height: 13px; }
    .aiml-level-eight-page .aiml-hero-neighbourhood > .query { width: 40px; height: 40px; font-size: 19px; }
    .aiml-level-eight-page .aiml-hero-model-choice { right: 11px; bottom: 11px; left: 11px; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px; }
    .aiml-level-eight-page .aiml-hero-model-choice strong { margin-bottom: 5px; overflow-wrap: anywhere; }
    .aiml-level-eight-page .aiml-eight-revision,
    .aiml-level-eight-page .aiml-eight-method-grid,
    .aiml-level-eight-page .aiml-eight-formula-grid,
    .aiml-level-eight-page .aiml-eight-complexity-grid,
    .aiml-level-eight-page .aiml-eight-binary-grid,
    .aiml-level-eight-page .aiml-eight-k-grid,
    .aiml-level-eight-page .aiml-eight-vote-grid,
    .aiml-level-eight-page .aiml-eight-stability-grid,
    .aiml-level-eight-page .aiml-eight-variant-card,
    .aiml-level-eight-page .aiml-eight-workflow,
    .aiml-level-eight-page .aiml-eight-lab-grid,
    .aiml-level-eight-page .aiml-eight-bayes-lab-grid { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-eight-page .aiml-eight-revision article,
    .aiml-level-eight-page .aiml-eight-method-grid article,
    .aiml-level-eight-page .aiml-eight-formula-grid article,
    .aiml-level-eight-page .aiml-eight-complexity-grid article,
    .aiml-level-eight-page .aiml-eight-binary-grid article { width: 100%; min-width: 0; min-height: 0; }
    .aiml-level-eight-page .aiml-eight-scale-demo { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-eight-page .aiml-eight-scale-demo > b { transform: rotate(90deg); text-align: center; }
    .aiml-level-eight-page .aiml-eight-bayes-equation { grid-template-columns: minmax(0, 1fr); padding: 20px; }
    .aiml-level-eight-page .aiml-eight-factorization { padding: 18px 10px; }
    .aiml-level-eight-page .aiml-eight-comparison { grid-template-columns: minmax(90px, .6fr) repeat(2, minmax(0, 1fr)); }
    .aiml-level-eight-page .aiml-eight-comparison > div { padding: 10px 7px; font-size: 12px; }
    .aiml-level-eight-page .aiml-eight-lab-grid,
    .aiml-level-eight-page .aiml-eight-bayes-lab-grid { padding: 17px 12px 22px; }
    .aiml-level-eight-page .aiml-eight-neighbour-list,
    .aiml-level-eight-page .aiml-eight-likelihoods { grid-column: auto; }
    .aiml-level-eight-page #knnNeighbourRows,
    .aiml-level-eight-page #bayesLikelihoodRows { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-eight-page .aiml-eight-vote-result { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aiml-level-eight-page .aiml-eight-vote-result > div { grid-column: 1 / -1; }
    .aiml-level-eight-page .aiml-eight-log-scores { grid-template-columns: minmax(0, 1fr); }
}

/* ================================================================
   CODEBHAVYA MASTERY LAYER — DETAILED THEORY + EXPERIMENT LABS
   Shared by AI & ML Levels 01–07
   ================================================================ */

.cb-concept-depth {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #d9e6f4;
}

.cb-depth-explanation {
    padding: 22px 24px;
    border: 1px solid #bad5f4;
    border-left: 5px solid #1769e0;
    border-radius: 14px;
    background: linear-gradient(135deg, #eef6ff 0%, #ffffff 72%);
}

.cb-depth-explanation > span,
.cb-depth-grid article > span {
    display: block;
    margin-bottom: 9px;
    color: #0759cd;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .09em;
    line-height: 1.35;
}

.cb-depth-explanation p,
.cb-depth-grid p {
    margin: 0;
    color: #233d5d;
    font-size: 1rem;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

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

.cb-depth-grid article {
    min-width: 0;
    padding: 20px;
    border: 1px solid #d5e2f1;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 9px 24px rgba(16, 54, 95, .055);
}

.cb-depth-grid .cb-depth-caution {
    border-color: #f0cf78;
    background: #fffbec;
}

.cb-depth-grid .cb-depth-caution > span {
    color: #9b6600;
}

.cb-experiment-lab {
    margin: 30px 22px 22px;
    overflow: hidden;
    border: 1px solid #315676;
    border-radius: 18px;
    background: #08192c;
    box-shadow: inset 0 1px rgba(255, 255, 255, .045), 0 20px 45px rgba(0, 8, 20, .24);
    color: #eaf4ff;
}

.cb-lab-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 26px;
    border-bottom: 1px solid #284760;
    background: linear-gradient(135deg, #0c2440, #0a1b30);
}

.cb-lab-heading > div {
    min-width: 0;
}

.cb-lab-heading span {
    display: block;
    margin-bottom: 7px;
    color: #7fc7ff;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .1em;
    line-height: 1.35;
}

.cb-lab-heading h3 {
    margin: 0 0 8px;
    color: #fff;
    font-size: clamp(1.3rem, 2.2vw, 1.75rem);
    line-height: 1.25;
}

.cb-lab-heading p {
    max-width: 850px;
    margin: 0;
    color: #bfd1e4;
    font-size: 1rem;
    line-height: 1.65;
}

.cb-lab-heading > strong {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid #2f6f75;
    border-radius: 999px;
    background: rgba(20, 232, 153, .09);
    color: #62f0b2;
    font-size: .72rem;
    letter-spacing: .07em;
    white-space: nowrap;
}

.cb-lab-heading > strong i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #39e69a;
    box-shadow: 0 0 0 5px rgba(57, 230, 154, .12);
}

.cb-lab-body {
    display: grid;
    grid-template-columns: minmax(250px, 310px) minmax(0, 1fr);
    min-width: 0;
}

.cb-lab-controls,
.cb-lab-workspace {
    min-width: 0;
    padding: 24px;
}

.cb-lab-controls {
    display: flex;
    flex-direction: column;
    gap: 18px;
    border-right: 1px solid #284760;
    background: #0c2036;
}

.cb-lab-controls label,
.cb-lab-controls legend {
    color: #d9eaff;
    font-size: .88rem;
    font-weight: 800;
    line-height: 1.45;
}

.cb-lab-controls label output {
    float: right;
    color: #f7d24c;
}

.cb-lab-controls input:not([type="range"]):not([type="checkbox"]),
.cb-lab-controls select {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid #466986;
    border-radius: 9px;
    outline: none;
    background: #071728;
    color: #f3f8ff;
    font: inherit;
}

.cb-lab-controls input:not([type="range"]):not([type="checkbox"]):focus,
.cb-lab-controls select:focus {
    border-color: #56b9ff;
    box-shadow: 0 0 0 3px rgba(50, 162, 242, .18);
}

.cb-lab-controls input[type="range"] {
    display: block;
    width: 100%;
    margin: 13px 0 0;
    accent-color: #f4c932;
}

.cb-lab-controls fieldset {
    margin: 0;
    padding: 14px;
    border: 1px solid #31536e;
    border-radius: 12px;
}

.cb-number-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.cb-number-grid input {
    margin: 0 !important;
    text-align: center;
}

.cb-lab-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cb-lab-presets button,
.cb-run-button {
    min-height: 39px;
    padding: 8px 12px;
    border: 1px solid #3a678d;
    border-radius: 9px;
    background: #153a5d;
    color: #eef7ff;
    font-size: .82rem;
    font-weight: 850;
    line-height: 1.3;
    cursor: pointer;
}

.cb-lab-presets button:hover,
.cb-run-button:hover {
    border-color: #70c6ff;
    background: #1c4e7b;
}

.cb-lab-presets button:disabled,
.cb-run-button:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.cb-run-button {
    border-color: #d3a822;
    background: #e8bd2f;
    color: #07172a;
}

.cb-check-label {
    display: grid;
    grid-template-columns: 22px 1fr;
    align-items: start;
    gap: 9px;
}

.cb-check-label input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: #e9bf30;
}

.cb-lab-workspace {
    display: flex;
    flex-direction: column;
    gap: 18px;
    background: #08192c;
}

.cb-score-chart {
    display: grid;
    gap: 12px;
}

.cb-score-chart > div {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) 58px;
    align-items: center;
    gap: 10px;
    color: #c7d9ea;
    font-size: .82rem;
}

.cb-score-chart > div::before {
    content: "";
    position: absolute;
}

.cb-score-chart i {
    display: block;
    width: 0;
    height: 15px;
    border-radius: 999px;
    background: linear-gradient(90deg, #2b75e8, #42c8ff);
    box-shadow: 0 0 14px rgba(58, 184, 245, .22);
    transition: width .28s ease;
}

.cb-score-chart > div:nth-child(2) i { background: linear-gradient(90deg, #12ae73, #4be3a5); }
.cb-score-chart > div:nth-child(3) i { background: linear-gradient(90deg, #c99414, #f4d95e); }

.cb-score-chart strong {
    color: #fff;
    text-align: right;
}

.cb-live-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.cb-live-metric {
    min-width: 0;
    padding: 15px;
    border: 1px solid #2b4c68;
    border-radius: 12px;
    background: #0c2036;
}

.cb-live-metric span {
    display: block;
    margin-bottom: 8px;
    color: #83b9e8;
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .06em;
    line-height: 1.35;
    text-transform: uppercase;
}

.cb-live-metric strong {
    display: block;
    color: #fff;
    font-size: .96rem;
    line-height: 1.42;
    overflow-wrap: anywhere;
}

.cb-live-metric.good { border-color: #238660; background: rgba(21, 115, 78, .14); }
.cb-live-metric.good strong { color: #58edac; }
.cb-live-metric.warning { border-color: #9d781c; background: rgba(157, 120, 28, .13); }
.cb-live-metric.warning strong { color: #f5d45c; }
.cb-live-metric.danger { border-color: #aa4252; background: rgba(170, 66, 82, .13); }
.cb-live-metric.danger strong { color: #ff93a5; }

.cb-workflow-status,
.cb-pipeline-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cb-workflow-status span,
.cb-pipeline-strip span {
    padding: 8px 10px;
    border: 1px solid #31516d;
    border-radius: 999px;
    color: #bdd0e3;
    font-size: .76rem;
    font-weight: 800;
    line-height: 1.3;
}

.cb-workflow-status .done,
.cb-pipeline-strip .done { border-color: #267858; color: #55e8a7; background: rgba(41, 169, 114, .1); }
.cb-workflow-status .pending { border-color: #8d6b1e; color: #f4d35f; }
.cb-pipeline-strip .failed { border-color: #a94152; color: #ff91a3; background: rgba(169, 65, 82, .12); }

.cb-lab-explanation {
    margin: 0;
    padding: 15px 17px;
    border-left: 4px solid #f0c530;
    border-radius: 8px;
    background: rgba(242, 198, 48, .08);
    color: #d6e4f2;
    font-size: .96rem;
    line-height: 1.65;
}

.cb-array-view {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.cb-array-view > div {
    min-width: 0;
    padding: 14px;
    border: 1px solid #2b4c68;
    border-radius: 12px;
    background: #0c2036;
}

.cb-array-view > div > span {
    display: block;
    margin-bottom: 11px;
    color: #83b9e8;
    font-size: .77rem;
    font-weight: 850;
}

.cb-array-view > div > div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.cb-array-view i {
    position: relative;
    min-width: 48px;
    padding: 16px 10px 9px;
    border: 1px solid #40719b;
    border-radius: 8px;
    background: #071728;
    color: #fff;
    font-style: normal;
    font-weight: 800;
    text-align: center;
}

.cb-array-view i small {
    position: absolute;
    top: 3px;
    left: 6px;
    color: #6f9ec5;
    font-size: .58rem;
}

.cb-formula-line,
.cb-result-panel {
    min-width: 0;
    padding: 15px 17px;
    border: 1px solid #2e506d;
    border-radius: 12px;
    background: #071728;
}

.cb-formula-line span,
.cb-result-panel > span,
.cb-loss-history > span {
    display: block;
    margin-bottom: 8px;
    color: #75b3e6;
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.cb-formula-line code,
.cb-result-panel strong {
    display: block;
    color: #f4d34f;
    font-size: .94rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
    white-space: normal;
}

.cb-result-panel small {
    display: block;
    margin-top: 7px;
    color: #a8c0d7;
}

.cb-lab-canvas {
    display: block;
    width: 100%;
    min-width: 0;
    border: 1px solid #2f536f;
    border-radius: 14px;
    background: #071b30;
}

.cb-bayes-grid,
.cb-confusion-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.cb-bayes-grid article,
.cb-confusion-grid article {
    min-width: 0;
    padding: 16px;
    border: 1px solid #2c516d;
    border-radius: 12px;
    background: #0c2036;
}

.cb-bayes-grid span,
.cb-confusion-grid span {
    display: block;
    color: #8bb9df;
    font-size: .69rem;
    font-weight: 900;
    letter-spacing: .07em;
}

.cb-bayes-grid strong,
.cb-confusion-grid strong {
    display: block;
    margin: 7px 0;
    color: #fff;
    font-size: 1.35rem;
}

.cb-bayes-grid p { margin: 0; color: #aec3d7; font-size: .82rem; line-height: 1.45; }
.cb-bayes-grid .tp, .cb-confusion-grid .tp, .cb-bayes-grid .tn, .cb-confusion-grid .tn { border-color: #267758; }
.cb-bayes-grid .tp strong, .cb-confusion-grid .tp strong, .cb-bayes-grid .tn strong, .cb-confusion-grid .tn strong { color: #55e8a7; }
.cb-bayes-grid .fp, .cb-confusion-grid .fp, .cb-bayes-grid .fn, .cb-confusion-grid .fn { border-color: #994557; }
.cb-bayes-grid .fp strong, .cb-confusion-grid .fp strong, .cb-bayes-grid .fn strong, .cb-confusion-grid .fn strong { color: #ff91a3; }

.cb-table-scroll {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #2b4e6b;
    border-radius: 12px;
}

.cb-data-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    background: #0b1f34;
    color: #dceafa;
    font-size: .84rem;
}

.cb-data-table caption {
    padding: 12px 14px;
    background: #102b47;
    color: #8cc9fa;
    font-weight: 850;
    text-align: left;
}

.cb-data-table th,
.cb-data-table td {
    padding: 10px 12px;
    border-top: 1px solid #263f56;
    text-align: left;
    white-space: nowrap;
}

.cb-data-table th { color: #f4d34f; font-size: .75rem; text-transform: uppercase; }

.cb-loss-history {
    padding: 14px;
    border: 1px solid #2c4c67;
    border-radius: 12px;
    background: #0b1e32;
}

.cb-loss-history > div {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 70px;
}

.cb-loss-history i {
    flex: 1 1 0;
    min-width: 4px;
    max-width: 22px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(#f4d34f, #d59712);
}

@media (max-width: 980px) {
    .cb-depth-grid { grid-template-columns: 1fr; }
    .cb-lab-body { grid-template-columns: 1fr; }
    .cb-lab-controls { border-right: 0; border-bottom: 1px solid #284760; }
    .cb-lab-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .cb-lab-presets, .cb-run-button, .cb-check-label { grid-column: 1 / -1; }
    .cb-live-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .cb-concept-depth { margin-top: 20px; padding-top: 18px; }
    .cb-depth-explanation, .cb-depth-grid article { padding: 17px; }
    .cb-depth-explanation p, .cb-depth-grid p { font-size: 1rem; line-height: 1.7; }
    .cb-experiment-lab { margin: 22px 0 14px; border-radius: 14px; }
    .cb-lab-heading { display: block; padding: 19px 17px; }
    .cb-lab-heading > strong { margin-top: 14px; }
    .cb-lab-heading p { font-size: .96rem; }
    .cb-lab-controls, .cb-lab-workspace { padding: 17px; }
    .cb-lab-controls { display: flex; }
    .cb-live-metrics, .cb-array-view, .cb-bayes-grid, .cb-confusion-grid { grid-template-columns: 1fr; }
    .cb-score-chart > div { grid-template-columns: 78px minmax(0, 1fr) 52px; }
    .cb-array-view i { min-width: 44px; }
    .cb-lab-presets button { flex: 1 1 calc(50% - 8px); }
    .cb-workflow-status span, .cb-pipeline-strip span { flex: 1 1 calc(50% - 8px); text-align: center; }
    .cb-formula-line code, .cb-result-panel strong { font-size: .86rem; }
}

.aiml-page *,
.aiml-page *::before,
.aiml-page *::after {
    box-sizing: border-box;
}

.aiml-page a {
    color: inherit;
}

.aiml-page button,
.aiml-page input {
    font: inherit;
}

.aiml-page [hidden] {
    display: none !important;
}

/* Header */
.aiml-page .top-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 72px;
    padding: 0 22px;
    border-bottom: 2px solid rgba(212, 175, 55, 0.85);
    background: #071b2e;
    box-shadow: 0 6px 20px rgba(2, 12, 27, 0.18);
}

.aiml-page .top-header .logo {
    display: inline-flex;
    align-items: center;
    min-width: 215px;
    height: 70px;
    color: #e8f1fb;
    font-size: 25px;
    font-weight: 900;
    text-decoration: none;
}

.aiml-page .main-logo {
    width: 62px;
    height: 62px;
    margin-right: 8px;
    object-fit: contain;
}

.aiml-page .brand-name {
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;
}

.aiml-page .logo-code,
.aiml-page .footer-code {
    color: #9dd6ff;
}

.aiml-page .logo-bhavya,
.aiml-page .footer-bhavya {
    color: var(--aiml-gold-light);
}

.aiml-page .top-nav {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    height: 72px;
    overflow-x: auto;
    scrollbar-width: none;
}

.aiml-page .top-nav::-webkit-scrollbar {
    display: none;
}

.aiml-page .top-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    color: #dbe7f3;
    font-size: 14px;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease, background 0.2s ease;
}

.aiml-page .top-nav a:hover,
.aiml-page .top-nav a.active {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.aiml-page .top-nav a.active::after {
    position: absolute;
    right: 13px;
    bottom: 8px;
    left: 13px;
    height: 3px;
    border-radius: 999px;
    background: var(--aiml-gold);
    content: "";
}

/* Core layout and sidebar */
.aiml-page .aiml-sidebar-toggle {
    display: none;
}

.aiml-page .docs-layout {
    display: flex;
    align-items: flex-start;
    width: 100%;
    min-height: calc(100vh - 72px);
    margin: 0;
}

.aiml-page .docs-layout > .sidebar {
    position: sticky;
    top: 72px;
    z-index: 30;
    width: 270px;
    min-width: 270px;
    height: calc(100vh - 72px);
    padding: 20px 13px 34px;
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid #dbe4ee;
    background: #ffffff;
    scrollbar-color: #b8c9dc transparent;
    scrollbar-width: thin;
}

.aiml-page .sidebar-title {
    margin: 18px 5px 8px;
    padding: 0 7px 8px;
    border-bottom: 1px solid #e3eaf2;
    color: #5f7189;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1.45;
    text-transform: uppercase;
}

.aiml-page .sidebar > .sidebar-title:first-child {
    margin-top: 0;
    padding: 15px 12px;
    border: 1px solid #d5e4f7;
    border-left: 5px solid var(--aiml-gold);
    border-radius: 13px;
    background: linear-gradient(135deg, #f8fbff, #ffffff);
    color: var(--aiml-heading);
    font-size: 15px;
    letter-spacing: 0;
    text-transform: none;
}

.aiml-page .aiml-search-label {
    display: block;
    margin: 14px 7px 6px;
    color: #5c6f87;
    font-size: 11px;
    font-weight: 800;
}

.aiml-page .search-box {
    width: 100%;
    min-height: 43px;
    padding: 10px 12px;
    border: 1px solid #cbd9e8;
    border-radius: 10px;
    background: #f8fafc;
    color: var(--aiml-heading);
    font-size: 13px;
    outline: none;
}

.aiml-page .search-box:focus {
    border-color: var(--aiml-blue-500);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.11);
}

.aiml-page .aiml-course-home,
.aiml-page .aiml-topic-link {
    display: block;
    margin: 3px 0;
    padding: 9px 10px;
    border-left: 3px solid transparent;
    border-radius: 8px;
    color: #3b4c62;
    font-size: 12px;
    font-weight: 680;
    line-height: 1.45;
    text-decoration: none;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.aiml-page .aiml-course-home {
    margin-top: 11px;
    font-weight: 850;
}

.aiml-page .aiml-course-home:hover,
.aiml-page .aiml-topic-link:hover,
.aiml-page .aiml-course-home.active {
    border-left-color: var(--aiml-blue-600);
    background: #eaf3ff;
    color: #12467f;
    transform: translateX(2px);
}

.aiml-page .aiml-topic-link.is-next {
    border-left-color: var(--aiml-gold);
    background: #fff9e8;
    color: #694d00;
}

.aiml-page .aiml-practice-link {
    border: 1px solid #d8c16c;
    border-left: 4px solid var(--aiml-gold);
    background: #fffbeb;
    color: #725300;
    font-weight: 850;
}

.aiml-page .aiml-search-empty {
    margin: 10px 5px;
    padding: 10px;
    border-radius: 8px;
    background: #fff7ed;
    color: #9a3412;
    font-size: 12px;
}

.aiml-page .aiml-drawer-backdrop {
    display: none;
}

.aiml-page .docs-layout > .main-content {
    width: calc(100% - 270px);
    min-width: 0;
    padding: 30px clamp(22px, 3vw, 48px) 58px;
}

/* Shared content styling */
.aiml-page .content-section,
.aiml-page .content-card {
    width: 100%;
    margin: 26px 0;
}

.aiml-page .content-card {
    padding: clamp(24px, 3vw, 38px);
    border: 1px solid var(--aiml-border);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: var(--aiml-shadow);
}

.aiml-page .section-label,
.aiml-page .subject-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #b47a00;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.12em;
    line-height: 1.4;
    text-transform: uppercase;
}

.aiml-page .section-label::before,
.aiml-page .subject-label::before {
    width: 22px;
    height: 3px;
    border-radius: 999px;
    background: var(--aiml-gold);
    content: "";
}

.aiml-page h1,
.aiml-page h2,
.aiml-page h3,
.aiml-page p {
    overflow-wrap: anywhere;
}

.aiml-page h1,
.aiml-page h2,
.aiml-page h3 {
    color: var(--aiml-heading);
    line-height: 1.2;
}

.aiml-page .section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.aiml-page .section-heading h2,
.aiml-page .content-card h2 {
    margin: 8px 0 9px;
    font-size: clamp(25px, 3vw, 38px);
}

.aiml-page .section-heading p,
.aiml-page .content-card > p {
    margin: 0;
    color: var(--aiml-slate-600);
    font-size: 15px;
}

/* Hero */
.aiml-page .aiml-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);
    gap: clamp(30px, 4vw, 64px);
    min-height: 560px;
    padding: clamp(35px, 5vw, 68px);
    overflow: hidden;
    border: 1px solid #203d5f;
    border-radius: 24px;
    background:
        radial-gradient(circle at 5% 2%, rgba(34, 211, 238, 0.18), transparent 30%),
        radial-gradient(circle at 96% 95%, rgba(212, 175, 55, 0.16), transparent 30%),
        linear-gradient(135deg, #04111f 0%, #071c33 52%, #0b2948 100%);
    box-shadow: 0 26px 68px rgba(4, 16, 31, 0.26);
}

.aiml-page .aiml-hero::before {
    position: absolute;
    inset: 0;
    opacity: 0.24;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 34px 34px;
    content: "";
    pointer-events: none;
}

.aiml-page .aiml-hero-copy,
.aiml-page .aiml-hero-visual {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.aiml-page .aiml-hero-copy {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.aiml-page .aiml-hero .subject-label {
    color: #76dcff;
}

.aiml-page .aiml-hero .subject-label::before {
    background: #4fd7f5;
}

.aiml-page .aiml-hero .page-title {
    max-width: 820px;
    margin: 18px 0 17px;
    color: #ffffff;
    font-size: clamp(38px, 5vw, 64px);
    letter-spacing: -0.035em;
    line-height: 1.06;
}

.aiml-page .aiml-hero .page-description {
    max-width: 780px;
    margin: 0;
    color: #c8d7e7;
    font-size: clamp(15px, 1.3vw, 18px);
    line-height: 1.78;
}

.aiml-page .aiml-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 26px;
}

.aiml-page .aiml-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 850;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.aiml-page .aiml-button:hover {
    transform: translateY(-2px);
}

.aiml-page .aiml-button-primary {
    background: linear-gradient(135deg, #e6c34f, #d4af37);
    color: #07182c;
    box-shadow: 0 12px 26px rgba(212, 175, 55, 0.25);
}

.aiml-page .aiml-button-secondary {
    border-color: rgba(154, 218, 255, 0.42);
    background: rgba(255, 255, 255, 0.07);
    color: #e5f4ff;
}

.aiml-page .aiml-hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 25px;
    color: #9db2c8;
    font-size: 12px;
    font-weight: 700;
}

.aiml-page .aiml-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
}

.aiml-page .aiml-hero-stats > div {
    min-width: 0;
    padding: 11px;
    border: 1px solid rgba(125, 211, 252, 0.17);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.045);
}

.aiml-page .aiml-hero-stats strong,
.aiml-page .aiml-hero-stats span {
    display: block;
}

.aiml-page .aiml-hero-stats strong {
    color: #f6d968;
    font-size: 17px;
}

.aiml-page .aiml-hero-stats span {
    margin-top: 2px;
    color: #95abc1;
    font-size: 9px;
    font-weight: 800;
}

.aiml-page .aiml-hero-visual {
    align-self: center;
    overflow: hidden;
    border: 1px solid rgba(125, 211, 252, 0.24);
    border-radius: 20px;
    background: rgba(1, 8, 18, 0.65);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.06), 0 22px 45px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(12px);
}

.aiml-page .aiml-visual-topbar,
.aiml-page .aiml-visual-console {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 10px 16px;
    border-bottom: 1px solid #1e3b58;
    color: #8eb4d6;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.09em;
}

.aiml-page .aiml-visual-topbar strong {
    color: var(--aiml-gold-light);
}

.aiml-page .aiml-neural-scene {
    padding: 8px 10px 2px;
}

.aiml-page .aiml-neural-scene svg {
    display: block;
    width: 100%;
    height: auto;
}

.aiml-page .aiml-network-lines path {
    fill: none;
    stroke: #2d557a;
    stroke-width: 2;
    opacity: 0.78;
}

.aiml-page .aiml-network-nodes circle {
    fill: #0a2038;
    stroke: #57c8f2;
    stroke-width: 3;
}

.aiml-page .aiml-hidden-nodes circle { stroke: #8b7cf6; }
.aiml-page .aiml-feature-nodes circle { stroke: #2dd4bf; }
.aiml-page .aiml-output-node circle { fill: #3b310c; stroke: var(--aiml-gold-light); }

.aiml-page .aiml-neural-scene text {
    fill: #7797b4;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-anchor: middle;
}

.aiml-page .aiml-visual-console {
    border-top: 1px solid #1e3b58;
    border-bottom: 0;
    color: #68e3ff;
    font-family: Consolas, monospace;
    letter-spacing: 0;
}

.aiml-page .aiml-visual-console strong {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #a7f3d0;
}

.aiml-page .aiml-visual-console i,
.aiml-page .aiml-live-badge i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.12);
}

/* Motto and prerequisite */
.aiml-page .aiml-mission-strip {
    display: grid;
    grid-template-columns: minmax(290px, 0.75fr) minmax(0, 1.25fr);
    align-items: center;
    gap: 24px;
    margin: 24px 0;
    padding: 22px clamp(22px, 3vw, 36px);
    border: 1px solid #e5d696;
    border-radius: 16px;
    background: linear-gradient(110deg, #fff9e5, #ffffff 52%, #f1f8ff);
    box-shadow: var(--aiml-shadow);
}

.aiml-page .aiml-mission-strip div {
    display: flex;
    flex-direction: column;
}

.aiml-page .aiml-mission-strip span {
    color: #9a6c00;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.12em;
}

.aiml-page .aiml-mission-strip strong {
    color: var(--aiml-heading);
    font-size: 20px;
}

.aiml-page .aiml-mission-strip p {
    margin: 0;
    color: var(--aiml-slate-600);
    font-size: 14px;
}

.aiml-page .aiml-prerequisite-card {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(330px, 0.8fr);
    align-items: center;
    gap: 32px;
    border-top: 4px solid var(--aiml-teal-500);
    background:
        radial-gradient(circle at top right, rgba(20, 184, 166, 0.10), transparent 30%),
        #ffffff;
}

.aiml-page .aiml-prerequisite-copy h2 {
    margin: 8px 0 10px;
    font-size: clamp(25px, 3vw, 36px);
}

.aiml-page .aiml-prerequisite-copy p {
    margin: 0;
    color: var(--aiml-slate-600);
}

.aiml-page .aiml-prerequisite-checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.aiml-page .aiml-prerequisite-checks span {
    display: flex;
    align-items: center;
    min-height: 62px;
    padding: 13px;
    border: 1px solid #cfe7e3;
    border-radius: 12px;
    background: #f3fffc;
    color: #155e58;
    font-size: 12px;
    font-weight: 800;
}

/* Roadmap summary */
.aiml-page .aiml-course-architecture {
    padding: clamp(25px, 3vw, 40px);
    border: 1px solid var(--aiml-border);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: var(--aiml-shadow);
    scroll-margin-top: 90px;
}

.aiml-page .aiml-roadmap-progress {
    width: min(280px, 100%);
    padding: 13px 15px;
    border: 1px solid #d9e5f2;
    border-radius: 12px;
    background: #f8fbff;
    text-align: right;
}

.aiml-page .aiml-roadmap-progress strong {
    color: var(--aiml-blue-600);
    font-size: 23px;
}

.aiml-page .aiml-roadmap-progress > span {
    margin-left: 4px;
    color: var(--aiml-slate-500);
    font-size: 12px;
    font-weight: 750;
}

.aiml-page .aiml-progress-track {
    height: 8px;
    margin-top: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: #dfe8f2;
}

.aiml-page .aiml-progress-track i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--aiml-blue-600), var(--aiml-cyan-500));
    transition: width 0.3s ease;
}

.aiml-page .aiml-part-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 13px;
}

.aiml-page .aiml-part-card {
    position: relative;
    display: flex;
    min-height: 250px;
    flex-direction: column;
    padding: 19px;
    overflow: hidden;
    border: 1px solid #dce6f1;
    border-top: 4px solid var(--part-color, var(--aiml-blue-600));
    border-radius: 15px;
    background: linear-gradient(180deg, var(--part-tint, #eff6ff), #ffffff 62%);
    color: inherit;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.aiml-page .aiml-part-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.10);
}

.aiml-page .aiml-part-card.part-one { --part-color: #2563eb; --part-tint: #eff6ff; }
.aiml-page .aiml-part-card.part-two { --part-color: #14b8a6; --part-tint: #ecfdf9; }
.aiml-page .aiml-part-card.part-three { --part-color: #8b5cf6; --part-tint: #f5f3ff; }
.aiml-page .aiml-part-card.part-four { --part-color: #e879f9; --part-tint: #fdf4ff; }
.aiml-page .aiml-part-card.part-five { --part-color: #d4af37; --part-tint: #fffbea; }

.aiml-page .aiml-part-card > span {
    max-width: calc(100% - 50px);
    color: var(--part-color);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 0.07em;
}

.aiml-page .aiml-part-card > b {
    position: absolute;
    top: 13px;
    right: 15px;
    color: color-mix(in srgb, var(--part-color) 20%, transparent);
    font-size: 38px;
    line-height: 1;
}

.aiml-page .aiml-part-card h3 {
    margin: 28px 0 9px;
    font-size: 18px;
}

.aiml-page .aiml-part-card p {
    margin: 0;
    color: var(--aiml-slate-600);
    font-size: 12px;
}

.aiml-page .aiml-part-card small {
    margin-top: auto;
    padding-top: 16px;
    color: var(--part-color);
    font-size: 10px;
    font-weight: 900;
}

/* Level sections and cards */
.aiml-page .aiml-level-section {
    padding: clamp(25px, 3vw, 40px);
    border: 1px solid var(--aiml-border);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: var(--aiml-shadow);
    scroll-margin-top: 90px;
}

.aiml-page .aiml-level-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #dfe8f2;
}

.aiml-page .aiml-level-heading span {
    color: var(--aiml-blue-600);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.1em;
}

.aiml-page .aiml-level-heading h2 {
    margin: 7px 0 7px;
    font-size: clamp(27px, 3vw, 39px);
}

.aiml-page .aiml-level-heading p {
    max-width: 820px;
    margin: 0;
    color: var(--aiml-slate-600);
    font-size: 14px;
}

.aiml-page .aiml-level-heading > b {
    flex: 0 0 auto;
    padding: 8px 11px;
    border: 1px solid #cfe0f3;
    border-radius: 999px;
    background: #f1f7ff;
    color: #2f5f99;
    font-size: 10px;
    letter-spacing: 0.08em;
}

.aiml-page .aiml-topic-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.aiml-page .aiml-topic-card {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 440px;
    flex-direction: column;
    padding: 21px;
    border: 1px solid #dbe5f0;
    border-radius: 16px;
    background: linear-gradient(180deg, #fbfdff, #ffffff 55%);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.aiml-page .aiml-topic-card:hover {
    transform: translateY(-4px);
    border-color: #9ec5f8;
    box-shadow: 0 16px 34px rgba(37, 99, 235, 0.09);
}

.aiml-page .aiml-topic-card.is-next {
    border-color: #d9bd56;
    background: linear-gradient(180deg, #fffbeb, #ffffff 58%);
}

.aiml-page .aiml-topic-card.is-complete {
    border-color: #86d6a4;
    background: linear-gradient(180deg, #effdf4, #ffffff 55%);
}

.aiml-page .aiml-placement-card {
    border-color: #dfc76d;
    background: linear-gradient(155deg, #fff9dd, #ffffff 58%);
}

.aiml-page .aiml-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.aiml-page .aiml-level-number {
    color: var(--aiml-blue-600);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.1em;
}

.aiml-page .aiml-card-icon {
    display: grid;
    width: 43px;
    height: 43px;
    place-items: center;
    border: 1px solid #d8e6f5;
    border-radius: 12px;
    background: #edf6ff;
    font-size: 22px;
}

.aiml-page .aiml-topic-card h3 {
    margin: 18px 0 9px;
    font-size: 20px;
}

.aiml-page .aiml-topic-card > p {
    margin: 0;
    color: var(--aiml-slate-600);
    font-size: 13px;
    line-height: 1.65;
}

.aiml-page .aiml-topic-card ul {
    margin: 16px 0 0;
    padding: 14px 0 14px 21px;
    border-top: 1px solid #e4ebf3;
    border-bottom: 1px solid #e4ebf3;
    color: #3f5168;
    font-size: 12px;
}

.aiml-page .aiml-topic-card li {
    margin: 6px 0;
}

.aiml-page .aiml-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
}

.aiml-page .aiml-card-tags span {
    padding: 5px 8px;
    border-radius: 999px;
    background: #eef5ff;
    color: #295b97;
    font-size: 9px;
    font-weight: 900;
}

.aiml-page .aiml-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 16px;
}

.aiml-page .aiml-card-actions > span {
    color: #7b8da3;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.aiml-page .aiml-card-actions .aiml-next-badge {
    color: #9a6c00;
}

.aiml-page .aiml-complete-button {
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid #bdd2eb;
    border-radius: 8px;
    background: #f4f8fd;
    color: #285785;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
}

.aiml-page .aiml-complete-button:hover {
    border-color: var(--aiml-blue-500);
    background: #eaf3ff;
}

.aiml-page .aiml-complete-button[aria-pressed="true"] {
    border-color: #86d6a4;
    background: #ecfdf3;
    color: #16723b;
}

/* Algorithm atlas */
.aiml-page .aiml-algorithm-atlas {
    display: grid;
    grid-template-columns: minmax(340px, 0.8fr) minmax(0, 1.2fr);
    gap: 28px;
    border-top: 4px solid var(--aiml-purple-500);
    background:
        radial-gradient(circle at 100% 0, rgba(139, 92, 246, 0.09), transparent 32%),
        #ffffff;
}

.aiml-page .aiml-atlas-copy h2 {
    font-size: clamp(27px, 3vw, 39px);
}

.aiml-page .aiml-atlas-copy p {
    color: var(--aiml-slate-600);
}

.aiml-page .aiml-atlas-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 18px;
}

.aiml-page .aiml-atlas-tabs button {
    min-height: 38px;
    padding: 8px 11px;
    border: 1px solid #cfdbea;
    border-radius: 8px;
    background: #ffffff;
    color: #40536b;
    font-size: 11px;
    font-weight: 850;
    cursor: pointer;
}

.aiml-page .aiml-atlas-tabs button:hover,
.aiml-page .aiml-atlas-tabs button.is-active {
    border-color: #8b5cf6;
    background: #f3f0ff;
    color: #6241bd;
}

.aiml-page .aiml-atlas-panel {
    min-width: 0;
    padding: 24px;
    border: 1px solid #d7cef7;
    border-radius: 16px;
    background: linear-gradient(145deg, #0a1930, #101d3e);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.18);
}

.aiml-page .aiml-atlas-panel > span {
    color: #c4b5fd;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.1em;
}

.aiml-page .aiml-atlas-panel h3 {
    margin: 10px 0;
    color: #ffffff;
    font-size: 27px;
}

.aiml-page .aiml-atlas-panel > p {
    margin: 0;
    color: #bdcce1;
    font-size: 14px;
}

.aiml-page .aiml-atlas-algorithms {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 20px;
}

.aiml-page .aiml-atlas-algorithms span {
    padding: 7px 9px;
    border: 1px solid #314970;
    border-radius: 7px;
    background: #13294b;
    color: #dbeafe;
    font-size: 10px;
    font-weight: 800;
}

.aiml-page .aiml-atlas-question {
    margin-top: 21px;
    padding: 14px;
    border-left: 4px solid var(--aiml-gold);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.055);
}

.aiml-page .aiml-atlas-question strong,
.aiml-page .aiml-atlas-question span {
    display: block;
}

.aiml-page .aiml-atlas-question strong {
    color: var(--aiml-gold-light);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.aiml-page .aiml-atlas-question span {
    margin-top: 6px;
    color: #d7e2ef;
    font-size: 12px;
}

/* Premium visualizer */
.aiml-page .aiml-premium-lab {
    padding: 0;
    overflow: hidden;
    border-color: #254667;
    background: var(--aiml-navy-900);
    color: #e5edf7;
    box-shadow: var(--aiml-shadow-strong);
    scroll-margin-top: 90px;
}

.aiml-page .aiml-lab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 24px 28px;
    border-bottom: 1px solid #25415d;
    background: linear-gradient(90deg, #0a1b31, #0c2744);
}

.aiml-page .aiml-lab-header .section-label {
    color: #81dfff;
}

.aiml-page .aiml-lab-header .section-label::before {
    background: #22d3ee;
}

.aiml-page .aiml-lab-header h2 {
    margin: 7px 0 5px;
    color: #ffffff;
    font-size: clamp(25px, 3vw, 36px);
}

.aiml-page .aiml-lab-header p {
    margin: 0;
    color: #aebed0;
    font-size: 13px;
}

.aiml-page .aiml-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 11px;
    border: 1px solid #286644;
    border-radius: 999px;
    background: #0d3324;
    color: #a7f3d0;
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
}

.aiml-page .aiml-lab-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
    gap: 14px;
    padding: 16px;
}

.aiml-page .aiml-chart-panel,
.aiml-page .aiml-state-panel {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #29445f;
    border-radius: 14px;
    background: #071422;
}

.aiml-page .aiml-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 10px 15px;
    border-bottom: 1px solid #29445f;
    background: #0b1d31;
}

.aiml-page .aiml-panel-title strong {
    color: #e7f2ff;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.aiml-page .aiml-panel-title span {
    color: #7dd3fc;
    font-size: 11px;
    font-weight: 800;
}

.aiml-page #aimlRegressionChart {
    display: block;
    width: 100%;
    min-width: 560px;
    height: 410px;
    background:
        radial-gradient(circle at 85% 10%, rgba(37, 99, 235, 0.12), transparent 30%),
        #071422;
}

.aiml-page .aiml-chart-grid path {
    fill: none;
    stroke: #17324d;
    stroke-width: 1;
}

.aiml-page .aiml-chart-axis {
    fill: none;
    stroke: #7590ac;
    stroke-width: 2;
}

.aiml-page .aiml-axis-label {
    fill: #7891a9;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-anchor: middle;
}

.aiml-page .aiml-data-points circle {
    fill: #7dd3fc;
    stroke: #dff8ff;
    stroke-width: 2;
    filter: drop-shadow(0 0 5px rgba(125, 211, 252, 0.65));
}

.aiml-page .aiml-regression-line {
    stroke: var(--aiml-gold-light);
    stroke-width: 5;
    stroke-linecap: round;
    filter: drop-shadow(0 0 7px rgba(245, 215, 110, 0.45));
    transition: x1 0.42s ease, y1 0.42s ease, x2 0.42s ease, y2 0.42s ease;
}

.aiml-page .aiml-state-panel {
    padding-bottom: 15px;
}

.aiml-page .aiml-state-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    padding: 14px;
}

.aiml-page .aiml-state-grid > div {
    min-width: 0;
    padding: 12px;
    border: 1px solid #29445f;
    border-radius: 10px;
    background: #0a1929;
}

.aiml-page .aiml-state-grid span,
.aiml-page .aiml-state-grid strong {
    display: block;
}

.aiml-page .aiml-state-grid span {
    color: #7891a9;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.aiml-page .aiml-state-grid strong {
    margin-top: 6px;
    color: #f6d960;
    font-family: Consolas, monospace;
    font-size: 18px;
    overflow-wrap: anywhere;
}

.aiml-page .aiml-training-explanation {
    margin: 0 14px;
    padding: 14px;
    border-left: 4px solid #22d3ee;
    border-radius: 9px;
    background: #0b2135;
}

.aiml-page .aiml-training-explanation span {
    color: #67e8f9;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 0.1em;
}

.aiml-page .aiml-training-explanation p {
    margin: 6px 0 0;
    color: #c3d2e2;
    font-size: 12px;
    line-height: 1.65;
}

.aiml-page .aiml-gradient-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 13px 14px 0;
    padding: 11px;
    border: 1px solid #27435e;
    border-radius: 9px;
    background: #081725;
}

.aiml-page .aiml-gradient-flow span {
    padding: 5px 7px;
    border-radius: 6px;
    background: #122d49;
    color: #b5d4ee;
    font-size: 9px;
    font-weight: 850;
}

.aiml-page .aiml-gradient-flow b {
    color: var(--aiml-gold-light);
    font-size: 11px;
}

.aiml-page .aiml-lab-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    padding: 15px 16px 18px;
    border-top: 1px solid #25415d;
    background: #081626;
}

.aiml-page .aiml-lab-controls button {
    min-height: 42px;
    padding: 9px 13px;
    border: 1px solid #36516d;
    border-radius: 8px;
    background: #344a63;
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}

.aiml-page .aiml-lab-controls button.primary { border-color: #2563eb; background: #2563eb; }
.aiml-page .aiml-lab-controls button.success { border-color: #16a34a; background: #16a34a; }
.aiml-page .aiml-lab-controls button.warning { border-color: #d97706; background: #d97706; }
.aiml-page .aiml-lab-controls button.reset { border-color: #7c3aed; background: #7c3aed; }

.aiml-page .aiml-lab-controls button:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    filter: grayscale(0.4);
}

.aiml-page #aimlLabProgressText {
    margin-left: auto;
    color: #8ea5bc;
    font-size: 10px;
    font-weight: 800;
}

/* Project ladder */
.aiml-page .aiml-project-section {
    padding: clamp(25px, 3vw, 40px);
    border: 1px solid #cfe1ee;
    border-radius: 22px;
    background:
        radial-gradient(circle at 0 100%, rgba(34, 211, 238, 0.10), transparent 26%),
        #ffffff;
    box-shadow: var(--aiml-shadow);
}

.aiml-page .aiml-project-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
}

.aiml-page .aiml-project-grid article {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 310px;
    flex-direction: column;
    padding: 20px;
    overflow: hidden;
    border: 1px solid #d6e4ef;
    border-top: 4px solid #22b8cf;
    border-radius: 15px;
    background: linear-gradient(165deg, #f0fcff, #ffffff 58%);
}

.aiml-page .aiml-project-grid article:nth-child(2) { border-top-color: #2563eb; }
.aiml-page .aiml-project-grid article:nth-child(3) { border-top-color: #8b5cf6; }
.aiml-page .aiml-project-grid article:nth-child(4) { border-top-color: #d4af37; }

.aiml-page .aiml-project-grid article > span {
    max-width: calc(100% - 50px);
    color: #287d90;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 0.08em;
}

.aiml-page .aiml-project-grid i {
    position: absolute;
    top: 13px;
    right: 16px;
    display: grid;
    width: 39px;
    height: 39px;
    place-items: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 5px 15px rgba(15, 23, 42, 0.07);
    font-size: 20px;
    font-style: normal;
}

.aiml-page .aiml-project-grid h3 {
    margin: 30px 0 9px;
    font-size: 20px;
}

.aiml-page .aiml-project-grid p {
    margin: 0;
    color: var(--aiml-slate-600);
    font-size: 12px;
}

.aiml-page .aiml-project-grid ul {
    margin: auto 0 0;
    padding: 16px 0 0 19px;
    color: #3e5369;
    font-size: 11px;
}

.aiml-page .aiml-project-grid li {
    margin: 5px 0;
}

/* Placement */
.aiml-page .aiml-placement-section {
    padding: clamp(25px, 3vw, 40px);
    border: 1px solid #e3d39a;
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0, rgba(212, 175, 55, 0.12), transparent 30%),
        #ffffff;
    box-shadow: var(--aiml-shadow);
}

.aiml-page .aiml-placement-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
}

.aiml-page .aiml-placement-grid article {
    position: relative;
    min-width: 0;
    min-height: 200px;
    padding: 20px;
    overflow: hidden;
    border: 1px solid #e5dfc8;
    border-radius: 14px;
    background: linear-gradient(145deg, #fffef8, #ffffff);
}

.aiml-page .aiml-placement-grid article > span {
    position: absolute;
    top: 11px;
    right: 14px;
    color: #f1e8c6;
    font-size: 37px;
    font-weight: 950;
}

.aiml-page .aiml-placement-grid i {
    display: grid;
    width: 43px;
    height: 43px;
    place-items: center;
    border-radius: 11px;
    background: #fff4c8;
    font-size: 21px;
    font-style: normal;
}

.aiml-page .aiml-placement-grid h3 {
    margin: 15px 0 7px;
    font-size: 18px;
}

.aiml-page .aiml-placement-grid p {
    margin: 0;
    color: var(--aiml-slate-600);
    font-size: 12px;
}

/* Learning standard and final CTA */
.aiml-page .aiml-learning-standard {
    display: grid;
    grid-template-columns: minmax(300px, 0.7fr) minmax(0, 1.3fr);
    gap: 30px;
    border-top: 4px solid var(--aiml-blue-600);
}

.aiml-page .aiml-standard-intro p {
    color: var(--aiml-slate-600);
}

.aiml-page .aiml-standard-flow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.aiml-page .aiml-standard-flow li {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    border: 1px solid #dae5f1;
    border-radius: 11px;
    background: #f8fbff;
}

.aiml-page .aiml-standard-flow li > span {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 9px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 950;
}

.aiml-page .aiml-standard-flow strong {
    display: block;
    color: var(--aiml-heading);
    font-size: 12px;
}

.aiml-page .aiml-standard-flow p {
    margin: 3px 0 0;
    color: var(--aiml-slate-500);
    font-size: 10px;
    line-height: 1.5;
}

.aiml-page .aiml-final-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    border: 1px solid #1f4164;
    background:
        radial-gradient(circle at 90% 30%, rgba(34, 211, 238, 0.12), transparent 30%),
        linear-gradient(135deg, #061526, #0c2b4d);
}

.aiml-page .aiml-final-cta h2 {
    max-width: 850px;
    color: #ffffff;
}

.aiml-page .aiml-final-cta p {
    max-width: 850px;
    color: #b8c9da;
}

.aiml-page .aiml-final-cta .aiml-button {
    flex: 0 0 auto;
    max-width: 290px;
}

.aiml-page .aiml-no-results {
    margin: 25px 0;
    padding: 22px;
    border: 1px solid #fdba74;
    border-radius: 14px;
    background: #fff7ed;
    color: #9a3412;
    text-align: center;
}

.aiml-page .aiml-no-results strong,
.aiml-page .aiml-no-results span {
    display: block;
}

.aiml-page .aiml-no-results span {
    margin-top: 4px;
    font-size: 12px;
}

/* Footer */
.aiml-page .footer {
    margin: 0;
    border-top: 3px solid var(--aiml-gold);
    background: #061526;
    color: #c9d6e4;
}

.aiml-page .footer-container {
    display: grid;
    grid-template-columns: minmax(260px, 1.25fr) repeat(3, minmax(150px, 0.75fr));
    gap: 32px;
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
    padding: 42px 0 32px;
}

.aiml-page .footer-brand {
    font-size: 27px;
    font-weight: 950;
}

.aiml-page .footer-tagline {
    margin: 8px 0 5px;
    color: #f1d468;
    font-size: 13px;
    font-weight: 850;
}

.aiml-page .footer-description {
    max-width: 350px;
    margin: 0;
    color: #8fa5bb;
    font-size: 12px;
}

.aiml-page .footer-column h3 {
    margin: 0 0 12px;
    color: #ffffff;
    font-size: 14px;
}

.aiml-page .footer-column a {
    display: block;
    margin: 7px 0;
    color: #9fb2c5;
    font-size: 12px;
    text-decoration: none;
}

.aiml-page .footer-column a:hover {
    color: #f2d66e;
}

.aiml-page .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
    padding: 17px 0 22px;
    border-top: 1px solid #17324d;
    color: #7189a0;
    font-size: 11px;
}

.aiml-page .footer-bottom p {
    margin: 0;
}

/* Search states */
.aiml-page .aiml-topic-card.is-search-hidden,
.aiml-page .aiml-level-section.is-search-hidden,
.aiml-page .aiml-topic-link.is-search-hidden,
.aiml-page .sidebar-title.is-search-hidden {
    display: none !important;
}

.aiml-page .aiml-topic-card.is-search-match {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10), 0 15px 30px rgba(37, 99, 235, 0.08);
}

/* Responsive */
@media (max-width: 1420px) {
    .aiml-page .aiml-part-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .aiml-page .aiml-part-card:last-child {
        grid-column: span 2;
    }
}

@media (max-width: 1230px) {
    .aiml-page .top-header {
        padding: 0 15px;
    }

    .aiml-page .top-header .logo {
        min-width: 190px;
    }

    .aiml-page .top-nav {
        max-width: calc(100vw - 210px);
    }

    .aiml-page .top-nav a {
        padding-right: 10px;
        padding-left: 10px;
        font-size: 12px;
    }

    .aiml-page .docs-layout > .sidebar {
        width: 240px;
        min-width: 240px;
    }

    .aiml-page .docs-layout > .main-content {
        width: calc(100% - 240px);
        padding-right: 24px;
        padding-left: 24px;
    }

    .aiml-page .aiml-hero {
        grid-template-columns: 1fr;
    }

    .aiml-page .aiml-hero-visual {
        width: min(760px, 100%);
    }

    .aiml-page .aiml-topic-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aiml-page .aiml-project-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1020px) {
    .aiml-page .aiml-algorithm-atlas,
    .aiml-page .aiml-learning-standard,
    .aiml-page .aiml-lab-grid {
        grid-template-columns: 1fr;
    }

    .aiml-page .aiml-placement-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aiml-page .aiml-prerequisite-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 880px) {
    .aiml-page .top-header {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        min-height: auto !important;
        padding: 0 12px 10px !important;
        flex-wrap: wrap !important;
    }

    .aiml-page .top-header .logo {
        min-width: 0 !important;
        height: 62px !important;
        font-size: 22px !important;
    }

    .aiml-page .main-logo {
        width: 55px !important;
        height: 55px !important;
        margin-right: 5px !important;
    }

    .aiml-page .top-nav {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: none !important;
        height: 43px !important;
        min-height: 43px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    .aiml-page .top-nav a {
        display: inline-flex !important;
        height: 43px !important;
        min-height: 43px !important;
        padding: 0 10px !important;
        flex: 0 0 auto !important;
        font-size: 12px !important;
    }

    .aiml-page .top-nav a.active::after {
        right: 10px;
        bottom: 2px;
        left: 10px;
    }

    .aiml-page .aiml-sidebar-toggle {
        position: sticky !important;
        top: 0 !important;
        z-index: 1200 !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 11px 16px !important;
        border: 0 !important;
        border-bottom: 1px solid #cbd5e1 !important;
        background: #ffffff !important;
        color: var(--aiml-heading) !important;
        box-shadow: 0 5px 14px rgba(15, 23, 42, 0.08) !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        text-align: left !important;
        cursor: pointer !important;
    }

    .aiml-page .docs-layout {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .aiml-page .docs-layout > .sidebar {
        display: none !important;
        position: fixed !important;
        top: 48px !important;
        right: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 1160 !important;
        width: min(360px, 90vw) !important;
        min-width: 0 !important;
        height: calc(100dvh - 48px) !important;
        max-height: calc(100dvh - 48px) !important;
        margin: 0 !important;
        padding: 18px 13px 34px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        border-right: 1px solid #d7e2ef !important;
        background: #ffffff !important;
        box-shadow: 15px 0 38px rgba(4, 16, 31, 0.28) !important;
        overscroll-behavior: contain;
    }

    .aiml-page .docs-layout > .sidebar.is-open {
        display: block !important;
    }

    .aiml-page .aiml-drawer-backdrop {
        display: none;
        position: fixed;
        inset: 48px 0 0;
        z-index: 1140;
        width: 100%;
        height: calc(100dvh - 48px);
        padding: 0;
        border: 0;
        background: rgba(3, 12, 25, 0.58);
        backdrop-filter: blur(2px);
    }

    body.aiml-page.aiml-drawer-open {
        overflow: hidden !important;
    }

    body.aiml-page.aiml-drawer-open .aiml-sidebar-toggle {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        z-index: 1200 !important;
    }

    body.aiml-page.aiml-drawer-open .aiml-drawer-backdrop {
        display: block;
    }

    .aiml-page .docs-layout > .main-content {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 22px 16px 45px !important;
        float: none !important;
        transform: none !important;
    }

    .aiml-page .aiml-hero {
        min-height: 0;
        padding: 34px 25px;
        border-radius: 18px;
    }

    .aiml-page .aiml-hero .page-title {
        font-size: clamp(37px, 9vw, 55px);
    }

    .aiml-page .aiml-mission-strip,
    .aiml-page .aiml-part-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aiml-page .aiml-part-card:last-child {
        grid-column: 1 / -1;
    }

    .aiml-page .aiml-final-cta {
        align-items: flex-start;
        flex-direction: column;
    }

    .aiml-page .footer-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .aiml-page {
        font-size: 15px;
    }

    .aiml-page .top-header .logo {
        font-size: 20px !important;
    }

    .aiml-page .main-logo {
        width: 49px !important;
        height: 49px !important;
    }

    .aiml-page .docs-layout > .main-content {
        padding: 17px 11px 38px !important;
    }

    .aiml-page .aiml-hero,
    .aiml-page .content-card,
    .aiml-page .aiml-course-architecture,
    .aiml-page .aiml-level-section,
    .aiml-page .aiml-placement-section {
        padding: 21px 17px;
        border-radius: 15px;
    }

    .aiml-page .aiml-premium-lab {
        padding: 0;
    }

    .aiml-page .aiml-hero .page-title {
        font-size: 37px;
    }

    .aiml-page .aiml-hero .page-description {
        font-size: 14px;
    }

    .aiml-page .aiml-hero-actions,
    .aiml-page .aiml-hero-actions .aiml-button,
    .aiml-page .aiml-final-cta .aiml-button {
        width: 100%;
        max-width: none;
    }

    .aiml-page .aiml-hero-visual {
        display: none;
    }

    .aiml-page .aiml-mission-strip,
    .aiml-page .aiml-prerequisite-checks,
    .aiml-page .aiml-part-grid,
    .aiml-page .aiml-topic-grid,
    .aiml-page .aiml-placement-grid,
    .aiml-page .aiml-project-grid,
    .aiml-page .aiml-standard-flow,
    .aiml-page .aiml-state-grid {
        grid-template-columns: 1fr;
    }

    .aiml-page .aiml-hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aiml-page .aiml-part-card:last-child {
        grid-column: auto;
    }

    .aiml-page .aiml-part-card {
        min-height: 205px;
    }

    .aiml-page .aiml-topic-card {
        min-height: 0;
    }

    .aiml-page .aiml-project-grid article {
        min-height: 0;
    }

    .aiml-page .aiml-section-heading,
    .aiml-page .aiml-level-heading,
    .aiml-page .aiml-lab-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .aiml-page .aiml-roadmap-progress {
        width: 100%;
        text-align: left;
    }

    .aiml-page .aiml-level-heading > b {
        align-self: flex-start;
    }

    .aiml-page .aiml-algorithm-atlas,
    .aiml-page .aiml-learning-standard {
        gap: 20px;
    }

    .aiml-page .aiml-atlas-panel {
        padding: 18px;
    }

    .aiml-page .aiml-lab-header {
        padding: 20px 17px;
    }

    .aiml-page .aiml-lab-grid {
        padding: 9px;
    }

    .aiml-page .aiml-chart-panel {
        overflow-x: auto;
    }

    .aiml-page #aimlRegressionChart {
        min-width: 520px;
        height: 340px;
    }

    .aiml-page .aiml-lab-controls {
        align-items: stretch;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aiml-page .aiml-lab-controls button {
        width: 100%;
    }

    .aiml-page #aimlLabProgressText {
        grid-column: 1 / -1;
        margin-left: 0;
        text-align: center;
    }

    .aiml-page .footer-container {
        grid-template-columns: 1fr;
        width: calc(100% - 32px);
        gap: 24px;
    }

    .aiml-page .footer-bottom {
        align-items: flex-start;
        width: calc(100% - 32px);
        flex-direction: column;
    }
}

@media (max-width: 420px) {
    .aiml-page .aiml-hero .page-title {
        font-size: 32px;
    }

    .aiml-page .aiml-card-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .aiml-page .aiml-complete-button {
        width: 100%;
    }

    .aiml-page .aiml-gradient-flow b {
        display: none;
    }

    .aiml-page .aiml-gradient-flow span {
        flex: 1 1 45%;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .aiml-page *,
    .aiml-page *::before,
    .aiml-page *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ================================================================
   Level 01 — AI & ML Foundations
   Scoped lesson system
   ================================================================ */

.aiml-lesson-page .main-content {
    max-width: none;
    padding: 28px clamp(20px, 3vw, 48px) 70px;
}

.aiml-lesson-page .aiml-topic-link.active {
    border-left: 4px solid var(--aiml-blue-600);
    background: linear-gradient(90deg, #dcecff, #f5f9ff);
    color: #0d4e98;
    font-weight: 850;
}

.aiml-lesson-page .aiml-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 1500px;
    margin: 0 auto 18px;
    color: var(--aiml-slate-500);
    font-size: 13px;
    font-weight: 750;
}

.aiml-lesson-page .aiml-breadcrumb a {
    color: var(--aiml-blue-700);
    text-decoration: none;
}

.aiml-lesson-page .aiml-lesson-hero,
.aiml-lesson-page .content-card,
.aiml-lesson-page .content-section,
.aiml-lesson-page .aiml-lesson-navigation {
    width: 100%;
    max-width: 1500px;
    margin-right: auto;
    margin-left: auto;
}

.aiml-lesson-page .content-card,
.aiml-lesson-page .content-section {
    margin-top: 30px;
}

.aiml-lesson-page .content-card {
    padding: clamp(24px, 3vw, 44px);
    overflow: hidden;
    border: 1px solid var(--aiml-border);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--aiml-shadow);
}

.aiml-lesson-page .aiml-lesson-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(370px, 0.75fr);
    min-height: 470px;
    overflow: hidden;
    border-radius: 26px;
    background:
        radial-gradient(circle at 84% 16%, rgba(34, 211, 238, 0.18), transparent 27%),
        radial-gradient(circle at 67% 100%, rgba(139, 92, 246, 0.15), transparent 30%),
        linear-gradient(135deg, #04101f, #082847 68%, #0b3452);
    box-shadow: 0 26px 70px rgba(5, 25, 47, 0.24);
}

.aiml-lesson-page .aiml-lesson-hero::before {
    position: absolute;
    inset: 0;
    opacity: 0.18;
    background-image: linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
    background-size: 34px 34px;
    content: "";
    mask-image: linear-gradient(90deg, transparent, #000);
}

.aiml-lesson-page .aiml-lesson-hero-copy {
    position: relative;
    z-index: 1;
    align-self: center;
    padding: clamp(34px, 5vw, 74px);
}

.aiml-lesson-page .aiml-lesson-hero .subject-label {
    color: var(--aiml-gold-light);
}

.aiml-lesson-page .aiml-lesson-hero h1 {
    max-width: 780px;
    margin: 14px 0 18px;
    color: #fff;
    font-size: clamp(39px, 4.4vw, 68px);
    line-height: 1.04;
    letter-spacing: -0.045em;
}

.aiml-lesson-page .aiml-lesson-hero-copy > p {
    max-width: 800px;
    margin: 0;
    color: #cbdced;
    font-size: 18px;
    line-height: 1.75;
}

.aiml-lesson-page .aiml-lesson-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 25px 0 0;
}

.aiml-lesson-page .aiml-lesson-meta span {
    padding: 7px 12px;
    border: 1px solid rgba(157,214,255,.22);
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    color: #e8f3fc;
    font-size: 12px;
    font-weight: 800;
}

.aiml-lesson-page .aiml-foundation-orbit {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    padding: 38px;
}

.aiml-lesson-page .aiml-orbit {
    display: grid;
    place-items: center;
    border-radius: 50%;
}

.aiml-lesson-page .aiml-orbit-ai {
    position: relative;
    width: 360px;
    height: 360px;
    border: 2px solid rgba(78, 202, 255, 0.6);
    background: rgba(8, 36, 65, 0.72);
    box-shadow: inset 0 0 45px rgba(34,211,238,.08), 0 0 40px rgba(34,211,238,.08);
}

.aiml-lesson-page .aiml-orbit-ai > span,
.aiml-lesson-page .aiml-orbit-ml > span {
    position: absolute;
    top: 20px;
    color: #91dcff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .1em;
}

.aiml-lesson-page .aiml-orbit-ml {
    position: relative;
    width: 260px;
    height: 260px;
    border: 2px solid rgba(212,175,55,.75);
    background: rgba(212,175,55,.08);
}

.aiml-lesson-page .aiml-orbit-ml > span {
    color: var(--aiml-gold-light);
}

.aiml-lesson-page .aiml-orbit-dl {
    width: 150px;
    height: 150px;
    border: 2px solid #a78bfa;
    background: linear-gradient(145deg, rgba(139,92,246,.45), rgba(21,94,239,.3));
    color: #fff;
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
    box-shadow: 0 0 34px rgba(139,92,246,.3);
}

.aiml-lesson-page .aiml-foundation-orbit > p {
    margin: 18px 0 0;
    color: #bdd6ed;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

.aiml-lesson-page .aiml-section-title {
    margin-bottom: 25px;
}

.aiml-lesson-page .aiml-section-title h2,
.aiml-lesson-page .aiml-lesson-heading h2,
.aiml-lesson-page .aiml-outcomes-card h2 {
    margin: 7px 0 7px;
    color: var(--aiml-heading);
    font-size: clamp(28px, 3vw, 43px);
    line-height: 1.16;
    letter-spacing: -.025em;
}

.aiml-lesson-page .aiml-section-title p,
.aiml-lesson-page .aiml-lesson-heading p {
    max-width: 940px;
    margin: 0;
    color: var(--aiml-slate-600);
    font-size: 17px;
}

.aiml-lesson-page .aiml-lesson-heading {
    margin-bottom: 22px;
    padding: 0;
}

.aiml-lesson-page .aiml-outcomes-card {
    display: grid;
    grid-template-columns: minmax(260px, .6fr) minmax(0, 1.4fr);
    gap: 34px;
    border-top: 4px solid var(--aiml-blue-600);
}

.aiml-lesson-page .aiml-outcome-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.aiml-lesson-page .aiml-outcome-grid article {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px;
    border: 1px solid #dce6f2;
    border-radius: 13px;
    background: #f8fbff;
}

.aiml-lesson-page .aiml-outcome-grid b {
    display: grid;
    flex: 0 0 35px;
    height: 35px;
    place-items: center;
    border-radius: 10px;
    background: #dceaff;
    color: var(--aiml-blue-700);
    font-size: 11px;
}

.aiml-lesson-page .aiml-outcome-grid span {
    color: #253f5d;
    font-size: 14px;
    font-weight: 680;
}

.aiml-lesson-page .aiml-revision-grid,
.aiml-lesson-page .aiml-responsible-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.aiml-lesson-page .aiml-revision-grid article,
.aiml-lesson-page .aiml-responsible-grid article {
    min-height: 190px;
    padding: 22px;
    border: 1px solid #d7e3f0;
    border-radius: 17px;
    background: linear-gradient(145deg, #fff, #f4f8fc);
    box-shadow: 0 8px 24px rgba(7,29,59,.055);
}

.aiml-lesson-page .aiml-revision-grid span,
.aiml-lesson-page .aiml-vocabulary-grid span,
.aiml-lesson-page .aiml-approach-label,
.aiml-lesson-page .aiml-formula-card > span {
    display: block;
    margin-bottom: 13px;
    color: var(--aiml-blue-700);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .11em;
}

.aiml-lesson-page .aiml-revision-grid strong,
.aiml-lesson-page .aiml-vocabulary-grid strong,
.aiml-lesson-page .aiml-responsible-grid strong {
    display: block;
    color: var(--aiml-heading);
    font-size: 17px;
}

.aiml-lesson-page .aiml-revision-grid p,
.aiml-lesson-page .aiml-vocabulary-grid p,
.aiml-lesson-page .aiml-responsible-grid p {
    margin: 8px 0 0;
    color: var(--aiml-slate-600);
    font-size: 14px;
}

.aiml-lesson-page .aiml-definition-grid,
.aiml-lesson-page .aiml-paradigm-grid,
.aiml-lesson-page .aiml-placement-check-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
}

.aiml-lesson-page .aiml-definition-grid article {
    position: relative;
    min-height: 270px;
    padding: 25px;
    overflow: hidden;
    border: 1px solid #d8e3ee;
    border-radius: 18px;
    background: #f8fbfe;
}

.aiml-lesson-page .aiml-definition-grid article::after {
    position: absolute;
    right: -32px;
    bottom: -32px;
    width: 105px;
    height: 105px;
    border-radius: 50%;
    background: currentColor;
    content: "";
    opacity: .07;
}

.aiml-lesson-page .aiml-definition-grid article > span {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 15px;
    background: currentColor;
    color: #fff;
    font-size: 13px;
    font-weight: 950;
}

.aiml-lesson-page .aiml-definition-grid article.ai { color: #155eef; }
.aiml-lesson-page .aiml-definition-grid article.ml { color: #0f9f86; }
.aiml-lesson-page .aiml-definition-grid article.dl { color: #7c3aed; }
.aiml-lesson-page .aiml-definition-grid article.ds { color: #c77800; }

.aiml-lesson-page .aiml-definition-grid h3 {
    margin: 18px 0 8px;
    color: var(--aiml-heading);
    font-size: 19px;
}

.aiml-lesson-page .aiml-definition-grid p,
.aiml-lesson-page .aiml-definition-grid small {
    color: var(--aiml-slate-600);
}

.aiml-lesson-page .aiml-definition-grid small {
    display: block;
    margin-top: 16px;
    padding-top: 13px;
    border-top: 1px solid #dee8f2;
    font-size: 12px;
    font-weight: 700;
}

.aiml-lesson-page .aiml-remember-note,
.aiml-lesson-page .aiml-warning-note {
    margin-top: 18px;
    padding: 16px 19px;
    border-left: 5px solid var(--aiml-gold);
    border-radius: 0 12px 12px 0;
    background: #fff9e9;
    color: #614600;
}

.aiml-lesson-page .aiml-approach-comparison {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.aiml-lesson-page .aiml-approach-comparison > article {
    padding: 25px;
    border: 1px solid var(--aiml-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--aiml-shadow);
}

.aiml-lesson-page .aiml-equation-flow {
    display: flex;
    min-height: 105px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 17px;
    border-radius: 13px;
    background: #07182c;
    color: #fff;
    text-align: center;
}

.aiml-lesson-page .aiml-equation-flow span,
.aiml-lesson-page .aiml-equation-flow strong {
    padding: 7px 9px;
    border: 1px solid #2d4b6b;
    border-radius: 8px;
    background: #0e2947;
    font-size: 12px;
}

.aiml-lesson-page .aiml-equation-flow strong {
    border-color: #d4af37;
    color: #ffe788;
}

.aiml-lesson-page .aiml-approach-comparison pre {
    margin: 16px 0 0;
    padding: 14px;
    overflow: auto;
    border-radius: 10px;
    background: #eef4fa;
    color: #064cb2;
    font-size: 13px;
}

.aiml-lesson-page code {
    padding: 2px 6px;
    border-radius: 6px;
    background: #eef3f8;
    color: #0755c8;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: .9em;
    font-weight: 760;
}

.aiml-lesson-page pre code {
    padding: 0;
    background: transparent;
    color: inherit;
    font-weight: 600;
}

.aiml-lesson-page .aiml-vocabulary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.aiml-lesson-page .aiml-vocabulary-grid article {
    min-height: 175px;
    padding: 19px;
    border: 1px solid #d9e4ef;
    border-radius: 15px;
    background: linear-gradient(145deg, #fff, #f6f9fc);
}

.aiml-lesson-page .aiml-paradigm-grid article {
    padding: 25px;
    border-top: 4px solid var(--aiml-blue-600);
    border-radius: 17px;
    background: #fff;
    box-shadow: var(--aiml-shadow);
}

.aiml-lesson-page .aiml-paradigm-grid article:nth-child(2) { border-color: var(--aiml-teal-500); }
.aiml-lesson-page .aiml-paradigm-grid article:nth-child(3) { border-color: var(--aiml-purple-500); }
.aiml-lesson-page .aiml-paradigm-grid article:nth-child(4) { border-color: var(--aiml-gold); }

.aiml-lesson-page .aiml-paradigm-grid > article > span {
    color: var(--aiml-blue-700);
    font-size: 12px;
    font-weight: 950;
}

.aiml-lesson-page .aiml-paradigm-grid h3 {
    min-height: 50px;
    margin: 9px 0;
    color: var(--aiml-heading);
    font-size: 19px;
}

.aiml-lesson-page .aiml-paradigm-grid article > div {
    margin: 18px 0;
    padding: 13px;
    border-radius: 11px;
    background: #f1f6fb;
    color: #37506c;
    font-size: 13px;
}

.aiml-lesson-page .aiml-paradigm-grid small {
    color: var(--aiml-slate-500);
    font-weight: 750;
}

.aiml-lesson-page .aiml-framing-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.aiml-lesson-page .aiml-framing-flow li {
    display: flex;
    gap: 13px;
    min-height: 105px;
    padding: 17px;
    border: 1px solid #dbe5ef;
    border-radius: 14px;
    background: #f8fbff;
}

.aiml-lesson-page .aiml-framing-flow b {
    display: grid;
    flex: 0 0 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    background: var(--aiml-blue-600);
    color: #fff;
}

.aiml-lesson-page .aiml-framing-flow strong,
.aiml-lesson-page .aiml-framing-flow span {
    display: block;
}

.aiml-lesson-page .aiml-framing-flow strong { color: var(--aiml-heading); font-size: 16px; }
.aiml-lesson-page .aiml-framing-flow span { margin-top: 4px; color: var(--aiml-slate-600); font-size: 13px; }

.aiml-lesson-page .aiml-case-box {
    margin-top: 18px;
    padding: 22px;
    border: 1px solid #b9d5f5;
    border-radius: 15px;
    background: linear-gradient(130deg, #eaf4ff, #f7fbff);
}

.aiml-lesson-page .aiml-case-box > span {
    color: var(--aiml-blue-700);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .1em;
}

.aiml-lesson-page .aiml-case-box p { margin: 10px 0 0; }

.aiml-lesson-page .aiml-lifecycle-flow,
.aiml-lesson-page .aiml-takeaway-flow {
    display: flex;
    align-items: stretch;
    gap: 8px;
    overflow-x: auto;
    padding: 7px 0 13px;
}

.aiml-lesson-page .aiml-lifecycle-flow article {
    flex: 1 0 145px;
    min-height: 160px;
    padding: 18px;
    border: 1px solid #d7e4ef;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(7,29,59,.05);
}

.aiml-lesson-page .aiml-lifecycle-flow > b,
.aiml-lesson-page .aiml-takeaway-flow > b {
    align-self: center;
    color: var(--aiml-gold);
    font-size: 22px;
}

.aiml-lesson-page .aiml-lifecycle-flow span {
    color: var(--aiml-blue-700);
    font-size: 11px;
    font-weight: 950;
}

.aiml-lesson-page .aiml-lifecycle-flow strong {
    display: block;
    margin-top: 7px;
    color: var(--aiml-heading);
    font-size: 17px;
}

.aiml-lesson-page .aiml-lifecycle-flow p { margin: 8px 0 0; color: var(--aiml-slate-600); font-size: 13px; }

.aiml-lesson-page .aiml-split-bar {
    display: flex;
    overflow: hidden;
    min-height: 90px;
    border-radius: 16px;
    color: #fff;
    box-shadow: 0 10px 25px rgba(7,29,59,.14);
}

.aiml-lesson-page .aiml-split-bar div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 18px;
}

.aiml-lesson-page .aiml-split-bar .train { flex: 7; background: #155eef; }
.aiml-lesson-page .aiml-split-bar .validation { flex: 1.5; min-width: 190px; background: #7c3aed; }
.aiml-lesson-page .aiml-split-bar .test { flex: 1.5; min-width: 190px; background: #078574; }
.aiml-lesson-page .aiml-split-bar span { opacity: .85; font-size: 12px; }

.aiml-lesson-page .aiml-split-rules,
.aiml-lesson-page .aiml-fit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.aiml-lesson-page .aiml-split-rules article {
    padding: 18px;
    border: 1px solid #dbe5ef;
    border-radius: 13px;
    background: #f8fbfe;
}

.aiml-lesson-page .aiml-split-rules strong { color: var(--aiml-heading); }
.aiml-lesson-page .aiml-split-rules p { margin: 6px 0 0; font-size: 14px; }

.aiml-lesson-page .aiml-fit-grid article {
    padding: 22px;
    border: 1px solid var(--aiml-border);
    border-radius: 17px;
    background: #fff;
    box-shadow: var(--aiml-shadow);
}

.aiml-lesson-page .aiml-fit-grid > article > span {
    color: var(--aiml-blue-700);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .1em;
}

.aiml-lesson-page .aiml-fit-sketch {
    position: relative;
    height: 145px;
    margin: 16px 0;
    overflow: hidden;
    border: 1px solid #dce5ee;
    border-radius: 12px;
    background-image: linear-gradient(#edf2f7 1px, transparent 1px), linear-gradient(90deg, #edf2f7 1px, transparent 1px);
    background-size: 28px 28px;
}

.aiml-lesson-page .aiml-fit-sketch i {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--aiml-blue-600);
}

.aiml-lesson-page .aiml-fit-sketch i:nth-child(1) { left: 10%; bottom: 18%; }
.aiml-lesson-page .aiml-fit-sketch i:nth-child(2) { left: 28%; bottom: 31%; }
.aiml-lesson-page .aiml-fit-sketch i:nth-child(3) { left: 47%; bottom: 46%; }
.aiml-lesson-page .aiml-fit-sketch i:nth-child(4) { left: 66%; bottom: 62%; }
.aiml-lesson-page .aiml-fit-sketch i:nth-child(5) { left: 84%; bottom: 75%; }
.aiml-lesson-page .aiml-fit-sketch b { position: absolute; inset: 48% 7% auto; height: 4px; border-radius: 5px; background: #ef4444; transform: rotate(-8deg); }
.aiml-lesson-page .aiml-fit-grid .under .aiml-fit-sketch b { transform: rotate(-2deg); }
.aiml-lesson-page .aiml-fit-grid .good .aiml-fit-sketch b { transform: rotate(-20deg); }
.aiml-lesson-page .aiml-fit-grid .over .aiml-fit-sketch b { inset: 20% 7%; height: 60%; border: 0; background: transparent; border-top: 4px dashed #ef4444; border-radius: 50%; transform: rotate(-18deg); }

.aiml-lesson-page .aiml-fit-grid h3 { margin: 0; color: var(--aiml-heading); }
.aiml-lesson-page .aiml-fit-grid p { margin: 7px 0 0; font-size: 14px; }

.aiml-lesson-page .aiml-responsible-grid article { min-height: 165px; }
.aiml-lesson-page .aiml-responsible-grid i { display: block; margin-bottom: 9px; font-size: 27px; font-style: normal; }

/* Premium visualizer and tracer */
.aiml-lesson-page .aiml-premium-interactive,
.aiml-lesson-page .aiml-tracer-section {
    padding: 0;
    border: 1px solid #274563;
    background: #07182c;
    color: #d5e3f2;
    box-shadow: 0 25px 60px rgba(5,19,36,.24);
}

.aiml-lesson-page .aiml-interactive-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    padding: 27px 30px;
    border-bottom: 1px solid #29425c;
    background: #0b2038;
}

.aiml-lesson-page .aiml-interactive-header > div > span {
    color: #83c8ff;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .12em;
}

.aiml-lesson-page .aiml-interactive-header h2 {
    margin: 7px 0 5px;
    color: #fff;
    font-size: clamp(25px, 3vw, 38px);
    line-height: 1.16;
}

.aiml-lesson-page .aiml-interactive-header p { margin: 0; color: #aec4d9; }

.aiml-lesson-page .aiml-visual-stepper {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    padding: 24px 30px 0;
}

.aiml-lesson-page .aiml-visual-step {
    position: relative;
    min-height: 73px;
    padding: 12px 7px;
    border: 1px solid #294864;
    border-radius: 11px;
    background: #0a1b2e;
    color: #7891a9;
    text-align: center;
    transition: .2s ease;
}

.aiml-lesson-page .aiml-visual-step b,
.aiml-lesson-page .aiml-visual-step span {
    display: block;
}

.aiml-lesson-page .aiml-visual-step b { font-size: 12px; }
.aiml-lesson-page .aiml-visual-step span { margin-top: 2px; font-size: 9px; }
.aiml-lesson-page .aiml-visual-step.is-complete { border-color: #0da684; color: #56e6b8; }
.aiml-lesson-page .aiml-visual-step.is-active { border-color: #4aa6ff; background: #103766; color: #fff; box-shadow: 0 0 0 3px rgba(74,166,255,.12); }

.aiml-lesson-page .aiml-visual-stage {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(310px, .85fr);
    gap: 20px;
    padding: 22px 30px;
}

.aiml-lesson-page .aiml-stage-illustration,
.aiml-lesson-page .aiml-stage-copy {
    min-height: 330px;
    border: 1px solid #29445e;
    border-radius: 18px;
    background: #061322;
}

.aiml-lesson-page .aiml-stage-illustration {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    background-image: radial-gradient(circle at 50% 50%, rgba(37,99,235,.16), transparent 45%), linear-gradient(rgba(126,165,202,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(126,165,202,.05) 1px, transparent 1px);
    background-size: auto, 30px 30px, 30px 30px;
}

.aiml-lesson-page .aiml-stage-copy {
    padding: 30px;
}

.aiml-lesson-page .aiml-stage-copy > span {
    color: var(--aiml-gold-light);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .1em;
}

.aiml-lesson-page .aiml-stage-copy h3 {
    margin: 12px 0;
    color: #fff;
    font-size: 27px;
    line-height: 1.2;
}

.aiml-lesson-page .aiml-stage-copy > p { color: #b7cbe0; }
.aiml-lesson-page .aiml-stage-insight { margin-top: 24px; padding: 16px; border-left: 4px solid var(--aiml-gold); border-radius: 0 10px 10px 0; background: #10253c; color: #dbe9f6; }
.aiml-lesson-page .aiml-stage-insight strong { display: block; color: #ffe47d; font-size: 11px; letter-spacing: .08em; }

.aiml-lesson-page .aiml-stage-art {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 90%;
}

.aiml-lesson-page .aiml-art-stack { display: grid; gap: 9px; }
.aiml-lesson-page .aiml-art-card { min-width: 110px; padding: 12px; border: 1px solid #3c6082; border-radius: 9px; background: #102a46; color: #d6edff; font-size: 12px; font-weight: 750; }
.aiml-lesson-page .aiml-art-card em { float: right; color: #6ee7b7; font-style: normal; }
.aiml-lesson-page .aiml-art-arrow { color: var(--aiml-gold); font-size: 32px; }
.aiml-lesson-page .aiml-art-model { display: grid; width: 150px; height: 150px; place-items: center; border: 2px solid #4aa6ff; border-radius: 50%; background: radial-gradient(circle, #174d82, #0b2744); color: #fff; font-weight: 900; text-align: center; box-shadow: 0 0 36px rgba(74,166,255,.2); }
.aiml-lesson-page .aiml-art-metric { padding: 28px; border: 1px solid #19b58b; border-radius: 17px; background: #0a2d2a; color: #70f0c4; font-size: 25px; font-weight: 950; text-align: center; }
.aiml-lesson-page .aiml-art-metric span { display: block; margin-top: 5px; color: #b5ded4; font-size: 11px; }

.aiml-lesson-page .aiml-interactive-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 30px 28px;
}

.aiml-lesson-page .aiml-interactive-controls button,
.aiml-lesson-page .aiml-panel-toggle,
.aiml-lesson-page .aiml-problem-actions button,
.aiml-lesson-page .aiml-interview-question button {
    min-height: 44px;
    padding: 10px 15px;
    border: 1px solid #41617d;
    border-radius: 10px;
    background: #344c67;
    color: #fff;
    font-weight: 850;
    cursor: pointer;
}

.aiml-lesson-page .aiml-interactive-controls button.primary { border-color: #2563eb; background: #2563eb; }
.aiml-lesson-page .aiml-interactive-controls button.success { border-color: #0ca66f; background: #0ca66f; }
.aiml-lesson-page .aiml-interactive-controls button.warning { border-color: #db7e00; background: #db7e00; }
.aiml-lesson-page .aiml-interactive-controls button.reset { border-color: #7c3aed; background: #7c3aed; }
.aiml-lesson-page .aiml-interactive-controls button:disabled { border-color: #30445a; background: #1c3045; color: #688098; cursor: not-allowed; opacity: .7; }
.aiml-lesson-page .aiml-interactive-controls > span { margin-left: auto; color: #a9bfd3; font-size: 12px; }

.aiml-lesson-page .aiml-panel-toggle {
    flex: 0 0 auto;
    border-color: #408dd5;
    background: #155eef;
}

.aiml-lesson-page .aiml-tracer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
    margin: 24px 30px;
    overflow: hidden;
    border: 1px solid #29445e;
    border-radius: 17px;
}

.aiml-lesson-page .aiml-code-panel,
.aiml-lesson-page .aiml-live-panel { min-width: 0; background: #061322; }
.aiml-lesson-page .aiml-code-panel { border-right: 1px solid #29445e; }
.aiml-lesson-page .aiml-panel-bar { display: flex; justify-content: space-between; gap: 12px; padding: 15px 20px; border-bottom: 1px solid #29445e; background: #0d2138; color: #79c1ff; font-size: 11px; }
.aiml-lesson-page .aiml-panel-bar span { color: #8199b1; }

.aiml-lesson-page .aiml-code-lines {
    height: 510px;
    overflow: auto;
    padding: 12px 0;
    background: #091426;
    color: #e7f0fb;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 13px;
    line-height: 1.75;
}

.aiml-lesson-page .aiml-code-line {
    display: grid;
    grid-template-columns: 47px 1fr;
    min-width: 690px;
    padding: 4px 16px 4px 0;
    border-left: 4px solid transparent;
    white-space: pre;
}

.aiml-lesson-page .aiml-code-line code {
    display: block;
    width: max-content;
    min-width: 100%;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 650;
    line-height: inherit;
    white-space: inherit;
}

.aiml-lesson-page .aiml-code-line span { padding-right: 14px; color: #63809c; text-align: right; user-select: none; }
.aiml-lesson-page .aiml-code-line.is-active { border-left-color: var(--aiml-gold); background: rgba(212,175,55,.14); color: #fff7cf; }
.aiml-lesson-page .aiml-code-line.is-complete:not(.is-active) { color: #92a8bd; }
.aiml-lesson-page .aiml-live-panel { padding-bottom: 20px; }
.aiml-lesson-page .aiml-trace-explanation { min-height: 88px; margin: 15px; padding: 15px; border: 1px solid #29445e; border-radius: 11px; background: #0b1d31; color: #bdd0e1; }

.aiml-lesson-page .aiml-variable-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0 15px;
}

.aiml-lesson-page .aiml-variable {
    min-width: 0;
    padding: 12px;
    border: 1px solid #2d4862;
    border-radius: 10px;
    background: #071627;
}

.aiml-lesson-page .aiml-variable span { display: block; color: #74a8da; font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.aiml-lesson-page .aiml-variable code { display: block; margin-top: 5px; overflow-wrap: anywhere; background: transparent; color: #ffe26e; font-size: 12px; }
.aiml-lesson-page .aiml-expression-box,
.aiml-lesson-page .aiml-output-box { margin: 12px 15px 0; padding: 13px; border: 1px solid #2d4862; border-radius: 10px; background: #071627; }
.aiml-lesson-page .aiml-expression-box span,
.aiml-lesson-page .aiml-output-box span { display: block; margin-bottom: 8px; color: #74a8da; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.aiml-lesson-page .aiml-expression-box code { background: transparent; color: #ffe26e; }
.aiml-lesson-page .aiml-output-box pre { min-height: 38px; margin: 0; color: #64f1ba; font: 13px/1.7 "SFMono-Regular", Consolas, monospace; white-space: pre-wrap; }

.aiml-lesson-page .aiml-code-explanation-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(310px, .75fr);
    gap: 18px;
}

.aiml-lesson-page .aiml-static-code {
    margin: 0;
    padding: 25px;
    overflow: auto;
    border: 1px solid #29445e;
    border-radius: 17px;
    background: #07182c;
    color: #e7f2ff;
    font: 14px/1.85 "SFMono-Regular", Consolas, monospace;
}

.aiml-lesson-page .aiml-formula-card { padding: 25px; border: 1px solid #c7d8ea; border-radius: 17px; background: #fff; box-shadow: var(--aiml-shadow); }
.aiml-lesson-page .aiml-formula-card > div { margin: 15px 0; padding: 20px; border-radius: 12px; background: linear-gradient(130deg, #e9f3ff, #f7fbff); text-align: center; }
.aiml-lesson-page .aiml-formula-card > div code { font-size: 18px; }
.aiml-lesson-page .aiml-formula-card ul { margin: 0; padding-left: 20px; }
.aiml-lesson-page .aiml-formula-card li { margin: 10px 0; }

/* Programming problems */
.aiml-lesson-page .aiml-problems-section {
    padding: clamp(25px, 3vw, 42px);
    border: 1px solid #bcd4ed;
    border-top: 5px solid #16a34a;
    border-radius: 22px;
    background: #f8fbfe;
}

.aiml-lesson-page .aiml-problems-section .section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.aiml-lesson-page .aiml-problem-summary { display: grid; grid-template-columns: auto auto; flex: 0 0 auto; gap: 1px 9px; padding: 15px 19px; border-radius: 13px; background: #07182c; color: #fff; }
.aiml-lesson-page .aiml-problem-summary strong { color: #ffe170; }
.aiml-lesson-page .aiml-problem-summary span { color: #aabed1; font-size: 11px; }
.aiml-lesson-page .aiml-problem-progress { height: 7px; margin-bottom: 20px; overflow: hidden; border-radius: 999px; background: #dce6f0; }
.aiml-lesson-page .aiml-problem-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #16a34a, #22d3ee); transition: width .3s; }
.aiml-lesson-page .aiml-problem-list { display: grid; gap: 17px; }

.aiml-lesson-page .aiml-problem-card {
    overflow: hidden;
    border: 1px solid #ceddea;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 9px 26px rgba(7,29,59,.06);
}

.aiml-lesson-page .aiml-problem-card.is-solved { border-color: #5ac998; box-shadow: 0 0 0 3px rgba(22,163,74,.08); }
.aiml-lesson-page .aiml-problem-head { display: flex; align-items: flex-start; gap: 15px; padding: 22px 25px 10px; }
.aiml-lesson-page .aiml-problem-number { display: grid; flex: 0 0 43px; height: 43px; place-items: center; border-radius: 12px; background: #dceaff; color: var(--aiml-blue-700); font-weight: 950; }
.aiml-lesson-page .aiml-problem-head h3 { margin: 0; color: var(--aiml-heading); font-size: 20px; }
.aiml-lesson-page .aiml-problem-head p { margin: 5px 0 0; color: var(--aiml-slate-600); }
.aiml-lesson-page .aiml-problem-data { display: flex; flex-wrap: wrap; gap: 10px; padding: 6px 25px 18px 83px; }
.aiml-lesson-page .aiml-problem-data span { padding: 9px 12px; border-radius: 9px; background: #eef3f8; color: #31475f; font-size: 12px; font-weight: 700; }
.aiml-lesson-page .aiml-problem-actions { display: flex; flex-wrap: wrap; gap: 9px; padding: 0 25px 22px 83px; }
.aiml-lesson-page .aiml-problem-actions button { border-color: #bed1e5; background: #fff; color: #24415f; }
.aiml-lesson-page .aiml-problem-actions button.primary { border-color: var(--aiml-blue-600); background: var(--aiml-blue-600); color: #fff; }
.aiml-lesson-page .aiml-problem-actions button.hint { border-color: #f0c958; background: #fff9e8; color: #815600; }

.aiml-lesson-page .aiml-problem-reveal,
.aiml-lesson-page .aiml-workspace {
    margin: 0 25px 24px 83px;
    padding: 18px;
    border: 1px solid #d5e2ee;
    border-radius: 13px;
    background: #f8fbfe;
}

.aiml-lesson-page .aiml-problem-reveal strong { color: var(--aiml-heading); }
.aiml-lesson-page .aiml-problem-reveal pre { margin: 12px 0 0; padding: 16px; overflow: auto; border-radius: 10px; background: #07182c; color: #e8f3ff; font: 13px/1.7 "SFMono-Regular", Consolas, monospace; }
.aiml-lesson-page .aiml-workspace label { display: block; margin-bottom: 7px; color: var(--aiml-heading); font-weight: 800; }
.aiml-lesson-page .aiml-workspace textarea { width: 100%; min-height: 190px; padding: 15px; resize: vertical; border: 1px solid #b9cde0; border-radius: 10px; background: #08182a; color: #eaf4ff; font: 13px/1.65 "SFMono-Regular", Consolas, monospace; }
.aiml-lesson-page .aiml-workspace-row { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 11px; }
.aiml-lesson-page .aiml-workspace-row button { padding: 9px 13px; border: 0; border-radius: 8px; background: #155eef; color: #fff; font-weight: 800; cursor: pointer; }
.aiml-lesson-page .aiml-workspace-row button:last-of-type { background: #52667d; }
.aiml-lesson-page .aiml-check-result { flex: 1 1 230px; padding: 9px 12px; border-radius: 8px; background: #eaf0f6; font-size: 13px; font-weight: 750; }
.aiml-lesson-page .aiml-check-result.success { background: #dcfce7; color: #116333; }
.aiml-lesson-page .aiml-check-result.error { background: #fee2e2; color: #98211c; }

/* Quiz and interviews */
.aiml-lesson-page .aiml-quiz-list { display: grid; gap: 17px; }
.aiml-lesson-page .aiml-quiz-question { padding: 20px; border: 1px solid #d5e2ee; border-radius: 15px; background: #f9fbfe; }
.aiml-lesson-page .aiml-quiz-question > strong { display: block; margin-bottom: 13px; color: var(--aiml-heading); font-size: 16px; }
.aiml-lesson-page .aiml-quiz-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.aiml-lesson-page .aiml-quiz-option { display: flex; align-items: flex-start; gap: 10px; min-height: 55px; padding: 13px; border: 1px solid #cbdbea; border-radius: 11px; background: #fff; cursor: pointer; }
.aiml-lesson-page .aiml-quiz-option:hover { border-color: #7eb2ec; background: #f1f7ff; }
.aiml-lesson-page .aiml-quiz-option.is-selected { border-color: #4b91e5; background: #eaf4ff; }
.aiml-lesson-page .aiml-quiz-option.is-correct { border-color: #3ebb7a; background: #e5f9ed; color: #12623b; }
.aiml-lesson-page .aiml-quiz-option.is-wrong { border-color: #e36f6f; background: #fff0f0; color: #8e2727; }
.aiml-lesson-page .aiml-quiz-explanation { margin-top: 13px; padding: 13px; border-left: 4px solid var(--aiml-blue-600); background: #edf5ff; color: #264766; font-size: 14px; }
.aiml-lesson-page .aiml-quiz-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.aiml-lesson-page .aiml-quiz-actions strong { margin-left: auto; color: var(--aiml-heading); }

.aiml-lesson-page .aiml-placement-checkpoint { border-top: 5px solid var(--aiml-gold); background: linear-gradient(140deg, #fff, #fffaf0); }
.aiml-lesson-page .aiml-placement-check-grid { margin-top: 22px; }
.aiml-lesson-page .aiml-placement-check-grid article { padding: 20px; border: 1px solid #e7d9ab; border-radius: 14px; background: rgba(255,255,255,.85); }
.aiml-lesson-page .aiml-placement-check-grid span { color: #9a6800; font-size: 10px; font-weight: 950; letter-spacing: .09em; }
.aiml-lesson-page .aiml-placement-check-grid h3 { margin: 8px 0; color: var(--aiml-heading); font-size: 17px; }
.aiml-lesson-page .aiml-placement-check-grid p { margin: 0; font-size: 14px; }
.aiml-lesson-page .aiml-answer-framework { display: flex; align-items: center; gap: 15px; margin-top: 18px; padding: 16px; border-radius: 12px; background: #07182c; color: #d9e6f2; }
.aiml-lesson-page .aiml-answer-framework strong { color: var(--aiml-gold-light); }

.aiml-lesson-page .aiml-interview-list { display: grid; gap: 12px; }
.aiml-lesson-page .aiml-interview-item { overflow: hidden; border: 1px solid #cfddeb; border-radius: 15px; background: #fff; box-shadow: 0 6px 18px rgba(7,29,59,.04); }
.aiml-lesson-page .aiml-interview-question { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.aiml-lesson-page .aiml-interview-question > span { display: grid; flex: 0 0 38px; height: 38px; place-items: center; border-radius: 10px; background: #dceaff; color: var(--aiml-blue-700); font-size: 12px; font-weight: 950; }
.aiml-lesson-page .aiml-interview-question strong { flex: 1; color: var(--aiml-heading); }
.aiml-lesson-page .aiml-interview-question button { border-color: #acd0f7; background: #edf6ff; color: #0752bd; }
.aiml-lesson-page .aiml-interview-answer { padding: 18px 25px 21px 70px; border-top: 1px solid #d8e4ef; background: #f7fbff; color: #2f4b67; }

.aiml-lesson-page .aiml-takeaway-section { border-top: 5px solid var(--aiml-blue-600); background: linear-gradient(140deg, #fff, #f2f8ff); }
.aiml-lesson-page .aiml-takeaway-flow article { flex: 1 0 210px; padding: 19px; border: 1px solid #cbddef; border-radius: 14px; background: #fff; }
.aiml-lesson-page .aiml-takeaway-flow article > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--aiml-blue-600); color: #fff; font-weight: 900; }
.aiml-lesson-page .aiml-takeaway-flow strong { display: block; margin-top: 9px; color: var(--aiml-heading); font-size: 18px; }
.aiml-lesson-page .aiml-takeaway-flow p { margin: 5px 0 0; font-size: 14px; }
.aiml-lesson-page .aiml-takeaway-section blockquote { margin: 22px 0 0; padding: 22px; border: 0; border-radius: 14px; background: #07182c; color: #e5f0fb; font-size: 18px; font-weight: 700; text-align: center; }

.aiml-lesson-page .aiml-tips-grid,
.aiml-lesson-page .aiml-extra-practice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.aiml-lesson-page .aiml-tips-grid article,
.aiml-lesson-page .aiml-extra-practice-grid li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
    min-height: 92px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid #d4e1ed;
    border-radius: 14px;
    background: #fff;
}

.aiml-lesson-page .aiml-tips-grid span,
.aiml-lesson-page .aiml-extra-practice-grid span {
    display: grid;
    flex: 0 0 38px;
    height: 38px;
    place-items: center;
    border-radius: 10px;
    background: #dceaff;
    color: var(--aiml-blue-700);
    font-size: 11px;
    font-weight: 950;
}

.aiml-lesson-page .aiml-tips-grid p,
.aiml-lesson-page .aiml-extra-practice-grid p { min-width: 0; margin: 4px 0 0; overflow-wrap: anywhere; }
.aiml-lesson-page .aiml-extra-practice-grid { margin: 0; padding: 0; list-style: none; }

.aiml-lesson-page .aiml-lesson-navigation {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
    margin-top: 30px;
}

.aiml-lesson-page .aiml-lesson-navigation a {
    display: flex;
    flex: 0 1 340px;
    flex-direction: column;
    min-height: 66px;
    justify-content: center;
    padding: 11px 16px;
    border: 1px solid var(--aiml-border);
    border-radius: 12px;
    background: #fff;
    color: var(--aiml-heading);
    text-decoration: none;
    box-shadow: 0 7px 20px rgba(7, 24, 44, 0.06);
}

.aiml-lesson-page .aiml-lesson-navigation a:last-child { align-items: flex-end; text-align: right; }
.aiml-lesson-page .aiml-lesson-navigation span { color: var(--aiml-blue-700); font-size: 10px; font-weight: 950; letter-spacing: .09em; }
.aiml-lesson-page .aiml-lesson-navigation strong { margin-top: 2px; font-size: 15px; }

@media (max-width: 1280px) {
    .aiml-lesson-page .aiml-lesson-hero { grid-template-columns: 1.2fr .8fr; }
    .aiml-lesson-page .aiml-orbit-ai { width: 300px; height: 300px; }
    .aiml-lesson-page .aiml-orbit-ml { width: 215px; height: 215px; }
    .aiml-lesson-page .aiml-orbit-dl { width: 125px; height: 125px; }
    .aiml-lesson-page .aiml-revision-grid,
    .aiml-lesson-page .aiml-vocabulary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .aiml-lesson-page .aiml-definition-grid,
    .aiml-lesson-page .aiml-paradigm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
    .aiml-lesson-page .aiml-lesson-hero { grid-template-columns: 1fr; }
    .aiml-lesson-page .aiml-foundation-orbit { padding-top: 0; }
    .aiml-lesson-page .aiml-outcomes-card,
    .aiml-lesson-page .aiml-visual-stage,
    .aiml-lesson-page .aiml-tracer-grid,
    .aiml-lesson-page .aiml-code-explanation-grid { grid-template-columns: 1fr; }
    .aiml-lesson-page .aiml-code-panel { border-right: 0; border-bottom: 1px solid #29445e; }
    .aiml-lesson-page .aiml-tracer-grid { margin: 18px; }
    .aiml-lesson-page .aiml-visual-stepper { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .aiml-lesson-page .aiml-approach-comparison,
    .aiml-lesson-page .aiml-framing-flow,
    .aiml-lesson-page .aiml-split-rules,
    .aiml-lesson-page .aiml-fit-grid { grid-template-columns: 1fr; }
    .aiml-lesson-page .aiml-responsible-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .aiml-lesson-page .aiml-placement-check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .aiml-lesson-page .main-content { padding: 16px 13px 50px; }
    .aiml-lesson-page .aiml-breadcrumb { margin-bottom: 12px; }
    .aiml-lesson-page .aiml-lesson-hero { min-height: 0; border-radius: 18px; }
    .aiml-lesson-page .aiml-lesson-hero-copy { padding: 30px 21px; }
    .aiml-lesson-page .aiml-lesson-hero h1 { font-size: 38px; }
    .aiml-lesson-page .aiml-lesson-hero-copy > p { font-size: 16px; }
    .aiml-lesson-page .aiml-foundation-orbit { padding: 0 14px 28px; }
    .aiml-lesson-page .aiml-orbit-ai { width: 270px; height: 270px; }
    .aiml-lesson-page .aiml-orbit-ml { width: 192px; height: 192px; }
    .aiml-lesson-page .aiml-orbit-dl { width: 108px; height: 108px; font-size: 12px; }
    .aiml-lesson-page .content-card { padding: 22px 17px; border-radius: 17px; }
    .aiml-lesson-page .aiml-outcome-grid,
    .aiml-lesson-page .aiml-revision-grid,
    .aiml-lesson-page .aiml-definition-grid,
    .aiml-lesson-page .aiml-vocabulary-grid,
    .aiml-lesson-page .aiml-paradigm-grid,
    .aiml-lesson-page .aiml-responsible-grid,
    .aiml-lesson-page .aiml-placement-check-grid,
    .aiml-lesson-page .aiml-quiz-options,
    .aiml-lesson-page .aiml-tips-grid,
    .aiml-lesson-page .aiml-extra-practice-grid,
    .aiml-lesson-page .aiml-lesson-navigation {
        align-items: stretch;
        flex-direction: column;
    }
    .aiml-lesson-page .aiml-lesson-navigation a {
        flex-basis: auto;
        width: 100%;
    }
    .aiml-lesson-page .aiml-visual-stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 18px 16px 0; }
    .aiml-lesson-page .aiml-visual-stage { padding: 16px; }
    .aiml-lesson-page .aiml-stage-illustration,
    .aiml-lesson-page .aiml-stage-copy { min-height: 280px; }
    .aiml-lesson-page .aiml-stage-art { gap: 9px; transform: scale(.88); }
    .aiml-lesson-page .aiml-art-card { min-width: 88px; }
    .aiml-lesson-page .aiml-interactive-header { flex-direction: column; padding: 22px 17px; }
    .aiml-lesson-page .aiml-panel-toggle { width: 100%; }
    .aiml-lesson-page .aiml-interactive-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 16px 20px; }
    .aiml-lesson-page .aiml-interactive-controls > span { grid-column: 1 / -1; margin-left: 0; text-align: center; }
    .aiml-lesson-page .aiml-tracer-grid { margin: 14px; }
    .aiml-lesson-page .aiml-variable-grid { grid-template-columns: 1fr; }
    .aiml-lesson-page .aiml-problems-section { padding: 22px 13px; }
    .aiml-lesson-page .aiml-problems-section .section-heading { align-items: stretch; flex-direction: column; }
    .aiml-lesson-page .aiml-problem-summary { width: 100%; }
    .aiml-lesson-page .aiml-problem-head { padding: 17px 14px 8px; }
    .aiml-lesson-page .aiml-problem-data,
    .aiml-lesson-page .aiml-problem-actions { padding-right: 14px; padding-left: 14px; }
    .aiml-lesson-page .aiml-problem-reveal,
    .aiml-lesson-page .aiml-workspace { margin-right: 14px; margin-left: 14px; }
    .aiml-lesson-page .aiml-split-bar { flex-direction: column; }
    .aiml-lesson-page .aiml-split-bar .validation,
    .aiml-lesson-page .aiml-split-bar .test { min-width: 0; }
    .aiml-lesson-page .aiml-answer-framework { align-items: flex-start; flex-direction: column; }
    .aiml-lesson-page .aiml-interview-question { align-items: flex-start; flex-wrap: wrap; }
    .aiml-lesson-page .aiml-interview-question strong { min-width: calc(100% - 55px); }
    .aiml-lesson-page .aiml-interview-question button { width: 100%; }
    .aiml-lesson-page .aiml-interview-answer { padding: 17px; }
    .aiml-lesson-page .aiml-quiz-actions strong { width: 100%; margin-left: 0; }
}

/* =========================================================
   LEVEL 06 — REGRESSION & GRADIENT DESCENT
   ========================================================= */
.aiml-level-six-page .aiml-regression-hero {
    grid-template-columns: minmax(0, 1.13fr) minmax(410px, .87fr);
    background:
        radial-gradient(circle at 83% 18%, rgba(48, 172, 255, .19), transparent 28%),
        linear-gradient(125deg, #06182d 0%, #0b2b50 58%, #26356e 100%);
}

.aiml-level-six-page .aiml-regression-hero-visual {
    position: relative;
    align-self: center;
    min-width: 0;
    min-height: 390px;
    margin: 0 38px 0 0;
    overflow: hidden;
    border: 1px solid #315b80;
    border-radius: 28px;
    background:
        linear-gradient(rgba(61, 122, 170, .16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(61, 122, 170, .16) 1px, transparent 1px),
        #061a2d;
    background-size: 46px 46px;
    box-shadow: inset 0 0 70px rgba(26, 110, 177, .12), 0 24px 60px rgba(0, 0, 0, .22);
}

.aiml-level-six-page .aiml-hero-chart { position: absolute; inset: 42px 34px 46px 48px; border-bottom: 3px solid #7f9bb2; border-left: 3px solid #7f9bb2; }
.aiml-level-six-page .aiml-hero-chart i { position: absolute; left: var(--x); bottom: var(--y); width: 14px; height: 14px; border: 3px solid #dff4ff; border-radius: 50%; background: #20aff1; box-shadow: 0 0 16px rgba(32, 175, 241, .8); transform: translate(-50%, 50%); }
.aiml-level-six-page .aiml-hero-chart b { position: absolute; right: 7%; bottom: 10%; left: 7%; height: 6px; border-radius: 99px; background: #f7ca29; box-shadow: 0 0 18px rgba(247, 202, 41, .55); transform: rotate(-36deg); transform-origin: center; }
.aiml-level-six-page .aiml-hero-chart span { position: absolute; color: #9fc5df; font-size: 9px; font-weight: 950; letter-spacing: .1em; }
.aiml-level-six-page .aiml-hero-chart .x-axis { right: 0; bottom: -28px; }
.aiml-level-six-page .aiml-hero-chart .y-axis { top: 0; left: -34px; writing-mode: vertical-rl; transform: rotate(180deg); }
.aiml-level-six-page .aiml-hero-equation { position: absolute; right: 18px; bottom: 18px; z-index: 4; min-width: 205px; padding: 15px 18px; border: 1px solid #315b80; border-radius: 15px; background: rgba(4, 18, 34, .94); }
.aiml-level-six-page .aiml-hero-equation span { display: block; color: #55cffc; font-size: 9px; font-weight: 950; letter-spacing: .12em; }
.aiml-level-six-page .aiml-hero-equation strong { display: block; margin: 6px 0; color: #fff; font: 800 21px/1.25 "SFMono-Regular", Consolas, monospace; }
.aiml-level-six-page .aiml-hero-equation em { color: #facc15; font-size: 10px; font-style: normal; font-weight: 900; text-transform: uppercase; }

.aiml-level-six-page .aiml-regression-revision,
.aiml-level-six-page .aiml-usecase-grid,
.aiml-level-six-page .aiml-metric-grid,
.aiml-level-six-page .aiml-gradient-grid,
.aiml-level-six-page .aiml-convergence-grid,
.aiml-level-six-page .aiml-assumption-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }

.aiml-level-six-page .aiml-usecase-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.aiml-level-six-page .aiml-usecase-grid article,
.aiml-level-six-page .aiml-metric-grid article,
.aiml-level-six-page .aiml-gradient-grid article,
.aiml-level-six-page .aiml-convergence-grid article,
.aiml-level-six-page .aiml-assumption-grid article,
.aiml-level-six-page .aiml-update-grid article,
.aiml-level-six-page .aiml-regularization-grid article,
.aiml-level-six-page .aiml-bias-variance article,
.aiml-level-six-page .aiml-note-grid article {
    min-width: 0;
    padding: 20px;
    border: 1px solid #d4e2ee;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(26, 62, 96, .07);
}
.aiml-level-six-page .aiml-usecase-grid article { text-align: center; }
.aiml-level-six-page .aiml-usecase-grid article > span { display: block; margin-bottom: 9px; font-size: 30px; }
.aiml-level-six-page .aiml-usecase-grid strong,
.aiml-level-six-page .aiml-metric-grid strong,
.aiml-level-six-page .aiml-convergence-grid strong,
.aiml-level-six-page .aiml-assumption-grid strong,
.aiml-level-six-page .aiml-update-grid strong,
.aiml-level-six-page .aiml-regularization-grid strong,
.aiml-level-six-page .aiml-note-grid strong { color: var(--aiml-heading); }
.aiml-level-six-page .aiml-usecase-grid p,
.aiml-level-six-page .aiml-metric-grid p,
.aiml-level-six-page .aiml-convergence-grid p,
.aiml-level-six-page .aiml-assumption-grid p,
.aiml-level-six-page .aiml-update-grid p,
.aiml-level-six-page .aiml-regularization-grid p,
.aiml-level-six-page .aiml-bias-variance p,
.aiml-level-six-page .aiml-note-grid p { margin: 7px 0 0; color: var(--aiml-slate-600); font-size: 13px; }

.aiml-level-six-page .aiml-equation-banner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 17px; margin-top: 17px; padding: 17px 20px; border-radius: 14px; background: #07182c; }
.aiml-level-six-page .aiml-equation-banner strong { color: #7dd3fc; }
.aiml-level-six-page .aiml-equation-banner code { justify-self: center; background: #12304d; color: #ffe274; text-align: center; }
.aiml-level-six-page .aiml-equation-banner span { color: #b9ccdd; font-size: 12px; font-weight: 750; text-align: right; }

.aiml-level-six-page .aiml-two-column,
.aiml-level-six-page .aiml-ols-layout,
.aiml-level-six-page .aiml-polynomial-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.aiml-level-six-page .aiml-interpretation-card { padding: 24px; border: 1px solid #d5e2ee; border-radius: 16px; background: linear-gradient(135deg, #f7fbff, #eef6ff); }
.aiml-level-six-page .aiml-interpretation-card > span { color: var(--aiml-blue-700); font-size: 10px; font-weight: 950; letter-spacing: .09em; }
.aiml-level-six-page .aiml-interpretation-card h3 { margin: 12px 0 6px; color: var(--aiml-heading); font-size: 24px; }
.aiml-level-six-page .aiml-interpretation-card p { color: var(--aiml-slate-600); }
.aiml-level-six-page .aiml-interpretation-card > strong { display: block; margin-top: 15px; padding: 11px; border-left: 4px solid #d4af37; background: #fff8df; color: #755600; }

.aiml-level-six-page .aiml-multiple-grid,
.aiml-level-six-page .aiml-normal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.aiml-level-six-page .aiml-multiple-grid > div,
.aiml-level-six-page .aiml-normal-grid > div { padding: 20px; border-radius: 14px; background: #07182c; }
.aiml-level-six-page .aiml-multiple-grid > div span,
.aiml-level-six-page .aiml-normal-grid > div span { display: block; margin-bottom: 10px; color: #7dd3fc; font-size: 9px; font-weight: 950; letter-spacing: .1em; }
.aiml-level-six-page .aiml-multiple-grid > div code,
.aiml-level-six-page .aiml-normal-grid > div code { color: #ffe274; font-size: clamp(13px, 1.3vw, 18px); overflow-wrap: anywhere; white-space: normal; }
.aiml-level-six-page .aiml-multiple-grid article,
.aiml-level-six-page .aiml-normal-grid article { padding: 18px; border: 1px solid #d5e2ee; border-radius: 14px; background: #f8fbff; }
.aiml-level-six-page .aiml-multiple-grid article p,
.aiml-level-six-page .aiml-normal-grid article p { margin: 7px 0 0; color: var(--aiml-slate-600); font-size: 13px; }

.aiml-level-six-page .aiml-residual-flow { display: flex; align-items: stretch; justify-content: center; gap: 12px; }
.aiml-level-six-page .aiml-residual-flow article { display: grid; flex: 1 1 0; min-height: 110px; padding: 20px; place-content: center; border: 1px solid #d5e2ee; border-radius: 15px; background: #fff; text-align: center; }
.aiml-level-six-page .aiml-residual-flow article.accent { border-color: #7ac6f0; background: #eef8ff; }
.aiml-level-six-page .aiml-residual-flow span { color: var(--aiml-blue-700); font-size: 9px; font-weight: 950; letter-spacing: .09em; }
.aiml-level-six-page .aiml-residual-flow strong { margin-top: 7px; color: var(--aiml-heading); font-size: 20px; }
.aiml-level-six-page .aiml-residual-flow > b { align-self: center; color: #d4af37; font-size: 25px; }
.aiml-level-six-page .aiml-note-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }

.aiml-level-six-page .aiml-metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.aiml-level-six-page .aiml-metric-grid span,
.aiml-level-six-page .aiml-update-grid span,
.aiml-level-six-page .aiml-convergence-grid span,
.aiml-level-six-page .aiml-assumption-grid span,
.aiml-level-six-page .aiml-regularization-grid span,
.aiml-level-six-page .aiml-bias-variance span { color: var(--aiml-blue-700); font-size: 10px; font-weight: 950; letter-spacing: .08em; }
.aiml-level-six-page .aiml-metric-grid code,
.aiml-level-six-page .aiml-regularization-grid code { display: block; margin: 12px 0 5px; padding: 9px; overflow-wrap: anywhere; background: #eef5fb; color: #035bb3; white-space: normal; }
.aiml-level-six-page .aiml-ols-formulas { display: grid; gap: 12px; }
.aiml-level-six-page .aiml-ols-formulas article { padding: 20px; border: 1px solid #d4e2ee; border-radius: 14px; background: #f8fbff; }
.aiml-level-six-page .aiml-ols-formulas span { display: block; margin-bottom: 9px; color: var(--aiml-blue-700); font-size: 9px; font-weight: 950; }
.aiml-level-six-page .aiml-ols-formulas code { overflow-wrap: anywhere; color: #075dad; white-space: normal; }

.aiml-level-six-page .aiml-gradient-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.aiml-level-six-page .aiml-gradient-grid article > span { display: grid; width: 36px; height: 36px; margin-bottom: 11px; place-items: center; border-radius: 10px; background: #dceaff; color: var(--aiml-blue-700); font-weight: 950; }
.aiml-level-six-page .aiml-gradient-grid code { display: block; margin-top: 10px; overflow-wrap: anywhere; color: #075dad; white-space: normal; }
.aiml-level-six-page .aiml-update-grid,
.aiml-level-six-page .aiml-regularization-grid,
.aiml-level-six-page .aiml-bias-variance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.aiml-level-six-page .aiml-convergence-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.aiml-level-six-page .aiml-assumption-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aiml-level-six-page .aiml-polynomial-layout .aiml-bias-variance { grid-template-columns: minmax(0, 1fr); }
.aiml-level-six-page .aiml-feature-checklist { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 16px; padding: 15px; border-radius: 13px; background: #07182c; }
.aiml-level-six-page .aiml-feature-checklist strong { margin-right: auto; color: #ffe274; }
.aiml-level-six-page .aiml-feature-checklist span { padding: 7px 10px; border: 1px solid #315471; border-radius: 999px; color: #cce0f0; font-size: 11px; font-weight: 800; }

.aiml-level-six-page .aiml-model-ready-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 17px; padding: 0; list-style: none; }
.aiml-level-six-page .aiml-model-ready-flow li { display: flex; gap: 12px; min-width: 0; min-height: 118px; padding: 17px; border: 1px solid #d4e2ee; border-radius: 15px; background: #fff; box-shadow: 0 12px 26px rgba(26, 62, 96, .07); }
.aiml-level-six-page .aiml-model-ready-flow li > span { display: grid; flex: 0 0 36px; height: 36px; place-items: center; border-radius: 10px; background: #dceaff; color: var(--aiml-blue-700); font-size: 10px; font-weight: 950; }
.aiml-level-six-page .aiml-model-ready-flow strong { color: var(--aiml-heading); }
.aiml-level-six-page .aiml-model-ready-flow p { margin: 5px 0 0; color: var(--aiml-slate-600); font-size: 13px; }

/* Level 06 fit-line visualizer */
.aiml-level-six-page .aiml-fit-stage { position: relative; align-content: center; min-height: 350px; padding: 20px; }
.aiml-level-six-page .aiml-fit-chart { position: relative; width: min(100%, 560px); height: 285px; overflow: hidden; border: 1px solid #315471; border-radius: 18px; background: linear-gradient(rgba(78, 129, 166, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(78, 129, 166, .16) 1px, transparent 1px), #071a2d; background-size: 40px 40px; }
.aiml-level-six-page .aiml-fit-chart .axis { position: absolute; z-index: 1; background: #7790a5; }
.aiml-level-six-page .aiml-fit-chart .axis.x { right: 20px; bottom: 25px; left: 32px; height: 2px; }
.aiml-level-six-page .aiml-fit-chart .axis.y { top: 20px; bottom: 25px; left: 32px; width: 2px; }
.aiml-level-six-page .aiml-fit-chart label { position: absolute; z-index: 2; color: #9bc1db; font: 900 11px/1 monospace; }
.aiml-level-six-page .aiml-fit-chart label:first-of-type { right: 16px; bottom: 9px; }
.aiml-level-six-page .aiml-fit-chart label:last-of-type { top: 10px; left: 14px; }
.aiml-level-six-page .aiml-fit-point { position: absolute; z-index: 4; left: var(--x); bottom: var(--y); width: 12px; height: 12px; border: 2px solid #dff5ff; border-radius: 50%; background: #28b7f5; box-shadow: 0 0 11px rgba(40, 183, 245, .78); transform: translate(-50%, 50%); }
.aiml-level-six-page .aiml-fit-line { position: absolute; z-index: 2; right: 8%; bottom: 16%; left: 8%; height: 5px; border-radius: 99px; background: #facc15; box-shadow: 0 0 14px rgba(250, 204, 21, .45); transform-origin: center; transition: transform .35s ease; }
.aiml-level-six-page .points-only .aiml-fit-line { display: none; }
.aiml-level-six-page .line-initial .aiml-fit-line { transform: rotate(-17deg); }
.aiml-level-six-page .line-improved .aiml-fit-line { bottom: 11%; transform: rotate(-30deg); }
.aiml-level-six-page .line-final .aiml-fit-line { bottom: 8%; transform: rotate(-36deg); }
.aiml-level-six-page .aiml-fit-residual { display: none; position: absolute; z-index: 3; width: 2px; border-left: 2px dashed #fb7185; }
.aiml-level-six-page .show-residuals .aiml-fit-residual { display: block; }
.aiml-level-six-page .line-initial .r1 { left: 12%; bottom: 18%; height: 28px; }
.aiml-level-six-page .line-initial .r2 { left: 25%; bottom: 31%; height: 23px; }
.aiml-level-six-page .line-initial .r3 { left: 39%; bottom: 35%; height: 12px; }
.aiml-level-six-page .line-initial .r4 { left: 53%; bottom: 39%; height: 43px; }
.aiml-level-six-page .line-initial .r5 { left: 67%; bottom: 48%; height: 48px; }
.aiml-level-six-page .line-initial .r6 { left: 82%; bottom: 56%; height: 61px; }
.aiml-level-six-page .line-improved .aiml-fit-residual { height: 13px; }
.aiml-level-six-page .line-improved .r1 { left: 12%; bottom: 17%; }
.aiml-level-six-page .line-improved .r2 { left: 25%; bottom: 28%; }
.aiml-level-six-page .line-improved .r3 { left: 39%; bottom: 39%; }
.aiml-level-six-page .line-improved .r4 { left: 53%; bottom: 52%; }
.aiml-level-six-page .line-improved .r5 { left: 67%; bottom: 62%; }
.aiml-level-six-page .line-improved .r6 { left: 82%; bottom: 73%; }
.aiml-level-six-page .aiml-fit-stats { position: absolute; right: 28px; bottom: 28px; z-index: 6; display: flex; flex-wrap: wrap; gap: 6px; max-width: 250px; padding: 10px; border: 1px solid #315471; border-radius: 11px; background: rgba(5, 20, 36, .94); }
.aiml-level-six-page .aiml-fit-stats span { padding: 5px 8px; border-radius: 6px; background: #12304d; color: #d8eaff; font: 800 9px/1.2 monospace; }
.aiml-level-six-page .aiml-fit-stats.success { border-color: #258366; }
.aiml-level-six-page .aiml-fit-stats.success span:last-child { background: #0d4437; color: #86efac; }
.aiml-level-six-page .aiml-loss-stage,
.aiml-level-six-page .aiml-gradient-stage { display: grid; gap: 14px; width: min(100%, 540px); padding: 28px; border: 1px solid #315471; border-radius: 18px; background: #071a2d; text-align: center; }
.aiml-level-six-page .aiml-loss-stage span { color: #7dd3fc; font-size: 10px; font-weight: 950; letter-spacing: .1em; }
.aiml-level-six-page .aiml-loss-stage strong { color: #fff; font: 800 18px/1.4 monospace; }
.aiml-level-six-page .aiml-loss-stage b { color: #9fb6c9; font-size: 11px; }
.aiml-level-six-page .aiml-loss-stage code { padding: 13px; border-radius: 10px; background: #503b09; color: #fde68a; font-size: 24px; }
.aiml-level-six-page .aiml-gradient-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aiml-level-six-page .aiml-gradient-stage div { padding: 16px; border: 1px solid #315471; border-radius: 12px; background: #0c2843; }
.aiml-level-six-page .aiml-gradient-stage span { display: block; color: #7dd3fc; font-size: 11px; font-weight: 900; }
.aiml-level-six-page .aiml-gradient-stage strong { display: block; margin-top: 7px; color: #fda4af; font: 900 23px/1.2 monospace; }
.aiml-level-six-page .aiml-gradient-stage > b,
.aiml-level-six-page .aiml-gradient-stage > code { grid-column: 1 / -1; }
.aiml-level-six-page .aiml-gradient-stage > b { color: #facc15; font-size: 10px; letter-spacing: .08em; }
.aiml-level-six-page .aiml-gradient-stage > code { padding: 12px; border-radius: 9px; background: #0d4437; color: #86efac; font-size: 18px; }

@media (max-width: 1250px) {
    .aiml-level-six-page .aiml-regression-hero { grid-template-columns: minmax(0, 1fr) minmax(360px, .72fr); }
    .aiml-level-six-page .aiml-usecase-grid,
    .aiml-level-six-page .aiml-metric-grid,
    .aiml-level-six-page .aiml-gradient-grid,
    .aiml-level-six-page .aiml-convergence-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1050px) {
    .aiml-level-six-page .aiml-regression-hero { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-six-page .aiml-regression-hero-visual { width: calc(100% - 70px); max-width: 760px; margin: 0 auto 34px; }
    .aiml-level-six-page .aiml-model-ready-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .aiml-level-six-page .aiml-regression-hero { display: block; }
    .aiml-level-six-page .aiml-regression-hero-visual { width: calc(100% - 28px); min-height: 290px; margin: 0 14px 22px; border-radius: 18px; }
    .aiml-level-six-page .aiml-hero-chart { inset: 28px 20px 52px 32px; }
    .aiml-level-six-page .aiml-hero-chart i { width: 11px; height: 11px; }
    .aiml-level-six-page .aiml-hero-equation { right: 12px; bottom: 12px; min-width: 168px; padding: 10px 13px; }
    .aiml-level-six-page .aiml-hero-equation strong { font-size: 16px; }
    .aiml-level-six-page .aiml-regression-revision,
    .aiml-level-six-page .aiml-usecase-grid,
    .aiml-level-six-page .aiml-metric-grid,
    .aiml-level-six-page .aiml-gradient-grid,
    .aiml-level-six-page .aiml-convergence-grid,
    .aiml-level-six-page .aiml-assumption-grid,
    .aiml-level-six-page .aiml-two-column,
    .aiml-level-six-page .aiml-ols-layout,
    .aiml-level-six-page .aiml-polynomial-layout,
    .aiml-level-six-page .aiml-multiple-grid,
    .aiml-level-six-page .aiml-normal-grid,
    .aiml-level-six-page .aiml-update-grid,
    .aiml-level-six-page .aiml-regularization-grid,
    .aiml-level-six-page .aiml-bias-variance,
    .aiml-level-six-page .aiml-note-grid,
    .aiml-level-six-page .aiml-model-ready-flow { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-six-page .aiml-usecase-grid article,
    .aiml-level-six-page .aiml-metric-grid article,
    .aiml-level-six-page .aiml-gradient-grid article,
    .aiml-level-six-page .aiml-convergence-grid article,
    .aiml-level-six-page .aiml-assumption-grid article,
    .aiml-level-six-page .aiml-update-grid article,
    .aiml-level-six-page .aiml-regularization-grid article,
    .aiml-level-six-page .aiml-bias-variance article { width: 100%; min-width: 0; padding: 17px; }
    .aiml-level-six-page .aiml-equation-banner { grid-template-columns: minmax(0, 1fr); gap: 10px; text-align: center; }
    .aiml-level-six-page .aiml-equation-banner code { justify-self: stretch; overflow-wrap: anywhere; white-space: normal; }
    .aiml-level-six-page .aiml-equation-banner span { text-align: center; }
    .aiml-level-six-page .aiml-residual-flow { display: grid; grid-template-columns: minmax(0, 1fr); }
    .aiml-level-six-page .aiml-residual-flow > b { transform: rotate(90deg); text-align: center; }
    .aiml-level-six-page .aiml-feature-checklist { align-items: stretch; flex-direction: column; }
    .aiml-level-six-page .aiml-feature-checklist strong { margin-right: 0; }
    .aiml-level-six-page .aiml-fit-stage { min-height: 300px; padding: 12px 7px; }
    .aiml-level-six-page .aiml-fit-chart { height: 255px; }
    .aiml-level-six-page .aiml-fit-stats { right: 13px; bottom: 13px; max-width: 190px; }
    .aiml-level-six-page .aiml-loss-stage,
    .aiml-level-six-page .aiml-gradient-stage { padding: 18px 12px; }
    .aiml-level-six-page .aiml-gradient-stage { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-six-page .aiml-gradient-stage > b,
    .aiml-level-six-page .aiml-gradient-stage > code { grid-column: auto; }
}

@media (max-width: 390px) {
    .aiml-lesson-page .aiml-orbit-ai { width: 240px; height: 240px; }
    .aiml-lesson-page .aiml-orbit-ml { width: 170px; height: 170px; }
    .aiml-lesson-page .aiml-orbit-dl { width: 95px; height: 95px; }
}

/* ================================================================
   Level 02 — Python, NumPy & Data Tools
   ================================================================ */

.aiml-level-two-page .aiml-data-hero {
    background:
        radial-gradient(circle at 82% 20%, rgba(20, 184, 166, 0.22), transparent 30%),
        radial-gradient(circle at 66% 100%, rgba(37, 99, 235, 0.22), transparent 31%),
        linear-gradient(135deg, #04111e, #082942 65%, #07483f);
}

.aiml-level-two-page .aiml-numpy-console {
    position: relative;
    z-index: 1;
    align-self: center;
    min-width: 0;
    margin: 42px 42px 42px 0;
    overflow: hidden;
    border: 1px solid rgba(110, 231, 183, 0.38);
    border-radius: 20px;
    background: rgba(3, 18, 30, 0.9);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.28), inset 0 0 35px rgba(20,184,166,.05);
}

.aiml-level-two-page .aiml-console-top {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 14px 17px;
    border-bottom: 1px solid #24485a;
    background: #0b2437;
}

.aiml-level-two-page .aiml-console-top span {
    margin-right: auto;
    color: #7ce4cb;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .11em;
}

.aiml-level-two-page .aiml-console-top i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ff6b6b;
}

.aiml-level-two-page .aiml-console-top i:nth-of-type(2) { background: #ffd166; }
.aiml-level-two-page .aiml-console-top i:nth-of-type(3) { background: #4ade80; }

.aiml-level-two-page .aiml-numpy-console > code {
    display: block;
    min-height: 270px;
    padding: 25px;
    overflow-x: auto;
    background: transparent;
    color: #dcecf7;
    font: 14px/2 "SFMono-Regular", Consolas, monospace;
    white-space: nowrap;
}

.aiml-level-two-page .aiml-numpy-console > code b { color: #65e6c2; }
.aiml-level-two-page .aiml-numpy-console > code em { color: #f8d96b; font-style: normal; }

.aiml-level-two-page .aiml-console-pipeline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px;
    border-top: 1px solid #24485a;
    background: #071c2c;
}

.aiml-level-two-page .aiml-console-pipeline span,
.aiml-level-two-page .aiml-console-pipeline strong {
    padding: 5px 8px;
    border-radius: 6px;
    background: #123149;
    color: #b8d3e5;
    font-size: 9px;
}

.aiml-level-two-page .aiml-console-pipeline strong { color: #ffe47b; }
.aiml-level-two-page .aiml-console-pipeline b { color: var(--aiml-gold); }

.aiml-level-two-page .aiml-list-array-comparison {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr);
    align-items: stretch;
    gap: 14px;
}

.aiml-level-two-page .aiml-list-array-comparison article {
    padding: 22px;
    border: 1px solid #d5e2ee;
    border-radius: 16px;
    background: #f8fbfe;
}

.aiml-level-two-page .aiml-list-array-comparison article > span,
.aiml-level-two-page .aiml-vectorization-grid article > span {
    color: var(--aiml-blue-700);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .1em;
}

.aiml-level-two-page .aiml-list-array-comparison pre,
.aiml-level-two-page .aiml-vectorization-grid pre {
    margin: 14px 0;
    padding: 17px;
    overflow: auto;
    border-radius: 11px;
    background: #07182c;
    color: #e6f1fb;
    font: 13px/1.7 "SFMono-Regular", Consolas, monospace;
}

.aiml-level-two-page .aiml-list-array-comparison ul { margin: 0; padding-left: 20px; }
.aiml-level-two-page .aiml-list-array-comparison li { margin: 7px 0; }

.aiml-level-two-page .aiml-vs-badge {
    display: grid;
    align-self: center;
    height: 54px;
    place-items: center;
    border-radius: 50%;
    background: var(--aiml-blue-600);
    color: #fff;
    font-size: 11px;
    font-weight: 950;
    box-shadow: 0 9px 22px rgba(37,99,235,.25);
}

.aiml-level-two-page .aiml-array-anatomy {
    display: grid;
    grid-template-columns: minmax(360px, 1.2fr) minmax(310px, .8fr);
    gap: 22px;
}

.aiml-level-two-page .aiml-array-board {
    position: relative;
    min-height: 340px;
    padding: 62px 50px 42px 75px;
    border: 1px solid #cbddea;
    border-radius: 18px;
    background: linear-gradient(145deg, #061729, #0b2944);
    box-shadow: var(--aiml-shadow);
}

.aiml-level-two-page .aiml-matrix-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(55px, 1fr));
    gap: 9px;
}

.aiml-level-two-page .aiml-matrix-grid span,
.aiml-level-two-page .aiml-mini-matrix span {
    display: grid;
    min-height: 59px;
    place-items: center;
    border: 1px solid #40749c;
    border-radius: 10px;
    background: #123754;
    color: #e8f6ff;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-weight: 850;
}

.aiml-level-two-page .aiml-axis-label-row,
.aiml-level-two-page .aiml-axis-label-column {
    position: absolute;
    color: #72d8c2;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
}

.aiml-level-two-page .aiml-axis-label-row { top: 25px; left: 50%; transform: translateX(-50%); }
.aiml-level-two-page .aiml-axis-label-column { top: 50%; left: 13px; transform: translateY(-50%) rotate(-90deg); }

.aiml-level-two-page .aiml-array-metadata {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.aiml-level-two-page .aiml-array-metadata article {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 155px;
    padding: 20px;
    border: 1px solid #d5e2ee;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--aiml-shadow);
}

.aiml-level-two-page .aiml-array-metadata span { color: var(--aiml-blue-700); font: 800 12px "SFMono-Regular", Consolas, monospace; }
.aiml-level-two-page .aiml-array-metadata strong { margin-top: 7px; color: var(--aiml-heading); font-size: 25px; }
.aiml-level-two-page .aiml-array-metadata p { margin: 4px 0 0; font-size: 13px; }

.aiml-level-two-page .aiml-dtype-grid,
.aiml-level-two-page .aiml-broadcast-rule-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
}

.aiml-level-two-page .aiml-dtype-grid article,
.aiml-level-two-page .aiml-broadcast-rule-grid article {
    min-height: 190px;
    padding: 21px;
    border: 1px solid #d7e3ef;
    border-radius: 15px;
    background: #f8fbfe;
}

.aiml-level-two-page .aiml-dtype-grid code { display: inline-block; margin-bottom: 14px; }
.aiml-level-two-page .aiml-dtype-grid strong,
.aiml-level-two-page .aiml-broadcast-rule-grid strong { display: block; color: var(--aiml-heading); }
.aiml-level-two-page .aiml-dtype-grid p,
.aiml-level-two-page .aiml-broadcast-rule-grid p { margin: 7px 0 0; font-size: 14px; }

.aiml-level-two-page .aiml-code-callout {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 17px;
    padding: 15px;
    border-left: 4px solid var(--aiml-teal-500);
    border-radius: 0 11px 11px 0;
    background: #eafaf6;
}

.aiml-level-two-page .aiml-api-grid,
.aiml-level-two-page .aiml-indexing-grid,
.aiml-level-two-page .aiml-transform-grid,
.aiml-level-two-page .aiml-repro-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
}

.aiml-level-two-page .aiml-api-grid article,
.aiml-level-two-page .aiml-indexing-grid article,
.aiml-level-two-page .aiml-transform-grid article,
.aiml-level-two-page .aiml-repro-grid article {
    min-height: 130px;
    padding: 20px;
    border: 1px solid #d5e2ee;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(7,29,59,.05);
}

.aiml-level-two-page .aiml-api-grid p,
.aiml-level-two-page .aiml-indexing-grid p,
.aiml-level-two-page .aiml-transform-grid p { margin: 13px 0 0; font-size: 14px; }
.aiml-level-two-page .aiml-indexing-grid span { display: block; margin-bottom: 9px; color: var(--aiml-blue-700); font-size: 9px; font-weight: 950; letter-spacing: .1em; }

.aiml-level-two-page .aiml-vectorization-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.aiml-level-two-page .aiml-vectorization-grid article {
    padding: 24px;
    border: 1px solid #d4e1ed;
    border-radius: 17px;
    background: #fff;
    box-shadow: var(--aiml-shadow);
}

.aiml-level-two-page .aiml-vectorization-grid article.preferred { border-top: 4px solid var(--aiml-teal-500); }
.aiml-level-two-page .aiml-complexity-strip { display: flex; justify-content: space-between; gap: 20px; margin-top: 15px; padding: 16px 19px; border-radius: 12px; background: #07182c; color: #c8dae9; }
.aiml-level-two-page .aiml-complexity-strip strong { color: #ffe374; }

.aiml-level-two-page .aiml-broadcast-rule-grid article b {
    display: grid;
    width: 39px;
    height: 39px;
    margin-bottom: 15px;
    place-items: center;
    border-radius: 11px;
    background: #dceaff;
    color: var(--aiml-blue-700);
}

.aiml-level-two-page .aiml-shape-examples {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
    margin-top: 16px;
}

.aiml-level-two-page .aiml-shape-examples span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    padding: 14px;
    border: 1px solid #bfe1d2;
    border-radius: 11px;
    background: #effcf6;
    color: #176142;
}

.aiml-level-two-page .aiml-shape-examples .invalid { border-color: #f1caca; background: #fff4f4; color: #992d2d; }

.aiml-level-two-page .aiml-axis-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.aiml-level-two-page .aiml-axis-grid article {
    padding: 22px;
    border: 1px solid #d4e1ed;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--aiml-shadow);
}

.aiml-level-two-page .aiml-mini-matrix {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 16px;
}

.aiml-level-two-page .aiml-mini-matrix span { min-height: 38px; }
.aiml-level-two-page .aiml-axis-grid strong { display: block; margin-top: 13px; color: var(--aiml-heading); font-size: 20px; }
.aiml-level-two-page .aiml-axis-grid p { margin: 6px 0 0; font-size: 14px; }

.aiml-level-two-page .aiml-pandas-flow {
    display: flex;
    align-items: stretch;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 12px;
}

.aiml-level-two-page .aiml-pandas-flow article {
    flex: 1 0 185px;
    padding: 18px;
    border: 1px solid #d5e2ee;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(7,29,59,.05);
}

.aiml-level-two-page .aiml-pandas-flow > b { align-self: center; color: var(--aiml-gold); font-size: 21px; }
.aiml-level-two-page .aiml-pandas-flow article > span { color: var(--aiml-blue-700); font-size: 10px; font-weight: 950; }
.aiml-level-two-page .aiml-pandas-flow strong { display: block; margin: 7px 0; color: var(--aiml-heading); font-size: 17px; }
.aiml-level-two-page .aiml-pandas-flow p { margin: 9px 0 0; font-size: 13px; }

.aiml-level-two-page .aiml-table-demo {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr);
    gap: 15px;
    margin-top: 18px;
    padding: 18px;
    border: 1px solid #d2dfeb;
    border-radius: 15px;
    background: #f7fafc;
}

.aiml-level-two-page .aiml-table-demo table { width: 100%; border-collapse: collapse; background: #fff; }
.aiml-level-two-page .aiml-table-demo th,
.aiml-level-two-page .aiml-table-demo td { padding: 10px; border: 1px solid #d8e4ef; text-align: left; }
.aiml-level-two-page .aiml-table-demo th { background: #eaf3ff; color: #164b83; font-size: 12px; }
.aiml-level-two-page .aiml-table-demo > div { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 17px; border-radius: 11px; background: #07182c; color: #c9daea; }

.aiml-level-two-page .aiml-eda-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 11px;
}

.aiml-level-two-page .aiml-eda-grid article {
    min-height: 155px;
    padding: 17px;
    border: 1px solid #d6e2ee;
    border-radius: 14px;
    background: #f9fbfe;
}

.aiml-level-two-page .aiml-eda-grid i { display: block; font-size: 24px; font-style: normal; }
.aiml-level-two-page .aiml-eda-grid strong { display: block; margin-top: 8px; color: var(--aiml-heading); }
.aiml-level-two-page .aiml-eda-grid p { margin: 5px 0 0; font-size: 13px; }
.aiml-level-two-page .aiml-chart-choice { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 15px; }
.aiml-level-two-page .aiml-chart-choice span { padding: 8px 11px; border-radius: 999px; background: #eaf3ff; color: #315578; font-size: 12px; }

.aiml-level-two-page .aiml-repro-grid article > span { color: var(--aiml-blue-700); font-size: 10px; font-weight: 950; }
.aiml-level-two-page .aiml-repro-grid strong { display: block; margin: 7px 0 10px; color: var(--aiml-heading); }
.aiml-level-two-page .aiml-repro-grid p { margin: 0; font-size: 14px; }

/* Broadcasting visualizer graphics */
.aiml-level-two-page .aiml-broadcast-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 94%;
    min-width: 0;
}

.aiml-level-two-page .aiml-bmatrix-wrap { min-width: 0; text-align: center; }
.aiml-level-two-page .aiml-bmatrix-wrap > span { display: block; margin-bottom: 9px; color: #89afd0; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.aiml-level-two-page .aiml-bmatrix { display: grid; gap: 6px; padding: 10px; border: 1px solid #315777; border-radius: 11px; background: #081a2c; }
.aiml-level-two-page .aiml-brow { display: grid; grid-template-columns: repeat(4, minmax(36px, 1fr)); gap: 6px; }
.aiml-level-two-page .aiml-brow.one { grid-template-columns: minmax(42px, 1fr); }
.aiml-level-two-page .aiml-bcell { display: grid; min-width: 40px; min-height: 40px; place-items: center; border: 1px solid #3c6d92; border-radius: 7px; background: #123553; color: #e9f5ff; font: 750 12px "SFMono-Regular", Consolas, monospace; }
.aiml-level-two-page .aiml-bcell.repeat { border-style: dashed; color: #7fd9c3; }
.aiml-level-two-page .aiml-bcell.result { border-color: #cfad3b; background: #3b3317; color: #ffe875; }
.aiml-level-two-page .aiml-bop { flex: 0 0 auto; color: var(--aiml-gold); font-size: 27px; font-weight: 900; }

@media (max-width: 1280px) {
    .aiml-level-two-page .aiml-eda-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
    .aiml-level-two-page .aiml-numpy-console { margin: 0 42px 42px; }
    .aiml-level-two-page .aiml-array-anatomy,
    .aiml-level-two-page .aiml-table-demo { grid-template-columns: 1fr; }
    .aiml-level-two-page .aiml-dtype-grid,
    .aiml-level-two-page .aiml-broadcast-rule-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aiml-level-two-page .aiml-api-grid,
    .aiml-level-two-page .aiml-indexing-grid,
    .aiml-level-two-page .aiml-transform-grid,
    .aiml-level-two-page .aiml-repro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aiml-level-two-page .aiml-broadcast-visual { overflow-x: auto; justify-content: flex-start; padding: 20px; }
}

@media (max-width: 700px) {
    .aiml-lesson-page .aiml-outcome-grid,
    .aiml-lesson-page .aiml-revision-grid,
    .aiml-lesson-page .aiml-definition-grid,
    .aiml-lesson-page .aiml-vocabulary-grid,
    .aiml-lesson-page .aiml-paradigm-grid,
    .aiml-lesson-page .aiml-responsible-grid,
    .aiml-lesson-page .aiml-placement-check-grid,
    .aiml-lesson-page .aiml-quiz-options,
    .aiml-lesson-page .aiml-tips-grid,
    .aiml-lesson-page .aiml-extra-practice-grid {
        grid-template-columns: 1fr;
    }
    .aiml-level-two-page .aiml-numpy-console { margin: 0 17px 25px; }
    .aiml-level-two-page .aiml-numpy-console > code { min-height: 230px; padding: 18px; font-size: 12px; }
    .aiml-level-two-page .aiml-console-pipeline { flex-wrap: wrap; }
    .aiml-level-two-page .aiml-list-array-comparison { grid-template-columns: 1fr; }
    .aiml-level-two-page .aiml-vs-badge { width: 48px; height: 48px; justify-self: center; }
    .aiml-level-two-page .aiml-array-anatomy { grid-template-columns: 1fr; }
    .aiml-level-two-page .aiml-array-board { min-height: 280px; padding: 58px 18px 32px 53px; overflow-x: auto; }
    .aiml-level-two-page .aiml-matrix-grid { min-width: 285px; }
    .aiml-level-two-page .aiml-array-metadata,
    .aiml-level-two-page .aiml-dtype-grid,
    .aiml-level-two-page .aiml-broadcast-rule-grid,
    .aiml-level-two-page .aiml-api-grid,
    .aiml-level-two-page .aiml-indexing-grid,
    .aiml-level-two-page .aiml-vectorization-grid,
    .aiml-level-two-page .aiml-shape-examples,
    .aiml-level-two-page .aiml-axis-grid,
    .aiml-level-two-page .aiml-transform-grid,
    .aiml-level-two-page .aiml-eda-grid,
    .aiml-level-two-page .aiml-repro-grid { grid-template-columns: 1fr; }
    .aiml-level-two-page .aiml-code-callout,
    .aiml-level-two-page .aiml-complexity-strip { align-items: flex-start; flex-direction: column; }
    .aiml-level-two-page .aiml-broadcast-stage { overflow-x: auto; }
    .aiml-level-two-page .aiml-broadcast-visual { width: max-content; min-width: 720px; transform: none; }
}

/* ================================================================
   Final mobile lesson presentation override
   Keeps all CodeBhavya AI & ML levels readable and compact.
   ================================================================ */

@media (max-width: 700px) {
    .aiml-lesson-page {
        font-size: 14px;
    }

    .aiml-lesson-page .main-content {
        width: 100%;
        min-width: 0;
        padding: 14px 12px 38px;
        overflow-x: hidden;
    }

    .aiml-lesson-page .content-card,
    .aiml-lesson-page .content-section {
        min-width: 0;
        margin-top: 20px;
    }

    .aiml-lesson-page .content-card {
        padding: 19px 15px;
        border-radius: 15px;
    }

    .aiml-lesson-page .aiml-section-title {
        margin-bottom: 17px;
    }

    .aiml-lesson-page .aiml-section-title h2,
    .aiml-lesson-page .aiml-lesson-heading h2,
    .aiml-lesson-page .aiml-outcomes-card h2 {
        margin-top: 5px;
        font-size: clamp(24px, 7vw, 30px);
        line-height: 1.2;
        overflow-wrap: break-word;
        word-break: normal;
    }

    .aiml-lesson-page .aiml-section-title p,
    .aiml-lesson-page .aiml-lesson-heading p {
        font-size: 15px;
        line-height: 1.65;
    }

    .aiml-lesson-page .aiml-outcome-grid,
    .aiml-lesson-page .aiml-revision-grid,
    .aiml-lesson-page .aiml-definition-grid,
    .aiml-lesson-page .aiml-vocabulary-grid,
    .aiml-lesson-page .aiml-paradigm-grid,
    .aiml-lesson-page .aiml-framing-flow,
    .aiml-lesson-page .aiml-split-rules,
    .aiml-lesson-page .aiml-fit-grid,
    .aiml-lesson-page .aiml-responsible-grid,
    .aiml-lesson-page .aiml-placement-check-grid,
    .aiml-lesson-page .aiml-quiz-options,
    .aiml-lesson-page .aiml-tips-grid,
    .aiml-lesson-page .aiml-extra-practice-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: 10px;
    }

    .aiml-lesson-page .aiml-outcome-grid article,
    .aiml-lesson-page .aiml-revision-grid article,
    .aiml-lesson-page .aiml-definition-grid article,
    .aiml-lesson-page .aiml-vocabulary-grid article,
    .aiml-lesson-page .aiml-paradigm-grid article,
    .aiml-lesson-page .aiml-responsible-grid article,
    .aiml-lesson-page .aiml-placement-check-grid article,
    .aiml-lesson-page .aiml-tips-grid article,
    .aiml-lesson-page .aiml-extra-practice-grid li {
        width: 100%;
        min-width: 0;
        min-height: 0;
        padding: 15px;
    }

    .aiml-lesson-page .aiml-revision-grid strong,
    .aiml-lesson-page .aiml-vocabulary-grid strong,
    .aiml-lesson-page .aiml-responsible-grid strong,
    .aiml-lesson-page .aiml-definition-grid h3,
    .aiml-lesson-page .aiml-paradigm-grid h3 {
        min-height: 0;
        font-size: 17px;
        line-height: 1.35;
        overflow-wrap: break-word;
        word-break: normal;
        hyphens: none;
    }

    .aiml-lesson-page .aiml-revision-grid p,
    .aiml-lesson-page .aiml-vocabulary-grid p,
    .aiml-lesson-page .aiml-responsible-grid p,
    .aiml-lesson-page .aiml-definition-grid p,
    .aiml-lesson-page .aiml-paradigm-grid p,
    .aiml-lesson-page .aiml-placement-check-grid p,
    .aiml-lesson-page .aiml-tips-grid p,
    .aiml-lesson-page .aiml-extra-practice-grid p {
        margin-top: 6px;
        font-size: 14px;
        line-height: 1.6;
        overflow-wrap: break-word;
        word-break: normal;
        hyphens: none;
    }

    .aiml-lesson-page .aiml-definition-grid article {
        min-height: 0;
    }

    .aiml-lesson-page .aiml-definition-grid article > span {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .aiml-lesson-page .aiml-definition-grid h3 {
        margin: 13px 0 6px;
    }

    .aiml-lesson-page .aiml-definition-grid small {
        margin-top: 10px;
        padding-top: 10px;
    }

    .aiml-lesson-page .aiml-responsible-grid i {
        margin-bottom: 5px;
        font-size: 24px;
    }

    .aiml-lesson-page .aiml-quiz-question {
        min-width: 0;
        padding: 15px;
        border-radius: 13px;
    }

    .aiml-lesson-page .aiml-quiz-question > strong {
        margin-bottom: 11px;
        font-size: 16px;
        line-height: 1.5;
        overflow-wrap: break-word;
        word-break: normal;
    }

    .aiml-lesson-page .aiml-quiz-option {
        width: 100%;
        min-width: 0;
        min-height: 50px;
        padding: 11px 12px;
        line-height: 1.5;
    }

    .aiml-lesson-page .aiml-quiz-option span {
        min-width: 0;
        font-size: 14px;
        overflow-wrap: break-word;
        word-break: normal;
        hyphens: none;
    }

    .aiml-lesson-page .aiml-quiz-option input {
        flex: 0 0 auto;
        margin-top: 3px;
    }

    .aiml-lesson-page .aiml-lesson-navigation {
        display: flex;
        align-items: stretch;
        flex-direction: row;
        justify-content: space-between;
        gap: 8px;
        margin-top: 20px;
    }

    .aiml-lesson-page .aiml-lesson-navigation a {
        flex: 1 1 50%;
        width: auto;
        min-width: 0;
        min-height: 58px;
        padding: 9px 10px;
        border-radius: 10px;
    }

    .aiml-lesson-page .aiml-lesson-navigation span {
        font-size: 8px;
        letter-spacing: .06em;
    }

    .aiml-lesson-page .aiml-lesson-navigation strong {
        margin-top: 2px;
        font-size: 13px;
        line-height: 1.3;
        overflow-wrap: break-word;
        word-break: normal;
    }

    .aiml-lesson-page .footer-container {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: calc(100% - 28px);
        gap: 20px 14px;
        padding: 27px 0 20px;
    }

    .aiml-lesson-page .footer-brand-section {
        grid-column: 1 / -1;
    }

    .aiml-lesson-page .footer-brand {
        font-size: 24px;
    }

    .aiml-lesson-page .footer-tagline {
        margin: 5px 0 3px;
        font-size: 12px;
    }

    .aiml-lesson-page .footer-description {
        max-width: 100%;
        font-size: 11px;
        line-height: 1.55;
    }

    .aiml-lesson-page .footer-column h3 {
        margin-bottom: 8px;
        font-size: 13px;
    }

    .aiml-lesson-page .footer-column a {
        margin: 5px 0;
        font-size: 11px;
        line-height: 1.45;
    }

    .aiml-lesson-page .footer-bottom {
        display: flex;
        align-items: flex-start;
        flex-direction: row;
        justify-content: space-between;
        width: calc(100% - 28px);
        gap: 10px;
        padding: 13px 0 17px;
        font-size: 9px;
    }

    .aiml-lesson-page .footer-bottom p {
        flex: 1 1 50%;
        line-height: 1.4;
    }

    .aiml-lesson-page .footer-bottom p:last-child {
        text-align: right;
    }
}

@media (max-width: 380px) {
    .aiml-lesson-page .aiml-lesson-navigation {
        flex-direction: column;
    }

    .aiml-lesson-page .aiml-lesson-navigation a {
        flex-basis: auto;
        width: 100%;
        min-height: 54px;
    }

    .aiml-lesson-page .footer-container {
        grid-template-columns: minmax(0, 1fr);
    }

    .aiml-lesson-page .footer-brand-section {
        grid-column: auto;
    }
}

/* ================================================================
   Level 03 — Linear Algebra for Machine Learning
   ================================================================ */

.aiml-level-three-page .aiml-linear-hero {
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 18%, rgba(34, 211, 238, .18), transparent 27%),
        radial-gradient(circle at 72% 85%, rgba(139, 92, 246, .18), transparent 30%),
        linear-gradient(135deg, #06162a 0%, #0b2a4c 56%, #122b57 100%);
}

.aiml-level-three-page .aiml-linear-hero-visual {
    position: relative;
    align-self: center;
    justify-self: center;
    width: calc(100% - 36px);
    max-width: 390px;
    min-width: 0;
    height: 300px;
    overflow: hidden;
    border: 1px solid rgba(125, 211, 252, .3);
    border-radius: 24px;
    background-color: rgba(3, 15, 30, .72);
    background-image:
        linear-gradient(rgba(103, 232, 249, .09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(103, 232, 249, .09) 1px, transparent 1px);
    background-size: 30px 30px;
    box-shadow: inset 0 0 45px rgba(14, 165, 233, .08), 0 24px 50px rgba(1, 8, 20, .3);
}

.aiml-level-three-page .aiml-hero-axis {
    position: absolute;
    display: block;
    background: rgba(203, 213, 225, .48);
}

.aiml-level-three-page .aiml-hero-axis.x { top: 168px; right: 22px; left: 22px; height: 2px; }
.aiml-level-three-page .aiml-hero-axis.y { top: 24px; bottom: 22px; left: 88px; width: 2px; }

.aiml-level-three-page .aiml-hero-vector {
    position: absolute;
    bottom: 130px;
    left: 89px;
    display: block;
    height: 5px;
    border-radius: 999px;
    transform-origin: left center;
    font-size: 0;
    font-style: normal;
    font-weight: 900;
}

.aiml-level-three-page .aiml-hero-vector::before {
    position: absolute;
    z-index: 2;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(3, 15, 30, .88);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
}

.aiml-level-three-page .aiml-hero-vector::after {
    position: absolute;
    top: -6px;
    right: -2px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    content: "";
}

.aiml-level-three-page .aiml-hero-vector.original {
    width: 88px;
    color: #7dd3fc;
    background: #38bdf8;
    transform: rotate(-25deg);
}

.aiml-level-three-page .aiml-hero-vector.original::before {
    top: -24px;
    right: -17px;
    color: #7dd3fc;
    content: "v";
    transform: rotate(25deg);
}

.aiml-level-three-page .aiml-hero-vector.original::after { border-left: 13px solid #38bdf8; }

.aiml-level-three-page .aiml-hero-vector.transformed {
    width: 176px;
    color: #fde68a;
    background: #facc15;
    transform: rotate(-42deg);
}

.aiml-level-three-page .aiml-hero-vector.transformed::before {
    top: -25px;
    right: -25px;
    color: #fde68a;
    content: "Av";
    transform: rotate(42deg);
}

.aiml-level-three-page .aiml-hero-vector.transformed::after { border-left: 13px solid #facc15; }

.aiml-level-three-page .aiml-hero-matrix {
    position: absolute;
    right: 18px;
    bottom: 18px;
    padding: 11px 14px;
    border: 1px solid rgba(147, 197, 253, .25);
    border-radius: 13px;
    background: rgba(5, 20, 39, .9);
    color: #dbeafe;
    line-height: 1.45;
}

.aiml-level-three-page .aiml-hero-matrix small,
.aiml-level-three-page .aiml-hero-matrix em { display: block; color: #67e8f9; font-size: 9px; font-style: normal; font-weight: 900; letter-spacing: .12em; }
.aiml-level-three-page .aiml-hero-matrix strong { display: block; margin: 5px 0; color: #fff; font-family: "Courier New", monospace; font-size: 16px; }
.aiml-level-three-page .aiml-hero-matrix em { color: #facc15; }

.aiml-level-three-page .aiml-la-object-grid,
.aiml-level-three-page .aiml-vector-operation-grid,
.aiml-level-three-page .aiml-norm-grid,
.aiml-level-three-page .aiml-use-case-grid,
.aiml-level-three-page .aiml-matrix-operation-grid,
.aiml-level-three-page .aiml-transform-card-grid,
.aiml-level-three-page .aiml-system-grid,
.aiml-level-three-page .aiml-basis-grid,
.aiml-level-three-page .aiml-svd-grid,
.aiml-level-three-page .aiml-connection-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.aiml-level-three-page .aiml-la-object-grid article,
.aiml-level-three-page .aiml-vector-operation-grid article,
.aiml-level-three-page .aiml-norm-grid article,
.aiml-level-three-page .aiml-use-case-grid article,
.aiml-level-three-page .aiml-matrix-operation-grid article,
.aiml-level-three-page .aiml-transform-card-grid article,
.aiml-level-three-page .aiml-system-grid article,
.aiml-level-three-page .aiml-basis-grid article,
.aiml-level-three-page .aiml-svd-grid article,
.aiml-level-three-page .aiml-connection-grid article {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--aiml-border);
    border-radius: 16px;
    background: linear-gradient(145deg, #fff, #f7faff);
    box-shadow: 0 10px 25px rgba(7, 29, 59, .05);
}

.aiml-level-three-page .aiml-la-object-grid article > span,
.aiml-level-three-page .aiml-vector-operation-grid article > span,
.aiml-level-three-page .aiml-norm-grid article > span,
.aiml-level-three-page .aiml-matrix-operation-grid article > span,
.aiml-level-three-page .aiml-system-grid article > span,
.aiml-level-three-page .aiml-basis-grid article > span {
    display: block;
    margin-bottom: 9px;
    color: var(--aiml-blue-700);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .1em;
}

.aiml-level-three-page .aiml-la-object-grid strong,
.aiml-level-three-page .aiml-norm-grid strong,
.aiml-level-three-page .aiml-use-case-grid strong,
.aiml-level-three-page .aiml-matrix-operation-grid strong,
.aiml-level-three-page .aiml-transform-card-grid strong,
.aiml-level-three-page .aiml-system-grid strong,
.aiml-level-three-page .aiml-basis-grid strong,
.aiml-level-three-page .aiml-svd-grid strong,
.aiml-level-three-page .aiml-connection-grid strong { display: block; color: var(--aiml-heading); font-size: 17px; line-height: 1.35; }

.aiml-level-three-page .aiml-la-object-grid code,
.aiml-level-three-page .aiml-matrix-operation-grid code,
.aiml-level-three-page .aiml-transform-card-grid code { display: block; width: fit-content; max-width: 100%; margin: 10px 0; overflow-wrap: anywhere; }

.aiml-level-three-page .aiml-la-object-grid p,
.aiml-level-three-page .aiml-vector-operation-grid p,
.aiml-level-three-page .aiml-norm-grid p,
.aiml-level-three-page .aiml-use-case-grid p,
.aiml-level-three-page .aiml-matrix-operation-grid p,
.aiml-level-three-page .aiml-system-grid p,
.aiml-level-three-page .aiml-basis-grid p,
.aiml-level-three-page .aiml-svd-grid p,
.aiml-level-three-page .aiml-connection-grid p { margin: 7px 0 0; font-size: 14px; line-height: 1.6; }

.aiml-level-three-page .aiml-vector-operation-grid,
.aiml-level-three-page .aiml-norm-grid,
.aiml-level-three-page .aiml-use-case-grid,
.aiml-level-three-page .aiml-system-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.aiml-level-three-page .aiml-norm-grid .featured { border-color: #60a5fa; background: linear-gradient(145deg, #eff6ff, #fff); box-shadow: 0 14px 30px rgba(37, 99, 235, .11); }

.aiml-level-three-page .aiml-la-formula {
    margin: 10px 0;
    padding: 15px;
    border: 1px solid #cfe0f5;
    border-radius: 12px;
    background: #f1f7ff;
    color: #0f4da7;
    font-family: "Courier New", monospace;
    font-size: 16px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.aiml-level-three-page .aiml-dot-layout,
.aiml-level-three-page .aiml-eigen-layout,
.aiml-level-three-page .aiml-projection-layout {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: stretch;
    gap: 18px;
}

.aiml-level-three-page .aiml-dot-calculation,
.aiml-level-three-page .aiml-dot-meaning,
.aiml-level-three-page .aiml-eigen-equation,
.aiml-level-three-page .aiml-ml-link-list {
    padding: 24px;
    border: 1px solid var(--aiml-border);
    border-radius: 18px;
    background: #fff;
}

.aiml-level-three-page .aiml-dot-calculation > div { display: flex; align-items: center; justify-content: center; gap: 18px; color: var(--aiml-heading); font-size: 27px; font-weight: 900; }
.aiml-level-three-page .aiml-dot-calculation > div b { color: var(--aiml-gold); }
.aiml-level-three-page .aiml-dot-calculation > strong { display: block; margin: 18px 0 9px; color: var(--aiml-blue-700); text-align: center; }
.aiml-level-three-page .aiml-dot-calculation > p { text-align: center; }
.aiml-level-three-page .aiml-dot-meaning { display: grid; gap: 10px; }
.aiml-level-three-page .aiml-dot-meaning article { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 12px; background: #f7faff; }
.aiml-level-three-page .aiml-dot-meaning b { min-width: 48px; color: var(--aiml-blue-700); }

.aiml-level-three-page .aiml-cosine-equation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 22px 0;
    padding: 20px;
    border-radius: 18px;
    background: linear-gradient(135deg, #071b32, #0e345c);
    color: #fff;
    font-size: 19px;
}

.aiml-level-three-page .aiml-cosine-equation div { display: grid; text-align: center; }
.aiml-level-three-page .aiml-cosine-equation div b { border-bottom: 2px solid #facc15; }
.aiml-level-three-page .aiml-cosine-equation div i { font-style: normal; }
.aiml-level-three-page .aiml-use-case-grid article > span { display: block; margin-bottom: 8px; font-size: 26px; }

.aiml-level-three-page .aiml-matmul-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin: 26px 0;
}

.aiml-level-three-page .aiml-matmul-flow > i { color: var(--aiml-gold); font-size: 29px; font-style: normal; font-weight: 900; }
.aiml-level-three-page .aiml-display-matrix > span { display: block; margin-bottom: 8px; color: var(--aiml-blue-700); font-size: 10px; font-weight: 950; letter-spacing: .1em; text-align: center; }
.aiml-level-three-page .aiml-display-matrix > div { display: grid; grid-template-columns: repeat(3, 42px); gap: 6px; padding: 11px; border: 2px solid #bfd3ea; border-top: 0; border-bottom: 0; }
.aiml-level-three-page .aiml-display-matrix:nth-of-type(2) > div { grid-template-columns: repeat(2, 42px); }
.aiml-level-three-page .aiml-display-matrix.result > div { grid-template-columns: repeat(2, 42px); border-color: #22c55e; background: #effdf5; }
.aiml-level-three-page .aiml-display-matrix b { display: grid; place-items: center; height: 38px; border-radius: 8px; background: #eef5fd; color: var(--aiml-heading); }
.aiml-level-three-page .aiml-cell-proof { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px 16px; border-radius: 13px; background: #eef5fd; }
.aiml-level-three-page .aiml-cell-proof span { font-size: 12px; font-weight: 750; }

.aiml-level-three-page .aiml-transform-card-grid article { text-align: center; }
.aiml-level-three-page .aiml-transform-card-grid article > span { display: block; color: var(--aiml-blue-600); font-size: 31px; font-weight: 900; }

.aiml-level-three-page .aiml-projection-plane {
    position: relative;
    min-height: 230px;
    border: 1px solid #c9d9ea;
    border-radius: 18px;
    background-color: #f8fbff;
    background-image: linear-gradient(#dfebf7 1px, transparent 1px), linear-gradient(90deg, #dfebf7 1px, transparent 1px);
    background-size: 28px 28px;
}

.aiml-level-three-page .aiml-projection-plane::before,
.aiml-level-three-page .aiml-projection-plane::after { position: absolute; bottom: 50px; left: 45px; height: 4px; border-radius: 999px; transform-origin: left center; content: ""; }
.aiml-level-three-page .aiml-projection-plane::before { width: 185px; background: #2563eb; transform: rotate(0); }
.aiml-level-three-page .aiml-projection-plane::after { width: 150px; background: #d4af37; transform: rotate(-47deg); }
.aiml-level-three-page .aiml-projection-plane span { position: absolute; font-size: 11px; font-weight: 900; }
.aiml-level-three-page .aiml-projection-plane .base { right: 38px; bottom: 58px; color: #2563eb; }
.aiml-level-three-page .aiml-projection-plane .source { top: 45px; left: 137px; color: #a16207; }
.aiml-level-three-page .aiml-projection-plane .projected { right: 74px; bottom: 27px; color: #16a34a; }
.aiml-level-three-page .aiml-projection-layout ul { margin: 15px 0 0; padding-left: 20px; }
.aiml-level-three-page .aiml-projection-layout li { margin: 8px 0; }

.aiml-level-three-page .aiml-eigen-equation { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 8px 15px; }
.aiml-level-three-page .aiml-eigen-equation > strong { grid-column: 1 / -1; margin-bottom: 10px; color: var(--aiml-blue-700); font-size: 38px; text-align: center; }
.aiml-level-three-page .aiml-eigen-equation > span { display: grid; place-items: center; width: 60px; height: 45px; border-radius: 12px; background: #e9f2ff; color: var(--aiml-blue-700); font-size: 20px; font-weight: 900; }
.aiml-level-three-page .aiml-eigen-equation > p { margin: 0; }
.aiml-level-three-page .aiml-ml-link-list { display: grid; gap: 10px; }
.aiml-level-three-page .aiml-ml-link-list article { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 12px; border-radius: 12px; background: #f6f9fd; }
.aiml-level-three-page .aiml-ml-link-list b { color: var(--aiml-heading); }

.aiml-level-three-page .aiml-svd-equation { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 22px 0; color: var(--aiml-heading); font-size: 34px; font-weight: 950; }
.aiml-level-three-page .aiml-svd-equation span { display: grid; place-items: center; min-width: 70px; height: 70px; border: 2px solid #bfdbfe; border-radius: 16px; background: #eff6ff; }
.aiml-level-three-page .aiml-svd-equation span:last-child { color: #7c3aed; border-color: #ddd6fe; background: #f5f3ff; }
.aiml-level-three-page .aiml-svd-equation b:nth-of-type(2) { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 16px; background: #fff8d9; color: #a16207; }
.aiml-level-three-page .aiml-connection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aiml-level-three-page .aiml-connection-grid article > span { display: grid; place-items: center; width: fit-content; min-width: 52px; height: 42px; margin-bottom: 12px; padding: 0 10px; border-radius: 11px; background: #eaf3ff; color: var(--aiml-blue-700); font-family: "Courier New", monospace; font-weight: 900; }

.aiml-level-three-page .aiml-matrix-stage { min-height: 300px; }
.aiml-level-three-page .aiml-la-operation { display: flex; align-items: center; justify-content: center; gap: 18px; width: 100%; }
.aiml-level-three-page .aiml-la-operation > b { color: #facc15; font-size: 26px; }
.aiml-level-three-page .aiml-la-dynamic-matrix > span { display: block; margin-bottom: 8px; color: #9dc6eb; font-size: 10px; font-weight: 900; text-align: center; }
.aiml-level-three-page .aiml-la-dynamic-matrix > div { display: grid; grid-template-columns: repeat(var(--matrix-columns), 45px); gap: 6px; padding: 11px; border: 2px solid #4f7697; border-top: 0; border-bottom: 0; }
.aiml-level-three-page .aiml-la-dynamic-matrix b { display: grid; place-items: center; height: 40px; border-radius: 8px; background: #112a43; color: #fff; }
.aiml-level-three-page .aiml-la-dynamic-matrix.active b { background: #123b63; color: #7dd3fc; }
.aiml-level-three-page .aiml-la-dynamic-matrix.result b { background: #123b2e; color: #86efac; }
.aiml-level-three-page .aiml-la-dot-stage { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 18px; color: #fff; font-family: "Courier New", monospace; font-size: 26px; font-weight: 900; }
.aiml-level-three-page .aiml-la-dot-stage span { padding: 13px 16px; border: 1px solid #315777; border-radius: 12px; background: #0a2138; }
.aiml-level-three-page .aiml-la-dot-stage b { color: #67e8f9; }
.aiml-level-three-page .aiml-la-dot-stage i { width: 100%; color: #facc15; font-style: normal; text-align: center; }
.aiml-level-three-page .aiml-transform-plane { width: min(100%, 440px); margin: auto; }
.aiml-level-three-page .aiml-transform-plane svg { display: block; width: 100%; height: auto; overflow: visible; }
.aiml-level-three-page .aiml-transform-plane .grid line { stroke: #173551; stroke-width: 1; }
.aiml-level-three-page .aiml-transform-plane.transformed .grid { transform: skewX(-10deg) scaleX(1.08); transform-origin: center; }
.aiml-level-three-page .aiml-transform-plane .axis { stroke: #7893ad; stroke-width: 1.6; }
.aiml-level-three-page .aiml-transform-plane .original-vector { stroke: #38bdf8; stroke-width: 4; }
.aiml-level-three-page .aiml-transform-plane .result-vector { stroke: #facc15; stroke-width: 4; }
.aiml-level-three-page .aiml-transform-plane #arrowBlue path { fill: #38bdf8; }
.aiml-level-three-page .aiml-transform-plane #arrowGold path { fill: #facc15; }
.aiml-level-three-page .aiml-transform-plane text { fill: #7dd3fc; font-size: 8px; font-weight: 800; }
.aiml-level-three-page .aiml-transform-plane text.result-label { fill: #fde68a; }
.aiml-level-three-page .aiml-la-ml-stage { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; width: 100%; color: #fff; text-align: center; }
.aiml-level-three-page .aiml-la-ml-stage span { padding: 18px; border: 1px solid #315777; border-radius: 14px; background: #0a2138; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.aiml-level-three-page .aiml-la-ml-stage span b { display: block; margin-top: 7px; color: #7dd3fc; font-size: 18px; }
.aiml-level-three-page .aiml-la-ml-stage i { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #facc15; color: #071b32; font-style: normal; font-weight: 950; }
.aiml-level-three-page .aiml-la-ml-stage strong { grid-column: 1 / -1; color: #86efac; font-size: 11px; letter-spacing: .12em; }
.aiml-level-three-page .aiml-variable-grid strong { overflow-wrap: anywhere; word-break: normal; }

@media (max-width: 1050px) {
    .aiml-level-three-page .aiml-linear-hero-visual { min-width: 285px; height: 270px; }
    .aiml-level-three-page .aiml-la-object-grid,
    .aiml-level-three-page .aiml-matrix-operation-grid,
    .aiml-level-three-page .aiml-transform-card-grid,
    .aiml-level-three-page .aiml-basis-grid,
    .aiml-level-three-page .aiml-svd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .aiml-level-three-page .aiml-linear-hero { display: block; }
    .aiml-level-three-page .aiml-linear-hero-visual { width: 100%; min-width: 0; height: 230px; margin-top: 22px; border-radius: 17px; }
    .aiml-level-three-page .aiml-hero-axis.x { top: 128px; }
    .aiml-level-three-page .aiml-hero-vector { bottom: 100px; }
    .aiml-level-three-page .aiml-hero-matrix { right: 10px; bottom: 10px; padding: 8px 10px; }
    .aiml-level-three-page .aiml-hero-matrix strong { font-size: 13px; }
    .aiml-level-three-page .aiml-la-object-grid,
    .aiml-level-three-page .aiml-vector-operation-grid,
    .aiml-level-three-page .aiml-norm-grid,
    .aiml-level-three-page .aiml-use-case-grid,
    .aiml-level-three-page .aiml-matrix-operation-grid,
    .aiml-level-three-page .aiml-transform-card-grid,
    .aiml-level-three-page .aiml-system-grid,
    .aiml-level-three-page .aiml-basis-grid,
    .aiml-level-three-page .aiml-svd-grid,
    .aiml-level-three-page .aiml-connection-grid,
    .aiml-level-three-page .aiml-dot-layout,
    .aiml-level-three-page .aiml-eigen-layout,
    .aiml-level-three-page .aiml-projection-layout { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-three-page .aiml-la-object-grid article,
    .aiml-level-three-page .aiml-vector-operation-grid article,
    .aiml-level-three-page .aiml-norm-grid article,
    .aiml-level-three-page .aiml-use-case-grid article,
    .aiml-level-three-page .aiml-matrix-operation-grid article,
    .aiml-level-three-page .aiml-transform-card-grid article,
    .aiml-level-three-page .aiml-system-grid article,
    .aiml-level-three-page .aiml-basis-grid article,
    .aiml-level-three-page .aiml-svd-grid article,
    .aiml-level-three-page .aiml-connection-grid article { width: 100%; min-width: 0; padding: 15px; }
    .aiml-level-three-page .aiml-matmul-flow { align-items: stretch; flex-direction: column; gap: 11px; }
    .aiml-level-three-page .aiml-matmul-flow > i { transform: rotate(90deg); text-align: center; }
    .aiml-level-three-page .aiml-display-matrix { width: fit-content; max-width: 100%; margin: auto; }
    .aiml-level-three-page .aiml-cell-proof { flex-direction: column; }
    .aiml-level-three-page .aiml-cell-proof code { white-space: normal; overflow-wrap: anywhere; }
    .aiml-level-three-page .aiml-cosine-equation { flex-wrap: wrap; gap: 11px; padding: 15px; font-size: 16px; }
    .aiml-level-three-page .aiml-projection-plane { min-height: 200px; }
    .aiml-level-three-page .aiml-ml-link-list article { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .aiml-level-three-page .aiml-svd-equation { gap: 7px; font-size: 20px; }
    .aiml-level-three-page .aiml-svd-equation span,
    .aiml-level-three-page .aiml-svd-equation b:nth-of-type(2) { min-width: 47px; width: 47px; height: 47px; border-radius: 11px; }
    .aiml-level-three-page .aiml-matrix-stage { min-height: 245px; }
    .aiml-level-three-page .aiml-la-operation { flex-wrap: wrap; gap: 10px; }
    .aiml-level-three-page .aiml-la-dynamic-matrix > div { grid-template-columns: repeat(var(--matrix-columns), 36px); padding: 8px; }
    .aiml-level-three-page .aiml-la-dynamic-matrix b { height: 34px; }
    .aiml-level-three-page .aiml-la-dot-stage { gap: 9px; font-size: 17px; }
    .aiml-level-three-page .aiml-la-dot-stage span { padding: 9px; }
    .aiml-level-three-page .aiml-la-ml-stage { grid-template-columns: minmax(0, 1fr); gap: 9px; }
    .aiml-level-three-page .aiml-la-ml-stage i { margin: auto; transform: rotate(90deg); }
    .aiml-level-three-page .aiml-la-ml-stage strong { grid-column: auto; }
    .aiml-level-three-page .aiml-variable-grid article { min-width: 0; }
    .aiml-level-three-page .aiml-variable-grid strong { font-size: 12px; line-height: 1.45; }
}

/* =========================================================
   AI & ML Level 04 — Probability & Statistics
   ========================================================= */
.aiml-level-four-page .aiml-probability-hero {
    grid-template-columns: minmax(0, 1.25fr) minmax(390px, .75fr);
}

.aiml-level-four-page .aiml-probability-hero-visual {
    position: relative;
    z-index: 1;
    align-self: center;
    width: calc(100% - 46px);
    height: 360px;
    margin: 23px 38px 23px 8px;
    overflow: hidden;
    border: 1px solid rgba(118, 190, 240, .34);
    border-radius: 28px;
    background:
        linear-gradient(rgba(92, 167, 219, .1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(92, 167, 219, .1) 1px, transparent 1px),
        radial-gradient(circle at 50% 72%, rgba(37, 99, 235, .25), transparent 48%),
        #05182b;
    background-size: 36px 36px, 36px 36px, auto, auto;
    box-shadow: inset 0 0 45px rgba(20, 126, 202, .1);
}

.aiml-level-four-page .aiml-hero-curve {
    position: absolute;
    right: 7%;
    bottom: 67px;
    left: 7%;
    height: 220px;
    border-bottom: 2px solid #66829e;
}

.aiml-level-four-page .aiml-hero-curve > i {
    position: absolute;
    right: 8%;
    bottom: 0;
    left: 8%;
    height: 190px;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    background: linear-gradient(180deg, rgba(56, 189, 248, .24), rgba(56, 189, 248, .03));
    clip-path: polygon(0 100%, 4% 98%, 9% 94%, 14% 87%, 20% 76%, 27% 59%, 34% 36%, 40% 15%, 46% 3%, 50% 0, 54% 3%, 60% 15%, 66% 36%, 73% 59%, 80% 76%, 86% 87%, 91% 94%, 96% 98%, 100% 100%);
}

.aiml-level-four-page .aiml-hero-curve > i::after {
    position: absolute;
    inset: 0;
    border-bottom: 4px solid #38bdf8;
    content: "";
}

.aiml-level-four-page .aiml-hero-curve > span {
    position: absolute;
    bottom: -32px;
    color: #a7c8e7;
    font: 900 13px/1 "SFMono-Regular", Consolas, monospace;
}

.aiml-level-four-page .aiml-hero-curve .mean-line {
    left: 50%;
    bottom: 0;
    width: 2px;
    height: 198px;
    padding-top: 8px;
    border-left: 2px dashed #facc15;
    color: #fde68a;
    text-indent: 8px;
}

.aiml-level-four-page .aiml-hero-curve .sigma-left { left: 27%; }
.aiml-level-four-page .aiml-hero-curve .sigma-right { right: 25%; }

.aiml-level-four-page .aiml-hero-chance {
    position: absolute;
    right: 17px;
    bottom: 15px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border: 1px solid #315879;
    border-radius: 12px;
    background: rgba(4, 19, 35, .92);
    color: #d8e8f6;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .06em;
}

.aiml-level-four-page .aiml-hero-chance b { color: #7dd3fc; font-size: 15px; }
.aiml-level-four-page .aiml-hero-chance i { color: #facc15; font-style: normal; }
.aiml-level-four-page .aiml-hero-chance strong { color: #86efac; }

.aiml-level-four-page .aiml-hero-dice {
    position: absolute;
    top: 17px;
    right: 17px;
    display: grid;
    grid-template-columns: repeat(2, 9px);
    grid-template-rows: repeat(2, 9px);
    gap: 10px;
    width: 66px;
    height: 66px;
    place-content: center;
    border: 2px solid rgba(250, 204, 21, .78);
    border-radius: 16px;
    background: rgba(250, 204, 21, .09);
    color: #facc15;
    transform: rotate(8deg);
}

.aiml-level-four-page .aiml-hero-dice span { font-size: 10px; line-height: 9px; }
.aiml-level-four-page .aiml-hero-dice span:last-child { grid-column: 1 / -1; justify-self: center; }

.aiml-level-four-page .aiml-probability-object-grid,
.aiml-level-four-page .aiml-rule-grid,
.aiml-level-four-page .aiml-bayes-terms,
.aiml-level-four-page .aiml-summary-stat-grid,
.aiml-level-four-page .aiml-rv-grid,
.aiml-level-four-page .aiml-moment-grid,
.aiml-level-four-page .aiml-error-grid,
.aiml-level-four-page .aiml-estimation-grid,
.aiml-level-four-page .aiml-distribution-grid,
.aiml-level-four-page .aiml-experiment-grid,
.aiml-level-four-page .aiml-law-grid {
    display: grid;
    gap: 14px;
}

.aiml-level-four-page .aiml-probability-object-grid,
.aiml-level-four-page .aiml-rule-grid,
.aiml-level-four-page .aiml-bayes-terms,
.aiml-level-four-page .aiml-summary-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.aiml-level-four-page .aiml-rv-grid,
.aiml-level-four-page .aiml-moment-grid,
.aiml-level-four-page .aiml-error-grid,
.aiml-level-four-page .aiml-estimation-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aiml-level-four-page .aiml-distribution-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.aiml-level-four-page .aiml-experiment-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aiml-level-four-page .aiml-law-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 15px; }

.aiml-level-four-page .aiml-probability-object-grid article,
.aiml-level-four-page .aiml-rule-grid article,
.aiml-level-four-page .aiml-bayes-terms article,
.aiml-level-four-page .aiml-summary-stat-grid article,
.aiml-level-four-page .aiml-rv-grid article,
.aiml-level-four-page .aiml-moment-grid article,
.aiml-level-four-page .aiml-error-grid article,
.aiml-level-four-page .aiml-estimation-grid article,
.aiml-level-four-page .aiml-distribution-grid article,
.aiml-level-four-page .aiml-experiment-grid article,
.aiml-level-four-page .aiml-law-grid article {
    min-width: 0;
    padding: 21px;
    border: 1px solid #d7e3ef;
    border-radius: 16px;
    background: linear-gradient(145deg, #fff, #f6f9fd);
    box-shadow: 0 8px 24px rgba(7, 29, 59, .05);
}

.aiml-level-four-page .aiml-probability-object-grid article > span,
.aiml-level-four-page .aiml-rule-grid article > span,
.aiml-level-four-page .aiml-rv-grid article > span,
.aiml-level-four-page .aiml-moment-grid article > span,
.aiml-level-four-page .aiml-error-grid article > span,
.aiml-level-four-page .aiml-estimation-grid article > span,
.aiml-level-four-page .aiml-distribution-grid article > span,
.aiml-level-four-page .aiml-experiment-grid article > span {
    display: block;
    margin-bottom: 9px;
    color: var(--aiml-blue-700);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .1em;
}

.aiml-level-four-page .aiml-probability-object-grid article > span {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    background: #dceaff;
}

.aiml-level-four-page .aiml-probability-object-grid strong,
.aiml-level-four-page .aiml-rule-grid strong,
.aiml-level-four-page .aiml-bayes-terms strong,
.aiml-level-four-page .aiml-summary-stat-grid strong,
.aiml-level-four-page .aiml-rv-grid strong,
.aiml-level-four-page .aiml-moment-grid strong,
.aiml-level-four-page .aiml-error-grid strong,
.aiml-level-four-page .aiml-estimation-grid strong,
.aiml-level-four-page .aiml-distribution-grid strong,
.aiml-level-four-page .aiml-law-grid strong {
    display: block;
    color: var(--aiml-heading);
    font-size: 17px;
    line-height: 1.4;
    overflow-wrap: break-word;
}

.aiml-level-four-page .aiml-probability-object-grid p,
.aiml-level-four-page .aiml-rule-grid p,
.aiml-level-four-page .aiml-bayes-terms p,
.aiml-level-four-page .aiml-summary-stat-grid p,
.aiml-level-four-page .aiml-rv-grid p,
.aiml-level-four-page .aiml-moment-grid p,
.aiml-level-four-page .aiml-error-grid p,
.aiml-level-four-page .aiml-estimation-grid p,
.aiml-level-four-page .aiml-distribution-grid p,
.aiml-level-four-page .aiml-experiment-grid p,
.aiml-level-four-page .aiml-law-grid p {
    margin: 8px 0 0;
    color: var(--aiml-slate-600);
    font-size: 14px;
}

.aiml-level-four-page .aiml-equation-banner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
    padding: 16px 19px;
    border-radius: 14px;
    background: #07182c;
    color: #cfe0ee;
}

.aiml-level-four-page .aiml-equation-banner strong { color: #ffe274; }
.aiml-level-four-page .aiml-equation-banner code { justify-self: center; padding: 8px 12px; background: #102c49; color: #7dd3fc; }
.aiml-level-four-page .aiml-equation-banner span { color: #a9c2d8; font-size: 13px; text-align: right; }

.aiml-level-four-page .aiml-conditional-layout,
.aiml-level-four-page .aiml-covariance-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.aiml-level-four-page .aiml-conditional-layout > div,
.aiml-level-four-page .aiml-covariance-layout > article {
    padding: 25px;
    border: 1px solid #cbddec;
    border-radius: 18px;
    background: linear-gradient(140deg, #f4f9ff, #fff);
}

.aiml-level-four-page .aiml-conditional-layout span,
.aiml-level-four-page .aiml-covariance-layout article > span {
    color: var(--aiml-blue-700);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .1em;
}

.aiml-level-four-page .aiml-conditional-layout strong,
.aiml-level-four-page .aiml-covariance-layout strong {
    display: block;
    margin: 12px 0;
    color: var(--aiml-heading);
    font-size: clamp(18px, 2vw, 25px);
    overflow-wrap: break-word;
}

.aiml-level-four-page .aiml-conditional-layout p,
.aiml-level-four-page .aiml-covariance-layout p { margin: 0; color: var(--aiml-slate-600); }

.aiml-level-four-page .aiml-bayes-equation {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
    padding: 24px;
    border-radius: 18px;
    background: #07182c;
    color: #fff;
}

.aiml-level-four-page .aiml-bayes-equation > span { color: #7dd3fc; font-size: 10px; font-weight: 950; letter-spacing: .1em; }
.aiml-level-four-page .aiml-bayes-equation > strong { color: #7dd3fc; font-size: 26px; }
.aiml-level-four-page .aiml-bayes-equation > b { color: #facc15; font-size: 22px; }
.aiml-level-four-page .aiml-bayes-equation > div { display: grid; min-width: 100px; place-items: center; padding: 11px; border: 1px solid #31516f; border-radius: 11px; background: #0d2946; }
.aiml-level-four-page .aiml-bayes-equation em { color: #fff; font: 900 17px/1.2 "SFMono-Regular", Consolas, monospace; }
.aiml-level-four-page .aiml-bayes-equation i { margin-top: 5px; color: #8fb1cf; font-size: 8px; font-style: normal; font-weight: 900; letter-spacing: .1em; }

.aiml-level-four-page .aiml-dist-icon { display: flex; height: 85px; align-items: flex-end; justify-content: center; gap: 5px; margin-bottom: 15px; border-bottom: 2px solid #adc2d6; }
.aiml-level-four-page .aiml-dist-icon i { display: block; width: 18px; border-radius: 5px 5px 0 0; background: #4b91e5; }
.aiml-level-four-page .aiml-dist-icon.bernoulli i { height: 54px; }
.aiml-level-four-page .aiml-dist-icon.bernoulli i:last-child { height: 27px; background: #d4af37; }
.aiml-level-four-page .aiml-dist-icon.binomial i:nth-child(1),
.aiml-level-four-page .aiml-dist-icon.binomial i:nth-child(5) { height: 18px; }
.aiml-level-four-page .aiml-dist-icon.binomial i:nth-child(2),
.aiml-level-four-page .aiml-dist-icon.binomial i:nth-child(4) { height: 42px; }
.aiml-level-four-page .aiml-dist-icon.binomial i:nth-child(3) { height: 67px; background: #d4af37; }
.aiml-level-four-page .aiml-dist-icon.poisson i:nth-child(1) { height: 20px; }
.aiml-level-four-page .aiml-dist-icon.poisson i:nth-child(2) { height: 62px; }
.aiml-level-four-page .aiml-dist-icon.poisson i:nth-child(3) { height: 51px; background: #d4af37; }
.aiml-level-four-page .aiml-dist-icon.poisson i:nth-child(4) { height: 30px; }
.aiml-level-four-page .aiml-dist-icon.poisson i:nth-child(5) { height: 13px; }
.aiml-level-four-page .aiml-dist-icon.uniform i { width: 75%; height: 48px; background: linear-gradient(90deg, #2563eb, #38bdf8); }
.aiml-level-four-page .aiml-dist-icon.normal i { width: 85%; height: 75px; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: linear-gradient(180deg, #d4af37, rgba(212,175,55,.2)); clip-path: polygon(0 100%, 8% 95%, 17% 82%, 27% 57%, 38% 22%, 47% 2%, 50% 0, 53% 2%, 62% 22%, 73% 57%, 83% 82%, 92% 95%, 100% 100%); }

.aiml-level-four-page .aiml-correlation-scale {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 17px 21px;
    border-radius: 14px;
    background: #07182c;
    color: #e7f2fb;
    text-align: center;
}

.aiml-level-four-page .aiml-correlation-scale i { height: 8px; border-radius: 999px; background: linear-gradient(90deg, #ef4444, #fff4bf); }
.aiml-level-four-page .aiml-correlation-scale i:last-of-type { background: linear-gradient(90deg, #fff4bf, #22c55e); }
.aiml-level-four-page .aiml-correlation-scale small { color: #91abc2; }

.aiml-level-four-page .aiml-sampling-flow,
.aiml-level-four-page .aiml-test-flow {
    display: flex;
    align-items: stretch;
    gap: 9px;
}

.aiml-level-four-page .aiml-sampling-flow article,
.aiml-level-four-page .aiml-test-flow article {
    flex: 1 1 0;
    min-width: 0;
    padding: 20px;
    border: 1px solid #d5e2ee;
    border-radius: 15px;
    background: #f8fbff;
}

.aiml-level-four-page .aiml-sampling-flow > b,
.aiml-level-four-page .aiml-test-flow > b { align-self: center; color: var(--aiml-gold); font-size: 22px; }
.aiml-level-four-page .aiml-sampling-flow span,
.aiml-level-four-page .aiml-test-flow span { color: var(--aiml-blue-700); font-size: 10px; font-weight: 950; letter-spacing: .09em; }
.aiml-level-four-page .aiml-sampling-flow strong,
.aiml-level-four-page .aiml-test-flow strong { display: block; margin-top: 8px; color: var(--aiml-heading); font-size: 17px; }
.aiml-level-four-page .aiml-sampling-flow p,
.aiml-level-four-page .aiml-test-flow p { margin: 7px 0 0; color: var(--aiml-slate-600); font-size: 14px; }

.aiml-level-four-page .aiml-ci-visual {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto;
    align-items: center;
    gap: 10px;
    max-width: 850px;
    margin: 5px auto 18px;
    padding: 25px;
    border-radius: 16px;
    background: #07182c;
    color: #fff;
}

.aiml-level-four-page .aiml-ci-visual i { height: 5px; border-radius: 999px; background: linear-gradient(90deg, #38bdf8, #facc15); }
.aiml-level-four-page .aiml-ci-visual i:last-of-type { background: linear-gradient(90deg, #facc15, #38bdf8); }
.aiml-level-four-page .aiml-ci-visual strong { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 50%; background: #facc15; color: #07182c; }
.aiml-level-four-page .aiml-ci-visual span { color: #8dcaf7; font-size: 10px; font-weight: 950; letter-spacing: .08em; }
.aiml-level-four-page .aiml-ci-equation { text-align: center; }
.aiml-level-four-page .aiml-ci-equation code { display: inline-block; padding: 11px 16px; font-size: 17px; }
.aiml-level-four-page .aiml-interpretation-note { display: flex; gap: 14px; margin-top: 19px; padding: 17px; border-left: 5px solid #16a34a; border-radius: 0 13px 13px 0; background: #ecfdf3; color: #23543b; }

.aiml-level-four-page .aiml-bayes-stage { align-content: center; padding: 24px; }
.aiml-level-four-page .aiml-frequency-grid { display: grid; grid-template-columns: repeat(10, 18px); gap: 5px; justify-content: center; }
.aiml-level-four-page .aiml-frequency-grid i { display: block; width: 18px; height: 18px; border-radius: 4px; background: #36516b; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); transition: .22s ease; }
.aiml-level-four-page .aiml-frequency-grid i.defective { background: #facc15; box-shadow: 0 0 8px rgba(250,204,21,.38); }
.aiml-level-four-page .aiml-frequency-grid i.true-alert { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,.4); }
.aiml-level-four-page .aiml-frequency-grid i.false-alert { background: #ef6a62; box-shadow: 0 0 8px rgba(239,106,98,.35); }
.aiml-level-four-page .aiml-frequency-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 13px; margin-top: 18px; }
.aiml-level-four-page .aiml-frequency-legend span { position: relative; padding-left: 15px; color: #b8ccde; font-size: 10px; font-weight: 850; }
.aiml-level-four-page .aiml-frequency-legend span::before { position: absolute; top: 2px; left: 0; width: 9px; height: 9px; border-radius: 3px; background: #36516b; content: ""; }
.aiml-level-four-page .aiml-frequency-legend span.defective::before { background: #facc15; }
.aiml-level-four-page .aiml-frequency-legend span.true-alert::before { background: #22c55e; }
.aiml-level-four-page .aiml-frequency-legend span.false-alert::before { background: #ef6a62; }

.aiml-level-four-page .aiml-bayes-stat-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; width: min(100%, 480px); }
.aiml-level-four-page .aiml-bayes-stat-cards article { min-width: 0; padding: 18px; border: 1px solid #315471; border-radius: 13px; background: #0a2138; }
.aiml-level-four-page .aiml-bayes-stat-cards span { color: #a7bed2; font-size: 11px; font-weight: 800; }
.aiml-level-four-page .aiml-bayes-stat-cards strong { display: block; margin-top: 7px; color: #facc15; font-size: 25px; }
.aiml-level-four-page .aiml-bayes-stat-cards p { margin: 5px 0 0; color: #8fa9bf; font-size: 11px; }
.aiml-level-four-page .aiml-posterior-stage { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; color: #fff; }
.aiml-level-four-page .aiml-posterior-stage span { min-width: 125px; padding: 16px; border: 1px solid #315471; border-radius: 13px; background: #0a2138; color: #9bc3e5; font-size: 9px; font-weight: 900; text-align: center; letter-spacing: .08em; }
.aiml-level-four-page .aiml-posterior-stage span strong { display: block; margin-top: 8px; color: #fff; font-size: 30px; }
.aiml-level-four-page .aiml-posterior-stage b { color: #facc15; font-size: 24px; }
.aiml-level-four-page .aiml-posterior-stage em { padding: 16px; border-radius: 13px; background: #0f7a56; color: #fff; font-size: 28px; font-style: normal; font-weight: 950; }
.aiml-level-four-page .aiml-bayes-lesson { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 15px; width: min(100%, 460px); }
.aiml-level-four-page .aiml-bayes-lesson strong { color: #7dd3fc; font-size: 28px; text-align: right; }
.aiml-level-four-page .aiml-bayes-lesson span { color: #c5d7e7; }
.aiml-level-four-page .aiml-bayes-lesson b { grid-column: 1 / -1; padding: 9px; border-radius: 9px; background: #4b2030; color: #fca5a5; text-align: center; }

@media (max-width: 1180px) {
    .aiml-level-four-page .aiml-probability-hero { grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr); }
    .aiml-level-four-page .aiml-distribution-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .aiml-level-four-page .aiml-probability-object-grid,
    .aiml-level-four-page .aiml-rule-grid,
    .aiml-level-four-page .aiml-bayes-terms,
    .aiml-level-four-page .aiml-summary-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
    .aiml-level-four-page .aiml-probability-hero { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-four-page .aiml-probability-hero-visual { width: calc(100% - 70px); max-width: 720px; margin: 0 auto 34px; }
    .aiml-level-four-page .aiml-test-flow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aiml-level-four-page .aiml-test-flow > b { display: none; }
}

@media (max-width: 700px) {
    .aiml-level-four-page .aiml-probability-hero { display: block; }
    .aiml-level-four-page .aiml-probability-hero-visual { width: calc(100% - 28px); height: 260px; margin: 0 14px 22px; border-radius: 18px; }
    .aiml-level-four-page .aiml-hero-curve { bottom: 58px; height: 157px; }
    .aiml-level-four-page .aiml-hero-curve > i { height: 135px; }
    .aiml-level-four-page .aiml-hero-curve .mean-line { height: 140px; }
    .aiml-level-four-page .aiml-hero-dice { width: 51px; height: 51px; grid-template-columns: repeat(2, 7px); grid-template-rows: repeat(2, 7px); gap: 7px; border-radius: 12px; }
    .aiml-level-four-page .aiml-hero-chance { right: 8px; bottom: 8px; left: 8px; justify-content: center; font-size: 8px; }
    .aiml-level-four-page .aiml-probability-object-grid,
    .aiml-level-four-page .aiml-rule-grid,
    .aiml-level-four-page .aiml-bayes-terms,
    .aiml-level-four-page .aiml-summary-stat-grid,
    .aiml-level-four-page .aiml-rv-grid,
    .aiml-level-four-page .aiml-moment-grid,
    .aiml-level-four-page .aiml-error-grid,
    .aiml-level-four-page .aiml-estimation-grid,
    .aiml-level-four-page .aiml-distribution-grid,
    .aiml-level-four-page .aiml-experiment-grid,
    .aiml-level-four-page .aiml-law-grid,
    .aiml-level-four-page .aiml-conditional-layout,
    .aiml-level-four-page .aiml-covariance-layout,
    .aiml-level-four-page .aiml-test-flow { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-four-page .aiml-probability-object-grid article,
    .aiml-level-four-page .aiml-rule-grid article,
    .aiml-level-four-page .aiml-bayes-terms article,
    .aiml-level-four-page .aiml-summary-stat-grid article,
    .aiml-level-four-page .aiml-rv-grid article,
    .aiml-level-four-page .aiml-moment-grid article,
    .aiml-level-four-page .aiml-error-grid article,
    .aiml-level-four-page .aiml-estimation-grid article,
    .aiml-level-four-page .aiml-distribution-grid article,
    .aiml-level-four-page .aiml-experiment-grid article,
    .aiml-level-four-page .aiml-law-grid article { width: 100%; min-width: 0; padding: 17px; }
    .aiml-level-four-page .aiml-equation-banner { grid-template-columns: minmax(0, 1fr); gap: 10px; text-align: center; }
    .aiml-level-four-page .aiml-equation-banner code { justify-self: stretch; overflow-wrap: anywhere; white-space: normal; }
    .aiml-level-four-page .aiml-equation-banner span { text-align: center; }
    .aiml-level-four-page .aiml-bayes-equation { align-items: stretch; flex-direction: column; padding: 17px; text-align: center; }
    .aiml-level-four-page .aiml-bayes-equation > div { width: 100%; }
    .aiml-level-four-page .aiml-sampling-flow { flex-direction: column; }
    .aiml-level-four-page .aiml-sampling-flow > b { transform: rotate(90deg); text-align: center; }
    .aiml-level-four-page .aiml-correlation-scale { grid-template-columns: auto 1fr auto 1fr auto; padding: 15px 10px; gap: 7px; }
    .aiml-level-four-page .aiml-correlation-scale small { font-size: 8px; }
    .aiml-level-four-page .aiml-ci-visual { grid-template-columns: auto 1fr auto 1fr auto; padding: 17px 10px; gap: 5px; }
    .aiml-level-four-page .aiml-ci-visual span { font-size: 8px; }
    .aiml-level-four-page .aiml-interpretation-note { flex-direction: column; gap: 7px; }
    .aiml-level-four-page .aiml-bayes-stage { min-height: 320px; padding: 16px 10px; }
    .aiml-level-four-page .aiml-frequency-grid { grid-template-columns: repeat(10, 14px); gap: 4px; }
    .aiml-level-four-page .aiml-frequency-grid i { width: 14px; height: 14px; border-radius: 3px; }
    .aiml-level-four-page .aiml-bayes-stat-cards { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-four-page .aiml-bayes-stat-cards article { padding: 13px; }
    .aiml-level-four-page .aiml-posterior-stage { gap: 7px; }
    .aiml-level-four-page .aiml-posterior-stage span { min-width: 100px; padding: 12px; }
    .aiml-level-four-page .aiml-posterior-stage span strong { font-size: 24px; }
    .aiml-level-four-page .aiml-posterior-stage em { width: 100%; padding: 12px; text-align: center; }
    .aiml-level-four-page .aiml-bayes-lesson { grid-template-columns: minmax(0, 1fr); text-align: center; }
    .aiml-level-four-page .aiml-bayes-lesson strong { text-align: center; }
}

/* =========================================================
   AI & ML Level 05 — Data Preparation, EDA & Features
   ========================================================= */
.aiml-level-five-page .aiml-data-hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(470px, .85fr);
}

.aiml-level-five-page .aiml-data-hero-visual {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(145px, 1fr) 90px minmax(160px, 1fr);
    align-items: center;
    gap: 13px;
    width: calc(100% - 40px);
    min-height: 365px;
    margin: 24px 32px 24px 8px;
    padding: 27px 20px 52px;
    overflow: hidden;
    border: 1px solid rgba(101, 183, 237, .34);
    border-radius: 28px;
    background:
        linear-gradient(rgba(92, 167, 219, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(92, 167, 219, .08) 1px, transparent 1px),
        radial-gradient(circle at 70% 45%, rgba(22, 163, 116, .2), transparent 46%),
        #05182b;
    background-size: 32px 32px, 32px 32px, auto, auto;
}

.aiml-level-five-page .aiml-hero-data-card {
    min-width: 0;
    padding: 13px;
    border: 1px solid #315675;
    border-radius: 15px;
    background: rgba(5, 22, 39, .94);
    box-shadow: 0 13px 30px rgba(0, 0, 0, .2);
}

.aiml-level-five-page .aiml-hero-data-card > span {
    display: block;
    margin-bottom: 9px;
    color: #7dd3fc;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .1em;
}

.aiml-level-five-page .aiml-hero-data-card.ready {
    border-color: #237b61;
    background: rgba(6, 40, 36, .94);
}

.aiml-level-five-page .aiml-hero-data-card.ready > span { color: #6ee7b7; }
.aiml-level-five-page .aiml-hero-data-card i {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 4px;
    overflow: hidden;
    border-radius: 6px;
    background: #102a44;
    font-style: normal;
}
.aiml-level-five-page .aiml-hero-data-card.ready i { background: #0f392f; }
.aiml-level-five-page .aiml-hero-data-card b,
.aiml-level-five-page .aiml-hero-data-card em {
    min-width: 0;
    padding: 6px 3px;
    overflow: hidden;
    color: #d8e9f7;
    font: 750 9px/1.2 "SFMono-Regular", Consolas, monospace;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aiml-level-five-page .aiml-hero-data-card b { color: #8fc7f1; }
.aiml-level-five-page .aiml-hero-data-card em { font-style: normal; }

.aiml-level-five-page .aiml-hero-pipeline {
    display: grid;
    gap: 8px;
}
.aiml-level-five-page .aiml-hero-pipeline span {
    position: relative;
    padding: 8px 4px;
    border: 1px solid #315675;
    border-radius: 8px;
    background: #0c2945;
    color: #facc15;
    font-size: 8px;
    font-weight: 950;
    text-align: center;
    letter-spacing: .05em;
}
.aiml-level-five-page .aiml-hero-pipeline span:not(:last-child)::after {
    position: absolute;
    right: 0;
    bottom: -9px;
    left: 0;
    color: #71bde8;
    content: "↓";
}

.aiml-level-five-page .aiml-quality-seal {
    position: absolute;
    right: 20px;
    bottom: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #86efac;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .09em;
}
.aiml-level-five-page .aiml-quality-seal strong {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    background: #11845e;
    color: #fff;
}

.aiml-level-five-page .aiml-data-revision-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aiml-level-five-page .aiml-data-revision-grid article { min-height: 165px; }

.aiml-level-five-page .aiml-quality-grid,
.aiml-level-five-page .aiml-leakage-types,
.aiml-level-five-page .aiml-missing-grid,
.aiml-level-five-page .aiml-cleaning-grid,
.aiml-level-five-page .aiml-scaling-grid,
.aiml-level-five-page .aiml-encoding-grid,
.aiml-level-five-page .aiml-eda-grid,
.aiml-level-five-page .aiml-eda-question-grid,
.aiml-level-five-page .aiml-imbalance-grid,
.aiml-level-five-page .aiml-feature-grid,
.aiml-level-five-page .aiml-selection-grid,
.aiml-level-five-page .aiml-pipeline-benefits,
.aiml-level-five-page .aiml-validation-grid {
    display: grid;
    gap: 14px;
}

.aiml-level-five-page .aiml-quality-grid,
.aiml-level-five-page .aiml-eda-grid,
.aiml-level-five-page .aiml-imbalance-grid,
.aiml-level-five-page .aiml-feature-grid,
.aiml-level-five-page .aiml-selection-grid,
.aiml-level-five-page .aiml-validation-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aiml-level-five-page .aiml-leakage-types,
.aiml-level-five-page .aiml-cleaning-grid,
.aiml-level-five-page .aiml-scaling-grid,
.aiml-level-five-page .aiml-encoding-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.aiml-level-five-page .aiml-missing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aiml-level-five-page .aiml-eda-question-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 15px; }
.aiml-level-five-page .aiml-pipeline-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.aiml-level-five-page .aiml-quality-grid article,
.aiml-level-five-page .aiml-leakage-types article,
.aiml-level-five-page .aiml-missing-grid article,
.aiml-level-five-page .aiml-cleaning-grid article,
.aiml-level-five-page .aiml-scaling-grid article,
.aiml-level-five-page .aiml-encoding-grid article,
.aiml-level-five-page .aiml-eda-grid article,
.aiml-level-five-page .aiml-imbalance-grid article,
.aiml-level-five-page .aiml-feature-grid article,
.aiml-level-five-page .aiml-selection-grid article,
.aiml-level-five-page .aiml-pipeline-benefits article,
.aiml-level-five-page .aiml-validation-grid article {
    min-width: 0;
    padding: 21px;
    border: 1px solid #d6e3ef;
    border-radius: 16px;
    background: linear-gradient(145deg, #fff, #f6f9fd);
    box-shadow: 0 8px 24px rgba(7, 29, 59, .05);
}

.aiml-level-five-page .aiml-quality-grid article > span,
.aiml-level-five-page .aiml-leakage-types article > span,
.aiml-level-five-page .aiml-missing-grid article > span,
.aiml-level-five-page .aiml-cleaning-grid article > span,
.aiml-level-five-page .aiml-scaling-grid article > span,
.aiml-level-five-page .aiml-eda-grid article > span,
.aiml-level-five-page .aiml-feature-grid article > span,
.aiml-level-five-page .aiml-selection-grid article > span,
.aiml-level-five-page .aiml-validation-grid article > span {
    display: block;
    margin-bottom: 9px;
    color: var(--aiml-blue-700);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .1em;
}

.aiml-level-five-page .aiml-cleaning-grid article > span,
.aiml-level-five-page .aiml-pipeline-benefits article > span {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    background: #dceaff;
    color: var(--aiml-blue-700);
    font-size: 10px;
    font-weight: 950;
}

.aiml-level-five-page .aiml-quality-grid strong,
.aiml-level-five-page .aiml-missing-grid strong,
.aiml-level-five-page .aiml-cleaning-grid strong,
.aiml-level-five-page .aiml-scaling-grid strong,
.aiml-level-five-page .aiml-eda-grid strong,
.aiml-level-five-page .aiml-imbalance-grid strong,
.aiml-level-five-page .aiml-feature-grid strong,
.aiml-level-five-page .aiml-selection-grid strong,
.aiml-level-five-page .aiml-pipeline-benefits strong,
.aiml-level-five-page .aiml-validation-grid strong {
    display: block;
    color: var(--aiml-heading);
    font-size: 17px;
    line-height: 1.4;
    overflow-wrap: break-word;
}

.aiml-level-five-page .aiml-quality-grid p,
.aiml-level-five-page .aiml-leakage-types p,
.aiml-level-five-page .aiml-missing-grid p,
.aiml-level-five-page .aiml-cleaning-grid p,
.aiml-level-five-page .aiml-scaling-grid p,
.aiml-level-five-page .aiml-encoding-grid p,
.aiml-level-five-page .aiml-eda-grid p,
.aiml-level-five-page .aiml-imbalance-grid p,
.aiml-level-five-page .aiml-feature-grid p,
.aiml-level-five-page .aiml-selection-grid p,
.aiml-level-five-page .aiml-pipeline-benefits p,
.aiml-level-five-page .aiml-validation-grid p {
    margin: 8px 0 0;
    color: var(--aiml-slate-600);
    font-size: 14px;
}

.aiml-level-five-page .aiml-equation-banner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
    padding: 16px 19px;
    border-radius: 14px;
    background: #07182c;
    color: #cfe0ee;
}
.aiml-level-five-page .aiml-equation-banner strong { color: #ffe274; }
.aiml-level-five-page .aiml-equation-banner code { justify-self: center; padding: 8px 12px; background: #102c49; color: #7dd3fc; }
.aiml-level-five-page .aiml-equation-banner span { color: #a9c2d8; font-size: 13px; text-align: right; }

.aiml-level-five-page .aiml-leakage-flow {
    display: flex;
    align-items: stretch;
    gap: 8px;
}
.aiml-level-five-page .aiml-leakage-flow article {
    flex: 1 1 0;
    min-width: 0;
    padding: 20px;
    border: 1px solid #cedfee;
    border-radius: 15px;
    background: #fff;
    box-shadow: var(--aiml-shadow);
}
.aiml-level-five-page .aiml-leakage-flow > b { align-self: center; color: var(--aiml-gold); font-size: 21px; }
.aiml-level-five-page .aiml-leakage-flow span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    background: var(--aiml-blue-600);
    color: #fff;
    font-weight: 900;
}
.aiml-level-five-page .aiml-leakage-flow strong { display: block; margin-top: 10px; color: var(--aiml-heading); font-size: 17px; }
.aiml-level-five-page .aiml-leakage-flow p { margin: 7px 0 0; color: var(--aiml-slate-600); font-size: 14px; }
.aiml-level-five-page .aiml-leakage-types { margin-top: 15px; }
.aiml-level-five-page .aiml-leakage-types article { padding: 17px; border-top: 3px solid #ef6a62; }
.aiml-level-five-page .aiml-leakage-types article > span { color: #b42318; }

.aiml-level-five-page .aiml-method-table {
    margin-top: 18px;
    overflow-x: auto;
    border: 1px solid #cdddea;
    border-radius: 15px;
}
.aiml-level-five-page .aiml-method-table > div {
    display: grid;
    grid-template-columns: .8fr 1.1fr 1.1fr;
    min-width: 680px;
    border-bottom: 1px solid #dae5ee;
}
.aiml-level-five-page .aiml-method-table > div:last-child { border-bottom: 0; }
.aiml-level-five-page .aiml-method-table > div:first-child { background: #0b2541; color: #fff; }
.aiml-level-five-page .aiml-method-table strong,
.aiml-level-five-page .aiml-method-table span { padding: 14px 16px; border-right: 1px solid #dae5ee; }
.aiml-level-five-page .aiml-method-table strong:last-child,
.aiml-level-five-page .aiml-method-table span:last-child { border-right: 0; }
.aiml-level-five-page .aiml-method-table span { color: #38536e; font-size: 14px; }

.aiml-level-five-page .aiml-inline-code {
    margin: 18px 0 0;
    padding: 20px;
    overflow: auto;
    border: 1px solid #29445e;
    border-radius: 15px;
    background: #07182c;
    color: #e7f2ff;
    font: 14px/1.8 "SFMono-Regular", Consolas, monospace;
}

.aiml-level-five-page .aiml-outlier-layout {
    display: grid;
    grid-template-columns: minmax(340px, .85fr) minmax(0, 1.15fr);
    gap: 18px;
    align-items: stretch;
}
.aiml-level-five-page .aiml-boxplot-visual {
    position: relative;
    min-height: 260px;
    overflow: hidden;
    border: 1px solid #cbddea;
    border-radius: 17px;
    background: linear-gradient(rgba(28, 85, 131, .07) 1px, transparent 1px), #f7fbff;
    background-size: 100% 32px;
}
.aiml-level-five-page .aiml-boxplot-visual::before {
    position: absolute;
    top: 125px;
    right: 45px;
    left: 42px;
    height: 3px;
    background: #587998;
    content: "";
}
.aiml-level-five-page .aiml-boxplot-visual span {
    position: absolute;
    top: 90px;
    z-index: 2;
    display: grid;
    width: 70px;
    height: 74px;
    place-items: center;
    border: 3px solid #3183ce;
    background: #eaf4ff;
    color: var(--aiml-blue-700);
    font-weight: 900;
}
.aiml-level-five-page .aiml-boxplot-visual span:first-of-type { left: 30%; border-right: 0; }
.aiml-level-five-page .aiml-boxplot-visual span:last-of-type { left: calc(30% + 70px); border-left: 0; }
.aiml-level-five-page .aiml-boxplot-visual i {
    position: absolute;
    top: 107px;
    width: 3px;
    height: 40px;
    background: #587998;
}
.aiml-level-five-page .aiml-boxplot-visual i:first-of-type { left: 42px; }
.aiml-level-five-page .aiml-boxplot-visual i:last-of-type { right: 45px; }
.aiml-level-five-page .aiml-boxplot-visual strong {
    position: absolute;
    top: 76px;
    left: calc(30% + 65px);
    z-index: 3;
    height: 103px;
    padding: 2px 6px;
    border-left: 4px solid #d4af37;
    color: #8a6400;
    font-size: 9px;
}
.aiml-level-five-page .aiml-boxplot-visual b {
    position: absolute;
    top: 117px;
    right: 20px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ef5f5f;
}
.aiml-level-five-page .aiml-boxplot-visual em { position: absolute; top: 145px; right: 7px; color: #a92323; font-size: 9px; font-style: normal; font-weight: 900; }
.aiml-level-five-page .aiml-outlier-methods { display: grid; gap: 10px; }
.aiml-level-five-page .aiml-outlier-methods article { padding: 17px; border: 1px solid #d5e2ee; border-radius: 13px; background: #f8fbff; }
.aiml-level-five-page .aiml-outlier-methods span { color: var(--aiml-blue-700); font-size: 9px; font-weight: 950; letter-spacing: .09em; }
.aiml-level-five-page .aiml-outlier-methods strong { display: block; margin-top: 6px; color: var(--aiml-heading); font-size: 15px; }
.aiml-level-five-page .aiml-outlier-methods p { margin: 5px 0 0; color: var(--aiml-slate-600); font-size: 13px; }
.aiml-level-five-page .aiml-decision-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 17px;
    padding: 14px;
    border-radius: 12px;
    background: #07182c;
}
.aiml-level-five-page .aiml-decision-strip span { padding: 8px 10px; border: 1px solid #315471; border-radius: 8px; color: #d7e8f5; font-size: 10px; font-weight: 900; }
.aiml-level-five-page .aiml-decision-strip b { color: #facc15; }

.aiml-level-five-page .aiml-model-scaling-map {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 15px;
}
.aiml-level-five-page .aiml-model-scaling-map span { padding: 15px; border-radius: 12px; background: #eaf4ff; color: #31516f; }
.aiml-level-five-page .aiml-model-scaling-map span:last-child { background: #ecfdf3; }
.aiml-level-five-page .aiml-model-scaling-map b { display: block; margin-bottom: 4px; color: var(--aiml-heading); }

.aiml-level-five-page .aiml-encoding-grid article { text-align: left; }
.aiml-level-five-page .aiml-encoding-grid h3 { margin: 16px 0 7px; color: var(--aiml-heading); font-size: 18px; }
.aiml-level-five-page .aiml-encoding-demo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    min-height: 105px;
    align-content: center;
    padding: 11px;
    border-radius: 12px;
    background: #07182c;
    text-align: center;
}
.aiml-level-five-page .aiml-encoding-demo span,
.aiml-level-five-page .aiml-encoding-demo strong { padding: 6px; border-radius: 6px; background: #12304d; color: #b9d5eb; font-size: 9px; }
.aiml-level-five-page .aiml-encoding-demo strong { background: #123b31; color: #7cf0bf; }
.aiml-level-five-page .aiml-encoding-demo i { grid-column: 1 / -1; color: #facc15; font-style: normal; }
.aiml-level-five-page .aiml-encoding-demo.ordinal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aiml-level-five-page .aiml-encoding-demo.ordinal i,
.aiml-level-five-page .aiml-encoding-demo.ordinal strong { grid-column: 1 / -1; }

.aiml-level-five-page .aiml-eda-grid article { padding-top: 16px; }
.aiml-level-five-page .aiml-histogram,
.aiml-level-five-page .aiml-scatter,
.aiml-level-five-page .aiml-heatmap {
    position: relative;
    height: 130px;
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid #d7e3ed;
    border-radius: 11px;
    background: linear-gradient(#edf3f8 1px, transparent 1px), linear-gradient(90deg, #edf3f8 1px, transparent 1px), #fff;
    background-size: 25px 25px;
}
.aiml-level-five-page .aiml-histogram { display: flex; align-items: flex-end; justify-content: center; gap: 5px; padding: 18px; }
.aiml-level-five-page .aiml-histogram i { width: 11%; border-radius: 4px 4px 0 0; background: #3183ce; }
.aiml-level-five-page .aiml-histogram i:nth-child(1),
.aiml-level-five-page .aiml-histogram i:nth-child(6) { height: 23%; }
.aiml-level-five-page .aiml-histogram i:nth-child(2),
.aiml-level-five-page .aiml-histogram i:nth-child(5) { height: 52%; }
.aiml-level-five-page .aiml-histogram i:nth-child(3) { height: 83%; }
.aiml-level-five-page .aiml-histogram i:nth-child(4) { height: 67%; background: #d4af37; }
.aiml-level-five-page .aiml-scatter i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #257bd0; }
.aiml-level-five-page .aiml-scatter i:nth-child(1) { left: 13%; bottom: 18%; }
.aiml-level-five-page .aiml-scatter i:nth-child(2) { left: 28%; bottom: 34%; }
.aiml-level-five-page .aiml-scatter i:nth-child(3) { left: 43%; bottom: 41%; }
.aiml-level-five-page .aiml-scatter i:nth-child(4) { left: 58%; bottom: 58%; }
.aiml-level-five-page .aiml-scatter i:nth-child(5) { left: 73%; bottom: 68%; }
.aiml-level-five-page .aiml-scatter i:nth-child(6) { left: 84%; bottom: 82%; }
.aiml-level-five-page .aiml-scatter b { position: absolute; right: 8%; bottom: 48%; left: 8%; height: 3px; background: #d4af37; transform: rotate(-24deg); }
.aiml-level-five-page .aiml-heatmap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 18px; }
.aiml-level-five-page .aiml-heatmap i { border-radius: 5px; background: #dceeff; }
.aiml-level-five-page .aiml-heatmap i:nth-child(1),
.aiml-level-five-page .aiml-heatmap i:nth-child(5),
.aiml-level-five-page .aiml-heatmap i:nth-child(9) { background: #195fa9; }
.aiml-level-five-page .aiml-heatmap i:nth-child(3),
.aiml-level-five-page .aiml-heatmap i:nth-child(7) { background: #ef9e89; }
.aiml-level-five-page .aiml-eda-question-grid span { padding: 14px; border-left: 4px solid var(--aiml-blue-600); border-radius: 0 10px 10px 0; background: #eef6ff; color: #2e4d6c; font-size: 13px; font-weight: 750; }

.aiml-level-five-page .aiml-imbalance-visual {
    display: grid;
    grid-template-columns: minmax(0, 19fr) minmax(85px, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
.aiml-level-five-page .aiml-imbalance-visual div { position: relative; min-height: 100px; padding: 20px; overflow: hidden; border-radius: 15px; background: #eaf4ff; }
.aiml-level-five-page .aiml-imbalance-visual div:last-child { background: #fff3d2; }
.aiml-level-five-page .aiml-imbalance-visual span { color: var(--aiml-blue-700); font-size: 10px; font-weight: 950; }
.aiml-level-five-page .aiml-imbalance-visual strong { display: block; color: var(--aiml-heading); font-size: 30px; }
.aiml-level-five-page .aiml-imbalance-visual i { position: absolute; right: 0; bottom: 0; left: 0; height: 7px; background: #3183ce; }
.aiml-level-five-page .aiml-imbalance-visual div:last-child i { background: #d4af37; }

.aiml-level-five-page .aiml-feature-checklist {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 16px;
    padding: 15px;
    border-radius: 13px;
    background: #07182c;
}
.aiml-level-five-page .aiml-feature-checklist strong { margin-right: auto; color: #ffe274; }
.aiml-level-five-page .aiml-feature-checklist span { padding: 7px 10px; border: 1px solid #315471; border-radius: 999px; color: #cce0f0; font-size: 11px; font-weight: 800; }

.aiml-level-five-page .aiml-vif-strip {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    padding: 17px;
    border-radius: 13px;
    background: #07182c;
}
.aiml-level-five-page .aiml-vif-strip > span { color: #7dd3fc; font-size: 10px; font-weight: 950; letter-spacing: .09em; }
.aiml-level-five-page .aiml-vif-strip p { margin: 0; color: #c1d5e6; }
.aiml-level-five-page .aiml-vif-strip code { background: #12304d; color: #ffe274; white-space: nowrap; }

.aiml-level-five-page .aiml-pipeline-code-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr);
    gap: 17px;
}
.aiml-level-five-page .aiml-pipeline-benefits article { padding: 17px; }
.aiml-level-five-page .aiml-pipeline-benefits strong { margin-top: 9px; }

.aiml-level-five-page .aiml-model-ready-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.aiml-level-five-page .aiml-model-ready-flow li {
    display: flex;
    gap: 13px;
    min-width: 0;
    min-height: 130px;
    padding: 18px;
    border: 1px solid #d4e2ee;
    border-radius: 15px;
    background: #fff;
    box-shadow: var(--aiml-shadow);
}
.aiml-level-five-page .aiml-model-ready-flow span {
    display: grid;
    flex: 0 0 37px;
    height: 37px;
    place-items: center;
    border-radius: 10px;
    background: #dceaff;
    color: var(--aiml-blue-700);
    font-size: 10px;
    font-weight: 950;
}
.aiml-level-five-page .aiml-model-ready-flow strong { color: var(--aiml-heading); }
.aiml-level-five-page .aiml-model-ready-flow p { margin: 5px 0 0; color: var(--aiml-slate-600); font-size: 13px; }

/* Level 05 visualizer stages */
.aiml-level-five-page .aiml-data-stage { align-content: center; padding: 24px; }
.aiml-level-five-page .aiml-stage-table { width: min(100%, 470px); overflow: hidden; border: 1px solid #315471; border-radius: 13px; background: #081b2f; }
.aiml-level-five-page .aiml-stage-table > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid #27445f; }
.aiml-level-five-page .aiml-stage-table > div:last-child { border-bottom: 0; }
.aiml-level-five-page .aiml-stage-table > div.head { background: #12304d; }
.aiml-level-five-page .aiml-stage-table span { min-width: 0; padding: 9px 5px; overflow: hidden; border-right: 1px solid #27445f; color: #d6e6f4; font: 750 11px/1.25 "SFMono-Regular", Consolas, monospace; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.aiml-level-five-page .aiml-stage-table span:last-child { border-right: 0; }
.aiml-level-five-page .aiml-stage-table .head span { color: #7dd3fc; font-weight: 900; }
.aiml-level-five-page .aiml-stage-table span.missing { background: #533b0b; color: #fde68a; }
.aiml-level-five-page .aiml-stage-table span.invalid { background: #52242a; color: #fda4af; }
.aiml-level-five-page .aiml-stage-table span.fixed { background: #0f493a; color: #86efac; }
.aiml-level-five-page .aiml-stage-table.clean { border-color: #237b61; }
.aiml-level-five-page .aiml-stage-table.ready { width: min(100%, 540px); }
.aiml-level-five-page .aiml-stage-table.ready > div { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.aiml-level-five-page .aiml-stage-ready-badge { margin-top: 14px; padding: 9px 13px; border: 1px solid #2d8d6c; border-radius: 999px; background: #0d3c31; color: #86efac; font-size: 10px; font-weight: 950; letter-spacing: .08em; }

.aiml-level-five-page .aiml-stage-split {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: min(100%, 520px);
}
.aiml-level-five-page .aiml-stage-split span { padding: 18px 10px; border: 1px solid #315471; border-radius: 12px; background: #102a45; color: #9ac9ed; font-size: 9px; font-weight: 900; text-align: center; letter-spacing: .06em; }
.aiml-level-five-page .aiml-stage-split span:first-child { grid-column: 1 / -1; }
.aiml-level-five-page .aiml-stage-split span strong { display: block; margin-top: 6px; color: #fff; font-size: 25px; }
.aiml-level-five-page .aiml-stage-split b { grid-column: 1 / -1; color: #facc15; text-align: center; }
.aiml-level-five-page .aiml-stage-split .train { border-color: #208565; background: #0e3b31; }
.aiml-level-five-page .aiml-stage-split .validation { border-color: #8b6d21; background: #41310c; }
.aiml-level-five-page .aiml-stage-split .test { border-color: #9a4650; background: #452127; }

.aiml-level-five-page .aiml-stage-audit {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: min(100%, 470px);
}
.aiml-level-five-page .aiml-stage-audit article { min-width: 0; padding: 16px; border: 1px solid #315471; border-radius: 12px; background: #0a2138; }
.aiml-level-five-page .aiml-stage-audit span { color: #8bb8dc; font-size: 9px; font-weight: 950; letter-spacing: .08em; }
.aiml-level-five-page .aiml-stage-audit strong { display: block; margin: 5px 0; color: #facc15; font-size: 25px; }
.aiml-level-five-page .aiml-stage-audit i { color: #b7ccdd; font-size: 10px; font-style: normal; }

.aiml-level-five-page .aiml-stage-transform { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; width: min(100%, 560px); }
.aiml-level-five-page .aiml-stage-transform span { min-width: 135px; padding: 15px; border: 1px solid #315471; border-radius: 12px; background: #0a2138; color: #7dd3fc; font-weight: 900; text-align: center; }
.aiml-level-five-page .aiml-stage-transform span strong { display: block; margin-top: 6px; color: #fff; font-size: 10px; }
.aiml-level-five-page .aiml-stage-transform b { color: #facc15; font-size: 20px; }
.aiml-level-five-page .aiml-stage-transform i { width: 100%; padding: 11px; border-radius: 10px; background: #0d3c31; color: #86efac; font-style: normal; font-weight: 900; text-align: center; }

.aiml-level-five-page .aiml-stage-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: min(100%, 510px); }
.aiml-level-five-page .aiml-stage-checks span { padding: 14px; border: 1px solid #287b60; border-radius: 11px; background: #0d352d; color: #8ef0c4; font-size: 11px; font-weight: 800; }

@media (max-width: 1250px) {
    .aiml-level-five-page .aiml-data-hero { grid-template-columns: minmax(0, 1.1fr) minmax(390px, .9fr); }
    .aiml-level-five-page .aiml-quality-grid,
    .aiml-level-five-page .aiml-feature-grid,
    .aiml-level-five-page .aiml-validation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aiml-level-five-page .aiml-leakage-types,
    .aiml-level-five-page .aiml-cleaning-grid,
    .aiml-level-five-page .aiml-scaling-grid,
    .aiml-level-five-page .aiml-encoding-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1050px) {
    .aiml-level-five-page .aiml-data-hero { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-five-page .aiml-data-hero-visual { width: calc(100% - 70px); max-width: 760px; margin: 0 auto 34px; }
    .aiml-level-five-page .aiml-leakage-flow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aiml-level-five-page .aiml-leakage-flow > b { display: none; }
    .aiml-level-five-page .aiml-model-ready-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aiml-level-five-page .aiml-pipeline-code-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
    .aiml-level-five-page .aiml-data-hero { display: block; }
    .aiml-level-five-page .aiml-data-hero-visual {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        width: calc(100% - 28px);
        min-height: 0;
        margin: 0 14px 22px;
        padding: 15px 14px 49px;
        border-radius: 18px;
    }
    .aiml-level-five-page .aiml-hero-data-card { width: 100%; }
    .aiml-level-five-page .aiml-hero-pipeline { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
    .aiml-level-five-page .aiml-hero-pipeline span { padding: 7px 2px; font-size: 7px; }
    .aiml-level-five-page .aiml-hero-pipeline span:not(:last-child)::after { display: none; }
    .aiml-level-five-page .aiml-quality-seal { right: 14px; }
    .aiml-level-five-page .aiml-data-revision-grid,
    .aiml-level-five-page .aiml-quality-grid,
    .aiml-level-five-page .aiml-leakage-types,
    .aiml-level-five-page .aiml-missing-grid,
    .aiml-level-five-page .aiml-cleaning-grid,
    .aiml-level-five-page .aiml-scaling-grid,
    .aiml-level-five-page .aiml-encoding-grid,
    .aiml-level-five-page .aiml-eda-grid,
    .aiml-level-five-page .aiml-eda-question-grid,
    .aiml-level-five-page .aiml-imbalance-grid,
    .aiml-level-five-page .aiml-feature-grid,
    .aiml-level-five-page .aiml-selection-grid,
    .aiml-level-five-page .aiml-pipeline-benefits,
    .aiml-level-five-page .aiml-validation-grid,
    .aiml-level-five-page .aiml-model-ready-flow,
    .aiml-level-five-page .aiml-leakage-flow,
    .aiml-level-five-page .aiml-model-scaling-map {
        grid-template-columns: minmax(0, 1fr);
    }
    .aiml-level-five-page .aiml-quality-grid article,
    .aiml-level-five-page .aiml-leakage-types article,
    .aiml-level-five-page .aiml-missing-grid article,
    .aiml-level-five-page .aiml-cleaning-grid article,
    .aiml-level-five-page .aiml-scaling-grid article,
    .aiml-level-five-page .aiml-encoding-grid article,
    .aiml-level-five-page .aiml-eda-grid article,
    .aiml-level-five-page .aiml-imbalance-grid article,
    .aiml-level-five-page .aiml-feature-grid article,
    .aiml-level-five-page .aiml-selection-grid article,
    .aiml-level-five-page .aiml-pipeline-benefits article,
    .aiml-level-five-page .aiml-validation-grid article { width: 100%; min-width: 0; padding: 17px; }
    .aiml-level-five-page .aiml-equation-banner { grid-template-columns: minmax(0, 1fr); gap: 10px; text-align: center; }
    .aiml-level-five-page .aiml-equation-banner code { justify-self: stretch; overflow-wrap: anywhere; white-space: normal; }
    .aiml-level-five-page .aiml-equation-banner span { text-align: center; }
    .aiml-level-five-page .aiml-leakage-flow > b { display: block; transform: rotate(90deg); text-align: center; }
    .aiml-level-five-page .aiml-outlier-layout { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-five-page .aiml-boxplot-visual { min-height: 220px; }
    .aiml-level-five-page .aiml-boxplot-visual span:first-of-type { left: 23%; }
    .aiml-level-five-page .aiml-boxplot-visual span:last-of-type { left: calc(23% + 60px); }
    .aiml-level-five-page .aiml-boxplot-visual span { width: 60px; }
    .aiml-level-five-page .aiml-boxplot-visual strong { left: calc(23% + 55px); }
    .aiml-level-five-page .aiml-decision-strip { gap: 6px; }
    .aiml-level-five-page .aiml-feature-checklist { align-items: stretch; flex-direction: column; }
    .aiml-level-five-page .aiml-feature-checklist strong { margin-right: 0; }
    .aiml-level-five-page .aiml-vif-strip { grid-template-columns: minmax(0, 1fr); text-align: center; }
    .aiml-level-five-page .aiml-vif-strip code { white-space: normal; }
    .aiml-level-five-page .aiml-imbalance-visual { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-five-page .aiml-imbalance-visual div { min-height: 85px; }
    .aiml-level-five-page .aiml-inline-code { padding: 15px; font-size: 12px; }
    .aiml-level-five-page .aiml-data-stage { min-height: 315px; padding: 15px 9px; }
    .aiml-level-five-page .aiml-stage-table span { padding: 8px 3px; font-size: 9px; }
    .aiml-level-five-page .aiml-stage-split { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-five-page .aiml-stage-split span:first-child,
    .aiml-level-five-page .aiml-stage-split b { grid-column: auto; }
    .aiml-level-five-page .aiml-stage-split b { transform: rotate(90deg); }
    .aiml-level-five-page .aiml-stage-audit,
    .aiml-level-five-page .aiml-stage-checks { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-five-page .aiml-stage-audit article,
    .aiml-level-five-page .aiml-stage-checks span { padding: 11px; }
    .aiml-level-five-page .aiml-stage-transform { flex-direction: column; }
    .aiml-level-five-page .aiml-stage-transform span { width: 100%; min-width: 0; }
    .aiml-level-five-page .aiml-stage-transform b { transform: rotate(90deg); }
}

/* =========================================================
   LEVEL 07 — LOGISTIC REGRESSION & CLASSIFICATION
   ========================================================= */
.aiml-level-seven-page .aiml-classification-hero {
    grid-template-columns: minmax(0, 1.12fr) minmax(410px, .88fr);
    background:
        radial-gradient(circle at 82% 20%, rgba(27, 187, 208, .2), transparent 27%),
        linear-gradient(125deg, #06182d 0%, #0b2e50 57%, #26306b 100%);
}
.aiml-level-seven-page .aiml-classification-hero-visual {
    position: relative;
    align-self: center;
    min-width: 0;
    min-height: 390px;
    margin: 0 38px 0 0;
    overflow: hidden;
    border: 1px solid #315b80;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(32, 179, 215, .12) 0 49.5%, rgba(72, 99, 214, .18) 50% 100%), #061a2d;
    box-shadow: inset 0 0 70px rgba(23, 116, 181, .13), 0 24px 60px rgba(0, 0, 0, .22);
}
.aiml-level-seven-page .aiml-boundary-plane { position: absolute; inset: 38px 32px 46px 42px; border-bottom: 3px solid #7794aa; border-left: 3px solid #7794aa; background: linear-gradient(rgba(78, 130, 166, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(78, 130, 166, .14) 1px, transparent 1px); background-size: 44px 44px; }
.aiml-level-seven-page .aiml-boundary-plane > b { position: absolute; top: -8%; bottom: -2%; left: 52%; width: 6px; border-radius: 99px; background: #facc15; box-shadow: 0 0 17px rgba(250, 204, 21, .5); transform: rotate(-39deg); }
.aiml-level-seven-page .aiml-boundary-plane > i { position: absolute; left: var(--x); bottom: var(--y); width: 15px; height: 15px; border: 3px solid #e9f8ff; transform: translate(-50%, 50%); }
.aiml-level-seven-page .aiml-boundary-plane > i.zero { border-radius: 50%; background: #22c1dd; box-shadow: 0 0 13px rgba(34, 193, 221, .75); }
.aiml-level-seven-page .aiml-boundary-plane > i.one { background: #6d68f0; box-shadow: 0 0 13px rgba(109, 104, 240, .75); transform: translate(-50%, 50%) rotate(45deg); }
.aiml-level-seven-page .aiml-boundary-plane .region { position: absolute; color: #b8d4e7; font-size: 9px; font-weight: 950; letter-spacing: .1em; }
.aiml-level-seven-page .aiml-boundary-plane .region.zero { bottom: 8px; left: 10px; }
.aiml-level-seven-page .aiml-boundary-plane .region.one { top: 8px; right: 10px; }
.aiml-level-seven-page .aiml-probability-badge { position: absolute; right: 18px; bottom: 18px; z-index: 5; min-width: 230px; padding: 15px 18px; border: 1px solid #315b80; border-radius: 15px; background: rgba(4, 18, 34, .95); }
.aiml-level-seven-page .aiml-probability-badge span { display: block; color: #67e8f9; font-size: 9px; font-weight: 950; letter-spacing: .11em; }
.aiml-level-seven-page .aiml-probability-badge strong { display: block; margin: 7px 0; color: #fff; font: 800 17px/1.25 monospace; }
.aiml-level-seven-page .aiml-probability-badge em { color: #facc15; font-size: 10px; font-style: normal; font-weight: 900; }

.aiml-level-seven-page .aiml-class-usecases,
.aiml-level-seven-page .aiml-odds-grid,
.aiml-level-seven-page .aiml-class-metric-grid,
.aiml-level-seven-page .aiml-imbalance-actions,
.aiml-level-seven-page .aiml-multiclass-grid,
.aiml-level-seven-page .aiml-logistic-gradient { display: grid; gap: 13px; }
.aiml-level-seven-page .aiml-class-usecases,
.aiml-level-seven-page .aiml-imbalance-actions,
.aiml-level-seven-page .aiml-logistic-gradient { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.aiml-level-seven-page .aiml-odds-grid,
.aiml-level-seven-page .aiml-multiclass-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aiml-level-seven-page .aiml-class-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aiml-level-seven-page .aiml-class-usecases article,
.aiml-level-seven-page .aiml-odds-grid article,
.aiml-level-seven-page .aiml-class-metric-grid article,
.aiml-level-seven-page .aiml-imbalance-actions article,
.aiml-level-seven-page .aiml-multiclass-grid article,
.aiml-level-seven-page .aiml-logistic-gradient article,
.aiml-level-seven-page .aiml-note-grid article { min-width: 0; padding: 20px; border: 1px solid #d4e2ee; border-radius: 15px; background: #fff; box-shadow: 0 12px 28px rgba(26, 62, 96, .07); }
.aiml-level-seven-page .aiml-class-usecases article { text-align: center; }
.aiml-level-seven-page .aiml-class-usecases article > span { display: block; margin-bottom: 9px; font-size: 30px; }
.aiml-level-seven-page .aiml-class-usecases strong,
.aiml-level-seven-page .aiml-odds-grid strong,
.aiml-level-seven-page .aiml-class-metric-grid strong,
.aiml-level-seven-page .aiml-imbalance-actions strong,
.aiml-level-seven-page .aiml-multiclass-grid strong,
.aiml-level-seven-page .aiml-note-grid strong { color: var(--aiml-heading); }
.aiml-level-seven-page .aiml-class-usecases p,
.aiml-level-seven-page .aiml-odds-grid p,
.aiml-level-seven-page .aiml-class-metric-grid p,
.aiml-level-seven-page .aiml-imbalance-actions p,
.aiml-level-seven-page .aiml-multiclass-grid p,
.aiml-level-seven-page .aiml-logistic-gradient p,
.aiml-level-seven-page .aiml-note-grid p { margin: 7px 0 0; color: var(--aiml-slate-600); font-size: 13px; }
.aiml-level-seven-page .aiml-odds-grid span,
.aiml-level-seven-page .aiml-class-metric-grid span,
.aiml-level-seven-page .aiml-imbalance-actions span,
.aiml-level-seven-page .aiml-multiclass-grid span,
.aiml-level-seven-page .aiml-logistic-gradient span { color: var(--aiml-blue-700); font-size: 10px; font-weight: 950; letter-spacing: .08em; }
.aiml-level-seven-page .aiml-odds-grid code,
.aiml-level-seven-page .aiml-class-metric-grid code,
.aiml-level-seven-page .aiml-multiclass-grid code,
.aiml-level-seven-page .aiml-logistic-gradient code { display: block; margin: 11px 0 5px; overflow-wrap: anywhere; background: #edf5fb; color: #075dad; white-space: normal; }
.aiml-level-seven-page .aiml-equation-banner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 17px; margin-top: 17px; padding: 17px 20px; border-radius: 14px; background: #07182c; }
.aiml-level-seven-page .aiml-equation-banner strong { color: #7dd3fc; }
.aiml-level-seven-page .aiml-equation-banner code { justify-self: center; background: #12304d; color: #ffe274; text-align: center; }
.aiml-level-seven-page .aiml-equation-banner span { color: #b9ccdd; font-size: 12px; font-weight: 750; text-align: right; }

.aiml-level-seven-page .aiml-sigmoid-layout,
.aiml-level-seven-page .aiml-calibration-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.aiml-level-seven-page .aiml-sigmoid-curve { position: relative; min-height: 270px; overflow: hidden; border: 1px solid #d1e1ee; border-radius: 17px; background: linear-gradient(#e7f0f7 1px, transparent 1px), linear-gradient(90deg, #e7f0f7 1px, transparent 1px), #fbfdff; background-size: 36px 36px; }
.aiml-level-seven-page .aiml-sigmoid-curve::before { content: ""; position: absolute; top: 50%; right: 20px; left: 30px; height: 2px; background: #7890a4; }
.aiml-level-seven-page .aiml-sigmoid-curve::after { content: ""; position: absolute; top: 20px; bottom: 20px; left: 50%; width: 2px; background: #7890a4; }
.aiml-level-seven-page .aiml-sigmoid-curve i { position: absolute; top: 20%; right: 8%; bottom: 20%; left: 8%; border: solid #247fd1; border-width: 0 5px 0 0; border-radius: 0 90% 90% 0; transform: skewX(-28deg); }
.aiml-level-seven-page .aiml-sigmoid-curve b { position: absolute; top: 49%; right: 8%; left: 8%; height: 5px; border-radius: 99px; background: #247fd1; transform: rotate(-13deg); }
.aiml-level-seven-page .aiml-sigmoid-curve span { position: absolute; left: 7px; color: #526e87; font-size: 10px; font-weight: 900; }
.aiml-level-seven-page .aiml-sigmoid-curve span:nth-of-type(1) { top: 15px; }
.aiml-level-seven-page .aiml-sigmoid-curve span:nth-of-type(2) { top: 48%; }
.aiml-level-seven-page .aiml-sigmoid-curve span:nth-of-type(3) { bottom: 15px; }
.aiml-level-seven-page .aiml-sigmoid-curve em { position: absolute; bottom: 8px; left: calc(50% + 8px); color: #7c5c00; font-size: 9px; font-style: normal; font-weight: 900; }

.aiml-level-seven-page .aiml-boundary-explain { display: flex; align-items: stretch; gap: 10px; }
.aiml-level-seven-page .aiml-boundary-explain div { display: grid; flex: 1 1 0; min-width: 0; padding: 20px; place-content: center; border: 1px solid #d5e2ee; border-radius: 14px; background: #fff; text-align: center; }
.aiml-level-seven-page .aiml-boundary-explain span { color: var(--aiml-blue-700); font-size: 9px; font-weight: 950; letter-spacing: .08em; }
.aiml-level-seven-page .aiml-boundary-explain code { margin-top: 9px; overflow-wrap: anywhere; white-space: normal; }
.aiml-level-seven-page .aiml-boundary-explain > b { align-self: center; color: #d4af37; font-size: 22px; }
.aiml-level-seven-page .aiml-concept-note { margin: 14px 0 0; padding: 14px 17px; border-left: 4px solid var(--aiml-blue-600); border-radius: 0 11px 11px 0; background: #eef6ff; color: #31516f; }

.aiml-level-seven-page .aiml-loss-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.aiml-level-seven-page .aiml-loss-grid > div { grid-column: 1 / -1; padding: 22px; border-radius: 14px; background: #07182c; text-align: center; }
.aiml-level-seven-page .aiml-loss-grid > div span { display: block; color: #7dd3fc; font-size: 9px; font-weight: 950; }
.aiml-level-seven-page .aiml-loss-grid > div code { display: inline-block; margin-top: 10px; background: #12304d; color: #ffe274; font-size: clamp(13px, 1.5vw, 19px); white-space: normal; }
.aiml-level-seven-page .aiml-loss-grid article { padding: 18px; border: 1px solid #d5e2ee; border-radius: 14px; background: #f8fbff; }
.aiml-level-seven-page .aiml-loss-grid article p { margin: 7px 0 0; color: var(--aiml-slate-600); }
.aiml-level-seven-page .aiml-logistic-gradient article > code { font-size: 12px; }

.aiml-level-seven-page .aiml-threshold-demo { padding: 25px; border-radius: 16px; background: #07182c; }
.aiml-level-seven-page .aiml-threshold-scale { position: relative; height: 76px; margin: 0 12px; border-bottom: 8px solid #324c62; }
.aiml-level-seven-page .aiml-threshold-scale::before,
.aiml-level-seven-page .aiml-threshold-scale::after { position: absolute; bottom: -29px; color: #9db5c7; font: 800 10px monospace; }
.aiml-level-seven-page .aiml-threshold-scale::before { content: "0"; left: 0; }
.aiml-level-seven-page .aiml-threshold-scale::after { content: "1"; right: 0; }
.aiml-level-seven-page .aiml-threshold-scale i { position: absolute; bottom: -3px; left: var(--p); padding: 6px; border-radius: 7px; background: #1c92d2; color: #fff; font: 800 9px monospace; font-style: normal; transform: translateX(-50%); }
.aiml-level-seven-page .aiml-threshold-scale b { position: absolute; top: 0; bottom: -12px; left: var(--t); width: 4px; background: #facc15; transform: translateX(-50%); }
.aiml-level-seven-page .aiml-threshold-scale b::before { content: attr(style); display: none; }
.aiml-level-seven-page .aiml-threshold-decisions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 38px; }
.aiml-level-seven-page .aiml-threshold-decisions span { padding: 11px; border: 1px solid #315471; border-radius: 9px; color: #cce0f0; font-size: 11px; font-weight: 800; text-align: center; }
.aiml-level-seven-page .aiml-note-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }

.aiml-level-seven-page .aiml-confusion-table { display: grid; grid-template-columns: minmax(130px, .7fr) repeat(2, minmax(0, 1fr)); overflow: hidden; border: 1px solid #ccdae7; border-radius: 17px; }
.aiml-level-seven-page .aiml-confusion-table > div { display: grid; min-width: 0; min-height: 94px; padding: 15px; place-content: center; border-right: 1px solid #d6e1eb; border-bottom: 1px solid #d6e1eb; text-align: center; }
.aiml-level-seven-page .aiml-confusion-table > div:nth-child(3n) { border-right: 0; }
.aiml-level-seven-page .aiml-confusion-table > div:nth-last-child(-n+3) { border-bottom: 0; }
.aiml-level-seven-page .aiml-confusion-table .head,
.aiml-level-seven-page .aiml-confusion-table .corner { min-height: 58px; background: #eaf3ff; color: #164f88; font-size: 10px; font-weight: 950; letter-spacing: .07em; }
.aiml-level-seven-page .aiml-confusion-table .tp,
.aiml-level-seven-page .aiml-confusion-table .tn { background: #edfbf4; }
.aiml-level-seven-page .aiml-confusion-table .fp,
.aiml-level-seven-page .aiml-confusion-table .fn { background: #fff3f3; }
.aiml-level-seven-page .aiml-confusion-table strong { color: var(--aiml-heading); font-size: 23px; }
.aiml-level-seven-page .aiml-confusion-table span { margin-top: 5px; color: var(--aiml-slate-600); font-size: 12px; }

.aiml-level-seven-page .aiml-curve-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.aiml-level-seven-page .aiml-curve-comparison article { padding: 20px; border: 1px solid #d4e2ee; border-radius: 16px; background: #fff; box-shadow: var(--aiml-shadow); }
.aiml-level-seven-page .aiml-mini-curve { position: relative; height: 180px; margin-bottom: 16px; overflow: hidden; border-bottom: 2px solid #718ba1; border-left: 2px solid #718ba1; background: linear-gradient(#edf3f8 1px, transparent 1px), linear-gradient(90deg, #edf3f8 1px, transparent 1px); background-size: 30px 30px; }
.aiml-level-seven-page .aiml-mini-curve i { position: absolute; inset: 12px 8px 9px 9px; border: solid #247fd1; border-width: 5px 0 0 5px; border-radius: 80% 0 0; }
.aiml-level-seven-page .aiml-mini-curve b { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: #c9a72d; transform: rotate(-45deg); transform-origin: left; }
.aiml-level-seven-page .aiml-mini-curve.pr i { border-color: #18a87f; border-radius: 0 80% 0 0; transform: rotate(7deg); }
.aiml-level-seven-page .aiml-curve-comparison article > span { color: var(--aiml-blue-700); font-size: 10px; font-weight: 950; letter-spacing: .08em; }
.aiml-level-seven-page .aiml-curve-comparison strong { display: block; margin: 7px 0; color: var(--aiml-heading); }
.aiml-level-seven-page .aiml-curve-comparison p { margin: 0; color: var(--aiml-slate-600); }

.aiml-level-seven-page .aiml-calibration-chart { position: relative; min-height: 310px; overflow: hidden; border: 1px solid #d2e0eb; border-radius: 17px; background: linear-gradient(#e8f0f6 1px, transparent 1px), linear-gradient(90deg, #e8f0f6 1px, transparent 1px), #fbfdff; background-size: 42px 42px; }
.aiml-level-seven-page .aiml-calibration-chart i { position: absolute; right: 12%; bottom: 12%; left: 12%; height: 4px; background: #d4af37; transform: rotate(-45deg); transform-origin: left; }
.aiml-level-seven-page .aiml-calibration-chart b { position: absolute; top: 48%; left: 61%; width: 17px; height: 17px; border: 3px solid #fff; border-radius: 50%; background: #267fd0; box-shadow: 0 0 0 2px #267fd0; }
.aiml-level-seven-page .aiml-calibration-chart > span { position: absolute; top: 17px; left: 18px; color: var(--aiml-blue-700); font-size: 9px; font-weight: 950; }
.aiml-level-seven-page .aiml-calibration-chart em { position: absolute; right: 12px; bottom: 8px; color: #5d7489; font-size: 9px; font-style: normal; }
.aiml-level-seven-page .aiml-calibration-chart > strong { position: absolute; top: 50%; left: -37px; color: #5d7489; font-size: 9px; transform: rotate(-90deg); }
.aiml-level-seven-page .aiml-calibration-points { display: grid; gap: 11px; }
.aiml-level-seven-page .aiml-calibration-points article { padding: 17px; border: 1px solid #d5e2ee; border-radius: 13px; background: #f8fbff; }
.aiml-level-seven-page .aiml-calibration-points span { color: var(--aiml-blue-700); font-size: 9px; font-weight: 950; }
.aiml-level-seven-page .aiml-calibration-points strong { display: block; margin: 6px 0; color: var(--aiml-heading); }
.aiml-level-seven-page .aiml-calibration-points p { margin: 0; color: var(--aiml-slate-600); font-size: 13px; }

.aiml-level-seven-page .aiml-class-workflow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 17px; padding: 0; list-style: none; }
.aiml-level-seven-page .aiml-class-workflow li { display: flex; gap: 12px; min-width: 0; min-height: 118px; padding: 17px; border: 1px solid #d4e2ee; border-radius: 15px; background: #fff; box-shadow: 0 12px 26px rgba(26, 62, 96, .07); }
.aiml-level-seven-page .aiml-class-workflow li > span { display: grid; flex: 0 0 36px; height: 36px; place-items: center; border-radius: 10px; background: #dceaff; color: var(--aiml-blue-700); font-size: 10px; font-weight: 950; }
.aiml-level-seven-page .aiml-class-workflow strong { color: var(--aiml-heading); }
.aiml-level-seven-page .aiml-class-workflow p { margin: 5px 0 0; color: var(--aiml-slate-600); font-size: 13px; }

/* Level 07 premium visualizer */
.aiml-level-seven-page .aiml-boundary-stage { position: relative; align-content: center; min-height: 350px; padding: 20px; }
.aiml-level-seven-page .aiml-stage-boundary { position: relative; width: min(100%, 550px); height: 285px; overflow: hidden; border: 1px solid #315471; border-radius: 18px; background: linear-gradient(135deg, rgba(30, 188, 210, .11) 0 49.5%, rgba(93, 89, 226, .14) 50% 100%), linear-gradient(rgba(78, 129, 166, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(78, 129, 166, .14) 1px, transparent 1px), #071a2d; background-size: auto, 40px 40px, 40px 40px; }
.aiml-level-seven-page .aiml-stage-boundary > b { display: none; position: absolute; z-index: 2; top: -10%; bottom: -8%; left: 52%; width: 5px; border-radius: 99px; background: #facc15; transform: rotate(-39deg); }
.aiml-level-seven-page .aiml-stage-boundary.with-boundary > b { display: block; }
.aiml-level-seven-page .aiml-stage-boundary > i { position: absolute; z-index: 3; left: var(--x); bottom: var(--y); width: 14px; height: 14px; border: 2px solid #e9f8ff; transform: translate(-50%, 50%); }
.aiml-level-seven-page .aiml-stage-boundary > i.c0 { border-radius: 50%; background: #22c1dd; }
.aiml-level-seven-page .aiml-stage-boundary > i.c1 { background: #736cf2; transform: translate(-50%, 50%) rotate(45deg); }
.aiml-level-seven-page .aiml-stage-boundary .zone { position: absolute; color: #bdd5e6; font-size: 9px; font-weight: 950; letter-spacing: .08em; }
.aiml-level-seven-page .aiml-stage-boundary .zone.zero { bottom: 14px; left: 14px; }
.aiml-level-seven-page .aiml-stage-boundary .zone.one { top: 14px; right: 14px; }
.aiml-level-seven-page .aiml-stage-boundary > em,
.aiml-level-seven-page .aiml-stage-boundary > strong { position: absolute; color: #8daec7; font: 900 10px monospace; }
.aiml-level-seven-page .aiml-stage-boundary > em { right: 10px; bottom: 7px; font-style: normal; }
.aiml-level-seven-page .aiml-stage-boundary > strong { top: 9px; left: 10px; }
.aiml-level-seven-page .aiml-boundary-formula { position: absolute; right: 28px; bottom: 28px; z-index: 4; padding: 9px 12px; border: 1px solid #315471; border-radius: 8px; background: rgba(5, 20, 36, .94); color: #fde68a; font: 800 10px monospace; }
.aiml-level-seven-page .aiml-score-stage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 13px; width: min(100%, 550px); }
.aiml-level-seven-page .aiml-score-stage div { padding: 25px 16px; border: 1px solid #315471; border-radius: 15px; background: #0b2741; text-align: center; }
.aiml-level-seven-page .aiml-score-stage span { display: block; color: #7dd3fc; font-size: 9px; font-weight: 950; }
.aiml-level-seven-page .aiml-score-stage strong,
.aiml-level-seven-page .aiml-score-stage code { display: block; margin-top: 10px; color: #fff; font: 800 16px/1.7 monospace; }
.aiml-level-seven-page .aiml-score-stage code { color: #fde68a; }
.aiml-level-seven-page .aiml-score-stage > b { color: #facc15; font-size: 11px; text-align: center; }
.aiml-level-seven-page .aiml-sigmoid-stage { display: grid; gap: 12px; width: min(100%, 520px); text-align: center; }
.aiml-level-seven-page .aiml-sigmoid-stage .curve { position: relative; height: 205px; overflow: hidden; border: 1px solid #315471; border-radius: 15px; background: linear-gradient(rgba(78, 129, 166, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(78, 129, 166, .14) 1px, transparent 1px), #071a2d; background-size: 34px 34px; }
.aiml-level-seven-page .aiml-sigmoid-stage .curve i { position: absolute; top: 18%; right: 9%; bottom: 18%; left: 9%; border: solid #2cc8df; border-width: 0 5px 0 0; border-radius: 0 90% 90% 0; transform: skewX(-28deg); }
.aiml-level-seven-page .aiml-sigmoid-stage .curve b { position: absolute; top: 49%; right: 9%; left: 9%; height: 5px; border-radius: 99px; background: #2cc8df; transform: rotate(-13deg); }
.aiml-level-seven-page .aiml-sigmoid-stage .curve span { position: absolute; top: 47%; left: 9px; color: #a9c2d5; font-size: 9px; }
.aiml-level-seven-page .aiml-sigmoid-stage > code { color: #fde68a; font-size: 18px; }
.aiml-level-seven-page .aiml-sigmoid-stage > strong { color: #86efac; font-size: 11px; }
.aiml-level-seven-page .aiml-probability-table { width: min(100%, 540px); overflow: hidden; border: 1px solid #315471; border-radius: 15px; background: #071a2d; }
.aiml-level-seven-page .aiml-probability-table > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid #28465f; }
.aiml-level-seven-page .aiml-probability-table span,
.aiml-level-seven-page .aiml-probability-table strong { padding: 10px 5px; border-right: 1px solid #28465f; color: #d4e4f0; font: 800 10px monospace; text-align: center; }
.aiml-level-seven-page .aiml-probability-table .head span { background: #12304d; color: #7dd3fc; }
.aiml-level-seven-page .aiml-probability-table .correct { background: #0e4537; color: #86efac; }
.aiml-level-seven-page .aiml-probability-table .wrong { background: #4d252b; color: #fda4af; }
.aiml-level-seven-page .aiml-probability-table > b { display: block; padding: 10px; color: #fde68a; font: 900 11px monospace; text-align: center; }
.aiml-level-seven-page .aiml-stage-confusion { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 500px); overflow: hidden; border: 1px solid #315471; border-radius: 15px; }
.aiml-level-seven-page .aiml-stage-confusion > * { display: grid; min-height: 62px; padding: 8px; place-content: center; border-right: 1px solid #315471; border-bottom: 1px solid #315471; color: #d5e7f4; font-size: 9px; text-align: center; }
.aiml-level-seven-page .aiml-stage-confusion > *:nth-child(3n) { border-right: 0; }
.aiml-level-seven-page .aiml-stage-confusion > *:nth-last-child(-n+3) { border-bottom: 0; }
.aiml-level-seven-page .aiml-stage-confusion strong { background: #12304d; color: #8acdf5; }
.aiml-level-seven-page .aiml-stage-confusion b { font: 900 12px/1.5 monospace; }
.aiml-level-seven-page .aiml-stage-confusion .tp,
.aiml-level-seven-page .aiml-stage-confusion .tn { background: #0e4537; color: #86efac; }
.aiml-level-seven-page .aiml-stage-confusion .fp,
.aiml-level-seven-page .aiml-stage-confusion .fn { background: #4d252b; color: #fda4af; }
.aiml-level-seven-page .aiml-stage-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: min(100%, 520px); }
.aiml-level-seven-page .aiml-stage-metrics article { padding: 15px; border: 1px solid #315471; border-radius: 12px; background: #0b2741; }
.aiml-level-seven-page .aiml-stage-metrics span { color: #7dd3fc; font-size: 9px; font-weight: 950; }
.aiml-level-seven-page .aiml-stage-metrics strong { display: block; margin: 6px 0; color: #fff; font-size: 23px; }
.aiml-level-seven-page .aiml-stage-metrics code { color: #bcd2e3; font-size: 9px; }
.aiml-level-seven-page .aiml-stage-metrics > b { grid-column: 1 / -1; padding: 10px; border-radius: 9px; background: #0e4537; color: #86efac; font-size: 10px; text-align: center; }

@media (max-width: 1250px) {
    .aiml-level-seven-page .aiml-classification-hero { grid-template-columns: minmax(0, 1fr) minmax(360px, .72fr); }
    .aiml-level-seven-page .aiml-class-usecases,
    .aiml-level-seven-page .aiml-logistic-gradient,
    .aiml-level-seven-page .aiml-imbalance-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1050px) {
    .aiml-level-seven-page .aiml-classification-hero { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-seven-page .aiml-classification-hero-visual { width: calc(100% - 70px); max-width: 760px; margin: 0 auto 34px; }
    .aiml-level-seven-page .aiml-class-workflow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .aiml-level-seven-page .aiml-classification-hero { display: block; }
    .aiml-level-seven-page .aiml-classification-hero-visual { width: calc(100% - 28px); min-height: 290px; margin: 0 14px 22px; border-radius: 18px; }
    .aiml-level-seven-page .aiml-boundary-plane { inset: 28px 18px 49px 30px; }
    .aiml-level-seven-page .aiml-boundary-plane > i { width: 11px; height: 11px; }
    .aiml-level-seven-page .aiml-probability-badge { right: 12px; bottom: 12px; min-width: 185px; padding: 10px 13px; }
    .aiml-level-seven-page .aiml-probability-badge strong { font-size: 13px; }
    .aiml-level-seven-page .aiml-classification-revision,
    .aiml-level-seven-page .aiml-class-usecases,
    .aiml-level-seven-page .aiml-odds-grid,
    .aiml-level-seven-page .aiml-sigmoid-layout,
    .aiml-level-seven-page .aiml-logistic-gradient,
    .aiml-level-seven-page .aiml-note-grid,
    .aiml-level-seven-page .aiml-class-metric-grid,
    .aiml-level-seven-page .aiml-curve-comparison,
    .aiml-level-seven-page .aiml-imbalance-actions,
    .aiml-level-seven-page .aiml-multiclass-grid,
    .aiml-level-seven-page .aiml-calibration-layout,
    .aiml-level-seven-page .aiml-class-workflow { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-seven-page .aiml-class-usecases article,
    .aiml-level-seven-page .aiml-odds-grid article,
    .aiml-level-seven-page .aiml-class-metric-grid article,
    .aiml-level-seven-page .aiml-imbalance-actions article,
    .aiml-level-seven-page .aiml-multiclass-grid article,
    .aiml-level-seven-page .aiml-logistic-gradient article { width: 100%; min-width: 0; padding: 17px; }
    .aiml-level-seven-page .aiml-equation-banner { grid-template-columns: minmax(0, 1fr); gap: 10px; text-align: center; }
    .aiml-level-seven-page .aiml-equation-banner code { justify-self: stretch; overflow-wrap: anywhere; white-space: normal; }
    .aiml-level-seven-page .aiml-equation-banner span { text-align: center; }
    .aiml-level-seven-page .aiml-boundary-explain { display: grid; grid-template-columns: minmax(0, 1fr); }
    .aiml-level-seven-page .aiml-boundary-explain > b { transform: rotate(90deg); text-align: center; }
    .aiml-level-seven-page .aiml-loss-grid { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-seven-page .aiml-loss-grid > div { grid-column: auto; }
    .aiml-level-seven-page .aiml-threshold-demo { padding: 20px 9px; }
    .aiml-level-seven-page .aiml-threshold-scale { margin: 0 5px; }
    .aiml-level-seven-page .aiml-threshold-decisions { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-seven-page .aiml-confusion-table { grid-template-columns: minmax(75px, .7fr) repeat(2, minmax(0, 1fr)); }
    .aiml-level-seven-page .aiml-confusion-table > div { min-height: 86px; padding: 9px 4px; overflow-wrap: anywhere; }
    .aiml-level-seven-page .aiml-confusion-table .head,
    .aiml-level-seven-page .aiml-confusion-table .corner { font-size: 8px; }
    .aiml-level-seven-page .aiml-confusion-table strong { font-size: 18px; }
    .aiml-level-seven-page .aiml-confusion-table span { font-size: 10px; }
    .aiml-level-seven-page .aiml-boundary-stage { min-height: 300px; padding: 12px 7px; }
    .aiml-level-seven-page .aiml-stage-boundary { height: 255px; }
    .aiml-level-seven-page .aiml-score-stage { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-seven-page .aiml-score-stage > b { transform: rotate(90deg); }
    .aiml-level-seven-page .aiml-boundary-formula { right: 12px; bottom: 12px; }
    .aiml-level-seven-page .aiml-probability-table span,
    .aiml-level-seven-page .aiml-probability-table strong { padding: 9px 2px; font-size: 9px; }
    .aiml-level-seven-page .aiml-stage-metrics article { padding: 11px; }
    .aiml-level-seven-page .aiml-stage-metrics strong { font-size: 19px; }
}

/* =========================================================
   AI & ML LEVEL 10 — SUPPORT VECTOR MACHINES AND KERNELS
   ========================================================= */

.aiml-level-ten-page .main-content {
    font-size: 16px;
}

.aiml-level-ten-page .aiml-svm-hero {
    background:
        radial-gradient(circle at 82% 25%, rgba(34, 211, 238, .17), transparent 27%),
        radial-gradient(circle at 62% 110%, rgba(73, 94, 230, .28), transparent 42%),
        linear-gradient(126deg, #061a2f 0%, #0a2544 55%, #123e60 100%);
    overflow: hidden;
}

.aiml-level-ten-page .aiml-svm-hero::after {
    background-image:
        linear-gradient(rgba(125, 211, 252, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 211, 252, .055) 1px, transparent 1px);
    background-size: 36px 36px;
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.aiml-level-ten-page .aiml-svm-hero > * {
    position: relative;
    z-index: 1;
}

.aiml-level-ten-page .aiml-svm-hero-visual {
    align-self: stretch;
    background: rgba(3, 18, 34, .68);
    border: 1px solid rgba(125, 211, 252, .33);
    border-radius: 30px;
    box-shadow: inset 0 0 44px rgba(14, 165, 233, .09), 0 24px 55px rgba(0, 0, 0, .2);
    min-height: 390px;
    overflow: hidden;
    position: relative;
}

.aiml-level-ten-page .aiml-svm-hero-visual::before {
    background-image:
        linear-gradient(rgba(56, 189, 248, .1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56, 189, 248, .1) 1px, transparent 1px);
    background-size: 42px 42px;
    content: "";
    inset: 0;
    position: absolute;
}

.aiml-level-ten-page .svm-dot,
.aiml-level-ten-page .plane-point {
    border: 3px solid #f8fbff;
    border-radius: 50%;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .25);
    height: 20px;
    position: absolute;
    width: 20px;
    z-index: 4;
}

.aiml-level-ten-page .svm-dot.positive,
.aiml-level-ten-page .plane-point.plus { background: #2dd4bf; }
.aiml-level-ten-page .svm-dot.negative,
.aiml-level-ten-page .plane-point.minus { background: #fb7185; }
.aiml-level-ten-page .svm-dot.support {
    box-shadow: 0 0 0 8px rgba(246, 204, 53, .25), 0 0 0 2px #f6cc35;
}
.aiml-level-ten-page .svm-dot.p1 { left: 16%; top: 24%; }
.aiml-level-ten-page .svm-dot.p2 { left: 27%; top: 36%; }
.aiml-level-ten-page .svm-dot.p3 { left: 19%; top: 54%; }
.aiml-level-ten-page .svm-dot.p4 { left: 39%; top: 29%; }
.aiml-level-ten-page .svm-dot.n1 { right: 15%; bottom: 23%; }
.aiml-level-ten-page .svm-dot.n2 { right: 27%; bottom: 35%; }
.aiml-level-ten-page .svm-dot.n3 { right: 18%; bottom: 52%; }
.aiml-level-ten-page .svm-dot.n4 { right: 40%; bottom: 27%; }

.aiml-level-ten-page .svm-hero-boundary,
.aiml-level-ten-page .svm-hero-margin {
    height: 150%;
    left: 50%;
    position: absolute;
    top: -25%;
    transform: rotate(-34deg);
    width: 0;
    z-index: 2;
}

.aiml-level-ten-page .svm-hero-boundary {
    border-left: 5px solid #f6cc35;
    filter: drop-shadow(0 0 9px rgba(246, 204, 53, .5));
}

.aiml-level-ten-page .svm-hero-margin {
    border-left: 2px dashed #7dd3fc;
}
.aiml-level-ten-page .svm-hero-margin.upper { margin-left: -66px; }
.aiml-level-ten-page .svm-hero-margin.lower { margin-left: 66px; }

.aiml-level-ten-page .svm-hero-label {
    background: rgba(4, 20, 37, .9);
    border: 1px solid rgba(246, 204, 53, .38);
    border-radius: 14px;
    bottom: 20px;
    display: grid;
    gap: 4px;
    left: 50%;
    padding: 12px 15px;
    position: absolute;
    transform: translateX(-50%);
    width: max-content;
    z-index: 5;
}
.aiml-level-ten-page .svm-hero-label span { color: #f6cc35; font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.aiml-level-ten-page .svm-hero-label strong { color: #eef8ff; font-size: 14px; }

.aiml-level-ten-page .aiml-ten-revision,
.aiml-level-ten-page .aiml-ten-equation-stage,
.aiml-level-ten-page .aiml-ten-support-grid,
.aiml-level-ten-page .aiml-ten-c-grid,
.aiml-level-ten-page .aiml-ten-kernel-cards,
.aiml-level-ten-page .aiml-ten-gamma-grid,
.aiml-level-ten-page .aiml-ten-multiclass,
.aiml-level-ten-page .aiml-ten-placement {
    display: grid;
    gap: 16px;
}

.aiml-level-ten-page .aiml-ten-revision { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.aiml-level-ten-page .aiml-ten-equation-stage,
.aiml-level-ten-page .aiml-ten-c-grid,
.aiml-level-ten-page .aiml-ten-kernel-cards,
.aiml-level-ten-page .aiml-ten-gamma-grid,
.aiml-level-ten-page .aiml-ten-multiclass { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aiml-level-ten-page .aiml-ten-support-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.aiml-level-ten-page .aiml-ten-placement { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.aiml-level-ten-page .aiml-ten-equation-stage article,
.aiml-level-ten-page .aiml-ten-support-grid article,
.aiml-level-ten-page .aiml-ten-c-grid article,
.aiml-level-ten-page .aiml-ten-kernel-cards article,
.aiml-level-ten-page .aiml-ten-multiclass article,
.aiml-level-ten-page .aiml-ten-placement article {
    background: linear-gradient(145deg, #ffffff, #f5f9ff);
    border: 1px solid #cedef0;
    border-radius: 18px;
    box-shadow: 0 14px 32px rgba(20, 54, 93, .06);
    min-width: 0;
    padding: 22px;
}

.aiml-level-ten-page .aiml-ten-equation-stage span,
.aiml-level-ten-page .aiml-ten-support-grid span,
.aiml-level-ten-page .aiml-ten-c-grid span,
.aiml-level-ten-page .aiml-ten-kernel-cards span,
.aiml-level-ten-page .aiml-ten-multiclass span,
.aiml-level-ten-page .aiml-ten-placement span {
    color: #0757cf;
    display: block;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .1em;
    margin-bottom: 12px;
}

.aiml-level-ten-page .aiml-ten-equation-stage code,
.aiml-level-ten-page .aiml-ten-support-grid code,
.aiml-level-ten-page .aiml-ten-c-grid code,
.aiml-level-ten-page .aiml-ten-kernel-cards code,
.aiml-level-ten-page .aiml-ten-multiclass code {
    background: #edf5ff;
    border: 1px solid #d8e8f8;
    border-radius: 9px;
    color: #004ed0;
    display: block;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.65;
    margin-bottom: 11px;
    overflow-wrap: anywhere;
    padding: 9px 11px;
    white-space: normal;
}

.aiml-level-ten-page .aiml-ten-equation-stage p,
.aiml-level-ten-page .aiml-ten-support-grid p,
.aiml-level-ten-page .aiml-ten-c-grid p,
.aiml-level-ten-page .aiml-ten-kernel-cards p,
.aiml-level-ten-page .aiml-ten-multiclass p,
.aiml-level-ten-page .aiml-ten-placement p {
    color: #4f6279;
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
}

.aiml-level-ten-page .aiml-ten-margin-diagram {
    align-items: stretch;
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(0, 1.5fr) minmax(260px, .7fr);
}

.aiml-level-ten-page .margin-plane {
    background-color: #071d34;
    background-image:
        linear-gradient(rgba(125, 211, 252, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 211, 252, .08) 1px, transparent 1px);
    background-size: 34px 34px;
    border: 1px solid #31516f;
    border-radius: 22px;
    min-height: 330px;
    overflow: hidden;
    position: relative;
}
.aiml-level-ten-page .margin-plane > i {
    height: 150%;
    left: 50%;
    position: absolute;
    top: -25%;
    transform: rotate(-30deg);
}
.aiml-level-ten-page .margin-plane .margin-center { border-left: 4px solid #f6cc35; }
.aiml-level-ten-page .margin-plane .margin-edge { border-left: 2px dashed #7dd3fc; }
.aiml-level-ten-page .margin-plane .edge-a { margin-left: -62px; }
.aiml-level-ten-page .margin-plane .edge-b { margin-left: 62px; }
.aiml-level-ten-page .plane-point.a { left: 18%; top: 21%; }
.aiml-level-ten-page .plane-point.b { left: 30%; top: 46%; }
.aiml-level-ten-page .plane-point.c { left: 41%; top: 27%; }
.aiml-level-ten-page .plane-point.d { right: 16%; bottom: 19%; }
.aiml-level-ten-page .plane-point.e { right: 29%; bottom: 42%; }
.aiml-level-ten-page .plane-point.f { right: 41%; bottom: 24%; }
.aiml-level-ten-page .margin-notes { display: grid; gap: 12px; }
.aiml-level-ten-page .margin-notes article {
    background: #fff;
    border: 1px solid #d4e2f1;
    border-left: 5px solid #1f66e5;
    border-radius: 15px;
    display: grid;
    gap: 7px;
    padding: 18px;
}
.aiml-level-ten-page .margin-notes b { color: #0757cf; font-size: 13px; letter-spacing: .08em; }
.aiml-level-ten-page .margin-notes p { color: #4f6279; font-size: 16px; line-height: 1.65; margin: 0; }
.aiml-level-ten-page .margin-notes code { color: #062548; font-size: 15px; font-weight: 800; overflow-wrap: anywhere; white-space: normal; }

.aiml-level-ten-page .aiml-ten-optimization,
.aiml-level-ten-page .aiml-ten-scale-pipeline,
.aiml-level-ten-page .aiml-ten-kernel-flow,
.aiml-level-ten-page .aiml-ten-training-flow,
.aiml-level-ten-page .aiml-ten-slack-flow {
    align-items: stretch;
    display: grid;
    gap: 12px;
}
.aiml-level-ten-page .aiml-ten-optimization { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.aiml-level-ten-page .aiml-ten-scale-pipeline,
.aiml-level-ten-page .aiml-ten-kernel-flow { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); }
.aiml-level-ten-page .aiml-ten-training-flow { grid-template-columns: repeat(4, minmax(0, 1fr) auto) minmax(0, 1fr); }
.aiml-level-ten-page .aiml-ten-slack-flow { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); }

.aiml-level-ten-page .aiml-ten-optimization > div,
.aiml-level-ten-page .aiml-ten-scale-pipeline article,
.aiml-level-ten-page .aiml-ten-kernel-flow article,
.aiml-level-ten-page .aiml-ten-training-flow article,
.aiml-level-ten-page .aiml-ten-slack-flow article {
    background: linear-gradient(150deg, #fff, #f4f8fd);
    border: 1px solid #cedeef;
    border-radius: 17px;
    min-width: 0;
    padding: 20px;
}
.aiml-level-ten-page .aiml-ten-optimization > b,
.aiml-level-ten-page .aiml-ten-scale-pipeline > b,
.aiml-level-ten-page .aiml-ten-kernel-flow > i,
.aiml-level-ten-page .aiml-ten-training-flow > i,
.aiml-level-ten-page .aiml-ten-slack-flow > i {
    align-self: center;
    color: #d79d00;
    font-style: normal;
    font-weight: 950;
    text-align: center;
}
.aiml-level-ten-page .aiml-ten-optimization span,
.aiml-level-ten-page .aiml-ten-scale-pipeline span,
.aiml-level-ten-page .aiml-ten-kernel-flow span { color: #0757cf; display: block; font-size: 12px; font-weight: 950; letter-spacing: .1em; margin-bottom: 10px; }
.aiml-level-ten-page .aiml-ten-training-flow b,
.aiml-level-ten-page .aiml-ten-slack-flow b { color: #0757cf; display: block; font-size: 13px; margin-bottom: 10px; }
.aiml-level-ten-page .aiml-ten-training-flow strong,
.aiml-level-ten-page .aiml-ten-slack-flow strong,
.aiml-level-ten-page .aiml-ten-kernel-flow strong { color: #081f3d; display: block; font-size: 17px; line-height: 1.35; margin-bottom: 8px; }
.aiml-level-ten-page .aiml-ten-optimization code,
.aiml-level-ten-page .aiml-ten-scale-pipeline code { color: #064ec3; display: block; font-size: 15px; font-weight: 800; line-height: 1.6; overflow-wrap: anywhere; white-space: normal; }
.aiml-level-ten-page .aiml-ten-optimization p,
.aiml-level-ten-page .aiml-ten-scale-pipeline p,
.aiml-level-ten-page .aiml-ten-kernel-flow p,
.aiml-level-ten-page .aiml-ten-training-flow p,
.aiml-level-ten-page .aiml-ten-slack-flow p { color: #51657d; font-size: 15px; line-height: 1.65; margin: 0; }

.aiml-level-ten-page .aiml-ten-hinge {
    background: #071d34;
    border: 1px solid #294966;
    border-radius: 22px;
    color: #f2f8ff;
    display: grid;
    gap: 20px;
    padding: 24px;
}
.aiml-level-ten-page .hinge-formula { align-items: center; display: grid; gap: 14px; grid-template-columns: auto minmax(0, 1fr); }
.aiml-level-ten-page .hinge-formula span { color: #7dd3fc; font-size: 12px; font-weight: 950; letter-spacing: .12em; }
.aiml-level-ten-page .hinge-formula code { background: #0d2a47; border: 1px solid #315978; border-radius: 12px; color: #f6cc35; font-size: 21px; font-weight: 900; padding: 13px 16px; text-align: center; }
.aiml-level-ten-page .hinge-cases { display: grid; gap: 13px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aiml-level-ten-page .hinge-cases article { background: rgba(255,255,255,.05); border: 1px solid rgba(125,211,252,.22); border-radius: 14px; min-width: 0; padding: 17px; }
.aiml-level-ten-page .hinge-cases strong { display: block; font-size: 16px; margin-bottom: 8px; }
.aiml-level-ten-page .hinge-cases code { color: #f6cc35; font-size: 19px; font-weight: 900; }
.aiml-level-ten-page .hinge-cases p { color: #bbcee1; font-size: 15px; line-height: 1.55; margin: 8px 0 0; }

.aiml-level-ten-page .aiml-ten-dual {
    background: linear-gradient(130deg, #071d34, #0c3454);
    border: 1px solid #2a5774;
    border-radius: 22px;
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 22px;
}
.aiml-level-ten-page .aiml-ten-dual article { background: rgba(3,16,30,.6); border: 1px solid rgba(125,211,252,.23); border-radius: 16px; min-width: 0; padding: 19px; }
.aiml-level-ten-page .aiml-ten-dual span { color: #7dd3fc; display: block; font-size: 12px; font-weight: 950; letter-spacing: .1em; margin-bottom: 12px; }
.aiml-level-ten-page .aiml-ten-dual code { color: #f6cc35; display: block; font-size: 17px; font-weight: 900; margin-bottom: 10px; overflow-wrap: anywhere; white-space: normal; }
.aiml-level-ten-page .aiml-ten-dual p { color: #c0d1e3; font-size: 15px; line-height: 1.65; margin: 0; }

.aiml-level-ten-page .aiml-ten-kernel-cards article { border-top: 5px solid #1f66e5; }
.aiml-level-ten-page .aiml-ten-kernel-cards article:nth-child(2) { border-top-color: #8b5cf6; }
.aiml-level-ten-page .aiml-ten-kernel-cards article:nth-child(3) { border-top-color: #06b6d4; }
.aiml-level-ten-page .aiml-ten-kernel-cards b { color: #263e5c; display: block; font-size: 14px; margin-top: 13px; }

.aiml-level-ten-page .aiml-ten-gamma-grid article {
    background: #fff;
    border: 1px solid #cedeef;
    border-radius: 18px;
    min-width: 0;
    padding: 22px;
    text-align: center;
}
.aiml-level-ten-page .aiml-ten-gamma-grid > article > span { color: #0757cf; display: block; font-size: 13px; font-weight: 950; letter-spacing: .1em; }
.aiml-level-ten-page .gamma-rings { height: 130px; margin: 12px auto; position: relative; width: 130px; }
.aiml-level-ten-page .gamma-rings::after { background: #f6cc35; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #d9a700; content: ""; height: 14px; left: 58px; position: absolute; top: 58px; width: 14px; }
.aiml-level-ten-page .gamma-rings i { border: 2px solid rgba(31,102,229,.3); border-radius: 50%; left: 50%; position: absolute; top: 50%; transform: translate(-50%,-50%); }
.aiml-level-ten-page .gamma-rings i:nth-child(1) { height: 34px; width: 34px; }
.aiml-level-ten-page .gamma-rings i:nth-child(2) { height: 76px; width: 76px; }
.aiml-level-ten-page .gamma-rings i:nth-child(3) { height: 118px; width: 118px; }
.aiml-level-ten-page .narrow .gamma-rings i:nth-child(2) { height: 55px; width: 55px; }
.aiml-level-ten-page .narrow .gamma-rings i:nth-child(3) { height: 76px; width: 76px; }
.aiml-level-ten-page .balanced .gamma-rings i:nth-child(2) { height: 66px; width: 66px; }
.aiml-level-ten-page .balanced .gamma-rings i:nth-child(3) { height: 95px; width: 95px; }
.aiml-level-ten-page .aiml-ten-gamma-grid strong { color: #0a2343; display: block; font-size: 18px; margin-bottom: 7px; }
.aiml-level-ten-page .aiml-ten-gamma-grid p { color: #52677e; font-size: 15px; line-height: 1.6; margin: 0; }

.aiml-level-ten-page .aiml-ten-comparison {
    border: 1px solid #cbdcec;
    border-radius: 18px;
    display: grid;
    grid-template-columns: minmax(155px, .7fr) repeat(2, minmax(0, 1fr));
    overflow: hidden;
}
.aiml-level-ten-page .aiml-ten-comparison > div { background: #fff; border-bottom: 1px solid #dae6f2; border-right: 1px solid #dae6f2; color: #40556d; font-size: 14px; line-height: 1.55; min-width: 0; padding: 14px 16px; }
.aiml-level-ten-page .aiml-ten-comparison > div:nth-child(3n) { border-right: 0; }
.aiml-level-ten-page .aiml-ten-comparison .head { background: #0b2a49; color: #eaf7ff; font-size: 12px; font-weight: 950; letter-spacing: .08em; }
.aiml-level-ten-page .aiml-ten-comparison > div:nth-child(3n+1):not(.head) { color: #082a52; font-weight: 850; }

.aiml-level-ten-page .aiml-ten-margin-lab,
.aiml-level-ten-page .aiml-ten-kernel-lab {
    background: #07192d;
    border: 1px solid #284968;
    border-radius: 0 0 22px 22px;
    display: grid;
    gap: 16px;
    grid-template-columns: 250px minmax(0, 1fr) 290px;
    padding: 22px;
}
.aiml-level-ten-page .aiml-ten-lab-controls,
.aiml-level-ten-page .aiml-ten-margin-inspector,
.aiml-level-ten-page .aiml-ten-kernel-inspector {
    background: #0a2139;
    border: 1px solid #294b68;
    border-radius: 17px;
    min-width: 0;
    padding: 17px;
}
.aiml-level-ten-page .aiml-ten-lab-controls { align-content: start; display: grid; gap: 13px; }
.aiml-level-ten-page .aiml-ten-lab-controls label { color: #c9d9e9; display: grid; font-size: 14px; font-weight: 750; gap: 7px; min-width: 0; }
.aiml-level-ten-page .aiml-ten-lab-controls output { color: #f6cc35; font-weight: 900; justify-self: end; margin-top: -26px; }
.aiml-level-ten-page .aiml-ten-lab-controls select { background: #061626; border: 1px solid #3a5b78; border-radius: 10px; color: #f3f8fe; font: inherit; min-width: 0; padding: 10px; width: 100%; }
.aiml-level-ten-page .aiml-ten-lab-controls input[type="range"] { accent-color: #f6cc35; width: 100%; }
.aiml-level-ten-page .aiml-ten-lab-controls .aiml-button { justify-content: center; min-height: 43px; width: 100%; }
.aiml-level-ten-page .aiml-ten-lab-controls p { color: #8ea9c3; font-size: 13px; line-height: 1.55; margin: 2px 0 0; }
.aiml-level-ten-page .aiml-ten-margin-stage,
.aiml-level-ten-page .aiml-ten-kernel-stage { display: grid; gap: 14px; min-width: 0; }
.aiml-level-ten-page #marginCanvas,
.aiml-level-ten-page #kernelCanvas { background: #041526; border: 1px solid #31516e; border-radius: 16px; display: block; max-width: 100%; touch-action: manipulation; width: 100%; }
.aiml-level-ten-page .aiml-ten-metrics { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aiml-level-ten-page .aiml-ten-kernel-metrics { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.aiml-level-ten-page .aiml-ten-metrics article,
.aiml-level-ten-page .aiml-ten-kernel-metrics article { background: #0a2139; border: 1px solid #2d4f6c; border-radius: 13px; min-width: 0; padding: 13px; }
.aiml-level-ten-page .aiml-ten-metrics span,
.aiml-level-ten-page .aiml-ten-kernel-metrics span { color: #83b9e9; display: block; font-size: 10px; font-weight: 950; letter-spacing: .08em; margin-bottom: 6px; }
.aiml-level-ten-page .aiml-ten-metrics strong,
.aiml-level-ten-page .aiml-ten-kernel-metrics strong { color: #f6cc35; display: block; font-size: 18px; overflow-wrap: anywhere; }
.aiml-level-ten-page .aiml-ten-margin-inspector,
.aiml-level-ten-page .aiml-ten-kernel-inspector { align-content: start; display: grid; gap: 12px; }
.aiml-level-ten-page .aiml-ten-margin-inspector > span,
.aiml-level-ten-page .aiml-ten-kernel-inspector > span { color: #7dd3fc; font-size: 11px; font-weight: 950; letter-spacing: .1em; }
.aiml-level-ten-page #marginRows,
.aiml-level-ten-page #kernelSimilarities { display: grid; gap: 7px; max-height: 410px; overflow: auto; }
.aiml-level-ten-page .aiml-ten-margin-row,
.aiml-level-ten-page .aiml-ten-similarity-row { align-items: center; background: #061626; border: 1px solid #25435e; border-radius: 10px; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) auto; padding: 9px 10px; }
.aiml-level-ten-page .aiml-ten-margin-row span,
.aiml-level-ten-page .aiml-ten-similarity-row span { color: #c9daeb; font-size: 12px; font-weight: 750; overflow-wrap: anywhere; }
.aiml-level-ten-page .aiml-ten-margin-row strong,
.aiml-level-ten-page .aiml-ten-similarity-row strong { color: #f6cc35; font-size: 12px; }
.aiml-level-ten-page .aiml-ten-margin-row.violation { border-color: rgba(251,113,133,.7); }
.aiml-level-ten-page .aiml-ten-margin-row.support { box-shadow: inset 4px 0 #f6cc35; }
.aiml-level-ten-page #marginExplanation,
.aiml-level-ten-page #kernelExplanation { background: #061626; border: 1px solid #25435e; border-radius: 11px; color: #adc2d7; font-size: 14px; line-height: 1.6; margin: 0; padding: 12px; }
.aiml-level-ten-page .aiml-ten-kernel-formula { background: #061626; border: 1px solid #25435e; border-radius: 11px; display: grid; gap: 7px; padding: 12px; }
.aiml-level-ten-page .aiml-ten-kernel-formula span { color: #7dd3fc; font-size: 10px; font-weight: 950; letter-spacing: .09em; }
.aiml-level-ten-page .aiml-ten-kernel-formula code { color: #f6cc35; font-size: 13px; font-weight: 850; overflow-wrap: anywhere; white-space: normal; }

.aiml-level-ten-page .aiml-ten-algorithms { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aiml-level-ten-page .aiml-ten-algorithms article { background: linear-gradient(145deg, #071d34, #0c3352); border: 1px solid #315978; border-radius: 20px; min-width: 0; padding: 22px; }
.aiml-level-ten-page .aiml-ten-algorithms span { color: #7dd3fc; display: block; font-size: 13px; font-weight: 950; letter-spacing: .1em; margin-bottom: 14px; }
.aiml-level-ten-page .aiml-ten-algorithms ol { color: #d6e4f1; display: grid; font-size: 15px; gap: 9px; line-height: 1.55; margin: 0; padding-left: 23px; }

@media (max-width: 1250px) {
    .aiml-level-ten-page .aiml-ten-revision { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .aiml-level-ten-page .aiml-ten-support-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aiml-level-ten-page .aiml-ten-margin-lab,
    .aiml-level-ten-page .aiml-ten-kernel-lab { grid-template-columns: 230px minmax(0, 1fr); }
    .aiml-level-ten-page .aiml-ten-margin-inspector,
    .aiml-level-ten-page .aiml-ten-kernel-inspector { grid-column: 1 / -1; }
    .aiml-level-ten-page #marginRows,
    .aiml-level-ten-page #kernelSimilarities { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: none; overflow: visible; }
}

@media (max-width: 1050px) {
    .aiml-level-ten-page .aiml-svm-hero { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-ten-page .aiml-svm-hero-visual { min-height: 360px; }
    .aiml-level-ten-page .aiml-ten-equation-stage,
    .aiml-level-ten-page .aiml-ten-c-grid,
    .aiml-level-ten-page .aiml-ten-kernel-cards,
    .aiml-level-ten-page .aiml-ten-gamma-grid,
    .aiml-level-ten-page .aiml-ten-multiclass,
    .aiml-level-ten-page .aiml-ten-placement { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aiml-level-ten-page .aiml-ten-margin-lab,
    .aiml-level-ten-page .aiml-ten-kernel-lab { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-ten-page .aiml-ten-margin-inspector,
    .aiml-level-ten-page .aiml-ten-kernel-inspector { grid-column: auto; }
    .aiml-level-ten-page #marginRows,
    .aiml-level-ten-page #kernelSimilarities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aiml-level-ten-page .aiml-ten-kernel-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .aiml-level-ten-page .main-content { font-size: 16px; }
    .aiml-level-ten-page .aiml-svm-hero-visual { border-radius: 20px; min-height: 310px; }
    .aiml-level-ten-page .svm-dot { height: 16px; width: 16px; }
    .aiml-level-ten-page .svm-hero-margin.upper { margin-left: -47px; }
    .aiml-level-ten-page .svm-hero-margin.lower { margin-left: 47px; }
    .aiml-level-ten-page .svm-hero-label { bottom: 12px; max-width: calc(100% - 24px); padding: 10px 12px; text-align: center; white-space: normal; width: auto; }
    .aiml-level-ten-page .aiml-ten-revision,
    .aiml-level-ten-page .aiml-ten-equation-stage,
    .aiml-level-ten-page .aiml-ten-support-grid,
    .aiml-level-ten-page .aiml-ten-c-grid,
    .aiml-level-ten-page .aiml-ten-kernel-cards,
    .aiml-level-ten-page .aiml-ten-gamma-grid,
    .aiml-level-ten-page .aiml-ten-multiclass,
    .aiml-level-ten-page .aiml-ten-placement,
    .aiml-level-ten-page .aiml-ten-margin-diagram,
    .aiml-level-ten-page .aiml-ten-dual,
    .aiml-level-ten-page .aiml-ten-algorithms { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-ten-page .aiml-ten-revision article,
    .aiml-level-ten-page .aiml-ten-equation-stage article,
    .aiml-level-ten-page .aiml-ten-support-grid article,
    .aiml-level-ten-page .aiml-ten-c-grid article,
    .aiml-level-ten-page .aiml-ten-kernel-cards article,
    .aiml-level-ten-page .aiml-ten-gamma-grid article,
    .aiml-level-ten-page .aiml-ten-multiclass article,
    .aiml-level-ten-page .aiml-ten-placement article { min-height: 0; width: 100%; }
    .aiml-level-ten-page .aiml-ten-optimization,
    .aiml-level-ten-page .aiml-ten-scale-pipeline,
    .aiml-level-ten-page .aiml-ten-kernel-flow,
    .aiml-level-ten-page .aiml-ten-training-flow,
    .aiml-level-ten-page .aiml-ten-slack-flow { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-ten-page .aiml-ten-optimization > b,
    .aiml-level-ten-page .aiml-ten-scale-pipeline > b,
    .aiml-level-ten-page .aiml-ten-kernel-flow > i,
    .aiml-level-ten-page .aiml-ten-training-flow > i,
    .aiml-level-ten-page .aiml-ten-slack-flow > i { display: block; transform: rotate(90deg); }
    .aiml-level-ten-page .hinge-formula,
    .aiml-level-ten-page .hinge-cases { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-ten-page .hinge-formula code { font-size: 17px; }
    .aiml-level-ten-page .aiml-ten-comparison { grid-template-columns: minmax(90px, .55fr) repeat(2, minmax(0, 1fr)); }
    .aiml-level-ten-page .aiml-ten-comparison > div { font-size: 12px; overflow-wrap: anywhere; padding: 10px 7px; }
    .aiml-level-ten-page .aiml-ten-comparison .head { font-size: 10px; letter-spacing: .03em; }
    .aiml-level-ten-page .aiml-ten-margin-lab,
    .aiml-level-ten-page .aiml-ten-kernel-lab { gap: 12px; padding: 16px 10px 20px; }
    .aiml-level-ten-page .aiml-ten-lab-controls,
    .aiml-level-ten-page .aiml-ten-margin-inspector,
    .aiml-level-ten-page .aiml-ten-kernel-inspector { padding: 14px; }
    .aiml-level-ten-page .aiml-ten-metrics,
    .aiml-level-ten-page .aiml-ten-kernel-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aiml-level-ten-page .aiml-ten-metrics strong,
    .aiml-level-ten-page .aiml-ten-kernel-metrics strong { font-size: 16px; }
    .aiml-level-ten-page #marginRows,
    .aiml-level-ten-page #kernelSimilarities { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-ten-page .margin-plane { min-height: 270px; }
}

/* =========================================================
   AI & ML LEVEL 09 — DECISION TREES AND RANDOM FORESTS
   ========================================================= */
.aiml-level-nine-page .aiml-tree-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(420px, .9fr);
    min-height: 610px;
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 24%, rgba(52, 211, 153, .18), transparent 27%),
        radial-gradient(circle at 78% 80%, rgba(56, 189, 248, .16), transparent 31%),
        linear-gradient(132deg, #06172a 0%, #0a2a42 57%, #173760 100%);
}

.aiml-level-nine-page .aiml-tree-hero-visual {
    position: relative;
    min-height: 520px;
    margin: 34px 34px 34px 0;
    overflow: hidden;
    border: 1px solid rgba(110, 231, 183, .32);
    border-radius: 28px;
    background:
        linear-gradient(rgba(110, 231, 183, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(110, 231, 183, .07) 1px, transparent 1px),
        #061b2e;
    background-size: 36px 36px;
    box-shadow: inset 0 0 65px rgba(52, 211, 153, .06), 0 24px 55px rgba(0, 0, 0, .22);
}

.aiml-level-nine-page .aiml-hero-tree-node,
.aiml-level-nine-page .aiml-hero-tree-leaf {
    position: absolute;
    z-index: 2;
    display: grid;
    min-height: 60px;
    place-items: center;
    padding: 12px 17px;
    border: 1px solid #4c7793;
    border-radius: 14px;
    background: linear-gradient(145deg, #123c55, #092338);
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    text-align: center;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .22);
}

.aiml-level-nine-page .aiml-hero-tree-node.root { top: 52px; left: 50%; width: 190px; transform: translateX(-50%); border-color: #f6cc35; }
.aiml-level-nine-page .aiml-hero-tree-node.child.yes { top: 210px; left: 14%; width: 165px; border-color: #54d6a0; }
.aiml-level-nine-page .aiml-hero-tree-node.child.no { top: 210px; right: 14%; width: 150px; border-color: #fb7185; }
.aiml-level-nine-page .aiml-hero-tree-leaf { top: 355px; min-height: 52px; background: #0d483a; color: #8ff1c1; }
.aiml-level-nine-page .aiml-hero-tree-leaf.leaf-a { left: 6%; width: 120px; }
.aiml-level-nine-page .aiml-hero-tree-leaf.leaf-b { left: 39%; width: 120px; background: #3d3616; color: #ffe276; }
.aiml-level-nine-page .aiml-tree-hero-visual > i.branch { position: absolute; z-index: 1; top: 143px; width: 31%; height: 2px; background: #77a2ba; transform-origin: center; }
.aiml-level-nine-page .aiml-tree-hero-visual > i.branch.left { left: 27%; transform: rotate(28deg); }
.aiml-level-nine-page .aiml-tree-hero-visual > i.branch.right { right: 27%; transform: rotate(-28deg); }

.aiml-level-nine-page .aiml-hero-forest-badge {
    position: absolute;
    right: 18px;
    bottom: 18px;
    left: 18px;
    padding: 15px 18px;
    border: 1px solid #315875;
    border-radius: 14px;
    background: rgba(4, 18, 32, .93);
}
.aiml-level-nine-page .aiml-hero-forest-badge span { display: block; color: #6ee7b7; font-size: 12px; font-weight: 950; letter-spacing: .09em; }
.aiml-level-nine-page .aiml-hero-forest-badge strong { display: block; margin-top: 5px; color: #fff; font-size: 15px; }
.aiml-level-nine-page .aiml-nine-revision { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.aiml-level-nine-page .aiml-nine-revision article { min-height: 178px; }

.aiml-level-nine-page .aiml-nine-anatomy,
.aiml-level-nine-page .aiml-nine-control-grid,
.aiml-level-nine-page .aiml-nine-forest-flow,
.aiml-level-nine-page .aiml-nine-placement {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
}

.aiml-level-nine-page .aiml-nine-anatomy article,
.aiml-level-nine-page .aiml-nine-control-grid article,
.aiml-level-nine-page .aiml-nine-forest-flow article,
.aiml-level-nine-page .aiml-nine-placement article,
.aiml-level-nine-page .aiml-nine-regression-grid article,
.aiml-level-nine-page .aiml-nine-importance-grid article {
    min-width: 0;
    padding: 21px;
    border: 1px solid #d0e0ed;
    border-radius: 16px;
    background: linear-gradient(145deg, #fff, #f4f9fd);
    box-shadow: 0 9px 24px rgba(7, 29, 59, .055);
}

.aiml-level-nine-page .aiml-nine-anatomy span,
.aiml-level-nine-page .aiml-nine-control-grid span,
.aiml-level-nine-page .aiml-nine-forest-flow span,
.aiml-level-nine-page .aiml-nine-placement span,
.aiml-level-nine-page .aiml-nine-regression-grid span,
.aiml-level-nine-page .aiml-nine-importance-grid span,
.aiml-level-nine-page .aiml-nine-formula span,
.aiml-level-nine-page .aiml-nine-entropy span,
.aiml-level-nine-page .aiml-nine-prune-layout span,
.aiml-level-nine-page .aiml-nine-pipeline span,
.aiml-level-nine-page .aiml-nine-bagging span,
.aiml-level-nine-page .aiml-nine-oob span {
    display: block;
    margin-bottom: 9px;
    color: #08705a;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .08em;
}

.aiml-level-nine-page .aiml-nine-anatomy strong,
.aiml-level-nine-page .aiml-nine-control-grid strong,
.aiml-level-nine-page .aiml-nine-forest-flow strong,
.aiml-level-nine-page .aiml-nine-regression-grid strong,
.aiml-level-nine-page .aiml-nine-importance-grid strong {
    display: block;
    color: #071d37;
    font-size: 19px;
    line-height: 1.35;
}

.aiml-level-nine-page .aiml-nine-anatomy p,
.aiml-level-nine-page .aiml-nine-control-grid p,
.aiml-level-nine-page .aiml-nine-forest-flow p,
.aiml-level-nine-page .aiml-nine-placement p,
.aiml-level-nine-page .aiml-nine-regression-grid p,
.aiml-level-nine-page .aiml-nine-importance-grid p {
    margin: 8px 0 0;
    color: #50677f;
    font-size: 16px;
}

.aiml-level-nine-page .aiml-nine-partition-demo {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(300px, .85fr);
    align-items: stretch;
    gap: 22px;
}
.aiml-level-nine-page .aiml-nine-plane { position: relative; min-height: 330px; overflow: hidden; border: 1px solid #294f69; border-radius: 19px; background: linear-gradient(rgba(56,189,248,.1) 1px, transparent 1px), linear-gradient(90deg,rgba(56,189,248,.1) 1px, transparent 1px), #071b30; background-size: 34px 34px; }
.aiml-level-nine-page .aiml-nine-plane .point { position: absolute; left: var(--x); top: var(--y); width: 17px; height: 17px; border: 2px solid #fff; border-radius: 50%; transform: translate(-50%, -50%); }
.aiml-level-nine-page .aiml-nine-plane .point.placed { background: #34d399; box-shadow: 0 0 16px #34d399; }
.aiml-level-nine-page .aiml-nine-plane .point.not { background: #fb7185; box-shadow: 0 0 16px #fb7185; }
.aiml-level-nine-page .aiml-nine-plane i { position: absolute; background: #f6cc35; box-shadow: 0 0 10px rgba(246,204,53,.55); }
.aiml-level-nine-page .aiml-nine-plane i.vertical { top: 0; bottom: 0; left: 56%; width: 3px; }
.aiml-level-nine-page .aiml-nine-plane i.horizontal { top: 54%; right: 0; left: 56%; height: 3px; }
.aiml-level-nine-page .aiml-nine-partition-steps { display: grid; gap: 13px; }
.aiml-level-nine-page .aiml-nine-partition-steps article { display: flex; align-items: center; gap: 15px; padding: 18px; border: 1px solid #d0dfec; border-radius: 15px; background: #fff; }
.aiml-level-nine-page .aiml-nine-partition-steps b { display: grid; flex: 0 0 42px; height: 42px; place-items: center; border-radius: 12px; background: #08705a; color: #fff; }
.aiml-level-nine-page .aiml-nine-partition-steps strong { color: #0a2947; font-size: 17px; }
.aiml-level-nine-page .aiml-nine-partition-steps p { margin: 4px 0 0; color: #536b82; font-size: 15px; }

.aiml-level-nine-page .aiml-nine-formula { padding: 28px; border: 1px solid #c9ddec; border-radius: 19px; background: linear-gradient(135deg, #edf9f5, #fffbea); text-align: center; }
.aiml-level-nine-page .aiml-nine-formula > code { display: inline-block; padding: 15px 22px; border-radius: 11px; background: #07182c; color: #ffe36b; font-size: clamp(19px, 2.2vw, 27px); white-space: normal; }
.aiml-level-nine-page .aiml-nine-formula > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin-top: 22px; text-align: left; }
.aiml-level-nine-page .aiml-nine-formula article { padding: 19px; border: 1px solid #d0dfeb; border-radius: 14px; background: #fff; }
.aiml-level-nine-page .aiml-nine-formula strong,
.aiml-level-nine-page .aiml-nine-formula code { display: block; color: #0b2d4e; font-size: 16px; overflow-wrap: anywhere; white-space: normal; }
.aiml-level-nine-page .aiml-nine-formula article code { margin-top: 8px; color: #075dc3; }

.aiml-level-nine-page .aiml-nine-gain-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr); align-items: stretch; gap: 18px; }
.aiml-level-nine-page .aiml-nine-entropy { padding: 26px; border: 1px solid #cfdfec; border-radius: 18px; background: #fff; }
.aiml-level-nine-page .aiml-nine-entropy.gain { background: linear-gradient(145deg, #effbf6, #fff); border-color: #9fd8c3; }
.aiml-level-nine-page .aiml-nine-entropy code { display: block; margin-bottom: 14px; overflow-wrap: anywhere; color: #075ec4; font-size: 18px; font-weight: 850; white-space: normal; }
.aiml-level-nine-page .aiml-nine-entropy p { margin: 7px 0; font-size: 16px; }
.aiml-level-nine-page .aiml-nine-gain-layout > b { align-self: center; color: #d3a719; font-size: 34px; }

.aiml-level-nine-page .aiml-nine-threshold-flow,
.aiml-level-nine-page .aiml-nine-training-flow { display: grid; grid-template-columns: repeat(7, auto); align-items: stretch; gap: 11px; }
.aiml-level-nine-page .aiml-nine-threshold-flow article,
.aiml-level-nine-page .aiml-nine-training-flow article { min-width: 0; padding: 20px 15px; border: 1px solid #d0dfec; border-radius: 15px; background: #fff; text-align: center; }
.aiml-level-nine-page .aiml-nine-threshold-flow > b,
.aiml-level-nine-page .aiml-nine-training-flow > i { align-self: center; color: #d3a719; font-size: 25px; font-style: normal; }
.aiml-level-nine-page .aiml-nine-threshold-flow span,
.aiml-level-nine-page .aiml-nine-training-flow b { display: grid; width: 38px; height: 38px; margin: 0 auto 11px; place-items: center; border-radius: 50%; background: #08705a; color: #fff; font-size: 12px; }
.aiml-level-nine-page .aiml-nine-threshold-flow strong,
.aiml-level-nine-page .aiml-nine-training-flow strong { display: block; color: #0a2947; font-size: 16px; }
.aiml-level-nine-page .aiml-nine-threshold-flow code { display: block; margin-top: 8px; overflow-wrap: anywhere; color: #075dc4; font-size: 13px; white-space: normal; }
.aiml-level-nine-page .aiml-nine-training-flow { grid-template-columns: repeat(9, auto); }
.aiml-level-nine-page .aiml-nine-training-flow p { margin: 7px 0 0; color: #536a81; font-size: 14px; }

.aiml-level-nine-page .aiml-nine-regression-grid,
.aiml-level-nine-page .aiml-nine-importance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.aiml-level-nine-page .aiml-nine-regression-grid code { display: block; margin: 11px 0; overflow-wrap: anywhere; color: #075dc4; font-size: 16px; font-weight: 850; white-space: normal; }
.aiml-level-nine-page .aiml-nine-control-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aiml-level-nine-page .aiml-nine-control-grid span { overflow-wrap: anywhere; color: #075fc5; text-transform: none; }

.aiml-level-nine-page .aiml-nine-prune-layout,
.aiml-level-nine-page .aiml-nine-pipeline { display: grid; grid-template-columns: minmax(0, .8fr) auto minmax(0, 1.35fr) auto minmax(0, .8fr); align-items: stretch; gap: 14px; }
.aiml-level-nine-page .aiml-nine-prune-layout > div,
.aiml-level-nine-page .aiml-nine-pipeline article { min-width: 0; padding: 22px; border: 1px solid #d0dfec; border-radius: 16px; background: #fff; }
.aiml-level-nine-page .aiml-nine-prune-layout > b,
.aiml-level-nine-page .aiml-nine-pipeline > b { align-self: center; color: #d3a719; font-size: 27px; text-align: center; }
.aiml-level-nine-page .aiml-nine-prune-layout strong,
.aiml-level-nine-page .aiml-nine-pipeline strong { display: block; color: #0a2947; font-size: 17px; }
.aiml-level-nine-page .aiml-nine-prune-layout code { display: block; overflow-wrap: anywhere; color: #075fc5; font-size: 16px; white-space: normal; }
.aiml-level-nine-page .aiml-nine-prune-layout p { margin: 8px 0 0; color: #536b82; font-size: 15px; }
.aiml-level-nine-page .aiml-nine-pipeline { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr) auto minmax(0, 1fr); }

.aiml-level-nine-page .aiml-nine-bagging { display: grid; grid-template-columns: minmax(130px, .7fr) auto repeat(3, minmax(120px, 1fr)) auto minmax(130px, .7fr); align-items: stretch; gap: 11px; }
.aiml-level-nine-page .aiml-nine-bagging > div { min-width: 0; padding: 20px 13px; border: 1px solid #cfe0eb; border-radius: 15px; background: #fff; text-align: center; }
.aiml-level-nine-page .aiml-nine-bagging > div.samples { background: #eef9f5; }
.aiml-level-nine-page .aiml-nine-bagging > b { align-self: center; color: #d3a719; font-size: 25px; }
.aiml-level-nine-page .aiml-nine-bagging strong,
.aiml-level-nine-page .aiml-nine-bagging code { display: block; color: #0a2c4c; font-size: 15px; overflow-wrap: anywhere; white-space: normal; }
.aiml-level-nine-page .aiml-nine-forest-flow article { position: relative; padding-top: 52px; }
.aiml-level-nine-page .aiml-nine-forest-flow span { position: absolute; top: 17px; left: 20px; display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; background: #08705a; color: #fff; }
.aiml-level-nine-page .aiml-nine-oob { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.aiml-level-nine-page .aiml-nine-oob > div { padding: 24px; border: 1px solid #cfe0eb; border-radius: 17px; background: linear-gradient(145deg, #fff, #eff9f5); }
.aiml-level-nine-page .aiml-nine-oob strong { display: block; margin-bottom: 9px; color: #08705a; font-size: 23px; }
.aiml-level-nine-page .aiml-nine-oob span { margin: 0; color: #4f687f; font-size: 16px; letter-spacing: normal; }

.aiml-level-nine-page .aiml-nine-comparison { display: grid; grid-template-columns: minmax(145px, .65fr) repeat(2, minmax(0, 1fr)); overflow: hidden; border: 1px solid #cadae8; border-radius: 17px; }
.aiml-level-nine-page .aiml-nine-comparison > div { min-width: 0; padding: 15px; border-right: 1px solid #d6e2ec; border-bottom: 1px solid #d6e2ec; overflow-wrap: anywhere; background: #fff; color: #344e69; font-size: 15px; }
.aiml-level-nine-page .aiml-nine-comparison > div:nth-child(3n) { border-right: 0; }
.aiml-level-nine-page .aiml-nine-comparison > div:nth-last-child(-n+3) { border-bottom: 0; }
.aiml-level-nine-page .aiml-nine-comparison .head { background: #0a2d42; color: #fff; font-weight: 900; }

/* Level 09 decision split laboratory */
.aiml-level-nine-page .aiml-nine-split-lab { display: grid; grid-template-columns: minmax(220px, .52fr) minmax(430px, 1.15fr) minmax(270px, .7fr); gap: 18px; padding: 25px 28px 30px; }
.aiml-level-nine-page .aiml-nine-lab-controls,
.aiml-level-nine-page .aiml-nine-split-results { min-width: 0; padding: 20px; border: 1px solid #294b69; border-radius: 16px; background: #081c31; }
.aiml-level-nine-page .aiml-nine-lab-controls label { display: block; margin-bottom: 18px; color: #d6e6f4; font-size: 14px; font-weight: 800; }
.aiml-level-nine-page .aiml-nine-lab-controls output { float: right; color: #ffe36d; }
.aiml-level-nine-page .aiml-nine-lab-controls input { display: block; width: 100%; margin-top: 9px; accent-color: #41d49c; }
.aiml-level-nine-page .aiml-nine-lab-controls select { display: block; width: 100%; min-height: 44px; margin-top: 8px; padding: 9px 11px; border: 1px solid #3c617e; border-radius: 9px; background: #061322; color: #fff; font-size: 14px; }
.aiml-level-nine-page .aiml-nine-lab-controls .aiml-button { width: 100%; margin-top: 4px; color: #fff; }
.aiml-level-nine-page .aiml-nine-lab-controls p { margin: 15px 0 0; color: #94adc1; font-size: 13px; }
.aiml-level-nine-page .aiml-nine-split-stage { min-width: 0; }
.aiml-level-nine-page #splitCanvas { display: block; width: 100%; border: 1px solid #315471; border-radius: 16px; background: #071b30; cursor: crosshair; touch-action: manipulation; }
.aiml-level-nine-page .aiml-nine-split-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 11px; }
.aiml-level-nine-page .aiml-nine-split-metrics article { min-width: 0; padding: 12px; border: 1px solid #2d4d68; border-radius: 11px; background: #081c31; }
.aiml-level-nine-page .aiml-nine-split-metrics span { display: block; color: #7eb7dd; font-size: 10px; font-weight: 950; letter-spacing: .06em; }
.aiml-level-nine-page .aiml-nine-split-metrics strong { display: block; margin-top: 5px; overflow-wrap: anywhere; color: #ffe16d; font-size: 17px; }
.aiml-level-nine-page .aiml-nine-split-results > span { display: block; margin-bottom: 11px; color: #7dd3fc; font-size: 11px; font-weight: 950; letter-spacing: .08em; }
.aiml-level-nine-page #splitChildren { display: grid; gap: 10px; margin-bottom: 20px; }
.aiml-level-nine-page #splitChildren article { padding: 12px; border: 1px solid #2a4a65; border-radius: 11px; background: #061525; }
.aiml-level-nine-page #splitChildren span { display: block; color: #83b8dc; font-size: 10px; font-weight: 950; }
.aiml-level-nine-page #splitChildren strong { display: block; margin: 4px 0 8px; color: #fff; font-size: 13px; }
.aiml-level-nine-page #splitChildren div { display: flex; flex-wrap: wrap; gap: 7px; }
.aiml-level-nine-page #splitChildren div b { font-size: 11px; }
.aiml-level-nine-page #splitChildren .placed { color: #6ee7b7; }
.aiml-level-nine-page #splitChildren .not { color: #fda4af; }
.aiml-level-nine-page #splitChildren i { display: block; height: 7px; margin: 9px 0; overflow: hidden; border-radius: 999px; background: #512934; }
.aiml-level-nine-page #splitChildren i b { display: block; height: 100%; border-radius: inherit; background: #34d399; }
.aiml-level-nine-page #splitChildren small { color: #a7bed1; font-size: 11px; }
.aiml-level-nine-page #candidateSplits { display: grid; gap: 7px; }
.aiml-level-nine-page #candidateSplits button { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 9px; width: 100%; padding: 9px 10px; border: 1px solid #294a65; border-radius: 9px; background: #061525; color: #fff; cursor: pointer; text-align: left; }
.aiml-level-nine-page #candidateSplits button.active { border-color: #f6cc35; background: #453708; }
.aiml-level-nine-page #candidateSplits span { color: #91adc3; font-size: 10px; }
.aiml-level-nine-page #candidateSplits strong { grid-row: 1 / 3; grid-column: 2; align-self: center; color: #ffe16d; }
.aiml-level-nine-page #candidateSplits small { color: #79d9b5; font-size: 10px; }
.aiml-level-nine-page #splitExplanation { margin: 15px 0 0; color: #bad0e1; font-size: 13px; line-height: 1.6; }

/* Level 09 forest laboratory */
.aiml-level-nine-page .aiml-nine-forest-lab { display: grid; grid-template-columns: minmax(230px, .42fr) minmax(0, 1.58fr); gap: 18px; padding: 25px 28px 30px; }
.aiml-level-nine-page .aiml-nine-forest-stage { min-width: 0; }
.aiml-level-nine-page .aiml-nine-forest-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 13px; }
.aiml-level-nine-page .aiml-nine-forest-summary article { min-width: 0; padding: 15px; border: 1px solid #2d506c; border-radius: 13px; background: #081c31; }
.aiml-level-nine-page .aiml-nine-forest-summary span { display: block; color: #83b9dd; font-size: 10px; font-weight: 950; letter-spacing: .07em; }
.aiml-level-nine-page .aiml-nine-forest-summary strong { display: block; margin: 6px 0; overflow-wrap: anywhere; color: #fff; font-size: 21px; }
.aiml-level-nine-page .aiml-nine-forest-summary strong.placed { color: #6ee7b7; }
.aiml-level-nine-page .aiml-nine-forest-summary strong.not { color: #fda4af; }
.aiml-level-nine-page .aiml-nine-forest-summary small { color: #a5bfd2; font-size: 11px; }
.aiml-level-nine-page .aiml-nine-forest-summary i { display: block; height: 8px; overflow: hidden; border-radius: 999px; background: #1d354b; }
.aiml-level-nine-page .aiml-nine-forest-summary i b { display: block; width: 0; height: 100%; border-radius: inherit; transition: width .25s ease; }
.aiml-level-nine-page .aiml-nine-forest-summary article:nth-child(2) i b { background: #34d399; }
.aiml-level-nine-page .aiml-nine-forest-summary article:nth-child(3) i b { background: #fb7185; }
.aiml-level-nine-page .aiml-nine-tree-votes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-height: 515px; padding-right: 4px; overflow-y: auto; }
.aiml-level-nine-page .aiml-nine-tree-votes article { min-width: 0; padding: 14px; border: 1px solid #2c4b65; border-radius: 12px; background: #071728; }
.aiml-level-nine-page .aiml-nine-tree-votes article.placed { border-top: 4px solid #34d399; }
.aiml-level-nine-page .aiml-nine-tree-votes article.not { border-top: 4px solid #fb7185; }
.aiml-level-nine-page .aiml-nine-tree-votes article > div { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.aiml-level-nine-page .aiml-nine-tree-votes span { color: #80b9df; font-size: 11px; font-weight: 950; }
.aiml-level-nine-page .aiml-nine-tree-votes small { color: #829cb2; font-size: 10px; text-align: right; }
.aiml-level-nine-page .aiml-nine-tree-votes code { display: block; min-height: 38px; overflow-wrap: anywhere; background: #0d2944; color: #d8e9f7; font-size: 12px; white-space: normal; }
.aiml-level-nine-page .aiml-nine-tree-votes > article > b { display: block; margin: 5px 0; color: #f6cc35; font-size: 10px; text-align: center; }
.aiml-level-nine-page .aiml-nine-tree-votes > article > strong { display: block; margin-top: 9px; font-size: 13px; text-align: right; }
.aiml-level-nine-page .aiml-nine-tree-votes article.placed > strong { color: #6ee7b7; }
.aiml-level-nine-page .aiml-nine-tree-votes article.not > strong { color: #fda4af; }

.aiml-level-nine-page .aiml-nine-algorithms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.aiml-level-nine-page .aiml-nine-algorithms article { padding: 23px; border: 1px solid #cfdfec; border-radius: 17px; background: #f8fbff; }
.aiml-level-nine-page .aiml-nine-algorithms span { display: block; color: #08705a; font-size: 12px; font-weight: 950; letter-spacing: .09em; }
.aiml-level-nine-page .aiml-nine-algorithms ol { margin: 15px 0 0; padding-left: 24px; }
.aiml-level-nine-page .aiml-nine-algorithms li { margin: 9px 0; color: #364f68; font-size: 16px; }
.aiml-level-nine-page .aiml-nine-placement { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aiml-level-nine-page .aiml-nine-placement span { color: #075fc5; }

@media (max-width: 1320px) {
    .aiml-level-nine-page .aiml-nine-revision { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .aiml-level-nine-page .aiml-nine-split-lab { grid-template-columns: minmax(220px, .48fr) minmax(0, 1.52fr); }
    .aiml-level-nine-page .aiml-nine-split-results { grid-column: 1 / -1; }
    .aiml-level-nine-page #splitChildren { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aiml-level-nine-page #candidateSplits { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .aiml-level-nine-page #candidateSplits button { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-nine-page #candidateSplits strong { grid-row: auto; grid-column: auto; }
    .aiml-level-nine-page .aiml-nine-training-flow { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .aiml-level-nine-page .aiml-nine-training-flow > i { display: none; }
}

@media (max-width: 1100px) {
    .aiml-level-nine-page .aiml-tree-hero { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-nine-page .aiml-tree-hero-visual { min-height: 480px; margin: 0 36px 34px; }
    .aiml-level-nine-page .aiml-nine-anatomy,
    .aiml-level-nine-page .aiml-nine-control-grid,
    .aiml-level-nine-page .aiml-nine-forest-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aiml-level-nine-page .aiml-nine-threshold-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .aiml-level-nine-page .aiml-nine-threshold-flow > b { display: none; }
    .aiml-level-nine-page .aiml-nine-bagging { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .aiml-level-nine-page .aiml-nine-bagging > b { display: none; }
    .aiml-level-nine-page .aiml-nine-forest-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aiml-level-nine-page .aiml-nine-tree-votes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .aiml-level-nine-page .aiml-tree-hero { display: block; min-height: 0; }
    .aiml-level-nine-page .aiml-tree-hero-visual { min-height: 410px; margin: 0 14px 22px; border-radius: 18px; }
    .aiml-level-nine-page .aiml-hero-tree-node.root { top: 30px; width: 170px; }
    .aiml-level-nine-page .aiml-hero-tree-node.child.yes { top: 155px; left: 5%; width: 135px; }
    .aiml-level-nine-page .aiml-hero-tree-node.child.no { top: 155px; right: 5%; width: 125px; }
    .aiml-level-nine-page .aiml-hero-tree-leaf { top: 260px; }
    .aiml-level-nine-page .aiml-hero-tree-leaf.leaf-a { left: 3%; width: 100px; }
    .aiml-level-nine-page .aiml-hero-tree-leaf.leaf-b { left: 37%; width: 100px; }
    .aiml-level-nine-page .aiml-tree-hero-visual > i.branch { top: 118px; width: 35%; }
    .aiml-level-nine-page .aiml-tree-hero-visual > i.branch.left { left: 23%; }
    .aiml-level-nine-page .aiml-tree-hero-visual > i.branch.right { right: 23%; }
    .aiml-level-nine-page .aiml-hero-forest-badge { right: 10px; bottom: 10px; left: 10px; padding: 11px 13px; }
    .aiml-level-nine-page .aiml-nine-revision,
    .aiml-level-nine-page .aiml-nine-anatomy,
    .aiml-level-nine-page .aiml-nine-control-grid,
    .aiml-level-nine-page .aiml-nine-forest-flow,
    .aiml-level-nine-page .aiml-nine-placement,
    .aiml-level-nine-page .aiml-nine-regression-grid,
    .aiml-level-nine-page .aiml-nine-importance-grid,
    .aiml-level-nine-page .aiml-nine-formula > div,
    .aiml-level-nine-page .aiml-nine-partition-demo,
    .aiml-level-nine-page .aiml-nine-gain-layout,
    .aiml-level-nine-page .aiml-nine-threshold-flow,
    .aiml-level-nine-page .aiml-nine-prune-layout,
    .aiml-level-nine-page .aiml-nine-pipeline,
    .aiml-level-nine-page .aiml-nine-bagging,
    .aiml-level-nine-page .aiml-nine-oob,
    .aiml-level-nine-page .aiml-nine-training-flow,
    .aiml-level-nine-page .aiml-nine-split-lab,
    .aiml-level-nine-page .aiml-nine-forest-lab,
    .aiml-level-nine-page .aiml-nine-forest-summary,
    .aiml-level-nine-page .aiml-nine-tree-votes,
    .aiml-level-nine-page .aiml-nine-algorithms { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-nine-page .aiml-nine-revision article,
    .aiml-level-nine-page .aiml-nine-anatomy article,
    .aiml-level-nine-page .aiml-nine-control-grid article,
    .aiml-level-nine-page .aiml-nine-forest-flow article,
    .aiml-level-nine-page .aiml-nine-placement article { width: 100%; min-width: 0; min-height: 0; }
    .aiml-level-nine-page .aiml-nine-plane { min-height: 290px; }
    .aiml-level-nine-page .aiml-nine-gain-layout > b,
    .aiml-level-nine-page .aiml-nine-prune-layout > b,
    .aiml-level-nine-page .aiml-nine-pipeline > b { transform: rotate(90deg); }
    .aiml-level-nine-page .aiml-nine-threshold-flow > b,
    .aiml-level-nine-page .aiml-nine-training-flow > i,
    .aiml-level-nine-page .aiml-nine-bagging > b { display: block; transform: rotate(90deg); text-align: center; }
    .aiml-level-nine-page .aiml-nine-comparison { grid-template-columns: minmax(90px, .6fr) repeat(2, minmax(0, 1fr)); }
    .aiml-level-nine-page .aiml-nine-comparison > div { padding: 10px 7px; font-size: 12px; }
    .aiml-level-nine-page .aiml-nine-split-lab,
    .aiml-level-nine-page .aiml-nine-forest-lab { padding: 17px 11px 22px; }
    .aiml-level-nine-page .aiml-nine-split-results { grid-column: auto; }
    .aiml-level-nine-page #splitChildren,
    .aiml-level-nine-page #candidateSplits { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-nine-page #candidateSplits button { grid-template-columns: minmax(0, 1fr) auto; }
    .aiml-level-nine-page #candidateSplits strong { grid-row: 1 / 3; grid-column: 2; }
    .aiml-level-nine-page .aiml-nine-split-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aiml-level-nine-page .aiml-nine-tree-votes { max-height: none; overflow: visible; }
}

/* Level 11 cascade guard: keep the premium laboratory shell after shared rules. */
.aiml-page.aiml-level-eleven-page .content-card.aiml-visualizer-card {
    padding: 0;
    overflow: hidden;
    border-color: #173d61;
    background: #07192e;
}

.aiml-page.aiml-level-eleven-page .aiml-lesson-hero.aiml-ensemble-hero {
    background:
        radial-gradient(circle at 86% 18%, rgba(34, 211, 238, .18), transparent 28%),
        radial-gradient(circle at 66% 100%, rgba(37, 99, 235, .23), transparent 34%),
        linear-gradient(135deg, #07192e 0%, #0a2747 55%, #10245d 100%);
}

.aiml-page.aiml-level-eleven-page .aiml-revision-grid.aiml-eleven-revision {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 1250px) {
    .aiml-page.aiml-level-eleven-page .aiml-revision-grid.aiml-eleven-revision {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .aiml-page.aiml-level-eleven-page .aiml-revision-grid.aiml-eleven-revision {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ================================================================
   Level 12 — Evaluation, Validation & Hyperparameter Tuning
   ================================================================ */
.aiml-page.aiml-level-twelve-page .aiml-lesson-hero.aiml-evaluation-hero {
    background:
        radial-gradient(circle at 86% 18%, rgba(45, 212, 191, .18), transparent 28%),
        radial-gradient(circle at 68% 100%, rgba(124, 58, 237, .22), transparent 35%),
        linear-gradient(135deg, #061526 0%, #082b4b 56%, #172554 100%);
}

.aiml-level-twelve-page .aiml-evaluation-hero-visual {
    position: relative;
    z-index: 1;
    min-width: 0;
    min-height: 390px;
    margin: 34px 34px 34px 0;
    padding: 30px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(165px, .72fr);
    gap: 20px;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(125, 211, 252, .32);
    border-radius: 27px;
    background:
        linear-gradient(rgba(125, 211, 252, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 211, 252, .07) 1px, transparent 1px),
        rgba(4, 22, 40, .86);
    background-size: 36px 36px;
    box-shadow: inset 0 0 55px rgba(56, 189, 248, .06);
}

.aiml-level-twelve-page .evaluation-data { display: grid; gap: 13px; min-width: 0; }
.aiml-level-twelve-page .evaluation-data article {
    min-width: 0;
    padding: 16px;
    border: 1px solid #315a7d;
    border-radius: 14px;
    background: rgba(13, 42, 70, .88);
}
.aiml-level-twelve-page .evaluation-data span,
.aiml-level-twelve-page .evaluation-gate span {
    display: block;
    color: #67e8f9;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .09em;
}
.aiml-level-twelve-page .evaluation-data b { display: block; margin: 5px 0 10px; color: #e7f4ff; font-size: 13px; }
.aiml-level-twelve-page .evaluation-data i { display: block; width: var(--share); height: 7px; border-radius: 999px; background: linear-gradient(90deg, #22d3ee, #3b82f6); }
.aiml-level-twelve-page .evaluation-gate {
    min-width: 0;
    padding: 22px 16px;
    border: 1px solid rgba(250, 204, 21, .5);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(30, 58, 138, .72), rgba(15, 23, 42, .96));
    text-align: center;
}
.aiml-level-twelve-page .evaluation-gate strong { display: block; margin: 12px 0 18px; color: #dbeafe; font-size: 14px; line-height: 1.45; }
.aiml-level-twelve-page .evaluation-gate b { display: grid; min-height: 72px; place-items: center; border: 1px solid #22d3ee; border-radius: 13px; background: rgba(6, 182, 212, .1); color: #fde047; font-size: 24px; }
.aiml-level-twelve-page .evaluation-signal { position: absolute; right: 26px; bottom: 15px; color: #67e8f9; font-size: 11px; font-weight: 900; letter-spacing: .08em; }

.aiml-page.aiml-level-twelve-page .aiml-revision-grid.aiml-twelve-revision { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.aiml-level-twelve-page .aiml-twelve-contract,
.aiml-level-twelve-page .aiml-twelve-formulas,
.aiml-level-twelve-page .aiml-twelve-cv-types,
.aiml-level-twelve-page .aiml-twelve-search-grid,
.aiml-level-twelve-page .aiml-twelve-calibration,
.aiml-level-twelve-page .aiml-twelve-placement,
.aiml-level-twelve-page .aiml-twelve-algorithms {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
}

.aiml-level-twelve-page .aiml-twelve-contract > article,
.aiml-level-twelve-page .aiml-twelve-formulas > article,
.aiml-level-twelve-page .aiml-twelve-cv-types > article,
.aiml-level-twelve-page .aiml-twelve-search-grid > article,
.aiml-level-twelve-page .aiml-twelve-calibration > article,
.aiml-level-twelve-page .aiml-twelve-placement > article,
.aiml-level-twelve-page .aiml-twelve-algorithms > article,
.aiml-level-twelve-page .aiml-twelve-regression > article {
    min-width: 0;
    padding: 21px;
    border: 1px solid #d4e1ed;
    border-radius: 17px;
    background: linear-gradient(145deg, #fff, #f6f9fd);
    box-shadow: 0 9px 24px rgba(7, 29, 59, .055);
}

.aiml-level-twelve-page .aiml-twelve-contract span,
.aiml-level-twelve-page .aiml-twelve-formulas span,
.aiml-level-twelve-page .aiml-twelve-cv-types span,
.aiml-level-twelve-page .aiml-twelve-search-grid span,
.aiml-level-twelve-page .aiml-twelve-calibration span,
.aiml-level-twelve-page .aiml-twelve-placement span,
.aiml-level-twelve-page .aiml-twelve-algorithms article > span,
.aiml-level-twelve-page .aiml-twelve-regression article > span {
    display: block;
    margin-bottom: 9px;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .08em;
}

.aiml-level-twelve-page .aiml-twelve-contract strong,
.aiml-level-twelve-page .aiml-twelve-cv-types strong,
.aiml-level-twelve-page .aiml-twelve-search-grid strong,
.aiml-level-twelve-page .aiml-twelve-calibration strong,
.aiml-level-twelve-page .aiml-twelve-regression strong {
    display: block;
    color: #071d3b;
    font-size: 17px;
}
.aiml-level-twelve-page .aiml-twelve-contract p,
.aiml-level-twelve-page .aiml-twelve-formulas p,
.aiml-level-twelve-page .aiml-twelve-cv-types p,
.aiml-level-twelve-page .aiml-twelve-search-grid p,
.aiml-level-twelve-page .aiml-twelve-calibration p,
.aiml-level-twelve-page .aiml-twelve-placement p,
.aiml-level-twelve-page .aiml-twelve-regression p { margin: 8px 0 0; color: #526981; line-height: 1.55; overflow-wrap: break-word; }

.aiml-level-twelve-page .aiml-twelve-split,
.aiml-level-twelve-page .aiml-twelve-threshold-flow,
.aiml-level-twelve-page .aiml-twelve-error-loop,
.aiml-level-twelve-page .aiml-twelve-evaluation-flow {
    display: grid;
    gap: 10px;
    align-items: stretch;
}
.aiml-level-twelve-page .aiml-twelve-split { grid-template-columns: minmax(0, 1.2fr) 34px minmax(0, 1fr) 34px minmax(0, .9fr); }
.aiml-level-twelve-page .aiml-twelve-threshold-flow { grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) 34px minmax(0, 1fr); }
.aiml-level-twelve-page .aiml-twelve-error-loop,
.aiml-level-twelve-page .aiml-twelve-evaluation-flow { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr); }
.aiml-level-twelve-page .aiml-twelve-split > article,
.aiml-level-twelve-page .aiml-twelve-threshold-flow > article,
.aiml-level-twelve-page .aiml-twelve-error-loop > article,
.aiml-level-twelve-page .aiml-twelve-evaluation-flow > article {
    min-width: 0;
    padding: 21px;
    border: 1px solid #d4e2ef;
    border-radius: 16px;
    background: #fff;
    text-align: center;
}
.aiml-level-twelve-page .aiml-twelve-split > article { border-top: 5px solid #2563eb; }
.aiml-level-twelve-page .aiml-twelve-split .validation { border-top-color: #7c3aed; }
.aiml-level-twelve-page .aiml-twelve-split .test { border-top-color: #0f9f86; }
.aiml-level-twelve-page .aiml-twelve-split span,
.aiml-level-twelve-page .aiml-twelve-threshold-flow span { display: block; color: #1d4ed8; font-size: 11px; font-weight: 950; letter-spacing: .08em; }
.aiml-level-twelve-page .aiml-twelve-split strong,
.aiml-level-twelve-page .aiml-twelve-threshold-flow strong,
.aiml-level-twelve-page .aiml-twelve-error-loop strong,
.aiml-level-twelve-page .aiml-twelve-evaluation-flow strong { display: block; margin: 8px 0; color: #071d3b; font-size: 17px; }
.aiml-level-twelve-page .aiml-twelve-split p,
.aiml-level-twelve-page .aiml-twelve-threshold-flow p,
.aiml-level-twelve-page .aiml-twelve-error-loop p,
.aiml-level-twelve-page .aiml-twelve-evaluation-flow p { margin: 0; color: #536a82; font-size: 14px; }
.aiml-level-twelve-page .aiml-twelve-split > i,
.aiml-level-twelve-page .aiml-twelve-error-loop > i,
.aiml-level-twelve-page .aiml-twelve-evaluation-flow > i,
.aiml-level-twelve-page .aiml-twelve-threshold-flow > b { align-self: center; color: #d4a600; font-size: 24px; font-style: normal; text-align: center; }
.aiml-level-twelve-page .aiml-twelve-error-loop b,
.aiml-level-twelve-page .aiml-twelve-evaluation-flow b { display: grid; width: 38px; height: 38px; margin: 0 auto; place-items: center; border-radius: 50%; background: #155eef; color: #fff; font-size: 11px; }

.aiml-level-twelve-page .aiml-twelve-confusion {
    position: relative;
    max-width: 850px;
    margin: 0 auto 22px;
    padding: 48px 22px 22px 70px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.aiml-level-twelve-page .aiml-twelve-confusion article { min-height: 145px; padding: 20px; border: 1px solid #cfe0ed; border-radius: 15px; text-align: center; }
.aiml-level-twelve-page .aiml-twelve-confusion .tp,
.aiml-level-twelve-page .aiml-twelve-confusion .tn { background: #eafaf1; border-color: #8fd3ac; }
.aiml-level-twelve-page .aiml-twelve-confusion .fp,
.aiml-level-twelve-page .aiml-twelve-confusion .fn { background: #fff2f2; border-color: #f1aaaa; }
.aiml-level-twelve-page .aiml-twelve-confusion span { color: #36516c; font-size: 11px; font-weight: 900; letter-spacing: .07em; }
.aiml-level-twelve-page .aiml-twelve-confusion strong { display: block; margin: 9px 0; color: #071d3b; font-size: 30px; }
.aiml-level-twelve-page .aiml-twelve-confusion p { margin: 0; color: #536981; }
.aiml-level-twelve-page .matrix-axis { position: absolute; color: #1d4ed8; font-size: 11px; font-weight: 950; letter-spacing: .09em; }
.aiml-level-twelve-page .matrix-axis.actual { top: 50%; left: 0; transform: rotate(-90deg) translateX(-50%); transform-origin: left top; }
.aiml-level-twelve-page .matrix-axis.predicted { top: 14px; left: 50%; transform: translateX(-30%); }

.aiml-level-twelve-page .aiml-twelve-regression { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.aiml-level-twelve-page .aiml-twelve-regression code,
.aiml-level-twelve-page .aiml-twelve-formulas code { display: block; margin: 12px 0; padding: 13px 8px; text-align: center; }

.aiml-level-twelve-page .aiml-twelve-nested { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: 18px; }
.aiml-level-twelve-page .aiml-twelve-nested .outer,
.aiml-level-twelve-page .aiml-twelve-nested aside { min-width: 0; padding: 24px; border: 1px solid #cbdceb; border-radius: 18px; background: #fff; }
.aiml-level-twelve-page .aiml-twelve-nested .outer { border: 2px solid #2563eb; background: #edf5ff; }
.aiml-level-twelve-page .aiml-twelve-nested .inner { margin: 17px 0; padding: 19px; border: 2px solid #7c3aed; border-radius: 14px; background: #f6f1ff; }
.aiml-level-twelve-page .aiml-twelve-nested span { display: block; color: #1d4ed8; font-size: 11px; font-weight: 950; letter-spacing: .08em; }
.aiml-level-twelve-page .aiml-twelve-nested strong { display: block; margin: 7px 0; color: #071d3b; font-size: 18px; }
.aiml-level-twelve-page .aiml-twelve-nested p { margin: 7px 0; color: #536981; }
.aiml-level-twelve-page .aiml-twelve-nested aside { display: grid; align-content: center; background: #07192e; color: #dbeafe; }
.aiml-level-twelve-page .aiml-twelve-nested aside span { color: #67e8f9; }
.aiml-level-twelve-page .aiml-twelve-nested aside code { display: block; margin: 16px 0; padding: 18px; background: #0d2a47; color: #fde047; line-height: 1.6; text-align: center; }
.aiml-level-twelve-page .aiml-twelve-nested aside p { color: #bed1e3; }

.aiml-level-twelve-page .aiml-twelve-algorithms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aiml-level-twelve-page .aiml-twelve-algorithms > article { padding: 24px 26px; }
.aiml-level-twelve-page .aiml-twelve-algorithms ol { display: grid; gap: 8px; margin: 14px 0 0; padding-left: 24px; }
.aiml-level-twelve-page .aiml-twelve-algorithms li { padding-left: 3px; line-height: 1.5; overflow-wrap: break-word; }
.aiml-level-twelve-page .aiml-twelve-placement { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.aiml-page.aiml-level-twelve-page .content-card.aiml-visualizer-card { padding: 0; overflow: hidden; border-color: #173d61; background: #07192e; }
.aiml-level-twelve-page .aiml-visualizer-head {
    padding: 25px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid #294967;
    background: #0b2038;
}
.aiml-level-twelve-page .aiml-visualizer-head h2 { margin: 6px 0; color: #fff; font-size: clamp(25px, 2.8vw, 39px); }
.aiml-level-twelve-page .aiml-visualizer-head p { max-width: 920px; margin: 0; color: #b9cee2; line-height: 1.6; }
.aiml-level-twelve-page .aiml-visualizer-head > strong { flex: 0 0 auto; padding: 7px 12px; border: 1px solid rgba(34, 211, 238, .42); border-radius: 999px; background: rgba(6, 182, 212, .12); color: #a5f3fc; font-size: 11px; letter-spacing: .08em; }
.aiml-level-twelve-page .aiml-visualizer-head > strong i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #34d399; box-shadow: 0 0 10px #34d399; }

.aiml-level-twelve-page .aiml-twelve-metric-lab,
.aiml-level-twelve-page .aiml-twelve-cv-lab {
    padding: 24px;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 300px;
    gap: 18px;
    background: linear-gradient(145deg, #07192e, #09172a);
    color: #dbeafe;
}
.aiml-level-twelve-page .aiml-twelve-lab-controls,
.aiml-level-twelve-page .aiml-twelve-metric-inspector,
.aiml-level-twelve-page .aiml-twelve-cv-inspector {
    min-width: 0;
    padding: 18px;
    border: 1px solid #294967;
    border-radius: 16px;
    background: rgba(12, 34, 59, .86);
}
.aiml-level-twelve-page .aiml-twelve-lab-controls label { display: grid; gap: 8px; margin-bottom: 16px; color: #bfdbfe; font-size: 14px; font-weight: 800; }
.aiml-level-twelve-page .aiml-twelve-lab-controls output { color: #fde047; }
.aiml-level-twelve-page .aiml-twelve-lab-controls select { width: 100%; padding: 10px 12px; border: 1px solid #416484; border-radius: 10px; background: #061426; color: #fff; font: inherit; }
.aiml-level-twelve-page .aiml-twelve-lab-controls input[type="range"] { width: 100%; accent-color: #22d3ee; }
.aiml-level-twelve-page .aiml-twelve-lab-controls > button { width: 100%; min-height: 42px; margin-top: 9px; border: 1px solid #315a7d; border-radius: 10px; background: #2563eb; color: #fff; font-weight: 900; cursor: pointer; }
.aiml-level-twelve-page .aiml-twelve-lab-controls > button.aiml-button-secondary { background: #102a46; }
.aiml-level-twelve-page .aiml-twelve-lab-controls > button:disabled { cursor: not-allowed; opacity: .42; }
.aiml-level-twelve-page .aiml-twelve-lab-controls > p { margin: 16px 0 0; color: #91a9bf; font-size: 12px; line-height: 1.55; }
.aiml-level-twelve-page .aiml-twelve-metric-stage,
.aiml-level-twelve-page .aiml-twelve-cv-stage { min-width: 0; display: grid; align-content: start; gap: 14px; }
.aiml-level-twelve-page #metricCanvas,
.aiml-level-twelve-page #cvCanvas { display: block; width: 100%; height: 430px; border: 1px solid #294967; border-radius: 16px; background: #061426; }
.aiml-level-twelve-page .aiml-twelve-metric-grid,
.aiml-level-twelve-page .aiml-twelve-cv-metrics { display: grid; gap: 9px; }
.aiml-level-twelve-page .aiml-twelve-metric-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.aiml-level-twelve-page .aiml-twelve-cv-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.aiml-level-twelve-page .aiml-twelve-metric-grid article,
.aiml-level-twelve-page .aiml-twelve-cv-metrics article { min-width: 0; padding: 11px 7px; border: 1px solid #294967; border-radius: 12px; background: #0c223b; text-align: center; }
.aiml-level-twelve-page .aiml-twelve-metric-grid span,
.aiml-level-twelve-page .aiml-twelve-cv-metrics span { display: block; margin-bottom: 5px; color: #7dd3fc; font-size: 9px; font-weight: 900; letter-spacing: .06em; }
.aiml-level-twelve-page .aiml-twelve-metric-grid strong,
.aiml-level-twelve-page .aiml-twelve-cv-metrics strong { color: #fde047; overflow-wrap: anywhere; }
.aiml-level-twelve-page .aiml-twelve-metric-inspector > span,
.aiml-level-twelve-page .aiml-twelve-cv-inspector > span { display: block; margin-bottom: 12px; color: #7dd3fc; font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.aiml-level-twelve-page #metricVerdict,
.aiml-level-twelve-page .aiml-twelve-best { display: block; width: 100%; box-sizing: border-box; padding: 13px; border: 1px solid #315775; border-radius: 11px; background: #061426; color: #a5f3fc; font-size: 15px; line-height: 1.55; overflow-wrap: break-word; }
.aiml-level-twelve-page #metricExplanation,
.aiml-level-twelve-page #cvExplanation { margin: 13px 0 0; color: #cbd5e1; line-height: 1.65; }
.aiml-level-twelve-page .aiml-twelve-recommendation { width: 100%; box-sizing: border-box; margin-top: 16px; padding: 15px 16px; border: 1px solid rgba(96, 165, 250, .32); border-left: 5px solid #3b82f6; border-radius: 14px; background: rgba(37, 99, 235, .11); }
.aiml-level-twelve-page .aiml-twelve-recommendation > span,
.aiml-level-twelve-page .aiml-twelve-best > span { display: block; margin-bottom: 8px; color: #93c5fd; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.aiml-level-twelve-page #metricNextCheck { display: block; width: 100%; box-sizing: border-box; padding: 12px; border: 1px solid #315775; border-radius: 10px; background: #061426; color: #a5f3fc; font-size: 14px; line-height: 1.5; overflow-wrap: break-word; }
.aiml-level-twelve-page #cvLeaderboard { display: grid; gap: 8px; max-height: 310px; overflow-y: auto; }
.aiml-level-twelve-page #cvLeaderboard article { padding: 10px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; align-items: center; border: 1px solid #294967; border-radius: 10px; background: #061426; }
.aiml-level-twelve-page #cvLeaderboard article.is-best { border-color: #22d3ee; background: #0b2c42; }
.aiml-level-twelve-page #cvLeaderboard span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; background: #12324f; color: #7dd3fc; font-size: 10px; font-weight: 900; }
.aiml-level-twelve-page #cvLeaderboard b { min-width: 0; color: #dbeafe; font-size: 12px; overflow-wrap: break-word; }
.aiml-level-twelve-page #cvLeaderboard strong { color: #fde047; font-size: 12px; }
.aiml-level-twelve-page .aiml-twelve-best { margin-top: 14px; }
.aiml-level-twelve-page .aiml-twelve-best strong { color: #fde047; overflow-wrap: break-word; }

@media (max-width: 1320px) {
    .aiml-page.aiml-level-twelve-page .aiml-revision-grid.aiml-twelve-revision { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .aiml-level-twelve-page .aiml-twelve-regression { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .aiml-level-twelve-page .aiml-twelve-metric-lab,
    .aiml-level-twelve-page .aiml-twelve-cv-lab { grid-template-columns: 235px minmax(0, 1fr); }
    .aiml-level-twelve-page .aiml-twelve-metric-inspector,
    .aiml-level-twelve-page .aiml-twelve-cv-inspector { grid-column: 1 / -1; }
}

@media (max-width: 1050px) {
    .aiml-level-twelve-page .aiml-evaluation-hero { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-twelve-page .aiml-evaluation-hero-visual { width: calc(100% - 48px); max-width: 700px; margin: 0 auto 28px; }
    .aiml-level-twelve-page .aiml-twelve-contract,
    .aiml-level-twelve-page .aiml-twelve-formulas,
    .aiml-level-twelve-page .aiml-twelve-cv-types,
    .aiml-level-twelve-page .aiml-twelve-search-grid,
    .aiml-level-twelve-page .aiml-twelve-calibration { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aiml-level-twelve-page .aiml-twelve-placement { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aiml-level-twelve-page .aiml-twelve-regression { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aiml-level-twelve-page .aiml-twelve-nested { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-twelve-page .aiml-twelve-error-loop,
    .aiml-level-twelve-page .aiml-twelve-evaluation-flow { grid-template-columns: repeat(5, minmax(190px, 1fr)); overflow-x: auto; padding-bottom: 12px; }
    .aiml-level-twelve-page .aiml-twelve-error-loop > i,
    .aiml-level-twelve-page .aiml-twelve-evaluation-flow > i { display: none; }
    .aiml-level-twelve-page .aiml-twelve-metric-lab,
    .aiml-level-twelve-page .aiml-twelve-cv-lab { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-twelve-page .aiml-twelve-metric-inspector,
    .aiml-level-twelve-page .aiml-twelve-cv-inspector { grid-column: auto; }
}

@media (max-width: 700px) {
    .aiml-level-twelve-page .main-content { font-size: 16px; }
    .aiml-level-twelve-page .aiml-evaluation-hero-visual { width: calc(100% - 28px); min-height: 0; padding: 18px; grid-template-columns: minmax(0, 1fr); }
    .aiml-level-twelve-page .evaluation-signal { position: static; text-align: center; }
    .aiml-page.aiml-level-twelve-page .aiml-revision-grid.aiml-twelve-revision,
    .aiml-level-twelve-page .aiml-twelve-contract,
    .aiml-level-twelve-page .aiml-twelve-formulas,
    .aiml-level-twelve-page .aiml-twelve-cv-types,
    .aiml-level-twelve-page .aiml-twelve-search-grid,
    .aiml-level-twelve-page .aiml-twelve-calibration,
    .aiml-level-twelve-page .aiml-twelve-placement,
    .aiml-level-twelve-page .aiml-twelve-regression,
    .aiml-level-twelve-page .aiml-twelve-algorithms { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-twelve-page .aiml-twelve-split,
    .aiml-level-twelve-page .aiml-twelve-threshold-flow { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-twelve-page .aiml-twelve-split > i,
    .aiml-level-twelve-page .aiml-twelve-threshold-flow > b { transform: rotate(90deg); }
    .aiml-level-twelve-page .aiml-twelve-confusion { padding: 43px 0 0; }
    .aiml-level-twelve-page .matrix-axis.actual { display: none; }
    .aiml-level-twelve-page .matrix-axis.predicted { left: 50%; transform: translateX(-50%); }
    .aiml-level-twelve-page .aiml-visualizer-head { padding: 18px; align-items: flex-start; flex-direction: column; }
    .aiml-level-twelve-page .aiml-twelve-metric-lab,
    .aiml-level-twelve-page .aiml-twelve-cv-lab { padding: 16px 11px 22px; }
    .aiml-level-twelve-page #metricCanvas,
    .aiml-level-twelve-page #cvCanvas { height: 350px; }
    .aiml-level-twelve-page .aiml-twelve-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aiml-level-twelve-page .aiml-twelve-cv-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aiml-level-twelve-page .aiml-twelve-algorithms > article { padding: 20px; }
    .aiml-level-twelve-page .aiml-twelve-algorithms ol { padding-left: 22px; }
    .aiml-level-twelve-page .aiml-twelve-metric-inspector,
    .aiml-level-twelve-page .aiml-twelve-cv-inspector { padding: 16px; }
}

/* =========================================================
   LEVEL 16 — RECOMMENDATION SYSTEMS
   ========================================================= */

.aiml-level-sixteen-page .aiml-recommendation-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(380px, .75fr);
    align-items: center;
    gap: 28px;
    overflow: hidden;
    border: 1px solid #214968;
    background:
        radial-gradient(circle at 86% 18%, rgba(168, 85, 247, .23), transparent 30%),
        radial-gradient(circle at 18% 92%, rgba(34, 211, 238, .13), transparent 34%),
        linear-gradient(135deg, #06182c 0%, #0a3152 56%, #17295d 100%);
}

.aiml-level-sixteen-page .aiml-recommendation-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(125, 211, 252, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 211, 252, .04) 1px, transparent 1px);
    background-size: 42px 42px;
}

.aiml-level-sixteen-page .aiml-recommendation-hero .aiml-lesson-hero-copy {
    position: relative;
    z-index: 2;
}

.aiml-level-sixteen-page .aiml-recommendation-hero-visual {
    position: relative;
    z-index: 2;
    min-width: 0;
    min-height: 490px;
    margin: 0 24px 0 0;
    overflow: hidden;
    border: 1px solid #2b5a7d;
    border-radius: 30px;
    background: rgba(3, 20, 37, .78);
    box-shadow: 0 22px 48px rgba(1, 10, 24, .35);
}

.aiml-level-sixteen-page .aiml-recommendation-hero-visual svg {
    display: block;
    width: 100%;
    height: 430px;
}

.aiml-level-sixteen-page .rec-user circle {
    fill: #152b62;
    stroke: #facc15;
    stroke-width: 3;
    filter: drop-shadow(0 0 12px rgba(250, 204, 21, .38));
}

.aiml-level-sixteen-page .rec-user text,
.aiml-level-sixteen-page .rec-items text,
.aiml-level-sixteen-page .rec-ranks text,
.aiml-level-sixteen-page .rec-caption {
    fill: #f8fafc;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
    font-weight: 900;
    text-anchor: middle;
}

.aiml-level-sixteen-page .rec-lines path {
    fill: none;
    stroke: #2e6588;
    stroke-width: 2;
    stroke-dasharray: 6 6;
}

.aiml-level-sixteen-page .rec-items rect {
    fill: #0b2943;
    stroke: #22d3ee;
    stroke-width: 1.8;
}

.aiml-level-sixteen-page .rec-ranks rect {
    fill: #18316d;
    stroke: #a78bfa;
    stroke-width: 1.8;
}

.aiml-level-sixteen-page .rec-ranks rect:first-child {
    stroke: #facc15;
    filter: drop-shadow(0 0 10px rgba(250, 204, 21, .3));
}

.aiml-level-sixteen-page .rec-arrow {
    fill: none;
    stroke: #facc15;
    stroke-width: 4;
    stroke-linecap: round;
}

.aiml-level-sixteen-page .rec-caption {
    fill: #67e8f9;
    font-size: 13px;
}

.aiml-level-sixteen-page .aiml-recommendation-hero-note {
    position: absolute;
    right: 24px;
    bottom: 22px;
    left: 24px;
    display: grid;
    gap: 7px;
    padding: 15px 18px;
    border: 1px solid #315c7d;
    border-radius: 15px;
    background: rgba(5, 20, 38, .94);
}

.aiml-level-sixteen-page .aiml-recommendation-hero-note span {
    color: #c4b5fd;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .09em;
}

.aiml-level-sixteen-page .aiml-recommendation-hero-note strong {
    color: #f8fafc;
    font-size: 15px;
}

.aiml-level-sixteen-page .aiml-recommendation-hero-note code {
    width: max-content;
    max-width: 100%;
    padding: 4px 8px;
    border-radius: 7px;
    background: #f8fafc;
    color: #6d28d9;
    font-size: 14px;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.aiml-level-sixteen-page #recommendationCanvas,
.aiml-level-sixteen-page #factorCanvas {
    display: block;
    width: 100%;
    height: 465px;
    background: #061426;
}

.aiml-level-sixteen-page .aiml-sixteen-factor-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.aiml-level-sixteen-page .aiml-fifteen-ranking strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.aiml-level-sixteen-page .aiml-fifteen-score-stage,
.aiml-level-sixteen-page .aiml-fifteen-tree-stage {
    align-self: stretch;
}

@media (max-width: 1180px) {
    .aiml-level-sixteen-page .aiml-recommendation-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .aiml-level-sixteen-page .aiml-recommendation-hero-visual {
        width: calc(100% - 72px);
        max-width: 760px;
        min-height: 490px;
        margin: 0 auto 34px;
    }
}

@media (max-width: 700px) {
    .aiml-level-sixteen-page .main-content {
        font-size: 16px;
    }

    .aiml-level-sixteen-page .aiml-recommendation-hero-visual {
        width: calc(100% - 28px);
        min-height: 400px;
        margin: 0 14px 22px;
        border-radius: 22px;
    }

    .aiml-level-sixteen-page .aiml-recommendation-hero-visual svg {
        height: 315px;
    }

    .aiml-level-sixteen-page .aiml-recommendation-hero-note {
        right: 13px;
        bottom: 14px;
        left: 13px;
        padding: 13px 15px;
    }

    .aiml-level-sixteen-page .rec-user text,
    .aiml-level-sixteen-page .rec-items text,
    .aiml-level-sixteen-page .rec-ranks text,
    .aiml-level-sixteen-page .rec-caption {
        font-size: 12px;
    }

    .aiml-level-sixteen-page #recommendationCanvas {
        height: 470px;
    }

    .aiml-level-sixteen-page #factorCanvas {
        height: 510px;
    }

    .aiml-level-sixteen-page .aiml-sixteen-factor-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 430px) {
    .aiml-level-sixteen-page .aiml-recommendation-hero-visual {
        min-height: 380px;
    }

    .aiml-level-sixteen-page .aiml-recommendation-hero-visual svg {
        height: 290px;
    }
}

/* =========================================================
   AI & ML LEVEL 21 — TRANSFORMERS & LARGE LANGUAGE MODELS
   ========================================================= */

.aiml-level-twenty-one-page .aiml-transformer-hero {
    background:
        radial-gradient(circle at 86% 24%, rgba(99, 102, 241, .31), transparent 31%),
        linear-gradient(112deg, #06182b 0%, #0b2d50 54%, #142b68 100%);
    display: grid;
    grid-template-columns: minmax(0, 1.28fr) minmax(430px, .72fr);
    min-height: 610px;
    overflow: hidden;
}

.aiml-level-twenty-one-page .aiml-transformer-hero::before {
    background-image:
        linear-gradient(rgba(125, 211, 252, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 211, 252, .055) 1px, transparent 1px);
    background-size: 39px 39px;
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.aiml-level-twenty-one-page .aiml-transformer-hero-copy,
.aiml-level-twenty-one-page .aiml-transformer-hero-visual {
    position: relative;
    z-index: 1;
}

.aiml-level-twenty-one-page .aiml-transformer-hero-visual {
    align-self: center;
    background: rgba(3, 18, 34, .78);
    border: 1px solid #315e80;
    border-radius: 30px;
    box-shadow: inset 0 0 45px rgba(14, 165, 233, .06), 0 25px 60px rgba(2, 12, 28, .26);
    margin: 34px 34px 34px 4px;
    min-height: 500px;
    overflow: hidden;
    padding: 18px 16px 128px;
}

.aiml-level-twenty-one-page .aiml-transformer-hero-visual svg {
    display: block;
    height: 390px;
    margin: 0 auto;
    max-width: 100%;
    width: 600px;
}

.aiml-level-twenty-one-page .transformer-token-row rect {
    fill: #122f4c;
    stroke: #38bdf8;
    stroke-width: 1.6;
}

.aiml-level-twenty-one-page .transformer-token-row text,
.aiml-level-twenty-one-page .transformer-head-row text {
    fill: #e8f6ff;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 900;
    text-anchor: middle;
}

.aiml-level-twenty-one-page .transformer-links path {
    fill: none;
    opacity: .46;
    stroke: #38bdf8;
    stroke-dasharray: 5 6;
    stroke-width: 2;
}

.aiml-level-twenty-one-page .transformer-links path.strong {
    opacity: 1;
    stroke: #facc15;
    stroke-dasharray: none;
    stroke-width: 3.5;
}

.aiml-level-twenty-one-page .transformer-head-row rect {
    fill: #1e2f64;
    filter: drop-shadow(0 0 10px rgba(167, 139, 250, .24));
    stroke: #a78bfa;
    stroke-width: 1.8;
}

.aiml-level-twenty-one-page .transformer-merge {
    fill: none;
    stroke: #67e8f9;
    stroke-width: 2;
}

.aiml-level-twenty-one-page .transformer-output {
    fill: url(#transformerGlow);
    filter: drop-shadow(0 0 13px rgba(34, 211, 238, .32));
}

.aiml-level-twenty-one-page .transformer-output-text {
    fill: #061426;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .04em;
    text-anchor: middle;
}

.aiml-level-twenty-one-page .aiml-transformer-hero-note {
    background: rgba(5, 20, 38, .97);
    border: 1px solid #315f7c;
    border-radius: 18px;
    bottom: 23px;
    display: grid;
    gap: 8px;
    left: 25px;
    padding: 16px 20px;
    position: absolute;
    right: 25px;
}

.aiml-level-twenty-one-page .aiml-transformer-hero-note span {
    color: #a78bfa;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .11em;
}

.aiml-level-twenty-one-page .aiml-transformer-hero-note strong {
    color: #f8fafc;
    font-size: 15px;
    line-height: 1.42;
}

.aiml-level-twenty-one-page .aiml-transformer-hero-note code {
    color: #facc15;
    font-size: 14px;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.aiml-level-twenty-one-page .aiml-twenty-one-compare-grid,
.aiml-level-twenty-one-page .aiml-twenty-one-head-grid,
.aiml-level-twenty-one-page .aiml-twenty-one-generation-grid,
.aiml-level-twenty-one-page .aiml-twenty-one-adaptation-grid,
.aiml-level-twenty-one-page .aiml-twenty-one-production-grid {
    display: grid;
    gap: 16px;
}

.aiml-level-twenty-one-page .aiml-twenty-one-compare-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.aiml-level-twenty-one-page .aiml-twenty-one-head-grid,
.aiml-level-twenty-one-page .aiml-twenty-one-generation-grid,
.aiml-level-twenty-one-page .aiml-twenty-one-adaptation-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.aiml-level-twenty-one-page .aiml-twenty-one-production-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.aiml-level-twenty-one-page .aiml-twenty-one-compare-grid article,
.aiml-level-twenty-one-page .aiml-twenty-one-head-grid article,
.aiml-level-twenty-one-page .aiml-twenty-one-generation-grid article,
.aiml-level-twenty-one-page .aiml-twenty-one-adaptation-grid article,
.aiml-level-twenty-one-page .aiml-twenty-one-production-grid article {
    background: linear-gradient(145deg, #ffffff, #f4f8fd);
    border: 1px solid #d2e1ef;
    border-radius: 18px;
    min-width: 0;
    padding: 22px;
}

.aiml-level-twenty-one-page .aiml-twenty-one-head-grid article {
    border-top: 4px solid #8b5cf6;
}

.aiml-level-twenty-one-page .aiml-twenty-one-generation-grid article {
    border-top: 4px solid #06b6d4;
}

.aiml-level-twenty-one-page .aiml-twenty-one-adaptation-grid article {
    border-top: 4px solid #2563eb;
}

.aiml-level-twenty-one-page .aiml-twenty-one-production-grid article {
    border-left: 5px solid #2563eb;
}

.aiml-level-twenty-one-page .aiml-twenty-one-compare-grid span,
.aiml-level-twenty-one-page .aiml-twenty-one-head-grid span,
.aiml-level-twenty-one-page .aiml-twenty-one-generation-grid span,
.aiml-level-twenty-one-page .aiml-twenty-one-adaptation-grid span,
.aiml-level-twenty-one-page .aiml-twenty-one-production-grid span {
    color: #1d4ed8;
    display: block;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .07em;
}

.aiml-level-twenty-one-page .aiml-twenty-one-compare-grid strong,
.aiml-level-twenty-one-page .aiml-twenty-one-head-grid strong,
.aiml-level-twenty-one-page .aiml-twenty-one-adaptation-grid strong {
    color: #071d3b;
    display: block;
    font-size: 18px;
    margin-top: 10px;
}

.aiml-level-twenty-one-page .aiml-twenty-one-generation-grid code {
    color: #7c3aed;
    display: block;
    font-size: 15px;
    font-weight: 900;
    margin-top: 11px;
    overflow-wrap: anywhere;
}

.aiml-level-twenty-one-page .aiml-twenty-one-compare-grid p,
.aiml-level-twenty-one-page .aiml-twenty-one-head-grid p,
.aiml-level-twenty-one-page .aiml-twenty-one-generation-grid p,
.aiml-level-twenty-one-page .aiml-twenty-one-adaptation-grid p,
.aiml-level-twenty-one-page .aiml-twenty-one-production-grid p {
    color: #536a82;
    line-height: 1.62;
    margin: 9px 0 0;
    overflow-wrap: break-word;
}

.aiml-level-twenty-one-page .aiml-twenty-one-equation-flow {
    align-items: stretch;
    display: grid;
    gap: 9px;
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr);
}

.aiml-level-twenty-one-page .aiml-twenty-one-equation-flow article {
    background: #fff;
    border: 1px solid #d2e1ef;
    border-radius: 18px;
    min-width: 0;
    padding: 22px 17px;
    text-align: center;
}

.aiml-level-twenty-one-page .aiml-twenty-one-equation-flow span {
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .07em;
}

.aiml-level-twenty-one-page .aiml-twenty-one-equation-flow code {
    color: #7c3aed;
    display: block;
    font-size: 14px;
    font-weight: 900;
    margin-top: 11px;
    overflow-wrap: anywhere;
}

.aiml-level-twenty-one-page .aiml-twenty-one-equation-flow p {
    color: #536a82;
    line-height: 1.55;
    margin: 9px 0 0;
}

.aiml-level-twenty-one-page .aiml-twenty-one-equation-flow > i {
    align-self: center;
    color: #d3a90b;
    font-size: 24px;
    font-style: normal;
    font-weight: 900;
    text-align: center;
}

.aiml-level-twenty-one-page .aiml-fifteen-lab-section {
    background: #061426;
    border-color: #244663;
    overflow: hidden;
    padding: 0;
}

.aiml-level-twenty-one-page .aiml-fifteen-lab-heading {
    align-items: center;
    background: #0b2038;
    border-bottom: 1px solid #294967;
    display: flex;
    gap: 22px;
    justify-content: space-between;
    padding: 27px 30px;
}

.aiml-level-twenty-one-page .aiml-fifteen-lab-heading > div {
    min-width: 0;
}

.aiml-level-twenty-one-page .aiml-fifteen-lab-heading span {
    color: #7dd3fc;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .08em;
}

.aiml-level-twenty-one-page .aiml-fifteen-lab-heading h2 {
    color: #fff;
    font-size: clamp(27px, 3vw, 42px);
    line-height: 1.14;
    margin: 7px 0;
}

.aiml-level-twenty-one-page .aiml-fifteen-lab-heading p {
    color: #b9cee2;
    line-height: 1.6;
    margin: 0;
    max-width: 980px;
}

.aiml-level-twenty-one-page .aiml-fifteen-lab-heading > strong {
    background: rgba(99, 102, 241, .13);
    border: 1px solid rgba(167, 139, 250, .45);
    border-radius: 999px;
    color: #ddd6fe;
    flex: 0 0 auto;
    font-size: 11px;
    letter-spacing: .06em;
    padding: 8px 13px;
    white-space: nowrap;
}

.aiml-level-twenty-one-page #attentionCanvas,
.aiml-level-twenty-one-page #generationCanvas {
    background: #061426;
    display: block;
    max-width: 100%;
    touch-action: manipulation;
    width: 100%;
}

.aiml-level-twenty-one-page .aiml-twenty-one-attention-metrics,
.aiml-level-twenty-one-page .aiml-twenty-one-generation-metrics {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.aiml-level-twenty-one-page .aiml-fifteen-controls label > strong {
    color: #facc15;
    display: block;
    font-size: 15px;
    margin-top: 6px;
}

.aiml-level-twenty-one-page .aiml-twenty-one-equation,
.aiml-level-twenty-one-page .aiml-twenty-one-evidence {
    background: #061426;
    border: 1px solid #315775;
    border-radius: 12px;
    display: grid;
    gap: 8px;
    margin: 16px 0;
    padding: 15px;
}

.aiml-level-twenty-one-page .aiml-twenty-one-equation span,
.aiml-level-twenty-one-page .aiml-twenty-one-evidence span {
    color: #7dd3fc;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .08em;
}

.aiml-level-twenty-one-page .aiml-twenty-one-equation code {
    color: #fde047;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.aiml-level-twenty-one-page .aiml-twenty-one-evidence strong {
    color: #dbeafe;
    font-size: 13px;
    line-height: 1.58;
    overflow-wrap: anywhere;
}

@media (max-width: 1260px) {
    .aiml-level-twenty-one-page .aiml-transformer-hero {
        grid-template-columns: minmax(0, 1.08fr) minmax(390px, .82fr);
    }

    .aiml-level-twenty-one-page .aiml-twenty-one-head-grid,
    .aiml-level-twenty-one-page .aiml-twenty-one-generation-grid,
    .aiml-level-twenty-one-page .aiml-twenty-one-adaptation-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aiml-level-twenty-one-page .aiml-twenty-one-attention-metrics,
    .aiml-level-twenty-one-page .aiml-twenty-one-generation-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .aiml-level-twenty-one-page .aiml-transformer-hero {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .aiml-level-twenty-one-page .aiml-transformer-hero-visual {
        margin: 0 auto 30px;
        max-width: 690px;
        min-height: 470px;
        width: calc(100% - 48px);
    }

    .aiml-level-twenty-one-page .aiml-twenty-one-compare-grid,
    .aiml-level-twenty-one-page .aiml-twenty-one-production-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aiml-level-twenty-one-page .aiml-twenty-one-equation-flow {
        grid-template-columns: repeat(4, minmax(215px, 1fr));
        overflow-x: auto;
        padding-bottom: 12px;
    }

    .aiml-level-twenty-one-page .aiml-twenty-one-equation-flow > i {
        display: none;
    }
}

@media (max-width: 700px) {
    .aiml-level-twenty-one-page .main-content {
        min-width: 0;
        overflow: hidden;
    }

    .aiml-level-twenty-one-page .aiml-transformer-hero-visual {
        border-radius: 24px;
        min-height: 400px;
        padding: 10px 6px 122px;
        width: calc(100% - 28px);
    }

    .aiml-level-twenty-one-page .aiml-transformer-hero-visual svg {
        height: 300px;
        width: 520px;
    }

    .aiml-level-twenty-one-page .aiml-transformer-hero-note {
        bottom: 13px;
        left: 13px;
        padding: 13px 15px;
        right: 13px;
    }

    .aiml-level-twenty-one-page .aiml-fifteen-lab-heading {
        align-items: flex-start;
        flex-direction: column;
        padding: 20px 18px;
    }

    .aiml-level-twenty-one-page .aiml-fifteen-lab-heading > strong {
        white-space: normal;
    }

    .aiml-level-twenty-one-page .aiml-twenty-one-compare-grid,
    .aiml-level-twenty-one-page .aiml-twenty-one-head-grid,
    .aiml-level-twenty-one-page .aiml-twenty-one-generation-grid,
    .aiml-level-twenty-one-page .aiml-twenty-one-adaptation-grid,
    .aiml-level-twenty-one-page .aiml-twenty-one-production-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .aiml-level-twenty-one-page #attentionCanvas {
        height: 620px;
    }

    .aiml-level-twenty-one-page #generationCanvas {
        height: 600px;
    }

    .aiml-level-twenty-one-page .aiml-twenty-one-attention-metrics,
    .aiml-level-twenty-one-page .aiml-twenty-one-generation-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aiml-level-twenty-one-page .aiml-twenty-one-attention-metrics article:last-child,
    .aiml-level-twenty-one-page .aiml-twenty-one-generation-metrics article:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 430px) {
    .aiml-level-twenty-one-page .aiml-transformer-hero-visual {
        min-height: 380px;
    }

    .aiml-level-twenty-one-page .aiml-transformer-hero-note strong {
        font-size: 13px;
    }

    .aiml-level-twenty-one-page .aiml-transformer-hero-note code {
        font-size: 12px;
    }

    .aiml-level-twenty-one-page .aiml-twenty-one-attention-metrics,
    .aiml-level-twenty-one-page .aiml-twenty-one-generation-metrics {
        grid-template-columns: minmax(0, 1fr);
    }

    .aiml-level-twenty-one-page .aiml-twenty-one-attention-metrics article:last-child,
    .aiml-level-twenty-one-page .aiml-twenty-one-generation-metrics article:last-child {
        grid-column: auto;
    }
}

/* ================================================================
   AI & ML LEVEL 19 — SEQUENCES & TIME-SERIES LEARNING
   ================================================================ */

.aiml-level-nineteen-page .aiml-sequence-hero {
    align-items: center;
    background:
        radial-gradient(circle at 84% 24%, rgba(34, 211, 238, .17), transparent 28%),
        radial-gradient(circle at 72% 88%, rgba(139, 92, 246, .2), transparent 34%),
        linear-gradient(115deg, #06172b 0%, #082945 57%, #102b69 100%);
    display: grid;
    gap: clamp(28px, 4vw, 70px);
    grid-template-columns: minmax(0, 1.18fr) minmax(390px, .82fr);
    min-height: 620px;
    overflow: hidden;
    position: relative;
}

.aiml-level-nineteen-page .aiml-sequence-hero::after {
    background-image:
        linear-gradient(rgba(125, 211, 252, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 211, 252, .045) 1px, transparent 1px);
    background-size: 42px 42px;
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.aiml-level-nineteen-page .aiml-sequence-hero .aiml-lesson-hero-copy,
.aiml-level-nineteen-page .aiml-sequence-hero-visual {
    min-width: 0;
    position: relative;
    z-index: 1;
}

.aiml-level-nineteen-page .aiml-sequence-hero-visual {
    align-items: center;
    background: rgba(3, 19, 36, .87);
    border: 1px solid #285e7d;
    border-radius: 34px;
    display: flex;
    justify-content: center;
    min-height: 500px;
    overflow: hidden;
    padding: 28px 24px 112px;
    position: relative;
}

.aiml-level-nineteen-page .aiml-sequence-hero-visual svg {
    display: block;
    height: auto;
    max-width: 100%;
    overflow: visible;
    width: 560px;
}

.aiml-level-nineteen-page .sequence-wave path {
    fill: none;
    filter: drop-shadow(0 0 8px rgba(34, 211, 238, .65));
    stroke: #22d3ee;
    stroke-linecap: round;
    stroke-width: 6;
}

.aiml-level-nineteen-page .sequence-points circle {
    fill: #facc15;
    filter: drop-shadow(0 0 8px rgba(250, 204, 21, .6));
    stroke: #07182b;
    stroke-width: 3;
}

.aiml-level-nineteen-page .sequence-memory rect {
    fill: #132f4d;
    stroke: #8b5cf6;
    stroke-width: 2;
}

.aiml-level-nineteen-page .sequence-memory path {
    fill: none;
    stroke: #facc15;
    stroke-width: 4;
}

.aiml-level-nineteen-page .aiml-sequence-hero-visual text {
    fill: #dbeafe;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 900;
    text-anchor: middle;
}

.aiml-level-nineteen-page .aiml-sequence-hero-visual text:last-child {
    fill: #67e8f9;
    font-size: 12px;
    letter-spacing: .12em;
}

.aiml-level-nineteen-page .aiml-sequence-hero-note {
    background: rgba(5, 20, 38, .96);
    border: 1px solid #315f7c;
    border-radius: 18px;
    bottom: 24px;
    display: grid;
    gap: 8px;
    left: 26px;
    padding: 16px 20px;
    position: absolute;
    right: 26px;
}

.aiml-level-nineteen-page .aiml-sequence-hero-note span {
    color: #a78bfa;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .11em;
}

.aiml-level-nineteen-page .aiml-sequence-hero-note strong {
    color: #f8fafc;
    font-size: 16px;
    line-height: 1.35;
}

.aiml-level-nineteen-page .aiml-sequence-hero-note code {
    color: #facc15;
    font-size: 14px;
    font-weight: 900;
}

.aiml-level-nineteen-page #forecastCanvas,
.aiml-level-nineteen-page #memoryCanvas {
    background: #061426;
    border: 1px solid #31516e;
    border-radius: 16px;
    display: block;
    max-width: 100%;
    touch-action: manipulation;
    width: 100%;
}

.aiml-level-nineteen-page .aiml-nineteen-forecast-metrics,
.aiml-level-nineteen-page .aiml-nineteen-memory-metrics {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.aiml-level-nineteen-page .aiml-fifteen-controls label > strong {
    color: #facc15;
    display: block;
    font-size: 15px;
    margin-top: 7px;
}

.aiml-level-nineteen-page .aiml-nineteen-legend {
    align-items: center;
    display: grid;
    gap: 9px 10px;
    grid-template-columns: 24px minmax(0, 1fr);
}

.aiml-level-nineteen-page .aiml-nineteen-legend i {
    border-radius: 99px;
    display: block;
    height: 4px;
    width: 24px;
}

.aiml-level-nineteen-page .aiml-nineteen-legend i.history { background: #38bdf8; }
.aiml-level-nineteen-page .aiml-nineteen-legend i.actual { background: #f8fafc; }
.aiml-level-nineteen-page .aiml-nineteen-legend i.prediction { background: #facc15; }

.aiml-level-nineteen-page .aiml-nineteen-legend span {
    color: #adc4d8;
    font-size: 12px;
    font-weight: 750;
}

.aiml-level-nineteen-page .aiml-nineteen-gates {
    display: grid;
    gap: 8px;
}

.aiml-level-nineteen-page .aiml-nineteen-gates article {
    align-items: center;
    background: #07192c;
    border: 1px solid #2a4e69;
    border-radius: 11px;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 10px 12px;
}

.aiml-level-nineteen-page .aiml-nineteen-gates span {
    color: #7dd3fc;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .07em;
}

.aiml-level-nineteen-page .aiml-nineteen-gates strong {
    color: #fde047;
    font-size: 14px;
}

@media (max-width: 1120px) {
    .aiml-level-nineteen-page .aiml-sequence-hero {
        grid-template-columns: minmax(0, 1fr) minmax(340px, .75fr);
    }

    .aiml-level-nineteen-page .aiml-sequence-hero-visual {
        min-height: 450px;
    }

    .aiml-level-nineteen-page .aiml-nineteen-forecast-metrics,
    .aiml-level-nineteen-page .aiml-nineteen-memory-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .aiml-level-nineteen-page .aiml-nineteen-forecast-metrics article:nth-child(n+4),
    .aiml-level-nineteen-page .aiml-nineteen-memory-metrics article:nth-child(n+4) {
        grid-column: span 1;
    }
}

@media (max-width: 900px) {
    .aiml-level-nineteen-page .aiml-sequence-hero {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .aiml-level-nineteen-page .aiml-sequence-hero-visual {
        margin-inline: auto;
        max-width: 650px;
        min-height: 420px;
        width: 100%;
    }
}

@media (max-width: 700px) {
    .aiml-level-nineteen-page .main-content {
        min-width: 0;
        overflow: hidden;
    }

    .aiml-level-nineteen-page .aiml-sequence-hero-visual {
        border-radius: 24px;
        min-height: 385px;
        padding: 16px 12px 112px;
    }

    .aiml-level-nineteen-page .aiml-sequence-hero-note {
        bottom: 13px;
        left: 13px;
        padding: 13px 15px;
        right: 13px;
    }

    .aiml-level-nineteen-page #forecastCanvas {
        height: 470px;
    }

    .aiml-level-nineteen-page #memoryCanvas {
        height: 600px;
    }

    .aiml-level-nineteen-page .aiml-nineteen-forecast-metrics,
    .aiml-level-nineteen-page .aiml-nineteen-memory-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aiml-level-nineteen-page .aiml-nineteen-forecast-metrics article:last-child,
    .aiml-level-nineteen-page .aiml-nineteen-memory-metrics article:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 430px) {
    .aiml-level-nineteen-page .aiml-sequence-hero-visual {
        min-height: 345px;
    }

    .aiml-level-nineteen-page .aiml-sequence-hero-note strong {
        font-size: 14px;
    }

    .aiml-level-nineteen-page .aiml-sequence-hero-note code {
        font-size: 12px;
    }
}

/* =========================================================
   LEVEL 17 — NEURAL NETWORKS
   ========================================================= */

.aiml-level-seventeen-page .aiml-neural-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.28fr) minmax(390px, .78fr);
    align-items: center;
    gap: 28px;
    overflow: hidden;
    border: 1px solid #28527b;
    background:
        radial-gradient(circle at 88% 17%, rgba(236, 72, 153, .20), transparent 31%),
        radial-gradient(circle at 18% 92%, rgba(34, 211, 238, .14), transparent 35%),
        linear-gradient(135deg, #06172a 0%, #0a3458 56%, #27235f 100%);
}

.aiml-level-seventeen-page .aiml-neural-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(125, 211, 252, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 211, 252, .045) 1px, transparent 1px);
    background-size: 42px 42px;
}

.aiml-level-seventeen-page .aiml-neural-hero .aiml-lesson-hero-copy {
    position: relative;
    z-index: 2;
}

.aiml-level-seventeen-page .aiml-neural-hero-visual {
    position: relative;
    z-index: 2;
    min-width: 0;
    min-height: 490px;
    margin-right: 24px;
    overflow: hidden;
    border: 1px solid #35678c;
    border-radius: 30px;
    background: rgba(3, 20, 37, .8);
    box-shadow: 0 22px 48px rgba(1, 10, 24, .38);
}

.aiml-level-seventeen-page .aiml-neural-hero-visual svg {
    display: block;
    width: 100%;
    height: 425px;
}

.aiml-level-seventeen-page .nn-links path {
    fill: none;
    stroke: #315f82;
    stroke-width: 2;
}

.aiml-level-seventeen-page .nn-input circle {
    fill: #0e7490;
    stroke: #67e8f9;
    stroke-width: 2;
}

.aiml-level-seventeen-page .nn-hidden circle {
    fill: #5b21b6;
    stroke: #c4b5fd;
    stroke-width: 2;
    filter: drop-shadow(0 0 8px rgba(167, 139, 250, .35));
}

.aiml-level-seventeen-page .nn-output circle {
    fill: #9a6500;
    stroke: #fde047;
    stroke-width: 2.5;
}

.aiml-level-seventeen-page .nn-signal circle {
    fill: #f8fafc;
    filter: drop-shadow(0 0 9px #22d3ee);
}

.aiml-level-seventeen-page .aiml-neural-hero-visual svg text {
    fill: #a5f3fc;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    font-weight: 900;
    text-anchor: middle;
}

.aiml-level-seventeen-page .aiml-neural-hero-note {
    position: absolute;
    right: 24px;
    bottom: 22px;
    left: 24px;
    display: grid;
    gap: 7px;
    padding: 15px 18px;
    border: 1px solid #3b6382;
    border-radius: 15px;
    background: rgba(5, 20, 38, .95);
}

.aiml-level-seventeen-page .aiml-neural-hero-note span {
    color: #f9a8d4;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .09em;
}

.aiml-level-seventeen-page .aiml-neural-hero-note strong {
    color: #f8fafc;
    font-size: 15px;
}

.aiml-level-seventeen-page .aiml-neural-hero-note code {
    width: max-content;
    max-width: 100%;
    padding: 5px 9px;
    border-radius: 7px;
    background: #f8fafc;
    color: #7c3aed;
    font-size: 14px;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.aiml-level-seventeen-page #neuronCanvas,
.aiml-level-seventeen-page #networkCanvas {
    display: block;
    width: 100%;
    height: 465px;
    background: #061426;
}

.aiml-level-seventeen-page #networkCanvas {
    height: 485px;
}

.aiml-level-seventeen-page .aiml-seventeen-network-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.aiml-level-seventeen-page .aiml-seventeen-equation {
    display: grid;
    gap: 8px;
    margin: 17px 0;
    padding: 15px;
    border: 1px solid #315775;
    border-radius: 12px;
    background: #061426;
}

.aiml-level-seventeen-page .aiml-seventeen-equation code {
    color: #fde047;
    font-size: 15px;
    font-weight: 850;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.aiml-level-seventeen-page .aiml-fifteen-score-stage,
.aiml-level-seventeen-page .aiml-fifteen-tree-stage {
    align-self: stretch;
}

.aiml-level-seventeen-page #networkPredictions article {
    grid-template-columns: minmax(0, 1fr) auto;
}

.aiml-level-seventeen-page #networkPredictions article.is-active {
    border-color: #22d3ee;
    background: #0c2b43;
}

@media (max-width: 1180px) {
    .aiml-level-seventeen-page .aiml-neural-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .aiml-level-seventeen-page .aiml-neural-hero-visual {
        width: calc(100% - 72px);
        max-width: 760px;
        min-height: 490px;
        margin: 0 auto 34px;
    }
}

@media (max-width: 700px) {
    .aiml-level-seventeen-page .main-content {
        font-size: 16px;
    }

    .aiml-level-seventeen-page .aiml-neural-hero-visual {
        width: calc(100% - 28px);
        min-height: 405px;
        margin: 0 14px 22px;
        border-radius: 22px;
    }

    .aiml-level-seventeen-page .aiml-neural-hero-visual svg {
        height: 320px;
    }

    .aiml-level-seventeen-page .aiml-neural-hero-note {
        right: 13px;
        bottom: 14px;
        left: 13px;
        padding: 13px 15px;
    }

    .aiml-level-seventeen-page #neuronCanvas {
        height: 520px;
    }

    .aiml-level-seventeen-page #networkCanvas {
        height: 610px;
    }

    .aiml-level-seventeen-page .aiml-seventeen-network-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 430px) {
    .aiml-level-seventeen-page .aiml-neural-hero-visual {
        min-height: 385px;
    }

    .aiml-level-seventeen-page .aiml-neural-hero-visual svg {
        height: 295px;
    }
}

/* =========================================================
   LEVEL 18 — COMPUTER VISION & CNNs
   ========================================================= */

.aiml-level-eighteen-page .aiml-vision-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(430px, .82fr);
    align-items: center;
    gap: 32px;
    overflow: hidden;
    border: 1px solid #236486;
    background:
        radial-gradient(circle at 88% 16%, rgba(14, 165, 233, .21), transparent 30%),
        radial-gradient(circle at 17% 92%, rgba(250, 204, 21, .12), transparent 34%),
        linear-gradient(135deg, #041629 0%, #073756 55%, #172554 100%);
}

.aiml-level-eighteen-page .aiml-vision-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(125, 211, 252, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 211, 252, .045) 1px, transparent 1px);
    background-size: 38px 38px;
}

.aiml-level-eighteen-page .aiml-vision-hero .aiml-lesson-hero-copy,
.aiml-level-eighteen-page .aiml-vision-hero-visual {
    position: relative;
    z-index: 2;
}

.aiml-level-eighteen-page .aiml-vision-hero-visual {
    display: grid;
    grid-template-columns: 145px 120px 34px 125px;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-width: 0;
    min-height: 475px;
    margin-right: 26px;
    padding: 28px 22px 112px;
    overflow: hidden;
    border: 1px solid #39749a;
    border-radius: 30px;
    background: rgba(3, 20, 37, .84);
    box-shadow: 0 24px 52px rgba(1, 10, 24, .4);
}

.aiml-level-eighteen-page .vision-grid {
    position: relative;
    aspect-ratio: 1;
    border: 1px solid #5ea4ce;
    border-radius: 15px;
    background-color: #09233b;
    background-image:
        linear-gradient(rgba(125, 211, 252, .24) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 211, 252, .24) 1px, transparent 1px),
        radial-gradient(circle at 68% 45%, #facc15 0 7%, #38bdf8 8% 20%, #0b2540 21% 100%);
    background-size: 20% 20%, 20% 20%, 100% 100%;
    box-shadow: inset 0 0 30px rgba(14, 165, 233, .12);
}

.aiml-level-eighteen-page .vision-input-grid::after {
    content: "";
    position: absolute;
    top: 20%;
    right: 20%;
    width: 40%;
    height: 40%;
    border: 3px solid #f472b6;
    border-radius: 4px;
    box-shadow: 0 0 15px rgba(244, 114, 182, .65);
}

.aiml-level-eighteen-page .vision-feature-grid {
    background-image:
        linear-gradient(rgba(125, 211, 252, .25) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 211, 252, .25) 1px, transparent 1px),
        radial-gradient(circle at 58% 47%, #fde047 0 11%, #fb7185 12% 24%, #172554 25% 100%);
    background-size: 25% 25%, 25% 25%, 100% 100%;
}

.aiml-level-eighteen-page .vision-kernel-box {
    display: grid;
    gap: 7px;
    padding: 17px 13px;
    border: 1px solid #ec4899;
    border-radius: 15px;
    background: #0b2038;
    text-align: center;
}

.aiml-level-eighteen-page .vision-kernel-box span {
    color: #7dd3fc;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
}

.aiml-level-eighteen-page .vision-kernel-box strong {
    color: #fde047;
    font-size: 18px;
}

.aiml-level-eighteen-page .vision-kernel-box code {
    color: #f9a8d4;
    font-size: 10px;
    font-weight: 800;
}

.aiml-level-eighteen-page .vision-flow-arrow {
    color: #facc15;
    font-size: 30px;
    font-weight: 900;
    text-align: center;
}

.aiml-level-eighteen-page .aiml-vision-hero-note {
    position: absolute;
    right: 24px;
    bottom: 22px;
    left: 24px;
    display: grid;
    gap: 7px;
    padding: 15px 18px;
    border: 1px solid #3b6382;
    border-radius: 15px;
    background: rgba(5, 20, 38, .96);
}

.aiml-level-eighteen-page .aiml-vision-hero-note span {
    color: #7dd3fc;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .09em;
}

.aiml-level-eighteen-page .aiml-vision-hero-note strong {
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.45;
}

.aiml-level-eighteen-page .aiml-vision-hero-note code {
    width: max-content;
    max-width: 100%;
    padding: 5px 9px;
    border-radius: 7px;
    background: #f8fafc;
    color: #075985;
    font-size: 13px;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.aiml-level-eighteen-page #kernelCanvas,
.aiml-level-eighteen-page #cnnCanvas {
    display: block;
    width: 100%;
    height: 500px;
    background: #061426;
}

.aiml-level-eighteen-page .aiml-eighteen-kernel-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.aiml-level-eighteen-page .aiml-eighteen-cnn-metrics {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.aiml-level-eighteen-page .aiml-eighteen-check {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 11px;
    min-height: 50px;
    padding: 12px 15px;
    border: 1px solid #315775;
    border-radius: 12px;
    background: #061426;
    color: #f8fafc;
    cursor: pointer;
}

.aiml-level-eighteen-page .aiml-eighteen-check input {
    width: 19px;
    height: 19px;
    accent-color: #facc15;
}

.aiml-level-eighteen-page .aiml-eighteen-check span {
    color: #f8fafc;
    font-size: 14px;
    font-weight: 850;
}

.aiml-level-eighteen-page .aiml-eighteen-equation {
    display: grid;
    gap: 8px;
    margin: 17px 0;
    padding: 15px;
    border: 1px solid #315775;
    border-radius: 12px;
    background: #061426;
}

.aiml-level-eighteen-page .aiml-eighteen-equation span {
    color: #7dd3fc;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
}

.aiml-level-eighteen-page .aiml-eighteen-equation code {
    color: #fde047;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.aiml-level-eighteen-page #cnnLayerDetails {
    max-height: 285px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.aiml-level-eighteen-page #cnnLayerDetails article {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
}

.aiml-level-eighteen-page #cnnLayerDetails article strong {
    color: #9fc3df;
    font-size: 12px;
}

.aiml-level-eighteen-page #cnnLayerDetails article.is-active {
    border-color: #facc15;
    background: #17334e;
}

@media (max-width: 1280px) {
    .aiml-level-eighteen-page .aiml-vision-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .aiml-level-eighteen-page .aiml-vision-hero-visual {
        width: calc(100% - 72px);
        max-width: 790px;
        min-height: 475px;
        margin: 0 auto 34px;
    }
}

@media (max-width: 850px) {
    .aiml-level-eighteen-page .aiml-eighteen-kernel-metrics,
    .aiml-level-eighteen-page .aiml-eighteen-cnn-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aiml-level-eighteen-page .aiml-eighteen-cnn-metrics article:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .aiml-level-eighteen-page .main-content {
        font-size: 16px;
    }

    .aiml-level-eighteen-page .aiml-vision-hero-visual {
        grid-template-columns: 100px 94px 26px 90px;
        gap: 8px;
        width: calc(100% - 28px);
        min-height: 400px;
        margin: 0 14px 22px;
        padding: 22px 12px 120px;
        border-radius: 22px;
    }

    .aiml-level-eighteen-page .vision-kernel-box {
        padding: 13px 8px;
    }

    .aiml-level-eighteen-page .vision-kernel-box span,
    .aiml-level-eighteen-page .vision-kernel-box code {
        font-size: 9px;
    }

    .aiml-level-eighteen-page .vision-kernel-box strong {
        font-size: 15px;
    }

    .aiml-level-eighteen-page .aiml-vision-hero-note {
        right: 13px;
        bottom: 14px;
        left: 13px;
        padding: 13px 15px;
    }

    .aiml-level-eighteen-page #kernelCanvas {
        height: 870px;
    }

    .aiml-level-eighteen-page #cnnCanvas {
        height: 760px;
    }
}

@media (max-width: 430px) {
    .aiml-level-eighteen-page .aiml-vision-hero-visual {
        grid-template-columns: 82px 83px 20px 76px;
        min-height: 385px;
    }

    .aiml-level-eighteen-page .aiml-vision-hero-note code {
        font-size: 11px;
    }
}

/* ================================================================
   AI & ML LEVEL 20 — NATURAL LANGUAGE PROCESSING
   ================================================================ */

.aiml-level-twenty-page .aiml-language-hero {
    align-items: center;
    background:
        radial-gradient(circle at 84% 20%, rgba(34, 211, 238, .18), transparent 29%),
        radial-gradient(circle at 74% 92%, rgba(139, 92, 246, .22), transparent 35%),
        linear-gradient(115deg, #06172b 0%, #082945 57%, #102b69 100%);
    display: grid;
    gap: clamp(28px, 4vw, 70px);
    grid-template-columns: minmax(0, 1.18fr) minmax(410px, .82fr);
    min-height: 625px;
    overflow: hidden;
    position: relative;
}

.aiml-level-twenty-page .aiml-language-hero::after {
    background-image:
        linear-gradient(rgba(125, 211, 252, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 211, 252, .045) 1px, transparent 1px);
    background-size: 42px 42px;
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.aiml-level-twenty-page .aiml-language-hero .aiml-lesson-hero-copy,
.aiml-level-twenty-page .aiml-language-hero-visual {
    min-width: 0;
    position: relative;
    z-index: 1;
}

.aiml-level-twenty-page .aiml-language-hero-visual {
    align-items: center;
    background: rgba(3, 19, 36, .9);
    border: 1px solid #285e7d;
    border-radius: 34px;
    display: flex;
    justify-content: center;
    min-height: 515px;
    overflow: hidden;
    padding: 22px 20px 118px;
    position: relative;
}

.aiml-level-twenty-page .aiml-language-hero-visual svg {
    display: block;
    height: auto;
    max-width: 100%;
    overflow: visible;
    width: 590px;
}

.aiml-level-twenty-page .nlp-hero-input rect {
    fill: #102b49;
    stroke: #22d3ee;
    stroke-width: 2;
}

.aiml-level-twenty-page .nlp-hero-input text,
.aiml-level-twenty-page .nlp-hero-tokens text,
.aiml-level-twenty-page .nlp-hero-vector text {
    fill: #f8fafc;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 900;
    text-anchor: middle;
}

.aiml-level-twenty-page .nlp-hero-arrow {
    fill: none;
    marker-end: none;
    stroke: #facc15;
    stroke-linecap: round;
    stroke-width: 5;
}

.aiml-level-twenty-page .nlp-hero-tokens rect {
    fill: #182c5e;
    filter: drop-shadow(0 0 8px rgba(167, 139, 250, .28));
    stroke: #a78bfa;
    stroke-width: 2;
}

.aiml-level-twenty-page .nlp-hero-tokens text {
    fill: #e9ddff;
    font-size: 12px;
}

.aiml-level-twenty-page .nlp-hero-vector > path {
    fill: none;
    stroke: #285271;
    stroke-width: 1.5;
}

.aiml-level-twenty-page .nlp-hero-vector rect {
    fill: #22d3ee;
    filter: drop-shadow(0 0 6px rgba(34, 211, 238, .4));
}

.aiml-level-twenty-page .nlp-hero-vector rect:nth-of-type(2),
.aiml-level-twenty-page .nlp-hero-vector rect:nth-of-type(5) {
    fill: #a78bfa;
}

.aiml-level-twenty-page .nlp-hero-vector rect:nth-of-type(3),
.aiml-level-twenty-page .nlp-hero-vector rect:nth-of-type(6) {
    fill: #facc15;
}

.aiml-level-twenty-page .nlp-hero-vector text {
    fill: #7dd3fc;
    font-size: 11px;
    text-anchor: end;
}

.aiml-level-twenty-page .nlp-hero-caption {
    fill: #67e8f9;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: .1em;
    text-anchor: middle;
}

.aiml-level-twenty-page .aiml-language-hero-note {
    background: rgba(5, 20, 38, .97);
    border: 1px solid #315f7c;
    border-radius: 18px;
    bottom: 23px;
    display: grid;
    gap: 8px;
    left: 25px;
    padding: 16px 20px;
    position: absolute;
    right: 25px;
}

.aiml-level-twenty-page .aiml-language-hero-note span {
    color: #a78bfa;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .11em;
}

.aiml-level-twenty-page .aiml-language-hero-note strong {
    color: #f8fafc;
    font-size: 15px;
    line-height: 1.4;
}

.aiml-level-twenty-page .aiml-language-hero-note code {
    color: #facc15;
    font-size: 14px;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.aiml-level-twenty-page .aiml-twenty-language-grid,
.aiml-level-twenty-page .aiml-twenty-production-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.aiml-level-twenty-page .aiml-twenty-production-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.aiml-level-twenty-page .aiml-twenty-language-grid article,
.aiml-level-twenty-page .aiml-twenty-production-grid article {
    background: linear-gradient(145deg, #ffffff, #f5f8fc);
    border: 1px solid #d2e1ef;
    border-radius: 18px;
    min-width: 0;
    padding: 22px;
}

.aiml-level-twenty-page .aiml-twenty-language-grid span,
.aiml-level-twenty-page .aiml-twenty-production-grid span {
    color: #1d4ed8;
    display: block;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .07em;
}

.aiml-level-twenty-page .aiml-twenty-language-grid strong {
    color: #071d3b;
    display: block;
    font-size: 18px;
    margin-top: 10px;
}

.aiml-level-twenty-page .aiml-twenty-language-grid p,
.aiml-level-twenty-page .aiml-twenty-production-grid p {
    color: #536a82;
    line-height: 1.62;
    margin: 9px 0 0;
    overflow-wrap: break-word;
}

.aiml-level-twenty-page .aiml-twenty-embedding-flow {
    align-items: stretch;
    display: grid;
    gap: 9px;
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr);
}

.aiml-level-twenty-page .aiml-twenty-embedding-flow article {
    background: #fff;
    border: 1px solid #d2e1ef;
    border-radius: 18px;
    min-width: 0;
    padding: 22px 17px;
    text-align: center;
}

.aiml-level-twenty-page .aiml-twenty-embedding-flow span {
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .07em;
}

.aiml-level-twenty-page .aiml-twenty-embedding-flow code {
    color: #7c3aed;
    display: block;
    font-size: 15px;
    font-weight: 900;
    margin-top: 12px;
    overflow-wrap: anywhere;
}

.aiml-level-twenty-page .aiml-twenty-embedding-flow p {
    color: #536a82;
    line-height: 1.5;
    margin: 9px 0 0;
}

.aiml-level-twenty-page .aiml-twenty-embedding-flow > i {
    align-self: center;
    color: #d3a90b;
    font-size: 24px;
    font-style: normal;
    font-weight: 900;
    text-align: center;
}

.aiml-level-twenty-page .aiml-fifteen-lab-section {
    background: #061426;
    border-color: #244663;
    overflow: hidden;
    padding: 0;
}

.aiml-level-twenty-page .aiml-fifteen-lab-heading {
    align-items: center;
    background: #0b2038;
    border-bottom: 1px solid #294967;
    display: flex;
    gap: 22px;
    justify-content: space-between;
    padding: 27px 30px;
}

.aiml-level-twenty-page .aiml-fifteen-lab-heading > div {
    min-width: 0;
}

.aiml-level-twenty-page .aiml-fifteen-lab-heading span {
    color: #7dd3fc;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .08em;
}

.aiml-level-twenty-page .aiml-fifteen-lab-heading h2 {
    color: #fff;
    font-size: clamp(27px, 3vw, 42px);
    margin: 7px 0;
}

.aiml-level-twenty-page .aiml-fifteen-lab-heading p {
    color: #b9cee2;
    line-height: 1.6;
    margin: 0;
    max-width: 980px;
}

.aiml-level-twenty-page .aiml-fifteen-lab-heading > strong {
    background: rgba(6, 182, 212, .12);
    border: 1px solid rgba(34, 211, 238, .42);
    border-radius: 999px;
    color: #a5f3fc;
    flex: 0 0 auto;
    font-size: 11px;
    letter-spacing: .06em;
    padding: 8px 13px;
    white-space: nowrap;
}

.aiml-level-twenty-page #tokenCanvas,
.aiml-level-twenty-page #semanticCanvas {
    background: #061426;
    display: block;
    max-width: 100%;
    touch-action: manipulation;
    width: 100%;
}

.aiml-level-twenty-page .aiml-twenty-token-metrics,
.aiml-level-twenty-page .aiml-twenty-semantic-metrics {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.aiml-level-twenty-page .aiml-fifteen-controls label > strong {
    color: #facc15;
    display: block;
    font-size: 15px;
    margin-top: 6px;
}

.aiml-level-twenty-page .aiml-eighteen-equation,
.aiml-level-twenty-page .aiml-twenty-evidence,
.aiml-level-twenty-page .aiml-twenty-neighbors {
    background: #061426;
    border: 1px solid #315775;
    border-radius: 12px;
    display: grid;
    gap: 8px;
    margin: 16px 0;
    padding: 15px;
}

.aiml-level-twenty-page .aiml-eighteen-equation span,
.aiml-level-twenty-page .aiml-twenty-evidence span,
.aiml-level-twenty-page .aiml-twenty-neighbors span {
    color: #7dd3fc;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .08em;
}

.aiml-level-twenty-page .aiml-eighteen-equation code {
    color: #fde047;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.aiml-level-twenty-page .aiml-twenty-evidence strong,
.aiml-level-twenty-page .aiml-twenty-neighbors strong {
    color: #dbeafe;
    font-size: 13px;
    line-height: 1.58;
    overflow-wrap: anywhere;
}

@media (max-width: 1260px) {
    .aiml-level-twenty-page .aiml-language-hero {
        grid-template-columns: minmax(0, 1.1fr) minmax(360px, .76fr);
    }

    .aiml-level-twenty-page .aiml-twenty-language-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aiml-level-twenty-page .aiml-twenty-token-metrics,
    .aiml-level-twenty-page .aiml-twenty-semantic-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .aiml-level-twenty-page .aiml-language-hero {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .aiml-level-twenty-page .aiml-language-hero-visual {
        margin-inline: auto;
        max-width: 680px;
        min-height: 430px;
        width: 100%;
    }

    .aiml-level-twenty-page .aiml-twenty-production-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aiml-level-twenty-page .aiml-twenty-embedding-flow {
        grid-template-columns: repeat(4, minmax(210px, 1fr));
        overflow-x: auto;
        padding-bottom: 12px;
    }

    .aiml-level-twenty-page .aiml-twenty-embedding-flow > i {
        display: none;
    }
}

@media (max-width: 700px) {
    .aiml-level-twenty-page .main-content {
        min-width: 0;
        overflow: hidden;
    }

    .aiml-level-twenty-page .aiml-language-hero-visual {
        border-radius: 24px;
        min-height: 390px;
        padding: 13px 9px 112px;
    }

    .aiml-level-twenty-page .aiml-language-hero-visual svg {
        width: 520px;
    }

    .aiml-level-twenty-page .aiml-language-hero-note {
        bottom: 13px;
        left: 13px;
        padding: 13px 15px;
        right: 13px;
    }

    .aiml-level-twenty-page .aiml-fifteen-lab-heading {
        align-items: flex-start;
        flex-direction: column;
        padding: 20px 18px;
    }

    .aiml-level-twenty-page .aiml-fifteen-lab-heading > strong {
        white-space: normal;
    }

    .aiml-level-twenty-page .aiml-twenty-language-grid,
    .aiml-level-twenty-page .aiml-twenty-production-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .aiml-level-twenty-page #tokenCanvas {
        height: 570px;
    }

    .aiml-level-twenty-page #semanticCanvas {
        height: 630px;
    }

    .aiml-level-twenty-page .aiml-twenty-token-metrics,
    .aiml-level-twenty-page .aiml-twenty-semantic-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aiml-level-twenty-page .aiml-twenty-token-metrics article:last-child,
    .aiml-level-twenty-page .aiml-twenty-semantic-metrics article:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 430px) {
    .aiml-level-twenty-page .aiml-language-hero-visual {
        min-height: 360px;
    }

    .aiml-level-twenty-page .aiml-language-hero-note strong {
        font-size: 13px;
    }

    .aiml-level-twenty-page .aiml-language-hero-note code {
        font-size: 12px;
    }

    .aiml-level-twenty-page .aiml-twenty-token-metrics,
    .aiml-level-twenty-page .aiml-twenty-semantic-metrics {
        grid-template-columns: minmax(0, 1fr);
    }

    .aiml-level-twenty-page .aiml-twenty-token-metrics article:last-child,
    .aiml-level-twenty-page .aiml-twenty-semantic-metrics article:last-child {
        grid-column: auto;
    }
}

/* Level 24 — Reinforcement Learning (final cascade scope). */
.aiml-level-twenty-four-page .aiml-rl-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1.35fr) minmax(440px,.9fr);
    min-height: 610px;
    overflow: hidden;
    border: 1px solid #24506b;
    border-radius: 28px;
    background: radial-gradient(circle at 86% 8%, rgba(16,185,129,.22), transparent 31%), linear-gradient(135deg,#06172a 0%,#0a3552 58%,#173768 100%);
    color: #fff;
}
.aiml-level-twenty-four-page .aiml-rl-hero::before {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(92,181,229,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(92,181,229,.055) 1px,transparent 1px);
    background-size: 42px 42px;
    content: "";
    pointer-events: none;
}
.aiml-level-twenty-four-page .aiml-rl-hero .aiml-lesson-hero-copy,
.aiml-level-twenty-four-page .aiml-rl-hero-visual { position: relative; z-index: 1; }
.aiml-level-twenty-four-page .aiml-rl-hero-visual {
    align-self: center;
    width: calc(100% - 54px);
    margin: 27px 27px 27px 0;
    padding: 30px;
    border: 1px solid #315f7e;
    border-radius: 28px;
    background: rgba(4,22,41,.92);
    box-shadow: 0 26px 70px rgba(0,0,0,.25);
}
.aiml-level-twenty-four-page .aiml-rl-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 8px;
}
.aiml-level-twenty-four-page .aiml-rl-grid span {
    display: grid;
    min-height: 74px;
    place-items: center;
    border: 1px solid #315f7e;
    border-radius: 13px;
    background: #0b2945;
    color: #bfeaff;
    font-size: 22px;
    font-weight: 900;
}
.aiml-level-twenty-four-page .aiml-rl-grid .start { border-color: #22d3ee; color: #22d3ee; }
.aiml-level-twenty-four-page .aiml-rl-grid .goal { border-color: #45e3a2; background: #105238; color: #d8ffef; }
.aiml-level-twenty-four-page .aiml-rl-grid .danger { border-color: #fb7185; background: #6c2431; color: #fff; }
.aiml-level-twenty-four-page .aiml-rl-grid .wall { border-color: #23384e; background: #020a14; color: #64748b; }
.aiml-level-twenty-four-page .aiml-rl-loop { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 22px 0; color: #d7eaff; }
.aiml-level-twenty-four-page .aiml-rl-loop b { padding: 8px 10px; border-radius: 9px; background: #12314f; font-size: 10px; letter-spacing: .05em; }
.aiml-level-twenty-four-page .aiml-rl-loop i { color: #facc15; font-style: normal; font-weight: 900; }
.aiml-level-twenty-four-page .aiml-rl-hero-note { padding: 18px 20px; border: 1px solid #315f7e; border-radius: 18px; background: #07182c; }
.aiml-level-twenty-four-page .aiml-rl-hero-note span { display: block; color: #7dd3fc; font-size: 11px; font-weight: 950; letter-spacing: .09em; }
.aiml-level-twenty-four-page .aiml-rl-hero-note strong { display: block; margin: 9px 0; color: #eff7ff; line-height: 1.5; }
.aiml-level-twenty-four-page .aiml-rl-hero-note code { display: block; padding: 8px 10px; overflow-wrap: anywhere; border-radius: 8px; background: #eef6ff; color: #1361c8; font-size: 12px; font-weight: 900; white-space: normal; }

.aiml-level-twenty-four-page .aiml-twenty-four-loop-grid,
.aiml-level-twenty-four-page .aiml-twenty-four-mdp-grid,
.aiml-level-twenty-four-page .aiml-twenty-four-value-grid,
.aiml-level-twenty-four-page .aiml-twenty-four-deep-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 14px;
    margin-top: 22px;
}
.aiml-level-twenty-four-page .aiml-twenty-four-bellman { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 22px; }
.aiml-level-twenty-four-page .aiml-twenty-four-learning-grid,
.aiml-level-twenty-four-page .aiml-twenty-four-control-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-top: 22px; }
.aiml-level-twenty-four-page .aiml-twenty-four-loop-grid article,
.aiml-level-twenty-four-page .aiml-twenty-four-mdp-grid article,
.aiml-level-twenty-four-page .aiml-twenty-four-value-grid article,
.aiml-level-twenty-four-page .aiml-twenty-four-bellman article,
.aiml-level-twenty-four-page .aiml-twenty-four-learning-grid article,
.aiml-level-twenty-four-page .aiml-twenty-four-control-grid article,
.aiml-level-twenty-four-page .aiml-twenty-four-deep-grid article {
    min-width: 0;
    padding: 20px;
    border: 1px solid #cbdced;
    border-top: 4px solid #0ea5a5;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(7,29,59,.05);
}
.aiml-level-twenty-four-page .aiml-twenty-four-mdp-grid article { border-top-color: #2563eb; }
.aiml-level-twenty-four-page .aiml-twenty-four-value-grid article { border-top-color: #8b5cf6; }
.aiml-level-twenty-four-page .aiml-twenty-four-bellman article { border-top-color: #e3ad16; }
.aiml-level-twenty-four-page .aiml-twenty-four-learning-grid article { border-top-color: #f97316; }
.aiml-level-twenty-four-page .aiml-twenty-four-control-grid article { border-top-color: #16a34a; }
.aiml-level-twenty-four-page .aiml-twenty-four-deep-grid article { border-top-color: #dc4b6b; }
.aiml-level-twenty-four-page .aiml-twenty-four-loop-grid span,
.aiml-level-twenty-four-page .aiml-twenty-four-mdp-grid span,
.aiml-level-twenty-four-page .aiml-twenty-four-value-grid span,
.aiml-level-twenty-four-page .aiml-twenty-four-bellman span,
.aiml-level-twenty-four-page .aiml-twenty-four-learning-grid span,
.aiml-level-twenty-four-page .aiml-twenty-four-control-grid span,
.aiml-level-twenty-four-page .aiml-twenty-four-deep-grid span { display: block; color: #1954c6; font-size: 11px; font-weight: 950; letter-spacing: .08em; }
.aiml-level-twenty-four-page .aiml-twenty-four-loop-grid strong,
.aiml-level-twenty-four-page .aiml-twenty-four-value-grid strong,
.aiml-level-twenty-four-page .aiml-twenty-four-control-grid strong,
.aiml-level-twenty-four-page .aiml-twenty-four-deep-grid strong { display: block; margin-top: 8px; color: #071d3b; font-size: 17px; line-height: 1.35; }
.aiml-level-twenty-four-page .aiml-twenty-four-loop-grid p,
.aiml-level-twenty-four-page .aiml-twenty-four-mdp-grid p,
.aiml-level-twenty-four-page .aiml-twenty-four-value-grid p,
.aiml-level-twenty-four-page .aiml-twenty-four-bellman p,
.aiml-level-twenty-four-page .aiml-twenty-four-learning-grid p,
.aiml-level-twenty-four-page .aiml-twenty-four-control-grid p,
.aiml-level-twenty-four-page .aiml-twenty-four-deep-grid p { margin: 8px 0 0; color: #526a82; line-height: 1.55; }
.aiml-level-twenty-four-page .aiml-twenty-four-mdp-grid code,
.aiml-level-twenty-four-page .aiml-twenty-four-value-grid code,
.aiml-level-twenty-four-page .aiml-twenty-four-bellman code,
.aiml-level-twenty-four-page .aiml-twenty-four-learning-grid code,
.aiml-level-twenty-four-page .aiml-twenty-four-control-grid code {
    display: block;
    margin-top: 11px;
    padding: 9px;
    overflow-wrap: anywhere;
    border-radius: 8px;
    background: #eef5ff;
    color: #6d28d9;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.55;
    white-space: normal;
}

.aiml-level-twenty-four-page .aiml-fifteen-lab-section { padding: 0; overflow: hidden; border-color: #244663; background: #061426; }
.aiml-level-twenty-four-page .aiml-fifteen-lab-heading { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 27px 30px; border-bottom: 1px solid #294967; background: #0b2038; }
.aiml-level-twenty-four-page .aiml-fifteen-lab-heading > div { min-width: 0; }
.aiml-level-twenty-four-page .aiml-fifteen-lab-heading span { color: #7dd3fc; font-size: 12px; font-weight: 950; letter-spacing: .08em; }
.aiml-level-twenty-four-page .aiml-fifteen-lab-heading h2 { margin: 7px 0; color: #fff; font-size: clamp(27px,3vw,42px); line-height: 1.14; }
.aiml-level-twenty-four-page .aiml-fifteen-lab-heading p { max-width: 930px; margin: 0; color: #b8d9f4; line-height: 1.55; }
.aiml-level-twenty-four-page .aiml-fifteen-lab-heading > strong { flex: 0 0 auto; padding: 12px 17px; border: 1px solid #0891b2; border-radius: 999px; color: #67e8f9; font-size: 11px; letter-spacing: .05em; white-space: nowrap; }
.aiml-level-twenty-four-page .aiml-fifteen-lab-grid { display: grid; grid-template-columns: minmax(230px,.62fr) minmax(480px,1.45fr) minmax(270px,.78fr); gap: 16px; padding: 22px; background: #061426; }
.aiml-level-twenty-four-page .aiml-fifteen-controls,
.aiml-level-twenty-four-page .aiml-fifteen-stage,
.aiml-level-twenty-four-page .aiml-fifteen-inspector { min-width: 0; overflow: hidden; border: 1px solid #2b4a67; border-radius: 18px; background: #0a1d33; }
.aiml-level-twenty-four-page .aiml-fifteen-controls,
.aiml-level-twenty-four-page .aiml-fifteen-inspector { padding: 20px; }
.aiml-level-twenty-four-page .aiml-fifteen-controls { display: flex; flex-direction: column; gap: 13px; }
.aiml-level-twenty-four-page .aiml-fifteen-controls label { color: #93c5fd; font-size: 13px; font-weight: 850; letter-spacing: .035em; }
.aiml-level-twenty-four-page .aiml-fifteen-controls select { display: block; width: 100%; min-height: 43px; margin-top: 7px; padding: 8px 10px; border: 1px solid #3b5b76; border-radius: 10px; background: #07182c; color: #f8fafc; font: inherit; }
.aiml-level-twenty-four-page .aiml-fifteen-controls button { width: 100%; min-height: 43px; padding: 9px 13px; border: 1px solid #4f718e; border-radius: 10px; background: #1d3348; color: #fff; font: inherit; font-weight: 850; cursor: pointer; }
.aiml-level-twenty-four-page .aiml-fifteen-controls button:hover { background: #29475f; }
.aiml-level-twenty-four-page .aiml-fifteen-controls button:disabled { cursor: not-allowed; opacity: .45; }
.aiml-level-twenty-four-page .aiml-fifteen-controls .aiml-lab-primary { border-color: #e2b827; background: #e6be36; color: #061426; box-shadow: 0 13px 24px rgba(230,190,54,.14); }
.aiml-level-twenty-four-page .aiml-fifteen-controls > p { margin: 3px 0 0; color: #91a9c0; font-size: 14px; line-height: 1.55; }
.aiml-level-twenty-four-page #mdpCanvas,
.aiml-level-twenty-four-page #qCanvas { display: block; width: 100%; height: 500px; background: #07192d; }
.aiml-level-twenty-four-page .aiml-fifteen-metrics { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 1px; border-top: 1px solid #2b4a67; background: #2b4a67; }
.aiml-level-twenty-four-page .aiml-fifteen-metrics article { min-width: 0; padding: 13px 8px; background: #0b2038; text-align: center; }
.aiml-level-twenty-four-page .aiml-fifteen-metrics span,
.aiml-level-twenty-four-page .aiml-fifteen-inspector > span { display: block; color: #7dd3fc; font-size: 10px; font-weight: 900; letter-spacing: .07em; }
.aiml-level-twenty-four-page .aiml-fifteen-metrics strong { display: block; margin-top: 4px; overflow-wrap: anywhere; color: #f8fafc; font-size: 14px; }
.aiml-level-twenty-four-page .aiml-fifteen-inspector h3 { margin: 10px 0 0; color: #f8fafc; font-size: 19px; line-height: 1.42; }
.aiml-level-twenty-four-page .aiml-fifteen-inspector > p { color: #b5c7d8; font-size: 14px; line-height: 1.62; }
.aiml-level-twenty-four-page .aiml-twenty-four-equation,
.aiml-level-twenty-four-page .aiml-twenty-four-evidence { display: grid; gap: 8px; min-width: 0; margin: 17px 0; padding: 15px; border: 1px solid #315775; border-radius: 12px; background: #061426; }
.aiml-level-twenty-four-page .aiml-twenty-four-equation span,
.aiml-level-twenty-four-page .aiml-twenty-four-evidence span,
.aiml-level-twenty-four-page .aiml-fifteen-next span { color: #7dd3fc; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.aiml-level-twenty-four-page .aiml-twenty-four-equation code { color: #fde047; font-size: 12px; font-weight: 850; line-height: 1.55; overflow-wrap: anywhere; white-space: normal; }
.aiml-level-twenty-four-page .aiml-twenty-four-evidence strong { color: #a7f3d0; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.aiml-level-twenty-four-page .aiml-fifteen-next { margin-top: 17px; padding: 15px; border-left: 5px solid #22d3ee; border-radius: 11px; background: #eef7ff; }
.aiml-level-twenty-four-page .aiml-fifteen-next span { color: #155eef; }
.aiml-level-twenty-four-page .aiml-fifteen-next strong { display: block; margin-top: 7px; color: #0d355f; font-size: 14px; line-height: 1.52; }

.aiml-level-twenty-four-page .aiml-code-lines { height: 360px; }
.aiml-level-twenty-four-page .aiml-code-panel,
.aiml-level-twenty-four-page .aiml-live-panel { height: 409px; }
.aiml-level-twenty-four-page .aiml-live-panel { overflow-y: auto; scrollbar-width: thin; }
.aiml-level-twenty-four-page .aiml-variable code { line-height: 1.45; overflow-wrap: anywhere; white-space: normal; word-break: break-word; }
.aiml-level-twenty-four-page .aiml-problem-data span { max-width: 100%; overflow-wrap: anywhere; }
.aiml-level-twenty-four-page .aiml-workspace textarea { box-sizing: border-box; display: block; min-height: 210px; }
.aiml-level-twenty-four-page .aiml-quiz-option span,
.aiml-level-twenty-four-page .aiml-interview-question strong { min-width: 0; overflow-wrap: break-word; word-break: normal; }

@media (max-width: 1280px) {
    .aiml-level-twenty-four-page .aiml-rl-hero { grid-template-columns: minmax(0,1fr); }
    .aiml-level-twenty-four-page .aiml-rl-hero-visual { width: calc(100% - 72px); max-width: 780px; margin: 0 auto 36px; }
    .aiml-level-twenty-four-page .aiml-fifteen-lab-grid { grid-template-columns: minmax(220px,.62fr) minmax(0,1.38fr); }
    .aiml-level-twenty-four-page .aiml-fifteen-inspector { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
    .aiml-level-twenty-four-page .aiml-twenty-four-loop-grid,
    .aiml-level-twenty-four-page .aiml-twenty-four-mdp-grid,
    .aiml-level-twenty-four-page .aiml-twenty-four-value-grid,
    .aiml-level-twenty-four-page .aiml-twenty-four-deep-grid,
    .aiml-level-twenty-four-page .aiml-twenty-four-learning-grid,
    .aiml-level-twenty-four-page .aiml-twenty-four-control-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .aiml-level-twenty-four-page .aiml-fifteen-lab-grid { grid-template-columns: minmax(0,1fr); }
    .aiml-level-twenty-four-page .aiml-fifteen-inspector { grid-column: auto; }
    .aiml-level-twenty-four-page .aiml-code-panel,
    .aiml-level-twenty-four-page .aiml-live-panel { height: auto; }
    .aiml-level-twenty-four-page .aiml-live-panel { max-height: none; }
    .aiml-level-twenty-four-page .aiml-code-lines { height: 390px; }
}
@media (max-width: 700px) {
    .aiml-level-twenty-four-page .main-content { font-size: 16px; }
    .aiml-level-twenty-four-page .aiml-rl-hero-visual { width: calc(100% - 32px); margin: 0 16px 20px; padding: 16px; border-radius: 20px; }
    .aiml-level-twenty-four-page .aiml-rl-grid span { min-height: 56px; font-size: 17px; }
    .aiml-level-twenty-four-page .aiml-rl-loop { flex-wrap: wrap; }
    .aiml-level-twenty-four-page .aiml-fifteen-lab-heading { align-items: flex-start; flex-direction: column; padding: 22px 18px; }
    .aiml-level-twenty-four-page .aiml-fifteen-lab-heading > strong { white-space: normal; }
    .aiml-level-twenty-four-page .aiml-fifteen-lab-grid { padding: 12px; }
    .aiml-level-twenty-four-page .aiml-fifteen-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .aiml-level-twenty-four-page .aiml-fifteen-metrics article:last-child { grid-column: 1 / -1; }
    .aiml-level-twenty-four-page .aiml-twenty-four-loop-grid,
    .aiml-level-twenty-four-page .aiml-twenty-four-mdp-grid,
    .aiml-level-twenty-four-page .aiml-twenty-four-value-grid,
    .aiml-level-twenty-four-page .aiml-twenty-four-deep-grid,
    .aiml-level-twenty-four-page .aiml-twenty-four-learning-grid,
    .aiml-level-twenty-four-page .aiml-twenty-four-control-grid,
    .aiml-level-twenty-four-page .aiml-twenty-four-bellman,
    .aiml-level-twenty-four-page .aiml-quiz-options { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 480px) {
    .aiml-level-twenty-four-page .aiml-rl-hero-note { padding: 14px; }
    .aiml-level-twenty-four-page .aiml-code-lines { height: 350px; }
}

/* Level 22 cascade-safe laboratory layout. */
.aiml-level-twenty-two-page .aiml-twenty-two-rag-metrics,
.aiml-level-twenty-two-page .aiml-twenty-two-agent-metrics {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 850px) {
    .aiml-level-twenty-two-page .aiml-twenty-two-rag-metrics,
    .aiml-level-twenty-two-page .aiml-twenty-two-agent-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aiml-level-twenty-two-page .aiml-twenty-two-rag-metrics article:last-child,
    .aiml-level-twenty-two-page .aiml-twenty-two-agent-metrics article:last-child {
        grid-column: 1 / -1;
    }
}

/* Level 22 tracer and practice alignment with the CodeBhavya lesson system. */
.aiml-level-twenty-two-page .aiml-code-lines {
    height: 360px;
}

.aiml-level-twenty-two-page .aiml-code-panel,
.aiml-level-twenty-two-page .aiml-live-panel {
    height: 409px;
}

.aiml-level-twenty-two-page .aiml-live-panel {
    overflow-y: auto;
    scrollbar-width: thin;
}

.aiml-level-twenty-two-page .aiml-variable code {
    line-height: 1.45;
    overflow-wrap: anywhere;
    white-space: normal;
    word-break: break-word;
}

.aiml-level-twenty-two-page .aiml-problem-data span {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.aiml-level-twenty-two-page .aiml-workspace textarea {
    box-sizing: border-box;
    display: block;
    min-height: 210px;
}

.aiml-level-twenty-two-page .aiml-quiz-option span,
.aiml-level-twenty-two-page .aiml-interview-question strong {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: normal;
}

@media (max-width: 980px) {
    .aiml-level-twenty-two-page .aiml-code-panel,
    .aiml-level-twenty-two-page .aiml-live-panel {
        height: auto;
    }

    .aiml-level-twenty-two-page .aiml-live-panel {
        max-height: 430px;
    }
}

@media (max-width: 700px) {
    .aiml-level-twenty-two-page .aiml-code-lines {
        height: 330px;
    }

    .aiml-level-twenty-two-page .aiml-quiz-options {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Level 25 — MLOps, Deployment & Responsible AI (final cascade scope). */
.aiml-level-twenty-five-page .aiml-mlops-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.28fr) minmax(470px, .95fr);
    min-height: 630px;
    overflow: hidden;
    border: 1px solid #23506d;
    border-radius: 28px;
    background: radial-gradient(circle at 86% 6%, rgba(14, 165, 233, .24), transparent 31%), linear-gradient(135deg, #06172a 0%, #0a3856 57%, #1e326d 100%);
    color: #fff;
}

.aiml-level-twenty-five-page .aiml-mlops-hero::before {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(99, 190, 229, .052) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 190, 229, .052) 1px, transparent 1px);
    background-size: 42px 42px;
    content: "";
    pointer-events: none;
}

.aiml-level-twenty-five-page .aiml-mlops-hero .aiml-lesson-hero-copy,
.aiml-level-twenty-five-page .aiml-mlops-hero-visual {
    position: relative;
    z-index: 1;
}

.aiml-level-twenty-five-page .aiml-mlops-hero-visual {
    align-self: center;
    width: calc(100% - 54px);
    margin: 27px 27px 27px 0;
    padding: 28px;
    border: 1px solid #315f7e;
    border-radius: 28px;
    background: rgba(4, 22, 41, .94);
    box-shadow: 0 26px 70px rgba(0, 0, 0, .27);
}

.aiml-level-twenty-five-page .aiml-mlops-pipeline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.aiml-level-twenty-five-page .aiml-mlops-pipeline > span {
    display: grid;
    min-width: 70px;
    min-height: 70px;
    padding: 8px;
    place-items: center;
    align-content: center;
    border: 1px solid #315f7e;
    border-radius: 13px;
    background: #0b2945;
    color: #dceeff;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .04em;
}

.aiml-level-twenty-five-page .aiml-mlops-pipeline > span small {
    display: block;
    margin-top: 7px;
    color: #8fb8d4;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0;
}

.aiml-level-twenty-five-page .aiml-mlops-pipeline > span.done {
    border-color: #34d399;
    background: #0e493e;
}

.aiml-level-twenty-five-page .aiml-mlops-pipeline > span.current {
    border-color: #facc15;
    background: #173f73;
    box-shadow: 0 0 24px rgba(250, 204, 21, .18);
}

.aiml-level-twenty-five-page .aiml-mlops-pipeline > i {
    color: #facc15;
    font-style: normal;
    font-weight: 950;
}

.aiml-level-twenty-five-page .aiml-mlops-signals {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 22px 0;
}

.aiml-level-twenty-five-page .aiml-mlops-signals article {
    min-width: 0;
    padding: 13px 8px;
    border: 1px solid #284963;
    border-radius: 11px;
    background: #07182c;
    text-align: center;
}

.aiml-level-twenty-five-page .aiml-mlops-signals b,
.aiml-level-twenty-five-page .aiml-mlops-signals strong {
    display: block;
}

.aiml-level-twenty-five-page .aiml-mlops-signals b {
    color: #7dd3fc;
    font-size: 9px;
    letter-spacing: .06em;
}

.aiml-level-twenty-five-page .aiml-mlops-signals strong {
    margin-top: 5px;
    color: #f8fafc;
    font-size: 15px;
}

.aiml-level-twenty-five-page .aiml-mlops-hero-note {
    padding: 18px 20px;
    border: 1px solid #315f7e;
    border-radius: 18px;
    background: #07182c;
}

.aiml-level-twenty-five-page .aiml-mlops-hero-note span {
    display: block;
    color: #7dd3fc;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .09em;
}

.aiml-level-twenty-five-page .aiml-mlops-hero-note strong {
    display: block;
    margin: 9px 0;
    color: #eff7ff;
    line-height: 1.5;
}

.aiml-level-twenty-five-page .aiml-mlops-hero-note code {
    display: block;
    padding: 8px 10px;
    overflow-wrap: anywhere;
    border-radius: 8px;
    background: #eef6ff;
    color: #1361c8;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.45;
    white-space: normal;
}

.aiml-level-twenty-five-page .aiml-twenty-five-four-grid,
.aiml-level-twenty-five-page .aiml-twenty-five-serving-grid,
.aiml-level-twenty-five-page .aiml-twenty-five-responsibility-grid,
.aiml-level-twenty-five-page .aiml-twenty-five-governance-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
}

.aiml-level-twenty-five-page .aiml-twenty-five-lineage-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-top: 22px;
}

.aiml-level-twenty-five-page .aiml-twenty-five-three-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
}

.aiml-level-twenty-five-page .aiml-twenty-five-monitor-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
}

.aiml-level-twenty-five-page .aiml-twenty-five-four-grid article,
.aiml-level-twenty-five-page .aiml-twenty-five-lineage-grid article,
.aiml-level-twenty-five-page .aiml-twenty-five-three-grid article,
.aiml-level-twenty-five-page .aiml-twenty-five-serving-grid article,
.aiml-level-twenty-five-page .aiml-twenty-five-monitor-grid article,
.aiml-level-twenty-five-page .aiml-twenty-five-responsibility-grid article,
.aiml-level-twenty-five-page .aiml-twenty-five-governance-grid article {
    min-width: 0;
    padding: 20px;
    border: 1px solid #cbdced;
    border-top: 4px solid #0ea5a5;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(7, 29, 59, .05);
}

.aiml-level-twenty-five-page .aiml-twenty-five-lineage-grid article { border-top-color: #2563eb; }
.aiml-level-twenty-five-page .aiml-twenty-five-three-grid article { border-top-color: #8b5cf6; }
.aiml-level-twenty-five-page .aiml-twenty-five-serving-grid article { border-top-color: #e3ad16; }
.aiml-level-twenty-five-page .aiml-twenty-five-monitor-grid article { border-top-color: #f97316; }
.aiml-level-twenty-five-page .aiml-twenty-five-responsibility-grid article { border-top-color: #16a34a; }
.aiml-level-twenty-five-page .aiml-twenty-five-governance-grid article { border-top-color: #dc4b6b; }

.aiml-level-twenty-five-page .aiml-twenty-five-four-grid span,
.aiml-level-twenty-five-page .aiml-twenty-five-lineage-grid span,
.aiml-level-twenty-five-page .aiml-twenty-five-three-grid span,
.aiml-level-twenty-five-page .aiml-twenty-five-serving-grid span,
.aiml-level-twenty-five-page .aiml-twenty-five-monitor-grid span,
.aiml-level-twenty-five-page .aiml-twenty-five-responsibility-grid span,
.aiml-level-twenty-five-page .aiml-twenty-five-governance-grid span {
    display: block;
    color: #1954c6;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .08em;
}

.aiml-level-twenty-five-page .aiml-twenty-five-four-grid strong,
.aiml-level-twenty-five-page .aiml-twenty-five-three-grid strong,
.aiml-level-twenty-five-page .aiml-twenty-five-serving-grid strong,
.aiml-level-twenty-five-page .aiml-twenty-five-responsibility-grid strong,
.aiml-level-twenty-five-page .aiml-twenty-five-governance-grid strong {
    display: block;
    margin-top: 8px;
    color: #071d3b;
    font-size: 17px;
    line-height: 1.35;
}

.aiml-level-twenty-five-page .aiml-twenty-five-four-grid p,
.aiml-level-twenty-five-page .aiml-twenty-five-lineage-grid p,
.aiml-level-twenty-five-page .aiml-twenty-five-three-grid p,
.aiml-level-twenty-five-page .aiml-twenty-five-serving-grid p,
.aiml-level-twenty-five-page .aiml-twenty-five-monitor-grid p,
.aiml-level-twenty-five-page .aiml-twenty-five-responsibility-grid p,
.aiml-level-twenty-five-page .aiml-twenty-five-governance-grid p {
    margin: 8px 0 0;
    color: #526a82;
    line-height: 1.55;
}

.aiml-level-twenty-five-page .aiml-twenty-five-lineage-grid code,
.aiml-level-twenty-five-page .aiml-twenty-five-three-grid code,
.aiml-level-twenty-five-page .aiml-twenty-five-monitor-grid code {
    display: block;
    margin-top: 11px;
    padding: 9px;
    overflow-wrap: anywhere;
    border-radius: 8px;
    background: #eef5ff;
    color: #6d28d9;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.55;
    white-space: normal;
}

.aiml-level-twenty-five-page .aiml-fifteen-lab-section {
    padding: 0;
    overflow: hidden;
    border-color: #244663;
    background: #061426;
}

.aiml-level-twenty-five-page .aiml-fifteen-lab-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 27px 30px;
    border-bottom: 1px solid #294967;
    background: #0b2038;
}

.aiml-level-twenty-five-page .aiml-fifteen-lab-heading > div { min-width: 0; }
.aiml-level-twenty-five-page .aiml-fifteen-lab-heading span { color: #7dd3fc; font-size: 12px; font-weight: 950; letter-spacing: .08em; }
.aiml-level-twenty-five-page .aiml-fifteen-lab-heading h2 { margin: 7px 0; color: #fff; font-size: clamp(27px, 3vw, 42px); line-height: 1.14; }
.aiml-level-twenty-five-page .aiml-fifteen-lab-heading p { max-width: 930px; margin: 0; color: #b8d9f4; line-height: 1.55; }
.aiml-level-twenty-five-page .aiml-fifteen-lab-heading > strong { flex: 0 0 auto; padding: 12px 17px; border: 1px solid #0891b2; border-radius: 999px; color: #67e8f9; font-size: 11px; letter-spacing: .05em; white-space: nowrap; }

.aiml-level-twenty-five-page .aiml-fifteen-lab-grid {
    display: grid;
    grid-template-columns: minmax(230px, .62fr) minmax(480px, 1.45fr) minmax(270px, .78fr);
    gap: 16px;
    padding: 22px;
    background: #061426;
}

.aiml-level-twenty-five-page .aiml-fifteen-controls,
.aiml-level-twenty-five-page .aiml-fifteen-stage,
.aiml-level-twenty-five-page .aiml-fifteen-inspector {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #2b4a67;
    border-radius: 18px;
    background: #0a1d33;
}

.aiml-level-twenty-five-page .aiml-fifteen-controls,
.aiml-level-twenty-five-page .aiml-fifteen-inspector { padding: 20px; }
.aiml-level-twenty-five-page .aiml-fifteen-controls { display: flex; flex-direction: column; gap: 13px; }
.aiml-level-twenty-five-page .aiml-fifteen-controls label { color: #93c5fd; font-size: 13px; font-weight: 850; letter-spacing: .035em; }
.aiml-level-twenty-five-page .aiml-fifteen-controls select { display: block; width: 100%; min-height: 43px; margin-top: 7px; padding: 8px 10px; border: 1px solid #3b5b76; border-radius: 10px; background: #07182c; color: #f8fafc; font: inherit; }
.aiml-level-twenty-five-page .aiml-fifteen-controls button { width: 100%; min-height: 43px; padding: 9px 13px; border: 1px solid #4f718e; border-radius: 10px; background: #1d3348; color: #fff; font: inherit; font-weight: 850; cursor: pointer; }
.aiml-level-twenty-five-page .aiml-fifteen-controls button:hover { background: #29475f; }
.aiml-level-twenty-five-page .aiml-fifteen-controls button:disabled { cursor: not-allowed; opacity: .45; }
.aiml-level-twenty-five-page .aiml-fifteen-controls .aiml-lab-primary { border-color: #e2b827; background: #e6be36; color: #061426; box-shadow: 0 13px 24px rgba(230, 190, 54, .14); }
.aiml-level-twenty-five-page .aiml-fifteen-controls > p { margin: 3px 0 0; color: #91a9c0; font-size: 14px; line-height: 1.55; }

.aiml-level-twenty-five-page #deployCanvas,
.aiml-level-twenty-five-page #monitorCanvas { display: block; width: 100%; height: 500px; background: #07192d; }

.aiml-level-twenty-five-page .aiml-fifteen-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1px;
    border-top: 1px solid #2b4a67;
    background: #2b4a67;
}

.aiml-level-twenty-five-page .aiml-fifteen-metrics article { min-width: 0; padding: 13px 8px; background: #0b2038; text-align: center; }
.aiml-level-twenty-five-page .aiml-fifteen-metrics span,
.aiml-level-twenty-five-page .aiml-fifteen-inspector > span { display: block; color: #7dd3fc; font-size: 10px; font-weight: 900; letter-spacing: .07em; }
.aiml-level-twenty-five-page .aiml-fifteen-metrics strong { display: block; margin-top: 4px; overflow-wrap: anywhere; color: #f8fafc; font-size: 14px; }
.aiml-level-twenty-five-page .aiml-fifteen-inspector h3 { margin: 10px 0 0; color: #f8fafc; font-size: 19px; line-height: 1.42; }
.aiml-level-twenty-five-page .aiml-fifteen-inspector > p { color: #b5c7d8; font-size: 14px; line-height: 1.62; }

.aiml-level-twenty-five-page .aiml-twenty-five-equation,
.aiml-level-twenty-five-page .aiml-twenty-five-evidence {
    display: grid;
    gap: 8px;
    min-width: 0;
    margin: 17px 0;
    padding: 15px;
    border: 1px solid #315775;
    border-radius: 12px;
    background: #061426;
}

.aiml-level-twenty-five-page .aiml-twenty-five-equation span,
.aiml-level-twenty-five-page .aiml-twenty-five-evidence span,
.aiml-level-twenty-five-page .aiml-fifteen-next span { color: #7dd3fc; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.aiml-level-twenty-five-page .aiml-twenty-five-equation code { color: #fde047; font-size: 12px; font-weight: 850; line-height: 1.55; overflow-wrap: anywhere; white-space: normal; }
.aiml-level-twenty-five-page .aiml-twenty-five-evidence strong { color: #a7f3d0; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.aiml-level-twenty-five-page .aiml-fifteen-next { margin-top: 17px; padding: 15px; border-left: 5px solid #22d3ee; border-radius: 11px; background: #eef7ff; }
.aiml-level-twenty-five-page .aiml-fifteen-next span { color: #155eef; }
.aiml-level-twenty-five-page .aiml-fifteen-next strong { display: block; margin-top: 7px; color: #0d355f; font-size: 14px; line-height: 1.52; }

.aiml-level-twenty-five-page .aiml-code-lines { height: 360px; }
.aiml-level-twenty-five-page .aiml-code-panel,
.aiml-level-twenty-five-page .aiml-live-panel { height: 409px; }
.aiml-level-twenty-five-page .aiml-live-panel { overflow-y: auto; scrollbar-width: thin; }
.aiml-level-twenty-five-page .aiml-variable code { line-height: 1.45; overflow-wrap: anywhere; white-space: normal; word-break: break-word; }
.aiml-level-twenty-five-page .aiml-problem-data span { max-width: 100%; overflow-wrap: anywhere; }
.aiml-level-twenty-five-page .aiml-workspace textarea { box-sizing: border-box; display: block; min-height: 210px; }
.aiml-level-twenty-five-page .aiml-quiz-option span,
.aiml-level-twenty-five-page .aiml-interview-question strong { min-width: 0; overflow-wrap: break-word; word-break: normal; }

@media (max-width: 1280px) {
    .aiml-level-twenty-five-page .aiml-mlops-hero { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-twenty-five-page .aiml-mlops-hero-visual { width: calc(100% - 72px); max-width: 850px; margin: 0 auto 36px; }
    .aiml-level-twenty-five-page .aiml-fifteen-lab-grid { grid-template-columns: minmax(220px, .62fr) minmax(0, 1.38fr); }
    .aiml-level-twenty-five-page .aiml-fifteen-inspector { grid-column: 1 / -1; }
    .aiml-level-twenty-five-page .aiml-twenty-five-lineage-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
    .aiml-level-twenty-five-page .aiml-twenty-five-four-grid,
    .aiml-level-twenty-five-page .aiml-twenty-five-lineage-grid,
    .aiml-level-twenty-five-page .aiml-twenty-five-three-grid,
    .aiml-level-twenty-five-page .aiml-twenty-five-serving-grid,
    .aiml-level-twenty-five-page .aiml-twenty-five-monitor-grid,
    .aiml-level-twenty-five-page .aiml-twenty-five-responsibility-grid,
    .aiml-level-twenty-five-page .aiml-twenty-five-governance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aiml-level-twenty-five-page .aiml-fifteen-lab-grid { grid-template-columns: minmax(0, 1fr); }
    .aiml-level-twenty-five-page .aiml-fifteen-inspector { grid-column: auto; }
    .aiml-level-twenty-five-page .aiml-code-panel,
    .aiml-level-twenty-five-page .aiml-live-panel { height: auto; }
    .aiml-level-twenty-five-page .aiml-live-panel { max-height: none; }
    .aiml-level-twenty-five-page .aiml-code-lines { height: 390px; }
}

@media (max-width: 700px) {
    .aiml-level-twenty-five-page .main-content { font-size: 16px; }
    .aiml-level-twenty-five-page .aiml-mlops-hero-visual { width: calc(100% - 32px); margin: 0 16px 20px; padding: 16px; border-radius: 20px; }
    .aiml-level-twenty-five-page .aiml-mlops-pipeline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aiml-level-twenty-five-page .aiml-mlops-pipeline > span { min-width: 0; }
    .aiml-level-twenty-five-page .aiml-mlops-pipeline > i { display: none; }
    .aiml-level-twenty-five-page .aiml-mlops-signals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aiml-level-twenty-five-page .aiml-fifteen-lab-heading { align-items: flex-start; flex-direction: column; padding: 22px 18px; }
    .aiml-level-twenty-five-page .aiml-fifteen-lab-heading > strong { white-space: normal; }
    .aiml-level-twenty-five-page .aiml-fifteen-lab-grid { padding: 12px; }
    .aiml-level-twenty-five-page .aiml-fifteen-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aiml-level-twenty-five-page .aiml-fifteen-metrics article:last-child { grid-column: 1 / -1; }
    .aiml-level-twenty-five-page .aiml-twenty-five-four-grid,
    .aiml-level-twenty-five-page .aiml-twenty-five-lineage-grid,
    .aiml-level-twenty-five-page .aiml-twenty-five-three-grid,
    .aiml-level-twenty-five-page .aiml-twenty-five-serving-grid,
    .aiml-level-twenty-five-page .aiml-twenty-five-monitor-grid,
    .aiml-level-twenty-five-page .aiml-twenty-five-responsibility-grid,
    .aiml-level-twenty-five-page .aiml-twenty-five-governance-grid,
    .aiml-level-twenty-five-page .aiml-quiz-options { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
    .aiml-level-twenty-five-page .aiml-mlops-hero-note { padding: 14px; }
    .aiml-level-twenty-five-page .aiml-code-lines { height: 350px; }
}

/* Level 26 — Capstone Projects & Placement Mastery */
.aiml-level-twenty-six-page .aiml-career-hero {
    background: radial-gradient(circle at 85% 7%, rgba(250, 204, 21, .17), transparent 31%), radial-gradient(circle at 64% 92%, rgba(34, 211, 238, .13), transparent 32%), linear-gradient(135deg, #06172a 0%, #0b3854 56%, #1f2f69 100%);
}

.aiml-level-twenty-six-page .aiml-career-hero .aiml-mlops-pipeline > span.done {
    border-color: #34d399;
    background: #0d513f;
}

.aiml-level-twenty-six-page .aiml-career-hero .aiml-mlops-pipeline > span.current {
    border-color: #fde047;
    background: #174473;
}

.aiml-level-twenty-six-page .aiml-career-hero .aiml-mlops-signals article {
    border-color: #365773;
}

.aiml-level-twenty-six-page .aiml-twenty-six-defence-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
}

.aiml-level-twenty-six-page .aiml-twenty-six-defence-grid article {
    min-width: 0;
    padding: 20px;
    border: 1px solid #cbdced;
    border-top: 4px solid #d4a514;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(7, 29, 59, .05);
}

.aiml-level-twenty-six-page .aiml-twenty-six-defence-grid span {
    display: block;
    color: #9a6c00;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .08em;
}

.aiml-level-twenty-six-page .aiml-twenty-six-defence-grid strong {
    display: block;
    margin-top: 8px;
    color: #071d3b;
    font-size: 17px;
    line-height: 1.35;
}

.aiml-level-twenty-six-page .aiml-twenty-six-defence-grid p {
    margin: 8px 0 0;
    color: #526a82;
    line-height: 1.55;
}

.aiml-level-twenty-six-page #projectCanvas,
.aiml-level-twenty-six-page #placementCanvas {
    display: block;
    width: 100%;
    height: 500px;
    background: #07192d;
}

.aiml-level-twenty-six-page .aiml-fifteen-lab-section:nth-of-type(even) .aiml-fifteen-lab-heading {
    background: linear-gradient(100deg, #0b2038, #102e48);
}

.aiml-level-twenty-six-page .aiml-fifteen-inspector,
.aiml-level-twenty-six-page .aiml-fifteen-controls,
.aiml-level-twenty-six-page .aiml-fifteen-stage {
    min-height: 0;
}

.aiml-level-twenty-six-page .aiml-fifteen-metrics strong {
    line-height: 1.35;
}

@media (max-width: 980px) {
    .aiml-level-twenty-six-page .aiml-twenty-six-defence-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .aiml-level-twenty-six-page .aiml-twenty-six-defence-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .aiml-level-twenty-six-page #projectCanvas {
        height: 650px;
    }
}