@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');



:root {

    --primary: #5b48d4;

    --primary-2: #765fe9;

    --primary-dark: #2e1f8c;

    --accent: #a893ff;

    --text: #0d1a3d;

    --text-light: #334066;

    --muted: #6a7290;

    --border: #e1e3f1;

    --card: #fff;

    --background: #f5f6fd;

    --success: #1f9c6a;

    --danger: #d94a5e;

    --gold: #d89b28;

    --shadow-sm: 0 8px 22px rgba(52,45,121,.07);

    --shadow-md: 0 18px 44px rgba(52,45,121,.11);

    --shadow-lg: 0 28px 80px rgba(71,55,170,.17);

    --max: 1180px;

}



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

html { scroll-behavior: smooth; }

body {

    min-height: 100vh;

    overflow-x: hidden;

    color: var(--text);

    background: var(--background);

    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;

}

a { color: inherit; text-decoration: none; }

button, input, select { font: inherit; }

button { cursor: pointer; }

img { display: block; max-width: 100%; }

svg { width: 1em; height: 1em; }



.page-bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }

.page-bg::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        radial-gradient(circle at 7% 4%, rgba(207,198,255,.74), transparent 31%),

        radial-gradient(circle at 93% 19%, rgba(196,222,255,.64), transparent 28%),

        radial-gradient(circle at 52% 94%, rgba(227,213,255,.56), transparent 35%),

        linear-gradient(180deg,#fafaff,#f4f5fd 50%,#f9f9ff);

}

.page-grid {

    position: absolute; inset: 0;

    background-image:

        linear-gradient(rgba(91,72,212,.045) 1px,transparent 1px),

        linear-gradient(90deg,rgba(91,72,212,.045) 1px,transparent 1px);

    background-size: 58px 58px;

    mask-image: radial-gradient(ellipse at 50% 32%,#000 18%,transparent 75%);

}

.glow { position: absolute; border-radius: 50%; filter: blur(86px); opacity: .42; }

.glow-a { width: 430px; height: 430px; top: 13%; left: -160px; background: #9c8cff; }

.glow-b { width: 520px; height: 520px; top: 42%; right: -200px; background: #bcdcff; }

.glow-c { width: 390px; height: 390px; bottom: -180px; left: 36%; background: #d2bcff; }



.reading-progress {

    position: fixed;

    top: 0; left: 0;

    width: 100%;

    height: 3px;

    z-index: 2000;

    transform: scaleX(0);

    transform-origin: left;

    background: linear-gradient(90deg,#765fe9,#a893ff,#5b48d4);

    box-shadow: 0 0 14px rgba(91,72,212,.25);

}



.site-header {

    position: sticky; top: 12px; z-index: 999;

    width: min(1150px, calc(100% - 32px));

    margin: 12px auto 0;

}

.header-inner {

    position: relative;

    display: flex; align-items: center; gap: 22px;

    padding: 10px 18px;

    background: rgba(255,255,255,.95);

    border: 1px solid rgba(220,222,240,.92);

    border-radius: 14px;

    box-shadow: 0 7px 25px rgba(56,52,125,.08);

    backdrop-filter: blur(16px);

}

.header-brand {

    display: flex; align-items: center; gap: 10px; flex-shrink: 0;

    font-family: 'Sora',sans-serif; font-size: 13px; font-weight: 800;

    letter-spacing: .1em; color: var(--primary-dark);

}

.header-brand img { width: 28px; height: 28px; padding: 3px; object-fit: contain; border-radius: 50%; background: rgba(118,98,233,.12); }

.header-collapse { display: flex; align-items: center; gap: 22px; margin-left: auto; }

.header-nav { display: flex; align-items: center; gap: 4px; }

.header-nav a { padding: 7px 12px; color: #3a4467; border-radius: 8px; font-size: 11.5px; font-weight: 700; transition: .2s ease; }

.header-nav a:hover, .header-nav a.is-active { color: var(--primary); background: rgba(118,98,233,.09); }

.header-actions { display: flex; align-items: center; gap: 10px; }

.header-profile { width: 38px; height: 38px; overflow: hidden; border-radius: 50%; border: 1px solid #d9d2ff; background: linear-gradient(135deg,#f0edff,#e0d9ff); transition: .2s ease; }

.header-profile:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 8px 18px rgba(98,82,220,.25); }

.header-profile img { width: 100%; height: 100%; object-fit: cover; }

.logout-btn, .header-cta {

    display: inline-flex; align-items: center; justify-content: center; gap: 6px;

    padding: 8px 14px; border-radius: 999px;

    font-family: 'Sora',sans-serif; font-size: 11px; font-weight: 700;

}

.logout-btn { color: #b3324a; background: rgba(217,74,94,.08); border: 1px solid rgba(217,74,94,.2); }

.logout-btn svg { width: 14px; height: 14px; }

.header-cta { color: #fff; background: linear-gradient(135deg,#7765ed,#5945ce); box-shadow: 0 7px 17px rgba(98,82,220,.28); }

.nav-toggle { display: none; }

.nav-toggle-label { display: none; }



.resource-page { width: min(var(--max), calc(100% - 32px)); margin: 30px auto 100px; }



.vault-hero {

    position: relative;

    display: grid;

    grid-template-columns: 1.08fr .92fr;

    gap: 38px;

    min-height: 610px;

    align-items: center;

    padding: clamp(34px,5vw,62px);

    overflow: hidden;

    isolation: isolate;

    border: 1px solid rgba(218,216,239,.95);

    border-radius: 30px;

    background:

        radial-gradient(circle at 85% 18%,rgba(168,147,255,.27),transparent 34%),

        linear-gradient(135deg,rgba(255,255,255,.985),rgba(246,244,255,.96));

    box-shadow: var(--shadow-lg);

}

.vault-hero::before {

    content: "";

    position: absolute;

    width: 500px; height: 500px;

    right: -220px; bottom: -250px;

    border-radius: 50%;

    border: 80px solid rgba(91,72,212,.045);

    z-index: -1;

}

.hero-copy { position: relative; z-index: 5; }

.hero-badge {

    display: inline-flex; align-items: center; gap: 8px;

    margin-bottom: 21px; padding: 7px 13px 7px 10px;

    color: var(--primary);

    background: rgba(91,72,212,.08);

    border: 1px solid rgba(91,72,212,.16);

    border-radius: 999px;

    font-family:'Sora',sans-serif; font-size:10px; font-weight:800; letter-spacing:.11em;

}

.hero-badge span { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 5px rgba(91,72,212,.1); animation: pulse 2s ease-in-out infinite; }

@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(91,72,212,.025); } }

.hero-kicker { color: #8576e8; font-family:'Sora',sans-serif; font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }

.hero-copy h1 {

    max-width: 700px; margin-top: 8px;

    font-family:'Sora',sans-serif; font-size: clamp(36px,5.2vw,60px); line-height:1.05;

    letter-spacing:-.05em;

    background: linear-gradient(135deg,#172354 12%,#5b48d4 72%);

    -webkit-background-clip:text; background-clip:text; color:transparent;

}

.hero-lead { margin-top: 18px; max-width: 740px; color: var(--text-light); font-size: 13.3px; line-height: 1.85; }

.hero-lead-secondary { margin-top: 12px; color: var(--muted); font-size: 12.2px; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; }

.hero-btn {

    min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;

    padding: 11px 17px; border-radius: 13px; border: 0;

    font-family:'Sora',sans-serif; font-size: 10.8px; font-weight: 800;

    transition: .22s ease;

}

.hero-btn:hover { transform: translateY(-2px); }

.hero-btn svg { width: 17px; height: 17px; }

.hero-btn.primary { color:#fff; background:linear-gradient(135deg,#7765ed,#5945ce); box-shadow:0 10px 22px rgba(91,72,212,.28); }

.hero-btn.soft { color:var(--primary-dark); background:#fff; border:1px solid #dedbf1; box-shadow:var(--shadow-sm); }



.hero-visual { position: relative; min-height: 470px; }

.photo-card {

    position: absolute;

    overflow: hidden;

    background: #fff;

    border: 1px solid rgba(215,211,241,.92);

    box-shadow: 0 24px 60px rgba(63,49,150,.18);

}

.photo-card img { width: 100%; height: 100%; object-fit: cover; }

.photo-card figcaption {

    position: absolute; left: 10px; bottom: 10px;

    padding: 5px 9px; color: var(--primary-dark);

    background: rgba(255,255,255,.9); border: 1px solid rgba(223,219,244,.9);

    border-radius: 999px; backdrop-filter: blur(8px);

    font-family:'Sora',sans-serif; font-size:8.8px; font-weight:800;

}

.photo-main {

    z-index: 3; width: 72%; height: 340px; left: 9%; top: 50px;

    border-radius: 26px; transform: rotate(-2deg); animation: floatMain 5s ease-in-out infinite;

}

.photo-small { z-index: 4; width: 40%; height: 170px; border-radius: 20px; }

.photo-small-a { right: -2%; top: 2%; transform: rotate(5deg); animation: floatSmall 5.8s ease-in-out infinite .6s; }

.photo-small-b { right: 3%; bottom: 0; transform: rotate(3deg); animation: floatSmall 6.2s ease-in-out infinite 1.1s; }

@keyframes floatMain { 50% { transform: translateY(-9px) rotate(.5deg); } }

@keyframes floatSmall { 50% { transform: translateY(-7px) rotate(-1deg); } }

.visual-orbit { position:absolute; border-radius:50%; border:1px dashed rgba(91,72,212,.24); z-index:1; }

.orbit-1 { width: 430px; height:430px; left:0; top:20px; animation:spin 24s linear infinite; }

.orbit-2 { width:330px; height:330px; left:45px; top:70px; border-style:solid; border-color:rgba(168,147,255,.12); animation:spin 16s linear infinite reverse; }

@keyframes spin { to { transform: rotate(360deg); } }

.visual-chip {

    position:absolute; z-index:6; padding:7px 10px; border-radius:10px;

    color:var(--primary-dark); background:rgba(255,255,255,.94); border:1px solid #e2def5;

    box-shadow:0 7px 18px rgba(72,56,155,.12); font-size:9px; font-weight:800;

}

.chip-a { left:0; bottom:27%; }

.chip-b { right:10%; top:41%; }

.chip-c { left:19%; bottom:4%; }



.vault-stats {

    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;

    margin-top:20px; padding:12px; border-radius:18px;

    background:rgba(255,255,255,.84); border:1px solid var(--border); box-shadow:var(--shadow-sm);

    backdrop-filter:blur(10px);

}

.stat-card { display:flex; align-items:center; gap:11px; min-width:0; padding:14px; background:#fff; border:1px solid #ececf5; border-radius:14px; }

.stat-icon { width:39px; height:39px; flex:0 0 auto; display:grid; place-items:center; border-radius:11px; color:var(--primary); background:#f0edff; }

.stat-icon svg { width:18px; height:18px; }

.stat-card small { display:block; color:var(--muted); font-size:8px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }

.stat-card strong { display:block; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:'Sora',sans-serif; font-size:12px; }



.evidence-orbit, .reference-library, .image-notes {

    margin-top:24px; padding:clamp(24px,4vw,38px);

    background:rgba(255,255,255,.93);

    border:1px solid var(--border); border-radius:24px; box-shadow:var(--shadow-md);

}

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

.section-kicker { display:block; margin-bottom:4px; color:var(--primary); font-family:'Sora',sans-serif; font-size:9.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }

.section-head h2, .image-notes h2 { font-family:'Sora',sans-serif; font-size:clamp(23px,3vw,31px); line-height:1.15; letter-spacing:-.025em; }

.section-head p, .image-notes p { margin-top:7px; max-width:760px; color:var(--muted); font-size:12px; }

.section-mark { width:46px; height:46px; flex:0 0 auto; display:grid; place-items:center; border-radius:14px; color:var(--primary); background:#f0edff; border:1px solid #dcd6ff; }

.section-mark svg { width:21px; height:21px; }



.orbit-board {

    position:relative;

    min-height:440px;

    display:grid; place-items:center;

    overflow:hidden;

    border-radius:22px;

    background:

        radial-gradient(circle at 50% 50%,rgba(91,72,212,.08),transparent 28%),

        linear-gradient(145deg,#fbfbff,#f4f1ff);

    border:1px solid #e3e0f4;

}

.orbit-center {

    position:relative; z-index:5;

    width:128px; height:128px;

    display:grid; place-items:center; align-content:center;

    color:#fff; border-radius:50%;

    background:linear-gradient(135deg,#765fe9,#4c39be);

    box-shadow:0 18px 38px rgba(91,72,212,.28),0 0 0 14px rgba(91,72,212,.055);

}

.orbit-center span { font-size:8px; font-weight:800; letter-spacing:.15em; }

.orbit-center strong { font-family:'Sora',sans-serif; font-size:15px; }

.ring { position:absolute; border-radius:50%; border:1px dashed rgba(91,72,212,.22); animation:spin 26s linear infinite; }

.ring-a { width:230px; height:230px; }

.ring-b { width:340px; height:340px; animation-direction:reverse; animation-duration:32s; }

.ring-c { width:460px; height:460px; border-style:solid; border-color:rgba(91,72,212,.07); animation-duration:42s; }

.orbit-node {

    position:absolute; z-index:6; width:142px; min-height:104px; padding:14px 12px;

    border:1px solid #dedaf1; border-radius:18px; color:var(--text); background:rgba(255,255,255,.95);

    box-shadow:0 13px 28px rgba(63,49,150,.1); transition:.23s ease; text-align:left;

}

.orbit-node:hover { transform:translateY(-5px) scale(1.025); border-color:#c8c0ff; box-shadow:0 20px 36px rgba(63,49,150,.16); }

.orbit-node > span { width:34px; height:34px; display:grid; place-items:center; color:var(--primary); background:#f0edff; border-radius:10px; }

.orbit-node strong { display:block; margin-top:8px; font-family:'Sora',sans-serif; font-size:11px; }

.orbit-node small { display:block; margin-top:2px; color:var(--muted); font-size:8.7px; }

.node-a { left:8%; top:12%; }

.node-b { right:8%; top:12%; }

.node-c { left:9%; bottom:10%; }

.node-d { right:9%; bottom:10%; }



.library-head { align-items:center; }

.result-badge {

    min-width:72px; height:72px; flex:0 0 auto;

    display:grid; place-items:center; align-content:center;

    border-radius:19px; color:var(--primary); background:linear-gradient(145deg,#f4f1ff,#eae5ff);

    border:1px solid #dcd6ff;

}

.result-badge strong { font-family:'Sora',sans-serif; font-size:22px; line-height:1; }

.result-badge span { margin-top:4px; color:var(--muted); font-size:8px; text-transform:uppercase; letter-spacing:.08em; }



.library-toolbar {

    position:sticky; top:94px; z-index:20;

    margin-bottom:18px; padding:13px;

    border-radius:18px; background:rgba(250,250,255,.94);

    border:1px solid #e3e3ef; box-shadow:0 9px 26px rgba(52,45,121,.08); backdrop-filter:blur(14px);

}

.search-box {

    height:48px; display:flex; align-items:center; gap:10px;

    padding:0 13px; border-radius:13px; background:#fff; border:1px solid #dedee9;

}

.search-box:focus-within { border-color:#9d8ff0; box-shadow:0 0 0 4px rgba(91,72,212,.075); }

.search-box svg { width:18px; height:18px; color:var(--primary); }

.search-box input { flex:1; min-width:0; border:0; outline:0; color:var(--text); background:transparent; font-size:11px; }

.search-box kbd { padding:3px 7px; border-radius:7px; color:#8a8fa4; background:#f4f4f8; border:1px solid #e1e1ea; font-size:9px; box-shadow:inset 0 -1px 0 #d8d8e1; }

.toolbar-row { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:10px; }

.filter-pills { display:flex; flex-wrap:wrap; gap:7px; }

.filter-pill {

    display:inline-flex; align-items:center; gap:5px; min-height:34px; padding:7px 10px;

    border:1px solid #e0e0eb; border-radius:999px; color:#4b5679; background:#fff; font-size:9.5px; font-weight:800; transition:.18s ease;

}

.filter-pill:hover, .filter-pill.is-active { color:var(--primary); background:#f0edff; border-color:#bfb4ff; }

.filter-pill svg { width:13px; height:13px; }

.sort-box { min-height:36px; display:flex; align-items:center; gap:7px; padding:0 10px; border:1px solid #e0e0eb; border-radius:10px; background:#fff; }

.sort-box svg { width:14px; height:14px; color:var(--primary); }

.sort-box select { border:0; outline:0; color:var(--text-light); background:transparent; font-size:9.5px; font-weight:700; }



.active-query {

    display:flex; align-items:center; gap:7px; width:fit-content; margin:0 0 14px; padding:7px 9px 7px 11px;

    border-radius:999px; color:var(--primary-dark); background:#f0edff; border:1px solid #d8d1ff; font-size:9.5px;

}

.active-query button { border:0; padding:3px 7px; border-radius:999px; color:var(--primary); background:#fff; font-size:8.5px; font-weight:800; }



.reference-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }

.reference-card {

    position:relative; min-width:0; padding:18px 18px 17px 25px; overflow:hidden;

    border:1px solid #e4e4ef; border-radius:18px; background:#fff; box-shadow:var(--shadow-sm);

    transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;

}

.reference-card:hover { transform:translateY(-4px); border-color:#cfc8ff; box-shadow:0 18px 36px rgba(70,55,155,.12); }

.reference-card.is-spotlight { animation:spotlight 1.3s ease; border-color:#8e7cf0; box-shadow:0 0 0 5px rgba(91,72,212,.09),0 20px 42px rgba(70,55,155,.18); }

@keyframes spotlight { 25% { transform:translateY(-8px) scale(1.012); } 55% { transform:translateY(-3px) scale(1); } }

.card-spine { position:absolute; left:0; top:0; bottom:0; width:6px; background:linear-gradient(180deg,#765fe9,#a893ff); }

.reference-meta { display:flex; align-items:center; gap:8px; }

.reference-number {

    width:32px; height:29px; display:grid; place-items:center; flex:0 0 auto;

    border-radius:9px; color:var(--primary); background:#f0edff;

    font-family:'Sora',sans-serif; font-size:8.5px; font-weight:800;

}

.meta-pills { display:flex; flex-wrap:wrap; gap:5px; min-width:0; }

.meta-pills span { padding:4px 7px; border-radius:999px; color:#616985; background:#f7f7fb; border:1px solid #e8e8ef; font-size:7.8px; font-weight:800; }

.bookmark-btn {

    margin-left:auto; width:31px; height:31px; flex:0 0 auto; display:grid; place-items:center;

    border:1px solid #e3e3ec; border-radius:9px; color:#9296aa; background:#fff; transition:.18s ease;

}

.bookmark-btn:hover, .bookmark-btn[aria-pressed="true"] { color:#fff; background:linear-gradient(135deg,#806ef0,#5b48d4); border-color:#5b48d4; }

.bookmark-btn svg { width:14px; height:14px; }

.reference-citation { margin-top:14px; color:#2f395d; font-size:10.8px; line-height:1.72; }

.reference-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:15px; padding-top:12px; border-top:1px solid #eeeef4; }

.reference-action {

    min-height:34px; display:inline-flex; align-items:center; justify-content:center; gap:6px;

    padding:7px 9px; border:1px solid #e1e1eb; border-radius:9px; color:#59627d; background:#fafafd; font-size:8.8px; font-weight:800; transition:.18s ease;

}

button.reference-action:hover, a.reference-action:hover { color:var(--primary); background:#f0edff; border-color:#cfc6ff; }

.reference-action svg { width:13px; height:13px; }

.no-link { opacity:.68; cursor:default; }



.empty-state { padding:52px 20px; text-align:center; border-radius:18px; background:#fafafd; border:1px dashed #dcdcec; }

.empty-state > span { width:50px; height:50px; display:grid; place-items:center; margin:0 auto; border-radius:14px; color:var(--primary); background:#f0edff; }

.empty-state > span svg { width:22px; height:22px; }

.empty-state h3 { margin-top:12px; font-family:'Sora',sans-serif; font-size:14px; }

.empty-state p { margin-top:5px; color:var(--muted); font-size:10.5px; }

.empty-state button { margin-top:14px; padding:8px 12px; border:0; border-radius:9px; color:#fff; background:var(--primary); font-size:9px; font-weight:800; }



.image-notes { display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:24px; overflow:hidden; }

.image-notes-copy a { display:inline-flex; align-items:center; gap:6px; margin-top:15px; color:var(--primary); font-size:9.5px; font-weight:800; }

.image-notes-copy a svg { width:14px; height:14px; }

.mini-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }

.mini-gallery figure { position:relative; min-height:220px; overflow:hidden; border-radius:18px; border:1px solid #dfdced; }

.mini-gallery figure:nth-child(2) { transform:translateY(18px); }

.mini-gallery figure:nth-child(3) { transform:translateY(6px); }

.mini-gallery img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }

.mini-gallery figcaption {

    position:absolute; left:10px; right:10px; bottom:10px; padding:7px 9px;

    border-radius:9px; color:#fff; background:rgba(23,31,60,.72); backdrop-filter:blur(8px); font-size:7.5px; line-height:1.4;

}



.toast-stack { position:fixed; right:18px; bottom:18px; z-index:1400; display:grid; gap:8px; width:min(350px,calc(100% - 36px)); }

.toast { padding:12px 14px; border-radius:12px; color:var(--text); background:rgba(255,255,255,.97); border:1px solid #dedeea; border-left:4px solid var(--success); box-shadow:0 16px 36px rgba(42,34,103,.16); font-size:10px; font-weight:700; animation:toastIn .28s ease both; }

.toast.is-error { border-left-color:var(--danger); }

@keyframes toastIn { from { opacity:0; transform:translateY(10px); } }



.back-top {

    position:fixed; right:20px; bottom:20px; z-index:1000; width:43px; height:43px;

    display:grid; place-items:center; border:0; border-radius:50%; color:#fff; background:linear-gradient(135deg,#765fe9,#5945ce);

    box-shadow:0 10px 24px rgba(91,72,212,.3); opacity:0; pointer-events:none; transform:translateY(12px); transition:.23s ease;

}

.back-top.is-visible { opacity:1; pointer-events:auto; transform:none; }

.back-top svg { width:17px; height:17px; }



@media (max-width: 960px) {

    .vault-hero { grid-template-columns:1fr; }

    .hero-visual { min-height:430px; max-width:650px; width:100%; margin:0 auto; }

    .vault-stats { grid-template-columns:repeat(2,1fr); }

}



@media (max-width: 780px) {

    .site-header { width:calc(100% - 20px); top:8px; margin-top:8px; }

    .header-inner { flex-wrap:wrap; gap:12px; padding:10px 14px; }

    .header-brand { gap:8px; }

    .header-brand img { width:24px; height:24px; }

    .header-brand span { font-size:12px; }



    .nav-toggle-label {

        display:flex; margin-left:auto; width:40px; height:40px; cursor:pointer;

        align-items:center; justify-content:center; flex-direction:column; gap:4px;

        border-radius:11px; background:rgba(98,82,220,.08); border:1px solid rgba(98,82,220,.15);

        -webkit-tap-highlight-color:transparent;

    }

    .nav-toggle-label span { width:18px; height:2px; border-radius:2px; background:var(--primary); transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .25s ease; }

    .header-collapse {

        display:flex; flex:0 0 100%; width:100%; flex-direction:column; align-items:stretch; gap:6px;

        margin-left:0; max-height:0; overflow:hidden; opacity:0; transform:translateY(-8px); pointer-events:none;

        transition:max-height .45s cubic-bezier(.2,.7,.2,1),opacity .25s ease,transform .3s ease,margin-top .35s ease,padding-top .35s ease;

    }

    .nav-toggle:checked ~ .header-collapse {

        max-height:700px; opacity:1; transform:translateY(0); margin-top:10px; padding-top:12px;

        border-top:1px solid var(--border); pointer-events:auto;

    }

    .header-nav { flex-direction:column; align-items:stretch; gap:6px; width:100%; }

    .header-nav a { width:100%; text-align:center; padding:12px 14px; font-size:12.5px; border-radius:10px; background:rgba(98,82,220,.06); border:1px solid rgba(98,82,220,.12); }

    .header-actions { flex-direction:row; justify-content:space-between; width:100%; margin-top:8px; padding-top:12px; border-top:1px dashed rgba(98,82,220,.22); }

    .header-profile { width:46px; height:46px; }

    .logout-btn { flex:1; max-width:220px; padding:13px 18px; border-radius:12px; font-size:12.5px; }

    .nav-toggle:checked + .nav-toggle-label span:nth-child(1) { transform:translateY(6px) rotate(45deg); }

    .nav-toggle:checked + .nav-toggle-label span:nth-child(2) { opacity:0; transform:scaleX(0); }

    .nav-toggle:checked + .nav-toggle-label span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }



    .resource-page { width:calc(100% - 20px); margin-top:18px; }

    .vault-hero, .evidence-orbit, .reference-library, .image-notes { padding:24px 20px; border-radius:21px; }

    .hero-copy h1 { font-size:38px; }

    .orbit-board { min-height:560px; }

    .node-a { left:7%; top:7%; }

    .node-b { right:7%; top:7%; }

    .node-c { left:7%; bottom:7%; }

    .node-d { right:7%; bottom:7%; }

    .reference-grid { grid-template-columns:1fr; }

    .library-toolbar { top:88px; }

    .toolbar-row { align-items:stretch; flex-direction:column; }

    .sort-box { width:100%; }

    .sort-box select { flex:1; }

    .image-notes { grid-template-columns:1fr; }

}



@media (max-width: 560px) {

    .resource-page { width:calc(100% - 14px); }

    .vault-hero, .evidence-orbit, .reference-library, .image-notes { padding:20px 15px; }

    .hero-copy h1 { font-size:33px; }

    .hero-lead { font-size:12px; }

    .hero-actions .hero-btn { width:100%; }

    .hero-visual { min-height:350px; }

    .photo-main { width:80%; height:260px; left:3%; top:48px; }

    .photo-small { width:42%; height:135px; }

    .photo-small-a { right:0; }

    .photo-small-b { right:3%; }

    .orbit-1 { width:330px; height:330px; }

    .orbit-2 { width:260px; height:260px; }

    .vault-stats { grid-template-columns:1fr; }

    .orbit-board { min-height:650px; }

    .orbit-node { width:125px; min-height:96px; }

    .node-a { left:6%; top:5%; }

    .node-b { right:6%; top:5%; }

    .node-c { left:6%; bottom:5%; }

    .node-d { right:6%; bottom:5%; }

    .orbit-center { width:112px; height:112px; }

    .ring-a { width:200px; height:200px; }

    .ring-b { width:290px; height:290px; }

    .ring-c { width:390px; height:390px; }

    .section-head { flex-direction:column; }

    .result-badge { width:100%; min-width:0; height:54px; display:flex; flex-direction:row; gap:7px; }

    .result-badge strong { font-size:18px; }

    .filter-pills { width:100%; }

    .filter-pill { flex:1 1 auto; justify-content:center; }

    .reference-card { padding:16px 14px 15px 21px; }

    .reference-citation { font-size:10px; }

    .reference-actions { display:grid; grid-template-columns:1fr; }

    .mini-gallery { grid-template-columns:1fr; }

    .mini-gallery figure:nth-child(2), .mini-gallery figure:nth-child(3) { transform:none; }

    .mini-gallery figure { min-height:200px; }

}



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

    *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }

}

/* ============================================================
   PERSONIUM HEADER — ENHANCED VERSION
   HEADER ONLY. Resources page content is untouched.
   ============================================================ */

.site-header {
    position: sticky;
    top: 14px;
    z-index: 999;
    width: min(1160px, calc(100% - 32px));
    margin: 14px auto 0;
}

.header-inner {
    position: relative;
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 9px 12px 9px 16px;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(220, 222, 240, 0.92);
    border-radius: 17px;
    box-shadow: 0 10px 30px rgba(56, 52, 125, 0.10);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.site-header.scrolled .header-inner {
    background: rgba(255, 255, 255, 0.99);
    box-shadow: 0 16px 38px rgba(54, 51, 110, 0.15);
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    color: var(--primary-dark);
    font-family: 'Sora', sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.09em;
}

.header-brand img {
    width: 30px;
    height: 30px;
    padding: 3px;
    object-fit: contain;
    border: 1px solid rgba(118, 98, 233, 0.14);
    border-radius: 10px;
    background: linear-gradient(145deg, #f1eeff, #e4ddff);
}

.header-collapse {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin-left: auto;
}

.header-nav {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 3px;
    background: rgba(118, 98, 233, 0.045);
    border: 1px solid rgba(118, 98, 233, 0.08);
    border-radius: 11px;
}

.header-nav a {
    padding: 7px 10px;
    color: #3a4467;
    font-size: 11px;
    font-weight: 650;
    white-space: nowrap;
    border-radius: 8px;
    transition:
        color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.header-nav a:hover,
.header-nav a:focus-visible {
    color: var(--primary-dark);
    background: #fff;
    transform: translateY(-1px);
    outline: none;
}

.header-actions {
    flex: 0 0 auto;
    min-width: max-content;
    display: flex;
    align-items: center;
    gap: 8px;
}


/* Compact PC profile — never collides with Logout */
.header-profile {
    width: 42px;
    min-width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    padding: 3px;
    flex: 0 0 42px;
    overflow: visible;
    color: var(--primary);
    border: 1px solid rgba(118, 98, 233, 0.18);
    border-radius: 12px;
    background: linear-gradient(145deg, #f7f5ff, #ece8ff);
    box-shadow: 0 5px 13px rgba(98, 82, 220, 0.10);
    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

.header-profile:hover,
.header-profile:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(118, 98, 233, 0.34);
    box-shadow: 0 10px 22px rgba(98, 82, 220, 0.17);
    outline: none;
}

.header-profile-avatar {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 9px;
    background: linear-gradient(145deg, #f1eeff, #ded7ff);
}

.header-profile-avatar > img {
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: cover;
    object-position: center;
    border-radius: 9px;
}

.header-default-profile {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: var(--primary);
}

.header-default-profile svg {
    width: 20px;
    height: 20px;
}

.header-profile-copy {
    display: none;
}


/* Logout stays separate from profile */
.logout-btn {
    min-width: 82px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 8px 12px;
    color: #b3324a;
    font-family: 'Sora', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    border: 1px solid rgba(217, 74, 94, 0.20);
    border-radius: 12px;
    background: rgba(217, 74, 94, 0.06);
    white-space: nowrap;
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
}

.logout-btn svg {
    width: 14px;
    height: 14px;
}

.logout-btn:hover,
.logout-btn:focus-visible {
    color: #fff;
    background: linear-gradient(135deg, #e46476, #c93a4d);
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(217, 74, 94, 0.25);
    outline: none;
}


/* Logged-out fallback */
.header-cta {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 17px;
    color: #fff;
    background: linear-gradient(135deg, #7765ed, #5945ce);
    border-radius: 12px;
    font-family: 'Sora', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 7px 17px rgba(98, 82, 220, 0.25);
}

.nav-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.nav-toggle-label {
    display: none;
}


/* ============================================================
   SMALLER PC / TABLET HEADER — 651px to 900px
   ============================================================ */
@media (min-width: 651px) and (max-width: 900px) {

    .site-header {
        width: calc(100% - 24px);
    }

    .header-inner {
        flex-wrap: nowrap;
        gap: 10px;
        padding-left: 12px;
        padding-right: 10px;
    }

    .header-brand {
        gap: 7px;
        font-size: 11px;
    }

    .header-brand img {
        width: 28px;
        height: 28px;
    }

    .nav-toggle-label {
        display: none;
    }

    .header-collapse {
        width: auto;
        max-height: none;
        margin: 0 0 0 auto;
        padding: 0;
        flex: 1 1 auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        overflow: visible;
        opacity: 1;
        transform: none;
        border-top: 0;
        pointer-events: auto;
        transition: none;
    }

    .header-nav {
        width: auto;
        flex-direction: row;
        align-items: center;
        gap: 1px;
        padding: 2px;
    }

    .header-nav a {
        width: auto;
        padding: 6px 7px;
        font-size: 9.4px;
        border: 0;
        background: transparent;
    }

    .header-actions {
        width: auto;
        margin: 0;
        padding: 0;
        flex-direction: row;
        justify-content: flex-start;
        gap: 6px;
        border-top: 0;
    }

    .header-profile {
        width: 38px;
        min-width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .header-profile-avatar {
        width: 30px;
        height: 30px;
    }

    .logout-btn {
        width: 38px;
        min-width: 38px;
        min-height: 38px;
        padding: 0;
    }

    .logout-btn span {
        display: none;
    }

    .header-cta {
        width: auto;
        min-height: 38px;
        padding: 8px 12px;
        font-size: 9.5px;
    }
}


/* ============================================================
   MOBILE HEADER — ≤ 650px
   ============================================================ */
@media (max-width: 650px) {

    .site-header {
        top: 10px;
        width: calc(100% - 16px);
        margin: 8px auto 0;
    }

    .header-inner {
        min-height: 54px;
        padding: 8px 10px 8px 11px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0;
        row-gap: 8px;
        border-radius: 16px;
        box-shadow: 0 10px 28px rgba(48, 40, 108, 0.12);
    }

    .header-brand {
        min-width: 0;
        margin-right: auto;
        gap: 8px;
        font-size: 12px;
        letter-spacing: 0.075em;
    }

    .header-brand img {
        width: 28px;
        height: 28px;
        padding: 2px;
        border-radius: 9px;
    }

    .nav-toggle-label {
        width: 36px;
        height: 36px;
        margin-left: 10px;
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 4px;
        cursor: pointer;
        border: 1px solid rgba(98, 82, 220, 0.14);
        border-radius: 11px;
        background: rgba(98, 82, 220, 0.07);
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }

    .nav-toggle-label span {
        width: 16px;
        height: 2px;
        display: block;
        border-radius: 999px;
        background: var(--primary);
        transform-origin: center;
        transition:
            transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
            opacity 0.2s ease;
    }

    .header-collapse {
        flex: 0 0 100%;
        width: 100%;
        max-height: 0;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        overflow: hidden;
        opacity: 0;
        transform: translateY(-7px);
        pointer-events: none;
        border-top: 0;
        transition:
            max-height 0.42s cubic-bezier(0.2, 0.7, 0.2, 1),
            opacity 0.24s ease,
            transform 0.30s ease,
            padding-top 0.32s ease,
            margin-top 0.32s ease;
    }

    .nav-toggle:checked ~ .header-collapse {
        max-height: 590px;
        margin-top: 2px;
        padding-top: 10px;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        border-top: 1px solid rgba(98, 82, 220, 0.10);
    }

    .header-nav {
        width: 100%;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        border: 0;
        background: transparent;
    }

    .header-nav a {
        width: 100%;
        min-height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 9px 10px;
        text-align: center;
        font-size: 10.5px;
        font-weight: 700;
        border: 1px solid rgba(98, 82, 220, 0.10);
        border-radius: 11px;
        background: linear-gradient(
            135deg,
            rgba(255,255,255,.95),
            rgba(245,243,255,.90)
        );
    }

    .header-actions {
        width: 100%;
        min-width: 0;
        margin-top: 1px;
        padding-top: 9px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: stretch;
        gap: 7px;
        border-top: 1px dashed rgba(98, 82, 220, 0.17);
    }

    .header-profile {
        width: 100%;
        min-width: 0;
        height: 50px;
        padding: 5px 9px 5px 6px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 9px;
        flex: none;
        border-radius: 12px;
    }

    .header-profile-avatar {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        border-radius: 10px;
    }

    .header-profile-avatar > img {
        border-radius: 10px;
    }

    .header-profile-copy {
        min-width: 0;
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: flex-start;
        gap: 1px;
        line-height: 1.1;
    }

    .header-profile-copy > span {
        color: var(--muted);
        font-size: 8.5px;
        font-weight: 700;
    }

    .header-profile-copy > strong {
        color: var(--primary-dark);
        font-family: 'Sora', sans-serif;
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: 0.06em;
    }

    .logout-btn {
        width: 50px;
        min-width: 50px;
        min-height: 50px;
        padding: 0;
        border-radius: 12px;
    }

    .logout-btn svg {
        width: 17px;
        height: 17px;
    }

    .logout-btn span {
        display: none;
    }

    .header-cta {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 46px;
        justify-content: center;
        border-radius: 12px;
        font-size: 11px;
    }

    .nav-toggle:checked + .nav-toggle-label span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .nav-toggle:checked + .nav-toggle-label span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    .nav-toggle:checked + .nav-toggle-label span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }
}


/* ============================================================
   SMALL MOBILE HEADER — ≤ 420px
   ============================================================ */
@media (max-width: 420px) {

    .site-header {
        top: 8px;
        width: calc(100% - 14px);
        margin-top: 7px;
    }

    .header-inner {
        min-height: 50px;
        padding: 7px 8px 7px 9px;
        gap: 0;
        row-gap: 8px;
        border-radius: 14px;
    }

    .header-brand {
        gap: 7px;
        font-size: 11px;
        letter-spacing: 0.06em;
    }

    .header-brand img {
        width: 26px;
        height: 26px;
    }

    .nav-toggle-label {
        width: 32px;
        height: 32px;
        margin-left: 7px;
        border-radius: 10px;
    }

    .nav-toggle-label span {
        width: 14px;
    }

    .nav-toggle:checked ~ .header-collapse {
        max-height: 560px;
        padding-top: 8px;
    }

    .header-nav {
        gap: 6px;
    }

    .header-nav a {
        min-height: 39px;
        padding: 8px 7px;
        font-size: 9.5px;
        border-radius: 10px;
    }

    .header-actions {
        gap: 6px;
        padding-top: 8px;
    }

    .header-profile {
        width: 100%;
        height: 46px;
        padding: 4px 7px 4px 5px;
        gap: 7px;
        border-radius: 11px;
    }

    .header-profile-avatar {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .header-profile-copy > span {
        font-size: 8px;
    }

    .header-profile-copy > strong {
        font-size: 10px;
    }

    .logout-btn {
        width: 46px;
        min-width: 46px;
        min-height: 46px;
        padding: 0;
        font-size: 10px;
        border-radius: 11px;
    }

    .header-cta {
        min-height: 43px;
        padding: 9px 13px;
        font-size: 10px;
        border-radius: 11px;
    }
}



/* Resources remains the active navigation item */
.header-nav a.is-active {
    color: var(--primary-dark);
    background: #fff;
}

@media (max-width: 650px) {
    .header-nav a.is-active {
        color: var(--primary-dark);
        border-color: rgba(98,82,220,.20);
        background: rgba(98,82,220,.10);
    }
}