@layer components {
    .c-nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 72px;
        z-index: var(--z-header);
        background-color: color-mix(in oklch, var(--color-graphite-950) 82%, transparent);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--border-subtle);
        display: flex;
        align-items: center;
        transition: background-color var(--transition-base), border-color var(--transition-base)
    }

    .c-nav__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
        width: 100%;
        max-width: var(--container-max);
        margin-inline: auto;
        padding-inline: var(--container-gutter)
    }

    .c-nav__identity {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        flex: 0 0 auto
    }

    .c-nav__brand {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        text-decoration: none;
        color: var(--text-primary);

        &:focus-visible {
            outline: 2px solid var(--color-electric-blue);
            outline-offset: 4px;
        }
    }

    .c-nav__brand-svg {
        height: 32px;
        width: auto;
        display: block
    }

    .c-nav__brand-status {
        display: none;
        align-items: center;
        gap: var(--space-2);
        font-family: var(--font-mono);
        font-size: var(--font-size-micro);
        letter-spacing: var(--letter-spacing-caps);
        color: var(--text-muted);
        border-left: 1px solid var(--border-subtle);
        padding-left: var(--space-3);
        white-space: nowrap;

        @media (width >=1366px) {
            display: flex;
        }
    }

    .c-nav__network-label {
        display: none
    }

    .c-nav__status-dot {
        width: 6px;
        height: 6px;
        flex-shrink: 0;
        border-radius: 50%;
        background-color: var(--color-success-green);
        box-shadow: 0 0 8px var(--color-success-green);
        animation: pulse-dot 2.5s infinite ease-in-out
    }

    .c-nav__role-chip {
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
        padding: .18rem .5rem;
        border: 1px solid color-mix(in oklch, var(--color-electric-blue) 42%, transparent);
        color: var(--color-electric-blue);
        background: color-mix(in oklch, var(--color-electric-blue) 10%, transparent);
        font-weight: 600;
        letter-spacing: .1em
    }

    @keyframes pulse-dot {

        0%,
        100% {
            opacity: 1;
            transform: scale(1)
        }

        50% {
            opacity: .4;
            transform: scale(.85)
        }
    }

    .c-nav__links {
        display: none;
        flex: 1 1 auto;
        min-width: 0;

        @media (width >=1200px) {
            display: block;
        }
    }

    .c-nav__list,
    .c-nav__mobile-list {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: var(--space-2);
        margin: 0;
        padding: 0
    }

    .c-nav__link {
        color: var(--text-secondary);
        text-decoration: none;
        font-size: var(--font-size-small);
        font-weight: 500;
        padding: var(--space-1) var(--space-2);
        border-radius: var(--radius-sm);
        white-space: nowrap;
        transition: color var(--transition-fast), background-color var(--transition-fast);
        position: relative
    }

    .c-nav__link:hover,
    .c-nav__link--active {
        color: var(--text-primary)
    }

    .c-nav__link--active::after {
        content: '';
        position: absolute;
        bottom: -16px;
        left: var(--space-2);
        right: var(--space-2);
        height: 2px;
        background-color: var(--color-electric-blue);
        box-shadow: 0 0 10px var(--color-electric-blue)
    }

    .c-nav__actions {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        gap: var(--space-3);

        >.c-btn {
            @media (width <=1199px) {
                display: none;
            }
        }
    }

    .c-nav__mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        inline-size: 44px;
        block-size: 44px;
        background: oklch(0% 0 none / 0);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        color: var(--text-primary);
        cursor: pointer;

        @media (width >=1200px) {
            display: none;
        }
    }

    .c-nav__mobile-drawer {
        display: none;
        position: fixed;
        top: 72px;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--color-graphite-950);
        border-top: 1px solid var(--border-medium);
        padding: var(--space-6);
        flex-direction: column;
        gap: var(--space-4);
        z-index: var(--z-dropdown);
        overflow-y: auto;

        &.is-open {
            display: flex;
        }
    }

    .c-nav__mobile-list {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-4)
    }

    .c-nav__mobile-link {
        font-size: var(--font-size-h3);
        font-weight: 600;
        color: var(--text-secondary);
        text-decoration: none;
        padding-block: var(--space-2);
        border-bottom: 1px solid var(--border-subtle)
    }

    .c-nav__mobile-link:hover,
    .c-nav__mobile-link--active {
        color: var(--color-electric-blue)
    }

    .c-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        font-family: var(--font-sans);
        font-size: var(--font-size-small);
        font-weight: 600;
        letter-spacing: -.01em;
        text-decoration: none;
        padding: .65rem 1.25rem;
        border-radius: var(--radius-sm);
        border: 1px solid oklch(0% 0 none / 0);
        cursor: pointer;
        transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
        white-space: nowrap;
        position: relative;
        user-select: none
    }

    .c-btn--primary {
        background-color: var(--color-electric-blue);
        color: var(--color-graphite-950);
        border-color: var(--color-electric-blue);
        box-shadow: 0 0 16px color-mix(in oklch, var(--color-electric-blue) 40%, transparent);

        &:hover {
            background-color: color-mix(in oklch, var(--color-electric-blue) 88%, var(--color-pure-white));
            box-shadow: 0 0 24px color-mix(in oklch, var(--color-electric-blue) 60%, transparent);
            border-color: color-mix(in oklch, var(--color-electric-blue) 70%, var(--color-pure-white));
        }

        &:active {
            transform: translateY(0);
        }
    }

    .c-btn--secondary {
        background-color: var(--surface-card);
        color: var(--text-primary);
        border-color: var(--border-medium);

        &:hover {
            background-color: var(--surface-card-hover);
            border-color: var(--border-highlight);
            box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-electric-blue) 35%, transparent);
        }
    }

    .c-btn--safety {
        background-color: color-mix(in oklch, var(--color-safety-amber) 15%, transparent);
        color: var(--color-safety-amber);
        border-color: var(--border-safety);

        &:hover {
            background-color: color-mix(in oklch, var(--color-safety-amber) 25%, transparent);
            border-color: var(--color-safety-amber);
            box-shadow: 0 0 16px color-mix(in oklch, var(--color-safety-amber) 30%, transparent);
        }
    }

    .c-btn--ghost {
        background: oklch(0% 0 none / 0);
        color: var(--text-secondary);
        border-color: oklch(0% 0 none / 0);

        &:hover {
            background-color: color-mix(in oklch, var(--color-steel-700) 25%, transparent);
            color: var(--text-primary);
        }
    }

    .c-btn--sm {
        padding: .4rem .85rem;
        font-size: var(--font-size-mono)
    }

    .c-btn--lg {
        padding: .85rem 1.75rem;
        font-size: var(--font-size-body)
    }

    .c-btn--notch {
        clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px))
    }

    .c-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        width: max-content;
        max-width: 100%;
        flex: 0 0 auto;
        justify-self: start;
        align-self: start;
        font-family: var(--font-mono);
        font-size: var(--font-size-micro);
        font-weight: 600;
        letter-spacing: var(--letter-spacing-caps);
        text-transform: uppercase;
        padding: .25rem .65rem;
        border-radius: var(--radius-sm);
        border: 1px solid var(--border-subtle);
        background-color: color-mix(in oklch, var(--color-graphite-900) 80%, transparent);
        color: var(--text-secondary)
    }

    .c-badge--accent {
        border-color: color-mix(in oklch, var(--color-electric-blue) 70%, transparent);
        color: oklch(75.35% 0.139 232.7);
        background-color: color-mix(in oklch, var(--color-electric-blue) 15%, transparent);
        box-shadow: 0 0 12px color-mix(in oklch, var(--color-electric-blue) 25%, transparent)
    }

    .c-badge--safety {
        border-color: color-mix(in oklch, var(--color-safety-amber) 75%, transparent);
        color: oklch(90.52% 0.1657 98.11);
        background-color: color-mix(in oklch, var(--color-safety-amber) 16%, transparent);
        box-shadow: 0 0 12px color-mix(in oklch, var(--color-safety-amber) 25%, transparent)
    }

    .c-badge--danger {
        border-color: color-mix(in oklch, var(--color-redline-red) 70%, transparent);
        color: oklch(71.92% 0.169 13.43);
        background-color: color-mix(in oklch, var(--color-redline-red) 16%, transparent);
        box-shadow: 0 0 12px color-mix(in oklch, var(--color-redline-red) 25%, transparent)
    }

    .c-badge--success {
        border-color: color-mix(in oklch, var(--color-success-green) 70%, transparent);
        color: oklch(87.61% 0.2286 152.4);
        background-color: color-mix(in oklch, var(--color-success-green) 16%, transparent);
        box-shadow: 0 0 12px color-mix(in oklch, var(--color-success-green) 25%, transparent)
    }

    .c-panel {
        position: relative;
        background-color: var(--glass-bg);
        backdrop-filter: var(--glass-filter);
        -webkit-backdrop-filter: var(--glass-filter);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        box-shadow: var(--glass-border);
        padding: var(--space-4);
        overflow: hidden
    }

    .c-panel--crosshair {

        &::before,
        &::after {
            content: '+';
            position: absolute;
            font-family: var(--font-mono);
            font-size: 14px;
            color: var(--color-steel-400);
            opacity: .5;
            pointer-events: none;
        }

        &::before {
            top: 6px;
            left: 8px;
        }

        &::after {
            bottom: 6px;
            right: 8px;
        }
    }

    .c-panel__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: var(--space-3);
        margin-bottom: var(--space-3);
        border-bottom: 1px solid var(--border-subtle)
    }

    .c-panel__spec-tag {
        font-family: var(--font-mono);
        font-size: var(--font-size-micro);
        color: var(--text-muted);
        letter-spacing: var(--letter-spacing-mono)
    }

    .c-matrix-wrapper {
        overflow: clip;
        position: relative;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        background-color: var(--glass-bg);
        backdrop-filter: var(--glass-filter);
        -webkit-backdrop-filter: var(--glass-filter);
        box-shadow: var(--glass-border)
    }

    .c-matrix-table {
        width: 100%;
        border-collapse: collapse;
        font-family: var(--font-mono);
        font-size: var(--font-size-mono);
        white-space: nowrap;

        :is(th, td) {
            padding: .55rem .85rem;
            border-bottom: 1px solid var(--border-subtle);
            border-right: 1px solid var(--border-subtle);
        }

        th {
            background-color: color-mix(in oklch, var(--color-graphite-950) 58%, transparent);
            color: var(--text-primary);
            text-align: left;
            font-weight: 600;
        }

        :is(th:last-child, td:last-child) {
            border-right: none;
        }

        tr:hover td {
            background-color: color-mix(in oklch, var(--surface-card) 50%, transparent);
        }
    }

    .c-matrix-cell--outlier {
        background-color: color-mix(in oklch, var(--color-safety-amber) 15%, transparent) !important;
        color: var(--color-safety-amber);
        font-weight: 600
    }

    .c-matrix-cell--gap {
        background-color: color-mix(in oklch, var(--color-redline-red) 15%, transparent) !important;
        color: var(--color-redline-red);
        font-weight: 600
    }

    .c-matrix-cell--match {
        background-color: color-mix(in oklch, var(--color-success-green) 12%, transparent) !important;
        color: var(--color-success-green)
    }

    .c-tabs {
        display: inline-flex;
        background: var(--surface-base);
        border: 1px solid var(--border-medium);
        border-radius: var(--radius-md);
        padding: 4px;
        gap: 4px
    }

    .c-tab-btn {
        font-family: var(--font-mono);
        font-size: var(--font-size-mono);
        color: var(--text-muted);
        background: oklch(0% 0 none / 0);
        border: none;
        padding: .5rem 1rem;
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);

        &:hover {
            color: var(--text-primary);
        }

        &.is-active {
            background: var(--surface-card);
            color: var(--color-electric-blue);
            box-shadow: 0 2px 8px oklch(0% 0 0 / 0.4);
        }
    }

    .c-console-window {
        position: relative;
        overflow: hidden;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        background-color: var(--glass-bg);
        backdrop-filter: var(--glass-filter);
        -webkit-backdrop-filter: var(--glass-filter);
        box-shadow: var(--glass-border)
    }

    .c-console-window__head {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        padding: .65rem 1.25rem;
        background: color-mix(in oklch, var(--surface-base) 90%, transparent);
        border-bottom: 1px solid var(--border-medium);
        font-family: var(--font-mono);
        font-size: var(--font-size-micro)
    }

    .c-console-window__head-left {
        display: inline-flex;
        align-items: center;
        gap: 8px
    }

    .c-console-window__path {
        color: var(--text-muted);
        font-weight: 500;
        letter-spacing: .04em;

        strong {
            color: var(--color-pure-white);
        }
    }

    .c-console-window__head-right {
        display: inline-flex;
        align-items: center;
        gap: var(--space-3)
    }

    .c-console-window__tabs {
        display: flex;
        flex-wrap: wrap;
        background: color-mix(in oklch, var(--surface-card) 60%, transparent);
        border-bottom: 1px solid var(--border-medium);
        padding: 0 var(--space-3);
        gap: 2px
    }

    .c-console-tab {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: .75rem 1.15rem;
        background: oklch(0% 0 none / 0);
        border: none;
        border-bottom: 2px solid oklch(0% 0 none / 0);
        color: var(--text-muted);
        font-family: var(--font-mono);
        font-size: var(--font-size-mono);
        font-weight: 600;
        letter-spacing: .04em;
        cursor: pointer;
        transition: all .15s ease;
        text-transform: uppercase;

        &:hover {
            color: var(--color-pure-white);
            background: color-mix(in oklch, var(--surface-panel) 40%, transparent);
        }

        &.is-active {
            color: var(--color-pure-white);
            border-bottom-color: var(--color-electric-blue);
            background: color-mix(in oklch, var(--surface-panel) 80%, transparent);
        }
    }

    .c-console-tab__badge {
        padding: 1px 6px;
        border-radius: var(--radius-xs);
        font-size: .62rem;
        font-weight: 700;
        background: color-mix(in oklch, var(--color-electric-blue) 15%, transparent);
        color: var(--color-electric-blue);
        border: 1px solid color-mix(in oklch, var(--color-electric-blue) 35%, transparent)
    }

    .c-console-window__toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        padding: .65rem 1.25rem;
        background: color-mix(in oklch, var(--surface-base) 40%, transparent);
        border-bottom: 1px solid var(--border-subtle)
    }

    .c-console-window__body {
        overflow-x: auto;
        background: var(--surface-panel);
        min-height: 280px
    }

    .c-console-panel {
        display: none;

        &.is-active {
            display: block;
        }
    }

    .c-console-window__foot {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        padding: .65rem 1.25rem;
        background: color-mix(in oklch, var(--surface-base) 85%, transparent);
        border-top: 1px solid var(--border-medium);
        font-family: var(--font-mono);
        font-size: var(--font-size-micro)
    }

    .c-pqq-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1px;
        background: var(--border-subtle)
    }

    .c-pqq-card {
        background: var(--surface-panel);
        padding: var(--space-4);
        display: flex;
        flex-direction: column;
        gap: var(--space-3)
    }

    .c-pqq-card__head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: var(--space-2)
    }

    .c-pqq-card__title {
        font-size: .95rem;
        font-weight: 700;
        color: var(--color-pure-white)
    }

    .c-pqq-card__vendor {
        font-family: var(--font-mono);
        font-size: .68rem;
        color: var(--text-muted)
    }

    .c-pqq-card__list {
        display: flex;
        flex-direction: column;
        gap: 6px;
        font-family: var(--font-mono);
        font-size: .72rem
    }

    .c-pqq-card__item {
        display: flex;
        justify-content: space-between;
        padding: 4px 0;
        border-bottom: 1px solid color-mix(in oklch, var(--border-subtle) 40%, transparent)
    }

    .c-pqq-card__item-lbl {
        color: var(--text-muted)
    }

    .c-pqq-card__item-val {
        color: var(--text-primary);
        font-weight: 600
    }

    .c-audit-ledger {
        display: flex;
        flex-direction: column
    }

    .c-audit-row {
        display: grid;
        grid-template-columns: 150px 140px 1fr 140px auto;
        align-items: center;
        gap: var(--space-3);
        padding: .75rem 1.25rem;
        border-bottom: 1px solid var(--border-subtle);
        font-family: var(--font-mono);
        font-size: .72rem;
        transition: background .1s ease;

        &:hover {
            background: color-mix(in oklch, var(--color-electric-blue) 5%, transparent);
        }

        &:last-child {
            border-bottom: none;
        }

        @media (width <=767px) {
            grid-template-columns: 1fr;
            gap: 4px;
        }
    }

    .c-audit-time {
        color: var(--text-muted)
    }

    .c-audit-event {
        color: var(--color-pure-white);
        font-weight: 700
    }

    .c-audit-desc {
        color: var(--text-secondary)
    }

    .c-audit-hash {
        color: var(--text-muted);
        font-size: .65rem
    }

    .c-comparison-table-wrap {
        overflow-x: auto;
        overflow-y: clip;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        background-color: var(--glass-bg);
        backdrop-filter: var(--glass-filter);
        -webkit-backdrop-filter: var(--glass-filter);
        box-shadow: var(--glass-border)
    }

    .c-comparison-table {
        width: 100%;
        border-collapse: collapse;
        font-family: var(--font-sans);

        :is(th, td) {
            padding: 1.1rem 1.35rem;
            border-bottom: 1px solid var(--border-subtle);
            text-align: left;
            vertical-align: top;
        }

        thead th {
            font-family: var(--font-mono);
            font-size: var(--font-size-mono);
            text-transform: uppercase;
            letter-spacing: .05em;
            background: color-mix(in oklch, var(--surface-base) 88%, transparent);
            color: var(--text-muted);

            &.c-comparison-highlight {
                background: color-mix(in oklch, var(--color-electric-blue) 14%, transparent);
                color: var(--color-electric-blue);
                border-inline: 1px solid color-mix(in oklch, var(--color-electric-blue) 35%, transparent);
                border-top: 2px solid var(--color-electric-blue);
            }
        }

        tbody td.c-comparison-highlight {
            background: color-mix(in oklch, var(--color-electric-blue) 6%, transparent);
            border-inline: 1px solid color-mix(in oklch, var(--color-electric-blue) 22%, transparent);
            font-weight: 600;
            color: var(--color-pure-white);
        }

        tr:hover td {
            background-color: color-mix(in oklch, var(--surface-card) 40%, transparent);

            &.c-comparison-highlight {
                background-color: color-mix(in oklch, var(--color-electric-blue) 10%, transparent);
            }
        }
    }

    .c-comparison-feature {
        display: flex;
        flex-direction: column;
        gap: 3px;

        strong {
            color: var(--color-pure-white);
            font-size: .95rem;
        }

        span {
            font-size: .78rem;
            color: var(--text-muted);
        }
    }

    .c-range-wrapper {
        display: flex;
        flex-direction: column;
        gap: var(--space-2)
    }

    .c-range-label-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: var(--font-mono);
        font-size: var(--font-size-small)
    }

    .c-range-input {
        appearance: none;
        -webkit-appearance: none;
        width: 100%;
        height: 8px;
        background: var(--surface-card);
        border: 1px solid var(--border-medium);
        border-radius: var(--radius-pill);
        outline: none;

        &::-webkit-slider-thumb {
            appearance: none;
            -webkit-appearance: none;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: var(--color-electric-blue);
            cursor: pointer;
            border: 2px solid var(--color-graphite-950);
            box-shadow: 0 0 12px var(--color-electric-blue);
            transition: transform var(--transition-fast);

            &:hover {
                transform: scale(1.15);
            }
        }

        &::-moz-range-thumb {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: var(--color-electric-blue);
            cursor: pointer;
            border: 2px solid var(--color-graphite-950);
            box-shadow: 0 0 12px var(--color-electric-blue);
        }
    }

    .c-form-group {
        display: flex;
        flex-direction: column;
        gap: var(--space-2)
    }

    .c-form-label {
        font-family: var(--font-mono);
        font-size: var(--font-size-mono);
        font-weight: 600;
        letter-spacing: var(--letter-spacing-caps);
        text-transform: uppercase;
        color: var(--text-muted);
        display: flex;
        align-items: center;
        justify-content: space-between
    }

    .c-input,
    .c-select,
    .c-textarea {
        --control-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        width: 100%;
        background-color: color-mix(in oklch, var(--color-graphite-950) 55%, var(--surface-card));
        border: 1px solid var(--border-medium);
        border-radius: var(--radius-sm);
        min-height: 2.75rem;
        padding: .5rem .75rem;
        font-family: var(--font-sans);
        font-size: var(--font-size-body);
        color: var(--text-primary);
        box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.05);
        caret-color: var(--color-electric-blue);
        accent-color: var(--color-electric-blue);
        transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast)
    }

    :is(.c-input, .c-select, .c-textarea):hover {
        border-color: var(--border-highlight);
        background-color: var(--surface-card)
    }

    .c-input:focus-visible,
    .c-select:focus-visible,
    .c-textarea:focus-visible,
    .c-form-group:focus-within .c-input,
    .c-form-group:focus-within .c-select,
    .c-form-group:focus-within .c-textarea {
        border-color: var(--color-electric-blue);
        background-color: var(--surface-card);
        box-shadow: inset 3px 0 0 var(--color-electric-blue), 0 0 0 1px color-mix(in oklch, var(--color-electric-blue) 70%, transparent), 0 0 18px color-mix(in oklch, var(--color-electric-blue) 22%, transparent)
    }

    .c-input:user-invalid,
    .c-select:user-invalid,
    .c-textarea:user-invalid,
    .c-input[aria-invalid='true'],
    .c-select[aria-invalid='true'],
    .c-textarea[aria-invalid='true'] {
        border-color: var(--color-redline-red);
        box-shadow: inset 3px 0 0 var(--color-redline-red), 0 0 0 1px color-mix(in oklch, var(--color-redline-red) 55%, transparent)
    }

    .c-select {
        appearance: none;
        position: relative;
        color-scheme: dark;
        cursor: pointer;
        padding-inline-end: 2.5rem;
        background-image: var(--control-chevron);
        background-repeat: no-repeat;
        background-position: right .85rem center;
        background-size: 1rem 1rem;

        &:open {
            border-color: var(--color-electric-blue);
        }

        @supports (appearance:base-select) {
            background-image: none;

            &,
            &::picker(select) {
                appearance: base-select;
            }

            &::picker-icon {
                display: none;
                content: none;
            }

            &::after {
                content: '';
                position: absolute;
                inset-block-start: 50%;
                inset-inline-end: .85rem;
                inline-size: 1rem;
                block-size: 1rem;
                background-image: var(--control-chevron);
                background-repeat: no-repeat;
                background-position: center;
                background-size: contain;
                pointer-events: none;
                transform: translateY(-50%);
                transition: transform var(--transition-fast);
            }

            &:open::after {
                transform: translateY(-50%) rotate(180deg);
            }

            &::picker(select) {
                color-scheme: dark;
                margin-block-start: var(--space-2);
                padding: var(--space-2);
                border: 1px solid var(--border-highlight);
                background: color-mix(in oklch, var(--color-graphite-900) 94%, var(--color-navy-950));
                box-shadow: 0 18px 48px oklch(0 0 0 / .45), inset 0 1px 0 oklch(100% 0 0 / 0.06);
            }

            option {
                display: flex;
                align-items: center;
                gap: var(--space-3);
                padding: .7rem .85rem;
                border: 1px solid oklch(0% 0 none / 0);
                color: var(--text-secondary);
                background: oklch(0% 0 none / 0);
                cursor: pointer;

                &:is(:hover, :focus, :checked) {
                    color: var(--text-primary);
                    background: color-mix(in oklch, var(--color-electric-blue) 16%, var(--surface-card));
                    border-color: color-mix(in oklch, var(--color-electric-blue) 35%, transparent);
                }

                &::checkmark {
                    content: '';
                    width: .55rem;
                    height: .35rem;
                    color: var(--color-electric-blue);
                    border-inline-start: 2px solid currentColor;
                    border-block-end: 2px solid currentColor;
                    transform: rotate(-45deg);
                    order: 1;
                    margin-inline-start: auto;
                }
            }
        }
    }

    .c-textarea {
        min-block-size: 8rem;
        max-block-size: 24rem;
        field-sizing: content;
        resize: vertical;
        font-family: var(--font-mono);
        font-size: var(--font-size-small);
        line-height: 1.7;
        background-image: repeating-linear-gradient(to bottom, transparent 0 1.65em, color-mix(in oklch, var(--color-steel-700) 55%, transparent) 1.65em calc(1.65em + 1px));
        background-attachment: local
    }

    .c-fieldset {
        position: relative;
        display: grid;
        gap: var(--space-3);
        margin: 0;
        padding: var(--space-4) var(--space-3) var(--space-3);
        border: 1px solid var(--border-medium);
        background: linear-gradient(180deg, color-mix(in oklch, var(--color-electric-blue) 7%, transparent), transparent 42%), color-mix(in oklch, var(--surface-panel) 82%, transparent);
        box-shadow: var(--glass-border)
    }

    .c-fieldset::before,
    .c-fieldset::after {
        content: '';
        position: absolute;
        width: 12px;
        height: 12px;
        pointer-events: none;
        border: 2px solid var(--color-electric-blue)
    }

    .c-fieldset::before {
        top: -13px;
        left: -1px;
        border-right: 0;
        border-bottom: 0
    }

    .c-fieldset::after {
        right: -1px;
        bottom: -1px;
        border-left: 0;
        border-top: 0
    }

    .c-fieldset__legend {
        float: none;
        width: fit-content;
        max-width: 100%;
        padding: .15rem .55rem;
        border: 1px solid var(--border-highlight);
        background: var(--surface-base);
        color: var(--color-electric-blue);
        font-family: var(--font-mono);
        font-size: var(--font-size-micro);
        font-weight: 700;
        letter-spacing: var(--letter-spacing-caps);
        text-transform: uppercase
    }

    .c-pipeline-track {
        display: flex;
        position: relative;
        gap: var(--space-4);
        overflow-x: auto;
        padding-block: var(--space-4)
    }

    .c-pipeline-step {
        flex: 0 0 280px;
        background: var(--surface-panel);
        border: 1px solid var(--border-medium);
        border-radius: var(--radius-md);
        padding: var(--space-4);
        position: relative;
        transition: border-color var(--transition-fast), transform var(--transition-fast);

        &:hover {
            border-color: var(--border-highlight);
            box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-electric-blue) 40%, transparent);
        }
    }

    .c-pipeline-step__num {
        font-family: var(--font-mono);
        font-size: var(--font-size-micro);
        color: var(--color-electric-blue);
        margin-bottom: var(--space-2)
    }

    .c-pipeline-step__title {
        font-size: var(--font-size-lead);
        font-weight: 600;
        margin-bottom: var(--space-2)
    }

    .c-footer {
        background-color: var(--color-graphite-950);
        border-top: 1px solid var(--border-medium);
        overflow: visible;
        padding-top: var(--space-6);
        padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom, 0));

        @media (width <=767px) {
            padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0));
        }
    }

    .c-footer__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-5);
        margin-bottom: var(--space-5);

        @media (width >=768px) {
            grid-template-columns: 1.5fr minmax(0, 3fr);
        }
    }

    .c-footer__directories {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-5);

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

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

    .c-footer__col-title {
        font-family: var(--font-mono);
        font-size: var(--font-size-mono);
        font-weight: 600;
        letter-spacing: var(--letter-spacing-caps);
        text-transform: uppercase;
        color: var(--text-primary);
        margin-bottom: var(--space-2)
    }

    .c-footer__list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: var(--space-2)
    }

    .c-footer__link {
        color: var(--text-secondary);
        text-decoration: none;
        font-size: var(--font-size-small);
        transition: color var(--transition-fast);

        &:hover {
            color: var(--color-electric-blue);
        }
    }

    .c-footer__compliance-bar {
        border-top: 1px solid var(--border-subtle);
        padding-top: var(--space-3);
        display: grid;
        gap: var(--space-4);
        justify-items: start;
        font-family: var(--font-mono);
        font-size: var(--font-size-micro);
        color: var(--text-muted);

        @media (width >=768px) {
            grid-template-columns: 1fr auto;
            align-items: center;
        }
    }

    .c-footer__compliance-badges {
        display: block;
        max-width: 100%;

        img {
            display: block;
            width: min(220px, 100%);
            height: auto;
            aspect-ratio: 360 / 120;
            opacity: .86;
        }
    }

    .m-site {
        background-color: var(--surface-base);
        color: var(--text-primary);
        letter-spacing: var(--letter-spacing-body);

        h1,
        h2,
        h3 {
            font-family: var(--font-display);
            letter-spacing: var(--letter-spacing-heading);
            text-wrap: balance;
            font-weight: var(--font-weight-bold);
        }

        h1 {
            letter-spacing: var(--letter-spacing-display);
        }

        p {
            text-wrap: pretty;
        }

        main {
            overflow: clip;
            scroll-margin-block-start: 88px;
        }

        >main,
        >.c-footer {
            position: relative;
            z-index: 1;
        }
    }

    .c-skip-link {
        position: fixed;
        top: var(--space-3);
        left: var(--space-3);
        z-index: calc(var(--z-toast) + 1);
        padding: var(--space-3) var(--space-4);
        background: var(--color-electric-blue);
        color: var(--surface-base);
        font-weight: 700;
        transform: translateY(-180%);

        &:not(:focus-visible) {
            width: 1px;
            height: 1px;
            padding: 0;
            overflow: hidden;
            clip-path: inset(50%);
            white-space: nowrap;
            border: 0;
        }

        &:focus-visible {
            width: auto;
            height: auto;
            overflow: visible;
            clip-path: none;
            transform: none;
        }
    }

    .c-form-errors {
        margin-block-end: var(--space-6);
        padding: var(--space-4) var(--space-5);
        border: 1px solid color-mix(in oklch, var(--color-redline-red) 70%, var(--border-medium));
        border-inline-start: 4px solid var(--color-redline-red);
        background: color-mix(in oklch, var(--color-redline-red) 10%, var(--surface-panel));

        h3 {
            margin-block-end: var(--space-2);
            color: var(--text-primary);
            font-size: var(--font-size-body);
        }

        ul {
            margin: 0;
            padding-inline-start: var(--space-5);
        }

        a {
            color: var(--text-primary);
            text-decoration: underline;
            text-underline-offset: .16em;
        }
    }

    .c-nav__backdrop {
        position: fixed;
        inset: 72px 0 0;
        z-index: calc(var(--z-dropdown) - 1);
        background: oklch(0% 0 0 / 0.72);
        backdrop-filter: blur(6px)
    }

    .c-nav__backdrop[hidden],
    .c-nav__mobile-drawer[hidden] {
        display: none
    }

    .c-nav__mobile-actions {
        margin-top: var(--space-6)
    }

    .c-section {
        position: relative;
        padding-block: var(--space-8);
        border-top: 1px solid var(--border-subtle)
    }

    .c-section--raised {
        background: color-mix(in oklch, var(--surface-panel) 84%, transparent)
    }

    .c-section--ink {
        background: var(--color-navy-950)
    }

    .c-section__index {
        font-family: var(--font-mono);
        font-size: var(--font-size-micro);
        color: var(--color-electric-blue)
    }

    .c-section-head {
        display: grid;
        gap: var(--space-2);
        margin-bottom: var(--space-4);
        max-width: 920px;

        h2 {
            max-width: 26ch;
        }
    }

    .c-command-hero {
        position: relative;
        min-height: min(780px, 100svh);
        display: grid;
        align-items: center;
        padding-top: 72px;
        isolation: isolate;
        border-bottom: 1px solid var(--border-medium);
        overflow: hidden;

        canvas {
            width: 100%;
            height: 100%;
            display: block;
        }

        h1 {
            max-width: 15ch;
            font-family: var(--font-display);
            font-size: var(--font-size-hero);
            font-weight: var(--font-weight-bold);
            line-height: var(--line-height-display);
            letter-spacing: var(--letter-spacing-display);
            color: var(--text-primary);
            text-shadow: 0 0 32px color-mix(in oklch, var(--color-electric-blue) 28%, transparent);
        }

        &>.c-bolt {
            z-index: 4;
        }

        &> :is(.c-bolt--tl, .c-bolt--tr) {
            top: 84px;
        }

        &> :is(.c-bolt--tl, .c-bolt--bl) {
            left: 12px;
        }

        &> :is(.c-bolt--tr, .c-bolt--br) {
            right: 12px;
        }

        &> :is(.c-bolt--bl, .c-bolt--br) {
            bottom: 14px;
        }
    }

    .c-command-hero__scene {
        position: absolute;
        inset: 72px 0 0;
        z-index: 1;
        overflow: hidden;
        background: radial-gradient(circle at 74% 45%, color-mix(in oklch, var(--color-electric-blue) 14%, transparent) 0%, color-mix(in oklch, var(--color-navy-950) 80%, transparent) 45%, var(--surface-base) 85%);

        &::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: linear-gradient(90deg, var(--surface-base) 0%, color-mix(in oklch, var(--surface-base) 88%, transparent) 40%, transparent 72%), linear-gradient(0deg, var(--surface-base) 0%, transparent 38%), radial-gradient(ellipse at 78% 42%, color-mix(in oklch, var(--color-electric-blue) 22%, transparent), transparent 42%);
            background-blend-mode: multiply, multiply, screen;
            mix-blend-mode: multiply;
        }
    }

    .c-command-hero__content {
        position: relative;
        z-index: 3;
        width: min(620px, 100%);
        max-width: 52vw;
        padding-block: var(--space-6);

        >.c-badge,
        >.c-titleblock {
            align-self: start;
            width: max-content;
            max-width: 100%;
        }
    }

    .c-command-hero__lead {
        max-width: 62ch
    }

    .c-command-hero__registry {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: var(--space-5);
        border-block: 1px solid var(--border-medium)
    }

    .c-command-hero__datum {
        padding: var(--space-3);
        border-right: 1px solid var(--border-medium);
        font-family: var(--font-mono);
        font-size: var(--font-size-micro);
        color: var(--text-muted);

        &:last-child {
            border-right: 0;
        }
    }

    .c-ecosystem-controls {
        position: absolute;
        z-index: 3;
        right: var(--container-gutter);
        bottom: var(--space-6);
        width: min(320px, calc(100% - 2 * var(--container-gutter)));
        padding: var(--space-3) var(--space-4);
        border: 1px solid var(--border-highlight);
        border-radius: var(--radius-md);
        background: color-mix(in oklch, var(--color-graphite-950) 88%, transparent);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        box-shadow: 0 16px 36px oklch(0 0 0 / .5), inset 0 1px 0 oklch(1 0 0 / .12)
    }

    .c-ecosystem-controls__nodes {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
        margin-top: var(--space-3)
    }

    .c-ecosystem-node {
        min-height: 38px;
        padding: var(--space-2) var(--space-3);
        background: var(--surface-panel);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-sm);
        color: var(--text-secondary);
        font-family: var(--font-mono);
        font-size: var(--font-size-micro);
        text-align: left;
        cursor: pointer;
        transition: all var(--transition-fast);

        &:is(:hover, [aria-pressed='true']) {
            background: color-mix(in oklch, var(--surface-card) 75%, var(--color-electric-blue) 25%);
            border-color: var(--color-electric-blue);
            color: var(--color-pure-white);
            box-shadow: 0 0 12px color-mix(in oklch, var(--color-electric-blue) 30%, transparent);
        }
    }

    .c-feature-row {
        display: grid;
        gap: var(--space-8);
        padding-block: var(--space-4);
        border-top: 1px solid var(--border-medium)
    }

    .c-feature-row__meta {
        font-family: var(--font-mono);
        font-size: var(--font-size-micro);
        color: var(--color-electric-blue)
    }

    .c-feature-row__body {
        max-width: 68ch;
        font-size: var(--font-size-body);
        line-height: var(--line-height-body);
        color: var(--text-secondary);

        .c-feature-row--qa & {
            font-size: var(--font-size-lead);
            color: var(--text-secondary);
        }
    }

    .c-feature-row--qa .c-feature-row__question {
        font-family: var(--font-sans);
        font-size: var(--font-size-h3);
        font-weight: var(--font-weight-semibold);
        line-height: var(--line-height-heading);
        letter-spacing: var(--letter-spacing-heading);
        color: var(--text-primary);
        text-wrap: pretty
    }

    .c-role-console {
        display: grid;
        border: 1px solid var(--border-medium);
        background: var(--surface-panel);
        container-type: inline-size
    }

    .c-role-console__switch {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-bottom: 1px solid var(--border-medium);

        button {
            min-height: 54px;
            padding: var(--space-3);
            color: var(--text-secondary);
            border-right: 1px solid var(--border-medium);
            font-family: var(--font-mono);

            &:last-child {
                border-right: 0;
            }

            &[aria-selected='true'] {
                color: var(--color-electric-blue);
                background: color-mix(in oklch, var(--color-electric-blue) 14%, transparent);
                box-shadow: inset 0 -2px 0 var(--color-electric-blue);
            }
        }
    }

    .c-role-console__pane {
        display: grid;
        gap: var(--space-4);
        padding: var(--space-4);

        &[hidden] {
            display: none;
        }
    }

    .c-role-console__metrics {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1px;
        background: var(--border-subtle)
    }

    .c-role-console__metric {
        min-width: 0;
        padding: var(--space-4);
        background: var(--surface-base);

        strong {
            display: block;
            margin-top: var(--space-2);
            color: var(--text-primary);
        }
    }

    .c-lifecycle {
        display: grid;
        grid-template-columns: repeat(7, minmax(150px, 1fr));
        overflow-x: auto;
        padding-bottom: var(--space-3)
    }

    .c-lifecycle__step {
        position: relative;
        min-height: 9.5rem;
        padding: var(--space-4);
        border-block: 1px solid var(--border-subtle);
        border-right: 1px solid var(--border-subtle);
        background-color: var(--glass-bg);

        &:first-child {
            border-left: 1px solid var(--border-medium);
        }

        &::after {
            content: '';
            position: absolute;
            top: 43px;
            right: -5px;
            z-index: 2;
            width: 9px;
            aspect-ratio: 1;
            rotate: 45deg;
            background: var(--color-electric-blue);
        }

        &:last-child::after {
            display: none;
        }

        p {
            margin-top: var(--space-2);
            color: var(--text-muted);
            font-size: var(--font-size-small);
        }

        &:is(:hover, :focus-within) {
            background: color-mix(in oklch, var(--color-electric-blue) 10%, var(--surface-panel));
            z-index: 2;
        }
    }

    .c-engine-console {
        display: grid;
        border: 1px solid var(--border-medium);
        background: var(--surface-panel)
    }

    .c-engine-console__rail {
        display: flex;
        overflow-x: auto;
        border-bottom: 1px solid var(--border-medium)
    }

    .c-engine-console__tab {
        flex: 1 0 170px;
        min-height: 52px;
        padding: var(--space-3);
        color: var(--text-muted);
        border-right: 1px solid var(--border-medium);
        font-family: var(--font-mono);
        font-size: var(--font-size-micro);
        text-align: left;

        &[aria-selected='true'] {
            color: var(--color-electric-blue);
            background: color-mix(in oklch, var(--color-electric-blue) 11%, var(--surface-panel));
        }
    }

    .c-engine-console__stage {
        display: grid;
        gap: var(--space-4);
        min-height: 0;
        padding: var(--space-4);
        grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
        align-items: start;

        &[hidden] {
            display: none;
        }
    }

    .c-blueprint-diagram {
        border: 1px solid var(--border-medium);
        background: color-mix(in oklch, var(--color-navy-950) 88%, transparent);
        padding: var(--space-4);

        img {
            width: 100%;
        }
    }

    .c-journey {
        --journey-step: 0;
        --journey-progress: 0;
        --journey-marker: 3.35rem;
        display: grid;
        gap: var(--space-3);
        padding: var(--space-4);
        background: radial-gradient(120% 80% at 8% 0%, color-mix(in oklch, var(--color-electric-blue) 12%, transparent), transparent 46%), var(--surface-panel)
    }

    .c-journey__legend {
        display: flex;
        justify-content: space-between;
        gap: var(--space-4);
        font-family: var(--font-mono);
        font-size: var(--font-size-micro);
        letter-spacing: var(--letter-spacing-caps);
        color: var(--text-muted)
    }

    .c-journey__board {
        position: relative;
        overflow: visible;
        padding-block: 3.25rem 4.5rem
    }

    .c-journey__map {
        position: relative
    }

    .c-journey__road {
        display: block;
        width: 100%;
        height: auto;
        overflow: visible
    }

    .c-journey__asphalt-shadow,
    .c-journey__asphalt,
    .c-journey__asphalt-inner,
    .c-journey__centerline,
    .c-journey__progress {
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    .c-journey__asphalt-shadow {
        stroke: oklch(0% 0 0 / 0.42);
        stroke-width: 78;
        transform: translate(0, 9px)
    }

    .c-journey__asphalt {
        stroke: url(#journey-asphalt);
        stroke-width: 68
    }

    .c-journey__asphalt-inner {
        stroke: oklch(25.46% 0.0273 260);
        stroke-width: 56
    }

    .c-journey__centerline {
        stroke: color-mix(in oklch, var(--color-pure-white) 72%, var(--color-electric-blue));
        stroke-width: 2.4;
        stroke-dasharray: 16 14;
        opacity: .72
    }

    .c-journey__progress {
        stroke: var(--color-electric-blue);
        stroke-width: 5;
        stroke-dasharray: 0 4000;
        filter: drop-shadow(0 0 8px color-mix(in oklch, var(--color-electric-blue) 70%, transparent));
        transition: stroke-dasharray 520ms var(--ease-out-expo)
    }

    .c-journey__stages {
        position: absolute;
        inset: 0;
        margin: 0;
        list-style: none
    }

    .c-journey__stage {
        position: absolute;
        left: var(--x);
        top: var(--y);
        width: 11.75rem;
        translate: -50% 0;
        z-index: 1
    }

    .c-journey__trigger {
        display: grid;
        justify-items: center;
        gap: 0;
        width: 100%;
        color: var(--text-secondary);
        text-align: center;

        &.is-passed .c-journey__marker {
            border-color: var(--color-electric-blue);
            color: var(--color-electric-blue);
            box-shadow: 0 0 18px color-mix(in oklch, var(--color-electric-blue) 32%, transparent);
        }

        &:hover .c-journey__marker {
            transform: translateY(-2px);
            border-color: var(--color-electric-blue);
        }

        &[aria-pressed='true'] {
            .c-journey__marker {
                border-color: var(--color-safety-amber);
                background: var(--color-safety-amber);
                color: var(--surface-base);
                box-shadow: 0 0 0 4px color-mix(in oklch, var(--color-safety-amber) 30%, transparent), 0 0 26px color-mix(in oklch, var(--color-safety-amber) 45%, transparent);
            }

            .c-journey__copy {
                border-color: var(--border-highlight);
            }
        }
    }

    .c-journey__pin {
        display: grid;
        place-items: center;
        translate: 0 -50%
    }

    .c-journey__marker {
        display: grid;
        place-items: center;
        width: var(--journey-marker);
        aspect-ratio: 1;
        border: 2px solid var(--color-steel-400);
        border-radius: 50%;
        background: var(--surface-base);
        color: var(--text-primary);
        font-family: var(--font-mono);
        font-size: var(--font-size-mono);
        font-weight: 700;
        box-shadow: 0 10px 20px oklch(0% 0 0 / 0.38);
        transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast)
    }

    .c-journey__copy {
        display: grid;
        gap: .15rem;
        margin-top: 1.65rem;
        padding: .4rem .6rem;
        border: 1px solid var(--border-medium);
        background: color-mix(in oklch, var(--surface-base) 92%, transparent);

        .c-journey__stage {
            &[data-copy='above'] & {
                position: absolute;
                bottom: calc(100% + 3.5rem);
                margin-top: 0;
            }

            &[data-copy='start'] & {
                position: absolute;
                right: calc(50% + 3.6rem);
                top: 50%;
                margin-top: 0;
                translate: 0 -50%;
                text-align: end;
            }

            &[data-copy='end'] & {
                position: absolute;
                left: calc(50% + 3.6rem);
                top: 50%;
                margin-top: 0;
                translate: 0 -50%;
                text-align: start;
            }
        }
    }

    .c-journey__label {
        font-weight: 700;
        color: var(--text-primary);
        text-wrap: balance
    }

    .c-journey__output {
        color: var(--text-muted);
        font-family: var(--font-mono);
        font-size: var(--font-size-micro);
        letter-spacing: var(--letter-spacing-caps);
        text-transform: uppercase
    }

    .c-journey__drawer {
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        align-items: center;
        gap: var(--space-4);
        padding: var(--space-4);
        border: 1px solid var(--border-highlight);
        background: color-mix(in oklch, var(--surface-base) 78%, transparent);
        box-shadow: inset 3px 0 0 var(--color-electric-blue);

        strong {
            display: block;
            margin-top: var(--space-1);
        }
    }

    .c-page-hero {
        position: relative;
        padding-block: calc(76px + var(--space-6)) var(--space-8);
        border-bottom: 1px solid var(--border-medium);
        background-color: oklch(14% 0.04 240.1 / 0.36);
        background-image: radial-gradient(ellipse 75% 55% at 50% -5%, color-mix(in oklch, var(--color-electric-blue) 16%, transparent) 0%, transparent 70%), radial-gradient(circle at 90% 15%, color-mix(in oklch, oklch(.69 .2 238.41 / .6) 10%, transparent) 0%, transparent 45%), repeating-linear-gradient(90deg, transparent 0 79px, color-mix(in oklch, var(--border-subtle) 35%, transparent) 80px), repeating-linear-gradient(0deg, transparent 0 79px, color-mix(in oklch, var(--border-subtle) 35%, transparent) 80px);
        background-blend-mode: multiply, multiply, normal, normal;
        overflow: hidden;

        h1 {
            max-width: 20ch;
            font-family: var(--font-display);
            font-size: var(--font-size-h1);
            font-weight: var(--font-weight-bold);
            line-height: var(--line-height-display);
            letter-spacing: var(--letter-spacing-display);
            color: var(--color-pure-white);
        }
    }

    .c-metal-film {
        display: none;

        @media (forced-colors:active) {
            display: none;
        }
    }

    .c-bolt {
        --grain-fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
        position: absolute;
        width: 18px;
        height: 18px;
        z-index: 6;
        pointer-events: none;
        border-radius: 50%;
        background-image: radial-gradient(circle at 30% 24%, oklch(1 0 0 / .92), transparent 42%), var(--grain-fine), repeating-conic-gradient(from 0deg, #8a98a6 0deg 2.4deg, #3d4a56 2.4deg 4deg, #9aabba 4deg 6deg, #4a5864 6deg 8deg), radial-gradient(circle at 50% 42%, #9aabba 0%, #56656f 55%, #1b232c 100%);
        background-blend-mode: screen, soft-light, soft-light, normal;
        background-size: cover, 140px 140px, cover, cover;
        box-shadow: inset 0 -2px 3px oklch(0 0 0 / .65), inset 0 1.5px 2px oklch(1 0 0 / .5), 0 2px 3px oklch(0 0 0 / .7), 0 0 0 1px oklch(0% 0 0 / 0.8);

        &::after {
            content: '';
            position: absolute;
            inset: 28%;
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            background: radial-gradient(circle at 38% 32%, #333f49 0%, #0c1114 75%);
            box-shadow: inset 0 1px 2px oklch(0 0 0 / .9), inset 0 -1px 0 oklch(1 0 0 / .06), 0 1px 0 oklch(100% 0 0 / 0.14);
        }

        @media (forced-colors:active) {
            background: CanvasText;
            box-shadow: none;

            &::after {
                background: Canvas;
                box-shadow: none;
            }
        }
    }

    .c-bolt--tl {
        top: 7px;
        left: 7px;
        rotate: 24deg
    }

    .c-bolt--tr {
        top: 7px;
        right: 7px;
        rotate: -62deg
    }

    .c-bolt--bl {
        bottom: 7px;
        left: 7px;
        rotate: 115deg
    }

    .c-bolt--br {
        bottom: 7px;
        right: 7px;
        rotate: 45deg
    }

    .c-page-hero__board {
        position: relative;
        display: grid;
        overflow: hidden;
        isolation: isolate;
        border: 1px solid oklch(44.3% 0.0248 232.7);
        border-radius: var(--radius-md);
        background-color: var(--metal-face);
        background-image: var(--grain-brushed), var(--metal-sheen), var(--metal-brush), var(--metal-groove), linear-gradient(180deg, var(--metal-face-hi) 0%, var(--metal-face) 48%, var(--metal-face-lo) 100%);
        background-blend-mode: soft-light, normal, normal, normal, normal;
        background-size: 300px 300px, auto, auto, auto, auto;
        box-shadow: 0 28px 56px -12px oklch(0 0 0 / .85), inset 0 2px 4px oklch(0 0 0 / .8), inset 0 -1px 2px oklch(1 0 0 / .08), 0 0 0 1px #05070a;

        &::before,
        &::after {
            content: '';
            position: absolute;
            width: 14px;
            height: 14px;
            pointer-events: none;
            z-index: 3;
        }

        &::before {
            top: -1px;
            left: -1px;
            border-top: 2px solid var(--color-electric-blue);
            border-left: 2px solid var(--color-electric-blue);
        }

        &::after {
            bottom: -1px;
            right: -1px;
            border-bottom: 2px solid var(--color-electric-blue);
            border-right: 2px solid var(--color-electric-blue);
        }

        .c-page-hero__sheet::before,
        .c-page-hero__sheet::after {
            content: none;
        }

        .c-badge--safety {
            color: oklch(90.52% 0.1657 98.11);
            border-color: color-mix(in oklch, var(--color-safety-amber) 34%, #05070a);
            background-image: var(--grain-brushed), linear-gradient(180deg, #1a1608 0%, #0c0903 100%);
            background-blend-mode: color-burn, normal;
            box-shadow: inset 0 2px 3px oklch(0 0 0 / .9), inset 0 -1px 1px color-mix(in oklch, var(--color-safety-amber) 22%, transparent), 0 1px 0 oklch(100% 0 0 / 0.05);

            &::after {
                mix-blend-mode: color-burn;
                opacity: .5;
            }
        }

        .c-badge--danger {
            color: oklch(71.92% 0.169 13.43);
            border-color: color-mix(in oklch, var(--color-redline-red) 34%, #05070a);
            background-image: var(--grain-brushed), linear-gradient(180deg, #1a0c10 0%, #0c0406 100%);
            background-blend-mode: color-burn, normal;
            box-shadow: inset 0 2px 3px oklch(0 0 0 / .9), inset 0 -1px 1px color-mix(in oklch, var(--color-redline-red) 22%, transparent), 0 1px 0 oklch(100% 0 0 / 0.05);

            &::after {
                mix-blend-mode: color-burn;
                opacity: .5;
            }
        }
    }

    .c-page-hero__mast {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
        position: relative;
        z-index: 2;
        padding: var(--space-3) var(--space-6);
        border-bottom: 1px solid oklch(44.3% 0.0248 232.7);
        background-image: var(--grain-brushed), linear-gradient(180deg, #232f38 0%, #161f27 100%);
        background-blend-mode: soft-light, normal;
        background-size: 280px 280px, auto;
        box-shadow: 0 1px 0 oklch(12.71% 0.0088 253.7);

        .c-titleblock {
            width: auto;
            flex: 1 1 16rem;
            min-width: 0;
            padding: 0;
            border: 0;
            background: oklch(0% 0 none / 0);
            display: inline-flex;
            flex-wrap: wrap;
            align-items: center;
            gap: var(--space-6);
        }
    }

    .c-page-hero__split {
        position: relative;
        z-index: 2;
        display: grid;

        @media (width >=960px) {
            grid-template-columns: minmax(0, 1.08fr) minmax(22rem, .92fr);
        }
    }

    .c-page-hero__copy {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: var(--space-4);
        padding: var(--space-6);

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

    .c-page-hero__kicker {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-mono);
        font-size: var(--font-size-micro);
        letter-spacing: var(--letter-spacing-caps);
        font-weight: 700;
        color: var(--color-electric-blue);
        text-transform: uppercase
    }

    .c-page-hero__lead {
        max-width: 52ch;
        font-size: clamp(1.05rem, .98rem + .3vw, 1.2rem);
        line-height: 1.6;
        color: var(--text-secondary)
    }

    .c-page-hero__sheet {
        display: flex;
        flex-direction: column;
        min-height: 100%;
        padding: 0;
        border: 0;
        border-radius: 0;
        background-image: var(--grain-brushed), linear-gradient(180deg, #131b21 0%, #0b1115 100%);
        background-blend-mode: soft-light, normal;
        background-size: 280px 280px, auto;
        box-shadow: inset 1px 0 0 oklch(12.71% 0.0088 253.7);
        border-width: 0 !important;

        @media (width >=960px) {
            border-inline-start: 1px solid var(--border-medium) !important;
        }
    }

    .c-page-hero__sheet-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-5);
        background: color-mix(in oklch, var(--surface-card) 75%, transparent);
        border-bottom: 1px solid var(--border-medium);
        font-family: var(--font-mono);
        font-size: var(--font-size-micro);
        letter-spacing: var(--letter-spacing-caps)
    }

    .c-page-hero__sheet-caption {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 700;
        color: var(--color-pure-white)
    }

    .c-page-hero__sheet-doc {
        display: inline-flex;
        align-items: center;
        padding: 3px 8px;
        border-radius: var(--radius-xs);
        background: color-mix(in oklch, var(--color-electric-blue) 12%, transparent);
        border: 1px solid color-mix(in oklch, var(--color-electric-blue) 40%, transparent);
        color: var(--color-electric-blue);
        font-family: var(--font-mono);
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .06em
    }

    .c-page-hero__sheet-list {
        margin: 0;
        flex: 1;
        display: flex;
        flex-direction: column
    }

    .c-page-hero__sheet-row {
        display: grid;
        grid-template-columns: 2.2rem 1fr auto;
        align-items: center;
        gap: var(--space-3);
        padding: .75rem var(--space-5);
        min-height: 2.85rem;
        border-bottom: 1px solid var(--border-subtle);
        transition: background .15s ease, padding-inline-start .15s ease;
        position: relative;

        &:hover {
            background: color-mix(in oklch, var(--color-electric-blue) 6%, transparent);
        }

        &:last-child {
            border-bottom: 0;
        }
    }

    .c-page-hero__sheet-row--active {
        background: color-mix(in oklch, var(--color-electric-blue) 12%, transparent);
        border-left: 3px solid var(--color-electric-blue);
        box-shadow: inset 0 0 20px color-mix(in oklch, var(--color-electric-blue) 8%, transparent)
    }

    .c-page-hero__sheet-num {
        font-family: var(--font-mono);
        font-size: .74rem;
        font-weight: 700;
        color: var(--color-electric-blue);
        opacity: .85
    }

    .c-page-hero__sheet-meta {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0
    }

    .c-page-hero__sheet-title {
        font-family: var(--font-sans);
        font-size: .9rem;
        font-weight: 700;
        color: var(--color-pure-white);
        letter-spacing: -.01em
    }

    .c-page-hero__sheet-desc {
        font-family: var(--font-mono);
        font-size: .72rem;
        color: var(--text-muted);
        letter-spacing: .02em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .c-page-hero__sheet-badge-wrap {
        justify-self: end
    }

    .c-page-hero__sheet-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--font-mono);
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .06em;
        color: var(--text-secondary);
        padding: 3px 9px;
        border-radius: var(--radius-xs);
        background: color-mix(in oklch, var(--surface-card) 90%, transparent);
        border: 1px solid var(--border-medium);
        white-space: nowrap
    }

    .c-page-hero__sheet-badge--active {
        color: var(--color-electric-blue);
        background: color-mix(in oklch, var(--color-electric-blue) 18%, transparent);
        border-color: color-mix(in oklch, var(--color-electric-blue) 55%, transparent);
        box-shadow: 0 0 12px color-mix(in oklch, var(--color-electric-blue) 25%, transparent)
    }

    .c-page-hero__board .c-badge,
    .c-page-hero__sheet-doc,
    .c-page-hero__sheet-badge,
    .c-page-hero__foot-badge {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        border-radius: 2px;
        background-color: var(--metal-stamp);
        background-image: var(--grain-brushed), linear-gradient(180deg, var(--metal-stamp-hi) 0%, var(--metal-stamp-lo) 100%);
        background-blend-mode: multiply, normal;
        background-size: 180px 180px, auto;
        border: 1px solid oklch(12.71% 0.0088 253.7);
        box-shadow: inset 0 2px 3px oklch(0 0 0 / .92), inset 0 -1px 0 oklch(1 0 0 / .08), 0 1px 0 oklch(1 0 0 / .05)
    }

    .c-page-hero__board .c-badge::after,
    .c-page-hero__sheet-doc::after,
    .c-page-hero__sheet-badge::after,
    .c-page-hero__foot-badge::after {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: var(--grain-brushed);
        background-size: 180px 180px;
        mix-blend-mode: soft-light;
        opacity: .92
    }

    .c-page-hero__board .c-badge--accent,
    .c-page-hero__sheet-doc,
    .c-page-hero__sheet-badge--active {
        color: oklch(75.35% 0.139 232.7);
        border-color: color-mix(in oklch, var(--color-electric-blue) 30%, #05070a);
        background-image: var(--grain-brushed), linear-gradient(180deg, #0a1822 0%, #031016 100%);
        background-blend-mode: color-burn, normal;
        box-shadow: inset 0 2px 3px oklch(0 0 0 / .9), inset 0 -1px 1px color-mix(in oklch, var(--color-electric-blue) 22%, transparent), 0 1px 0 oklch(1 0 0 / .05)
    }

    .c-page-hero__board .c-badge--accent::after,
    .c-page-hero__sheet-doc::after,
    .c-page-hero__sheet-badge--active::after {
        mix-blend-mode: color-burn;
        opacity: .55
    }

    .c-page-hero__board .c-badge--success,
    .c-page-hero__foot-badge {
        color: oklch(87.61% 0.2286 152.4);
        border-color: color-mix(in oklch, var(--color-success-green) 32%, #05070a);
        background-image: var(--grain-brushed), linear-gradient(180deg, #071610 0%, #030c08 100%);
        background-blend-mode: color-burn, normal;
        box-shadow: inset 0 2px 3px oklch(0 0 0 / .9), inset 0 -1px 1px color-mix(in oklch, var(--color-success-green) 22%, transparent), 0 1px 0 oklch(1 0 0 / .05)
    }

    .c-page-hero__board .c-badge--success::after,
    .c-page-hero__foot-badge::after {
        mix-blend-mode: color-burn;
        opacity: .5
    }

    .c-page-hero__foot {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1px;
        background: oklch(12.71% 0.0088 253.7);
        border-top: 1px solid #46565f;

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

        @media (width <=599px) {
            grid-template-columns: 1fr;
        }
    }

    .c-page-hero__foot-cell {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        padding: var(--space-3) var(--space-6);
        background-image: var(--grain-brushed), linear-gradient(180deg, #17212a 0%, #0d1317 100%);
        background-blend-mode: soft-light, normal;
        background-size: 240px 240px, auto;
        box-shadow: 0 -1px 0 oklch(12.71% 0.0088 253.7);
        transition: background-color .15s ease;

        &:hover {
            background-color: oklch(25.45% 0.0208 242.8);
        }

        &:first-child {
            padding-left: 2rem;
        }

        &:last-child {
            padding-right: 2rem;
        }
    }

    .c-page-hero__foot-cell-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-2)
    }

    .c-page-hero__foot-cell-val {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-family: var(--font-sans);
        font-size: 1.15rem;
        font-weight: var(--font-weight-bold);
        line-height: 1.1;
        color: var(--color-pure-white);
        letter-spacing: -.02em
    }

    .c-page-hero__foot-cell-lbl {
        font-family: var(--font-mono);
        font-size: .65rem;
        font-weight: 600;
        color: var(--text-muted);
        letter-spacing: .05em;
        text-transform: uppercase
    }

    .c-page-hero__foot-badge {
        display: inline-flex;
        align-items: center;
        padding: 2px 7px;
        font-family: var(--font-mono);
        font-weight: 700;
        font-size: .62rem;
        letter-spacing: .08em
    }

    .c-pulse-dot {
        display: inline-block;
        width: 6px;
        height: 6px;
        flex-shrink: 0;
        border-radius: 50%;
        background-color: var(--color-electric-blue);
        box-shadow: 0 0 8px var(--color-electric-blue);
        animation: pulse-dot 2.5s infinite ease-in-out
    }

    .c-pulse-dot--success {
        background-color: var(--color-success-green);
        box-shadow: 0 0 8px var(--color-success-green)
    }

    .c-pulse-dot--amber {
        background-color: var(--color-safety-amber);
        box-shadow: 0 0 8px var(--color-safety-amber)
    }

    .c-roadmap {
        display: grid;
        gap: var(--space-4);
        background: transparent
    }

    .c-roadmap__item {
        display: grid;
        justify-items: start;
        gap: var(--space-2);
        padding: var(--space-4);
        background-color: var(--glass-bg);
        backdrop-filter: var(--glass-filter);
        -webkit-backdrop-filter: var(--glass-filter);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        box-shadow: var(--glass-border);

        &[data-state='available'] {
            box-shadow: var(--glass-border), inset 3px 0 var(--color-success-green);
        }

        &[data-state='roadmap'] {
            box-shadow: var(--glass-border), inset 3px 0 var(--color-steel-400);
        }
    }

    .c-contact-dispatcher {
        display: grid;
        align-items: start;
        border: 1px solid var(--border-subtle);
        background-color: var(--glass-bg);
        backdrop-filter: var(--glass-filter);
        -webkit-backdrop-filter: var(--glass-filter);
        box-shadow: var(--glass-border);
        border-radius: var(--radius-md)
    }

    .c-contact-dispatcher__form,
    .c-contact-dispatcher__output {
        padding: var(--space-4)
    }

    .c-contact-dispatcher__output {
        border-top: 1px solid var(--border-medium);
        background: var(--surface-base)
    }

    .c-choice-grid {
        display: grid;
        gap: var(--space-3)
    }

    .c-choice {
        display: flex;
        gap: var(--space-3);
        align-items: center;
        min-block-size: 44px;
        padding: .5rem .75rem;
        border: 1px solid var(--border-medium);
        background: color-mix(in oklch, var(--surface-base) 72%, var(--surface-card));
        color: var(--text-secondary);
        font-weight: 600;
        cursor: pointer;
        clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
        transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);

        &:hover {
            color: var(--text-primary);
            border-color: var(--border-highlight);
            background: var(--surface-card-hover);
        }

        input {
            &[type='checkbox'] {
                appearance: none;
                flex: 0 0 1.125rem;
                width: 1.125rem;
                height: 1.125rem;
                margin: 0;
                display: grid;
                place-items: center;
                border: 1px solid var(--color-steel-400);
                background: var(--color-graphite-950);
                box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.04);
                accent-color: var(--color-electric-blue);
                cursor: pointer;

                &::after {
                    content: '';
                    width: .55rem;
                    height: .3rem;
                    border-inline-start: 2px solid var(--color-graphite-950);
                    border-block-end: 2px solid var(--color-graphite-950);
                    transform: rotate(-45deg) translateY(-1px) scale(0);
                    opacity: 0;
                    transition: transform var(--transition-fast), opacity var(--transition-fast);
                }

                &:checked {
                    border-color: var(--color-electric-blue);
                    background: var(--color-electric-blue);
                    box-shadow: 0 0 10px color-mix(in oklch, var(--color-electric-blue) 45%, transparent);

                    &::after {
                        opacity: 1;
                        transform: rotate(-45deg) translate(1px, -1px) scale(1);
                    }
                }

                &:is(:focus, :focus-visible) {
                    outline: none;
                }
            }
        }

        &:has(input:checked) {
            color: var(--text-primary);
            border-color: var(--color-electric-blue);
            background: color-mix(in oklch, var(--color-electric-blue) 14%, var(--surface-card));
            box-shadow: inset 3px 0 0 var(--color-electric-blue);
        }

        &:has(input:focus-visible) {
            outline: 2px solid var(--color-electric-blue);
            outline-offset: 3px;
        }

    }

    .c-footer__summary {
        max-width: 34ch;
        font-size: var(--font-size-small)
    }

    .c-footer__registry,
    .c-footer__standard {
        font-size: var(--font-size-micro)
    }

    @media (width >=760px) {
        .c-feature-row {
            grid-template-columns: minmax(170px, .45fr) minmax(0, 1fr);
            align-items: center
        }

        .c-feature-row--qa {
            grid-template-columns: minmax(16rem, .85fr) minmax(0, 1.15fr);
            align-items: start;
            gap: var(--space-6)
        }

        .c-roadmap {
            grid-template-columns: repeat(2, 1fr)
        }

        .c-contact-dispatcher {
            grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr)
        }

        .c-contact-dispatcher__output {
            border-top: 0;
            border-left: 1px solid var(--border-medium)
        }

        .c-choice-grid {
            grid-template-columns: 1fr 1fr
        }
    }

    @media (width <=1023px) {
        .c-command-hero {
            min-height: auto;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            padding-top: 80px;

            &>.c-bolt {
                display: none;
            }

            &>.l-container {
                order: 1;
            }
        }

        .c-command-hero__content {
            width: 100%;
            max-width: 100%;
            padding-block: var(--space-4);
        }

        .c-command-hero__scene {
            order: 2;
            position: relative;
            inset: auto;
            height: clamp(280px, 78vw, 360px);
            width: calc(100% - 2 * var(--container-gutter));
            margin-inline: auto;
            margin-top: var(--space-2);
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-medium);
            overflow: hidden;

            &::after {
                background: linear-gradient(0deg, var(--surface-base) 0%, transparent 60%);
            }
        }

        .c-ecosystem-controls {
            order: 3;
            position: static;
            width: calc(100% - 2 * var(--container-gutter));
            margin-inline: auto;
            margin-top: var(--space-3);
            margin-bottom: var(--space-8);
        }
    }

    @media (width <=520px) {

        .c-command-hero__registry {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .c-command-hero__datum {
            padding: var(--space-2) 4px;
            font-size: 0.65rem;
            line-height: 1.3;
            text-align: center;
        }

        .c-role-console__metrics {
            grid-template-columns: 1fr;
        }

        .c-ecosystem-controls__nodes {
            grid-template-columns: 1fr 1fr;
            gap: 4px;
        }

        .c-ecosystem-node {
            min-height: 34px;
            padding: var(--space-1) var(--space-2);
            font-size: 0.68rem;
        }

        .c-role-console__switch {
            grid-template-columns: 1fr;

            button {
                border-right: 0;
                border-bottom: 1px solid var(--border-medium);
            }
        }
    }

    @media (width <=960px) {
        .c-journey {
            padding: var(--space-4);
        }

        .c-journey__road {
            display: none;
        }

        .c-journey__board {
            min-height: 0;
            padding-block: var(--space-3);
            overflow: visible;
        }

        .c-journey__stages {
            position: relative;
            inset: auto;
            border-inline-start: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: var(--space-2);

            /* Asphalt Highway Roadbed */
            &::before {
                content: '';
                position: absolute;
                top: 2rem;
                bottom: 2rem;
                left: calc(var(--space-2) + 22px);
                width: 52px;
                translate: -50% 0;
                background:
                    /* Dashed Road Centerline */
                    repeating-linear-gradient(to bottom,
                        color-mix(in oklch, var(--color-pure-white) 75%, var(--color-electric-blue)) 0px,
                        color-mix(in oklch, var(--color-pure-white) 75%, var(--color-electric-blue)) 14px,
                        transparent 14px,
                        transparent 26px),
                    /* Multi-stop Asphalt Pavement Gradient */
                    linear-gradient(90deg, #090d14 0%, #151d28 18%, #222c3d 50%, #151d28 82%, #090d14 100%);
                background-size: 2.5px 100%, 100% 100%;
                background-position: center, center;
                background-repeat: no-repeat, no-repeat;
                border-left: 2px solid color-mix(in oklch, var(--color-steel-500) 65%, transparent);
                border-right: 2px solid color-mix(in oklch, var(--color-steel-500) 65%, transparent);
                border-radius: var(--radius-sm);
                box-shadow: 0 6px 24px oklch(0% 0 0 / 0.7), inset 0 0 12px oklch(0% 0 0 / 0.8);
                z-index: 0;
            }

            /* Glowing Active Road Progress Trail */
            &::after {
                content: '';
                position: absolute;
                top: 2rem;
                left: calc(var(--space-2) + 22px);
                width: 4px;
                translate: -50% 0;
                height: calc((100% - 4rem) * var(--journey-step, 0) / 7);
                background: var(--color-electric-blue);
                box-shadow: 0 0 14px var(--color-electric-blue), 0 0 6px #fff;
                border-radius: 2px;
                z-index: 0;
                transition: height 520ms var(--ease-out-expo);
                pointer-events: none;
            }
        }

        .c-journey__stage {

            &,
            &[data-copy] {
                position: relative;
                left: auto;
                top: auto;
                right: auto;
                bottom: auto;
                width: 100%;
                translate: none;
                z-index: 1;
            }
        }

        .c-journey__trigger {

            &,
            .c-journey__stage[data-copy] & {
                display: grid;
                grid-template-columns: 44px minmax(0, 1fr);
                align-items: center;
                justify-items: stretch;
                gap: var(--space-3);
                min-height: 4.25rem;
                padding: var(--space-1) var(--space-2);
                translate: none;
                text-align: left;
                width: 100%;
            }

            &:is(:hover, [aria-pressed='true']) .c-journey__copy {
                border-color: var(--color-safety-amber);
                background: color-mix(in oklch, var(--surface-card) 85%, var(--color-safety-amber) 15%);
                box-shadow: 0 0 14px color-mix(in oklch, var(--color-safety-amber) 25%, transparent);
            }
        }

        .c-journey__pin,
        .c-journey__stage[data-copy] .c-journey__pin {
            display: grid;
            place-items: center;
            translate: none;
        }

        .c-journey__marker {
            width: 44px;
            height: 44px;
            font-size: 0.85rem;
            z-index: 2;
        }

        .c-journey__copy,
        .c-journey__stage[data-copy] .c-journey__copy {
            position: static;
            margin: 0;
            translate: none;
            padding: var(--space-2) var(--space-3);
            border: 1px solid var(--border-medium);
            border-radius: var(--radius-sm);
            background: color-mix(in oklch, var(--surface-base) 88%, transparent);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            width: 100%;
            text-align: left;
            display: grid;
            gap: 0.2rem;
            transition: all var(--transition-fast);
        }

        .c-journey__label {
            font-size: 0.95rem;
            font-weight: 700;
        }

        .c-journey__output {
            font-size: 0.68rem;
        }

        .c-journey__drawer {
            grid-template-columns: 1fr;
            gap: var(--space-3);
        }
    }

    .c-datum-field {
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background-image: radial-gradient(circle at var(--pointer-x) var(--pointer-y), color-mix(in oklch, var(--color-electric-blue) 18%, transparent), transparent 32%), linear-gradient(to right, color-mix(in oklch, var(--color-steel-700) 42%, transparent) .5px, transparent .5px), linear-gradient(to bottom, color-mix(in oklch, var(--color-steel-700) 42%, transparent) .5px, transparent .5px), linear-gradient(to right, color-mix(in oklch, var(--color-steel-700) 18%, transparent) .5px, transparent .5px), linear-gradient(to bottom, color-mix(in oklch, var(--color-steel-700) 18%, transparent) .5px, transparent .5px);
        background-size: auto, 40px 40px, 40px 40px, 8px 8px, 8px 8px;
        mask-image: radial-gradient(circle at var(--pointer-x) var(--pointer-y), oklch(1 0 0 / .55), oklch(1 0 0 / .12) 42%, transparent 78%)
    }

    .c-frame {
        &:not(.c-page-hero__board) {
            position: relative;
            isolation: isolate;
            background-color: var(--glass-bg);
            background-image: none;
            backdrop-filter: var(--glass-filter);
            -webkit-backdrop-filter: var(--glass-filter);
            border: 1px solid var(--border-subtle);
            box-shadow: var(--glass-border);
        }

        &::before,
        &::after {
            content: '';
            position: absolute;
            width: 14px;
            height: 14px;
            pointer-events: none;
            border: 1px solid var(--color-electric-blue);
        }

        &::before {
            top: -1px;
            left: -1px;
            border-right: 0;
            border-bottom: 0;
        }

        &::after {
            right: -1px;
            bottom: -1px;
            border-left: 0;
            border-top: 0;
        }
    }

    .c-titleblock {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: var(--space-4);
        align-items: end;
        width: min(100%, 520px);
        padding: var(--space-3) var(--space-4);
        border: 1px solid var(--border-medium);
        background: color-mix(in oklch, var(--color-graphite-950) 72%, transparent);
        font-family: var(--font-mono);
        font-size: var(--font-size-micro);
        color: var(--text-muted);

        strong {
            display: block;
            color: var(--text-primary);
            font-size: var(--font-size-mono);
            margin-top: 2px;
        }
    }

    .c-pqq-map {
        position: relative;
        align-self: start;
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-4);
        padding-inline-end: 5.5rem
    }

    .c-stamp {
        display: grid;
        place-items: center;
        width: 108px;
        aspect-ratio: 1;
        border: 2px solid currentColor;
        border-radius: 50%;
        color: var(--color-safety-amber);
        rotate: -12deg;
        font-family: var(--font-mono);
        font-size: .62rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-align: center;
        text-transform: uppercase;
        box-shadow: inset 0 0 0 4px color-mix(in oklch, currentColor 35%, transparent);
        opacity: .86;

        .c-pqq-map__seal& {
            position: absolute;
            top: var(--space-3);
            right: var(--space-3);
            width: 4.5rem;
            z-index: 1;
            pointer-events: none;
        }
    }

    .c-pqq-map__head {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2)
    }

    .c-pqq-map__track {
        height: 4px;
        background: color-mix(in oklch, var(--border-medium) 70%, transparent);
        border: 0
    }

    .c-pqq-map__bar {
        width: 0;
        height: 100%;
        background: var(--color-electric-blue);
        transition: width 300ms ease
    }

    .c-pqq-map__log {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-height: 0;

        >p {
            margin: 0;
        }
    }

    .c-pqq-map__row {
        font-size: var(--font-size-micro);
        padding-block: .35rem;
        border-bottom: 1px solid var(--border-subtle)
    }

    .c-stamp--pass {
        color: var(--color-success-green)
    }

    .c-stamp--lock {
        color: var(--color-electric-blue)
    }

    .c-hud-strip {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        border: 1px solid var(--border-medium);
        background: color-mix(in oklch, var(--color-graphite-950) 70%, transparent);

        :is(span, strong) {
            display: block;
        }

        >div {
            padding: var(--space-3) var(--space-4);
            border-right: 1px solid var(--border-subtle);
            font-family: var(--font-mono);
            font-size: var(--font-size-micro);
            color: var(--text-muted);

            &:last-child {
                border-right: 0;
            }
        }

        strong {
            margin-top: 4px;
            color: var(--text-primary);
            font-size: var(--font-size-small);
        }
    }

    .c-convergence {
        display: grid;
        gap: var(--space-4);
        min-height: 0;
        align-items: stretch
    }

    .c-convergence__chaos {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-3);

        @supports (animation-timeline:view()) {
            animation: chaos-lock linear both;
            animation-timeline: view();
            animation-range: cover 12% cover 55%;
        }
    }

    .c-chip-doc {
        min-height: 4.5rem;
        padding: var(--space-3);
        border: 1px dashed color-mix(in oklch, var(--color-redline-red) 55%, var(--color-steel-700));
        background: color-mix(in oklch, var(--color-graphite-800) 70%, transparent);
        font-family: var(--font-mono);
        font-size: var(--font-size-micro);
        color: var(--text-secondary);
        transform: rotate(var(--tilt, -2deg));

        &:nth-child(even) {
            --tilt: 2.4deg;
        }

        &:nth-child(3n) {
            --tilt: -3.2deg;
        }

        @supports (animation-timeline:view()) {
            animation: chip-square linear both;
            animation-timeline: view();
            animation-range: cover 18% cover 58%;
        }
    }

    .c-convergence__order {
        padding: var(--space-4);
        display: grid;
        gap: var(--space-3)
    }

    @keyframes chaos-lock {
        to {
            gap: 1px
        }
    }

    @keyframes chip-square {
        to {
            transform: none;
            border-style: solid;
            border-color: var(--border-highlight)
        }
    }

    .c-workspace {
        display: grid;
        gap: 1px;
        background: var(--border-subtle);
        border: 1px solid var(--border-medium)
    }

    .c-workspace__row {
        display: grid;
        grid-template-columns: 1.4fr .8fr .8fr;
        gap: 1px;

        >* {
            padding: var(--space-3) var(--space-4);
            background: var(--surface-base);
            font-family: var(--font-mono);
            font-size: var(--font-size-micro);
        }
    }

    .c-exploded {
        display: grid;
        gap: var(--space-3);
        padding: var(--space-4)
    }

    .c-exploded__layer {
        display: grid;
        gap: var(--space-2);
        padding: var(--space-4);
        border: 1px solid var(--border-medium);
        background: color-mix(in oklch, var(--surface-panel) 82%, transparent);
        transform: perspective(1200px) rotateX(12deg) rotateY(-8deg);
        transform-origin: left center;
        box-shadow: 18px 22px 0 color-mix(in oklch, var(--color-graphite-950) 80%, transparent);

        &[data-tone='foundation'] {
            border-color: var(--border-safety);
            background: color-mix(in oklch, var(--color-safety-amber) 8%, var(--surface-panel));
        }

        &[data-tone='precon'] {
            border-color: var(--border-highlight);
            background: color-mix(in oklch, var(--color-electric-blue) 9%, var(--surface-panel));
        }

        &[data-tone='pm'] {
            border-color: color-mix(in oklch, var(--color-success-green) 50%, var(--color-steel-700));
        }

        &[data-tone='roadmap'] {
            border-style: dashed;
            opacity: .86;
        }
    }

    .c-stat-callout {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1px;
        background: var(--border-medium);

        article {
            padding: var(--space-4);
            background: var(--surface-panel);
        }

        strong {
            display: block;
            font-size: var(--font-size-h3);
            color: var(--color-safety-amber);
            letter-spacing: var(--letter-spacing-heading);
        }
    }

    .c-lifecycle__card {
        display: none;
        margin-top: var(--space-3);
        padding-top: var(--space-3);
        border-top: 1px solid var(--border-highlight);
        color: var(--text-secondary);
        font-size: var(--font-size-small);

        :is(.c-lifecycle__step:hover, .c-lifecycle__step:focus-within) & {
            display: block;
        }
    }

    @media (width <=860px) {

        .c-engine-console__stage,
        .c-stat-callout,
        .c-convergence__chaos,
        .c-workspace__row {
            grid-template-columns: 1fr
        }

        .c-hud-strip {
            grid-template-columns: repeat(2, 1fr);

            >div:nth-child(2) {
                border-right: 0;
            }

            >div:nth-child(-n+2) {
                border-bottom: 1px solid var(--border-subtle);
            }
        }

        .c-exploded__layer {
            transform: none;
            box-shadow: none
        }

        .c-titleblock {
            grid-template-columns: repeat(3, 1fr);
            gap: var(--space-2);
            padding: var(--space-2) var(--space-3);
        }
    }

    @media (prefers-reduced-transparency:reduce) {

        .u-glass,
        .u-glass-heavy,
        .c-nav,
        .c-ecosystem-controls,
        .c-journey__drawer,
        .c-page-hero__board,
        .c-frame,
        .c-panel,
        .c-matrix-wrapper,
        .c-console-window,
        .c-comparison-table-wrap,
        .c-roadmap__item,
        .c-contact-dispatcher {
            backdrop-filter: none;
            background-image: none;
            background-color: var(--surface-panel)
        }

        .c-metal-film {
            display: none
        }

        .c-page-hero__board .c-badge,
        .c-page-hero__sheet-doc,
        .c-page-hero__sheet-badge,
        .c-page-hero__foot-badge {
            mix-blend-mode: normal;
            background-blend-mode: normal
        }

        .c-page-hero__board .c-badge::after,
        .c-page-hero__sheet-doc::after,
        .c-page-hero__sheet-badge::after,
        .c-page-hero__foot-badge::after {
            content: none
        }
    }

    @media (forced-colors:active) {

        .c-page-hero__board .c-badge::after,
        .c-page-hero__sheet-doc::after,
        .c-page-hero__sheet-badge::after,
        .c-page-hero__foot-badge::after {
            content: none
        }
    }
}