/* ===================== Tokens (vx-*) ===================== */
:root{
    --vx-bg-0:#0b0c10; --vx-bg-1:#111217; --vx-bg-2:#15161d; --vx-grid:#171821;
    --vx-red-1:#ff2f4b; --vx-red-2:#ff6a64; --vx-ruby:#8f1e2a; --vx-ice:#c9d3ff;
    --vx-ok:#27d47a; --vx-warn:#ffb44e;
    --vx-text-1:#f4f6fb; --vx-text-2:#a9afbd; --vx-muted:#7d8393;
    --vx-radius:18px;
    --vx-elev: 0 0 0 1px rgba(255,255,255,.06), 0 28px 70px rgba(0,0,0,.6), 0 0 80px rgba(255,47,75,.10);
    --vx-glow: 0 0 30px rgba(255,47,75,.22), 0 0 16px rgba(201,211,255,.16);
    --vx-ring: 0 0 0 2px rgba(255,47,75,.35), 0 0 0 6px rgba(201,211,255,.18);
    --vx-sans: ui-sans-serif, system-ui, -apple-system, Inter, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
    --vx-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Fira Code", monospace;
    --vx-gap:22px; --vx-pad:40px;
    --vx-container: min(1280px, 100% - 40px);
    --vx-rail: 240px;

    /* Rhythm */
    --vx-space-section: 76px;
    --vx-space-hero-top: 110px;
    --vx-header-h: 64px;
}

/* ===================== Global ===================== */
*{box-sizing:border-box}
html,body{height:100%}
html{ scroll-behavior:smooth }
body{ margin:0; font:16px/1.6 var(--vx-sans); color:var(--vx-text-1); background:var(--vx-bg-0); overflow-x:hidden }
a{ color:var(--vx-ice); text-decoration:none } a:hover{ text-decoration:underline }

/* Monolithic depth background (fixed layers) */
body::before{
    content:""; position:fixed; inset:0; z-index:-3; pointer-events:none;
    background:
            radial-gradient(1200px 700px at 12% 10%, rgba(255,47,75,.16), transparent 58%),
            radial-gradient(1200px 700px at 88% 6%, rgba(143,30,42,.28), transparent 62%),
            linear-gradient(180deg, #0a0b0f 0%, #07080c 100%);
    background-attachment: fixed, fixed, fixed; filter: saturate(1.04);
}
body::after{
    content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
    background:
            radial-gradient(800px 800px at 50% 35%, rgba(255,106,100,.08), transparent 65%),
            conic-gradient(from 15deg at 50% 40%, rgba(255,47,75,.07) 0 25%, transparent 25% 50%, rgba(201,211,255,.06) 50% 75%, transparent 75% 100%),
            repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px),
            radial-gradient(1200px 900px at 50% 120%, rgba(0,0,0,.46), transparent 60%);
    background-attachment: fixed, fixed, fixed, fixed;
}
.vx-grid::before{
    content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:
            linear-gradient(transparent calc(100% - 1px), rgba(255,255,255,.04)),
            linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 100% 24px, 24px 100%;
    opacity:.16; mix-blend-mode:overlay;
}
@media (max-width:1000px){ .vx-grid::before{ background-size: 100% 22px, 22px 100% } }
@media (max-width:720px){ .vx-grid::before{ background-size: 100% 18px, 18px 100%; opacity:.14 } }

.vx-container{ width:var(--vx-container); margin:0 auto }
.vx-container, .vx-rail, .vx-slab, .vx-main, .vx-section{ min-width:0 }
[id]{ scroll-margin-top: calc(var(--vx-header-h) + 16px) }

/* ===================== Layout: side rail + main column ===================== */
.vx-layout{ display:grid; grid-template-columns: var(--vx-rail) 1fr; gap:var(--vx-gap) }
@media (max-width:1100px){ .vx-layout{ grid-template-columns: 1fr } }
.vx-rail{
    position:sticky; top:calc(var(--vx-header-h) + 20px); align-self:start; height:fit-content; padding:18px;
    border-radius:16px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.10);
    box-shadow: var(--vx-elev);
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
}
.vx-rail h3{ margin:0 0 10px }
.vx-rail nav{ display:flex; flex-direction:column; gap:8px }
.vx-rail a{ display:block; padding:8px 10px; border-radius:10px; font-weight:800; letter-spacing:.2px; color:var(--vx-text-1); border:1px solid transparent }
.vx-rail a:hover{ background:rgba(255,255,255,.04); border-color: rgba(255,255,255,.08) }

/* Active link via :has(:target) fallback */
body:has(#vault:target) .vx-rail a[href="#vault"],
body:has(#beacons:target) .vx-rail a[href="#beacons"],
body:has(#sigil:target) .vx-rail a[href="#sigil"],
body:has(#protocol:target) .vx-rail a[href="#protocol"],
body:has(#hazards:target) .vx-rail a[href="#hazards"],
body:has(#metrics:target) .vx-rail a[href="#metrics"],
body:has(#chronicle:target) .vx-rail a[href="#chronicle"],
body:has(#kb:target) .vx-rail a[href="#kb"]{
    background:linear-gradient(135deg, var(--vx-red-1), var(--vx-red-2));
    color:#0b0c10; border-color:transparent; box-shadow:var(--vx-glow);
    text-decoration:none;
}
/* Default active when no target yet → Vault */
body:not(:has(:target)) .vx-rail a[href="#vault"]{
    background:linear-gradient(135deg, var(--vx-red-1), var(--vx-red-2));
    color:#0b0c10; border-color:transparent; box-shadow:var(--vx-glow);
}

/* Progressive enhancement: highlight by scroll (no JS) using :in-view */
@supports selector(body:has(#vault:in-view)){
    .vx-rail a{ background:none; color:var(--vx-text-1); box-shadow:none }
    body:has(#vault:in-view) .vx-rail a[href="#vault"],
    body:has(#beacons:in-view) .vx-rail a[href="#beacons"],
    body:has(#sigil:in-view) .vx-rail a[href="#sigil"],
    body:has(#protocol:in-view) .vx-rail a[href="#protocol"],
    body:has(#hazards:in-view) .vx-rail a[href="#hazards"],
    body:has(#metrics:in-view) .vx-rail a[href="#metrics"],
    body:has(#chronicle:in-view) .vx-rail a[href="#chronicle"],
    body:has(#kb:in-view) .vx-rail a[href="#kb"]{
        background:linear-gradient(135deg, var(--vx-red-1), var(--vx-red-2));
        color:#0b0c10; border-color:transparent; box-shadow:var(--vx-glow);
    }
}

.vx-main{ display:flex; flex-direction:column; gap:var(--vx-space-section) }

/* ===================== Header ===================== */
header{ position:sticky; top:0; z-index:50; background:rgba(11,12,16,.58); border-bottom:1px solid rgba(255,255,255,.08); backdrop-filter: blur(12px) saturate(130%); -webkit-backdrop-filter: blur(12px) saturate(130%) }
.vx-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; flex-wrap:wrap; min-height: var(--vx-header-h) }
.vx-brand{ display:flex; align-items:center; gap:12px; font-weight:900; letter-spacing:.6px }
.vx-logo{ width:30px; height:30px; border-radius:10px; background: radial-gradient(120% 120% at 30% 30%, var(--vx-red-2), var(--vx-red-1)); box-shadow: var(--vx-glow) }
.vx-topnav{ display:flex; gap:14px; flex-wrap:wrap }
.vx-topnav a{ font-weight:900; color:var(--vx-text-1) }
.vx-topnav a:hover{ color:var(--vx-ice) }
@media (max-width:1100px){ .vx-topnav{ display:none } }

/* ===================== Components ===================== */
.vx-slab{
    position:relative;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
    border:1px solid rgba(255,255,255,.10);
    box-shadow: var(--vx-elev);
    backdrop-filter: blur(12px) saturate(130%); -webkit-backdrop-filter: blur(12px) saturate(130%);
    padding: var(--vx-pad);
    border-radius: 0; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    transition: transform .25s ease, box-shadow .3s ease, border-color .3s ease;
    overflow:hidden;
}
.vx-slab:hover{ transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 32px 80px rgba(0,0,0,.62), 0 0 80px rgba(255,47,75,.12); border-color: rgba(255,255,255,.14) }
@media (max-width:720px){ .vx-slab{ padding:24px; clip-path: none; border-radius:16px } }

.vx-pill{ display:inline-block; padding:12px 20px; border-radius:999px; background: linear-gradient(135deg, var(--vx-red-1), var(--vx-red-2)); background-size:220% 220%; color:#0b0c10; font-weight:900; letter-spacing:.3px; border:none; box-shadow: var(--vx-glow); transition: transform .2s ease; animation: vx-sheen 6s linear infinite }
.vx-pill:hover{ transform: translateY(-1px) } .vx-pill:active{ transform: translateY(0) scale(.98) }
.vx-pill.ghost{ background: linear-gradient(135deg, #1b1c24, #232430); color:var(--vx-text-1); border:1px solid rgba(255,255,255,.08); animation: vx-sheen 9s linear infinite }
@keyframes vx-sheen{ 0%{ background-position: 0% 50% } 50%{ background-position: 100% 50% } 100%{ background-position: 0% 50% } }

.vx-chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; font-weight:900; font-size:12px }
.vx-chip.ok{ background:rgba(39,212,122,.14); color:#8affc8; border:1px solid rgba(39,212,122,.26) }
.vx-chip.slow{ background:rgba(255,180,78,.14); color:#ffdfad; border:1px solid rgba(255,180,78,.26) }

.vx-kicker{ font-size:12px; letter-spacing:.32em; text-transform:uppercase; color:var(--vx-muted) }
h1{ font-size:clamp(34px, 6.8vw, 72px); line-height:1.06; margin:0 0 14px; letter-spacing:.5px }
h2{ font-size:clamp(22px, 3.2vw, 32px); line-height:1.16; margin:0 0 14px }
h3{ font-size:clamp(16px, 2.2vw, 18px); margin:0 0 10px }
.vx-lead{ font-size:18px; color:var(--vx-text-1) }
.vx-muted{ color:var(--vx-text-2) }
.vx-kbd{ font-family:var(--vx-mono); font-size:13px; background:#121420; border:1px solid rgba(255,255,255,.12); padding:2px 6px; border-radius:6px }

/* ===================== Hero (Vault) — flowing grid/gradient */
.vx-hero{ position:relative; margin-top: 1.1rem; overflow:hidden }
.vx-hero .vx-orbit{
    position:absolute; inset:-8% -8% -8% -8%; z-index:-1; pointer-events:none;
    background:
            linear-gradient(120deg, rgba(255,47,75,.08), rgba(255,106,100,.06), rgba(201,211,255,.06)),
            radial-gradient(800px 520px at 20% 15%, rgba(255,47,75,.10), transparent 60%),
            radial-gradient(900px 460px at 80% 8%, rgba(255,106,100,.10), transparent 64%),
            repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px);
    background-size: 400% 400%, 100% 100%, 100% 100%, 100% 100%;
    animation: vx-flow 22s ease-in-out infinite;
    mix-blend-mode:screen;
}
@keyframes vx-flow{ 0%{ background-position: 0% 50% } 50%{ background-position: 100% 50% } 100%{ background-position: 0% 50% } }
.vx-hero .vx-stack{ display:grid; grid-template-columns: 1fr; gap:18px; align-items:center; justify-items:center; text-align:center }
.vx-hero h1 span{ background:linear-gradient(90deg, var(--vx-ice), #fff, var(--vx-red-2)); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 4px 40px rgba(255,106,100,.25) }
.vx-hero .vx-actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center }

/* ===================== Vertical sections and subnavs ===================== */
section{ position:relative; z-index:1 }
.vx-section{ display:grid; grid-template-columns: 1fr; gap:18px }
.vx-subnav{ display:flex; gap:8px; flex-wrap:wrap; padding:8px; border-radius:12px; border:1px solid rgba(255,255,255,.10); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) }
.vx-subnav a{ padding:6px 10px; border-radius:999px; font-weight:800; letter-spacing:.2px; color:var(--vx-text-1); border:1px solid transparent; text-decoration:none }
.vx-subnav a:hover{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12) }

/* highlight current subanchor by :target (fallback) */
#sigil:has(#sigil-fp:target) .vx-subnav a[href="#sigil-fp"],
#sigil:has(#sigil-key:target) .vx-subnav a[href="#sigil-key"],
#sigil:has(#sigil-check:target) .vx-subnav a[href="#sigil-check"],
#beacons:has(#beacon-alpha:target) .vx-subnav a[href="#beacon-alpha"],
#beacons:has(#beacon-beta:target) .vx-subnav a[href="#beacon-beta"],
#beacons:has(#beacon-gamma:target) .vx-subnav a[href="#beacon-gamma"]{
    background:linear-gradient(135deg, var(--vx-red-1), var(--vx-red-2)); color:#0b0c10; border-color:transparent; box-shadow:var(--vx-glow);
}
/* Progressive enhancement: :in-view for subanchors */
@supports selector(#sigil:has(#sigil-key:in-view)){
    #sigil:has(#sigil-fp:in-view) .vx-subnav a[href="#sigil-fp"],
    #sigil:has(#sigil-key:in-view) .vx-subnav a[href="#sigil-key"],
    #sigil:has(#sigil-check:in-view) .vx-subnav a[href="#sigil-check"],
    #beacons:has(#beacon-alpha:in-view) .vx-subnav a[href="#beacon-alpha"],
    #beacons:has(#beacon-beta:in-view) .vx-subnav a[href="#beacon-beta"],
    #beacons:has(#beacon-gamma:in-view) .vx-subnav a[href="#beacon-gamma"]{
        background:linear-gradient(135deg, var(--vx-red-1), var(--vx-red-2)); color:#0b0c10; border-color:transparent; box-shadow:var(--vx-glow);
    }
}

/* ===================== Beacons (timeline) ===================== */
.vx-timeline{ position:relative; padding-left:28px; display:grid; gap:14px }
.vx-timeline::before{ content:""; position:absolute; left:10px; top:0; bottom:0; width:2px; background:linear-gradient(180deg, rgba(255,255,255,.18), transparent) }
.vx-node{ position:relative; }
.vx-node::before{ content:""; position:absolute; left:-19px; top:12px; width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg, var(--vx-red-1), var(--vx-red-2)); box-shadow:0 0 0 3px rgba(255,47,75,.15) }
.vx-beacon{ display:grid; gap:10px; padding:14px; border:1px solid rgba(255,255,255,.10); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px) }
.vx-beacon-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap }
.vx-beacon-name{ font-weight:900; letter-spacing:.3px }
.vx-act{ display:flex; align-items:center; gap:8px }
.vx-copy{ display:inline-flex; align-items:center; justify-content:center; position:relative; padding:6px 10px; border-radius:999px; font-weight:900; font-size:12px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); text-transform:uppercase; letter-spacing:.08em; cursor:pointer; box-shadow: inset 0 0 12px rgba(255,255,255,.06); transition: transform .15s ease, box-shadow .2s ease }
.vx-copy:active{ transform: translateY(1px) scale(.98) }
.vx-beacon:focus-within .vx-copy::after{ content:"Copied"; position:absolute; right:0; top:-26px; font-size:11px; padding:2px 8px; border-radius:999px; background:linear-gradient(135deg, var(--vx-red-1), var(--vx-red-2)); color:#0b0c10; box-shadow: var(--vx-glow) }
.vx-url{font-size: 18px; width:100%; min-height:40px; resize:none; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.10); background:#121420; color:var(--vx-text-1); font-family:var(--vx-mono); line-height:1.35; white-space:pre-wrap; word-break:break-all }
.vx-url:focus{ outline:none; box-shadow: var(--vx-ring) }

/* ===================== Sigil (PGP) poster ===================== */
.vx-poster{ display:grid; gap:14px }
.vx-fp{ display:grid; gap:8px; grid-template-columns: repeat(5, 1fr) }
@media (max-width:900px){ .vx-fp{ grid-template-columns: repeat(4, 1fr) } }
@media (max-width:540px){
    .vx-rail{
        display: none;
    }
    .vx-head{
        margin:0 auto;
        justify-content: center;

    }
    .vx-fp{ grid-template-columns: repeat(3, 1fr) } }
.vx-fp .vx-block{ background:#121420; border:1px solid rgba(255,255,255,.10); padding:10px 12px; border-radius:10px; font-family:var(--vx-mono); letter-spacing:.06em; text-align:center }

/* ===================== Protocol (How‑To) stepper ===================== */
.vx-stepper{ position:relative; padding-left:30px; display:grid; gap:14px }
.vx-stepper::before{ content:""; position:absolute; left:12px; top:0; bottom:0; width:2px; background:linear-gradient(180deg, rgba(255,255,255,.18), transparent) }
.vx-step{ position:relative }
.vx-step::before{ content:counter(step); counter-increment:step; position:absolute; left:-4px; top:0; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font:700 12px/1 var(--vx-sans); color:#0b0c10; background:linear-gradient(135deg, var(--vx-red-1), var(--vx-red-2)); box-shadow:0 0 0 3px rgba(255,47,75,.15) }
.vx-stepper{ counter-reset:step }

/* ===================== Metrics — horizontal board (from v4) ===================== */
.vx-board{ display:grid; gap:var(--vx-gap) }
.vx-board .vx-wide{ grid-column: 1 / -1 }
.vx-rrow{ display:grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap:var(--vx-gap) }
@media (max-width:980px){ .vx-rrow{ grid-template-columns: 1fr } }

.vx-card{ padding:22px; border-radius:14px; border:1px solid rgba(255,255,255,.10); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); box-shadow: var(--vx-elev) }
.vx-kpi{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border:1px solid rgba(255,255,255,.10); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border-radius:12px }

.vx-donut{ --val: 75; --col: var(--vx-red-1); display:grid; grid-template-columns: 160px 1fr; align-items:center; gap:16px }
.vx-chart{ position:relative; width:160px; aspect-ratio:1; border-radius:50%;
    background: conic-gradient(var(--col) calc(var(--val)*1%), #1a1c2a 0);
    box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset, 0 0 30px rgba(255,47,75,.12);
    display:grid; place-items:center;
}
.vx-chart::after{ content:""; position:absolute; inset:12px; border-radius:50%; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset }
.vx-num{ position:relative; font:900 24px/1 var(--vx-sans) }
.vx-cap{ font:600 12px/1.2 var(--vx-sans); color:var(--vx-text-2) }

.vx-heat{ display:grid; grid-template-columns: repeat(10, 1fr); gap:6px; align-items:center }
.vx-heat .c{ width:100%; height:16px; border-radius:4px; background:#1a1c2a; border:1px solid rgba(255,255,255,.08) }
.vx-heat .c.l1{ background:linear-gradient(180deg, rgba(255,47,75,.35), rgba(255,47,75,.15)) }
.vx-heat .c.l2{ background:linear-gradient(180deg, rgba(255,106,100,.35), rgba(255,106,100,.15)) }
.vx-heat .c.l3{ background:linear-gradient(180deg, rgba(201,211,255,.35), rgba(201,211,255,.15)) }

/* Utilities */
.vx-list{ list-style:none; padding:0; margin:0 }
.vx-grid3{ display:grid; grid-template-columns: repeat(3,1fr); gap:var(--vx-gap) } @media (max-width:900px){ .vx-grid3{ grid-template-columns:1fr } }
.vx-small{ font-size:13px; color:var(--vx-muted) }

@media (prefers-reduced-motion: reduce){ *{ animation: none !important; transition: none !important } }