/* =========================
   RESET
========================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;

    --color-page: #ffffff;
    --color-text: #111111;
    --color-muted: #555555;
    --color-header: rgba(255, 255, 255, 0.94);
    --color-header-menu: rgba(255, 255, 255, 0.98);
    --color-border: #e9e9e9;
    --color-hover: #f5f5f5;
    --color-brand-bg: #111111;
    --color-brand-text: #ffffff;
    --color-accent: #e53935;
    --color-shadow: rgba(0, 0, 0, 0.07);
    --color-toggle-border: #dddddd;

    --hero-bg: #f8f6f1;
    --hero-bg-glow-one: rgba(255, 105, 36, 0.2);
    --hero-bg-glow-two: rgba(12, 178, 148, 0.16);
    --hero-grid-line: rgba(15, 18, 26, 0.07);
    --hero-title-color: #101114;
    --hero-copy-color: #62646f;
    --hero-card-bg: #ffffff;
    --hero-card-border: rgba(17, 17, 17, 0.12);
    --hero-card-shadow: rgba(25, 28, 38, 0.18);
    --hero-editor-bg: #111219;
    --hero-editor-border: rgba(20, 24, 34, 0.18);
    --hero-editor-muted: #737783;
    --hero-editor-text: #d6d6df;
    --hero-editor-line: rgba(255, 255, 255, 0.1);
    --hero-badge-bg: #ffffff;
    --hero-badge-text: #20232c;
    --hero-secondary-bg: rgba(17, 17, 17, 0.03);
    --hero-secondary-border: rgba(17, 17, 17, 0.14);
    --hero-secondary-hover: rgba(17, 17, 17, 0.24);

    /* Process */
    --process-bg: #08090d;
    --process-surface: #11131a;
    --process-surface-soft: #0d0f14;
    --process-text: #f7f5f1;
    --process-muted: #858792;
    --process-line: #2d3038;
    --process-border: #30333c;
    --process-orange: #ff6422;
    --process-yellow: #ffd23d;
    --process-gradient: linear-gradient(135deg, #ff5c1f, #ffd23d);
}

html[data-theme="dark"] {
    color-scheme: dark;

    --color-page: #101114;
    --color-text: #f7f7f8;
    --color-muted: #b7b8be;
    --color-header: rgba(16, 17, 20, 0.92);
    --color-header-menu: rgba(16, 17, 20, 0.98);
    --color-border: #2a2c32;
    --color-hover: #202228;
    --color-brand-bg: #f7f7f8;
    --color-brand-text: #101114;
    --color-shadow: rgba(0, 0, 0, 0.32);
    --color-toggle-border: #343741;

    --hero-bg: #05070c;
    --hero-bg-glow-one: rgba(255, 91, 30, 0.15);
    --hero-bg-glow-two: rgba(16, 196, 160, 0.16);
    --hero-grid-line: rgba(255, 255, 255, 0.045);
    --hero-title-color: #fff7f0;
    --hero-copy-color: #a5a6af;
    --hero-card-bg: #191a22;
    --hero-card-border: rgba(255, 255, 255, 0.14);
    --hero-card-shadow: rgba(0, 0, 0, 0.32);
    --hero-editor-bg: #101016;
    --hero-editor-border: rgba(255, 255, 255, 0.13);
    --hero-editor-muted: #777985;
    --hero-editor-text: #bbbcc5;
    --hero-editor-line: rgba(255, 255, 255, 0.1);
    --hero-badge-bg: #191a22;
    --hero-badge-text: #f4f0eb;
    --hero-secondary-bg: rgba(255, 255, 255, 0.03);
    --hero-secondary-border: rgba(255, 255, 255, 0.2);
    --hero-secondary-hover: rgba(255, 255, 255, 0.36);
}

html[data-theme="light"] {
    color-scheme: light;
}

body {
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    background: var(--color-page);
    color: var(--color-text);

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* =========================
   NAVBAR
========================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    width: 100%;

    background: var(--color-header);
    border-bottom: 1px solid var(--color-border);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.navbar {
    width: min(1200px, calc(100% - 40px));
    min-height: 72px;

    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 32px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: var(--color-text);
    text-decoration: none;

    flex-shrink: 0;
}

.brand-mark {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    background: var(--color-brand-bg);
    color: var(--color-brand-text);

    border-radius: 10px;

    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.brand-name {
    font-size: 20px;
    font-weight: 750;
    letter-spacing: -0.04em;
    white-space: nowrap;
}

.brand-name span {
    color: var(--color-accent);
}

.nav-wrapper {
    display: flex;
    align-items: center;
}

.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-link {
    position: relative;

    display: inline-flex;
    align-items: center;

    min-height: 42px;
    padding: 0 13px;

    color: var(--color-muted);
    text-decoration: none;

    font-size: 14px;
    font-weight: 600;

    border-radius: 9px;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.nav-link:hover {
    color: var(--color-text);
    background: var(--color-hover);
}

.nav-link.active {
    color: var(--color-text);
}

.nav-link.active::after {
    content: "";

    position: absolute;

    left: 13px;
    right: 13px;
    bottom: 4px;

    height: 2px;

    background: var(--color-accent);

    border-radius: 10px;
}


/* =========================
   THEME TOGGLE
========================= */

.theme-toggle,
.menu-toggle {
    width: 42px;
    height: 42px;

    border: 0;
    border-radius: 9px;

    background: transparent;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.theme-toggle {
    position: relative;

    margin-left: 10px;

    display: inline-grid;
    place-items: center;

    border: 1px solid var(--color-toggle-border);
}

.theme-toggle:hover,
.menu-toggle:hover {
    background: var(--color-hover);
}

.theme-icon {
    position: absolute;

    width: 18px;
    height: 18px;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.theme-icon-sun {
    border: 2px solid var(--color-text);
    border-radius: 50%;
}

.theme-icon-sun::before,
.theme-icon-sun::after {
    content: "";

    position: absolute;
    inset: -6px;

    background:
        linear-gradient(var(--color-text), var(--color-text)) center top / 2px 4px no-repeat,
        linear-gradient(var(--color-text), var(--color-text)) center bottom / 2px 4px no-repeat,
        linear-gradient(var(--color-text), var(--color-text)) left center / 4px 2px no-repeat,
        linear-gradient(var(--color-text), var(--color-text)) right center / 4px 2px no-repeat;
}

.theme-icon-sun::after {
    transform: rotate(45deg);
}

.theme-icon-moon {
    border-radius: 50%;
    box-shadow: inset -6px 0 0 var(--color-text);

    opacity: 0;
    transform: translateY(6px) rotate(-18deg);
}

html[data-theme="dark"] .theme-icon-sun {
    opacity: 0;
    transform: translateY(-6px) rotate(45deg);
}

html[data-theme="dark"] .theme-icon-moon {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
}


/* =========================
   MOBILE MENU
========================= */

.menu-toggle {
    display: none;

    padding: 9px;

    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 5px;
}

.menu-toggle span {
    width: 21px;
    height: 2px;

    background: var(--color-text);

    border-radius: 10px;

    transition:
        transform 0.25s ease,
        opacity 0.2s ease;
}

.menu-toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


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

.hero-section {
    position: relative;

    width: 100%;
    min-height: calc(100vh - 72px);

    padding: 70px max(24px, calc((100% - 1540px) / 2)) 76px;

    display: grid;
    grid-template-columns:
        minmax(320px, 0.92fr)
        minmax(420px, 1.08fr);

    align-items: center;
    gap: clamp(36px, 5vw, 86px);

    color: var(--hero-title-color);

    background:
        radial-gradient(circle at 9% 22%, var(--hero-bg-glow-one), transparent 26%),
        radial-gradient(circle at 84% 70%, var(--hero-bg-glow-two), transparent 28%),
        var(--hero-bg);

    overflow: hidden;

    transition:
        background-color 0.24s ease,
        color 0.24s ease;
}

.hero-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(var(--hero-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--hero-grid-line) 1px, transparent 1px);

    background-size: 68px 68px;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 8%,
            #000 92%,
            transparent
        );

    animation: heroGridDrift 18s linear infinite;
}

.hero-section::before {
    content: "";

    position: absolute;

    right: 10%;
    top: 12%;

    width: 420px;
    height: 420px;

    border: 1px dashed color-mix(
        in srgb,
        var(--hero-title-color) 16%,
        transparent
    );

    border-radius: 50%;

    animation: heroOrbit 24s linear infinite;
}

.hero-content {
    position: relative;
    z-index: 1;

    max-width: 740px;

    animation: heroContentIn 0.8s ease both;
}

.hero-title {
    color: var(--hero-title-color);

    font-family:
        "Segoe UI Variable Display",
        "SF Pro Display",
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: clamp(64px, 6.4vw, 122px);
    font-weight: 850;
    line-height: 0.94;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.hero-title-line {
    position: relative;

    display: block;
    width: fit-content;

    color: transparent;

    -webkit-text-stroke: 1.7px var(--hero-title-color);

    opacity: 0;
    clip-path: inset(0 100% 0 0);

    animation:
        titleStrokeReveal
        0.75s
        cubic-bezier(0.2, 0.8, 0.2, 1)
        forwards;
}

.hero-title-line::after {
    content: attr(data-text);

    position: absolute;
    inset: 0;

    width: 0;
    overflow: hidden;

    color: var(--hero-title-color);
    white-space: nowrap;

    animation:
        titleFillReveal
        0.75s
        cubic-bezier(0.2, 0.8, 0.2, 1)
        forwards;
}

.hero-title-line:nth-of-type(2) {
    animation-delay: 0s;
}

.hero-title-line:nth-of-type(2)::after {
    animation-delay: 0.32s;
}

.hero-title-line:nth-of-type(3) {
    animation-delay: 0.32s;
}

.hero-title-line:nth-of-type(3)::after {
    animation-delay: 0.64s;
}

.hero-title-line-gradient {
    -webkit-text-stroke-color: #ff7a21;
    font-weight: 900;
}

.hero-title-line-gradient::after {
    background:
        linear-gradient(
            92deg,
            #ff5a1f 0%,
            #ff8a22 48%,
            #ffd449 100%
        );

    background-size: 140% 100%;
    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;

    animation:
        titleFillReveal 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) forwards,
        heroGradientShift 4.8s ease-in-out 1.65s infinite alternate;
}

.hero-copy {
    max-width: 720px;
    margin-top: 34px;

    color: var(--hero-copy-color);

    font-size: clamp(19px, 1.55vw, 27px);
    line-height: 1.55;
    font-weight: 500;
}

.hero-actions {
    margin-top: 44px;

    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.hero-button {
    min-height: 70px;
    padding: 0 30px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    border-radius: 999px;

    color: #ffffff;

    font-size: 17px;
    font-weight: 850;
    text-decoration: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.hero-button:hover,
.hero-button:focus-visible {
    transform: translateY(-2px);
}

.hero-button-primary {
    background: linear-gradient(135deg, #ff6422, #ffd23d);
    box-shadow: 0 20px 48px rgba(255, 100, 34, 0.24);
}

.hero-button-primary:hover {
    box-shadow: 0 26px 64px rgba(255, 100, 34, 0.34);
}

.hero-button-secondary {
    border: 1px solid var(--hero-secondary-border);
    background: var(--hero-secondary-bg);
    color: var(--hero-title-color);
}

.hero-button-secondary:hover {
    border-color: var(--hero-secondary-hover);
}

.hero-visual {
    position: relative;
    z-index: 1;

    min-height: 620px;

    animation: heroVisualIn 0.9s 0.12s ease both;
}

.hero-visual::before {
    content: "";

    position: absolute;

    left: 16%;
    top: 13%;

    width: 74%;
    height: 74%;

    border: 1px dashed color-mix(
        in srgb,
        var(--hero-title-color) 14%,
        transparent
    );

    border-radius: 50%;

    animation: heroOrbit 20s linear infinite reverse;
}

.hero-visual::after {
    content: "";

    position: absolute;

    right: 12%;
    bottom: 7%;

    width: 280px;
    height: 96px;

    background: linear-gradient(135deg, #ff5f1f, #9d3212);

    clip-path: polygon(28% 0, 74% 0, 100% 100%, 0 100%);

    filter: drop-shadow(
        0 28px 28px rgba(255, 95, 31, 0.18)
    );

    animation: heroBasePulse 4.5s ease-in-out infinite;
}

.editor-card {
    position: absolute;

    left: 7%;
    top: 13%;
    z-index: 2;

    width: min(680px, 82vw);
    min-height: 535px;

    border: 1px solid var(--hero-editor-border);
    border-radius: 24px;

    background: var(--hero-editor-bg);

    box-shadow: 0 34px 90px var(--hero-card-shadow);

    transform: rotate(-4deg);
    overflow: hidden;

    animation: editorFloat 5.8s ease-in-out infinite;
}

.editor-topbar {
    height: 74px;
    padding: 0 28px;

    display: flex;
    align-items: center;
    gap: 10px;

    border-bottom: 1px solid var(--hero-editor-line);
}

.window-dot {
    width: 13px;
    height: 13px;
    border-radius: 999px;
}

.window-dot-red { background: #ff5d59; }
.window-dot-yellow { background: #ffbd3e; }
.window-dot-green { background: #28ca62; }

.editor-file {
    margin-left: 20px;

    color: var(--hero-editor-muted);

    font-family: Consolas, "SFMono-Regular", monospace;
    font-size: 17px;
    font-weight: 800;
}

.editor-code {
    padding: 30px 34px 28px;

    display: grid;
    gap: 17px;

    font-family: Consolas, "SFMono-Regular", monospace;
    font-size: clamp(15px, 1.05vw, 19px);
    font-weight: 800;
    color: var(--hero-editor-text);
}

.editor-code p {
    white-space: nowrap;
}

.editor-code span {
    color: color-mix(
        in srgb,
        var(--hero-editor-muted) 64%,
        transparent
    );
}

.editor-code b {
    color: #ff6c21;
}

.editor-code mark {
    color: #ffc43d;
    background: transparent;
}

.editor-result {
    margin-top: 10px;
    padding: 22px 34px 34px;

    display: grid;
    gap: 14px;

    border-top: 1px solid var(--hero-editor-line);

    color: var(--hero-editor-muted);

    font-family: Consolas, "SFMono-Regular", monospace;
    font-size: 14px;
    font-weight: 800;
    text-transform: lowercase;
}

.editor-result > span {
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.editor-result div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;

    border-bottom: 1px solid color-mix(
        in srgb,
        var(--hero-editor-line) 72%,
        transparent
    );

    padding-bottom: 9px;
}

.skill-badge {
    position: absolute;
    z-index: 3;

    min-height: 70px;
    padding: 12px 18px;

    display: inline-flex;
    align-items: center;
    gap: 14px;

    border: 1px solid var(--hero-card-border);
    border-radius: 18px;

    background: var(--hero-badge-bg);
    box-shadow: 0 18px 40px var(--hero-card-shadow);

    color: var(--hero-badge-text);

    animation: badgeFloat 4.6s ease-in-out infinite;
}

.skill-badge:hover {
    transform: translateY(-4px) scale(1.02);
}

.skill-badge span {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    color: #ffffff;

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

.skill-badge strong {
    font-size: 15px;
    line-height: 1.15;
}

.skill-badge-sql {
    right: 6%;
    top: 18%;
}

.skill-badge-sql span {
    background: #ff5c22;
}

.skill-badge-de {
    right: -1%;
    bottom: 26%;
    animation-delay: 0.4s;
}

.skill-badge-de span {
    background: #1ecbb4;
}

.skill-badge-python {
    left: 16%;
    bottom: 8%;
    animation-delay: 0.8s;
}

.skill-badge-python span {
    background: #ffd640;
    color: #241b00;
}


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

.editor-code p,
.editor-result div {
    animation: codeLineIn 0.55s ease both;
}

.editor-code p:nth-child(1) { animation-delay: 0.35s; }
.editor-code p:nth-child(2) { animation-delay: 0.5s; }
.editor-code p:nth-child(3) { animation-delay: 0.65s; }
.editor-code p:nth-child(4) { animation-delay: 0.8s; }

.editor-result div:nth-of-type(1) { animation-delay: 0.95s; }
.editor-result div:nth-of-type(2) { animation-delay: 1.05s; }
.editor-result div:nth-of-type(3) { animation-delay: 1.15s; }

@keyframes heroContentIn {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

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

@keyframes heroVisualIn {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.98);
    }

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

@keyframes heroGridDrift {
    from { background-position: 0 0; }
    to { background-position: 68px 68px; }
}

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

@keyframes heroGradientShift {
    from { background-position: 0% 50%; }
    to { background-position: 100% 50%; }
}

@keyframes titleStrokeReveal {
    from {
        opacity: 1;
        clip-path: inset(0 100% 0 0);
        transform: translateX(-12px);
    }

    to {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: translateX(0);
    }
}

@keyframes titleFillReveal {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes heroBasePulse {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.92;
    }

    50% {
        transform: translateY(-8px) scale(1.03);
        opacity: 1;
    }
}

@keyframes editorFloat {
    0%, 100% {
        transform: translateY(0) rotate(-4deg);
    }

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

@keyframes editorFloatMobile {
    0%, 100% {
        transform: translateY(0) rotate(-2deg);
    }

    50% {
        transform: translateY(-10px) rotate(-1deg);
    }
}

@keyframes badgeFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes codeLineIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

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


/* =========================
   HERO TITLE: STROKE DRAW
========================= */

.hero-title-draw {
    display: block;
    width: 100%;
}

.hero-title-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.hero-title-svg .t {
    fill: none;
    stroke: var(--hero-title-color);
    stroke-width: 14;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero-title-svg .t-accent {
    stroke: #ff7a21;
}

.hero-title-svg .t path {
    stroke-dasharray: 1 2;

    animation:
        heroStrokeDraw
        0.07s
        linear
        both;

    animation-delay:
        calc(
            0.1s + var(--i) * 0.08s
        );
}

.hero-title-svg .heart {
    font-size: 110px;

    transform-box: fill-box;
    transform-origin: center;

    animation:
        heroHeartPop
        0.45s
        cubic-bezier(0.3, 1.6, 0.5, 1)
        both;

    animation-delay:
        calc(
            0.3s + var(--n) * 0.08s
        );
}

@keyframes heroStrokeDraw {
    from { stroke-dashoffset: 1.02; }
    to { stroke-dashoffset: 0; }
}

@keyframes heroHeartPop {
    from {
        opacity: 0;
        transform: scale(0.2);
    }

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


/* =========================
   PROCESS SECTION
========================= */

.process-section {
    position: relative;

    padding: 112px max(24px, calc((100% - 1200px) / 2)) 80px;

    background:
        radial-gradient(
            circle at 12% 8%,
            rgba(255, 100, 34, 0.035),
            transparent 24%
        ),
        var(--process-bg);

    color: var(--process-text);

    overflow: hidden;
}

.process-section::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px
        );

    background-size: 72px 72px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 18%,
            #000 82%,
            transparent
        );
}

.process-header {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.7fr);

    gap: clamp(40px, 9vw, 140px);

    align-items: start;
}

.process-eyebrow {
    margin-bottom: 12px;

    color: var(--process-orange);

    font-size: 13px;
    font-weight: 900;

    letter-spacing: 0.18em;
}

.process-title {
    max-width: 700px;

    font-size: clamp(58px, 6vw, 92px);
    line-height: 0.94;
    letter-spacing: -0.055em;
    font-weight: 850;
}

.process-title span {
    display: block;

    background:
        linear-gradient(
            100deg,
            var(--process-orange),
            var(--process-yellow)
        );

    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
}

.process-intro {
    padding-top: 38px;

    max-width: 510px;

    color: var(--process-muted);

    font-size: 19px;
    line-height: 1.9;
    font-weight: 500;
}


/* Timeline */

.process-timeline {
    position: relative;
    z-index: 1;

    margin-top: 72px;

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

    gap: 0;
}

.process-timeline::before {
    content: "";

    position: absolute;

    left: 8.3%;
    right: 8.3%;
    top: 34px;

    height: 2px;

    background: var(--process-line);

    border-radius: 999px;

    overflow: hidden;
}

.process-timeline::after {
    content: "";

    position: absolute;

    left: 8.3%;
    top: 34px;

    width: var(--process-progress, 0%);

    max-width: 83.4%;

    height: 3px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #ff5a1f 0%,
            #ff7b22 45%,
            #ffd23d 100%
        );

    box-shadow:
        0 0 10px rgba(255, 100, 34, 0.42),
        0 0 24px rgba(255, 210, 61, 0.16);

    transform: translateY(-0.5px);
    transform-origin: left center;

    transition:
        width 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.25s ease;

    pointer-events: none;
}

.process-timeline {
    --process-progress: 0%;
}

.process-timeline::after {
    animation: processLineShimmer 3.2s linear infinite;
}

@keyframes processLineShimmer {
    0% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.16);
    }

    100% {
        filter: brightness(1);
    }
}

.process-step {
    position: relative;
    z-index: 1;

    min-width: 0;

    padding: 0 12px;

    display: flex;
    flex-direction: column;
    align-items: center;

    border: 0;
    background: transparent;

    color: inherit;

    text-align: center;

    cursor: pointer;
}

.process-number {
    position: relative;
    z-index: 3;

    width: 68px;
    height: 68px;

    display: grid;
    place-items: center;

    border: 1px solid var(--process-line);
    border-radius: 50%;

    background: var(--process-bg);

    color: #777a85;

    font-family: Consolas, "SFMono-Regular", monospace;
    font-size: 13px;
    font-weight: 700;

    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

.process-step strong {
    margin-top: 27px;

    color: var(--process-text);

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

.process-step small {
    max-width: 170px;

    margin-top: 12px;

    color: #747782;

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

.process-step:hover .process-number {
    border-color: rgba(255, 100, 34, 0.65);
    color: #f4f1ed;
    transform: translateY(-2px);
}

.process-step.is-active .process-number {
    border-color: transparent;

    background:
        linear-gradient(
            135deg,
            var(--process-orange),
            var(--process-yellow)
        );

    color: #ffffff;

    box-shadow:
        0 0 0 12px rgba(255, 100, 34, 0.06),
        0 14px 38px rgba(255, 100, 34, 0.22);

    transform: translateY(-2px);
}

.process-step.is-active strong {
    color: #ffffff;
}


/* Detail card */

.process-detail {
    position: relative;
    z-index: 1;

    margin-top: 78px;

    min-height: 260px;

    padding: 52px 48px;

    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 230px;

    align-items: center;

    gap: 32px;

    border: 1px solid var(--process-border);
    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.025),
            rgba(255, 255, 255, 0.01)
        ),
        var(--process-surface);

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.22);

    transition:
        border-color 0.25s ease,
        transform 0.25s ease;
}

.process-detail-number {
    color: #292c35;

    font-size: 64px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.05em;
}

.process-stage {
    margin-bottom: 14px;

    color: var(--process-orange);

    font-family: Consolas, "SFMono-Regular", monospace;
    font-size: 13px;
    font-weight: 800;

    letter-spacing: 0.12em;
}

.process-detail-main h3 {
    color: var(--process-text);

    font-size: clamp(23px, 2vw, 31px);
    line-height: 1.25;
    font-weight: 800;
}

.process-detail-main > p:last-child {
    max-width: 760px;

    margin-top: 14px;

    color: #9a9ca6;

    font-size: 16px;
    line-height: 1.75;
}

.process-outcome {
    min-height: 54px;

    padding-left: 34px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    border-left: 1px solid var(--process-border);
}

.process-outcome span {
    color: #6f7280;

    font-family: Consolas, "SFMono-Regular", monospace;
    font-size: 12px;

    letter-spacing: 0.13em;
}

.process-outcome strong {
    margin-top: 12px;

    color: #f2efea;

    font-size: 15px;
    line-height: 1.35;
}


/* Progress */

.process-progress {
    position: relative;
    z-index: 1;

    margin: 22px 18px 0;

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

    gap: 8px;
}

.process-progress span {
    height: 3px;

    background: #2b2e36;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.process-progress span.is-active {
    background:
        linear-gradient(
            90deg,
            var(--process-orange),
            var(--process-yellow)
        );
}


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

@media (max-width: 900px) {
    .navbar {
        width: min(100% - 32px, 1200px);
    }

    .nav-links {
        gap: 0;
    }

    .nav-link {
        padding: 0 9px;
        font-size: 13px;
    }

    .hero-section {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 56px 28px 68px;
    }

    .hero-title {
        font-size: clamp(58px, 12vw, 104px);
    }

    .hero-copy {
        max-width: 700px;
    }

    .hero-visual {
        min-height: 580px;
    }

    .editor-card {
        left: 4%;
        width: min(660px, 86vw);
    }

    .skill-badge-sql {
        right: 4%;
    }

    .skill-badge-de {
        right: 2%;
    }

    .process-section {
        padding-left: 28px;
        padding-right: 28px;
    }

    .process-header {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .process-intro {
        padding-top: 0;
    }

    .process-timeline {
        overflow-x: auto;
        grid-template-columns: repeat(6, minmax(145px, 1fr));
        padding-bottom: 12px;
    }

    .process-detail {
        grid-template-columns: 110px minmax(0, 1fr);
    }

    .process-outcome {
        grid-column: 2;
        padding-left: 0;
        padding-top: 18px;
        border-left: 0;
        border-top: 1px solid var(--process-border);
    }
}

@media (max-width: 760px) {
    .navbar {
        min-height: 66px;
    }

    .brand-mark {
        width: 36px;
        height: 36px;
        border-radius: 9px;
    }

    .brand-name {
        font-size: 18px;
    }

    .menu-toggle {
        display: flex;
    }

    .nav-links {
        position: absolute;

        top: calc(100% + 1px);
        left: 0;
        right: 0;

        width: 100%;

        padding: 10px 16px 16px;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 4px;

        background: var(--color-header-menu);

        border-bottom: 1px solid var(--color-border);

        box-shadow: 0 12px 30px var(--color-shadow);

        opacity: 0;
        visibility: hidden;

        transform: translateY(-8px);

        pointer-events: none;

        transition:
            opacity 0.2s ease,
            transform 0.2s ease,
            visibility 0.2s ease;
    }

    .nav-links.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    .nav-link {
        width: 100%;
        min-height: 48px;
        padding: 0 14px;
        justify-content: flex-start;
        font-size: 15px;
        border-radius: 8px;
    }

    .nav-link.active::after {
        left: auto;
        right: 14px;

        top: 50%;
        bottom: auto;

        width: 4px;
        height: 22px;

        transform: translateY(-50%);

        border-radius: 4px;
    }

    .hero-section {
        padding: 44px 18px 52px;
        gap: 30px;
    }

    .hero-title {
        font-size: clamp(42px, 15vw, 72px);
        line-height: 0.98;
        letter-spacing: -0.025em;
    }

    .hero-copy {
        margin-top: 24px;
        font-size: 18px;
    }

    .hero-actions {
        margin-top: 30px;
    }

    .hero-button {
        width: 100%;
        min-height: 60px;
    }

    .hero-visual {
        min-height: 520px;
    }

    .editor-card {
        left: 0;
        top: 34px;
        width: 100%;
        min-height: 430px;
        transform: rotate(-2deg);
        animation-name: editorFloatMobile;
    }

    .editor-topbar {
        height: 58px;
        padding: 0 18px;
    }

    .editor-file {
        font-size: 14px;
    }

    .editor-code {
        padding: 24px 18px 20px;
        font-size: 13px;
    }

    .editor-result {
        padding: 18px;
        font-size: 12px;
    }

    .skill-badge {
        min-height: 58px;
        padding: 10px 12px;
        gap: 10px;
    }

    .skill-badge span {
        width: 36px;
        height: 36px;
    }

    .skill-badge strong {
        font-size: 13px;
    }

    .skill-badge-sql {
        top: 0;
        right: 0;
    }

    .skill-badge-de {
        right: 0;
        bottom: 38px;
    }

    .skill-badge-python {
        left: 0;
        bottom: 0;
    }

    /* Process mobile */
    .process-section {
        padding: 76px 18px 60px;
    }

    .process-title {
        font-size: clamp(48px, 14vw, 72px);
    }

    .process-intro {
        font-size: 16px;
        line-height: 1.7;
    }

    .process-timeline {
        margin-top: 52px;

        grid-template-columns: 1fr;

        overflow: visible;
        padding: 0;

        gap: 0;
    }

    .process-timeline::before {
        left: 34px;
        right: auto;
        top: 34px;
        bottom: 34px;

        width: 2px;
        height: auto;
    }

    .process-timeline::after {
        left: 33px;
        top: 34px;

        width: 3px;
        max-width: none;
        height: var(--process-progress, 0%);

        transform: none;
        transform-origin: top center;

        background:
            linear-gradient(
                180deg,
                #ff5a1f 0%,
                #ff7b22 45%,
                #ffd23d 100%
            );
    }

    .process-step {
        min-height: 102px;

        padding: 0 0 20px;

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

        column-gap: 22px;

        align-items: start;

        text-align: left;
    }

    .process-number {
        grid-row: 1 / span 2;
    }

    .process-step strong {
        margin-top: 8px;
        font-size: 16px;
    }

    .process-step small {
        max-width: none;
        margin-top: 5px;
        font-size: 13px;
    }

    .process-detail {
        margin-top: 38px;

        min-height: 0;

        padding: 30px 24px;

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

        gap: 18px;

        border-radius: 16px;
    }

    .process-detail-number {
        font-size: 43px;
    }

    .process-detail-main h3 {
        font-size: 22px;
    }

    .process-detail-main > p:last-child {
        font-size: 14px;
        line-height: 1.65;
    }

    .process-outcome {
        grid-column: 1 / -1;

        min-height: 0;

        margin-top: 4px;
        padding-top: 18px;

        border-top: 1px solid var(--process-border);
    }

    .process-progress {
        margin-top: 18px;
    }
}

@media (max-width: 420px) {
    .navbar {
        width: calc(100% - 24px);
    }

    .brand-name {
        font-size: 17px;
    }

    .brand-mark {
        width: 34px;
        height: 34px;
    }

    .hero-title {
        font-size: clamp(38px, 14vw, 56px);
        letter-spacing: -0.018em;
    }

    .hero-visual {
        min-height: 490px;
    }

    .editor-card {
        min-height: 400px;
    }

    .editor-code {
        font-size: 12px;
    }

    .skill-badge-de {
        max-width: 218px;
    }

    .process-title {
        font-size: 44px;
    }

    .process-detail {
        padding: 26px 20px;
    }
}


/* =========================
   ACCESSIBILITY
========================= */

.nav-link:focus-visible,
.menu-toggle:focus-visible,
.theme-toggle:focus-visible,
.hero-button:focus-visible,
.brand:focus-visible,
.process-step:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
}


/* =========================
   LEARN IN LAYERS
========================= */

.layers-section {
    position: relative;

    padding: 112px max(24px, calc((100% - 1440px) / 2)) 110px;

    background:
        radial-gradient(
            circle at 9% 12%,
            rgba(255, 91, 31, 0.075),
            transparent 26%
        ),
        radial-gradient(
            circle at 86% 75%,
            rgba(22, 203, 180, 0.045),
            transparent 28%
        ),
        #080a0e;

    color: #f7f5f1;

    overflow: hidden;
}

.layers-section::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.022) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.022) 1px,
            transparent 1px
        );

    background-size: 56px 56px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 8%,
            #000 92%,
            transparent
        );
}

.layers-header {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.68fr);

    gap: clamp(50px, 9vw, 150px);

    align-items: start;
}

.layers-title {
    max-width: 760px;

    font-size: clamp(56px, 6vw, 92px);
    line-height: 0.95;
    letter-spacing: -0.055em;
    font-weight: 850;
}

.layers-title span {
    background:
        linear-gradient(
            100deg,
            #ff5b1f,
            #ff7a22 52%,
            #ffd23d
        );

    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
}

.layers-intro {
    max-width: 500px;

    padding-top: 25px;

    color: #92949e;

    font-size: 18px;
    line-height: 1.75;
    font-weight: 500;
}

.layers-workspace {
    position: relative;
    z-index: 1;

    margin-top: 76px;

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

    gap: 48px;

    align-items: stretch;
}

.layers-sidebar {
    position: relative;

    padding-left: 22px;

    display: flex;
    flex-direction: column;
}

.layers-sidebar::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 1px;

    background: #30333b;
}

.layer-nav {
    position: relative;

    min-height: 100px;

    padding: 0 0 20px 0;

    display: grid;
    grid-template-columns: 1fr;
    align-content: start;

    border: 0;
    background: transparent;

    color: #777a85;

    text-align: left;

    cursor: pointer;
}

.layer-nav::before {
    content: "";

    position: absolute;

    left: -22px;
    top: 0;

    width: 2px;
    height: 0;

    background:
        linear-gradient(
            180deg,
            #ff5b1f,
            #ffd23d
        );

    transition: height 0.45s ease;
}

.layer-nav.is-active {
    color: #f5f3ef;
}

.layer-nav.is-active::before {
    height: 100%;
}

.layer-nav-number {
    color: #70737d;

    font-family: Consolas, "SFMono-Regular", monospace;
    font-size: 11px;
    font-weight: 700;
}

.layer-nav.is-active .layer-nav-number {
    color: #ff6521;
}

.layer-nav-copy {
    display: flex;
    flex-direction: column;
    gap: 7px;

    margin-top: 8px;
}

.layer-nav-copy strong {
    color: #aeb0b9;

    font-size: 17px;
    line-height: 1.15;
    font-weight: 800;

    transition: color 0.25s ease;
}

.layer-nav.is-active .layer-nav-copy strong {
    color: #f5f3ef;
}

.layer-nav-copy small {
    color: #656873;

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

.layer-nav:hover .layer-nav-copy strong {
    color: #f5f3ef;
}


/* Curriculum card */

.curriculum-card {
    min-height: 610px;

    border: 1px solid #343740;
    border-radius: 19px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.028),
            rgba(255, 255, 255, 0.008)
        ),
        #11131a;

    box-shadow:
        0 34px 100px rgba(0, 0, 0, 0.3);

    overflow: hidden;
}

.curriculum-topbar {
    min-height: 54px;

    padding: 0 26px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid #2e3139;

    color: #6e717c;

    font-family: Consolas, "SFMono-Regular", monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
}

.curriculum-topbar strong {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: #20c9b1;

    font-size: 11px;
}

.curriculum-topbar i {
    width: 5px;
    height: 5px;

    display: inline-block;

    border-radius: 50%;

    background: #20c9b1;

    box-shadow: 0 0 10px rgba(32, 201, 177, 0.8);
}

.curriculum-content {
    padding: 58px 50px 48px;
}

.curriculum-stage {
    color: #ff6422;

    font-family: Consolas, "SFMono-Regular", monospace;
    font-size: 13px;
    font-weight: 800;

    letter-spacing: 0.12em;
}

.curriculum-content h3 {
    margin-top: 21px;

    color: #f3f0ec;

    font-size: clamp(34px, 3.1vw, 49px);
    line-height: 1.06;
    letter-spacing: -0.045em;
    font-weight: 800;
}

.curriculum-description {
    max-width: 780px;

    margin-top: 23px;

    color: #8f929d;

    font-size: 17px;
    line-height: 1.75;
}


/* Mini curriculum map */

.layer-map {
    position: relative;

    margin-top: 48px;

    min-height: 108px;

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

    align-items: start;
}

.layer-map-line,
.layer-map-progress {
    position: absolute;

    left: 10%;
    right: 10%;
    top: 14px;

    height: 1px;

    background: #2a2d35;
}

.layer-map-progress {
    right: auto;

    width: 25%;

    background:
        linear-gradient(
            90deg,
            #ff5b1f,
            #ff8b23
        );

    box-shadow:
        0 0 12px rgba(255, 91, 31, 0.18);

    transition: width 0.45s ease;
}

.layer-map-step {
    position: relative;
    z-index: 1;

    min-width: 0;

    padding: 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    border: 0;
    background: transparent;

    color: #777a84;

    cursor: pointer;

    text-align: center;
}

.layer-map-step > span {
    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    border: 1px solid #343740;
    border-radius: 50%;

    background: #11131a;

    font-family: Consolas, "SFMono-Regular", monospace;
    font-size: 10px;
    font-weight: 700;

    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease;
}

.layer-map-step strong {
    margin-top: 16px;

    color: #b4b5bc;

    font-size: 13px;
    line-height: 1.3;
    font-weight: 750;
}

.layer-map-step.is-complete > span {
    border-color: #444752;
}

.layer-map-step.is-active > span {
    border-color: transparent;

    background:
        linear-gradient(
            135deg,
            #ff5b1f,
            #ffd23d
        );

    color: #ffffff;

    box-shadow:
        0 0 0 6px rgba(255, 91, 31, 0.05),
        0 7px 20px rgba(255, 91, 31, 0.22);
}

.layer-map-step.is-active strong {
    color: #f2efea;
}

.layer-map-step:hover > span {
    border-color: #ff6b22;
}


/* Card metadata */

.curriculum-meta {
    margin-top: 48px;

    padding-top: 27px;

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

    gap: 24px;

    border-top: 1px solid #292c34;
}

.curriculum-meta div {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.curriculum-meta span {
    color: #666974;

    font-family: Consolas, "SFMono-Regular", monospace;
    font-size: 11px;
    letter-spacing: 0.13em;
}

.curriculum-meta strong {
    color: #d8d5d0;

    font-size: 14px;
    font-weight: 750;
}


/* Animation */

.layers-header,
.layers-workspace {
    animation: layersReveal 0.75s ease both;
}

.layers-workspace {
    animation-delay: 0.12s;
}

.curriculum-card {
    animation: curriculumIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: 0.2s;
}

@keyframes layersReveal {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

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

@keyframes curriculumIn {
    from {
        opacity: 0;
        transform: translateX(24px) scale(0.985);
    }

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


/* Responsive */

@media (max-width: 1000px) {
    .layers-header {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .layers-intro {
        padding-top: 0;
    }

    .layers-workspace {
        grid-template-columns: 230px minmax(0, 1fr);
        gap: 30px;
    }

    .curriculum-content {
        padding: 45px 34px 36px;
    }
}

@media (max-width: 760px) {
    .layers-section {
        padding: 76px 18px 70px;
    }

    .layers-title {
        font-size: clamp(45px, 13vw, 68px);
    }

    .layers-intro {
        font-size: 16px;
    }

    .layers-workspace {
        margin-top: 52px;

        grid-template-columns: 1fr;
        gap: 36px;
    }

    .layers-sidebar {
        padding-left: 0;

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

        gap: 0 22px;
    }

    .layers-sidebar::before {
        display: none;
    }

    .layer-nav {
        min-height: 88px;

        padding: 0 0 18px 0;
    }

    .layer-nav::before {
        left: 0;
        top: auto;
        bottom: 0;

        width: 0;
        height: 2px;
    }

    .layer-nav.is-active::before {
        width: 58px;
        height: 2px;
    }

    .curriculum-card {
        min-height: 0;
    }

    .curriculum-topbar {
        padding: 0 18px;
    }

    .curriculum-content {
        padding: 36px 22px 28px;
    }

    .curriculum-content h3 {
        font-size: 31px;
    }

    .curriculum-description {
        font-size: 15px;
    }

    .layer-map {
        min-width: 620px;
        margin-top: 40px;
    }

    .curriculum-card {
        overflow-x: auto;
    }

    .curriculum-meta {
        min-width: 620px;
        margin-top: 40px;
    }
}

@media (max-width: 420px) {
    .layers-title {
        font-size: 43px;
    }

    .layers-sidebar {
        grid-template-columns: 1fr;
    }

    .curriculum-content h3 {
        font-size: 28px;
    }
}


/* Final layer / Systems state */
.layers-workspace[data-layer="5"] .curriculum-card {
    border-color: rgba(255, 176, 55, 0.42);
}

.layers-workspace[data-layer="5"] .curriculum-stage {
    color: #ffb13b;
}

.layers-workspace[data-layer="5"] .layer-map-progress {
    background:
        linear-gradient(
            90deg,
            #ff5b1f 0%,
            #ff9a24 58%,
            #ffd23d 100%
        );
}


/* =========================
   THEME SAFETY
========================= */

html[data-theme="light"] .layers-section {
    background:
        radial-gradient(
            circle at 9% 12%,
            rgba(255, 91, 31, 0.055),
            transparent 26%
        ),
        #f7f7f5;

    color: #15161a;
}

html[data-theme="light"] .layers-section::before {
    background-image:
        linear-gradient(
            rgba(0, 0, 0, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.035) 1px,
            transparent 1px
        );
}

html[data-theme="light"] .layers-title,
html[data-theme="light"] .curriculum-content h3 {
    color: #15161a;
}

html[data-theme="light"] .layers-intro,
html[data-theme="light"] .curriculum-description {
    color: #626570;
}

html[data-theme="light"] .layers-sidebar::before {
    background: #d7d8dc;
}

html[data-theme="light"] .layer-nav-copy strong {
    color: #686b75;
}

html[data-theme="light"] .layer-nav.is-active .layer-nav-copy strong {
    color: #15161a;
}

html[data-theme="light"] .layer-nav-copy small {
    color: #858892;
}

html[data-theme="light"] .curriculum-card {
    border-color: #d7d8dc;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(20, 24, 32, 0.08);
}

html[data-theme="light"] .curriculum-topbar {
    border-bottom-color: #e1e2e5;
    color: #777a83;
}

html[data-theme="light"] .curriculum-content h3 {
    color: #17181c;
}

html[data-theme="light"] .layer-map-line {
    background: #dedfe3;
}

html[data-theme="light"] .layer-map-step > span {
    background: #ffffff;
    border-color: #cfd1d6;
}

html[data-theme="light"] .layer-map-step strong {
    color: #656873;
}

html[data-theme="light"] .layer-map-step.is-active strong {
    color: #17181c;
}

html[data-theme="light"] .curriculum-meta {
    border-top-color: #e1e2e5;
}

html[data-theme="light"] .curriculum-meta strong {
    color: #303139;
}

/* =========================================================
   FINAL UI/UX OVERRIDES — DataEngineerX v3
   Theme, alignment, grid and connector-line normalization.
========================================================= */

:root {
    --site-max: 1440px;
    --grid-size: 64px;
    --section-pad-x: max(24px, calc((100% - var(--site-max)) / 2));

    --process-bg: #f6f6f4;
    --process-surface: #ffffff;
    --process-surface-soft: #f0f1f3;
    --process-text: #15161a;
    --process-muted: #626570;
    --process-line: #d8d9dd;
    --process-border: #dfe0e4;
    --process-detail-muted: #666973;
    --process-number-muted: #8a8d96;

    --layers-bg: #f6f6f4;
    --layers-surface: #ffffff;
    --layers-border: #dfe0e4;
    --layers-line: #d8d9dd;
    --layers-text: #15161a;
    --layers-muted: #656873;
    --layers-subtle: #858892;
    --layers-grid: rgba(20, 24, 32, 0.045);
}

html[data-theme="dark"] {
    --process-bg: #08090d;
    --process-surface: #11131a;
    --process-surface-soft: #0d0f14;
    --process-text: #f7f5f1;
    --process-muted: #858792;
    --process-line: #2d3038;
    --process-border: #30333c;
    --process-detail-muted: #9a9ca6;
    --process-number-muted: #777a85;

    --layers-bg: #080a0e;
    --layers-surface: #11131a;
    --layers-border: #343740;
    --layers-line: #2a2d35;
    --layers-text: #f3f0ec;
    --layers-muted: #8f929d;
    --layers-subtle: #656873;
    --layers-grid: rgba(255, 255, 255, 0.025);
}

body {
    overflow-x: hidden;
}

/* Shared grid rhythm */
.hero-grid,
.process-section::before,
.layers-section::before {
    background-size: var(--grid-size) var(--grid-size) !important;
    background-position: center top !important;
}

/* HERO alignment */
.hero-section {
    padding-left: var(--section-pad-x);
    padding-right: var(--section-pad-x);
}

/* PROCESS */
.process-section {
    padding-left: var(--section-pad-x);
    padding-right: var(--section-pad-x);
    background:
        radial-gradient(circle at 10% 8%, rgba(255, 100, 34, 0.045), transparent 24%),
        var(--process-bg);
}

.process-section::before {
    background-image:
        linear-gradient(var(--layers-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--layers-grid) 1px, transparent 1px);
}

.process-header,
.process-timeline,
.process-detail,
.process-progress {
    width: 100%;
    max-width: var(--site-max);
    margin-left: auto;
    margin-right: auto;
}

.process-header {
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.72fr);
    gap: clamp(48px, 8vw, 128px);
}

.process-timeline {
    --process-progress-factor: 0;
}

.process-timeline::before {
    left: 8.333333%;
    right: 8.333333%;
    top: 34px;
    width: auto;
    height: 2px;
}

.process-timeline::after {
    left: 8.333333%;
    right: 8.333333%;
    top: 34px;
    width: auto;
    max-width: none;
    height: 3px;
    transform: translateY(-0.5px) scaleX(var(--process-progress-factor));
    transform-origin: left center;
}

.process-number {
    background: var(--process-bg);
    color: var(--process-number-muted);
}

.process-step small {
    color: var(--process-muted);
}

.process-step:hover .process-number {
    color: var(--process-text);
}

.process-detail {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.008)),
        var(--process-surface);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.12);
}

html[data-theme="light"] .process-detail {
    background: var(--process-surface);
    box-shadow: 0 24px 70px rgba(20, 24, 32, 0.08);
}

.process-detail-number {
    color: color-mix(in srgb, var(--process-text) 12%, transparent);
}

.process-detail-main > p:last-child {
    color: var(--process-detail-muted);
}

.process-outcome span {
    color: var(--process-muted);
}

.process-outcome strong {
    color: var(--process-text);
}

.process-progress span {
    background: var(--process-line);
}

/* LAYERS */
.layers-section {
    padding-left: var(--section-pad-x);
    padding-right: var(--section-pad-x);
    background:
        radial-gradient(circle at 9% 12%, rgba(255, 91, 31, 0.055), transparent 26%),
        var(--layers-bg);
    color: var(--layers-text);
}

.layers-section::before {
    background-image:
        linear-gradient(var(--layers-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--layers-grid) 1px, transparent 1px);
}

.layers-header,
.layers-workspace {
    width: 100%;
    max-width: var(--site-max);
    margin-left: auto;
    margin-right: auto;
}

.layers-header {
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr);
    gap: clamp(48px, 8vw, 128px);
}

.layers-intro {
    color: var(--layers-muted);
}

.layers-title {
    color: var(--layers-text);
}

.layers-sidebar::before {
    background: var(--layers-line);
}

.layer-nav-number,
.layer-nav-copy strong,
.layer-nav-copy small {
    color: var(--layers-muted);
}

.layer-nav.is-active .layer-nav-number {
    color: var(--process-orange);
}

.layer-nav.is-active .layer-nav-copy strong,
.layer-nav:hover .layer-nav-copy strong {
    color: var(--layers-text);
}

.curriculum-card {
    min-height: 0;
    border-color: var(--layers-border);
    background: var(--layers-surface);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.12);
}

html[data-theme="dark"] .curriculum-card {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.008)),
        var(--layers-surface);
    box-shadow: 0 34px 100px rgba(0, 0, 0, 0.3);
}

.curriculum-topbar {
    border-bottom-color: var(--layers-border);
    color: var(--layers-subtle);
}

.curriculum-content h3 {
    color: var(--layers-text);
}

.curriculum-description {
    color: var(--layers-muted);
}

/* Six curriculum nodes: exact center-to-center connector. */
.layer-map {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.layer-map-line,
.layer-map-progress {
    left: 8.333333%;
    right: 8.333333%;
    width: auto;
}

.layer-map-progress {
    --layer-progress-factor: 0;
    transform: scaleX(var(--layer-progress-factor));
    transform-origin: left center;
    right: 8.333333%;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.layer-map-step > span {
    background: var(--layers-surface);
    border-color: var(--layers-border);
}

.layer-map-step strong {
    color: var(--layers-muted);
}

.layer-map-step.is-active strong {
    color: var(--layers-text);
}

.curriculum-meta {
    border-top-color: var(--layers-border);
}

.curriculum-meta span {
    color: var(--layers-subtle);
}

.curriculum-meta strong {
    color: var(--layers-text);
}

/* Final selected layer stays visually distinct without changing layout. */
.layers-workspace[data-layer="5"] .curriculum-card {
    border-color: rgba(255, 176, 55, 0.48);
}

/* Desktop/tablet line remains horizontal. */
@media (min-width: 761px) {
    .process-timeline {
        overflow: visible;
    }
}

/* Mobile: use the same exact connector logic vertically. */
@media (max-width: 760px) {
    .process-section,
    .layers-section {
        padding-left: 18px;
        padding-right: 18px;
    }

    .process-timeline {
        --process-progress-factor: 0;
    }

    .process-timeline::before {
        left: 34px;
        right: auto;
        top: 34px;
        bottom: 34px;
        width: 2px;
        height: auto;
    }

    .process-timeline::after {
        left: 33px;
        right: auto;
        top: 34px;
        bottom: 34px;
        width: 3px;
        height: auto;
        transform: scaleY(var(--process-progress-factor));
        transform-origin: top center;
    }

    .layers-header,
    .layers-workspace {
        width: 100%;
    }

    .curriculum-card {
        overflow: hidden;
    }

    .curriculum-content {
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
    }

    .layer-map {
        min-width: 700px;
    }

    .curriculum-meta {
        min-width: 700px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .process-timeline::after,
    .layer-map-progress {
        transition: none !important;
        animation: none !important;
    }
}


/* =========================================================
   THE ENGINEER'S LOOP
========================================================= */

html {
    --lifecycle-bg: #080a0e;
    --lifecycle-text: #f7f4ef;
    --lifecycle-muted: #90939e;
    --lifecycle-line: rgba(255, 255, 255, 0.14);
    --lifecycle-node: #0d0f15;
    --lifecycle-border: #363943;
    --lifecycle-orange: #ff5b1f;
    --lifecycle-yellow: #ffd23d;
    --lifecycle-teal: #13c6b0;
}

html[data-theme="light"] {
    --lifecycle-bg: #f6f6f4;
    --lifecycle-text: #15161a;
    --lifecycle-muted: #676a73;
    --lifecycle-line: rgba(20, 24, 30, 0.17);
    --lifecycle-node: #ffffff;
    --lifecycle-border: #d3d5da;
}

.lifecycle-section {
    position: relative;
    min-height: 900px;

    padding:
        86px
        max(24px, calc((100% - 1440px) / 2))
        56px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 19% 45%,
            rgba(255, 91, 31, 0.075),
            transparent 31%
        ),
        radial-gradient(
            circle at 84% 58%,
            rgba(16, 196, 160, 0.055),
            transparent 31%
        ),
        var(--lifecycle-bg);

    color: var(--lifecycle-text);
}

.lifecycle-grid {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );

    background-size: 64px 64px;
}

html[data-theme="light"] .lifecycle-grid {
    background-image:
        linear-gradient(
            rgba(20, 24, 30, 0.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(20, 24, 30, 0.045) 1px,
            transparent 1px
        );
}

.lifecycle-header {
    position: relative;
    z-index: 1;

    max-width: 900px;
    margin: 0 auto;

    text-align: center;
}

.lifecycle-eyebrow,
.lifecycle-step-label {
    color: var(--lifecycle-orange);

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 12px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.lifecycle-title {
    margin-top: 22px;

    font-size: clamp(54px, 5vw, 78px);
    line-height: 0.98;
    letter-spacing: -0.055em;
    font-weight: 850;
}

.lifecycle-title span {
    background:
        linear-gradient(
            105deg,
            var(--lifecycle-orange),
            #ff7b21 52%,
            var(--lifecycle-yellow)
        );

    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
}

.lifecycle-intro {
    margin: 25px auto 0;

    max-width: 610px;

    color: var(--lifecycle-muted);

    font-size: 17px;
    line-height: 1.75;
    font-weight: 500;
}


/* Main layout */

.lifecycle-content {
    position: relative;
    z-index: 1;

    max-width: 1150px;
    margin: 45px auto 0;

    display: grid;
    grid-template-columns: minmax(520px, 1fr) minmax(380px, 0.9fr);

    gap: clamp(40px, 7vw, 105px);

    align-items: center;
}

.lifecycle-orbit-wrap {
    position: relative;

    width: min(500px, 100%);
    aspect-ratio: 1;

    margin: 0 auto;

    isolation: isolate;
}

.lifecycle-orbit {
    position: absolute;
    inset: 12%;

    border: 1px dashed rgba(160, 165, 177, 0.24);
    border-radius: 50%;

    animation: lifecycleRotate 26s linear infinite;
}

.lifecycle-orbit::before,
.lifecycle-orbit::after {
    content: "";

    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--lifecycle-teal);

    box-shadow: 0 0 12px rgba(19, 198, 176, 0.65);
}

.lifecycle-orbit::before {
    top: 15%;
    right: 7%;
}

.lifecycle-orbit::after {
    bottom: 19%;
    left: 7%;

    background: var(--lifecycle-orange);
    box-shadow: 0 0 12px rgba(255, 91, 31, 0.65);
}

@keyframes lifecycleRotate {
    to {
        transform: rotate(360deg);
    }
}

.lifecycle-orbit-glow {
    position: absolute;
    inset: 28%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 91, 31, 0.075),
            transparent 68%
        );

    filter: blur(12px);
}


/* Orbit nodes */

.lifecycle-node {
    position: absolute;

    width: 80px;
    aspect-ratio: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;

    border: 1px solid var(--lifecycle-border);
    border-radius: 50%;

    background: var(--lifecycle-node);
    color: var(--lifecycle-text);

    cursor: pointer;

    z-index: 3;

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease,
        color 0.35s ease;
}

.lifecycle-node:hover {
    transform: scale(1.06);
    border-color: var(--lifecycle-orange);
}

.lifecycle-node.is-active {
    width: 92px;

    border-color: transparent;

    background:
        linear-gradient(
            135deg,
            #ff5b1f,
            #ff9c2b 65%,
            #ffd23d
        );

    color: #fff;

    box-shadow:
        0 0 0 10px rgba(255, 91, 31, 0.06),
        0 14px 32px rgba(255, 91, 31, 0.25);
}

.lifecycle-node-1 {
    top: 2%;
    left: 50%;
    transform: translateX(-50%);
}

.lifecycle-node-2 {
    top: 37%;
    right: 0;
}

.lifecycle-node-3 {
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
}

.lifecycle-node-4 {
    top: 37%;
    left: 0;
}

.lifecycle-node-1:hover,
.lifecycle-node-3:hover {
    transform: translateX(-50%) scale(1.06);
}

.lifecycle-node.is-active.lifecycle-node-4 {
    transform: scale(1.04);
}

.lifecycle-icon {
    font-size: 14px;
    line-height: 1;
    font-weight: 800;
}

.lifecycle-node strong {
    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: 11px;
    line-height: 1;
}


/* Core */

.lifecycle-core {
    position: absolute;
    inset: 32%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(100, 105, 118, 0.5);
    border-radius: 50%;

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(255, 255, 255, 0.025),
            transparent 67%
        ),
        var(--lifecycle-node);

    z-index: 2;
}

.lifecycle-core strong {
    font-size: clamp(44px, 5vw, 66px);
    line-height: 1;
    letter-spacing: -0.05em;
}

.lifecycle-core span {
    margin-top: 16px;

    color: #7d8190;

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: 10px;
    letter-spacing: 0.2em;
}


/* Detail */

.lifecycle-detail {
    max-width: 520px;
}

.lifecycle-detail h3 {
    margin-top: 28px;

    font-size: clamp(34px, 3vw, 52px);
    line-height: 1.04;
    letter-spacing: -0.045em;
    font-weight: 820;
}

.lifecycle-detail-copy {
    margin-top: 20px;

    color: var(--lifecycle-muted);

    font-size: 17px;
    line-height: 1.75;
}

.lifecycle-next {
    display: inline-flex;

    margin-top: 27px;

    color: var(--lifecycle-text);

    font-size: 14px;
    font-weight: 800;

    text-decoration: none;

    transition: color 0.2s ease, transform 0.2s ease;
}

.lifecycle-next:hover {
    color: var(--lifecycle-orange);
    transform: translateX(3px);
}

.lifecycle-progress {
    margin-top: 58px;

    display: flex;
    gap: 10px;
}

.lifecycle-progress span {
    width: 30px;
    height: 4px;

    display: block;

    background: #353841;

    transition:
        width 0.35s ease,
        background 0.35s ease;
}

.lifecycle-progress span.is-active {
    width: 30px;

    background:
        linear-gradient(
            90deg,
            var(--lifecycle-orange),
            var(--lifecycle-yellow)
        );
}


/* Technology chips */

.lifecycle-stack {
    position: relative;
    z-index: 1;

    max-width: 840px;

    margin: 36px auto 0;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.lifecycle-stack span {
    padding: 10px 17px;

    border: 1px solid var(--lifecycle-border);
    border-radius: 999px;

    background:
        color-mix(
            in srgb,
            var(--lifecycle-node) 90%,
            transparent
        );

    color: var(--lifecycle-text);

    font-size: 13px;
    font-weight: 750;

    white-space: nowrap;

    transition:
        border-color 0.2s ease,
        transform 0.2s ease;
}

.lifecycle-stack span:hover {
    border-color: var(--lifecycle-orange);
    transform: translateY(-2px);
}


/* Small decorative orbit points */

.lifecycle-dot {
    position: absolute;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    z-index: 1;
}

.lifecycle-dot-one {
    top: 28%;
    right: 12%;

    background: var(--lifecycle-teal);
    box-shadow: 0 0 12px rgba(19, 198, 176, 0.8);
}

.lifecycle-dot-two {
    bottom: 27%;
    left: 12%;

    background: var(--lifecycle-orange);
    box-shadow: 0 0 12px rgba(255, 91, 31, 0.8);
}


/* Light theme adjustments */

html[data-theme="light"] .lifecycle-orbit {
    border-color: rgba(35, 40, 48, 0.22);
}

html[data-theme="light"] .lifecycle-core {
    background: #ffffff;
    border-color: #d2d4d9;
}

html[data-theme="light"] .lifecycle-stack span {
    background: rgba(255, 255, 255, 0.78);
}


/* Responsive */

@media (max-width: 1000px) {
    .lifecycle-section {
        min-height: auto;
        padding-top: 74px;
    }

    .lifecycle-content {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .lifecycle-detail {
        max-width: 650px;
        margin: 0 auto;
        text-align: center;
    }

    .lifecycle-progress {
        justify-content: center;
    }

    .lifecycle-stack {
        max-width: 720px;
    }
}

@media (max-width: 680px) {
    .lifecycle-section {
        padding:
            66px
            18px
            46px;
    }

    .lifecycle-title {
        font-size: clamp(43px, 13vw, 61px);
    }

    .lifecycle-intro {
        font-size: 15px;
        line-height: 1.65;
    }

    .lifecycle-desktop-break {
        display: none;
    }

    .lifecycle-content {
        margin-top: 36px;
    }

    .lifecycle-orbit-wrap {
        width: min(360px, 100%);
    }

    .lifecycle-node {
        width: 64px;
    }

    .lifecycle-node.is-active {
        width: 76px;
    }

    .lifecycle-core {
        inset: 30%;
    }

    .lifecycle-core strong {
        font-size: 42px;
    }

    .lifecycle-core span {
        margin-top: 10px;
        font-size: 8px;
    }

    .lifecycle-detail {
        text-align: left;
    }

    .lifecycle-detail h3 {
        margin-top: 18px;
        font-size: 34px;
    }

    .lifecycle-detail-copy {
        font-size: 15px;
    }

    .lifecycle-progress {
        justify-content: flex-start;
        margin-top: 35px;
    }

    .lifecycle-stack {
        justify-content: flex-start;
        margin-top: 38px;
        gap: 8px;
    }

    .lifecycle-stack span {
        padding: 8px 13px;
        font-size: 12px;
    }
}

@media (max-width: 400px) {
    .lifecycle-orbit-wrap {
        width: 310px;
    }

    .lifecycle-node {
        width: 58px;
    }

    .lifecycle-node.is-active {
        width: 70px;
    }

    .lifecycle-detail h3 {
        font-size: 30px;
    }
}


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

.practice-section,
.workspace-section {
    position: relative;
    overflow: hidden;
    color: var(--lifecycle-text);
}

.practice-section {
    padding: 105px max(24px, calc((100% - 1380px) / 2)) 92px;
    background:
        radial-gradient(circle at 18% 12%, rgba(255,91,31,.055), transparent 28%),
        var(--lifecycle-bg);
}

.practice-grid,
.workspace-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
    background-size: 64px 64px;
}

html[data-theme="light"] .practice-grid,
html[data-theme="light"] .workspace-grid {
    background-image:
        linear-gradient(rgba(20,24,30,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20,24,30,.04) 1px, transparent 1px);
}

.practice-container,
.workspace-container,
.projects-container {
    position: relative;
    z-index: 1;
    max-width: 1380px;
    margin: 0 auto;
}

.practice-header,
.workspace-header,
.projects-header {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .65fr);
    gap: clamp(55px, 9vw, 145px);
    align-items: start;
}

.practice-title,
.workspace-title,
.projects-title {
    margin: 0;
    font-size: clamp(54px, 5.5vw, 78px);
    line-height: .97;
    letter-spacing: -.055em;
    font-weight: 850;
}

.practice-title span,
.workspace-title span,
.projects-title span {
    background: linear-gradient(105deg, var(--lifecycle-orange), #ff8a22 55%, var(--lifecycle-yellow));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.practice-intro,
.workspace-intro,
.projects-intro {
    max-width: 500px;
    margin: 6px 0 0;
    color: var(--lifecycle-muted);
    font-size: 17px;
    line-height: 1.75;
}

.practice-controls {
    margin-top: 72px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 265px;
    gap: 14px;
    align-items: center;
}

.practice-tabs,
.practice-difficulty {
    min-height: 50px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    border: 1px solid var(--lifecycle-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--lifecycle-node) 94%, transparent);
}

.practice-tab,
.difficulty-tab {
    height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--lifecycle-muted);
    font: 800 11px/1 Consolas, monospace;
    letter-spacing: .04em;
    cursor: pointer;
}

.practice-tab.is-active,
.difficulty-tab.is-active {
    color: #ff7b30;
    background: rgba(255,91,31,.14);
}

.practice-search input {
    width: 100%;
    height: 50px;
    padding: 0 15px;
    border: 1px solid var(--lifecycle-border);
    border-radius: 12px;
    outline: none;
    background: var(--lifecycle-node);
    color: var(--lifecycle-text);
    font: 500 15px/1 system-ui, sans-serif;
}

.practice-search input::placeholder {
    color: #777b85;
}

.problem-list {
    margin-top: 21px;
    border: 1px solid var(--lifecycle-border);
    border-radius: 19px;
    overflow: hidden;
    background: color-mix(in srgb, var(--lifecycle-node) 96%, transparent);
}

.problem-row {
    width: 100%;
    min-height: 126px;
    padding: 22px 24px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 145px 120px 24px;
    gap: 18px;
    align-items: center;
    border: 0;
    border-bottom: 1px solid var(--lifecycle-border);
    background: transparent;
    color: var(--lifecycle-text);
    text-align: left;
    cursor: pointer;
}

.problem-row:last-child {
    border-bottom: 0;
}

.problem-row:hover {
    background: rgba(255,255,255,.018);
}

.problem-row.is-hidden {
    display: none;
}

.problem-status {
    width: 11px;
    height: 11px;
    border: 1px solid #555a65;
    border-radius: 50%;
}

.problem-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.problem-main strong {
    font-size: 16px;
}

.problem-main small,
.problem-level small,
.problem-time small {
    color: #737681;
    font-size: 12px;
}

.problem-tags {
    display: flex;
    gap: 5px;
}

.problem-tags i {
    padding: 3px 7px;
    border: 1px solid #40444e;
    border-radius: 4px;
    color: #888b94;
    font: 9px/1 Consolas, monospace;
    font-style: normal;
}

.problem-level,
.problem-time {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.problem-level strong,
.problem-time strong {
    font-size: 16px;
}

.problem-arrow {
    font-size: 17px;
}


/* =========================================================
   WORKSPACE
========================================================= */

.workspace-section {
    padding: 112px max(24px, calc((100% - 1380px) / 2)) 96px;
    background:
        radial-gradient(circle at 10% 18%, rgba(255,91,31,.075), transparent 28%),
        radial-gradient(circle at 87% 68%, rgba(15,196,160,.045), transparent 30%),
        var(--lifecycle-bg);
}

.workspace-modes {
    margin-top: 72px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.workspace-mode {
    min-height: 205px;
    padding: 30px 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
    border: 1px solid var(--lifecycle-border);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255,255,255,.028), rgba(255,255,255,.006));
    color: var(--lifecycle-text);
    text-align: left;
    cursor: pointer;
    transition: .3s ease;
}

.workspace-mode:hover {
    transform: translateY(-3px);
}

.workspace-mode.is-active {
    border-color: var(--lifecycle-orange);
    background:
        radial-gradient(circle at 70% 0%, rgba(255,91,31,.13), transparent 45%),
        linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
    box-shadow: 0 20px 50px rgba(255,91,31,.07);
}

.workspace-mode small,
.workspace-kicker {
    color: var(--lifecycle-orange);
    font: 800 11px/1.2 Consolas, monospace;
    letter-spacing: .12em;
}

.workspace-mode small {
    color: #767a85;
}

.workspace-mode.is-active small {
    color: var(--lifecycle-orange);
}

.workspace-mode strong {
    font-size: 21px;
}

.workspace-mode span {
    max-width: 330px;
    color: var(--lifecycle-muted);
    font-size: 14px;
    line-height: 1.6;
}

.workspace-detail {
    min-height: 260px;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    border: 1px solid var(--lifecycle-border);
    border-radius: 18px;
    overflow: hidden;
    background: color-mix(in srgb, var(--lifecycle-node) 96%, transparent);
}

.workspace-detail-copy,
.workspace-flow {
    padding: 38px 42px;
}

.workspace-flow {
    border-left: 1px solid var(--lifecycle-border);
}

.workspace-detail h3 {
    margin: 19px 0 12px;
    font-size: 31px;
    letter-spacing: -.035em;
}

.workspace-detail-copy > p:not(.workspace-kicker),
.workspace-flow-note {
    max-width: 650px;
    color: var(--lifecycle-muted);
    font-size: 15px;
    line-height: 1.7;
}

.workspace-tags {
    margin-top: 25px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.workspace-tags span {
    padding: 7px 12px;
    border: 1px solid var(--lifecycle-border);
    border-radius: 999px;
    color: var(--lifecycle-text);
    font-size: 11px;
    font-weight: 700;
}

.workspace-flow > p:first-child,
.project-flow > p {
    color: #666a75;
    font: 10px/1 Consolas, monospace;
    letter-spacing: .15em;
}

.workspace-flow-steps {
    margin-top: 28px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
}

.workspace-flow-steps span {
    min-height: 58px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--lifecycle-border);
    border-radius: 10px;
}

.workspace-flow-steps b {
    font-size: 11px;
}

.workspace-flow-steps small {
    margin-top: 4px;
    color: #777a85;
    font-size: 10px;
}

.workspace-flow-note {
    margin-top: 20px;
}


/* =========================================================
   PROJECTS
========================================================= */

.projects-section {
    position: relative;
    overflow: hidden;
    padding: 112px max(24px, calc((100% - 1380px) / 2)) 50px;
    background: var(--lifecycle-bg);
    color: var(--lifecycle-text);
}

.project-cards {
    margin-top: 68px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 13px;
}

.project-card {
    min-height: 250px;
    padding: 30px 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    border: 1px solid var(--lifecycle-border);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(255,255,255,.028), rgba(255,255,255,.006));
    color: var(--lifecycle-text);
    cursor: pointer;
    transition: .3s ease;
}

.project-card:hover {
    transform: translateY(-3px);
}

.project-card.is-active {
    border-color: var(--lifecycle-orange);
    background:
        radial-gradient(circle at 70% 0%, rgba(255,91,31,.14), transparent 48%),
        linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.006));
    box-shadow: 0 20px 55px rgba(255,91,31,.07);
}

.project-card small {
    color: #777b85;
    font: 10px/1 Consolas, monospace;
}

.project-card em {
    margin-top: 38px;
    color: var(--lifecycle-orange);
    font: 800 10px/1 Consolas, monospace;
    letter-spacing: .12em;
    font-style: normal;
}

.project-card strong {
    margin-top: 13px;
    font-size: 19px;
}

.project-card span {
    margin-top: 12px;
    color: var(--lifecycle-muted);
    font-size: 13px;
    line-height: 1.6;
}

.project-card b {
    margin-top: auto;
    color: var(--lifecycle-text);
    font: 700 10px/1.3 Consolas, monospace;
}

.project-detail {
    margin-top: 14px;
    min-height: 290px;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    border: 1px solid var(--lifecycle-border);
    border-radius: 17px;
    overflow: hidden;
    background: color-mix(in srgb, var(--lifecycle-node) 96%, transparent);
}

.project-detail-main,
.project-flow {
    padding: 38px;
}

.project-flow {
    border-left: 1px solid var(--lifecycle-border);
}

.project-kicker {
    color: var(--lifecycle-orange);
    font: 800 11px/1.2 Consolas, monospace;
    letter-spacing: .13em;
}

.project-detail h3 {
    margin-top: 18px;
    font-size: 28px;
    letter-spacing: -.035em;
}

.project-detail-copy {
    margin-top: 11px;
}

.project-detail-main > p:not(.project-kicker) {
    max-width: 630px;
    color: var(--lifecycle-muted);
    font-size: 14px;
    line-height: 1.7;
}

.project-metrics {
    margin-top: 26px;
    padding-top: 17px;
    display: flex;
    gap: 12px;
    border-top: 1px solid var(--lifecycle-border);
}

.project-metrics div {
    min-width: 170px;
    padding: 12px 14px;
    border: 1px solid var(--lifecycle-border);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.project-metrics small {
    color: #686c76;
    font: 9px/1 Consolas, monospace;
    letter-spacing: .12em;
}

.project-metrics strong {
    color: #797d87;
    font-size: 12px;
}

.project-flow-chain {
    margin-top: 29px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.project-flow-chain span {
    padding: 9px 13px;
    border: 1px solid var(--lifecycle-border);
    border-radius: 9px;
    font-size: 10px;
    font-weight: 800;
}

.project-flow-chain i {
    color: #a1a4ad;
    font-style: normal;
}

.project-lifecycle {
    margin-top: 20px;
    padding-top: 18px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    border-top: 1px solid var(--lifecycle-border);
}

.project-lifecycle span {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.project-lifecycle b {
    font: 800 10px/1 Consolas, monospace;
}

.project-lifecycle small {
    color: #70747f;
    font: 8px/1.2 Consolas, monospace;
}

.projects-footer {
    margin-top: 18px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: #626671;
    font: 9px/1.3 Consolas, monospace;
    letter-spacing: .04em;
}


/* =========================================================
   NEXT 3 SECTIONS - RESPONSIVE
========================================================= */

@media (max-width: 1050px) {
    .practice-header,
    .workspace-header,
    .projects-header {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .practice-intro,
    .workspace-intro,
    .projects-intro {
        max-width: 650px;
    }

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

    .practice-search {
        grid-column: 1 / -1;
    }

    .workspace-detail,
    .project-detail {
        grid-template-columns: 1fr;
    }

    .workspace-flow,
    .project-flow {
        border-left: 0;
        border-top: 1px solid var(--lifecycle-border);
    }
}

@media (max-width: 760px) {
    .practice-section,
    .workspace-section,
    .projects-section {
        padding: 76px 18px 65px;
    }

    .practice-title,
    .workspace-title,
    .projects-title {
        font-size: clamp(43px, 12.5vw, 62px);
    }

    .practice-intro,
    .workspace-intro,
    .projects-intro {
        font-size: 15px;
    }

    .practice-controls {
        margin-top: 48px;
        grid-template-columns: 1fr;
    }

    .practice-tabs,
    .practice-difficulty {
        width: 100%;
        overflow-x: auto;
    }

    .practice-tab,
    .difficulty-tab {
        flex: 0 0 auto;
    }

    .problem-list {
        border-radius: 14px;
    }

    .problem-row {
        min-height: 0;
        padding: 20px 16px;
        grid-template-columns: 17px minmax(0, 1fr) 70px;
        gap: 11px;
    }

    .problem-level {
        grid-column: 3;
        grid-row: 1;
    }

    .problem-time,
    .problem-arrow {
        display: none;
    }

    .problem-main small {
        line-height: 1.5;
    }

    .workspace-modes,
    .project-cards {
        margin-top: 48px;
        grid-template-columns: 1fr;
    }

    .workspace-mode {
        min-height: 175px;
    }

    .workspace-detail-copy,
    .workspace-flow,
    .project-detail-main,
    .project-flow {
        padding: 27px 22px;
    }

    .workspace-flow-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .project-card {
        min-height: 220px;
    }

    .project-card em {
        margin-top: 27px;
    }

    .project-detail h3 {
        font-size: 25px;
    }

    .project-metrics {
        flex-direction: column;
    }

    .project-metrics div {
        min-width: 0;
    }

    .project-flow-chain {
        gap: 5px;
    }

    .project-flow-chain span {
        padding: 8px 9px;
    }

    .project-lifecycle {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 18px;
    }

    .projects-footer {
        flex-direction: column;
        line-height: 1.5;
    }
}

@media (max-width: 430px) {
    .practice-title,
    .workspace-title,
    .projects-title {
        font-size: 42px;
    }

    .problem-row {
        grid-template-columns: 13px minmax(0, 1fr) 64px;
    }

    .problem-main strong {
        font-size: 14px;
    }

    .problem-main small {
        font-size: 11px;
    }
}

/* =========================================================
   PIPELINE CITY
========================================================= */

.pipeline-city-section {
    --pc-cyan: #00f0ff;
    --pc-pink: #ff2a85;
    --pc-purple: #a855f7;
    --pc-yellow: #ffe56b;
    --pc-green: #7cff6b;
    position: relative;
    width: min(1440px, calc(100% - 48px));
    min-height: min(860px, 92vh);
    margin: 40px auto;
    padding: 28px;
    box-sizing: border-box;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 28px;
    box-shadow:
        0 24px 70px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.04);
    background:
        radial-gradient(circle at 20% 30%, rgba(168,85,247,.08), transparent 28%),
        radial-gradient(circle at 80% 60%, rgba(0,240,255,.06), transparent 28%),
        #030108;
    color: #e2e8f0;
}

html[data-theme="light"] .pipeline-city-section {
    background:
        radial-gradient(circle at 20% 30%, rgba(255,104,35,.08), transparent 28%),
        radial-gradient(circle at 80% 60%, rgba(12,178,148,.06), transparent 28%),
        #f6f4ef;
    color: #15171c;
    border-color: rgba(20,24,30,.12);
    box-shadow:
        0 24px 70px rgba(20,24,30,.10),
        inset 0 1px 0 rgba(255,255,255,.7);
}

#pipelineCityCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
    z-index: 0;
}

.pipeline-city-topline,
.pipeline-hud,
.pipeline-chips,
.pipeline-card,
.pipeline-toast,
.pipeline-loading {
    position: absolute;
    z-index: 3;
}

.pipeline-city-topline {
    inset: 0;
    pointer-events: none;
}

.pipeline-hook {
    position: absolute;
    top: 24px;
    left: 24px;
    width: min(460px, 58vw);
    pointer-events: none;
}

.pipeline-hook > span {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 7px;
    background: var(--pc-yellow);
    color: #14001f;
    font: 900 12px/1 system-ui, sans-serif;
    transform: rotate(-3deg);
    box-shadow: 3px 3px 0 var(--pc-pink);
}

.pipeline-hook strong {
    display: block;
    margin-top: 10px;
    color: #fff;
    font-size: clamp(25px, 4.5vw, 42px);
    line-height: 1;
    letter-spacing: -.04em;
    text-shadow: 2px 0 var(--pc-pink), -2px 0 var(--pc-cyan);
}

.pipeline-hook small {
    display: inline-block;
    margin-top: 10px;
    padding: 6px 10px;
    border-left: 3px solid var(--pc-cyan);
    border-radius: 0 8px 8px 0;
    background: rgba(0,0,0,.55);
    color: #e8fbff;
    font-size: 12px;
}

html[data-theme="light"] .pipeline-hook strong {
    color: #17191f;
}

html[data-theme="light"] .pipeline-hook small {
    background: rgba(255,255,255,.78);
    color: #22252b;
}

.pipeline-controls {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 220px;
    padding: 12px 14px;
    border: 1px solid rgba(0,240,255,.3);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(10,7,24,.82), rgba(2,1,9,.65));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 0 24px rgba(0,240,255,.1), 0 0 24px rgba(255,42,133,.07);
    pointer-events: auto;
}

html[data-theme="light"] .pipeline-controls {
    background: rgba(255,255,255,.82);
    border-color: rgba(20,24,30,.16);
    box-shadow: 0 14px 35px rgba(20,24,30,.12);
}

.pipeline-controls-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font: 800 11px/1 system-ui, sans-serif;
    letter-spacing: .13em;
}

.pipeline-controls-head button {
    width: 27px;
    height: 27px;
    border: 1px solid rgba(0,240,255,.4);
    border-radius: 50%;
    background: rgba(0,240,255,.1);
    color: #fff;
    cursor: pointer;
}

html[data-theme="light"] .pipeline-controls-head button {
    color: #17191f;
}

.pipeline-controls.is-minimized .pipeline-controls-body {
    display: none;
}

.pipeline-controls-body label {
    display: block;
    margin-top: 12px;
}

.pipeline-controls-body label > span {
    display: flex;
    justify-content: space-between;
    color: rgba(226,232,240,.72);
    font: 800 9px/1.2 Consolas, monospace;
    letter-spacing: .06em;
    text-transform: uppercase;
}

html[data-theme="light"] .pipeline-controls-body label > span {
    color: #5f636c;
}

.pipeline-controls-body input {
    width: 100%;
    margin-top: 5px;
    accent-color: var(--pc-pink);
}

.pipeline-break,
.pipeline-reel {
    width: 100%;
    margin-top: 12px;
    padding: 9px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 900;
}

.pipeline-break {
    border: 2px solid #fff;
    background: var(--pc-pink);
    color: #fff;
    box-shadow: 3px 3px 0 #000;
}

.pipeline-reel {
    border: 1px dashed rgba(255,255,255,.45);
    background: transparent;
    color: #fff;
}

.pipeline-hint {
    display: block;
    margin-top: 10px;
    color: rgba(226,232,240,.5);
    font-size: 9px;
    line-height: 1.5;
    text-align: center;
}

html[data-theme="light"] .pipeline-hint {
    color: #6b6f77;
}

.pipeline-hud {
    left: 22px;
    bottom: 25px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    pointer-events: none;
    text-shadow: 0 0 14px var(--pc-cyan);
}

.pipeline-hud strong {
    color: #fff;
    font: 800 17px/1 system-ui, sans-serif;
    letter-spacing: .12em;
}

.pipeline-hud span {
    color: rgba(226,232,240,.62);
    font: 10px/1.3 Consolas, monospace;
    letter-spacing: .1em;
}

html[data-theme="light"] .pipeline-hud strong {
    color: #181a20;
}

html[data-theme="light"] .pipeline-hud span {
    color: #646871;
}

.pipeline-chips {
    left: 50%;
    bottom: 18px;
    width: min(900px, calc(100% - 300px));
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    gap: 8px;
    overflow-x: auto;
    padding: 0 10px 4px;
    scrollbar-width: none;
    pointer-events: auto;
}

.pipeline-chips::-webkit-scrollbar {
    display: none;
}

.pipeline-chips button {
    flex: 0 0 auto;
    padding: 8px 13px;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 999px;
    background: rgba(20,0,31,.78);
    color: #fff;
    box-shadow: 3px 3px 0 var(--pc-cyan);
    cursor: pointer;
    font: 800 11px/1 system-ui, sans-serif;
}

.pipeline-chips button.is-active {
    background: var(--pc-yellow);
    color: #14001f;
    box-shadow: 3px 3px 0 var(--pc-pink);
}

html[data-theme="light"] .pipeline-chips button {
    background: rgba(255,255,255,.88);
    color: #202228;
    border-color: #333842;
}

.pipeline-card {
    left: 50%;
    bottom: 72px;
    width: min(380px, calc(100% - 36px));
    padding: 13px 15px;
    border: 2px solid #fff;
    border-radius: 14px;
    background: #14001f;
    box-shadow: 5px 5px 0 var(--pc-pink);
    font-size: 13px;
    line-height: 1.45;
    opacity: 0;
    transform: translate(-50%, 14px);
    pointer-events: none;
    transition: .25s ease;
}

.pipeline-card.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.pipeline-card strong {
    display: block;
    margin-bottom: 4px;
    color: var(--pc-yellow);
    font-size: 15px;
}

.pipeline-toast {
    top: 50%;
    left: 50%;
    padding: 12px 20px;
    border: 3px solid #fff;
    border-radius: 12px;
    background: var(--pc-pink);
    box-shadow: 6px 6px 0 #000;
    color: #fff;
    font-size: clamp(18px, 4vw, 28px);
    font-weight: 900;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.7) rotate(-4deg);
    transition: .25s ease;
    white-space: nowrap;
}

.pipeline-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(-4deg);
}

.pipeline-toast.is-ok {
    background: var(--pc-green);
    color: #06210a;
}

.pipeline-loading {
    top: 50%;
    left: 50%;
    color: var(--pc-cyan);
    font: 11px/1 Consolas, monospace;
    letter-spacing: .35em;
    text-shadow: 0 0 16px var(--pc-cyan);
    transform: translate(-50%, -50%);
    transition: opacity .8s ease;
    pointer-events: none;
}

.pipeline-city-section.is-broken::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    box-shadow: inset 0 0 120px rgba(255,20,50,.5);
    animation: pipeline-flash .3s steps(2) infinite;
}

@keyframes pipeline-flash {
    50% { opacity: .4; }
}

.pipeline-city-section.is-reel .pipeline-controls,
.pipeline-city-section.is-reel .pipeline-chips,
.pipeline-city-section.is-reel .pipeline-card {
    display: none;
}

@media (max-width: 760px) {
    .pipeline-city-section {
        width: calc(100% - 24px);
        min-height: 760px;
        margin: 24px auto;
        padding: 16px;
        border-radius: 20px;
    }

    .pipeline-hook {
        top: 18px;
        left: 16px;
        width: calc(100% - 32px);
        max-width: 310px;
    }

    .pipeline-hook strong {
        font-size: clamp(23px, 7vw, 32px);
    }

    .pipeline-controls {
        top: 18px;
        right: 16px;
        width: 48px;
        padding: 8px;
    }

    .pipeline-controls.is-minimized {
        width: 48px;
    }

    .pipeline-controls-head strong {
        display: none;
    }

    .pipeline-controls-body {
        display: none;
    }

    .pipeline-controls-head {
        justify-content: center;
    }

    .pipeline-hud {
        left: 16px;
        bottom: 72px;
    }

    .pipeline-hud strong {
        font-size: 13px;
    }

    .pipeline-chips {
        bottom: 16px;
        width: calc(100% - 30px);
        justify-content: flex-start;
    }

    .pipeline-card {
        bottom: 115px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pipeline-city-section.is-broken::after,
    .pipeline-toast,
    .pipeline-card {
        animation: none;
        transition: none;
    }
}


/* =========================================================
   SECTION 9 — FINAL CTA
========================================================= */

.final-cta-section {
    --cta-orange: #ff5a1f;
    --cta-yellow: #ffd23f;
    position: relative;
    width: min(1240px, calc(100% - 48px));
    min-height: 505px;
    margin: 72px auto 90px;
    padding: 72px 40px;
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 24px;
    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(255, 91, 31, .15),
            rgba(255, 91, 31, .045) 25%,
            transparent 52%
        ),
        #111218;
    box-shadow:
        0 28px 80px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.035);
    text-align: center;
}

html[data-theme="light"] .final-cta-section {
    border-color: rgba(20,24,30,.13);
    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(255, 91, 31, .11),
            rgba(255, 91, 31, .025) 30%,
            transparent 58%
        ),
        #f7f5f1;
    box-shadow:
        0 28px 70px rgba(20,24,30,.12),
        inset 0 1px 0 rgba(255,255,255,.8);
}

.final-cta-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 850px;
}

.final-cta-eyebrow {
    margin: 0 0 20px;
    color: #ff641f;
    font: 800 12px/1.2 "Courier New", Consolas, monospace;
    letter-spacing: .18em;
}

.final-cta-title {
    margin: 0;
    color: #f7f2ee;
    font-size: clamp(48px, 6vw, 76px);
    line-height: .98;
    letter-spacing: -.055em;
    font-weight: 800;
}

.final-cta-title span {
    display: block;
}

.final-cta-gradient {
    margin-top: 6px;
    background: linear-gradient(100deg, #ff541c 0%, #ff8d21 52%, #ffd23f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

html[data-theme="light"] .final-cta-title {
    color: #18191e;
}

.final-cta-copy {
    margin: 27px auto 0;
    max-width: 700px;
    color: #92949e;
    font-size: 17px;
    line-height: 1.65;
    letter-spacing: .01em;
}

html[data-theme="light"] .final-cta-copy {
    color: #686b74;
}

.final-cta-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 200px;
    min-height: 58px;
    margin-top: 43px;
    padding: 0 25px;
    border-radius: 999px;
    background: linear-gradient(100deg, #ff5b20 0%, #ff7e22 45%, #ffd23f 100%);
    color: #fff;
    text-decoration: none;
    font: 800 14px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    box-shadow:
        0 12px 30px rgba(255, 92, 31, .24),
        0 0 35px rgba(255, 166, 39, .11);
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        filter .22s ease;
}

.final-cta-button span:last-child {
    font-size: 18px;
    line-height: 1;
    transition: transform .22s ease;
}

.final-cta-button:hover {
    transform: translateY(-3px);
    filter: brightness(1.04);
    box-shadow:
        0 16px 38px rgba(255, 92, 31, .3),
        0 0 45px rgba(255, 166, 39, .16);
}

.final-cta-button:hover span:last-child {
    transform: translate(2px, -2px);
}

.final-cta-button:focus-visible {
    outline: 3px solid rgba(0,240,255,.9);
    outline-offset: 5px;
}

.final-cta-glow {
    position: absolute;
    z-index: 1;
    width: 280px;
    height: 180px;
    border-radius: 50%;
    filter: blur(65px);
    pointer-events: none;
    opacity: .18;
}

.final-cta-glow-one {
    top: 32%;
    left: 34%;
    background: #ff4d1c;
}

.final-cta-glow-two {
    right: 27%;
    bottom: 15%;
    background: #ffd23f;
    opacity: .10;
}

@media (max-width: 760px) {
    .final-cta-section {
        width: calc(100% - 24px);
        min-height: 480px;
        margin: 48px auto 64px;
        padding: 58px 20px;
        border-radius: 20px;
    }

    .final-cta-eyebrow {
        font-size: 10px;
        letter-spacing: .15em;
        margin-bottom: 18px;
    }

    .final-cta-title {
        font-size: clamp(42px, 12vw, 62px);
        line-height: 1;
    }

    .final-cta-copy {
        max-width: 440px;
        margin-top: 23px;
        font-size: 15px;
        line-height: 1.55;
    }

    .final-cta-desktop {
        display: none;
    }

    .final-cta-button {
        width: min(100%, 245px);
        margin-top: 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .final-cta-button,
    .final-cta-button span:last-child {
        transition: none;
    }
}


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

.site-footer {
    width: min(1240px, calc(100% - 48px));
    margin: 0 auto 32px;
    padding: 52px 48px 24px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 24px;
    background:
        radial-gradient(circle at 10% 0%, rgba(255,91,31,.07), transparent 30%),
        #0f1015;
    box-shadow:
        0 24px 60px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.035);
}

html[data-theme="light"] .site-footer {
    border-color: rgba(20,24,30,.12);
    background:
        radial-gradient(circle at 10% 0%, rgba(255,91,31,.06), transparent 30%),
        #f5f3ef;
    box-shadow:
        0 24px 60px rgba(20,24,30,.10),
        inset 0 1px 0 rgba(255,255,255,.8);
}

.footer-inner {
    display: grid;
    grid-template-columns: minmax(260px, 1.25fr) minmax(420px, 1fr);
    gap: 70px;
    padding-bottom: 42px;
}

.footer-main {
    max-width: 390px;
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: #f7f2ee;
    text-decoration: none;
}

.footer-brand-mark {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: linear-gradient(135deg, #ff5b20, #ffd23f);
    color: #fff;
    font: 900 20px/1 system-ui, sans-serif;
    box-shadow: 0 8px 22px rgba(255,91,31,.18);
}

.footer-brand-name {
    font: 800 22px/1 system-ui, sans-serif;
    letter-spacing: -.04em;
}

.footer-brand-name span {
    color: #ff7223;
}

html[data-theme="light"] .footer-brand {
    color: #181a20;
}

.footer-tagline {
    max-width: 340px;
    margin: 18px 0 0;
    color: #858892;
    font-size: 14px;
    line-height: 1.65;
}

html[data-theme="light"] .footer-tagline {
    color: #686b73;
}

.footer-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.footer-column h3 {
    margin: 0 0 7px;
    color: #f4eee9;
    font: 800 12px/1.2 system-ui, sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
}

html[data-theme="light"] .footer-column h3 {
    color: #202228;
}

.footer-column a {
    position: relative;
    color: #858892;
    text-decoration: none;
    font-size: 13px;
    transition: color .18s ease, transform .18s ease;
}

.footer-column a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -3px;
    height: 1px;
    background: linear-gradient(90deg, #ff5b20, #ffd23f);
    transition: right .18s ease;
}

.footer-column a:hover {
    color: #fff;
    transform: translateX(2px);
}

.footer-column a:hover::after {
    right: 0;
}

html[data-theme="light"] .footer-column a {
    color: #686b73;
}

html[data-theme="light"] .footer-column a:hover {
    color: #17191e;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.08);
    color: #686b75;
    font: 11px/1.5 system-ui, sans-serif;
}

html[data-theme="light"] .footer-bottom {
    border-top-color: rgba(20,24,30,.10);
    color: #73767e;
}

@media (max-width: 760px) {
    .site-footer {
        width: calc(100% - 24px);
        margin: 0 auto 20px;
        padding: 38px 22px 20px;
        border-radius: 20px;
    }

    .footer-inner {
        grid-template-columns: 1fr;
        gap: 38px;
        padding-bottom: 34px;
    }

    .footer-main {
        max-width: 100%;
    }

    .footer-columns {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }

    .footer-column {
        gap: 10px;
    }

    .footer-column h3 {
        font-size: 10px;
    }

    .footer-column a {
        font-size: 12px;
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }
}

@media (max-width: 430px) {
    .footer-columns {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 28px;
    }
}

/* =========================================================
   LEARN HERO — FINAL CSS PATCH
========================================================= */
.learn-page .learn-hero{--learn-cyan:#00f0ff;--learn-orange:#ff641f;--learn-yellow:#ffd23f;position:relative;width:min(1440px,calc(100% - 48px));min-height:720px;margin:34px auto 0;padding:72px 64px 38px;overflow:hidden;isolation:isolate;border:1px solid rgba(255,255,255,.12);border-radius:28px;background:radial-gradient(circle at 73% 48%,rgba(0,240,255,.08),transparent 25%),radial-gradient(circle at 62% 60%,rgba(255,42,133,.08),transparent 28%),#05050a;box-shadow:0 30px 90px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.04)}
html[data-theme="light"] .learn-page .learn-hero{border-color:rgba(20,24,30,.13);background:radial-gradient(circle at 73% 48%,rgba(0,160,190,.08),transparent 25%),radial-gradient(circle at 62% 60%,rgba(255,91,31,.07),transparent 28%),#f6f4ef;box-shadow:0 30px 80px rgba(20,24,30,.1),inset 0 1px 0 rgba(255,255,255,.8)}
.learn-page #learnHeroCanvas{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;pointer-events:none}
.learn-page .learn-hero-grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,transparent,black 18%,black 82%,transparent)}
html[data-theme="light"] .learn-page .learn-hero-grid{opacity:.42;background-image:linear-gradient(rgba(20,24,30,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(20,24,30,.055) 1px,transparent 1px)}
.learn-page .learn-hero-noise{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}
.learn-page .learn-hero-content{position:relative;z-index:4;min-height:585px;display:grid;grid-template-columns:minmax(350px,.86fr) minmax(520px,1.14fr);align-items:center;gap:40px}
.learn-page .learn-hero-copy{max-width:620px}
.learn-page .learn-hero-eyebrow{display:inline-flex;align-items:center;gap:9px;margin:0 0 20px;color:var(--learn-cyan);font:800 11px/1 "Courier New",monospace;letter-spacing:.17em}
.learn-page .learn-live-dot{width:7px;height:7px;border-radius:50%;background:var(--learn-cyan);box-shadow:0 0 16px var(--learn-cyan);animation:learnPulse 1.8s ease-in-out infinite}
@keyframes learnPulse{50%{transform:scale(1.45);opacity:.5}}
.learn-page .learn-hero h1{margin:0;color:#f8f3ef;font-size:clamp(56px,6.7vw,94px);line-height:.93;letter-spacing:-.065em;font-weight:850}
.learn-page .learn-hero h1 span{display:block}
.learn-page .learn-hero h1 strong{font-weight:inherit;background:linear-gradient(100deg,var(--learn-orange),#ff8b21 52%,var(--learn-yellow));-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="light"] .learn-page .learn-hero h1{color:#18191e}
.learn-page .learn-hero-description{max-width:580px;margin:28px 0 0;color:#9295a0;font-size:16px;line-height:1.72}
html[data-theme="light"] .learn-page .learn-hero-description{color:#676a72}
.learn-page .learn-hero-actions{display:flex;align-items:center;gap:13px;margin-top:34px}
.learn-page .learn-hero-primary,.learn-page .learn-hero-secondary{min-height:50px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font:800 13px/1 system-ui,sans-serif;transition:transform .2s ease,box-shadow .2s ease}
.learn-page .learn-hero-primary{gap:11px;padding:0 21px;border-radius:999px;color:#fff;background:linear-gradient(100deg,#ff5b20,#ffd23f);box-shadow:0 10px 28px rgba(255,91,31,.18)}
.learn-page .learn-hero-primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(255,91,31,.26)}
.learn-page .learn-hero-secondary{padding:0 19px;border:1px solid rgba(255,255,255,.16);border-radius:999px;color:#d9dbe0;background:rgba(255,255,255,.025)}
html[data-theme="light"] .learn-page .learn-hero-secondary{border-color:rgba(20,24,30,.16);color:#303238;background:rgba(255,255,255,.5)}
.learn-page .learn-hero-system{position:relative;width:min(100%,680px);height:560px;justify-self:end}
.learn-page .learn-system-orbit{position:absolute;top:50%;left:50%;border:1px dashed rgba(0,240,255,.28);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.learn-page .learn-system-orbit-one{width:440px;height:440px;animation:learnOrbit 26s linear infinite}
.learn-page .learn-system-orbit-two{width:310px;height:310px;border-color:rgba(255,42,133,.24);animation:learnOrbitReverse 20s linear infinite}
@keyframes learnOrbit{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes learnOrbitReverse{to{transform:translate(-50%,-50%) rotate(-360deg)}}
.learn-page .learn-system-core{position:absolute;top:50%;left:50%;width:178px;height:178px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.22);border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,91,31,.13),rgba(7,6,14,.96) 66%);box-shadow:0 0 0 15px rgba(255,91,31,.025),0 0 55px rgba(255,91,31,.1)}
.learn-page .learn-system-core strong{margin-top:7px;color:#fff;font:850 31px/1 system-ui,sans-serif;letter-spacing:-.05em}
.learn-page .learn-core-label{color:var(--learn-orange);font:800 9px/1 "Courier New",monospace;letter-spacing:.18em}
.learn-page .learn-system-core small{margin-top:9px;color:#7e828d;font:10px/1 "Courier New",monospace}
.learn-page .learn-node{position:absolute;width:118px;height:118px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:rgba(7,6,14,.86);color:#fff;cursor:pointer;transform:translate(-50%,-50%);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease,background .25s ease}
.learn-page .learn-node:hover,.learn-page .learn-node.is-active{border-color:var(--learn-orange);background:radial-gradient(circle,rgba(255,91,31,.22),rgba(7,6,14,.94));box-shadow:0 0 0 7px rgba(255,91,31,.06),0 0 30px rgba(255,91,31,.18);transform:translate(-50%,-50%) scale(1.07)}
.learn-page .learn-node span{color:#777b87;font:800 9px/1 "Courier New",monospace}.learn-page .learn-node strong{margin-top:7px;color:#f0f1f3;font:800 12px/1.2 system-ui,sans-serif}
html[data-theme="light"] .learn-page .learn-node{background:rgba(255,255,255,.82);color:#17191f;border-color:rgba(20,24,30,.14)}
html[data-theme="light"] .learn-page .learn-node strong{color:#202228}
.learn-page .learn-node-sql{top:12%;left:50%}.learn-page .learn-node-python{top:30%;left:86%}.learn-page .learn-node-database{top:69%;left:86%}.learn-page .learn-node-engineering{top:88%;left:50%}.learn-page .learn-node-projects{top:69%;left:14%}.learn-page .learn-node-systems{top:30%;left:14%}
.learn-page .learn-system-status{position:absolute;right:2px;bottom:6px;min-width:170px;padding:10px 13px;border-left:2px solid var(--learn-cyan);background:rgba(0,0,0,.36);color:#8b8e98;font:9px/1.4 "Courier New",monospace}
.learn-page .learn-system-status span{display:block;color:var(--learn-cyan);letter-spacing:.13em}.learn-page .learn-system-status b{display:block;margin-top:3px;color:#e7e9ed;font-size:10px}
html[data-theme="light"] .learn-page .learn-system-status{background:rgba(255,255,255,.55)}html[data-theme="light"] .learn-page .learn-system-status b{color:#24262c}
.learn-page .learn-hero-bottom{position:absolute;z-index:5;left:64px;right:64px;bottom:24px;display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.learn-page .learn-hero-bottom span{padding-top:12px;border-top:1px solid rgba(255,255,255,.11);color:#656974;font:800 9px/1 "Courier New",monospace;letter-spacing:.1em}.learn-page .learn-hero-bottom span:first-child{border-top-color:var(--learn-orange);color:#d8d9de}
html[data-theme="light"] .learn-page .learn-hero-bottom span{border-top-color:rgba(20,24,30,.12)}html[data-theme="light"] .learn-page .learn-hero-bottom span:first-child{border-top-color:var(--learn-orange);color:#25272d}
.learn-page .learn-path-placeholder{width:min(1240px,calc(100% - 48px));min-height:190px;margin:40px auto 72px;padding:38px;display:flex;align-items:center;border:1px solid rgba(255,255,255,.09);border-radius:22px;background:#101117}.learn-page .learn-path-placeholder span{color:#ff641f;font:800 10px/1 "Courier New",monospace;letter-spacing:.16em}.learn-page .learn-path-placeholder h2{margin:12px 0 0;color:#f5f0ec;font-size:clamp(30px,4vw,50px);letter-spacing:-.04em}
@media(max-width:1050px){.learn-page .learn-hero{padding:55px 42px 34px}.learn-page .learn-hero-content{grid-template-columns:1fr;min-height:auto;gap:30px}.learn-page .learn-hero-system{width:min(100%,650px);height:500px;justify-self:center}.learn-page .learn-hero-bottom{left:42px;right:42px}}
@media(max-width:760px){.learn-page .learn-hero{width:calc(100% - 24px);min-height:900px;margin-top:20px;padding:42px 20px 28px;border-radius:20px}.learn-page .learn-hero-content{display:block}.learn-page .learn-hero h1{font-size:clamp(48px,14vw,70px)}.learn-page .learn-hero-description{font-size:14px;line-height:1.6}.learn-page .learn-hero-actions{flex-wrap:wrap}.learn-page .learn-hero-system{width:100%;height:500px;margin-top:18px;transform:scale(.82);transform-origin:top center}.learn-page .learn-system-orbit-one{width:410px;height:410px}.learn-page .learn-system-orbit-two{width:290px;height:290px}.learn-page .learn-node{width:104px;height:104px}.learn-page .learn-system-status{right:50%;transform:translateX(50%);bottom:-10px}.learn-page .learn-hero-bottom{left:20px;right:20px;bottom:18px;grid-template-columns:repeat(5,minmax(105px,1fr));overflow-x:auto;scrollbar-width:none}.learn-page .learn-hero-bottom::-webkit-scrollbar{display:none}.learn-page .learn-hero-bottom span{white-space:nowrap}.learn-page .learn-path-placeholder{width:calc(100% - 24px);margin:24px auto 50px;padding:28px 22px;border-radius:18px}}
@media(prefers-reduced-motion:reduce){.learn-page .learn-live-dot,.learn-page .learn-system-orbit-one,.learn-page .learn-system-orbit-two{animation:none}.learn-page .learn-node,.learn-page .learn-hero-primary,.learn-page .learn-hero-secondary{transition:none}}


.learn-mark-hero{
--mark-green:hsl(66 45% 79%);--mark-orange:hsl(27 98% 84%);
position:relative;width:min(1240px,calc(100% - 48px));min-height:680px;margin:34px auto 0;
padding:64px 58px 42px;overflow:hidden;isolation:isolate;border:1px solid rgba(20,24,30,.12);
border-radius:28px;background:#f7f3e9;color:#17181b;box-shadow:0 28px 75px rgba(36,31,20,.1),inset 0 1px #fff;
}
html[data-theme="dark"] .learn-mark-hero{background:#111217;color:#f4f0e9;border-color:rgba(255,255,255,.1);box-shadow:0 28px 75px rgba(0,0,0,.28)}
.learn-mark-filter{position:absolute;width:0;height:0}
.learn-mark-grid{position:absolute;inset:0;opacity:.5;pointer-events:none;background-image:linear-gradient(rgba(35,38,43,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(35,38,43,.055) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(90deg,transparent,black 38%)}
html[data-theme="dark"] .learn-mark-grid{opacity:.28;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px)}
.learn-mark-inner{position:relative;z-index:2;min-height:570px;display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:60px}
.learn-mark-copy{max-width:600px}.learn-mark-kicker{margin:0 0 18px;color:#77736b;font:800 10px/1.2 "Courier New",monospace;letter-spacing:.16em}
.learn-mark-copy h1{margin:0;font-size:clamp(58px,7vw,94px);line-height:.91;letter-spacing:-.065em;font-weight:850}
.learn-mark-copy mark,.learn-map-card mark{--mark-color:var(--mark-green);position:relative;display:inline-block;isolation:isolate;background:transparent;color:inherit;padding:0 .08em;z-index:0}
.learn-mark-copy mark:before,.learn-map-card mark:before{content:"";position:absolute;z-index:-1;width:calc(100% + .22em);left:-.09em;height:82%;top:12%;background:var(--mark-color);opacity:.86;border-bottom-right-radius:20px 30px;filter:url(#learn-mark-rough);box-shadow:inset -2px 0 1px rgba(80,70,55,.18),inset -4px 0 5px rgba(80,70,55,.12)}
.learn-mark-copy mark:after,.learn-map-card mark:after{content:"";position:absolute;z-index:-1;height:.65em;width:.34em;top:.07em;right:-.13em;background:radial-gradient(circle,rgba(80,70,55,.24),transparent);opacity:.5;border-radius:10px 0 50px/200px 0;rotate:15deg;filter:url(#learn-mark-rough)}
.learn-mark-description{max-width:570px;margin:30px 0 0;color:#6e6b64;font-size:16px;line-height:1.72}
html[data-theme="dark"] .learn-mark-description{color:#aaa8a2}.learn-mark-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.learn-mark-primary,.learn-mark-secondary{min-height:50px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font:800 13px/1 system-ui,sans-serif}
.learn-mark-primary{gap:11px;padding:0 21px;border-radius:999px;background:#1b1d21;color:#fff;box-shadow:5px 5px 0 var(--mark-orange)}
html[data-theme="dark"] .learn-mark-primary{background:#f3eee6;color:#15161a}
.learn-mark-secondary{padding:0 19px;border:1px solid rgba(20,24,30,.17);border-radius:999px;color:#303238;background:rgba(255,255,255,.36)}
html[data-theme="dark"] .learn-mark-secondary{border-color:rgba(255,255,255,.18);color:#e8e4dd;background:rgba(255,255,255,.04)}
.learn-mark-note{display:flex;align-items:center;gap:9px;margin-top:40px;color:#89857c;font:800 9px/1 "Courier New",monospace;letter-spacing:.08em}.learn-mark-note i{width:35px;height:2px;background:var(--mark-orange);transform:rotate(-3deg)}
.learn-mark-board{position:relative;min-height:510px;padding:18px;border:1px solid rgba(35,38,43,.13);border-radius:20px;background:rgba(255,255,255,.36);box-shadow:0 15px 45px rgba(35,31,20,.07),inset 0 1px #fff}
html[data-theme="dark"] .learn-mark-board{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.035);box-shadow:0 15px 45px rgba(0,0,0,.18)}
.learn-mark-board-top,.learn-mark-board-bottom{display:flex;justify-content:space-between;color:#8a877f;font:800 9px/1.2 "Courier New",monospace;letter-spacing:.1em}.learn-mark-board-bottom{position:absolute;left:18px;right:18px;bottom:15px}
.learn-map{position:relative;min-height:430px}.learn-map-line{position:absolute;height:1px;transform-origin:left;background:linear-gradient(90deg,rgba(255,91,31,.12),rgba(88,94,95,.5),rgba(255,210,63,.15))}
.line-one{width:235px;top:44%;left:26%;transform:rotate(-26deg)}.line-two{width:270px;top:49%;left:31%;transform:rotate(25deg)}.line-three{width:205px;top:57%;left:32%}
.learn-map-core{position:absolute;top:50%;left:50%;width:130px;height:130px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(40,43,45,.18);border-radius:50%;transform:translate(-50%,-50%);background:rgba(255,249,237,.9)}
html[data-theme="dark"] .learn-map-core{background:#191a1f;border-color:rgba(255,255,255,.16)}.learn-map-core span{color:#ff641f;font:800 8px/1 "Courier New",monospace;letter-spacing:.15em}.learn-map-core strong{margin-top:8px;font-size:24px}
.learn-map-card{position:absolute;width:150px;min-height:94px;padding:13px 14px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;border:1px solid rgba(35,38,43,.14);border-radius:14px;background:rgba(255,252,244,.78);color:#24262a;cursor:pointer;box-shadow:4px 4px rgba(255,210,63,.34);transition:.2s}
html[data-theme="dark"] .learn-map-card{background:rgba(27,28,34,.88);color:#f1ede6;border-color:rgba(255,255,255,.12)}.learn-map-card:hover,.learn-map-card.is-active{transform:translateY(-4px) rotate(-1deg);border-color:rgba(255,91,31,.55);box-shadow:6px 7px rgba(255,91,31,.28)}
.learn-map-card small{color:#8b887f;font:800 8px/1 "Courier New",monospace}.learn-map-card strong{margin-top:7px;font:850 14px/1.1 system-ui,sans-serif}.learn-map-card span{margin-top:7px;color:#85827b;font-size:10px}
.learn-map-card:nth-of-type(1){top:8%;left:2%}.card-python{top:5%;right:2%}.card-db{bottom:8%;left:2%}.card-de{bottom:5%;right:2%}.card-projects{top:42%;left:0;transform:translateY(-50%)}
.card-projects:hover,.card-projects.is-active{transform:translateY(calc(-50% - 4px)) rotate(-1deg)}
@media(max-width:1050px){.learn-mark-hero{padding:52px 42px 38px}.learn-mark-inner{grid-template-columns:1fr;gap:35px}.learn-mark-board{width:min(700px,100%);justify-self:center}}
@media(max-width:760px){.learn-mark-hero{width:calc(100% - 24px);min-height:auto;margin-top:20px;padding:40px 20px 26px;border-radius:20px}.learn-mark-inner{display:block;min-height:0}.learn-mark-copy h1{font-size:clamp(50px,14vw,72px)}.learn-mark-description{font-size:14px;line-height:1.6;margin-top:24px}.learn-mark-actions{margin-top:26px}.learn-mark-note{margin-top:28px}.learn-mark-board{min-height:470px;margin-top:38px;padding:13px;border-radius:17px}.learn-map{min-height:405px}.learn-map-card{width:124px;min-height:82px;padding:10px}.learn-map-card strong{font-size:11px}.learn-map-card span{font-size:9px}.learn-map-core{width:108px;height:108px}.learn-map-core strong{font-size:20px}.line-one{width:170px}.line-two{width:180px}.line-three{width:145px}}
@media(max-width:430px){.learn-mark-board{min-height:450px}.learn-map-card{width:112px;min-height:76px}.learn-map-card span{display:none}.learn-map-core{width:96px;height:96px}.learn-map-core strong{font-size:18px}}

/* =========================================================
   LEARN PRODUCTION HERO — Azure / Data Engineering system
   ========================================================= */
.learn-production-hero{
  --hero-bg:#080a0d;
  --hero-text:#f6f1ec;
  --hero-muted:#9da5b4;
  --hero-border:#2a303b;
  --hero-blue:#3182f6;
  --hero-orange:#ff5b22;
  --hero-yellow:#ffc33b;
  --hero-teal:#1fe0c2;
  --hero-purple:#936bff;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:calc(100vh - 74px);
  padding:70px 32px 48px;
  background:var(--hero-bg);
  color:var(--hero-text);
}
.learn-production-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to right,black 0%,black 58%,transparent 100%);
}
.learn-production-hero::after{
  content:"";
  position:absolute;
  left:-10%; top:-20%; width:46%; height:85%;
  z-index:-1;
  background:radial-gradient(circle,rgba(255,72,35,.14),transparent 66%);
  filter:blur(30px);
  animation:heroGlow 8s ease-in-out infinite alternate;
}
.learn-production-bg{position:absolute;inset:0;pointer-events:none;z-index:-1}
.bg-glow{position:absolute;border-radius:50%;filter:blur(80px);opacity:.18}
.bg-glow-a{width:360px;height:360px;right:-120px;bottom:-160px;background:#0bd7c7;animation:glowFloat 10s ease-in-out infinite}
.bg-glow-b{width:300px;height:300px;left:20%;top:-180px;background:#ff5a1f;animation:glowFloat 12s ease-in-out infinite reverse}
.learn-production-inner{
  width:min(1600px,100%); min-height:calc(100vh - 172px); margin:0 auto;
  display:grid; grid-template-columns:minmax(650px,.96fr) minmax(700px,1.04fr);
  align-items:center; gap:48px;
}
.learn-production-copy{position:relative;z-index:2;max-width:760px;min-width:0}
.learn-production-eyebrow{
  display:flex;align-items:center;gap:10px;margin:0 0 24px;
  color:#748095;font:800 10px/1 "Courier New",monospace;letter-spacing:.18em;
  animation:heroReveal .7s .05s both;
}
.learn-production-eyebrow span{width:28px;height:1px;background:var(--hero-orange);box-shadow:0 0 14px rgba(255,91,34,.8)}
.learn-production-title{margin:0;display:flex;flex-direction:column;width:100%;font-size:clamp(64px,6.35vw,104px);line-height:.89;letter-spacing:-.068em;font-weight:850}
/* Handwritten/cursive treatment requested for the Learn hero headline. */
.learn-production-title{font-family:"Segoe Print","Bradley Hand","Brush Script MT",cursive;font-weight:700;letter-spacing:-.035em;line-height:.82}
.learn-production-title .title-line{padding-right:.08em}
.learn-production-title .title-gradient{font-weight:700}
.title-line{display:block;white-space:nowrap;animation:titleReveal .9s cubic-bezier(.16,1,.3,1) both}
.title-from{animation-delay:.08s}.title-gradient{animation-delay:.18s}.title-to{animation-delay:.28s}
.title-gradient{
  width:max-content;
  max-width:100%;
  background:linear-gradient(100deg,#ff5426 4%,#ff7628 44%,#ffc83d 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:180% 100%;animation:titleReveal .9s .18s cubic-bezier(.16,1,.3,1) both,gradientShift 6s ease-in-out 1s infinite;
}
.title-dot{color:#f6f1ec;display:inline}
.learn-production-description{
  max-width:720px;margin:40px 0 0;color:#a9b4c4;font-size:17px;line-height:1.75;
  animation:heroReveal .8s .42s both;
}
.learn-production-stats{
  display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:12px;margin-top:34px;
  animation:heroReveal .8s .54s both;
}
.production-stat{
  min-height:74px;padding:13px 16px;display:flex;align-items:center;gap:13px;
  border:1px solid #2a303a;border-radius:12px;background:rgba(18,21,27,.78);
  box-shadow:inset 0 1px rgba(255,255,255,.025);transition:transform .25s,border-color .25s,background .25s;
}
.production-stat:hover{transform:translateY(-3px);border-color:#404754;background:#151920}
.stat-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:9px;font-size:19px;font-weight:900;flex:0 0 40px}
.stat-orange .stat-icon{background:rgba(255,81,29,.11);color:var(--hero-orange)}
.stat-teal .stat-icon{background:rgba(18,211,192,.11);color:var(--hero-teal)}
.stat-yellow .stat-icon{background:rgba(255,199,44,.11);color:var(--hero-yellow)}
.stat-purple .stat-icon{background:rgba(145,99,255,.12);color:var(--hero-purple)}
.production-stat strong{display:block;color:#f4f5f7;font-size:13px;line-height:1.2}.production-stat small{display:block;margin-top:7px;color:#697386;font-size:10px}
.learn-production-actions{display:flex;align-items:center;flex-wrap:wrap;gap:15px;margin-top:36px;animation:heroReveal .8s .66s both}
.production-primary,.production-secondary,.production-text-link{min-height:54px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:800;font-size:14px;transition:transform .22s,box-shadow .22s,border-color .22s}
.production-primary{gap:16px;padding:0 27px;border-radius:999px;color:#fff;background:linear-gradient(100deg,#ff5b22,#ffca3a);box-shadow:0 12px 30px rgba(255,91,34,.2)}
.production-primary:hover{transform:translateY(-3px);box-shadow:0 15px 34px rgba(255,91,34,.3)}
.production-primary span{font-size:21px;font-weight:500}.production-secondary{padding:0 25px;border:1px solid #303641;border-radius:999px;color:#edf0f4;background:#0d1015}.production-secondary:hover{transform:translateY(-3px);border-color:#566071}
.production-text-link{gap:8px;padding:0 10px;color:#aeb8c8}.production-text-link:hover{color:#fff;transform:translateX(3px)}.production-text-link span{font-size:18px}

.learn-production-system{
  --mx:0px;--my:0px;position:relative;min-height:488px;height:488px;border:1px solid #2c3340;border-radius:28px;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(145deg,#0d1116,#090c10 70%);
  background-size:42px 42px,42px 42px,100% 100%;
  box-shadow:0 30px 80px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.04);
  transform:translate3d(var(--mx),var(--my),0);transition:transform .45s ease;
  animation:systemEnter 1s .3s cubic-bezier(.16,1,.3,1) both;
}
.learn-production-system::before{content:"";position:absolute;inset:0;border-radius:28px;pointer-events:none;background:radial-gradient(circle at 50% 55%,rgba(36,92,170,.07),transparent 52%)}
.system-scanline{position:absolute;left:0;right:0;top:-20%;height:1px;background:linear-gradient(90deg,transparent,rgba(46,142,255,.45),transparent);box-shadow:0 0 14px rgba(46,142,255,.35);animation:scan 7s linear infinite;opacity:.7}
.system-corner{position:absolute;width:18px;height:18px;border-color:#3d4654;z-index:3}.system-corner-tl{top:20px;left:20px;border-top:1px solid;border-left:1px solid}.system-corner-br{right:20px;bottom:20px;border-right:1px solid;border-bottom:1px solid}
.system-floating{position:absolute;z-index:4;border:1px solid #314052;border-radius:14px;background:rgba(16,20,26,.94);box-shadow:0 12px 25px rgba(0,0,0,.2);padding:13px 16px;animation:floatCard 4.5s ease-in-out infinite}
.system-floating strong{display:block;color:#eaf0f8;font-size:12px}.system-floating span{display:block;margin-top:7px;color:#68758a;font:9px/1.2 "Courier New",monospace;letter-spacing:.04em}.source-float{left:20px;top:92px}.source-float strong{color:#e6f1ff}.build-float{right:20px;top:20px;border-color:#8b321e;width:245px}.build-float strong{color:#f5f7fb}.build-float strong i{display:inline-block;width:5px;height:5px;margin-right:7px;border-radius:50%;background:var(--hero-orange);box-shadow:0 0 10px var(--hero-orange)}.insights-float{right:20px;top:92px;transform:translateY(0);animation-delay:-2s}.insights-float strong{color:#aab8d0}
.pipeline-track{position:absolute;left:40px;right:40px;top:274px;height:2px;z-index:1;pointer-events:none}.pipeline-line{position:absolute;inset:0;background:linear-gradient(90deg,#2f79c7 0%,#3182f6 24%,#20c7b0 56%,#f0ae35 82%,#f8c13e 100%);opacity:.34}.pipeline-track::before,.pipeline-track::after{content:"";position:absolute;top:-4px;width:10px;height:10px;border-radius:50%;border:1px solid #314354;background:#10151b;box-shadow:0 0 12px rgba(49,130,246,.3)}.pipeline-track::before{left:-1px}.pipeline-track::after{right:-1px}
.pipeline-arrow{position:absolute;top:-9px;z-index:4;color:#6da9ee;font:700 17px/1 system-ui,sans-serif;text-shadow:0 0 10px rgba(49,130,246,.7);animation:arrowPulse 1.6s ease-in-out infinite}.arrow-1{left:16.6%}.arrow-2{left:36.6%}.arrow-3{left:56.6%}.arrow-4{left:76.6%}.arrow-5{left:96.6%;opacity:.7}
.flow-dot{position:absolute;top:-2px;left:0;width:6px;height:6px;border-radius:50%;background:#8fc3ff;box-shadow:0 0 12px #3182f6,0 0 24px rgba(49,130,246,.5);animation:flow 4.2s linear infinite}.flow-1{animation-delay:0s}.flow-2{animation-delay:.84s}.flow-3{animation-delay:1.68s}.flow-4{animation-delay:2.52s}.flow-5{animation-delay:3.36s}
.stack-nodes{position:absolute;left:20px;right:20px;top:200px;display:grid;grid-template-columns:repeat(6,1fr);gap:8px;z-index:2}
.stack-node{position:relative;min-width:0;height:150px;padding:20px 8px 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;border:1px solid #354053;border-radius:15px;background:linear-gradient(180deg,#171d28,#131820);color:#edf1f7;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.12);transition:transform .25s,border-color .25s,background .25s,box-shadow .25s;animation:nodeReveal .7s cubic-bezier(.16,1,.3,1) both}
.stack-node:nth-child(1){animation-delay:.45s}.stack-node:nth-child(2){animation-delay:.52s}.stack-node:nth-child(3){animation-delay:.59s}.stack-node:nth-child(4){animation-delay:.66s}.stack-node:nth-child(5){animation-delay:.73s}.stack-node:nth-child(6){animation-delay:.80s}
.stack-node:hover,.stack-node.is-active{transform:translateY(-7px);border-color:#4b7dbb;background:linear-gradient(180deg,#1a2230,#141a23);box-shadow:0 14px 30px rgba(0,0,0,.25),0 0 0 1px rgba(49,130,246,.07)}
.stack-node strong{font-size:12px;line-height:1.1;text-align:center;white-space:nowrap}.stack-node small{display:block;min-height:9px;color:#708096;font:8px/1.1 "Courier New",monospace;white-space:nowrap;letter-spacing:.02em}.node-icon{position:relative;width:26px;height:26px;display:block}.source-icon{border:3px solid #3e95ff}.source-icon::after{content:"";position:absolute;inset:5px;border:1px solid #3e95ff}.adf-icon{width:19px;height:19px;border:2px solid #ff7043;transform:rotate(45deg)}.adls-icon{width:16px;height:16px;border-radius:50%;background:#3b82ef;box-shadow:0 0 10px rgba(59,130,239,.25)}.dbx-icon{width:25px;height:20px;border:2px solid #ff643d;transform:skew(-11deg)}.synapse-icon{width:18px;height:18px;border:2px solid #19e0ca;transform:rotate(45deg)}.powerbi-icon{width:21px;height:30px;background:#ffd23d}
.system-phases{position:absolute;left:38px;right:38px;bottom:34px;display:grid;grid-template-columns:repeat(5,1fr);color:#6681a8;font:8px/1 "Courier New",monospace;letter-spacing:.16em}.system-phases span{position:relative;padding-left:13px}.system-phases span::before{content:"";position:absolute;left:0;top:2px;width:4px;height:4px;border-radius:50%;background:#5b7293}.system-status{position:absolute;right:38px;bottom:13px;display:flex;align-items:center;gap:7px;color:#586679;font:7px/1 "Courier New",monospace;letter-spacing:.12em}.system-status span{width:5px;height:5px;border-radius:50%;background:#2ee0b9;box-shadow:0 0 9px #2ee0b9;animation:pulse 1.8s ease-in-out infinite}

@keyframes titleReveal{from{opacity:0;transform:translateY(32px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0)}}
@keyframes heroReveal{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes systemEnter{from{opacity:0;transform:translate3d(30px,10px,0) scale(.97)}to{opacity:1;transform:translate3d(var(--mx),var(--my),0) scale(1)}}
@keyframes nodeReveal{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes gradientShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes heroGlow{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(12%,6%,0) scale(1.08)}}
@keyframes glowFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-25px,20px,0)}}
@keyframes scan{from{top:-5%}to{top:108%}}
@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes flow{0%{left:0;opacity:0;transform:scale(.7)}8%{opacity:1}45%{transform:scale(1.15)}92%{opacity:1}100%{left:100%;opacity:0;transform:scale(.7)}}
@keyframes arrowPulse{0%,100%{opacity:.28;transform:translateX(-2px)}50%{opacity:1;transform:translateX(3px)}}
@keyframes pulse{0%,100%{opacity:.45;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}

html[data-theme="light"] .learn-production-hero{--hero-bg:#f5f6f8;--hero-text:#12151a;--hero-muted:#5f6878;background:#f5f6f8;color:#12151a}
html[data-theme="light"] .learn-production-hero::before{background-image:linear-gradient(rgba(24,30,38,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(24,30,38,.035) 1px,transparent 1px)}
html[data-theme="light"] .learn-production-eyebrow{color:#697486}html[data-theme="light"] .learn-production-description{color:#5e6979}
html[data-theme="light"] .production-stat{background:rgba(255,255,255,.82);border-color:#dce1e8}html[data-theme="light"] .production-stat strong{color:#171b21}html[data-theme="light"] .production-stat small{color:#758092}
html[data-theme="light"] .production-secondary{background:#fff;color:#171b21;border-color:#d3d9e1}html[data-theme="light"] .production-text-link{color:#596476}
html[data-theme="light"] .learn-production-system{background-color:#f0f3f7;background-image:linear-gradient(rgba(20,30,45,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(20,30,45,.04) 1px,transparent 1px),linear-gradient(145deg,#f8f9fb,#eef1f5);border-color:#cfd6df;box-shadow:0 25px 60px rgba(30,40,55,.12),inset 0 1px #fff}
html[data-theme="light"] .system-floating{background:rgba(255,255,255,.95);border-color:#cbd4df;box-shadow:0 12px 25px rgba(30,40,55,.1)}html[data-theme="light"] .system-floating strong{color:#19212d}
html[data-theme="light"] .stack-node{background:linear-gradient(180deg,#fff,#f4f6f9);color:#171c24;border-color:#ccd5e0;box-shadow:0 8px 20px rgba(20,30,45,.08)}html[data-theme="light"] .stack-node:hover,html[data-theme="light"] .stack-node.is-active{background:#fff;border-color:#5790d5;box-shadow:0 14px 30px rgba(20,30,45,.12)}html[data-theme="light"] .stack-node small{color:#718096}

@media(max-width:1380px){
  .learn-production-inner{grid-template-columns:minmax(600px,.95fr) minmax(650px,1.05fr);gap:34px}
  .learn-production-title{font-size:clamp(62px,6vw,92px)}
}
@media(max-width:1180px){
  .learn-production-inner{grid-template-columns:1fr;gap:42px;min-height:0}.learn-production-copy{max-width:820px}.learn-production-system{width:min(920px,100%);justify-self:center}.learn-production-title{font-size:clamp(66px,8.5vw,96px)}
}
@media(max-width:760px){
  .learn-production-hero{min-height:auto;padding:48px 14px 34px}.learn-production-inner{gap:30px}.learn-production-eyebrow{font-size:8px;letter-spacing:.12em}.learn-production-title{font-size:clamp(48px,14vw,78px);line-height:.9}.title-line{white-space:nowrap}.learn-production-description{margin-top:26px;font-size:14px;line-height:1.65}.learn-production-stats{grid-template-columns:1fr;margin-top:26px}.production-stat{min-height:68px}.learn-production-actions{margin-top:27px;gap:10px}.production-primary,.production-secondary{min-height:50px;padding:0 20px}.production-text-link{min-height:46px}.learn-production-system{height:520px;min-height:520px;border-radius:20px}.source-float{left:14px;top:74px}.build-float{right:14px;top:14px;width:205px}.insights-float{right:14px;top:86px}.system-floating{padding:10px 12px}.system-floating strong{font-size:10px}.system-floating span{font-size:7px}.stack-nodes{left:12px;right:12px;top:198px;grid-template-columns:repeat(3,1fr);gap:7px}.stack-node{height:112px;padding:13px 4px 9px;border-radius:12px;gap:7px}.stack-node strong{font-size:9px}.stack-node small{font-size:6px}.node-icon{transform:scale(.82)}.adf-icon,.dbx-icon,.synapse-icon{transform:rotate(45deg) scale(.82)}.dbx-icon{transform:skew(-11deg) scale(.82)}.system-phases{left:18px;right:18px;bottom:30px;grid-template-columns:repeat(5,minmax(64px,1fr));overflow:hidden;font-size:6px;letter-spacing:.08em}.system-phases span{padding-left:9px}.system-status{right:18px;bottom:12px}.pipeline-track{left:25px;right:25px;top:372px}.pipeline-arrow{font-size:13px}.arrow-1{left:16.6%}.arrow-2{left:36.6%}.arrow-3{left:56.6%}.arrow-4{left:76.6%}.arrow-5{left:96.6%}.system-corner-tl{top:14px;left:14px}.system-corner-br{right:14px;bottom:14px}
}
@media(max-width:430px){.learn-production-title{font-size:clamp(48px,15vw,64px)}.learn-production-system{height:500px;min-height:500px}.system-floating.source-float{top:68px}.build-float{width:184px}.insights-float{top:84px}.stack-nodes{top:190px}.stack-node{height:105px}.stack-node small{display:none}.system-phases{bottom:27px}.production-text-link{width:100%;justify-content:flex-start;padding-left:4px}}
@media(prefers-reduced-motion:reduce){.learn-production-hero *, .learn-production-hero::after{animation:none!important;transition:none!important}.learn-production-system{transform:none!important}}



/* Pipeline labels: exact reference <mark> treatment */
.learn-production-system{
  --color-red:hsl(13,100%,87%);
  --color-orange:hsl(27,98%,84%);
  --color-yellow:hsl(46,83%,80%);
  --color-green:hsl(66,45%,79%);
  --color-cyan:hsl(158,47%,83%);
  --color-blue:hsl(199,42%,84%);
  --color-purple:hsl(274,27%,88%);
  --color-magenta:hsl(345,88%,90%);
  --texture-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
}
.pipeline-marker-filter{position:absolute;width:0;height:0;pointer-events:none}
.stack-node strong .pipeline-mark{
  --color:var(--color-purple);
  display:inline-block;
  position:relative;
  background-color:unset;
  color:#1c1b1a;
  isolation:isolate;
  padding:0 .08em;
  text-decoration:none;
  white-space:nowrap;
}
.stack-node strong .pipeline-mark::before{
  position:absolute;
  inset:0;
  content:'';
  width:calc(100% + 1ch);
  left:-.25ch;
  height:110%;
  top:-5%;
  border-bottom-right-radius:20px 30px;
  background-color:var(--color);
  background-image:var(--texture-noise);
  opacity:.85;
  box-shadow:inset -2px 0 1px color-mix(in srgb,var(--color) 70%,#555),inset -4px 0 5px color-mix(in srgb,var(--color) 70%,#555);
  filter:url(#pipeline-mark-rough);
  z-index:-1;
}
.stack-node strong .pipeline-mark::after{
  position:absolute;
  content:'';
  height:1ch;
  width:.5ch;
  top:2px;
  right:-.25em;
  background:radial-gradient(color-mix(in srgb,var(--color) 60%,#555),var(--color));
  opacity:.4;
  border-radius:10px 0 50px/200px 0;
  rotate:15deg;
  filter:url(#pipeline-mark-rough);
  z-index:-1;
}
/* Keep the marker treatment faithful to the supplied reference: no neon block replacement. */
.stack-node strong .pipeline-mark::before{animation:referenceMarkIn .55s ease-out both}
.stack-node strong .pipeline-mark::after{animation:referenceMarkBlob .4s .35s ease-out both}
.stack-node:hover strong .pipeline-mark::before,.stack-node.is-active strong .pipeline-mark::before{animation:referenceMarkWiggle .5s ease-in-out infinite alternate}
@keyframes referenceMarkIn{from{opacity:0;transform:translateX(-5px) scaleX(.82)}to{opacity:.85;transform:none}}
@keyframes referenceMarkBlob{from{opacity:0;transform:scale(.5) rotate(15deg)}to{opacity:.4;transform:scale(1) rotate(15deg)}}
@keyframes referenceMarkWiggle{from{transform:rotate(-.5deg) skewX(-.5deg)}to{transform:rotate(.5deg) skewX(.5deg)}}

/* Theme support only: the supplied marker stays pastel in both modes, while label text remains readable. */
html[data-theme="dark"] .stack-node strong .pipeline-mark,
html[data-theme="light"] .stack-node strong .pipeline-mark{color:#1c1b1a}
html[data-theme="dark"] .stack-node strong .pipeline-mark::before{opacity:.9}
html[data-theme="light"] .stack-node strong .pipeline-mark::before{opacity:.85}
@media(max-width:760px){
  .stack-node strong .pipeline-mark{padding:0 .06em}
  .stack-node strong .pipeline-mark::before{width:calc(100% + .8ch);left:-.18ch}
}
@media(prefers-reduced-motion:reduce){
  .stack-node strong .pipeline-mark::before,.stack-node strong .pipeline-mark::after{animation:none!important}
}

/* Learn hero right panel — Start <here> reference implementation */
.learn-page .learn-start-here{
    position:relative;width:min(100%,680px);height:560px;justify-self:end;overflow:hidden;
    border:1px solid rgba(255,255,255,.13);border-radius:28px;
    background:radial-gradient(circle at 78% 18%,rgba(255,91,31,.08),transparent 28%),radial-gradient(circle at 20% 78%,rgba(0,240,255,.045),transparent 30%),#0a0d11;
    box-shadow:0 24px 70px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.04)
}
html[data-theme="light"] .learn-page .learn-start-here{border-color:rgba(20,24,30,.14);background:radial-gradient(circle at 78% 18%,rgba(255,91,31,.09),transparent 28%),radial-gradient(circle at 20% 78%,rgba(0,160,190,.06),transparent 30%),#f2f0e7;box-shadow:0 24px 70px rgba(20,24,30,.10),inset 0 1px 0 rgba(255,255,255,.8)}
.learn-page .start-here-filter{position:absolute;width:0;height:0}
.learn-page .start-here-grid{position:absolute;inset:0;pointer-events:none;opacity:.45;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:14px 14px}
html[data-theme="light"] .learn-page .start-here-grid{opacity:.7;background-image:linear-gradient(rgba(60,55,40,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(60,55,40,.07) 1px,transparent 1px)}
.learn-page .start-here-corner{position:absolute;width:23px;height:23px;z-index:2;pointer-events:none}
.learn-page .start-here-corner-tl{top:24px;left:24px;border-top:1px solid rgba(255,255,255,.9);border-left:1px solid rgba(255,255,255,.9)}
.learn-page .start-here-corner-br{right:24px;bottom:24px;border-right:1px solid rgba(255,255,255,.9);border-bottom:1px solid rgba(255,255,255,.9)}
html[data-theme="light"] .learn-page .start-here-corner-tl,html[data-theme="light"] .learn-page .start-here-corner-br{border-color:#37352f}
.learn-page .start-here-inner{position:relative;z-index:3;height:100%;padding:40px 42px 28px;display:flex;flex-direction:column}
.learn-page .start-here-heading{display:flex;align-items:center;gap:10px;color:#8e929b;font:800 10px/1.2 "Courier New",monospace;letter-spacing:.16em;text-transform:uppercase}
.learn-page .start-here-line{width:28px;height:1px;background:#ff5b20;box-shadow:0 0 8px rgba(255,91,31,.35)}
.learn-page .start-here-inner h2{margin:20px 0 4px;color:#f3eee8;font:800 clamp(38px,4.2vw,58px)/.95 "JetBrains Mono",ui-monospace,monospace;letter-spacing:-.055em}
html[data-theme="light"] .learn-page .start-here-inner h2{color:#1c1b1a}
.learn-page .start-here-subtitle{margin:0 0 16px;max-width:540px;color:#a1a5af;font-size:13px;line-height:1.55}
html[data-theme="light"] .learn-page .start-here-subtitle{color:#55534c}

/* Six steps now use the unused panel space instead of leaving a large empty area. */
.learn-page .start-here-content{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px;margin-top:6px;flex:1;align-content:start}
.learn-page .start-here-content p{position:relative;margin:0;padding:4px 0;color:#c1c5cc;font-size:12px;line-height:1.6;transition:transform .2s ease,color .2s ease;animation:startHereStepIn .55s both}
.learn-page .start-here-content p::before{display:none;content:none}
.learn-page .start-here-content p:hover{transform:translateX(3px);color:#f0f2f4}
html[data-theme="light"] .learn-page .start-here-content p{color:#45443f}
html[data-theme="light"] .learn-page .start-here-content p:hover{color:#1c1b1a}
.learn-page .start-here-content p:nth-child(1){animation-delay:.08s}.learn-page .start-here-content p:nth-child(2){animation-delay:.14s}.learn-page .start-here-content p:nth-child(3){animation-delay:.20s}.learn-page .start-here-content p:nth-child(4){animation-delay:.26s}.learn-page .start-here-content p:nth-child(5){animation-delay:.32s}.learn-page .start-here-content p:nth-child(6){animation-delay:.38s}
.learn-page .start-here-content mark{--color:var(--color-purple);display:inline-block;position:relative;background:transparent;color:inherit;padding:0 .08em;isolation:isolate;z-index:0;font-weight:700}
.learn-page .start-here-content mark::before{position:absolute;inset:0;content:"";width:calc(100% + 1ch);left:-.25ch;height:110%;top:-5%;border-bottom-right-radius:20px 30px;background-color:var(--color);background-image:var(--texture-noise);opacity:.85;box-shadow:inset -2px 0 1px hsl(from var(--color) h s calc(l - 20)),inset -4px 0 5px hsl(from var(--color) h s calc(l - 20));filter:url(#start-here-rough);z-index:-1}
.learn-page .start-here-content mark::after{position:absolute;content:"";height:1ch;width:.5ch;top:2px;right:-.25em;background:radial-gradient(hsl(from var(--color) h s calc(l - 30)),hsl(from var(--color) h s l));opacity:.4;border-radius:10px 0 50px/200px 0;rotate:15deg;filter:url(#start-here-rough);z-index:-1}
.learn-page .start-here-footer{margin-top:14px;padding-top:15px;border-top:1px solid rgba(255,255,255,.10);display:flex;align-items:center;gap:9px;color:#737985;font:800 9px/1 "Courier New",monospace;letter-spacing:.13em}
html[data-theme="light"] .learn-page .start-here-footer{border-top-color:rgba(20,24,30,.12);color:#65635d}
.learn-page .start-here-dot{width:5px;height:5px;border-radius:50%;background:#00c6a7;box-shadow:0 0 10px rgba(0,198,167,.7);animation:startHerePulse 1.8s ease-in-out infinite}
@keyframes startHereStepIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes startHerePulse{50%{opacity:.35;transform:scale(.75)}}
@media(max-width:1050px){.learn-page .learn-start-here{width:min(100%,650px);height:540px;justify-self:center}.learn-page .start-here-inner{padding:34px 34px 24px}}
@media(max-width:760px){.learn-page .learn-start-here{height:auto;min-height:570px;margin-top:20px;border-radius:20px}.learn-page .start-here-inner{padding:30px 22px 22px}.learn-page .start-here-content{grid-template-columns:1fr;gap:8px}.learn-page .start-here-content p{font-size:12px;min-height:0;padding:3px 0}.learn-page .start-here-inner h2{font-size:clamp(36px,11vw,52px)}}
@media(prefers-reduced-motion:reduce){.learn-page .start-here-content p,.learn-page .start-here-dot{animation:none}}

/* =========================================================
   Learn Hero — Start <here> right panel
   IMPORTANT: the existing right-panel shell remains intact.
   The supplied reference is used only INSIDE the panel.
   ========================================================= */
.learn-page .learn-start-here{
  overflow:hidden;
  color:#e6e4d9;
}
.learn-page .learn-start-here .start-here-inner{
  position:relative;
  z-index:3;
  height:100%;
  padding:34px 38px 24px;
  display:flex;
  flex-direction:column;
}
.learn-page .start-here-heading{
  display:flex;
  align-items:center;
  gap:10px;
  color:#8e929b;
  font:800 9px/1.2 "Courier New",monospace;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.learn-page .start-here-line{
  width:24px;
  height:1px;
  flex:none;
  background:#ff5b20;
  box-shadow:0 0 8px rgba(255,91,31,.35);
}
.learn-page .start-here-inner h2{
  margin:18px 0 4px;
  color:#f3eee8;
  font:800 clamp(34px,3.3vw,48px)/.95 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:-.055em;
}
.learn-page .start-here-subtitle{
  margin:0 0 13px;
  max-width:560px;
  color:#a1a5af;
  font-size:11px;
  line-height:1.45;
}
.learn-page .start-here-content{
  display:flex;
  flex-direction:column;
  gap:7px;
  min-height:0;
}
.learn-page .start-here-content p{
  margin:0;
  color:#c0c4cc;
  font-size:11px;
  line-height:1.32;
  animation:startHereStepIn .55s both;
}
.learn-page .start-here-content p:nth-child(1){animation-delay:.08s}
.learn-page .start-here-content p:nth-child(2){animation-delay:.14s}
.learn-page .start-here-content p:nth-child(3){animation-delay:.20s}
.learn-page .start-here-content p:nth-child(4){animation-delay:.26s}
.learn-page .start-here-content p:nth-child(5){animation-delay:.32s}
.learn-page .start-here-content p:nth-child(6){animation-delay:.38s}
.learn-page .start-here-content mark{
  --color:var(--color-purple);
  display:inline-block;
  position:relative;
  background:transparent;
  color:inherit;
  padding:0 .08em;
  isolation:isolate;
  z-index:0;
}
.learn-page .start-here-content mark::before{
  position:absolute;
  inset:0;
  content:"";
  width:calc(100% + 1ch);
  left:-.25ch;
  height:110%;
  top:-5%;
  border-bottom-right-radius:20px 30px;
  background-color:var(--color);
  background-image:var(--texture-noise);
  opacity:.85;
  box-shadow:inset -2px 0 1px hsl(from var(--color) h s calc(l - 20)),inset -4px 0 5px hsl(from var(--color) h s calc(l - 20));
  filter:url(#start-here-rough);
  z-index:-1;
}
.learn-page .start-here-content mark::after{
  position:absolute;
  content:"";
  height:1ch;
  width:.5ch;
  top:2px;
  right:-.25em;
  background:radial-gradient(hsl(from var(--color) h s calc(l - 30)),hsl(from var(--color) h s l));
  opacity:.4;
  border-radius:10px 0 50px/200px 0;
  rotate:15deg;
  filter:url(#start-here-rough);
  z-index:-1;
}
.learn-page .start-here-footer{
  margin-top:auto;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:center;
  gap:8px;
  color:#737985;
  font:800 8px/1 "Courier New",monospace;
  letter-spacing:.13em;
}
.learn-page .start-here-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#00c6a7;
  box-shadow:0 0 10px rgba(0,198,167,.7);
  animation:startHerePulse 1.8s ease-in-out infinite;
}
@keyframes startHereStepIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes startHerePulse{0%,100%{opacity:.45;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}

html[data-theme="light"] .learn-page .learn-start-here{color:#1c1b1a}
html[data-theme="light"] .learn-page .start-here-heading{color:#697486}
html[data-theme="light"] .learn-page .start-here-inner h2{color:#1c1b1a}
html[data-theme="light"] .learn-page .start-here-subtitle{color:#55534c}
html[data-theme="light"] .learn-page .start-here-content p{color:#33332f}
html[data-theme="light"] .learn-page .start-here-footer{border-top-color:rgba(20,24,30,.12);color:#65635d}

@media(max-width:1180px){
  .learn-page .start-here-inner{padding:34px 34px 24px}
}
@media(max-width:760px){
  .learn-page .start-here-inner{padding:28px 22px 20px}
  .learn-page .start-here-inner h2{font-size:clamp(34px,10vw,48px)}
  .learn-page .start-here-content{gap:8px}
  .learn-page .start-here-content p{font-size:12px;line-height:1.4}
}
@media(prefers-reduced-motion:reduce){
  .learn-page .start-here-content p,.learn-page .start-here-dot{animation:none!important}
}

/* =========================================================
   Start <here> — final right-panel layout
   Matches the supplied reference block. Left hero is untouched.
   ========================================================= */
.learn-page .learn-start-here{
  width:min(100%, 850px);
  height:700px;
  min-height:700px;
  border-radius:30px;
}
.learn-page .learn-start-here .start-here-inner{
  padding:42px 48px 28px;
}
.learn-page .start-here-heading{
  gap:10px;
  font-size:10px;
  letter-spacing:.17em;
}
.learn-page .start-here-line{width:30px}
.learn-page .start-here-inner h2{
  margin:23px 0 5px;
  font-size:clamp(48px,4.4vw,62px);
  line-height:.98;
}
.learn-page .start-here-subtitle{
  margin:0 0 20px;
  max-width:620px;
  font-size:14px;
  line-height:1.45;
}
.learn-page .start-here-content{
  gap:11px;
}
.learn-page .start-here-content p{
  font-size:15px;
  line-height:1.42;
  color:#c7cbd2;
}
.learn-page .start-here-content mark{
  padding:0 .08em;
}
.learn-page .start-here-footer{
  padding-top:16px;
  gap:9px;
  font-size:9px;
}

html[data-theme="light"] .learn-page .start-here-content p{color:#2f302c}

@media(max-width:1180px){
  .learn-page .learn-start-here{
    width:min(100%, 760px);
    height:650px;
    min-height:650px;
  }
  .learn-page .learn-start-here .start-here-inner{padding:38px 40px 26px}
  .learn-page .start-here-inner h2{font-size:clamp(44px,5vw,56px)}
  .learn-page .start-here-content p{font-size:14px}
}
@media(max-width:760px){
  .learn-page .learn-start-here{
    width:100%;
    height:auto;
    min-height:620px;
    border-radius:22px;
  }
  .learn-page .learn-start-here .start-here-inner{padding:30px 24px 22px}
  .learn-page .start-here-inner h2{font-size:clamp(40px,12vw,54px)}
  .learn-page .start-here-subtitle{font-size:13px;margin-bottom:18px}
  .learn-page .start-here-content{gap:9px}
  .learn-page .start-here-content p{font-size:13px;line-height:1.45}
}

/* =========================================================
   Start <here> — space-balanced text layout
   No numbered cards / no content blocks. Use the full panel
   height for a calmer learning-path reading experience.
   ========================================================= */
.learn-page .start-here-content{
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(3,minmax(0,1fr));
  column-gap:46px;
  row-gap:0;
  flex:1;
  min-height:360px;
  margin-top:6px;
  align-content:stretch;
}
.learn-page .start-here-content p{
  display:flex;
  align-items:center;
  margin:0;
  padding:18px 0;
  font-size:15px;
  line-height:1.55;
  max-width:100%;
}
.learn-page .start-here-content p:nth-child(odd){
  padding-right:18px;
}
.learn-page .start-here-content p:nth-child(even){
  padding-left:18px;
}
.learn-page .start-here-content p:hover{
  transform:translateX(4px);
}
.learn-page .start-here-content p:nth-child(1),
.learn-page .start-here-content p:nth-child(2){border-top:1px solid rgba(255,255,255,.045)}
.learn-page .start-here-content p:nth-child(3),
.learn-page .start-here-content p:nth-child(4){border-top:1px solid rgba(255,255,255,.045)}
.learn-page .start-here-content p:nth-child(5),
.learn-page .start-here-content p:nth-child(6){border-top:1px solid rgba(255,255,255,.045);border-bottom:1px solid rgba(255,255,255,.045)}
html[data-theme="light"] .learn-page .start-here-content p:nth-child(1),
html[data-theme="light"] .learn-page .start-here-content p:nth-child(2),
html[data-theme="light"] .learn-page .start-here-content p:nth-child(3),
html[data-theme="light"] .learn-page .start-here-content p:nth-child(4),
html[data-theme="light"] .learn-page .start-here-content p:nth-child(5),
html[data-theme="light"] .learn-page .start-here-content p:nth-child(6){border-color:rgba(20,24,30,.07)}

@media(max-width:760px){
  .learn-page .start-here-content{
    grid-template-columns:1fr;
    grid-template-rows:none;
    min-height:0;
    row-gap:0;
  }
  .learn-page .start-here-content p,
  .learn-page .start-here-content p:nth-child(odd),
  .learn-page .start-here-content p:nth-child(even){
    min-height:74px;
    padding:15px 0;
    border-top:1px solid rgba(255,255,255,.06);
  }
  html[data-theme="light"] .learn-page .start-here-content p{border-color:rgba(20,24,30,.08)}
  .learn-page .start-here-content p:last-child{border-bottom:1px solid rgba(255,255,255,.06)}
  html[data-theme="light"] .learn-page .start-here-content p:last-child{border-bottom-color:rgba(20,24,30,.08)}
}

/* ===== Learn roadmap / next section ===== */
.learn-page .learning-roadmap{width:100%;padding:96px 0 120px;position:relative;background:var(--page-bg,#07090d);overflow:hidden}
.learn-page .roadmap-shell{width:min(1440px,calc(100% - 72px));margin:0 auto}
.learn-page .roadmap-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:64px}
.learn-page .roadmap-kicker,.learn-page .stage-label{font:800 11px/1 "Courier New",monospace;letter-spacing:.18em;text-transform:uppercase;color:#00d9c7}
.learn-page .roadmap-intro h2{margin:14px 0 10px;font-size:clamp(38px,5vw,72px);line-height:.98;letter-spacing:-.055em;color:#f5f1ed}
.learn-page .roadmap-intro p{max-width:780px;margin:0;color:#98a6bb;font-size:17px;line-height:1.7}
.learn-page .roadmap-jump,.learn-page .stage-pill{border:1px solid #30394a;border-radius:999px;padding:10px 15px;color:#b8c5d8;text-decoration:none;font:700 11px/1 "Courier New",monospace;white-space:nowrap;transition:.25s ease}
.learn-page .roadmap-jump:hover,.learn-page .stage-pill:hover{border-color:#00d9c7;color:#fff;transform:translateY(-2px)}
.learn-page .roadmap-track{position:relative;padding-left:64px}
.learn-page .roadmap-track::before{content:"";position:absolute;left:18px;top:10px;bottom:10px;width:1px;background:linear-gradient(#ff641f,#ffd12f,#00d9c7,#9c78ff,#ff641f)}
.learn-page .roadmap-stage{position:relative;margin-bottom:110px;--accent:#00d9c7}
.learn-page .roadmap-stage:last-child{margin-bottom:0}
.learn-page .stage-orange{--accent:#ff641f}.learn-page .stage-yellow{--accent:#ffd12f}.learn-page .stage-cyan{--accent:#00d9c7}.learn-page .stage-purple{--accent:#9c78ff}
.learn-page .stage-marker{position:absolute;left:-64px;top:-3px;width:38px;height:38px;display:grid;place-items:center;border:1px solid #30394a;border-radius:12px;background:#11151d;color:var(--accent);font:800 12px/1 "Courier New",monospace;box-shadow:0 0 0 8px #07090d}
.learn-page .stage-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:28px;margin-bottom:28px}
.learn-page .stage-heading h3{margin:10px 0 7px;color:#f5f1ed;font-size:clamp(30px,3.2vw,50px);line-height:1;letter-spacing:-.045em}
.learn-page .stage-heading p{margin:0;max-width:920px;color:#9aa9be;font-size:16px;line-height:1.6}
.learn-page .stage-label{color:var(--accent)}
.learn-page .stage-pill{margin-top:2px}
.learn-page .stage-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.learn-page .stage-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.learn-page .stage-grid.one{grid-template-columns:minmax(0,1fr)}
.learn-page .road-card{position:relative;min-height:205px;padding:28px 24px 24px;border:1px solid #2b3443;border-radius:15px;background:linear-gradient(145deg,#11151d,#0d1118);overflow:hidden;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.learn-page .road-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);opacity:.95}
.learn-page .road-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 55%,#2b3443);box-shadow:0 18px 45px rgba(0,0,0,.24)}
.learn-page .road-code{display:block;color:var(--accent);font:800 12px/1 "Courier New",monospace;margin-bottom:10px}
.learn-page .road-card h4{display:inline-block;margin:0;color:#f3f0eb;font-size:20px;line-height:1.15;letter-spacing:-.025em}
.learn-page .road-card small{display:block;margin-top:7px;color:#6f819c;font:700 11px/1.2 "Courier New",monospace;letter-spacing:.12em;text-transform:uppercase}
.learn-page .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.learn-page .chips span{padding:7px 10px;border:1px solid #2a3444;border-radius:7px;color:#b7c7df;background:#111722;font-size:12px;line-height:1;transition:.2s ease}
.learn-page .road-card:hover .chips span{border-color:#354256}
.learn-page .checkpoint{margin:22px 0 0;padding:13px 15px;border:1px solid color-mix(in srgb,var(--accent) 38%,#233241);border-radius:9px;background:color-mix(in srgb,var(--accent) 8%,transparent);color:#d9e4ef;font-size:13px;line-height:1.55}
.learn-page .checkpoint b{color:var(--accent);font:800 11px/1 "Courier New",monospace;letter-spacing:.08em;margin-right:8px}
.learn-page .airflow-card{--accent:#9c78ff}
@media(max-width:900px){.learn-page .roadmap-shell{width:min(100% - 36px,760px)}.learn-page .roadmap-intro{display:block;margin-bottom:44px}.learn-page .roadmap-jump{display:inline-block;margin-top:22px}.learn-page .roadmap-track{padding-left:46px}.learn-page .roadmap-track::before{left:15px}.learn-page .stage-marker{left:-46px}.learn-page .stage-grid,.learn-page .stage-grid.two{grid-template-columns:1fr}.learn-page .roadmap-stage{margin-bottom:72px}}
@media(max-width:600px){.learn-page .learning-roadmap{padding:70px 0 90px}.learn-page .roadmap-shell{width:calc(100% - 24px)}.learn-page .roadmap-intro h2{font-size:42px}.learn-page .roadmap-intro p{font-size:14px}.learn-page .roadmap-track{padding-left:34px}.learn-page .roadmap-track::before{left:10px}.learn-page .stage-marker{left:-34px;width:30px;height:30px;border-radius:9px;font-size:10px}.learn-page .stage-heading{display:block}.learn-page .stage-heading h3{font-size:30px}.learn-page .stage-heading p{font-size:14px}.learn-page .stage-pill{display:inline-block;margin-top:16px}.learn-page .road-card{padding:23px 18px;min-height:0}.learn-page .road-card h4{font-size:18px}.learn-page .chips{gap:6px}.learn-page .chips span{font-size:11px;padding:6px 8px}}


/* =========================================================
   Mobile readability pass — Start <here> + Learn hero
   Keep the visual design, restore natural text flow.
   ========================================================= */
.learn-page .start-here-content p{
  display:block;
  align-items:initial;
  text-wrap:pretty;
}

@media (max-width:760px){
  /* Keep the existing left hero design, but prevent the handwritten
     headline from being clipped on narrow screens. */
  .learn-page .learn-production-copy{max-width:100%;overflow:visible}
  .learn-page .learn-production-title{
    width:100%;
    font-size:clamp(46px,12.5vw,58px);
    line-height:.9;
    letter-spacing:-.035em;
  }
  .learn-page .learn-production-title .title-line{
    white-space:normal;
    width:max-content;
    max-width:100%;
  }
  .learn-page .learn-production-description{
    max-width:100%;
    font-size:14px;
    line-height:1.65;
  }

  /* Right panel: natural reading flow instead of flex/grid fragments. */
  .learn-page .learn-start-here{
    width:100%;
    height:auto;
    min-height:0;
    overflow:hidden;
  }
  .learn-page .learn-start-here .start-here-inner{
    height:auto;
    min-height:0;
    padding:28px 22px 22px;
  }
  .learn-page .start-here-heading{
    font-size:9px;
    letter-spacing:.13em;
  }
  .learn-page .start-here-inner h2{
    margin:17px 0 7px;
    font-size:clamp(38px,11vw,52px);
    line-height:.98;
  }
  .learn-page .start-here-subtitle{
    max-width:100%;
    margin-bottom:20px;
    font-size:13px;
    line-height:1.55;
  }
  .learn-page .start-here-content{
    display:flex;
    flex-direction:column;
    gap:0;
    margin-top:0;
    min-height:0;
    flex:initial;
  }
  .learn-page .start-here-content p,
  .learn-page .start-here-content p:nth-child(odd),
  .learn-page .start-here-content p:nth-child(even){
    display:block;
    min-height:0;
    margin:0;
    padding:14px 0;
    border-top:1px solid rgba(255,255,255,.07);
    border-bottom:0;
    color:#c9cdd4;
    font-size:14px;
    line-height:1.7;
    transform:none;
  }
  html[data-theme="light"] .learn-page .start-here-content p,
  html[data-theme="light"] .learn-page .start-here-content p:nth-child(odd),
  html[data-theme="light"] .learn-page .start-here-content p:nth-child(even){
    color:#34332f;
    border-color:rgba(20,24,30,.09);
  }
  .learn-page .start-here-content p:hover{transform:none}
  .learn-page .start-here-content mark{
    display:inline-block;
    white-space:nowrap;
    vertical-align:baseline;
  }
  .learn-page .start-here-footer{
    margin-top:12px;
    padding-top:14px;
    font-size:8px;
  }
}

@media (max-width:430px){
  .learn-page .learn-production-title{font-size:clamp(43px,11.8vw,52px)}
  .learn-page .learn-production-description{font-size:13.5px}
  .learn-page .learn-start-here .start-here-inner{padding:25px 18px 20px}
  .learn-page .start-here-inner h2{font-size:clamp(36px,10.5vw,48px)}
  .learn-page .start-here-subtitle{font-size:12.5px}
  .learn-page .start-here-content p{font-size:13.5px;line-height:1.68;padding:13px 0}
  .learn-page .start-here-footer{letter-spacing:.09em}
}

/* Roadmap theme support */
html[data-theme="light"] .learn-page .learning-roadmap{
  background:#f5f6f8;color:#18202b;
  background-image:linear-gradient(rgba(20,30,45,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(20,30,45,.045) 1px,transparent 1px);
  background-size:24px 24px;
}
html[data-theme="light"] .learn-page .roadmap-intro h2{color:#141922}
html[data-theme="light"] .learn-page .roadmap-intro p{color:#5d6878}
html[data-theme="light"] .learn-page .roadmap-jump,html[data-theme="light"] .learn-page .stage-pill{border-color:#cbd3df;color:#465367;background:rgba(255,255,255,.72)}
html[data-theme="light"] .learn-page .roadmap-jump:hover,html[data-theme="light"] .learn-page .stage-pill:hover{border-color:#00a99a;color:#141922}
html[data-theme="light"] .learn-page .stage-marker{border-color:#cbd3df;background:#fff;box-shadow:0 0 0 8px #f5f6f8}
html[data-theme="light"] .learn-page .stage-heading h3{color:#141922}
html[data-theme="light"] .learn-page .stage-heading p{color:#667284}
html[data-theme="light"] .learn-page .road-card{border-color:#d4dbe5;background:linear-gradient(145deg,#fff,#f7f8fa);box-shadow:0 8px 24px rgba(27,38,54,.06)}
html[data-theme="light"] .learn-page .road-card:hover{border-color:color-mix(in srgb,var(--accent) 55%,#cbd3df);box-shadow:0 18px 42px rgba(27,38,54,.12)}
html[data-theme="light"] .learn-page .road-card h4{color:#18202b}
html[data-theme="light"] .learn-page .road-card small{color:#6c7889}
html[data-theme="light"] .learn-page .chips span{border-color:#d4dce7;color:#465568;background:#f3f5f8}
html[data-theme="light"] .learn-page .road-card:hover .chips span{border-color:#c2ccda}
html[data-theme="light"] .learn-page .checkpoint{border-color:color-mix(in srgb,var(--accent) 38%,#cbd7df);background:color-mix(in srgb,var(--accent) 9%,white);color:#3c4858}
@media(max-width:600px){html[data-theme="light"] .learn-page .stage-marker{box-shadow:0 0 0 7px #f5f6f8}}


/* =========================
   PYTHON FUNDAMENTALS LEARNING SCREEN
========================= */
.python-learning-page{min-height:100vh;background:var(--color-page);color:var(--color-text)}
.python-learning-shell{width:min(1440px,calc(100% - 40px));margin:0 auto;padding:34px 0 80px}
.python-learning-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}
.python-back{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border:1px solid var(--color-border);border-radius:12px;color:var(--color-text);text-decoration:none;background:var(--color-hero-soft);font-weight:750;transition:.2s ease}
.python-back:hover{transform:translateX(-3px);border-color:var(--color-accent)}
.python-learning-layout{display:grid;grid-template-columns:290px minmax(0,1fr);gap:24px;align-items:start}
.python-sidebar{position:sticky;top:90px;border:1px solid var(--color-border);border-radius:20px;background:var(--color-hero-soft);padding:16px;max-height:calc(100vh - 120px);overflow:auto}
.python-sidebar-kicker{font-size:11px;font-weight:900;letter-spacing:.12em;color:var(--color-muted);margin:2px 8px 12px}
.python-sidebar a{display:block;padding:11px 12px;border-radius:10px;color:var(--color-muted);text-decoration:none;font-size:14px;font-weight:650;line-height:1.35;transition:.2s ease}
.python-sidebar a:hover{background:var(--color-hover);color:var(--color-text)}
.python-sidebar a.is-active{background:var(--color-brand-bg);color:var(--color-brand-text)}
.python-content{min-width:0;border:1px solid var(--color-border);border-radius:24px;background:var(--color-hero-soft);padding:clamp(24px,4vw,54px)}
.python-eyebrow{display:inline-flex;padding:7px 10px;border-radius:999px;background:var(--color-hover);color:var(--color-muted);font-size:11px;font-weight:900;letter-spacing:.13em}
.python-content h1{font-size:clamp(38px,6vw,76px);line-height:.98;letter-spacing:-.045em;margin:18px 0 18px;color:var(--color-text)}
.python-content .lead{max-width:760px;color:var(--color-muted);font-size:clamp(17px,2vw,21px);line-height:1.65;margin:0 0 34px}
.python-section{padding:30px 0;border-top:1px solid var(--color-border);scroll-margin-top:100px}
.python-section:first-of-type{border-top:0;padding-top:0}
.python-section h2{font-size:clamp(25px,3vw,38px);line-height:1.1;margin:0 0 12px;letter-spacing:-.025em}
.python-section h3{font-size:19px;margin:24px 0 9px}
.python-section p,.python-section li{color:var(--color-muted);font-size:16px;line-height:1.75}
.python-section ul{padding-left:20px}
.python-code{margin:16px 0;padding:18px 20px;overflow:auto;border-radius:14px;border:1px solid var(--color-border);background:var(--color-page);color:var(--color-text);font:500 14px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.python-callout{margin-top:20px;padding:17px 18px;border-left:4px solid var(--color-accent);border-radius:0 12px 12px 0;background:var(--color-hover);color:var(--color-text);line-height:1.6}
.python-lesson-navigation{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:34px;padding-top:24px;border-top:1px solid var(--color-border)}
.python-lesson-nav{display:inline-flex;align-items:center;min-height:42px;padding:10px 16px;border:1px solid var(--color-border);border-radius:10px;color:var(--color-text);font-weight:800;text-decoration:none;transition:background .2s ease,border-color .2s ease,transform .2s ease}
.python-lesson-nav:hover{background:var(--color-surface-2);border-color:var(--color-text);transform:translateY(-1px)}
.python-lesson-nav.is-disabled{opacity:.35;pointer-events:none}
.roadmap-course-link{color:inherit;text-decoration:none}
.roadmap-course-link:hover{text-decoration:underline;text-underline-offset:4px}
@media(max-width:800px){.python-learning-shell{width:min(100% - 24px,720px);padding-top:20px}.python-learning-layout{grid-template-columns:1fr}.python-sidebar{position:relative;top:auto;max-height:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.python-sidebar-kicker{grid-column:1/-1}.python-content{padding:24px 18px}.python-learning-top{align-items:flex-start}.python-lesson-navigation{gap:10px}.python-lesson-nav{padding:9px 13px}}
@media(max-width:480px){.python-sidebar{grid-template-columns:1fr}.python-content h1{font-size:42px}.python-section{padding:24px 0}.python-section p,.python-section li{font-size:15px}}

/* Python Fundamentals — single selected lesson view */
.python-section-single{border-top:0;padding-top:0;min-height:420px}
.python-section-single h2{margin-top:4px}
.python-sidebar a{cursor:pointer}

/* Python Fundamentals JSON field sections */
.python-content-block { margin-top: 30px; }
.python-content-block h3, .python-scenario h3 { margin: 0 0 14px; }
.python-step-list { margin: 0; padding-left: 24px; }
.python-step-list li { margin: 10px 0; line-height: 1.7; }
.python-example { padding-top: 4px; }
.python-scenario { margin-top: 34px; padding: 24px; border: 1px solid var(--border, #e5e5e5); border-radius: 18px; background: var(--surface-muted, #f7f7f7); }
.python-scenario strong { display: block; margin-bottom: 6px; }
.python-scenario p { margin: 0 0 18px; }
.python-scenario p:last-child { margin-bottom: 0; }

/* Python Fundamentals — lesson images + code highlighting */
.python-lesson-image{margin:26px 0 30px;border:1px solid var(--color-border);border-radius:20px;overflow:hidden;background:var(--color-page)}
.python-lesson-image img{display:block;width:100%;height:auto;max-height:360px;object-fit:cover}
.python-lesson-image figcaption{padding:11px 16px;color:var(--color-muted);font-size:12px;line-height:1.5;border-top:1px solid var(--color-border)}
.python-code{position:relative;background:#0d1117;color:#c9d1d9;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.python-code::before{content:attr(data-language);display:block;margin:-2px 0 12px;color:#8b949e;font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-transform:uppercase;letter-spacing:.12em}
.python-code code{font:500 14px/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre}
.python-code .tok-keyword{color:#ff7b72}
.python-code .tok-string{color:#a5d6ff}
.python-code .tok-comment{color:#8b949e;font-style:italic}
.python-code .tok-builtin{color:#d2a8ff}
.python-code .tok-constant{color:#79c0ff}
.python-code .tok-number{color:#79c0ff}
html[data-theme="light"] .python-code{background:#161b22;border-color:#30363d}

/* Python hierarchical learning navigation */
.python-nav-section{border-bottom:1px solid var(--color-border);padding:4px 0 8px}
.python-nav-section:last-child{border-bottom:0}
.python-nav-section-title{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;border:0;background:transparent;color:var(--color-text);padding:12px 8px;font:inherit;font-size:13px;font-weight:850;text-align:left;cursor:pointer}
.python-nav-section-title>span:first-child{display:flex;align-items:center;gap:8px;min-width:0}
.python-nav-number{font-size:10px;letter-spacing:.08em;color:var(--color-muted);min-width:22px}
.python-nav-chevron{font-size:18px;line-height:1;color:var(--color-muted)}
.python-nav-subtopics{padding:0 0 6px 8px}
.python-nav-subtopics[hidden]{display:none}
.python-nav-subtopics a{display:flex;align-items:center;gap:8px;margin:2px 0;padding:9px 10px 9px 12px;border-left:2px solid transparent;font-size:13px;font-weight:650}
.python-nav-subtopics a.is-active{border-left-color:var(--color-brand-text);background:var(--color-brand-bg);color:var(--color-brand-text)}
.python-nav-subtopic-number{font-size:10px;min-width:20px;color:var(--color-muted);font-weight:800}
.python-breadcrumb{display:flex;align-items:center;gap:8px;margin:0 0 14px;color:var(--color-muted);font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.python-breadcrumb span{opacity:.55}
@media(max-width:800px){.python-nav-subtopics{padding-left:0}.python-nav-section-title{padding-left:4px}.python-nav-subtopics a{padding-left:10px}}

/* =========================================================
   PYTHON FUNDAMENTALS — MOBILE RESPONSIVE OVERRIDES
   Keep the desktop layout unchanged above 800px.
========================================================= */
@media (max-width: 800px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .python-learning-page {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  .python-learning-shell {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin: 0;
    padding: 14px 12px 48px;
  }

  .python-learning-top {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 14px;
    gap: 10px;
    flex-wrap: wrap;
  }

  .python-back {
    min-height: 42px;
    box-sizing: border-box;
    padding: 9px 12px;
    font-size: 13px;
    border-radius: 10px;
  }

  .python-learning-top .roadmap-kicker {
    font-size: 10px;
    letter-spacing: .09em;
  }

  .python-learning-layout {
    display: block;
    width: 100%;
  }

  /* Mobile lesson menu becomes a compact scrollable panel. */
  .python-sidebar {
    position: relative;
    top: auto;
    width: 100%;
    max-width: none;
    max-height: 42vh;
    box-sizing: border-box;
    margin: 0 0 14px;
    padding: 10px;
    border-radius: 14px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .python-sidebar-kicker {
    position: sticky;
    top: -10px;
    z-index: 2;
    margin: -10px -10px 6px;
    padding: 10px;
    background: var(--color-page);
    border-bottom: 1px solid var(--color-border);
  }

  .python-nav-section {
    padding: 2px 0 5px;
  }

  .python-nav-section-title {
    min-height: 42px;
    padding: 10px 6px;
    font-size: 13px;
  }

  .python-nav-subtopics {
    padding: 0 0 5px;
  }

  .python-nav-subtopics a {
    min-height: 40px;
    box-sizing: border-box;
    margin: 2px 0;
    padding: 9px 8px;
    font-size: 13px;
  }

  .python-nav-subtopic-number {
    flex: 0 0 20px;
  }

  .python-content {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 22px 16px 28px;
    border-radius: 16px;
    overflow: hidden;
  }

  .python-content h1 {
    max-width: 100%;
    font-size: clamp(32px, 10vw, 46px);
    line-height: 1.02;
    overflow-wrap: anywhere;
    word-break: break-word;
    margin: 10px 0 14px;
  }

  .python-breadcrumb {
    flex-wrap: wrap;
    row-gap: 4px;
    margin-bottom: 10px;
    font-size: 10px;
  }

  .python-content .lead {
    max-width: none;
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 24px;
  }

  .python-section {
    min-width: 0;
    padding: 22px 0;
    scroll-margin-top: 20px;
  }

  .python-section h2 {
    font-size: clamp(24px, 7vw, 32px);
    line-height: 1.12;
    overflow-wrap: anywhere;
  }

  .python-section h3 {
    font-size: 18px;
    line-height: 1.3;
    margin-top: 20px;
  }

  .python-section p,
  .python-section li {
    font-size: 15px;
    line-height: 1.7;
    overflow-wrap: anywhere;
  }

  .python-section ul,
  .python-step-list {
    padding-left: 20px;
  }

  /* Code is the one intentional horizontal-scroll area. */
  .python-code {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 14px 0;
    padding: 15px 14px;
    border-radius: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    font-size: 12px;
    line-height: 1.65;
    white-space: pre;
  }

  .python-code code {
    font-size: 12px;
    line-height: 1.65;
  }

  .python-lesson-image {
    width: 100%;
    box-sizing: border-box;
    margin: 20px 0 24px;
    border-radius: 14px;
  }

  .python-lesson-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
  }

  .python-lesson-image figcaption {
    padding: 9px 12px;
    font-size: 11px;
  }

  .python-content-block {
    min-width: 0;
    margin-top: 24px;
  }

  .python-scenario {
    box-sizing: border-box;
    width: 100%;
    margin-top: 24px;
    padding: 17px 15px;
    border-radius: 14px;
    overflow-wrap: anywhere;
  }

  .python-callout {
    box-sizing: border-box;
    width: 100%;
    padding: 14px 14px;
    overflow-wrap: anywhere;
  }

  .python-lesson-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 8px;
    margin-top: 26px;
    padding-top: 18px;
  }

  .python-lesson-nav {
    min-width: 0;
    min-height: 44px;
    box-sizing: border-box;
    padding: 9px 10px;
    justify-content: center;
    text-align: center;
    font-size: 12px;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 420px) {
  .python-learning-shell {
    padding-left: 8px;
    padding-right: 8px;
  }

  .python-learning-top {
    align-items: stretch;
  }

  .python-back {
    flex: 1 1 100%;
    justify-content: center;
  }

  .python-learning-top .roadmap-kicker {
    width: 100%;
    text-align: center;
    padding: 4px 0;
  }

  .python-sidebar {
    max-height: 38vh;
    padding: 8px;
  }

  .python-sidebar-kicker {
    top: -8px;
    margin: -8px -8px 5px;
    padding: 9px;
  }

  .python-content {
    padding: 20px 13px 24px;
    border-radius: 14px;
  }

  .python-content h1 {
    font-size: clamp(30px, 11vw, 40px);
  }

  .python-content .lead {
    font-size: 14px;
  }

  .python-section p,
  .python-section li {
    font-size: 14px;
  }

  .python-code {
    padding: 13px 12px;
    font-size: 11px;
  }

  .python-code code {
    font-size: 11px;
  }

  .python-lesson-navigation {
    grid-template-columns: 1fr;
  }
}


/* Python Fundamentals — solid mobile drawer surfaces
   Prevent the page underneath from showing through the drawer. */
.python-learning-page .python-sidebar,
.python-learning-page .python-content,
.python-learning-page .python-back,
.python-learning-page .python-sidebar-toggle {
  background: var(--color-page);
  background-color: var(--color-page);
}

html[data-theme="dark"] .python-learning-page .python-sidebar,
html[data-theme="dark"] .python-learning-page .python-content,
html[data-theme="dark"] .python-learning-page .python-back,
html[data-theme="dark"] .python-learning-page .python-sidebar-toggle {
  background: var(--color-page);
  background-color: var(--color-page);
}

/* Python Fundamentals mobile lesson drawer */
.python-mobile-controls,
.python-sidebar-mobile-head,
.python-sidebar-overlay { display:none; }

@media (max-width:800px) {
  body.python-sidebar-open { overflow:hidden; }

  .python-mobile-controls {
    display:flex;
    position:relative;
    z-index:20;
    margin:0 0 12px;
  }

  .python-sidebar-toggle {
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:44px;
    padding:10px 15px;
    border:1px solid var(--color-border);
    border-radius:12px;
    background:var(--color-hero-soft);
    color:var(--color-text);
    font:inherit;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
  }

  .python-hamburger { width:19px; display:flex; flex-direction:column; gap:4px; }
  .python-hamburger span { display:block; width:19px; height:2px; border-radius:2px; background:currentColor; }

  .python-sidebar-overlay {
    position:fixed;
    inset:0;
    z-index:80;
    background:rgba(0,0,0,.52);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
  }
  .python-sidebar-overlay.is-visible { display:block; opacity:1; pointer-events:auto; }

  .python-sidebar {
    position:fixed !important;
    z-index:100;
    top:0 !important;
    left:0;
    bottom:0;
    width:min(88vw,340px) !important;
    max-height:none !important;
    margin:0 !important;
    padding:14px !important;
    border-radius:0 18px 18px 0 !important;
    overflow-y:auto !important;
    transform:translateX(-105%);
    transition:transform .22s ease;
    box-shadow:12px 0 35px rgba(0,0,0,.22);
    display:block !important;
  }
  .python-sidebar.is-open { transform:translateX(0); }

  .python-sidebar-mobile-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:42px;
    margin-bottom:8px;
    padding:0 4px;
    color:var(--color-text);
  }
  .python-sidebar-mobile-head strong { font-size:16px; }
  .python-sidebar-mobile-head button {
    width:36px;
    height:36px;
    border:1px solid var(--color-border);
    border-radius:10px;
    background:transparent;
    color:var(--color-text);
    font-size:24px;
    line-height:1;
    cursor:pointer;
  }

  .python-sidebar-kicker { margin-top:4px; }

  .python-learning-layout { display:block !important; }
  .python-content { width:100%; }

  .python-lesson-navigation {
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    position:relative;
    bottom:auto;
  }

  .python-lesson-nav { min-height:46px; }
}

@media (max-width:420px) {
  .python-lesson-navigation { grid-template-columns:1fr 1fr !important; }
  .python-lesson-nav { font-size:11px; padding:9px 7px; }
}

/* Rich lesson JSON rendering */
.python-introduction,.python-rich-section,.python-application,.python-detail-group{margin:1.25rem 0;}
.python-definition{padding:1rem 1.1rem;border-left:3px solid currentColor;}
.python-detail-list,.python-step-list{padding-left:1.4rem;}
.python-flow-list{display:grid;gap:.65rem;}
.python-flow-item{display:flex;align-items:center;gap:.7rem;}
.python-flow-item span{min-width:2rem;height:2rem;display:grid;place-items:center;border-radius:999px;border:1px solid currentColor;font-size:.8rem;}
.python-example-output{margin-top:.85rem;}
.python-example-output pre{overflow:auto;white-space:pre-wrap;}
.python-rich-section h3{margin-bottom:.65rem;}
.python-rich-section h4,.python-application h4{margin-top:1rem;}

/* Python lesson timeline */
.python-timeline-block {
    margin: 28px 0 36px;
}

.python-timeline-block > h4 {
    margin: 0 0 20px;
    font-size: 1.1rem;
    font-weight: 800;
}

.python-timeline {
    position: relative;
    display: grid;
    gap: 18px;
    margin: 0;
    padding: 4px 0 4px 2px;
}

.python-timeline::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 14px;
    bottom: 14px;
    width: 2px;
    background: var(--border-color, #d8d8d8);
}

.python-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.python-timeline-marker {
    position: relative;
    z-index: 1;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 2px solid currentColor;
    border-radius: 50%;
    background: var(--bg-primary, #fff);
    font-size: 0.75rem;
    font-weight: 800;
}

.python-timeline-card {
    min-width: 0;
    padding: 16px 18px;
    border: 1px solid var(--border-color, #dedede);
    border-radius: 14px;
    background: var(--bg-secondary, #f8f8f8);
}

.python-timeline-year {
    margin-bottom: 5px;
    font-size: 1rem;
    font-weight: 800;
}

.python-timeline-card p {
    margin: 0;
    line-height: 1.65;
}

@media (max-width: 640px) {
    .python-timeline-block {
        margin-top: 22px;
    }

    .python-timeline {
        gap: 14px;
    }

    .python-timeline-item {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 10px;
    }

    .python-timeline::before {
        left: 15px;
    }

    .python-timeline-marker {
        width: 30px;
        height: 30px;
        font-size: 0.7rem;
    }

    .python-timeline-card {
        padding: 13px 14px;
        border-radius: 12px;
    }

    .python-timeline-year {
        font-size: 0.95rem;
    }

    .python-timeline-card p {
        font-size: 0.92rem;
    }
}

/* Structured step rendering */
.python-steps-block { margin: 1.5rem 0; }
.python-steps-list { display: grid; gap: 1rem; }
.python-step-item { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.75rem; align-items: start; }
.python-step-number { width: 2.25rem; height: 2.25rem; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; font-weight: 600; }
.python-step-content { min-width: 0; padding-top: 0.15rem; }
.python-step-content p { margin: 0 0 0.65rem; }
.python-step-content .python-code { margin: 0 0 0.65rem; }
@media (max-width: 640px) {
  .python-step-item { grid-template-columns: 2.1rem minmax(0, 1fr); gap: 0.6rem; }
  .python-step-number { width: 2rem; height: 2rem; }
}

/* Structured lesson steps */
.python-steps-block{margin:1.5rem 0}
.python-steps-block>h4{margin:0 0 1rem;font-size:1.15rem}
.python-steps-list{display:flex;flex-direction:column;gap:1rem}
.python-step-item{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:.9rem;align-items:start}
.python-step-number{width:2.5rem;height:2.5rem;border:1px solid currentColor;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;line-height:1}
.python-step-content{min-width:0}
.python-step-content>p{margin:.15rem 0 .65rem}
.python-step-content .python-code{margin:.5rem 0}
.python-step-result{margin-top:.5rem}
.python-step-result p{margin:.25rem 0 0}
@media (max-width:600px){
  .python-step-item{grid-template-columns:2.15rem minmax(0,1fr);gap:.7rem}
  .python-step-number{width:2.15rem;height:2.15rem}
}


/* Python Syntax structured content */
.python-operator-table table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.python-operator-table th, .python-operator-table td { padding: 10px 12px; border: 1px solid var(--border, #ddd); text-align: left; }
.python-operator-table th { font-weight: 700; }
.python-operator-table code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.python-table-wrap { width: 100%; overflow-x: auto; }
@media (max-width: 800px) {
  .python-operator-table th, .python-operator-table td { padding: 8px 10px; }
}

.python-code-level-row{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;align-items:start;margin:10px 0}.python-code-level-badge{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--python-border,#ddd);border-radius:999px;padding:6px 9px;font-size:.78rem;font-weight:700;white-space:nowrap}.python-code-level-row .python-code{margin:0}.python-benefit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.python-benefit-card{border:1px solid var(--python-border,#ddd);border-radius:12px;padding:14px}.python-benefit-card h5{margin:0 0 6px;font-size:1rem}.python-benefit-card p{margin:0}.python-code-levels h4,.python-benefit-grid h4{margin-top:0}@media(max-width:800px){.python-code-level-row{grid-template-columns:1fr;gap:7px}.python-benefit-grid{grid-template-columns:1fr}}

.python-nav-item-disabled {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .65rem .8rem;
  color: var(--muted, #7f8794);
  opacity: .62;
  cursor: default;
}
.python-nav-item-disabled .python-nav-subtopic-number {
  flex: 0 0 auto;
}

/* Responsive flow diagram: wrap nodes instead of forcing a horizontal scrollbar. */
.python-flowchart{display:flex;flex-direction:column;gap:12px;margin:16px 0;padding:16px;border:1px solid var(--color-border);border-radius:14px;background:var(--color-page);min-width:0;max-width:100%;box-sizing:border-box}
.python-flowchart-row{display:flex;align-items:stretch;justify-content:flex-start;flex-wrap:wrap;gap:8px;min-width:0}
.python-flowchart-node{display:inline-flex;align-items:center;justify-content:center;min-width:0;max-width:100%;padding:10px 13px;border:1px solid var(--color-border);border-radius:10px;background:var(--color-hero-soft);color:var(--color-text);font-size:14px;font-weight:700;line-height:1.45;text-align:center;overflow-wrap:anywhere;white-space:normal;box-sizing:border-box}
.python-flowchart-arrow{display:inline-flex;align-items:center;justify-content:center;color:var(--color-muted);font-size:18px;font-weight:800;flex:0 0 auto}
@media(max-width:600px){.python-flowchart{padding:12px}.python-flowchart-row{gap:6px}.python-flowchart-node{font-size:13px;padding:9px 10px}.python-flowchart-arrow{font-size:16px}}

/* Use the supplied SVG for the for-loop flow diagram, scaled responsively. */
.python-flowchart-svg-wrap{width:100%;max-width:680px;margin:16px auto;overflow:hidden;border-radius:12px}
.python-flowchart-svg{display:block;width:100%;height:auto;max-width:100%;object-fit:contain}

/* Python Fundamentals v104 — richer output, interactive practice and browser compiler */
.python-example-output{margin:18px 0 8px;overflow:hidden;border:1px solid color-mix(in srgb,#22c55e 28%,var(--color-border));border-radius:14px;background:var(--color-page);box-shadow:0 8px 24px rgba(0,0,0,.045)}
.python-output-heading{display:flex;align-items:center;gap:9px;padding:11px 15px;border-bottom:1px solid var(--color-border);background:color-mix(in srgb,#22c55e 7%,var(--color-hero-soft));color:var(--color-text)}
.python-output-heading strong{font-size:12px;font-weight:850;letter-spacing:.02em}
.python-output-indicator{display:inline-block;width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px color-mix(in srgb,#22c55e 16%,transparent)}
.python-output-kind{margin-left:auto;color:var(--color-muted);font:800 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em}
.python-example-output pre{margin:0;padding:16px 18px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--color-text);font:500 13px/1.8 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.python-example-output>p{margin:0;padding:15px 18px;color:var(--color-text)}
.python-practice-card{margin:30px 0;padding:clamp(18px,3vw,28px);border:1px solid var(--color-border);border-radius:20px;background:linear-gradient(145deg,var(--color-hero-soft),color-mix(in srgb,var(--color-brand-bg) 26%,var(--color-page)));box-shadow:0 14px 38px rgba(0,0,0,.055)}
.python-practice-topline{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.python-practice-badge{display:inline-flex;align-items:center;border:1px solid color-mix(in srgb,var(--color-accent) 35%,var(--color-border));border-radius:999px;padding:6px 9px;color:var(--color-brand-text);font-size:10px;font-weight:900;letter-spacing:.12em}
.python-practice-count{color:var(--color-muted);font-size:12px;font-weight:650}
.python-practice-card h4{margin:0 0 12px;color:var(--color-text);font-size:clamp(18px,2.2vw,23px);line-height:1.4}
.python-practice-card>.python-code{margin:16px 0 20px}
.python-practice-options{display:grid;gap:10px;margin:18px 0}
.python-practice-option{display:grid;grid-template-columns:34px minmax(0,1fr) 20px;gap:12px;align-items:center;width:100%;padding:12px 14px;text-align:left;border:1px solid var(--color-border);border-radius:13px;background:var(--color-page);color:var(--color-text);font:inherit;line-height:1.5;cursor:pointer;transition:border-color .18s ease,background .18s ease,transform .18s ease}
.python-practice-option:hover{border-color:var(--color-accent);transform:translateY(-1px)}
.python-option-letter{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--color-hover);font-size:12px;font-weight:900;color:var(--color-muted)}
.python-option-check{font-weight:900;text-align:center}
.python-practice-option.is-selected{border-color:var(--color-accent);background:color-mix(in srgb,var(--color-brand-bg) 35%,var(--color-page));box-shadow:0 0 0 2px color-mix(in srgb,var(--color-accent) 12%,transparent)}
.python-practice-option.is-selected .python-option-letter{background:var(--color-accent);color:white}
.python-practice-option.is-correct,.python-practice-option.is-answer{border-color:#22a06b;background:color-mix(in srgb,#22a06b 10%,var(--color-page))}
.python-practice-option.is-correct .python-option-check,.python-practice-option.is-answer .python-option-check{color:#22a06b}
.python-practice-option.is-correct .python-option-check:after,.python-practice-option.is-answer .python-option-check:after{content:'✓'}
.python-practice-option.is-incorrect{border-color:#e05252;background:color-mix(in srgb,#e05252 8%,var(--color-page))}
.python-practice-option.is-incorrect .python-option-check:after{content:'×';color:#e05252}
.python-practice-option:disabled{cursor:default;transform:none}
.python-practice-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.python-practice-check,.python-practice-reset{min-height:42px;padding:10px 16px;border:1px solid var(--color-border);border-radius:11px;font:inherit;font-weight:750;font-size:13px;line-height:1.2;cursor:pointer;transition:transform .18s ease,background .18s ease}
.python-practice-check{border-color:var(--color-accent);background:var(--color-accent);color:white}
.python-practice-reset{background:var(--color-page);color:var(--color-text)}
.python-practice-check:hover,.python-practice-reset:hover{transform:translateY(-1px)}
.python-practice-feedback{margin-top:15px;padding:12px 14px;border-radius:11px;font-size:14px;font-weight:750;line-height:1.55}
.python-practice-feedback[hidden],.python-practice-explanation[hidden]{display:none}
.python-practice-feedback.is-correct{background:color-mix(in srgb,#22a06b 12%,var(--color-page));color:#168052}
.python-practice-feedback.is-incorrect{background:color-mix(in srgb,#e05252 10%,var(--color-page));color:#c33e3e}
.python-practice-feedback.is-neutral{background:var(--color-hover);color:var(--color-text)}
.python-practice-explanation{margin-top:12px;padding:15px 16px;border-left:3px solid var(--color-accent);border-radius:0 10px 10px 0;background:var(--color-hover)}
.python-practice-explanation strong{display:block;margin-bottom:5px;color:var(--color-text);font-size:13px}
.python-practice-explanation p{margin:0;color:var(--color-muted);font-size:14px}
.python-online-compiler{margin:38px 0 8px;padding:clamp(18px,3vw,28px);border:1px solid var(--color-border);border-radius:22px;background:var(--color-page);box-shadow:0 18px 50px rgba(0,0,0,.07);scroll-margin-top:90px}
.python-compiler-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:22px}
.python-compiler-eyebrow{color:var(--color-muted);font-size:10px;font-weight:900;letter-spacing:.16em}
.python-compiler-heading h3{margin:7px 0 8px!important;color:var(--color-text);font-size:clamp(22px,3vw,30px)!important;letter-spacing:-.025em}
.python-compiler-heading p{margin:0;color:var(--color-muted);font-size:14px;line-height:1.65}
.python-compiler-language{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;border:1px solid var(--color-border);border-radius:999px;padding:8px 11px;color:var(--color-text);font-size:12px;font-weight:800}
.python-compiler-language>span{width:8px;height:8px;border-radius:50%;background:#3776ab;box-shadow:0 0 0 3px #3776ab22}
.python-compiler-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;border:1px solid #30363d;border-bottom:0;border-radius:13px 13px 0 0;background:#161b22;color:#c9d1d9;font:650 12px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace}
.python-compiler-toolbar>span:first-child{display:flex;align-items:center;gap:6px}
.python-editor-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#8b949e;margin-right:1px}
.python-editor-dot:first-child{background:#ff5f57}.python-editor-dot:nth-child(2){background:#febc2e}.python-editor-dot:nth-child(3){background:#28c840;margin-right:8px}
.python-compiler-status{color:#9da7b3;font-size:11px}
.python-compiler-status[data-state="success"]{color:#56d49b}.python-compiler-status[data-state="error"]{color:#ff8585}.python-compiler-status[data-state="running"]{color:#f5c66b}
.python-compiler-editor-shell{position:relative;min-height:220px;overflow:hidden;background:#0d1117;border:1px solid #30363d;border-radius:0 0 13px 13px}
.python-compiler-highlight,.python-compiler-editor{display:block;width:100%;min-height:220px;margin:0;padding:20px;border:0;border-radius:0;outline:none;font:500 14px/1.8 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;tab-size:4;white-space:pre;overflow:auto;letter-spacing:normal;word-spacing:normal}
.python-compiler-highlight{position:absolute;inset:0;color:#e6edf3;pointer-events:none;scrollbar-width:none}
.python-compiler-highlight code{font:inherit;white-space:inherit}
.python-compiler-editor{position:relative;resize:vertical;background:transparent;color:transparent;-webkit-text-fill-color:transparent;caret-color:#f0f6fc;z-index:1}
.python-compiler-editor::selection{background:#264f78;color:transparent;-webkit-text-fill-color:transparent}
.python-compiler-editor:focus{box-shadow:inset 0 0 0 1px #539bf5}
.python-compiler-editor-shell .tok-keyword{color:#ff7b72}.python-compiler-editor-shell .tok-string{color:#a5d6ff}.python-compiler-editor-shell .tok-number{color:#79c0ff}.python-compiler-editor-shell .tok-builtin{color:#d2a8ff}.python-compiler-editor-shell .tok-comment{color:#8b949e}.python-compiler-editor-shell .tok-constant{color:#79c0ff}
.python-compiler-editor:focus{border-color:#539bf5;box-shadow:0 0 0 3px #539bf522}
.python-compiler-hint{margin:9px 0 16px!important;color:var(--color-muted)!important;font-size:12px!important}
.python-compiler-hint kbd{display:inline-block;padding:2px 5px;border:1px solid var(--color-border);border-radius:5px;background:var(--color-hero-soft);font:inherit}
.python-compiler-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:15px 0 20px}
.python-compiler-run,.python-compiler-reset{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:43px;padding:11px 16px;border:1px solid var(--color-border);border-radius:11px;font:inherit;font-weight:750;font-size:13px;line-height:1.2;cursor:pointer;transition:transform .18s ease,opacity .18s ease}
.python-compiler-run{border-color:#238636;background:#238636;color:white;box-shadow:0 4px 12px #2386362b}
.python-compiler-run:hover{background:#2ea043;transform:translateY(-1px)}
.python-compiler-run:disabled{opacity:.7;cursor:wait;transform:none}
.python-compiler-reset{background:var(--color-hero-soft);color:var(--color-text)}
.python-compiler-reset:hover{transform:translateY(-1px)}
.python-compiler-output{overflow:hidden;border:1px solid var(--color-border);border-radius:13px;background:var(--color-hero-soft)}
.python-compiler-output-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 15px;border-bottom:1px solid var(--color-border);color:var(--color-text);font-size:12px;font-weight:850}
.python-compiler-output-head>span{display:flex;align-items:center;gap:9px}
.python-compiler-output-head button{border:0;background:transparent;color:var(--color-muted);font:inherit;font-size:11px;font-weight:700;cursor:pointer}
.python-compiler-output pre{min-height:70px;max-height:320px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;margin:0;padding:16px 18px;color:var(--color-text);font:500 13px/1.8 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.python-compiler-output pre.has-success{border-left:3px solid #22a06b}.python-compiler-output pre.has-error{border-left:3px solid #e05252;color:#ff8585}
.python-compiler-footnote{margin:14px 0 0!important;color:var(--color-muted)!important;font-size:12px!important;line-height:1.6!important}
.python-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:600px){.python-compiler-heading{display:block}.python-compiler-language{margin-top:14px}.python-compiler-editor-shell,.python-compiler-editor,.python-compiler-highlight{min-height:190px}.python-compiler-editor,.python-compiler-highlight{padding:14px;font-size:12px}.python-compiler-toolbar{font-size:11px}.python-practice-option{grid-template-columns:30px minmax(0,1fr) 16px;padding:10px;gap:9px}.python-practice-actions>*{flex:1}.python-online-compiler{padding:16px}}

/* v105 — alignment and responsive learning-content tables/flow diagrams */
.python-content,
.python-content #pythonLessonContent,
.python-rich-section,
.python-rich-section > *,
.python-detail-group,
.python-table-card,
.python-table-wrap {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.python-rich-section > p,
.python-detail-group > p,
.python-rich-section li,
.python-detail-group li {
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.python-table-card {
  margin: 18px 0 24px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 15px;
  background: var(--color-page);
  box-shadow: 0 7px 22px rgba(0,0,0,.035);
}
.python-table-caption {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 17px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-hero-soft);
}
.python-table-caption-icon {
  display: inline-flex;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--color-page);
  color: var(--color-accent);
  font-size: 15px;
  font-weight: 850;
}
.python-table-caption > div { display: grid; gap: 3px; min-width: 0; }
.python-table-caption strong { color: var(--color-text); font-size: 14px; line-height: 1.35; }
.python-table-caption span:not(.python-table-caption-icon) { color: var(--color-muted); font-size: 12px; line-height: 1.5; }
.python-table-wrap { width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.python-table {
  width: 100%;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.6;
  table-layout: auto;
}
.python-table th,
.python-table td {
  padding: 13px 16px;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
  box-sizing: border-box;
}
.python-table th {
  background: var(--color-hero-soft);
  color: var(--color-text);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .055em;
  line-height: 1.45;
  text-transform: uppercase;
  white-space: normal;
}
.python-table tbody tr:last-child td { border-bottom: 0; }
.python-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--color-hero-soft) 32%, var(--color-page)); }
.python-table-syntax th:first-child,
.python-table-syntax td:first-child { width: 27%; }
.python-table-syntax td:first-child code {
  display: inline-block;
  max-width: 100%;
  padding: 4px 7px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-hero-soft);
  color: var(--color-text);
  font: 750 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}
.python-table-execution th:first-child,
.python-table-execution td:first-child { width: 64px; text-align: center; }
.python-table-execution td:first-child { color: var(--color-muted); font-weight: 800; font-variant-numeric: tabular-nums; }
.python-table-execution .is-break-step td { background: color-mix(in srgb, #e9a23b 12%, var(--color-page)); }
.python-table-execution .is-break-step td:first-child { box-shadow: inset 3px 0 #e9a23b; color: var(--color-text); }
.python-table-execution .is-skipped-step td { color: var(--color-muted); }
.python-table-execution .is-true-condition { font-weight: 850; color: #b7791f; }
.python-table-execution .is-after-loop-step td { background: color-mix(in srgb, #22a06b 9%, var(--color-page)); }
.python-table-execution .is-after-loop-step td:first-child { box-shadow: inset 3px 0 #22a06b; }

.python-execution-flow {
  display: grid;
  gap: 0;
  margin: 18px 0 24px;
  padding: clamp(14px, 2.4vw, 24px);
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-page);
  box-shadow: 0 8px 26px rgba(0,0,0,.04);
  box-sizing: border-box;
}
.python-execution-flow-stage { display: flex; justify-content: center; min-width: 0; }
.python-execution-flow-node {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: min(100%, 390px);
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-hero-soft);
  text-align: center;
  box-sizing: border-box;
}
.python-execution-flow-node strong { color: var(--color-text); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.python-execution-flow-node > span { color: var(--color-muted); font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.python-execution-flow-node.is-start { border-color: color-mix(in srgb, #22a06b 42%, var(--color-border)); }
.python-execution-flow-node.is-condition { border: 2px solid color-mix(in srgb, var(--color-accent) 58%, var(--color-border)); background: color-mix(in srgb, var(--color-brand-bg) 26%, var(--color-page)); }
.python-execution-flow-node.is-break { border-color: color-mix(in srgb, #e9a23b 60%, var(--color-border)); background: color-mix(in srgb, #e9a23b 12%, var(--color-page)); }
.python-execution-flow-node.is-after { border-color: color-mix(in srgb, #22a06b 45%, var(--color-border)); background: color-mix(in srgb, #22a06b 8%, var(--color-page)); }
.python-execution-flow-connector { display: flex; flex-direction: column; align-items: center; height: 35px; color: var(--color-muted); }
.python-execution-flow-connector span { width: 2px; height: 15px; background: var(--color-border); }
.python-execution-flow-connector b { font-size: 16px; line-height: 18px; }
.python-execution-flow-branches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 6px; min-width: 0; }
.python-execution-flow-branch { display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--color-border); border-radius: 14px; background: color-mix(in srgb, var(--color-hero-soft) 42%, var(--color-page)); }
.python-flow-branch-label { align-self: flex-start; max-width: 100%; padding: 5px 8px; border-radius: 999px; background: var(--color-page); color: var(--color-muted); font-size: 10px; font-weight: 900; letter-spacing: .05em; overflow-wrap: anywhere; }
.python-execution-flow-branch .python-execution-flow-node { width: 100%; flex: 1; }
.python-execution-flow-branch.is-exit { border-color: color-mix(in srgb, #e9a23b 36%, var(--color-border)); }
.python-execution-flow-branch.is-continue .python-flow-branch-label { color: #168052; }
.python-execution-flow-branch.is-exit .python-flow-branch-label { color: #b7791f; }
.python-flow-return { margin-top: auto; padding: 9px 10px; border: 1px dashed var(--color-border); border-radius: 9px; color: var(--color-muted); text-align: center; font-size: 12px; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.python-flow-down { color: var(--color-muted); text-align: center; font-size: 20px; line-height: 1; }
.python-execution-flow-footnote { margin: 16px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--color-hero-soft); color: var(--color-muted); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.python-execution-flow-footnote strong { color: var(--color-text); }
.python-execution-flow-footnote code { color: var(--color-text); font-weight: 800; }
.python-execution-flow-generic { display: grid; justify-items: center; gap: 8px; }
.python-flow-generic-arrow { color: var(--color-muted); font-size: 20px; font-weight: 800; line-height: 1; }
.python-flow-connections { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.python-flow-connections li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(72px, auto) minmax(0, 1fr); align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--color-border); border-radius: 9px; font-size: 12px; text-align: center; overflow-wrap: anywhere; }
.python-flow-connections li span { color: var(--color-muted); }

@media (max-width: 700px) {
  .python-table-card { border-radius: 12px; }
  .python-table-caption { padding: 12px; }
  .python-table th, .python-table td { padding: 10px 12px; font-size: 13px; }
  .python-table-wrap { overflow: visible; }
  .python-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .python-table, .python-table tbody { display: block; width: 100%; }
  .python-table tbody { padding: 8px; }
  .python-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0 0 10px; overflow: hidden; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-page); }
  .python-table tbody tr:last-child { margin-bottom: 0; }
  .python-table tbody tr:nth-child(even) td { background: transparent; }
  .python-table tbody td { display: grid; grid-template-columns: minmax(82px, 34%) minmax(0, 1fr); align-items: start; gap: 10px; width: 100%; padding: 9px 10px; border-bottom: 1px solid var(--color-border); text-align: left; }
  .python-table tbody td:last-child { border-bottom: 0; }
  .python-table tbody td::before { content: attr(data-label); color: var(--color-muted); font-size: 10px; font-weight: 850; line-height: 1.5; letter-spacing: .035em; text-transform: uppercase; overflow-wrap: anywhere; }
  .python-table-syntax th:first-child, .python-table-syntax td:first-child { width: auto; }
  .python-table-execution th:first-child, .python-table-execution td:first-child { width: auto; text-align: left; }
  .python-execution-flow { padding: 12px; border-radius: 14px; }
  .python-execution-flow-branches { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .python-execution-flow-branch { padding: 10px; }
  .python-flow-connections li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* v109: normalize ordered/bullet explanation lists so every item keeps its marker and spacing. */
.python-formatted-list {
  display: block;
  margin: 14px 0 16px !important;
  padding: 0 0 0 2rem !important;
  list-style-position: outside !important;
}
.python-formatted-list li {
  display: list-item !important;
  margin: 0 0 8px !important;
  padding: 0 0 0 2px !important;
  line-height: 1.65;
  list-style: inherit !important;
}
.python-formatted-list li:last-child { margin-bottom: 0 !important; }
ol.python-formatted-list { list-style-type: decimal !important; }
ul.python-formatted-list { list-style-type: disc !important; }

/* v130: clickable roadmap cards without roadmap code badges */
.learn-page a.road-card-link{display:block;color:inherit;text-decoration:none;cursor:pointer}
.learn-page a.road-card-link:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.learn-page a.road-card-link h4{color:inherit}

/* Mobile fix: prevent the Learn in Layers heading and intro from overlapping. */
@media (max-width: 700px) {
  .layers-section,
  .layers-header,
  .layers-heading,
  .layers-title,
  .layers-intro {
    min-width: 0;
    max-width: 100%;
  }
  .layers-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
  }
  .layers-title {
    width: 100%;
    font-size: clamp(42px, 12vw, 58px);
    line-height: .98;
    letter-spacing: -.055em;
    overflow-wrap: normal;
    word-break: normal;
  }
  .layers-intro {
    padding-top: 0;
    font-size: 16px;
    line-height: 1.6;
    overflow-wrap: anywhere;
  }
}
@media (max-width: 380px) {
  .layers-title { font-size: clamp(38px, 11.5vw, 46px); }
  .layers-intro { font-size: 15px; }
}


/* DataEngineerX responsive fix v2: process section heading/intro overlap.
   Applied to the main stylesheet actually used by the homepage. */
@media (max-width: 700px) {
  .process-section {
    padding-left: clamp(20px, 5.2vw, 28px) !important;
    padding-right: clamp(20px, 5.2vw, 28px) !important;
  }
  .process-section .process-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 22px !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .process-section .process-heading,
  .process-section .process-title,
  .process-section .process-intro {
    position: relative !important;
    inset: auto !important;
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    grid-column: auto !important;
  }
  .process-section .process-title {
    font-size: clamp(42px, 10.8vw, 58px) !important;
    line-height: .98 !important;
    letter-spacing: -.055em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  .process-section .process-title span { display: block !important; }
  .process-section .process-intro {
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }
}
@media (max-width: 380px) {
  .process-section .process-title { font-size: clamp(38px, 10.5vw, 44px) !important; }
  .process-section .process-intro { font-size: 15px !important; }
}


/* Learn roadmap: mark courses that are not yet available */
.learn-page .coming-soon-card,
.coming-soon-card {
  position: relative;
  overflow: hidden;
  filter: saturate(.55);
  cursor: not-allowed;
}
.coming-soon-card > * { filter: blur(1.35px); opacity: .72; }
.coming-soon-card::after {
  content: "COMING SOON";
  position: absolute;
  z-index: 5;
  top: 14px;
  right: 12px;
  padding: 7px 11px;
  border: 1px solid rgba(255, 126, 47, .5);
  border-radius: 999px;
  background: rgba(255, 244, 232, .96);
  color: #c94f13;
  font: 800 10px/1.1 system-ui, sans-serif;
  letter-spacing: .12em;
  box-shadow: 0 5px 16px rgba(30, 25, 20, .12);
  animation: comingSoonPop 1.8s ease-in-out infinite;
}
@keyframes comingSoonPop {
  0%, 100% { transform: scale(1); box-shadow: 0 5px 16px rgba(30,25,20,.12); }
  50% { transform: scale(1.055); box-shadow: 0 7px 20px rgba(255,126,47,.22); }
}
@media (prefers-reduced-motion: reduce) {
  .coming-soon-card::after { animation: none; }
}