@layer utilities {
    .l-container {
        width: 100%;
        max-width: var(--container-max);
        margin-inline: auto;
        padding-inline: var(--container-gutter)
    }

    .l-container--narrow {
        max-width: var(--container-narrow)
    }

    .u-grid-blueprint {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: var(--space-4)
    }

    .u-grid-split {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-4)
    }

    @media (width >=900px) {
        .u-grid-split {
            grid-template-columns: 1fr 1fr;
            align-items: start
        }

        .u-grid-split--60-40 {
            grid-template-columns: 1.4fr 1fr
        }

        .u-grid-split--40-60 {
            grid-template-columns: 1fr 1.4fr
        }
    }

    .u-grid-3 {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-4);

        @media (width >= 680px){
            grid-template-columns: repeat(2, 1fr);
        }

        @media (width >= 1040px){
            grid-template-columns: repeat(3, 1fr);
        }
    }

    .u-grid-4 {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-4);

        @media (width >= 640px){
            grid-template-columns: repeat(2, 1fr);
        }

        @media (width >= 1080px){
            grid-template-columns: repeat(4, 1fr);
        }
    }

    .u-cluster {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-3)
    }

    .u-cluster--between {
        justify-content: space-between
    }

    .u-cluster--center {
        justify-content: center
    }

    .u-cluster--tight {
        gap: var(--space-2)
    }

    .u-cluster--wide {
        gap: var(--space-6)
    }

    .u-stack {
        display: flex;
        flex-direction: column
    }

    .u-stack-1 {
        display: flex;
        flex-direction: column;
        gap: var(--space-1)
    }

    .u-stack-2 {
        display: flex;
        flex-direction: column;
        gap: var(--space-2)
    }

    .u-stack-3 {
        display: flex;
        flex-direction: column;
        gap: var(--space-3)
    }

    .u-stack-4 {
        display: flex;
        flex-direction: column;
        gap: var(--space-4)
    }

    .u-stack-5 {
        display: flex;
        flex-direction: column;
        gap: var(--space-5)
    }

    .u-stack-6 {
        display: flex;
        flex-direction: column;
        gap: var(--space-6)
    }

    .u-stack-8 {
        display: flex;
        flex-direction: column;
        gap: var(--space-8)
    }

    .u-stack-10 {
        display: flex;
        flex-direction: column;
        gap: var(--space-10)
    }

    .u-stack-12 {
        display: flex;
        flex-direction: column;
        gap: var(--space-12)
    }

    .u-stack-16 {
        display: flex;
        flex-direction: column;
        gap: var(--space-16)
    }

    .u-glass {
        background-color: var(--glass-bg);
        backdrop-filter: var(--glass-filter);
        -webkit-backdrop-filter: var(--glass-filter);
        border: 1px solid var(--border-subtle);
        box-shadow: var(--glass-border)
    }

    .u-glass-heavy {
        background-color: var(--glass-heavy-bg);
        backdrop-filter: var(--glass-filter-heavy);
        -webkit-backdrop-filter: var(--glass-filter-heavy);
        border: 1px solid var(--border-medium);
        box-shadow: var(--glass-border), 0 20px 40px oklch(0 0 0 / .4)
    }

    .u-steel-border {
        border: 1px solid var(--border-medium)
    }

    .u-steel-border-subtle {
        border: 1px solid var(--border-subtle)
    }

    .u-steel-border-b {
        border-bottom: 1px solid var(--border-subtle)
    }

    .u-steel-border-t {
        border-top: 1px solid var(--border-subtle)
    }

    .u-depth-1 {
        box-shadow: 0 4px 12px oklch(0 0 0 / .25)
    }

    .u-depth-2 {
        box-shadow: 0 8px 24px oklch(0 0 0 / .35)
    }

    .u-depth-3 {
        box-shadow: 0 16px 40px oklch(0 0 0 / .45)
    }

    .u-depth-4 {
        box-shadow: 0 24px 60px oklch(0 0 0 / .55), 0 0 80px color-mix(in oklch, var(--color-electric-blue) 12%, transparent)
    }

    .u-blueprint-bg {
        background-image: linear-gradient(to right, color-mix(in oklch, var(--color-steel-700) 25%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklch, var(--color-steel-700) 25%, transparent) 1px, transparent 1px);
        background-size: 40px 40px;
        background-position: center top
    }

    .u-blueprint-bg-fine {
        background-image: linear-gradient(to right, color-mix(in oklch, var(--color-steel-700) 18%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklch, var(--color-steel-700) 18%, transparent) 1px, transparent 1px);
        background-size: 16px 16px
    }

    .u-radial-glow {
        background: radial-gradient(circle at 50% 0%, color-mix(in oklch, var(--color-electric-blue) 15%, transparent) 0%, transparent 65%)
    }

    .u-mono {
        font-family: var(--font-mono);
        font-feature-settings: "tnum" 1, "zero" 1;
        letter-spacing: var(--letter-spacing-mono)
    }

    .u-caps {
        text-transform: uppercase;
        letter-spacing: var(--letter-spacing-caps);
        font-size: var(--font-size-micro);
        font-weight: 600
    }

    .u-lead {
        font-size: var(--font-size-lead);
        line-height: var(--line-height-heading);
        color: var(--text-secondary)
    }

    .u-text-muted {
        color: var(--text-muted)
    }

    .u-text-secondary {
        color: var(--text-secondary)
    }

    .u-text-primary {
        color: var(--text-primary)
    }

    .u-text-accent {
        color: var(--text-accent)
    }

    .u-text-warning {
        color: var(--text-warning)
    }

    .u-text-danger {
        color: var(--text-danger)
    }

    .u-text-success {
        color: var(--color-success-green)
    }

    .u-text-center {
        text-align: center
    }

    .u-text-right {
        text-align: right
    }

    .u-gradient-text {
        background: linear-gradient(135deg, var(--color-pure-white) 40%, var(--color-steel-400) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }

    .u-gradient-accent-text {
        background: linear-gradient(135deg, var(--color-pure-white) 20%, var(--color-electric-blue) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }

    .u-sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0
    }

    .u-focus-ring:focus-visible {
        outline: 2px solid var(--color-electric-blue);
        outline-offset: 3px
    }

    .u-overflow-hidden {
        overflow: hidden
    }

    .u-relative {
        position: relative
    }

    .u-inline-flex {
        display: inline-flex;
        align-items: center
    }

    .u-flex-1 {
        flex: 1
    }

    .u-w-full {
        width: 100%
    }

    .u-text-display {
        font-family: var(--font-display);
        font-size: var(--font-size-hero);
        line-height: var(--line-height-display);
        letter-spacing: var(--letter-spacing-display);
        font-weight: var(--font-weight-bold);
        text-wrap: balance
    }

    .u-text-technical {
        font-family: var(--font-mono);
        font-size: var(--font-size-mono);
        line-height: 1.4;
        letter-spacing: var(--letter-spacing-mono);
        font-feature-settings: "tnum" 1, "zero" 1
    }

    .u-text-mono {
        font-family: var(--font-mono)
    }

    .u-truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .u-subgrid {
        display: grid;
        grid-template-columns: subgrid
    }

    .u-inset-4 {
        padding: var(--space-4)
    }

    .u-inset-6 {
        padding: var(--space-6)
    }

    .u-hidden-accessible {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap
    }

    @supports (animation-timeline:view()) {
        .u-motion-reveal {
            animation: reveal-rise linear both;
            animation-timeline: view();
            animation-range: entry 8% cover 28%
        }
    }

    @keyframes reveal-rise {
        from {
            opacity: .35;
            transform: translateY(12px)
        }

        to {
            opacity: 1;
            transform: none
        }
    }

    .u-mt-5 { margin-top: var(--space-5); }
    .u-mt-6 { margin-top: var(--space-6); }
    .u-mt-8 { margin-top: var(--space-8); }
    .u-mb-6 { margin-bottom: var(--space-6); }
    .u-pt-4 { padding-top: var(--space-4); }
    .u-font-bold { font-weight: 700; }
    .c-lifecycle--bid { grid-template-columns: repeat(6, minmax(170px, 1fr)); }
}