:root {
    /* Cooler, bluer near-black than YTMATE's grape — reads "screen / feed"
       rather than "arcade". The duotone accents sit on top of this. */
    --ink: #06070c;
    --panel: #10131f;
    --panel-elevated: #171c2e;
    --panel-hover: #202741;

    /* Tight duotone-glitch system: TikTok cyan + pink, with a single
       electric-blue kicker. Intentionally NOT a full rainbow — the whole
       identity leans on just these three. */
    --cyan: #25f4ee;
    --cyan-dim: rgba(37, 244, 238, 0.16);
    --pink: #fe2c55;
    --pink-dim: rgba(254, 44, 85, 0.18);
    --electric: #4d6bff;
    --electric-dim: rgba(77, 107, 255, 0.16);
    --go: #57ffb0; /* success/complete only */

    /* Aliases a few components reference generically */
    --accent: var(--cyan);
    --accent-dim: var(--cyan-dim);
    --icon: var(--text-dim);
    --icon-hover: var(--cyan);

    --text: #f4f7ff;
    --text-dim: #8891ac;
    --line: #212842;
    --line-bright: #34405f;

    --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --display: "Chakra Petch", -apple-system, BlinkMacSystemFont, sans-serif;
    --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --glow-cyan: 0 0 40px rgba(37, 244, 238, 0.38);
    --glow-pink: 0 0 40px rgba(254, 44, 85, 0.4);
    --block-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.8);
    --elevated-shadow:
        rgba(0, 0, 0, 0.45) 0px 40px 55px,
        rgba(0, 0, 0, 0.25) 0px -12px 30px,
        rgba(0, 0, 0, 0.55) 0px 4px 6px;

    /* Signature "flair" carried over from the portfolio: hard offset shadow
       so things read as poppable stickers, not flat cards. */
    --sticker: 5px 5px 0 rgba(0, 0, 0, 0.6);
    --sticker-hover: 8px 8px 0 rgba(0, 0, 0, 0.6);

    --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

*, *::before, *::after { box-sizing: border-box; }

* {
    scrollbar-width: thin;
    scrollbar-color: var(--line-bright) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background-color: var(--line-bright);
    border-radius: 10px;
    border: 2px solid var(--ink);
}

body {
    margin: 0;
    background-color: var(--ink);
    font-family: var(--body);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    position: relative;
}

a { color: inherit; }

/* ------------------------------------------------------------------ */
/* Background: a quiet "signal field" — faint scanlines + a slow drift  */
/* of one cyan and one pink glow orb. Deliberately calmer than YTMATE's */
/* blob party so the glitch wordmark stays the loudest thing on screen. */
/* ------------------------------------------------------------------ */
.field {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.field::before {
    /* scanlines */
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.018) 0px,
        rgba(255, 255, 255, 0.018) 1px,
        transparent 1px,
        transparent 3px
    );
    opacity: 0.6;
}

.field__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.32;
    will-change: transform;
}

.field__orb--cyan {
    width: 560px; height: 560px;
    top: -160px; left: -140px;
    background: radial-gradient(circle, var(--cyan), transparent 68%);
    animation: drift-a 20s ease-in-out infinite;
}

.field__orb--pink {
    width: 620px; height: 620px;
    top: 60px; right: -220px;
    background: radial-gradient(circle, var(--pink), transparent 68%);
    animation: drift-b 24s ease-in-out infinite;
}

.field__orb--electric {
    width: 420px; height: 420px;
    bottom: -200px; left: 34%;
    background: radial-gradient(circle, var(--electric), transparent 70%);
    animation: drift-a 27s ease-in-out infinite reverse;
}

@keyframes drift-a {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(60px, 44px) scale(1.1); }
}
@keyframes drift-b {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-60px, 70px) scale(0.92); }
}

/* ------------------------------------------------------------------ */
/* Container: duotone spinning conic border (cyan -> electric -> pink). */
/* Echoes YTMATE's spinning border but in the tight 3-color system.     */
/* ------------------------------------------------------------------ */
@property --angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.container {
    position: relative;
    z-index: 1;
    border-radius: 18px;
    border: 3px solid transparent;
    background:
        linear-gradient(var(--panel-elevated), var(--panel-elevated)) padding-box,
        conic-gradient(from var(--angle),
            var(--cyan), var(--electric) 33%, var(--pink) 66%, var(--cyan)) border-box;
    box-shadow: var(--block-shadow), 0 0 44px -12px rgba(37, 244, 238, 0.22);
    width: min(720px, 100%);
    animation: spin-border 4s linear infinite;
}

@keyframes spin-border { to { --angle: 360deg; } }

.container:has(:focus) {
    box-shadow: var(--elevated-shadow), var(--glow-cyan);
}

:focus-visible {
    outline: 2px dashed var(--cyan);
    outline-offset: 3px;
}

::selection { background-color: var(--pink); color: #fff; }

/* Scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(22px) scale(0.98);
    transition: opacity 0.6s ease, transform 0.6s var(--bounce);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .reveal { opacity: 1; transform: none; }
}