:root {
        --bg: #0b0f14;
        --bg-panel: #11161d;
        --bg-panel-2: #151b23;
        --line: #232b36;
        --ink: #e7ecf2;
        --ink-dim: #8c98a8;
        --ink-faint: #5c6b7d;
        --accent: #5ee6c9;
        --accent-soft: rgba(94, 230, 201, .12);
        --amber: #e8a83c;
        --amber-soft: rgba(232, 168, 60, .12);
        --rose: #e8637a;
        --rose-soft: rgba(232, 99, 122, .12);
        --violet: #9d8cf0;
        --violet-soft: rgba(157, 140, 240, .12);
        --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
        --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
        --sans: -apple-system, "Segoe UI", Inter, system-ui, sans-serif;
    }

    * {
        box-sizing: border-box;
    }

    html,
    body {
        margin: 0;
        padding: 0;
    }

    ::-webkit-scrollbar {
        width: 0;
    }

    body {
        background: radial-gradient(1200px 600px at 15% -10%, rgba(94, 230, 201, .07), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(157, 140, 240, .06), transparent 55%), var(--bg);
        color: var(--ink);
        font-family: var(--sans);
        line-height: 1.55;
        -webkit-font-smoothing: antialiased;
    }

    main {
        max-width: 1280px;
        margin: 0 auto;
        padding: 48px 28px 70px;
    }

    .eyebrow {
        font-family: var(--mono);
        font-size: 12px;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--accent);
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 18px;
    }

    .eyebrow i {
        color: var(--accent);
        font-size: 10px;
        flex: none;
    }

    h1 {
        font-family: var(--serif);
        font-weight: 400;
        font-size: clamp(34px, 5vw, 54px);
        line-height: 1.06;
        margin: 0 0 14px;
        letter-spacing: -.01em;
    }

    h1 em {
        font-style: italic;
        color: var(--accent);
    }

    .hero-sub {
        color: var(--ink-dim);
        max-width: 700px;
        font-size: 16px;
        margin-bottom: 6px;
    }

    .hero-meta {
        font-family: var(--mono);
        font-size: 12.5px;
        color: var(--ink-faint);
        margin-top: 22px;
        display: flex;
        flex-wrap: wrap;
        gap: 6px 22px;
    }

    .hero-meta a {
        color: var(--ink-dim);
        text-decoration: none;
        border-bottom: 1px dotted var(--line);
    }

    .hero-meta a:hover {
        color: var(--accent);
        border-color: var(--accent);
    }

    section {
        margin-top: 60px;
    }

    .section-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 20px;
        flex-wrap: wrap;
    }

    h2 {
        font-family: var(--serif);
        font-weight: 400;
        font-size: 22px;
        margin: 0;
        letter-spacing: -.01em;
    }

    .section-note {
        font-family: var(--mono);
        font-size: 11.5px;
        color: var(--ink-faint);
        text-align: right;
    }

    .metric-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 1px;
        background: var(--line);
        border: 1px solid var(--line);
        border-radius: 16px;
        overflow: hidden;
    }

    .metric {
        background: var(--bg-panel);
        padding: 22px 18px;
    }

    .metric .n {
        font-family: var(--mono);
        font-size: 30px;
        font-weight: 600;
        color: var(--accent);
        letter-spacing: -.02em;
    }

    .metric .l {
        font-size: 12.5px;
        color: var(--ink-dim);
        margin-top: 6px;
    }

    /* table */

    .table-wrap {
        overflow: auto;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: var(--bg-panel);
    }

    table {
        width: 100%;
        min-width: 860px;
        border-collapse: collapse;
        font-size: 13px;
    }

    th,
    td {
        padding: 12px 14px;
        text-align: left;
        border-bottom: 1px solid var(--line);
        vertical-align: top;
    }

    thead th {
        font-family: var(--mono);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--ink-dim);
        background: var(--bg-panel-2);
        position: sticky;
        top: 0;
        z-index: 2;
    }

    tbody tr:hover {
        background: var(--bg-panel-2);
    }

    tbody tr:last-child td,
    tbody tr:last-child th {
        border-bottom: none;
    }

    .col-domain i {
        margin-right: 6px;
        color: var(--accent);
    }

    .status-pill {
        display: inline-block;
        font-family: var(--mono);
        font-size: 10.5px;
        padding: 3px 10px;
        border-radius: 100px;
        letter-spacing: .03em;
        white-space: nowrap;
    }

    .status-pill.verified {
        background: var(--accent-soft);
        color: var(--accent);
    }

    .status-pill.connected {
        background: var(--violet-soft);
        color: var(--violet);
    }

    .status-pill.best-effort {
        background: var(--amber-soft);
        color: var(--amber);
    }

    .status-pill.unlocked {
        background: var(--accent-soft);
        color: var(--accent);
    }

    .status-pill.specced {
        background: var(--violet-soft);
        color: var(--violet);
    }

    .status-pill.not-authored {
        background: transparent;
        color: var(--ink-faint);
        border: 1px solid var(--line);
    }

    .status-pill.blocked {
        background: var(--rose-soft);
        color: var(--rose);
    }

    .status-pill.pending {
        background: var(--amber-soft);
        color: var(--amber);
    }

    .status-pill.none {
        background: transparent;
        color: var(--ink-faint);
        opacity: 0.4;
    }

    .std-tag-sm {
        display: inline-block;
        background: var(--bg-panel-2);
        border: 1px solid var(--line);
        border-radius: 6px;
        padding: 2px 8px;
        font-size: 10.5px;
        color: var(--ink-dim);
        margin: 2px 2px 0 0;
        font-family: var(--mono);
    }

    .std-tag-sm strong {
        color: var(--accent);
    }

    .legend {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        margin-bottom: 16px;
        font-size: 12px;
        color: var(--ink-dim);
        background: var(--bg-panel);
        padding: 12px 18px;
        border-radius: 12px;
        border: 1px solid var(--line);
    }

    .legend-item {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .dot {
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        flex: none;
    }

    .dot.green {
        background: var(--accent);
    }

    .dot.teal {
        background: var(--violet);
    }

    .dot.amber {
        background: var(--amber);
    }

    .dot.rose {
        background: var(--rose);
    }

    .dot.violet {
        background: #9d8cf0;
    }

    .dot.gray {
        background: var(--ink-faint);
        opacity: 0.4;
    }

    /* cards */

    .card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 14px;
    }

    .card {
        background: var(--bg-panel);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 18px 20px;
    }

    .card-title {
        font-family: var(--mono);
        font-size: 14px;
        font-weight: 600;
        color: var(--accent);
        margin-bottom: 6px;
    }

    .card-title i {
        margin-right: 8px;
    }

    .card-body {
        font-size: 13px;
        color: var(--ink-dim);
    }

    .card-body p {
        margin: 0 0 6px;
    }

    .tag {
        display: inline-block;
        background: var(--bg-panel-2);
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 2px 10px;
        font-size: 11px;
        color: var(--ink-dim);
        margin: 2px 2px 0 0;
        font-family: var(--mono);
    }

    .tag.blue {
        border-color: rgba(94, 230, 201, .25);
        color: var(--accent);
    }

    .tag.violet {
        border-color: rgba(157, 140, 240, .25);
        color: var(--violet);
    }

    .tag.amber {
        border-color: rgba(232, 168, 60, .25);
        color: var(--amber);
    }

    .col-orders ul {
        margin: 0;
        padding: 0 0 0 18px;
        font-size: 12.5px;
        color: var(--ink-dim);
    }

    .col-orders ul li {
        margin-bottom: 3px;
    }

    .col-modes .tag {
        display: inline-block;
        margin-bottom: 2px;
    }

    .col-standards a {
        color: var(--ink-dim);
        text-decoration: none;
        border-bottom: 1px dotted var(--line);
    }

    .col-standards a:hover {
        color: var(--accent);
        border-color: var(--accent);
    }

    .std-tag {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 6px;
        background: var(--bg-panel-2);
        border: 1px solid var(--line);
        color: var(--ink-dim);
        margin: 2px 2px 0 0;
    }

    .std-tag strong {
        color: var(--accent);
    }

    .complexity-tag {
        display: inline-block;
        font-family: var(--mono);
        font-size: 11px;
        padding: 3px 12px;
        border-radius: 100px;
        font-weight: 600;
    }

    .complexity-tag.medium {
        background: var(--amber-soft);
        color: var(--amber);
    }

    .complexity-tag.high {
        background: var(--rose-soft);
        color: var(--rose);
    }

    .complexity-tag.very-high {
        background: rgba(232, 99, 122, .25);
        color: var(--rose);
        border: 1px solid var(--rose);
    }

    .lifecycle {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 4px;
        background: var(--bg-panel);
        padding: 16px 20px;
        border-radius: 14px;
        border: 1px solid var(--line);
    }

    .lifecycle .step {
        font-family: var(--mono);
        font-size: 11px;
        padding: 4px 12px;
        border-radius: 100px;
        background: var(--bg-panel-2);
        color: var(--ink-faint);
        border: 1px solid var(--line);
        white-space: nowrap;
    }

    .lifecycle .step.done {
        background: var(--accent-soft);
        color: var(--accent);
        border-color: rgba(94, 230, 201, .3);
    }

    .lifecycle .step.active {
        background: var(--violet-soft);
        color: var(--violet);
        border-color: rgba(157, 140, 240, .3);
    }

    .lifecycle .arrow {
        color: var(--ink-faint);
        font-size: 12px;
    }

    .lifecycle .arrow i {
        display: block;
    }

    /* trust zones */

    .trust-zones {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 12px;
    }

    .trust-zone {
        background: var(--bg-panel);
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 16px 18px;
    }

    .trust-zone .zone-title {
        font-family: var(--mono);
        font-size: 12px;
        font-weight: 600;
        color: var(--accent);
    }

    .trust-zone .zone-desc {
        font-size: 12.5px;
        color: var(--ink-dim);
        margin-top: 4px;
    }

    /* standards grid */

    .standards-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 16px;
    }

    .standards-card {
        background: var(--bg-panel);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 18px 20px;
    }

    .standards-card .card-title {
        font-family: var(--mono);
        font-size: 13px;
        font-weight: 600;
        color: var(--accent);
        margin-bottom: 6px;
    }

    .standards-card .card-body {
        font-size: 12.5px;
        color: var(--ink-dim);
    }

    .std-ref {
        display: inline-block;
        font-family: var(--mono);
        font-size: 11px;
        background: var(--bg-panel-2);
        border-radius: 6px;
        padding: 2px 8px;
        margin: 2px 4px 2px 0;
        color: var(--ink);
        text-decoration: none;
        border: 1px solid var(--line);
    }

    .std-ref:hover {
        border-color: var(--accent);
        color: var(--accent);
    }

    .std-desc {
        display: block;
        margin-top: 6px;
        font-size: 12px;
        color: var(--ink-faint);
    }

    .control {
        display: block;
        margin-top: 8px;
        font-size: 11.5px;
        color: var(--violet);
        background: var(--bg-panel-2);
        border-radius: 8px;
        padding: 6px 10px;
        border: 1px solid var(--line);
    }

    .control strong {
        color: var(--accent);
    }

    /* pipeline */

    .pipeline-block {
        background: var(--bg-panel);
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 24px 28px;
        font-family: var(--mono);
        font-size: 13px;
        color: var(--ink-dim);
    }

    .pipeline-block .step {
        padding: 6px 0;
        color: var(--ink);
    }

    .pipeline-block .step.highlight {
        color: var(--accent);
        background: var(--accent-soft);
        border-radius: 8px;
        padding: 8px 14px;
        margin-top: 4px;
    }

    .pipeline-block .arrow {
        color: var(--amber);
        padding-left: 4px;
    }

    footer {
        margin-top: 60px;
        padding-top: 22px;
        border-top: 1px solid var(--line);
        font-family: var(--mono);
        font-size: 11.5px;
        color: var(--ink-faint);
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px;
    }

    footer a {
        color: var(--ink-faint);
        text-decoration: none;
    }

    footer a:hover {
        color: var(--accent);
    }

    footer .centered {
        text-align: center;
        flex: 1;
    }

    .powered-footer {
        margin-top: 36px;
        text-align: center;
        font-family: var(--mono);
        font-size: 13px;
        letter-spacing: 0.08em;
        color: var(--ink-faint);
        opacity: 0.55;
        border-top: 1px solid var(--line);
        padding-top: 22px;
    }

    .powered-footer div {
        margin-bottom: 4px;
    }

    @media (max-width:640px) {
        main {
            padding: 32px 16px 60px;
        }

        .hero-meta {
            flex-direction: column;
            gap: 4px;
        }

        .lifecycle {
            justify-content: center;
        }

        footer {
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
    }