@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

:root {
    --background: #0e0e1e;
    --surface: #151521;

    --text: #eef2ff;
    --muted: #b7b9c9;

    --accent-blue: #6f8cff;
    --accent-wine: #b15b78;
    --accent-cosmic: #8b95ff;

    --tag-gray-text: #e2e6f2;
    --tag-gray-bg: #232334;
    --tag-blue-bg: #1a2a46;

    --success: #34d399;
    --warning: #fbbf24;
    --warning-dark: #f59e0b;
    --danger: #ff6b6b;
    
    --terminal-green: #32d74b;
    --terminal-yellow: #ffbf47;

    --border: #2a2a33;
    --border-hover: #3a3a48;

    --font-sans: "DM Sans",system-ui, sans-serif;
    --font-monospace: "IBM Plex Mono", ui-monospace, monospace;
}

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

html {
    scrollbar-width: thin;
    scrollbar-color: rgba(111, 140, 255, 0.55) transparent;
}

body::-webkit-scrollbar,
html::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body::-webkit-scrollbar-track, 
html::-webkit-scrollbar-track {
    background: transparent;
}

body::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(111, 140, 255, 0.75), rgba(177, 91, 120, 0.7));
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

body::-webkit-scrollbar-thumb:hover,
html::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(139, 149, 255, 0.9), rgba(193, 109, 135, 0.85));
}

ul {
    list-style: none;
}

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

body {
    font-family: var(--font-sans);
    background-color: var(--background);
    color: var(--text);
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    position: relative;
    overflow-x: hidden;
    background-image:
        radial-gradient(circle at 20% 0%, rgba(139, 149, 255, 0.16), transparent 26%),
        radial-gradient(circle at 80% 10%, rgba(177, 91, 120, 0.12), transparent 24%),
        linear-gradient(135deg, #0a0b14 0%, #10101c 100%);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.85) 1px, transparent 1px),
        radial-gradient(circle, rgba(255,255,255,0.6) 1px, transparent 1px),
        radial-gradient(circle, rgba(255,255,255,0.45) 1px, transparent 1px);
    background-size: 120px 120px, 90px 90px, 200px 200px;
    opacity: 0.12;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(255, 225, 255, 1) 1.5px, transparent 3px),
        radial-gradient(circle at 28% 33%, rgba(203, 215, 255, 1) 1.5px, transparent 3px),
        radial-gradient(circle at 46% 8%, rgba(255, 190, 205, 1) 1.7px, transparent 3.5px),
        radial-gradient(circle at 70% 22%, rgba(176, 210, 255, 1) 1.5px, transparent 3px),
        radial-gradient(circle at 83% 70%, rgba(230, 180, 255, 1) 1.6px, transparent 3px),
        radial-gradient(circle at 22% 78%, rgba(255, 160, 150, 1) 1.5px, transparent 3px),
        radial-gradient(circle at 58% 62%, rgba(220, 235, 255, 1) 1.4px, transparent 3px),
        radial-gradient(circle at 35% 55%, rgba(255, 240, 210, 0.95) 1.2px, transparent 2.8px),
        radial-gradient(circle at 65% 18%, rgba(190, 230, 255, 0.95) 1.2px, transparent 2.8px);
    opacity: 0.28;
    animation: star-twinkle 4.5s ease-in-out infinite alternate;
}

@keyframes star-twinkle {
    0% { opacity: 0.30; }
    50% { opacity: 0.12; }
    100% { opacity: 0.30; }
}

main {
    flex: 1;
    padding: 0 1rem;
    max-width: 1032px;
    margin: 0 auto;
}

footer {
    font-family: var(--font-monospace);
    font-size: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2.5rem 1.5rem;
    color: var(--muted);
    border-top: 1px solid var(--border);
}

h1 {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 500;
    color: var(--text);
}

.content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    line-height: 1.75;
}

.eyebrow {
    font-family: var(--font-monospace);
    font-size: 0.9375rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-family: var(--font-monospace);
    font-size: 0.6875rem;
    color: var(--tag-gray-text);
}

.tags span {
    background-color: var(--tag-gray-bg);
    padding: 0.1875rem 0.5rem;
    border-radius: 6px;
}