:root { color-scheme:light; --ink:#172033; --muted:#667085; --surface:#fff; --soft:#f5f7fb; --brand:#165dff; --line:#e5e9f2; --shadow:0 10px 30px rgba(20,35,70,.08); }
html[data-theme="dark"] { color-scheme:dark; --ink:#e8edf7; --muted:#a9b3c7; --surface:#0f172a; --soft:#182235; --brand:#79a6ff; --line:#2b3850; --shadow:0 14px 34px rgba(0,0,0,.28); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--surface); font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.65; }
a { color:var(--brand); }
.skip-link { position:absolute; left:-9999px; }
.skip-link:focus { left:1rem; top:1rem; z-index:1000; color:var(--ink); background:var(--surface); padding:.75rem; }
.site-header { position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--surface) 96%,transparent); border-bottom:1px solid var(--line); backdrop-filter:blur(12px); }
.header-inner,.footer-inner { min-height:68px; display:flex; gap:1.5rem; align-items:center; justify-content:space-between; }
.brand { display:inline-flex; align-items:center; gap:.65rem; color:var(--ink); font-weight:800; text-decoration:none; }
.brand-mark { display:inline-grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:50%; color:#fff; background:#165dff; box-shadow:0 6px 16px rgba(22,93,255,.28); font-size:.78rem; letter-spacing:-.08em; }
nav { display:flex; flex-wrap:wrap; gap:1rem; }
nav a { text-decoration:none; }
.header-actions { display:flex; align-items:center; gap:.55rem; }
.nav-toggle { display:none; width:2.4rem; height:2.4rem; padding:.55rem; border:1px solid var(--line); border-radius:10px; background:var(--soft); }
.nav-toggle > span:not(.visually-hidden) { display:block; height:2px; margin:3px 0; border-radius:2px; background:var(--ink); }
main { min-height:70vh; }
.hero { padding:5rem 0 3rem; background:linear-gradient(145deg,color-mix(in srgb,var(--brand) 9%,var(--surface)),var(--surface) 55%,color-mix(in srgb,#8155d9 8%,var(--surface))); }
.eyebrow { color:var(--brand); font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; }
.hero h1 { max-width:850px; font-size:clamp(2.25rem,6vw,4.8rem); line-height:1.05; letter-spacing:-.04em; }
.hero-copy { max-width:720px; color:var(--muted); font-size:1.15rem; }
.hero-compact { padding:3.5rem 0 2.5rem; }
.hero-compact h1 { margin-bottom:.8rem; font-size:clamp(2.2rem,5vw,4rem); }
.content-section { padding:3rem calc(var(--bs-gutter-x,1.5rem) * .5); }
.legal-copy { max-width:900px; }
.legal-copy section { margin-bottom:2.5rem; }
.legal-copy h2 { margin-bottom:.8rem; font-size:clamp(1.35rem,3vw,1.75rem); }
.legal-copy li + li { margin-top:.45rem; }
.about-hero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.7fr);gap:clamp(2rem,6vw,5rem);align-items:center}.about-hero .hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}.about-summary{padding:1.5rem;border:1px solid rgba(255,255,255,.25);border-radius:var(--radius);background:rgba(10,25,47,.25);backdrop-filter:blur(8px)}.about-summary h2{font-size:1.25rem}.about-summary dl,.about-summary dd{margin:0}.about-summary dl div{display:grid;grid-template-columns:110px 1fr;gap:1rem;padding:.65rem 0;border-top:1px solid rgba(255,255,255,.18)}.about-summary dt{font-weight:700}.about-page{display:grid;gap:clamp(2.5rem,6vw,5rem)}.about-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}.about-grid .info-card{margin:0;padding:clamp(1.5rem,4vw,2.5rem)}.skill-list{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.5rem}.skill-list span,.skill-list a{padding:.55rem .85rem;border:1px solid var(--border);border-radius:999px;background:var(--surface-soft);color:var(--text);text-decoration:none}.skill-list a:hover{border-color:var(--primary);color:var(--primary)}.skill-list a span{padding:0;border:0;background:none;color:var(--muted)}.about-purpose{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:2rem;align-items:start}.feature-list{margin:0;display:grid;gap:.75rem}.contact-panel{display:grid;grid-template-columns:minmax(0,.8fr) minmax(320px,1fr);gap:clamp(2rem,6vw,5rem);padding:clamp(1.5rem,5vw,3.5rem);border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow)}.contact-copy{align-self:center}.contact-security{color:var(--muted);font-size:.92rem}.contact-form{display:grid;gap:1rem}.contact-form .btn{justify-self:start}.contact-honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.about-discovery .section-heading{display:flex;justify-content:space-between;align-items:end;gap:1rem;margin-bottom:1.25rem}.about-discovery .section-heading h2{margin:0}@media(max-width:767.98px){.about-hero-grid,.about-grid,.about-purpose,.contact-panel{grid-template-columns:1fr}.about-summary dl div{grid-template-columns:1fr;gap:.15rem}.contact-panel{padding:1.25rem}}
.document-date { color:var(--muted); margin-bottom:2.5rem; }
.info-card,.cta-panel { padding:1.5rem; border:1px solid var(--line); border-radius:16px; background:var(--soft); }
.cta-panel { background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 10%,var(--surface)),color-mix(in srgb,#8155d9 8%,var(--surface))); }
.category-list { display:flex; flex-wrap:wrap; gap:.6rem; margin:1.5rem 0 2.5rem; }
.category-list a { padding:.5rem .8rem; border:1px solid var(--line); border-radius:999px; text-decoration:none; color:var(--ink); }
.post-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:1.25rem; }
.post-card { border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow); }
.post-card img { width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--soft); }
.post-card-body { padding:1.25rem; }
.post-card h2 { font-size:1.25rem; line-height:1.3; }
.post-card h2 a { color:var(--ink); text-decoration:none; }
.post-card-image { display:block; overflow:hidden; }
.post-card-image img { transition:transform .3s ease; }
.post-card:hover .post-card-image img { transform:scale(1.025); }
.post-card-meta { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem; margin-bottom:.65rem; color:var(--muted); font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.post-card-link { display:inline-flex; align-items:center; gap:.3rem; font-weight:700; text-decoration:none; }
.post-card-footer { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-top:1rem; }
.share-actions { display:flex; align-items:center; gap:.35rem; }
.share-actions button,.share-actions a { display:grid; place-items:center; width:2rem; height:2rem; padding:.35rem; border:1px solid var(--line); border-radius:50%; color:var(--ink); background:var(--soft); font-size:.82rem; font-weight:800; text-decoration:none; transition:color .18s ease,border-color .18s ease,transform .18s ease; }
.share-actions button:hover,.share-actions a:hover { color:var(--brand); border-color:var(--brand); transform:translateY(-2px); }
.share-actions button.is-copied { color:#fff; border-color:#198754; background:#198754; }
.share-actions svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.8; }
.share-actions-rail { position:sticky; top:120px; display:flex; flex-direction:column; }
.home-intro { padding-bottom:1rem; }
.intro-panel { display:grid; grid-template-columns:1.4fr .8fr; gap:2rem; padding:2rem; border:1px solid var(--line); border-radius:20px; background:var(--soft); }
.intro-panel aside { padding:1.25rem; border-radius:16px; background:var(--surface); box-shadow:var(--shadow); }
.intro-panel aside h3 { font-size:1.1rem; }
.intro-panel aside a { font-weight:700; text-decoration:none; }
.section-heading { display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:1rem; margin:3rem 0 1rem; }
.section-heading h2 { margin:0; }
.learning-routes { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:.8rem; }
.learning-route { display:flex; align-items:center; gap:.8rem; padding:1rem; border:1px solid var(--line); border-radius:16px; color:var(--ink); background:var(--surface); box-shadow:var(--shadow); text-decoration:none; }
.learning-route > span:nth-child(2) { display:flex; min-width:0; flex:1; flex-direction:column; }
.learning-route small { color:var(--muted); }
.learning-route:hover { color:var(--ink); border-color:var(--brand); transform:translateY(-2px); }
.topic-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.15rem; }
.topic-card { display:flex; min-height:250px; flex-direction:column; padding:1.4rem; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:var(--shadow); transition:transform .18s ease,border-color .18s ease; }
.topic-card:hover { border-color:var(--brand); transform:translateY(-3px); }
.topic-card.is-empty { box-shadow:none; opacity:.72; }
.topic-card-top { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.topic-icon { display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:12px; color:#fff; background:#165dff; font-weight:800; }
.topic-count { color:var(--muted); font-size:.82rem; }
.topic-card h2 { margin:1rem 0 .5rem; font-size:1.35rem; }
.topic-card p { display:-webkit-box; overflow:hidden; color:var(--muted); -webkit-box-orient:vertical; -webkit-line-clamp:6; }
.topic-card > a,.topic-card > span:last-child { margin-top:auto; font-weight:700; text-decoration:none; }
.breadcrumbs { margin-bottom:1.5rem; gap:.55rem; color:var(--muted); font-size:.9rem; }
.result-badge { display:inline-block; margin-top:1rem; padding:.4rem .75rem; border:1px solid var(--line); border-radius:999px; color:var(--ink); background:var(--surface); font-size:.9rem; }
.tag-hero h1 span { color:var(--brand); }
.empty-state { grid-column:1/-1; padding:3rem 1.5rem; border:1px dashed var(--line); border-radius:18px; background:var(--soft); text-align:center; }
.post-shell { width:min(900px,calc(100% - 2rem)); margin:0 auto; padding:3rem 0; }
.post-shell h1 { font-size:clamp(2.1rem,5vw,4rem); line-height:1.08; letter-spacing:-.035em; }
.post-content { font-size:1.075rem; }
.post-content img { max-width:100%; height:auto; border-radius:14px; }
.post-content pre { overflow:auto; padding:1rem; background:#101828; color:#f8fafc; border-radius:12px; }
.featured-image-button { position:relative; display:block; width:100%; padding:0; overflow:hidden; border:0; border-radius:16px; background:var(--soft); cursor:zoom-in; }
.featured-image-button img { display:block; width:100%; height:auto; }
.featured-image-button span { position:absolute; right:.8rem; bottom:.8rem; padding:.4rem .7rem; border-radius:999px; color:#fff; background:rgba(8,15,30,.78); font-size:.82rem; font-weight:700; opacity:0; transform:translateY(4px); transition:opacity .18s ease,transform .18s ease; }
.featured-image-button:hover span,.featured-image-button:focus-visible span { opacity:1; transform:none; }
.image-modal { width:min(96vw,1200px); height:min(92vh,900px); padding:0; overflow:hidden; border:1px solid var(--line); border-radius:18px; color:var(--ink); background:var(--surface); box-shadow:0 24px 80px rgba(0,0,0,.5); }
.image-modal::backdrop { background:rgba(3,8,20,.82); backdrop-filter:blur(4px); }
.image-modal[open] { display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.image-modal > * { min-width:0; }
.image-modal-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem 1rem; border-bottom:1px solid var(--line); }
.image-modal-header h2 { margin:0; overflow:hidden; font-size:1rem; text-overflow:ellipsis; white-space:nowrap; }
.image-modal-header button { border:0; color:var(--ink); background:transparent; font-size:1.8rem; line-height:1; }
.image-modal-viewport { display:grid; width:100%; place-items:center; overflow:auto; padding:1rem; background:#080d18; }
.image-modal-viewport img { max-width:100%; max-height:100%; object-fit:contain; transform-origin:center; transition:transform .15s ease; }
.image-modal-controls { display:flex; width:100%; justify-content:center; gap:.6rem; padding:.75rem; border-top:1px solid var(--line); }
.image-modal-controls button { min-width:2.5rem; padding:.4rem .75rem; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:var(--soft); }
.post-layout { display:grid; grid-template-columns:42px minmax(0,860px) minmax(260px,320px); align-items:start; gap:1.5rem; padding-top:3rem; }
.post-layout .post-shell { width:100%; padding-top:0; }
.blog-sidebar { position:sticky; top:92px; max-height:calc(100vh - 110px); overflow:auto; scrollbar-width:thin; }
.sidebar-header { display:none; }
.sidebar-card { margin-bottom:1rem; padding:1.15rem; border:1px solid var(--line); border-radius:16px; background:var(--soft); box-shadow:var(--shadow); }
.sidebar-card h3 { margin:0 0 .85rem; font-size:1rem; }
.sidebar-list,.sidebar-posts { margin:0; padding:0; list-style:none; }
.sidebar-list li + li,.sidebar-posts li + li { border-top:1px solid var(--line); }
.sidebar-list a { display:flex; justify-content:space-between; gap:.75rem; padding:.55rem 0; color:var(--ink); text-decoration:none; }
.sidebar-list a span { color:var(--muted); }
.sidebar-posts li { padding:.75rem 0; }
.sidebar-posts a { display:block; color:var(--ink); font-weight:700; line-height:1.35; text-decoration:none; }
.sidebar-posts time { display:block; margin-top:.3rem; color:var(--muted); font-size:.82rem; }
.sidebar-tags { display:flex; flex-wrap:wrap; gap:.45rem; }
.sidebar-tags a { padding:.35rem .55rem; border:1px solid var(--line); border-radius:999px; background:var(--surface); text-decoration:none; font-size:.85rem; }
.sidebar-list a:hover,.sidebar-posts a:hover { color:var(--brand); }
.theme-toggle,.sidebar-close { border:0; background:transparent; color:var(--ink); }
.theme-toggle { display:inline-grid; place-items:center; width:2.25rem; height:2.25rem; padding:.45rem; border:1px solid var(--line); border-radius:50%; background:var(--soft); transition:transform .2s ease,background-color .2s ease; }
.theme-toggle:hover { transform:rotate(10deg) scale(1.05); }
.theme-toggle svg,.theme-control svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.theme-control { display:flex; align-items:center; gap:.65rem; width:100%; padding:.7rem 1rem; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:var(--soft); text-align:left; }
.theme-control-icons { display:inline-block; width:1.3rem; height:1.3rem; }
.sidebar-trigger,.sidebar-backdrop { display:none; }
.form-control,.card,.table { color:var(--ink); background-color:var(--surface); border-color:var(--line); }
.table { --bs-table-color:var(--ink); --bs-table-bg:transparent; --bs-table-border-color:var(--line); }
.page-link { color:var(--brand); background:var(--surface); border-color:var(--line); }
.page-link:hover { color:var(--ink); background:var(--soft); border-color:var(--line); }
.page-item.disabled .page-link { color:var(--muted); background:var(--soft); border-color:var(--line); }
.back-to-top { position:fixed; z-index:45; right:1rem; bottom:1rem; width:48px; height:48px; border:1px solid color-mix(in srgb,var(--brand) 70%,var(--line)); border-radius:50%; color:#fff; background:#165dff; box-shadow:var(--shadow); font-size:1.45rem; line-height:1; transition:opacity .2s ease,transform .2s ease; }
.back-to-top:hover { transform:translateY(-3px); }
.back-to-top[hidden] { display:none; }
.auth-shell { max-width:620px; }
.auth-alternative { margin-top:1.25rem; text-align:center; }
.password-field { position:relative; }
.password-field .form-control { padding-right:3rem; }
.password-toggle { position:absolute; top:50%; right:.45rem; width:2.25rem; height:2.25rem; padding:.4rem; border:0; border-radius:8px; color:var(--muted); background:transparent; transform:translateY(-50%); }
.password-toggle:hover,.password-toggle:focus-visible { color:var(--ink); background:var(--soft); }
.password-toggle svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.admin-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; }
.admin-heading h1 { margin:0; }
.admin-back { display:inline-block; margin-bottom:.4rem; text-decoration:none; }
.admin-card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1rem; }
.admin-stat-card { display:flex; min-height:165px; flex-direction:column; padding:1.35rem; border:1px solid var(--line); border-radius:18px; color:var(--ink); background:var(--surface); box-shadow:var(--shadow); text-decoration:none; transition:transform .18s ease,border-color .18s ease; }
a.admin-stat-card:hover { color:var(--ink); border-color:var(--brand); transform:translateY(-3px); }
.admin-stat-card strong { margin:.25rem 0; font-size:2.5rem; line-height:1.1; }
.admin-stat-card small { margin-top:auto; color:var(--brand); }
.admin-stat-card.is-static { background:var(--soft); }
.admin-stat-card.is-static small { color:var(--muted); }
.admin-search { display:flex; max-width:760px; gap:.6rem; margin-bottom:1.25rem; }
.contact-message { padding:1rem; border-radius:12px; background:var(--soft); white-space:pre-wrap; overflow-wrap:anywhere; }
.analytics-summary{margin:1.5rem 0 2rem}.analytics-panel{padding:1.25rem;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow)}.analytics-panel h2{font-size:1.15rem}.analytics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1rem}.analytics-panel ol{margin:0;padding:0;list-style:none}.analytics-panel li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-top:1px solid var(--line);overflow-wrap:anywhere}.analytics-bars{display:flex;min-height:200px;align-items:end;justify-content:space-around;gap:.5rem;padding-top:1rem}.analytics-bars div{display:grid;flex:1;justify-items:center;gap:.3rem}.analytics-bar{display:block;width:min(42px,80%);border-radius:8px 8px 2px 2px;background:var(--brand)}.analytics-bars small{color:var(--muted)}@media(max-width:767.98px){.analytics-grid{grid-template-columns:1fr}}
@media (max-width:575.98px) { .admin-search { align-items:stretch; flex-direction:column; } }
.site-footer { margin-top:4rem; border-top:1px solid var(--line); background:var(--soft); padding:1.5rem 0; }
.consent { position:fixed; z-index:50; left:1rem; right:1rem; bottom:1rem; max-width:760px; margin:auto; padding:1rem 1.2rem; border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:0 20px 60px rgba(20,35,70,.18); }
.consent div { display:flex; gap:.75rem; }
@media (max-width:700px) { .header-inner { min-height:64px; flex-wrap:wrap; padding:.75rem 1rem; } .brand { order:1; } .header-actions { order:2; } .footer-inner { align-items:flex-start; flex-direction:column; padding:1rem; } .main-nav { display:none; width:100%; order:3; flex-direction:column; gap:0; padding:.5rem 0; border-top:1px solid var(--line); } .main-nav.is-open { display:flex; } .main-nav a { padding:.55rem 0; } .nav-toggle { display:block; } .hero { padding:3.5rem 0 2rem; } .hero-compact { padding:2.75rem 0 1.75rem; } }
@media (max-width:991.98px) {
    .post-layout { display:block; padding-top:0; }
    .blog-sidebar { position:fixed; z-index:80; top:0; right:0; bottom:0; width:min(88vw,360px); max-height:none; padding:0; border-left:1px solid var(--line); background:var(--surface); transform:translateX(105%); transition:transform .22s ease; }
    .blog-sidebar.is-open { transform:translateX(0); }
    .sidebar-header { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; padding:1rem; border-bottom:1px solid var(--line); background:var(--surface); }
    .sidebar-header h2 { margin:0; font-size:1.15rem; }
    .sidebar-close { font-size:1.8rem; line-height:1; }
    .sidebar-body { padding:1rem; }
    .sidebar-trigger { position:fixed; z-index:40; right:1rem; bottom:1rem; display:block; box-shadow:var(--shadow); }
    .back-to-top { right:1rem; bottom:4.75rem; }
    .sidebar-backdrop { position:fixed; z-index:70; inset:0; display:block; background:rgba(3,8,20,.62); }
    .sidebar-backdrop[hidden] { display:none; }
    body.sidebar-open { overflow:hidden; }
    .share-actions-rail { position:fixed; z-index:39; left:1rem; bottom:1rem; top:auto; margin:0; padding:.4rem; flex-direction:row; border:1px solid var(--line); border-radius:999px; background:var(--surface); box-shadow:var(--shadow); transform:none; }
}
@media (max-width:767.98px) { .intro-panel { grid-template-columns:1fr; padding:1.25rem; } }