:root {
            --bg: #0b1320;
            --bg-2: #111d2e;
            --panel: #142236;
            --panel-2: #192b43;
            --text: #e8eef8;
            --muted: #b8c5d8;
            --accent: #5eead4;
            --accent-2: #38bdf8;
            --warning: #facc15;
            --danger: #fb7185;
            --ok: #86efac;
            --border: rgba(255,255,255,.13);
            --shadow: 0 20px 60px rgba(0,0,0,.35);
            --radius: 18px;
            --max: 1180px;
        }
        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            line-height: 1.65;
            color: var(--text);
            background:
                radial-gradient(circle at top left, rgba(56,189,248,.18), transparent 34rem),
                radial-gradient(circle at 80% 10%, rgba(94,234,212,.12), transparent 30rem),
                linear-gradient(180deg, #07101c 0%, var(--bg) 52%, #07101c 100%);
        }
        a { color: var(--accent-2); text-decoration: none; }
        a:hover { text-decoration: underline; }
        .topbar {
            position: sticky;
            top: 0;
            z-index: 20;
            backdrop-filter: blur(14px);
            background: rgba(7,16,28,.82);
            border-bottom: 1px solid var(--border);
        }
        .topbar-inner {
            max-width: var(--max);
            margin: 0 auto;
            padding: .85rem 1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
        }
        .brand { font-weight: 800; letter-spacing: .02em; color: #fff; }
        .brand span { color: var(--accent); }
        .nav { display: flex; gap: .75rem; flex-wrap: wrap; font-size: .92rem; }
        .nav a { color: var(--muted); }
        .nav a:hover { color: #fff; }
        header.hero {
            max-width: var(--max);
            margin: 0 auto;
            padding: 5rem 1rem 2.5rem;
        }
        .hero-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
            gap: 1.5rem;
            align-items: stretch;
        }
        .hero-card, .quick-card, section, .toc, .note, .source-box {
            border: 1px solid var(--border);
            background: linear-gradient(180deg, rgba(20,34,54,.94), rgba(13,24,39,.94));
            border-radius: var(--radius);
            box-shadow: var(--shadow);
        }
        .hero-card { padding: 2.2rem; }
        .kicker {
            display: inline-flex;
            gap: .45rem;
            align-items: center;
            color: var(--accent);
            font-size: .9rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .12em;
        }
        h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 1rem; }
        h1 { font-size: clamp(2.1rem, 5vw, 4.6rem); letter-spacing: -.04em; margin-top: 1rem; }
        h2 { font-size: clamp(1.6rem, 3vw, 2.35rem); padding-top: .5rem; }
        h3 { font-size: 1.32rem; color: #fff; margin-top: 1.8rem; }
        h4 { font-size: 1.05rem; color: var(--accent); margin-top: 1.3rem; }
        p { margin: 0 0 1rem; }
        .lead { font-size: 1.12rem; color: var(--muted); max-width: 74ch; }
        .hero-side { padding: 1.5rem; display: grid; gap: 1rem; }
        .metric {
            padding: 1rem;
            background: rgba(255,255,255,.045);
            border: 1px solid var(--border);
            border-radius: 14px;
        }
        .metric strong { display:block; font-size: 1.15rem; color:#fff; }
        main { max-width: var(--max); margin: 0 auto; padding: 0 1rem 5rem; }
        .toc { padding: 1.3rem; margin-bottom: 1.5rem; }
        .toc h2 { font-size: 1.35rem; }
        .toc ol {
            columns: 2 300px;
            padding-left: 1.25rem;
            margin: .5rem 0 0;
        }
        .toc li { margin: .35rem 0; break-inside: avoid; }
        section { padding: 1.6rem; margin: 1.35rem 0; }
        .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
        .card {
            grid-column: span 4;
            border: 1px solid var(--border);
            background: rgba(255,255,255,.045);
            border-radius: 15px;
            padding: 1rem;
        }
        .card h3 { margin-top: 0; font-size: 1.08rem; }
        .step-list { counter-reset: step; list-style: none; padding: 0; margin: 1rem 0 0; }
        .step-list li {
            counter-increment: step;
            position: relative;
            padding: 1rem 1rem 1rem 4rem;
            margin: .85rem 0;
            border: 1px solid var(--border);
            border-radius: 14px;
            background: rgba(255,255,255,.04);
        }
        .step-list li::before {
            content: counter(step);
            position: absolute;
            left: 1rem;
            top: 1rem;
            width: 2rem;
            height: 2rem;
            display: grid;
            place-items: center;
            border-radius: 999px;
            background: rgba(94,234,212,.16);
            color: var(--accent);
            font-weight: 800;
        }
        .note {
            padding: 1rem 1.15rem;
            margin: 1rem 0;
            box-shadow: none;
            background: rgba(94,234,212,.08);
        }
        .note.warning { background: rgba(250,204,21,.08); }
        .note.danger { background: rgba(251,113,133,.08); }
        .tag-row { display: flex; flex-wrap: wrap; gap: .45rem; margin: .8rem 0 0; }
        .tag {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            border: 1px solid var(--border);
            background: rgba(255,255,255,.05);
            color: var(--muted);
            padding: .25rem .6rem;
            border-radius: 999px;
            font-size: .86rem;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 1rem 0;
            overflow: hidden;
            border-radius: 14px;
        }
        th, td {
            border: 1px solid var(--border);
            padding: .85rem;
            vertical-align: top;
        }
        th { background: rgba(94,234,212,.10); color: #fff; text-align: left; }
        tr:nth-child(even) td { background: rgba(255,255,255,.03); }
        .timeline { border-left: 2px solid rgba(94,234,212,.45); padding-left: 1rem; margin-left: .4rem; }
        .timeline p { position: relative; }
        .timeline p::before {
            content: "";
            position: absolute;
            left: -1.42rem;
            top: .45rem;
            width: .72rem;
            height: .72rem;
            border-radius: 50%;
            background: var(--accent);
        }
        code, .mono { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; }
        code {
            background: rgba(255,255,255,.08);
            border: 1px solid var(--border);
            padding: .08rem .35rem;
            border-radius: .35rem;
        }
        ul, ol { padding-left: 1.35rem; }
        li { margin: .35rem 0; }
        .source-box { padding: 1rem; box-shadow: none; margin: .8rem 0; background: rgba(255,255,255,.04); }
        .source-box strong { display:block; color:#fff; }
        footer { color: var(--muted); text-align:center; padding: 2rem 1rem; border-top:1px solid var(--border); }
        @media (max-width: 820px) {
            .hero-grid { grid-template-columns: 1fr; }
            .card { grid-column: span 12; }
            .topbar-inner { align-items: flex-start; flex-direction: column; }
        }
        @media print {
            body { background: #fff; color: #111; }
            .topbar { display: none; }
            section, .toc, .hero-card, .hero-side, .note, .source-box { box-shadow: none; border-color: #aaa; background: #fff; }
            a { color: #0645ad; text-decoration: underline; }
        }