@layer components {

    .not-found-page {
        display: grid;
        grid-column: 1 / -1;
        gap: var(--space-24);
        margin-block: var(--space-24) var(--space-48);
    }

    .not-found-hero {
        position: relative;
        display: grid;
        gap: var(--space-24);
        overflow: hidden;
        padding: clamp(var(--space-24), 4vw, var(--space-48));
        border: var(--border-width-hairline) solid var(--color-border);
        border-radius: var(--radius-corner);
        background:
            linear-gradient(135deg, color-mix(in oklch, var(--color-brand-secondary) 92%, black), var(--color-neutral-950)),
            var(--color-brand-secondary);
        color: var(--color-text-on-image);
        box-shadow: 0 var(--space-12) var(--space-32) var(--color-shadow-medium);
    }

    .not-found-hero::before,
    .not-found-hero::after {
        content: "";
        position: absolute;
        pointer-events: none;
    }

    .not-found-hero::before {
        inset: 0;
        background:
            linear-gradient(90deg, rgb(255 255 255 / 0.06) 1px, transparent 1px),
            linear-gradient(0deg, rgb(255 255 255 / 0.04) 1px, transparent 1px);
        background-size: 3rem 3rem;
        mask-image: linear-gradient(135deg, black, transparent 70%);
    }

    .not-found-hero::after {
        width: 18rem;
        height: 18rem;
        right: -6rem;
        bottom: -7rem;
        border: 1.75rem solid color-mix(in oklch, var(--color-brand-primary) 28%, transparent);
        border-radius: var(--radius-round);
        opacity: .46;
    }

    .not-found-hero__visual,
    .not-found-hero__content {
        position: relative;
        z-index: 1;
    }

    .not-found-hero__visual {
        display: grid;
        grid-template-columns: auto auto;
        align-items: center;
        justify-content: start;
        gap: var(--space-16);
    }

    .not-found-hero__code {
        color: var(--color-brand-primary);
        font-size: clamp(4.5rem, 17vw, 12rem);
        font-weight: var(--font-weight-bold);
        line-height: .8;
    }

    .not-found-hero__icon {
        width: clamp(3.5rem, 9vw, 6.5rem);
        height: clamp(3.5rem, 9vw, 6.5rem);
        color: var(--color-text-on-image);
        opacity: .82;
    }

    .not-found-hero__content {
        display: grid;
        gap: var(--space-16);
        max-width: 44rem;
    }

    .not-found-hero__eyebrow {
        width: fit-content;
        margin: 0;
        padding: var(--space-6) var(--space-12);
        border: var(--border-width-hairline) solid var(--color-border-on-dark);
        border-radius: var(--radius-round);
        background: var(--color-bg-on-dark-subtle);
        color: var(--color-brand-primary);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-bold);
        line-height: var(--leading-ui);
    }

    .not-found-hero h1 {
        margin: 0;
        color: var(--color-text-on-image);
        font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl));
        font-weight: var(--font-weight-bold);
        line-height: var(--leading-tight);
    }

    .not-found-hero p:not(.not-found-hero__eyebrow) {
        margin: 0;
        color: var(--color-text-on-image-subtle);
        font-size: var(--text-lg);
        line-height: var(--leading-relaxed);
    }

    .not-found-hero__actions,
    .not-found-links {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-12);
    }

    .not-found-hero__actions .btn {
        min-width: 10rem;
    }

    .not-found-hero__actions .btn__icon {
        width: 1rem;
        height: 1rem;
    }

    .not-found-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .not-found-link {
        display: flex;
        align-items: center;
        min-width: 0;
        min-height: 4.75rem;
        padding: var(--space-16);
        border: var(--border-width-hairline) solid var(--color-card-border);
        border-radius: var(--radius-corner-m);
        background: var(--color-card-bg);
        color: var(--color-text);
        font-weight: var(--font-weight-bold);
        text-decoration: none;
        box-shadow: 0 var(--space-8) var(--space-24) var(--color-shadow-soft);
        transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    }

    .not-found-link:hover,
    .not-found-link:focus-visible {
        border-color: color-mix(in oklch, var(--not-found-accent, var(--color-brand-primary)) 68%, var(--color-card-border));
        color: var(--color-text-strong);
        outline: none;
        box-shadow: 0 var(--space-12) var(--space-32) var(--color-shadow-medium);
        transform: translateY(calc(var(--space-2) * -1));
    }

    .not-found-link--news {
        --not-found-accent: var(--color-content-news);
    }

    .not-found-link--reviews {
        --not-found-accent: var(--color-content-review);
    }

    .not-found-link--features {
        --not-found-accent: var(--color-content-article);
    }

    .not-found-link--videos {
        --not-found-accent: var(--color-content-video);
    }

    .not-found-link--games {
        --not-found-accent: var(--color-brand-primary);
    }

    @media (min-width: 56rem) {
        .not-found-hero {
            grid-template-columns: minmax(17rem, .62fr) minmax(0, 1fr);
            align-items: center;
        }

        .not-found-hero__visual {
            grid-template-columns: 1fr;
            gap: var(--space-24);
        }

        .not-found-links {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
    }

    @media (max-width: 36rem) {
        .not-found-page {
            margin-block-start: var(--space-16);
        }

        .not-found-hero {
            padding: var(--space-24);
        }

        .not-found-hero p:not(.not-found-hero__eyebrow) {
            font-size: var(--text-base);
        }

        .not-found-hero__actions .btn,
        .not-found-links {
            width: 100%;
        }

        .not-found-links {
            grid-template-columns: 1fr;
        }
    }
}