/*
 * shinuexx.pl on the ShX Design System (dev + dark + neon).
 * Fonts and tokens match vnsi-admin's copy of shx_design_system_full.html; the page layout follows below.
 * Everything is self-hosted (CSP: default-src 'none' + 'self' for styles, fonts and images); see assets/fonts/LICENSES.md.
 */

/* ---------- Fonts ---------- */
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/source-sans-3-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/source-sans-3-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap; src: url(fonts/space-grotesk-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap; src: url(fonts/space-grotesk-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fira Code"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/fira-code-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fira Code"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/fira-code-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Brand accents only (ShX rules): Eagle Lake for the greeting, VT323 for the signature. */
@font-face { font-family: "Eagle Lake"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/eagle-lake-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Eagle Lake"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/eagle-lake-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "VT323"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/vt323-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "VT323"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/vt323-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Subset with only the icons the templates use; the list is in assets/fonts/LICENSES.md. */
@font-face { font-family: "Material Symbols Rounded"; font-style: normal; font-weight: 200 700; font-display: block; src: url(fonts/material-symbols-rounded.woff2) format("woff2"); }

/* ---------- ShX tokens ---------- */
:root {
    color-scheme: dark;

    --font-body: "Source Sans 3", system-ui, sans-serif;
    --font-heading: "Space Grotesk", system-ui, sans-serif;
    --font-code: "Fira Code", ui-monospace, monospace;
    --font-icon: "Material Symbols Rounded";
    --font-brand: "Eagle Lake", Georgia, serif;
    --font-signature: "VT323", ui-monospace, monospace;

    --bg: #0B1020;
    --surface: #111827;
    --surface-2: #1F2937;
    --surface-3: #243244;
    --text: #E5E7EB;
    --muted: #9CA3AF;
    --border: rgba(156,163,175,.24);

    --primary: #38BDF8;
    --secondary: #A78BFA;
    --success: #34D399;
    --warning: #FACC15;
    --danger: #FB7185;
    --highlight: #F472B6;

    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    --radius-sm: .5rem;
    --radius-md: .875rem;
    --radius-lg: 1.25rem;
    --radius-xl: 1.75rem;
    --radius-pill: 999px;

    --shadow-sm: 0 4px 12px rgba(0,0,0,.18);
    --shadow-md: 0 18px 44px rgba(0,0,0,.28);
    --shadow-lg: 0 32px 80px rgba(0,0,0,.42);
}

/* ---------- ShX base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
    margin: 0;
    min-height: 100vh;
    display: flex; flex-direction: column;
    color: var(--text);
    background:
        radial-gradient(circle at 22% 0%, rgba(56,189,248,.16), transparent 34rem),
        radial-gradient(circle at 94% 16%, rgba(167,139,250,.13), transparent 32rem),
        var(--bg);
    background-attachment: fixed;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
}
a { color: inherit; text-decoration: none; }
code, pre, kbd, samp { font-family: var(--font-code); font-size: .86em; }
h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.1; letter-spacing: -.04em; margin: 0 0 14px; }
h1 { font-size: clamp(2.2rem, 6vw, 4rem); }
h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); }
h3 { font-size: 1.2rem; }
p { color: var(--muted); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }

.skip { position: absolute; left: 16px; top: -60px; z-index: 20; padding: 8px 14px; border-radius: var(--radius-pill); background: var(--primary); color: var(--bg); font: 700 .9rem var(--font-heading); }
.skip:focus { top: 12px; }

/* ---------- ShX components ---------- */
.logo { font: 700 2rem/1 var(--font-heading); letter-spacing: -.055em; color: var(--text); }
.logo .x { color: var(--primary); }
.logo-xl { font-size: clamp(5rem, 14vw, 8.5rem); text-shadow: 0 0 42px rgba(56,189,248,.35); }
.logo-xl .x { text-shadow: 0 0 26px rgba(56,189,248,.8); }

.eyebrow { margin: 0 0 6px; color: var(--primary); font: 600 .8rem var(--font-code); letter-spacing: .09em; text-transform: uppercase; }
.section-head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
    padding-bottom: 16px; border-bottom: 1px solid var(--border); margin-bottom: 24px;
}
.section-head h1, .section-head h2 { margin: 0; }
.section-head > p { max-width: 46ch; margin: 0; }

.icon {
    font-family: var(--font-icon);
    font-weight: normal; font-style: normal;
    font-size: var(--icon-size, 24px);
    line-height: 1;
    letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr;
    display: inline-block; vertical-align: middle;
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    font-variation-settings: "FILL" var(--icon-fill,0), "wght" var(--icon-weight,400), "GRAD" 0, "opsz" 24;
    user-select: none;
}

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; padding: 0 20px;
    border: 1px solid transparent; border-radius: var(--radius-pill);
    font: 700 .98rem var(--font-heading);
    color: var(--text); background: transparent;
    white-space: nowrap;
    transition: filter .15s, border-color .15s, background-color .15s, box-shadow .15s;
}
.btn .icon { --icon-size: 20px; }
.btn:hover { filter: brightness(1.12); }
.btn-primary { color: var(--bg); background: var(--primary); box-shadow: 0 0 24px rgba(56,189,248,.28); }
.btn-primary:hover { box-shadow: 0 0 32px rgba(56,189,248,.45); }
.btn-ghost { border-color: var(--border); }
.btn-ghost:hover { border-color: rgba(156,163,175,.5); background: rgba(229,231,235,.04); }

.badge, .chip {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 28px; padding: 0 11px;
    border: 1px solid var(--border); border-radius: var(--radius-pill);
    background: rgba(31,41,55,.64);
    color: var(--muted);
    font: 500 .8rem var(--font-code);
    white-space: nowrap;
}
.badge .icon { --icon-size: 16px; }
.chip { min-height: 36px; padding: 0 15px; font-family: var(--font-heading); font-weight: 600; font-size: .95rem; color: var(--text); }
.chip:nth-child(3n+1) { border-color: rgba(56,189,248,.35); box-shadow: inset 0 0 12px rgba(56,189,248,.08); }
.chip:nth-child(3n+2) { border-color: rgba(167,139,250,.35); box-shadow: inset 0 0 12px rgba(167,139,250,.08); }
.chip:nth-child(3n) { border-color: rgba(244,114,182,.35); box-shadow: inset 0 0 12px rgba(244,114,182,.08); }

.card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: rgba(17,24,39,.72);
    box-shadow: var(--shadow-sm);
}

/* ---------- Layout ---------- */
.topbar {
    position: sticky; top: 0; z-index: 10;
    border-bottom: 1px solid var(--border);
    background: rgba(11,16,32,.82);
    backdrop-filter: blur(18px);
}
.topbar-inner { width: min(100% - 32px, 1080px); margin: 0 auto; min-height: 64px; display: flex; align-items: center; gap: 24px; }
.topbar nav { display: flex; gap: 4px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.topbar nav::-webkit-scrollbar { display: none; }
.topbar nav a { padding: 7px 12px; border-radius: 10px; color: var(--muted); font: 600 .95rem var(--font-heading); white-space: nowrap; }
.topbar nav a:hover { color: var(--text); background: rgba(229,231,235,.06); }
.topbar nav a[aria-current="page"] { color: var(--primary); background: rgba(56,189,248,.1); }

.page { flex: 1; width: min(100% - 32px, 1080px); margin: 0 auto; padding: 0 0 48px; }
.section { padding: 56px 0 8px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: 32px; padding: 72px 0 32px; }
.greeting { margin: 0 0 4px; color: var(--secondary); font: 400 clamp(1.4rem, 3vw, 1.9rem)/1.2 var(--font-brand); }
.hero h1 { margin-bottom: 18px; }
.hero .name { color: var(--primary); text-shadow: 0 0 28px rgba(56,189,248,.35); }
.tagline { max-width: 34ch; margin: 0 0 28px; font-size: clamp(1.1rem, 2.2vw, 1.3rem); color: var(--text); opacity: .86; }
.hero-mark {
    justify-self: center;
    display: grid; place-items: center;
    width: min(100%, 300px); aspect-ratio: 1;
    border: 1px solid rgba(56,189,248,.3);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 50% 40%, rgba(56,189,248,.16), transparent 70%),
        rgba(17,24,39,.72);
    box-shadow: var(--shadow-md), 0 0 60px rgba(56,189,248,.12);
}
.hero-mark img { width: 80%; height: 80%; object-fit: contain; border-radius: var(--radius-lg); }

/* ---------- Content ---------- */
.prose { max-width: 68ch; }
.prose p, .prose li { color: var(--text); opacity: .88; }
.prose a, .hint a, .more { color: var(--primary); }
.prose a:hover, .hint a:hover, .more:hover { text-decoration: underline; text-underline-offset: 3px; }
.prose ul { padding-left: 0; list-style: none; }
.prose ul > li { position: relative; padding-left: 26px; margin: 8px 0; }
.prose ul > li::before { content: ""; position: absolute; left: 4px; top: .68em; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 8px rgba(56,189,248,.7); }
.prose code { padding: 1px 6px; border-radius: 6px; background: var(--surface-2); color: var(--text); }
.prose pre { overflow-x: auto; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: rgba(11,16,32,.8); }
.prose pre code { padding: 0; background: none; }
.prose blockquote { margin: 16px 0; padding: 4px 18px; border-left: 3px solid var(--secondary); }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.more { display: inline-flex; align-items: center; gap: 4px; font: 600 1rem var(--font-heading); }
.more .icon { --icon-size: 20px; }

.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }

.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.card-link { transition: border-color .15s, transform .15s, box-shadow .15s; }
.card-link:hover { border-color: rgba(56,189,248,.45); transform: translateY(-2px); box-shadow: var(--shadow-md), 0 0 30px rgba(56,189,248,.1); }
.card-link > a { display: flex; align-items: flex-start; gap: 14px; padding: 18px; height: 100%; }
.card-icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: var(--radius-md); background: rgba(56,189,248,.1); border: 1px solid rgba(56,189,248,.3); color: var(--primary); }
.card-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.card-text strong { font: 700 1.1rem/1.25 var(--font-heading); letter-spacing: -.02em; }
.card-text .desc { color: var(--muted); font-size: .96rem; line-height: 1.45; }
.card-text .host { color: var(--muted); font: 400 .78rem var(--font-code); opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-link .arrow { --icon-size: 20px; color: var(--muted); transition: color .15s; }
.card-link:hover .arrow { color: var(--primary); }

.single { max-width: 760px; }
.back { margin: 0 0 18px; }
.back a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font: 600 .95rem var(--font-heading); }
.back a:hover { color: var(--primary); }
.back .icon { --icon-size: 20px; }
.hint { color: var(--muted); font-size: .94rem; }

/* ---------- Footer: signature ---------- */
.footer { width: min(100% - 32px, 1080px); margin: 0 auto; padding: 28px 0 36px; border-top: 1px solid var(--border); display: flex; align-items: baseline; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; }
.footer p { margin: 0; }
.footer .build { width: 100%; color: var(--muted); font: 400 .78rem var(--font-code); opacity: .75; }
.footer .build code { font-size: inherit; color: var(--text); }
.signature { color: var(--success); font: 400 1.6rem/1 var(--font-signature); text-shadow: 0 0 12px rgba(52,211,153,.45); }
.cursor { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Error page ---------- */
.error-page { display: grid; align-content: center; justify-items: start; gap: 4px; min-height: 100vh; padding: 48px 0; }
.error-page .logo-xl { margin-bottom: 18px; }
.error-page .signature { margin-top: 24px; }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
    html { scroll-padding-top: 116px; }
    .topbar-inner { flex-wrap: wrap; gap: 0 12px; padding: 10px 0 6px; min-height: 0; }
    .topbar nav { margin: 4px -12px 0; width: calc(100% + 24px); }
    .hero { grid-template-columns: 1fr; padding-top: 40px; }
    .hero-mark { order: -1; justify-self: start; width: 132px; border-radius: var(--radius-lg); }
    .hero-mark .logo-xl { font-size: 3.6rem; }
    .section { padding-top: 44px; }
    .cards { grid-template-columns: 1fr; }
    .actions .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .cursor { animation: none; }
    .card-link, .btn { transition: none; }
    .card-link:hover { transform: none; }
}