:root {
        --navy: #1B3A5C;
        --blue: #2563A8;
        --teal: #1A7A8C;
        --green: #1A7A4A;
        --orange: #B85C00;
        --red: #A02020;
        --grey: #F5F7FA;
        --dgrey: #4A5568;
        --white: #FFFFFF;
        --black: #111827;
        --border: #D0D5DD;
        --code-bg: #0F172A;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        font-size: 15px;
        line-height: 1.7;
        color: var(--black);
        background: #F0F4F8;
    }

    .layout {
        display: flex;
        min-height: 100vh;
    }

    /* Sidebar */
    .sidebar {
        width: 270px;
        min-width: 270px;
        background: var(--navy);
        color: #CBD5E0;
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
        padding: 0 0 40px;
    }

    .sidebar-logo {
        background: #0F2440;
        padding: 22px 20px 18px;
        border-bottom: 3px solid var(--teal);
    }

    .sidebar-logo h1 {
        color: #fff;
        font-size: 1.2rem;
        font-weight: 700;
        letter-spacing: .5px;
    }

    .sidebar-logo p {
        color: #90A4BF;
        font-size: .75rem;
        margin-top: 3px;
    }

    .sidebar nav {
        padding: 14px 0;
    }

    .sidebar nav a {
        display: block;
        padding: 7px 22px;
        color: #A8BCCF;
        text-decoration: none;
        font-size: .82rem;
        transition: all .15s;
        border-left: 3px solid transparent;
    }

    .sidebar nav a:hover,
    .sidebar nav a.active {
        color: #fff;
        background: rgba(255, 255, 255, .07);
        border-left-color: var(--teal);
    }

    .sidebar nav .section-label {
        padding: 14px 22px 5px;
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: #4A6785;
    }

    /* Main */
    .main {
        flex: 1;
        min-width: 0;
        padding: 0 0 80px;
    }

    /* Hero */
    .hero {
        background: linear-gradient(135deg, var(--navy) 0%, #254E7A 100%);
        color: #fff;
        padding: 48px 56px 44px;
        border-bottom: 4px solid var(--teal);
        position: relative;
        overflow: hidden;
    }

    .hero::after {
        content: '';
        position: absolute;
        right: -40px;
        top: -40px;
        width: 280px;
        height: 280px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .04);
    }

    .hero h1 {
        font-size: 2.1rem;
        font-weight: 800;
        letter-spacing: -.5px;
    }

    .hero .subtitle {
        color: #90B8D8;
        margin-top: 8px;
        font-size: 1rem;
    }

    .hero .meta {
        display: flex;
        gap: 24px;
        margin-top: 20px;
        flex-wrap: wrap;
    }

    .hero .badge {
        background: rgba(255, 255, 255, .12);
        border: 1px solid rgba(255, 255, 255, .2);
        border-radius: 20px;
        padding: 4px 14px;
        font-size: .78rem;
        color: #CBD5E0;
    }

    .hero-btns {
        display: flex;
        gap: 12px;
        margin-top: 24px;
        flex-wrap: wrap;
    }

    .btn-home {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        background: rgba(255, 255, 255, .12);
        border: 1px solid rgba(255, 255, 255, .25);
        color: #fff;
        text-decoration: none;
        padding: 8px 18px;
        border-radius: 7px;
        font-size: .85rem;
        font-weight: 600;
        transition: background .15s;
    }

    .btn-home:hover {
        background: rgba(255, 255, 255, .22);
    }

    .btn-docs {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        background: rgba(26, 122, 140, .35);
        border: 1px solid rgba(26, 122, 140, .6);
        color: #fff;
        text-decoration: none;
        padding: 8px 18px;
        border-radius: 7px;
        font-size: .85rem;
        font-weight: 600;
        transition: background .15s;
    }

    .btn-docs:hover {
        background: rgba(26, 122, 140, .55);
    }

    /* Sections */
    .section {
        padding: 44px 56px 12px;
        max-width: 920px;
    }

    .section+.section {
        padding-top: 10px;
    }

    h2 {
        font-size: 1.35rem;
        font-weight: 700;
        color: var(--navy);
        padding-bottom: 10px;
        border-bottom: 2px solid var(--teal);
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    h2 .num {
        background: var(--teal);
        color: #fff;
        font-size: .75rem;
        font-weight: 700;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    h3 {
        font-size: 1rem;
        font-weight: 700;
        color: var(--navy);
        margin: 28px 0 10px;
    }

    h4 {
        font-size: .9rem;
        font-weight: 700;
        color: var(--dgrey);
        margin: 18px 0 8px;
    }

    p {
        margin-bottom: 12px;
        color: #2D3748;
    }

    ul,
    ol {
        margin: 8px 0 16px 22px;
        color: #2D3748;
        line-height: 1.9;
    }

    li {
        margin-bottom: 4px;
    }

    /* Code */
    pre {
        background: var(--code-bg);
        color: #E2E8F0;
        border-radius: 8px;
        padding: 16px 20px;
        font-size: .82rem;
        line-height: 1.6;
        overflow-x: auto;
        margin: 10px 0 16px;
        border-left: 3px solid var(--teal);
    }

    code {
        font-family: "SF Mono", "Cascadia Code", "Fira Code", Consolas, monospace;
    }

    p code,
    li code,
    td code {
        background: #EDF2F7;
        color: #1A7A8C;
        padding: 1px 6px;
        border-radius: 4px;
        font-size: .83em;
    }

    .cmd-c {
        color: #7DD3FC;
    }

    .arg {
        color: #86EFAC;
    }

    .val {
        color: #FDE68A;
    }

    .out {
        color: #CBD5E0;
    }

    .prompt {
        color: #94A3B8;
    }

    .success {
        color: #6EE7B7;
        font-weight: 600;
    }

    .comment {
        color: #64748B;
    }

    /* Callouts */
    .callout {
        border-radius: 8px;
        padding: 14px 18px;
        margin: 14px 0;
        font-size: .88rem;
        display: flex;
        gap: 12px;
        align-items: flex-start;
    }

    .callout .icon {
        flex-shrink: 0;
        font-size: 1rem;
        margin-top: 1px;
    }

    .callout.tip {
        background: #EBF8F5;
        border-left: 4px solid var(--teal);
    }

    .callout.warn {
        background: #FFF7ED;
        border-left: 4px solid var(--orange);
    }

    .callout.info {
        background: #EFF6FF;
        border-left: 4px solid var(--blue);
    }

    .callout.danger {
        background: #FEF2F2;
        border-left: 4px solid var(--red);
    }

    .callout p {
        margin: 0;
        color: inherit;
    }

    /* Steps */
    .steps {
        counter-reset: step;
        list-style: none;
        margin: 10px 0 20px 0;
    }

    .steps li {
        counter-increment: step;
        display: flex;
        gap: 14px;
        margin-bottom: 18px;
        align-items: flex-start;
    }

    .steps li::before {
        content: counter(step);
        background: var(--blue);
        color: #fff;
        font-size: .75rem;
        font-weight: 700;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin-top: 2px;
    }

    .steps li>div {
        flex: 1;
    }

    /* Topology diagram */
    .topology {
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 24px 28px;
        margin: 16px 0 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        flex-wrap: wrap;
    }

    .topo-node {
        background: var(--navy);
        color: #fff;
        border-radius: 10px;
        padding: 16px 24px;
        text-align: center;
        min-width: 160px;
    }

    .topo-node .label {
        font-size: .68rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #90B8D8;
        margin-bottom: 6px;
    }

    .topo-node .ip {
        font-size: 1rem;
        font-weight: 700;
        font-family: monospace;
    }

    .topo-node .detail {
        font-size: .75rem;
        color: #90B8D8;
        margin-top: 4px;
    }

    .topo-arrow {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 16px;
        color: var(--teal);
    }

    .topo-arrow .line {
        width: 80px;
        height: 2px;
        background: var(--teal);
        position: relative;
    }

    .topo-arrow .line::after {
        content: '▶';
        position: absolute;
        right: -8px;
        top: -9px;
        font-size: .85rem;
        color: var(--teal);
    }

    .topo-arrow .line.both::before {
        content: '◀';
        position: absolute;
        left: -8px;
        top: -9px;
        font-size: .85rem;
        color: var(--teal);
    }

    .topo-arrow .alabel {
        font-size: .72rem;
        color: var(--teal);
        margin-top: 6px;
        font-weight: 600;
    }

    /* Command reference table */
    .tbl-wrap {
        overflow-x: auto;
        margin: 12px 0 20px;
        border-radius: 8px;
        border: 1px solid var(--border);
    }

    table {
        width: 100%;
        border-collapse: collapse;
        font-size: .85rem;
    }

    thead tr {
        background: var(--navy);
        color: #fff;
    }

    thead th {
        padding: 10px 14px;
        text-align: left;
        font-weight: 600;
        font-size: .8rem;
    }

    tbody tr:nth-child(even) {
        background: var(--grey);
    }

    tbody tr:hover {
        background: #E8EFF7;
    }

    td {
        padding: 9px 14px;
        border-bottom: 1px solid var(--border);
        vertical-align: top;
    }

    td:first-child {
        font-family: monospace;
        font-size: .82rem;
        color: var(--teal);
        font-weight: 600;
    }

    /* Node label chips */
    .chip {
        display: inline-block;
        font-size: .7rem;
        font-weight: 700;
        padding: 2px 10px;
        border-radius: 10px;
        margin-bottom: 6px;
    }

    .chip-src {
        background: #DBEAFE;
        color: #1D4ED8;
    }

    .chip-dst {
        background: #D1FAE5;
        color: #065F46;
    }

    .chip-both {
        background: #EDE9FE;
        color: #5B21B6;
    }

    /* Footer */
    .footer {
        background: var(--navy);
        color: #4A6785;
        text-align: center;
        padding: 18px;
        font-size: .78rem;
        margin-top: 40px;
    }

    .footer span {
        color: var(--teal);
    }

    @media (max-width: 768px) {
        .sidebar {
            display: none;
        }

        .hero,
        .section {
            padding-left: 20px;
            padding-right: 20px;
        }

        .topology {
            flex-direction: column;
        }

        .topo-arrow .line {
            width: 2px;
            height: 40px;
        }

        .topo-arrow .line::after {
            right: -9px;
            top: auto;
            bottom: -8px;
            content: '▼';
        }

        .topo-arrow .line.both::before {
            left: -9px;
            top: -8px;
            content: '▲';
        }
    }