@layer tutorial;

@layer tutorial {
    body.tutorial-page {
        min-block-size: 100svh;
    }

    .tutorial-page .home-ambient-background {
        opacity: 0.72;
    }

    .tutorial-page .home-code-noise {
        opacity: 0.26;
    }

    .tutorial-shell {
        inline-size: min(100% - 4rem, 72rem);
        margin-inline: auto;
    }

    .tutorial-hero {
        position: relative;
        z-index: 1;
        padding-block: clamp(8rem, 6rem + 5cqi, 12rem) clamp(4rem, 3rem + 3cqi, 7rem);
        border-block-end: 1px solid var(--home-line);
        background:
            linear-gradient(to bottom, color-mix(in oklch, var(--home-background) 5%, transparent), var(--home-background)),
            linear-gradient(to right, color-mix(in oklch, var(--home-accent) 11%, transparent) 1px, transparent 1px),
            linear-gradient(to bottom, color-mix(in oklch, var(--home-accent) 11%, transparent) 1px, transparent 1px);
        background-size: auto, 3.25rem 3.25rem, 3.25rem 3.25rem;
    }

    .tutorial-hero-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.44fr);
        align-items: end;
        gap: clamp(2rem, 1.25rem + 4cqi, 5rem);
    }

    .tutorial-hero-copy {
        display: grid;
        justify-items: start;
        gap: 1.25rem;
        max-inline-size: 47rem;
    }

    .tutorial-hero h1,
    .tutorial-step h2,
    .tutorial-after h2,
    .tutorial-section-heading h2 {
        color: var(--home-foreground);
        font-weight: 700;
        letter-spacing: 0;
        text-wrap: balance;
    }

    .tutorial-hero h1 {
        margin: 0;
        font-size: clamp(2.6rem, 1.75rem + 4cqi, 5.6rem);
        line-height: 1.05;
    }

    .tutorial-hero-copy > p:not(.home-eyebrow) {
        max-inline-size: 38rem;
        margin: 0;
        color: var(--home-muted);
        font-size: 1rem;
        line-height: 1.8;
        text-wrap: pretty;
    }

    .tutorial-facts {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1px;
        margin: 0;
        border: 1px solid var(--home-line);
        background: var(--home-line);
    }

    .tutorial-facts div {
        display: grid;
        align-content: start;
        gap: 0.4rem;
        min-block-size: 7.25rem;
        padding: 1rem;
        background: color-mix(in oklch, var(--home-background) 90%, transparent);
    }

    .tutorial-facts dt,
    .tutorial-step-index {
        color: var(--home-muted-foreground);
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 1.4;
    }

    .tutorial-facts dd {
        margin: 0;
        color: var(--home-foreground);
        font-size: 0.95rem;
        font-weight: 700;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .tutorial-jump-nav {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
        inline-size: min(100%, 42rem);
        margin-block-start: 1.25rem;
        border-block: 1px solid var(--home-line);
    }

    .tutorial-jump-nav a {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.65rem;
        min-block-size: 3.25rem;
        padding-inline: 0.75rem;
        color: var(--home-muted);
        border-inline-end: 1px solid var(--home-line);
        font-size: 0.82rem;
        font-weight: 650;
    }

    .tutorial-jump-nav a:last-child {
        border-inline-end: 0;
    }

    .tutorial-jump-nav a:hover,
    .tutorial-jump-nav a:focus-visible {
        color: var(--home-foreground);
        background: color-mix(in oklch, var(--home-foreground) 5%, transparent);
    }

    .tutorial-jump-nav b {
        color: var(--home-accent-soft);
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 0.7rem;
    }

    .tutorial-jump-nav .lucide {
        inline-size: 0.95rem;
        block-size: 0.95rem;
    }

    .tutorial-step {
        position: relative;
        z-index: 1;
        padding-block: clamp(4rem, 2.5rem + 4cqi, 7rem);
        border-block-end: 1px solid var(--home-line);
        background: color-mix(in oklch, var(--home-background) 82%, transparent);
    }

    .tutorial-step--muted {
        background: color-mix(in oklch, var(--home-surface) 82%, transparent);
    }

    .tutorial-step-layout {
        display: grid;
        grid-template-columns: minmax(0, 0.78fr) minmax(24rem, 1.22fr);
        align-items: start;
        gap: clamp(2rem, 1rem + 4cqi, 5rem);
    }

    .tutorial-step-copy {
        display: grid;
        justify-items: start;
        gap: 1.2rem;
    }

    .tutorial-step-index {
        margin: 0;
        color: var(--home-accent-soft);
    }

    .tutorial-step h2,
    .tutorial-after h2,
    .tutorial-section-heading h2 {
        margin: 0;
        font-size: clamp(1.8rem, 1.45rem + 1cqi, 2.45rem);
        line-height: 1.2;
    }

    .tutorial-lead {
        margin: 0;
        color: var(--home-muted);
        font-size: 0.98rem;
        line-height: 1.8;
        text-wrap: pretty;
    }

    .tutorial-checklist {
        display: grid;
        gap: 0;
        inline-size: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
        border-block: 1px solid var(--home-line);
        counter-reset: tutorial-step;
    }

    .tutorial-checklist li {
        display: grid;
        grid-template-columns: 1.75rem minmax(0, 1fr);
        gap: 0.75rem;
        align-items: start;
        padding-block: 0.9rem;
        border-block-end: 1px solid var(--home-line);
    }

    .tutorial-checklist li:last-child {
        border-block-end: 0;
    }

    .tutorial-checklist span {
        display: grid;
        place-items: center;
        block-size: 1.75rem;
        color: var(--home-accent-soft);
        border: 1px solid color-mix(in oklch, var(--home-accent) 42%, var(--home-line));
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 0.72rem;
        font-weight: 700;
    }

    .tutorial-checklist p {
        margin: 0;
        color: var(--home-muted);
        font-size: 0.9rem;
        line-height: 1.7;
        text-wrap: pretty;
    }

    .tutorial-step code,
    .tutorial-faq code {
        color: var(--home-foreground);
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 0.9em;
    }

    .tutorial-figure {
        display: grid;
        gap: 0.8rem;
        margin: 0;
        padding: clamp(0.45rem, 0.25rem + 0.8cqi, 0.8rem);
        border: 1px solid var(--home-line-strong);
        background: color-mix(in oklch, var(--home-background) 76%, transparent);
    }

    .tutorial-figure img {
        display: block;
        inline-size: 100%;
        block-size: auto;
        aspect-ratio: 8 / 5;
        object-fit: cover;
        object-position: center;
    }

    .tutorial-figure figcaption {
        padding-inline: 0.25rem;
        color: var(--home-muted-foreground);
        font-size: 0.78rem;
        line-height: 1.55;
        text-wrap: pretty;
    }

    .tutorial-visual-stack {
        display: grid;
        gap: 1rem;
    }

    .tutorial-figure--compact img {
        max-block-size: 23rem;
        object-fit: cover;
    }

    .tutorial-callout {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0.75rem;
        inline-size: 100%;
        padding: 1rem;
        border-inline-start: 2px solid var(--home-accent);
        background: color-mix(in oklch, var(--home-accent-wash) 68%, transparent);
    }

    .tutorial-callout .lucide {
        inline-size: 1rem;
        block-size: 1rem;
        margin-block-start: 0.2rem;
        color: var(--home-accent-soft);
    }

    .tutorial-callout p {
        margin: 0;
        color: var(--home-muted);
        font-size: 0.84rem;
        line-height: 1.65;
        text-wrap: pretty;
    }

    .tutorial-callout b {
        color: var(--home-foreground);
    }

    .tutorial-after {
        position: relative;
        z-index: 1;
        padding-block: clamp(4rem, 2.5rem + 3.5cqi, 6rem);
        border-block-end: 1px solid var(--home-line);
        background: color-mix(in oklch, var(--home-surface-raised) 70%, transparent);
    }

    .tutorial-after-layout {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        align-items: start;
        gap: clamp(2rem, 1rem + 4cqi, 5rem);
    }

    .tutorial-after-layout > div {
        display: grid;
        gap: 0.85rem;
    }

    .tutorial-after-layout > p {
        margin: 0;
        color: var(--home-muted);
        font-size: 1rem;
        line-height: 1.85;
        text-wrap: pretty;
    }

    .tutorial-faq {
        position: relative;
        z-index: 1;
        padding-block: clamp(4rem, 2.5rem + 4cqi, 7rem);
        background: color-mix(in oklch, var(--home-background) 90%, transparent);
    }

    .tutorial-section-heading {
        display: grid;
        gap: 0.85rem;
        margin-block-end: 2rem;
    }

    .tutorial-faq-list {
        border-block-start: 1px solid var(--home-line);
    }

    .tutorial-faq details {
        border-block-end: 1px solid var(--home-line);
    }

    .tutorial-faq summary {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 1rem;
        align-items: center;
        min-block-size: 4rem;
        color: var(--home-foreground);
        cursor: pointer;
        font-size: 0.95rem;
        font-weight: 650;
        list-style: none;
    }

    .tutorial-faq summary::-webkit-details-marker {
        display: none;
    }

    .tutorial-faq summary .lucide {
        inline-size: 1rem;
        block-size: 1rem;
        color: var(--home-muted);
        transition: transform 180ms ease;
    }

    .tutorial-faq details[open] summary .lucide {
        transform: rotate(45deg);
    }

    .tutorial-faq details > p {
        max-inline-size: 52rem;
        margin: 0;
        padding-block: 0 1.25rem;
        color: var(--home-muted);
        font-size: 0.9rem;
        line-height: 1.75;
        text-wrap: pretty;
    }

    .tutorial-support-note {
        margin: 1.5rem 0 0;
        color: var(--home-muted-foreground);
        font-size: 0.82rem;
    }

    @container home (width <= 58rem) {
        .tutorial-hero-layout,
        .tutorial-step-layout,
        .tutorial-after-layout {
            grid-template-columns: minmax(0, 1fr);
        }

        .tutorial-facts {
            max-inline-size: 38rem;
        }
    }

    @container home (width <= 40rem) {
        .tutorial-shell {
            inline-size: min(100% - 2rem, 72rem);
        }

        .tutorial-hero {
            padding-block-start: 7rem;
        }

        .tutorial-facts {
            grid-template-columns: 1fr;
            gap: 0;
            background: transparent;
        }

        .tutorial-facts div {
            min-block-size: auto;
            border-block: 1px solid var(--home-line);
        }

        .tutorial-facts div:not(:first-child) {
            border-block-start: 0;
        }

        .tutorial-jump-nav a {
            border-inline-end: 0;
            border-block-end: 1px solid var(--home-line);
        }

        .tutorial-jump-nav a:last-child {
            border-block-end: 0;
        }

        .tutorial-figure--compact img {
            max-block-size: none;
        }
    }
}