:root {
    --bg: #050810;
    --home-bg-image: url(assets/background.webp);
    --surface: #0a0f1ab8;
    --surface-soft: #0f1629a3;
    --text: #d4dce6;
    --muted: #7a8299;
    --primary: #5a75d9;
    --primary-strong: #7a95ff;
    --primary-soft: #5a75d91f;
    --border: #1a2440;
    --radius: 16px;
    --radius-sm: 12px;
    --shadow: 0 16px 36px #00000057;
    --shadow-soft: 0 8px 22px #00000047;
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-smooth: cubic-bezier(.2, .8, .2, 1);
    --motion-fast: .18s;
    --motion-medium: .28s;
    --motion-slow: .46s;
    --hover-lift-sm: -1px;
    --hover-lift-md: -4px;
    --hover-scale: 1.024;
    --reveal-distance: 26px;
    --header-height: clamp(72px, 7.5vw, 82px);
    --container-gutter: clamp(.9rem, 3.2vw, 2rem);
    --type-h1: clamp(2.2rem, 5.4vw, 3.4rem);
    --type-h2: clamp(1.8rem, 3.4vw, 2.25rem);
    --type-h3: clamp(1.2rem, 2.1vw, 1.58rem);
    --type-body: clamp(1rem, 1.35vw, 1.14rem);
    --type-meta: clamp(.86rem, 1vw, .96rem);
    --project-card-bg: linear-gradient(180deg, #0f254f 0%, #091635 100%);
    --project-card-border: #27477c;
    --project-card-shadow: 0 18px 34px #09143247;
    --project-card-hover-shadow: 0 26px 46px #08112985;
    --project-card-hover-border: #4f7ec2;
    --project-card-title: #46c4ff;
    --project-card-text: #b4c0db;
    --project-thumb-divider: #5584d44d;
    --project-pill-border: #54a5ff66;
    --project-pill-bg: #1d498059;
    --project-pill-text: #62ccff;
    --project-link-border: #63afff75;
    --project-link-bg: #12335d85;
    --project-link-text: #9bdeff;
    --project-link-hover-border: #6ec7ff;
    --project-link-hover-bg: #1c4e8b8f;
    --project-link-hover-text: #d3f2ff;
    --show-more-text: #5fd2ff;
    --show-more-border: #5db8ff70;
    --show-more-bg: #163d6e8f;
    --show-more-hover-bg: #1e5395a8;
    --show-more-hover-text: #c4efff;
    --skill-card-bg: linear-gradient(180deg, #0f2148 0%, #0a1734 100%);
    --skill-card-border: #203a6a;
    --skill-card-shadow: 0 16px 30px #0810276b;
    --skill-track-bg: #617db147;
    --skill-level-bg: #2c63bd3d;
    --skill-level-text: #8ecbff;
    --skill-body-text: #aebad4;
    --achievement-tile-border: #60a0ff61;
    --achievement-tile-bg: linear-gradient(165deg, #122042f2 0%, #091226fa 100%);
    --achievement-tile-glow: 0 18px 36px #08102761;
    --achievement-muted-text: #afbedf
}

* {
    box-sizing: border-box
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    font-size: clamp(15px, .28vw + 14px, 17px);
    overflow-x: hidden
}

body {
    background: radial-gradient(circle at 14% 4%, #5277ff38 0%, transparent 42%), radial-gradient(circle at 86% 18%, #4ad3ff24 0%, transparent 36%), radial-gradient(circle at 50% 94%, #3960d233 0%, transparent 44%), var(--bg);
    color: var(--text);
    padding-top: var(--header-height);
    transition: background var(--motion-medium) var(--ease-smooth), color var(--motion-fast) ease;
    background-position: 0 0, 100% 8%, 50% 100%, 0 0;
    background-size: 160% 160%, 170% 170%, 180% 180%, auto;
    margin: 0;
    font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
    line-height: 1.65;
    overflow-x: hidden
}

input,
button,
textarea,
select {
    font: inherit
}

h1,
h2,
h3,
p,
a {
    overflow-wrap: anywhere
}

img {
    user-drag: none;
    -webkit-user-drag: none;
    max-width: 100%;
    height: auto
}

a {
    user-drag: none;
    -webkit-user-drag: none
}

svg {
    user-drag: none;
    -webkit-user-drag: none;
    pointer-events: auto
}

button,
[role=button] {
    user-drag: none;
    -webkit-user-drag: none
}

body:before {
    content: "";
    pointer-events: none;
    z-index: 0;
    opacity: .02;
    background: linear-gradient(#03091847 0%, #0207139e 100%);
    transition: opacity .22s linear;
    position: fixed;
    inset: 0
}

body:after {
    content: "";
    pointer-events: none;
    z-index: 0;
    opacity: .12;
    background: radial-gradient(circle at 16% 12%, #6caaff29 0%, #0000 42%), radial-gradient(circle at 84% 82%, #52dbff1f 0%, #0000 36%), linear-gradient(#03091957 0%, #0207129e 100%), repeating-linear-gradient(135deg, #b8dbff0f 0 2px, #b8dbff00 2px 8px);
    transition: opacity .22s linear;
    position: fixed;
    inset: 0
}

body.is-loading {
    overflow: hidden
}

.skip-link {
    z-index: 140;
    color: #d7f2ff;
    letter-spacing: .02em;
    opacity: 0;
    transition: transform .2s var(--ease-out), opacity .2s ease;
    background: #0b1e4cf5;
    border: 1px solid #76ccffcc;
    border-radius: 10px;
    padding: .56rem .9rem;
    font-size: .88rem;
    font-weight: 700;
    position: fixed;
    top: .85rem;
    left: .85rem;
    transform: translateY(-145%)
}

.skip-link:focus,
.skip-link:focus-visible {
    opacity: 1;
    outline: none;
    transform: translateY(0);
    box-shadow: 0 0 0 3px #6ac4ff59
}

.scroll-codes {
    z-index: 0;
    pointer-events: none;
    opacity: .36;
    mix-blend-mode: screen;
    transition: opacity .22s;
    position: fixed;
    inset: 0;
    overflow: hidden;
    transform: none
}

.scroll-codes:before {
    content: "";
    opacity: .58;
    background: linear-gradient(#0000 6%, #3492ff33 46%, #0000 90%), repeating-linear-gradient(#0000 0 21px, #65bbff2e 21px 22px), repeating-linear-gradient(0deg, #568cff1f 0 1px, #0000 1px 68px);
    animation: 15s linear infinite codeSweep;
    position: absolute;
    inset: -25% 0
}

.code-column {
    left: var(--column-x, 50%);
    color: #6cccff85;
    letter-spacing: .02em;
    text-align: center;
    white-space: pre;
    text-shadow: 0 0 10px #53bbff52;
    opacity: .64;
    width: 1.15ch;
    animation: codeRainFall var(--fall-duration, 12s) linear var(--fall-delay, 0s) infinite, codeGlitchPulse 6.4s ease-in-out var(--glitch-delay, 0s) infinite;
    font-family: "Press Start 2P", Segoe UI, monospace;
    font-size: clamp(.48rem, .58vw, .66rem);
    line-height: 1.36;
    position: absolute;
    top: -145%;
    transform: translate(-50%)
}

.code-column.rgb-g {
    color: #63e87a94;
    text-shadow: 0 0 12px #5ae48461
}

.code-column.rgb-c {
    color: #68d6ff8f;
    text-shadow: 0 0 12px #5fd0ff5c
}

.code-column.rgb-y {
    color: #ffd78c85;
    text-shadow: 0 0 12px #ffc97857
}

.code-column.rgb-p {
    color: #ffb0c47a;
    text-shadow: 0 0 12px #ffadc24d
}

.code-column.rgb-b {
    color: #7facff8a;
    text-shadow: 0 0 12px #6fa3ff57
}

.perf-lite body {
    animation: none
}

.perf-lite body:before {
    transition: none
}

.perf-lite body:after {
    background: radial-gradient(circle at 16% 12%, #6caaff1a 0%, #0000 44%), linear-gradient(#0309194d 0%, #02071294 100%);
    transition: none
}

.perf-lite .scroll-codes {
    opacity: .26;
    mix-blend-mode: normal
}

.perf-lite .scroll-codes:before {
    opacity: .22;
    background: repeating-linear-gradient(#0000 0 24px, #65bbff1a 24px 25px), repeating-linear-gradient(0deg, #568cff14 0 1px, #0000 1px 74px);
    animation: none
}

.perf-lite .code-column {
    animation: codeRainFall var(--fall-duration, 12s) linear var(--fall-delay, 0s) infinite;
    text-shadow: none;
    opacity: .54
}

.perf-lite .site-header,
.perf-lite .back-to-top {
    backdrop-filter: none
}

.perf-lite .hero:after {
    filter: none;
    background-position: top
}

.perf-lite .back-to-top.is-visible img,
.perf-lite .back-to-top.is-visible:after,
.perf-lite .splash-screen,
.perf-lite .splash-screen:before,
.perf-lite .splash-screen:after,
.perf-lite .splash-panel,
.perf-lite .splash-logo,
.perf-lite .splash-hint,
.mobile-lite body {
    animation: none
}

.mobile-lite body:before,
.mobile-lite body:after {
    opacity: .08;
    background: linear-gradient(#0309192e 0%, #0207126b 100%);
    transition: none
}

.mobile-lite .scroll-codes,
.mobile-lite .scroll-codes:before {
    animation: none;
    display: none
}

.mobile-lite .site-header,
.mobile-lite .back-to-top,
.mobile-lite .skill-invaders-win,
.mobile-lite .cv-modal-dialog,
.mobile-lite .contact-submit-popup-dialog {
    backdrop-filter: none
}

.mobile-lite .skill-invaders-field {
    background: linear-gradient(#081634f0 0%, #050e22fa 100%)
}

.mobile-lite .skill-invaders-field:before,
.mobile-lite .skill-invaders-field:after {
    content: none
}

.mobile-lite .skill-invader img {
    filter: none
}

.mobile-lite .skill-invaders-player {
    box-shadow: none;
    border-width: 1px
}

.mobile-lite .skill-invaders-player:before,
.mobile-lite .skill-invaders-player:after {
    opacity: .8
}

.mobile-lite .skill-invaders-shot {
    box-shadow: none
}

.mobile-lite .skill-invaders-chip-icon {
    filter: none
}

.mobile-lite .skill-invaders-win {
    background: #02060e8a
}

.mobile-lite .skill-invaders-win-card {
    box-shadow: 0 14px 28px #0000005c
}

.mobile-lite .hero:after {
    filter: none;
    background-position: top
}

.mobile-lite .splash-screen,
.mobile-lite .splash-screen:before,
.mobile-lite .splash-screen:after,
.mobile-lite .splash-panel,
.mobile-lite .splash-logo,
.mobile-lite .splash-hint {
    animation: none
}

.mobile-lite .splash-code-rain {
    display: none
}

.mobile-lite .code-column {
    animation: codeRainFall var(--fall-duration, 12s) linear var(--fall-delay, 0s) infinite;
    text-shadow: none;
    opacity: .42
}

.mobile-lite .hero-portrait-glitch-bars,
.mobile-lite .hero-portrait-glitch-rgb,
.mobile-lite .hero-portrait-glitch-noise,
.mobile-lite .splash-scanlines {
    display: none
}

.mobile-lite .skill-invaders-showcase,
.mobile-lite .skill-invaders-win-card,
.mobile-lite .skill-invaders-chip,
.mobile-lite .skill-invaders-restart,
.mobile-lite .skill-invaders-control {
    box-shadow: none
}

.is-animations-paused body,
.is-animations-paused body:before,
.is-animations-paused body:after,
.is-animations-paused .scroll-codes:before,
.is-animations-paused .code-column,
.is-animations-paused .about-section-header h2,
.is-animations-paused .about-hero,
.is-animations-paused .about-content p,
.is-animations-paused .about-visual:before,
.is-animations-paused .about-visual:after,
.is-animations-paused .about-visual img,
.is-animations-paused .achievement-logo img,
.is-animations-paused .achievement-showcase:before,
.is-animations-paused .xp-fill:after,
.is-animations-paused .hero-portrait:before,
.is-animations-paused .hero-portrait img,
.is-animations-paused .back-to-top.is-visible:after,
.is-animations-paused .back-to-top.is-visible img {
    animation-play-state: paused !important
}

main {
    z-index: 1;
    position: relative
}

.site-footer {
    z-index: 1;
    background: linear-gradient(#080d1c40 0%, #060a15bd 100%);
    border-top: 1px solid #6b8ad238;
    margin-top: clamp(2.4rem, 5vw, 4rem);
    padding: 1.2rem 0;
    position: relative
}

.footer-wrap {
    text-align: center;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    display: flex
}

.footer-copy {
    color: var(--muted);
    letter-spacing: .01em;
    margin: 0;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.5
}

.back-to-top {
    --back-to-top-float-duration: 1.55s;
    --back-to-top-halo-duration: 1.95s;
    --back-to-top-float-ease: cubic-bezier(.22, .55, .16, 1);
    backdrop-filter: blur(8px);
    z-index: 28;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    will-change: transform, opacity;
    width: clamp(46px, 5.6vw, 54px);
    height: clamp(46px, 5.6vw, 54px);
    transition: transform .2s var(--ease-out), box-shadow .2s ease, border-color .2s ease, opacity .2s ease, visibility .2s ease;
    background: #081534d1;
    border: 1px solid #6bc6ffcc;
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: fixed;
    bottom: clamp(1rem, 2.8vw, 1.8rem);
    right: clamp(1rem, 2.8vw, 1.8rem);
    overflow: visible;
    transform: translateY(0)scale(1);
    box-shadow: 0 10px 22px #091c4380, inset 0 0 0 1px #349aff57
}

.back-to-top:after {
    content: "";
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    border: 1px solid #78d1ff6b;
    position: absolute;
    inset: -5px;
    transform: scale(.9)
}

.js-enabled .back-to-top {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px)scale(.94)
}

.js-enabled .back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0)scale(1)
}

.js-enabled .back-to-top.is-visible:after {
    animation: backToTopHalo var(--back-to-top-halo-duration) ease-in-out infinite
}

.back-to-top img {
    transform-origin: 50% 58%;
    filter: drop-shadow(0 0 6px #4cbdff94);
    width: clamp(23px, 2.6vw, 28px);
    height: clamp(23px, 2.6vw, 28px);
    display: block
}

.js-enabled .back-to-top.is-visible img {
    animation: backToTopIconDrift var(--back-to-top-float-duration) var(--back-to-top-float-ease) infinite
}

.back-to-top:hover img,
.back-to-top:focus-visible img {
    animation-play-state: paused;
    transform: scale(1.08)rotate(-8deg)
}

.back-to-top:hover {
    border-color: #8bddff;
    transform: translateY(-3px)scale(1.04);
    box-shadow: 0 14px 28px #091c4394, inset 0 0 0 1px #59baff6b
}

.back-to-top:focus,
.back-to-top:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px #61c1ff4d, 0 12px 24px #091c4385, inset 0 0 0 1px #59baff6b
}

@keyframes splashBlink {

    0%,
    45%,
    to {
        opacity: 1
    }

    50%,
    90% {
        opacity: .35
    }
}

@keyframes splashHintJitter {

    0%,
    84%,
    to {
        transform: translate(0)
    }

    85% {
        transform: translate(-1px)
    }

    86% {
        transform: translate(1px, 1px)
    }

    87% {
        transform: translate(-1px, -1px)
    }

    88% {
        transform: translate(0)
    }
}

@keyframes splashHintGlitch {

    0%,
    84%,
    to {
        opacity: 0;
        transform: translate(0)
    }

    85% {
        opacity: .82;
        transform: translate(2px, -1px)
    }

    86% {
        opacity: 0;
        transform: translate(0)
    }

    87% {
        opacity: .64;
        transform: translate(-3px, 1px)
    }

    88% {
        opacity: 0;
        transform: translate(0)
    }

    89% {
        opacity: .74;
        transform: translate(1px)
    }

    90% {
        opacity: 0;
        transform: translate(0)
    }
}

@keyframes splashFlicker {

    0%,
    49%,
    to {
        opacity: 1
    }

    50% {
        opacity: .94
    }

    52% {
        opacity: .98
    }
}

@keyframes splashBob {

    0%,
    to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-4px)
    }
}

@keyframes splashScanlines {
    0% {
        transform: translateY(0)
    }

    to {
        transform: translateY(4px)
    }
}

@keyframes splashBackdropShift {

    0%,
    to {
        background-position: 12% 24%, 78% 20%, 50%
    }

    50% {
        background-position: 20% 18%, 68% 28%, 50%
    }
}

@keyframes splashAuroraFloat {
    0% {
        transform: translate(-3%, -2%)scale(1.04)
    }

    50% {
        transform: translate(3%, 2%)scale(1.12)
    }

    to {
        transform: translate(-1%, 4%)scale(1.06)
    }
}

@keyframes codeRainFall {
    0% {
        top: -145%
    }

    to {
        top: 115%
    }
}

@keyframes codeGlitchPulse {

    0%,
    to {
        opacity: .56;
        text-shadow: 0 0 10px #53bbff47
    }

    32% {
        opacity: .68
    }

    58% {
        opacity: .78;
        text-shadow: -1px 0 #56adff3d, 1px 0 #92ecff38
    }

    76% {
        opacity: .66
    }
}

@keyframes codeSweep {
    0% {
        transform: translateY(-5%)
    }

    to {
        transform: translateY(5%)
    }
}

@keyframes backToTopIconDrift {

    0%,
    to {
        transform: translate(0, 0)rotate(0)
    }

    18% {
        transform: translateY(-3px)rotate(-8deg)scale(1.03)
    }

    36% {
        transform: translate(1px, 1px)rotate(6deg)scale(.99)
    }

    54% {
        transform: translate(-1px, -2px)rotate(-6deg)scale(1.02)
    }

    72% {
        transform: translate(1px, 1px)rotate(4deg)scale(1)
    }

    88% {
        transform: translateY(-1px)rotate(-2deg)scale(1.01)
    }
}

@keyframes backToTopHalo {
    0% {
        opacity: 0;
        transform: scale(.76)
    }

    30% {
        opacity: .66
    }

    70% {
        opacity: .22;
        transform: scale(1.14)
    }

    to {
        opacity: 0;
        transform: scale(1.28)
    }
}

@keyframes pageBgDrift {
    0% {
        background-position: 0 0, 100% 4%, 50% 100%, 0 0
    }

    50% {
        background-position: 8% 8%, 92% 14%, 53% 90%, 0 0
    }

    to {
        background-position: 4% 14%, 96% 8%, 48% 98%, 0 0
    }
}

a {
    color: var(--primary);
    transition: color var(--motion-fast) ease, opacity var(--motion-fast) ease, transform var(--motion-medium) var(--ease-smooth);
    text-decoration: none
}

button,
.btn,
.show-more-btn,
.menu-toggle,
.main-nav a,
.nav-dropdown-trigger,
.icon-link,
.card,
.project-card,
.timeline-item,
.achievement-tile,
.contact-links a {
    transition-timing-function: var(--ease-smooth)
}

.container {
    width: min(1120px, calc(100% - (var(--container-gutter) * 2)));
    min-width: 0;
    margin: 0 auto
}

.narrow {
    width: min(760px, 100%);
    min-width: 0
}

.site-header {
    z-index: 20;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    background: #070b16d9;
    position: fixed;
    top: 0;
    left: 0;
    right: 0
}

.nav-wrap {
    height: var(--header-height);
    justify-content: space-between;
    align-items: center;
    gap: .9rem;
    display: flex
}

.logo {
    flex-shrink: 0;
    min-width: 0
}

.site-brand-link {
    cursor: pointer;
    color: var(--text);
    transition: opacity var(--motion-fast) ease, transform var(--motion-medium) var(--ease-smooth), filter var(--motion-medium) ease;
    border-radius: 10px;
    align-items: center;
    gap: .65rem;
    padding-right: .35rem;
    display: inline-flex
}

.site-brand-link:hover,
.site-brand-link:focus-visible {
    transform: translateY(var(--hover-lift-sm));
    filter: brightness(1.06)
}

.logo img {
    width: clamp(34px, 3vw, 40px);
    height: clamp(34px, 3vw, 40px);
    display: block
}

.site-brand-name {
    color: var(--text);
    white-space: nowrap;
    letter-spacing: .01em;
    font-size: clamp(.9rem, .8vw, .98rem);
    font-weight: 700
}

.main-nav {
    align-items: center;
    gap: .25rem;
    margin-left: auto;
    display: flex
}

.nav-controls {
    align-items: center;
    gap: .6rem;
    display: flex
}

.main-nav a,
.nav-dropdown-trigger {
    color: var(--muted);
    transition: color .2s ease, background-color .2s ease, transform var(--motion-medium) var(--ease-smooth), box-shadow var(--motion-medium) ease;
    border-radius: 8px;
    padding: .52rem .74rem;
    font-size: .96rem;
    font-weight: 600;
    line-height: 1.2
}

.main-nav>a:hover,
.main-nav>a.active,
.nav-dropdown-trigger:hover,
.nav-dropdown-trigger.active,
.nav-dropdown.open .nav-dropdown-trigger {
    color: var(--primary-strong);
    transform: translateY(var(--hover-lift-sm));
    background: #5a75d929;
    box-shadow: 0 10px 18px #284aa82e
}

.nav-dropdown {
    display: inline-flex;
    position: relative
}

.nav-dropdown-trigger {
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    background: 0 0;
    border: none;
    align-items: center;
    display: flex;
    position: relative
}

.nav-dropdown-trigger:after {
    content: "";
    width: .4rem;
    height: .4rem;
    transition: transform .3s var(--ease-out);
    vertical-align: -.15em;
    border-bottom: 1.5px solid;
    border-right: 1.5px solid;
    margin-left: .28rem;
    display: inline-block;
    transform: rotate(45deg)
}

.nav-dropdown-menu {
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    background: #090f1ffa;
    border: 1px solid #6b8ad247;
    border-radius: 10px;
    min-width: 190px;
    padding: .4rem;
    transition: opacity .2s, transform .2s;
    position: absolute;
    top: calc(100% + .35rem);
    left: 0;
    overflow: hidden;
    transform: translateY(-6px);
    box-shadow: 0 10px 26px #00000057
}

.nav-dropdown.open .nav-dropdown-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0)
}

.nav-dropdown.open .nav-dropdown-trigger:after {
    transform: rotate(225deg)
}

.nav-dropdown-menu a {
    color: #d6eaffe0;
    transition: color .2s ease, background-color .2s ease, transform var(--motion-medium) var(--ease-smooth);
    background: 0 0;
    border-radius: 8px;
    padding: .56rem .72rem;
    font-size: .93rem;
    font-weight: 500;
    display: block
}

.nav-dropdown-menu a:hover {
    color: var(--primary-strong);
    background: #5a75d929;
    transform: translate(2px)
}

.nav-dropdown-menu a.active {
    color: var(--primary-strong);
    background: #5a75d929
}

@media (width>=981px) {
    :root {
        --header-height: 74px
    }

    .main-nav a,
    .nav-dropdown-trigger {
        padding: .52rem .74rem;
        font-size: .97rem
    }

    .nav-dropdown-menu a {
        padding: .56rem .72rem;
        font-size: .94rem
    }

    .site-footer {
        padding: 1.2rem 0
    }

    .footer-copy {
        font-size: .95rem
    }
}

.menu-toggle {
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--radius-sm);
    width: clamp(42px, 5vw, 46px);
    min-width: 44px;
    height: clamp(42px, 5vw, 46px);
    min-height: 44px;
    color: var(--text);
    touch-action: manipulation;
    transition: transform .22s var(--ease-out), border-color .2s ease, background-color .2s ease;
    font-size: clamp(1.15rem, 2.5vw, 1.35rem);
    display: none
}

.menu-toggle:hover {
    transform: translateY(-2px)scale(1.03)
}

.hamburger {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 100%;
    height: 100%;
    display: flex
}

.hamburger span {
    background: currentColor;
    border-radius: 1px;
    width: 18px;
    height: 2px;
    transition: transform .3s, opacity .3s, background-color .2s;
    display: block
}

.menu-toggle[aria-expanded=true] .hamburger span:first-child {
    transform: rotate(45deg)translate(7px, 7px)
}

.menu-toggle[aria-expanded=true] .hamburger span:nth-child(2) {
    opacity: 0
}

.menu-toggle[aria-expanded=true] .hamburger span:nth-child(3) {
    transform: rotate(-45deg)translate(6px, -6px)
}

.mascot-container {
    z-index: 150;
    backdrop-filter: blur(2px);
    background: #0006;
    justify-content: center;
    align-items: center;
    animation: .3s mascotFadeIn;
    display: none;
    position: fixed;
    inset: 0
}

.mascot-container[aria-hidden=false] {
    display: flex
}

@keyframes mascotFadeIn {
    0% {
        opacity: 0;
        backdrop-filter: blur()
    }

    to {
        opacity: 1;
        backdrop-filter: blur(2px)
    }
}

.mascot-popup {
    width: min(94vw, 700px);
    max-width: clamp(420px, 92vw, 700px);
    min-height: clamp(440px, 70vh, 620px);
    transition: border-color .25s ease, box-shadow .25s ease, transform .22s var(--ease-out);
    background: linear-gradient(135deg, #0f193cf2 0%, #0a122df2 100%);
    border: 2px solid #7b95ff66;
    border-radius: 32px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.55rem;
    padding: clamp(2rem, 5.6vw, 3.2rem);
    animation: .4s cubic-bezier(.23, 1, .32, 1) mascotPopIn;
    display: flex;
    position: relative;
    box-shadow: 0 30px 60px #0009, 0 0 40px #7b95ff33, inset 0 1px #abdbff1a
}

.mascot-popup:hover {
    border-color: #99c8ffb8;
    transform: translateY(-2px);
    box-shadow: 0 34px 70px #0000009e, 0 0 58px #7b95ff57, inset 0 1px #c4e6ff42
}

@keyframes mascotPopIn {
    0% {
        opacity: 0;
        transform: scale(.8)translateY(20px)
    }

    to {
        opacity: 1;
        transform: scale(1)translateY(0)
    }
}

.mascot-close {
    color: #a5ddffeb;
    cursor: pointer;
    width: 32px;
    height: 32px;
    transition: background-color .2s ease, color .2s ease, transform .2s var(--ease-out);
    background: #52a9ff38;
    border: none;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    padding: 0;
    font-size: 1.4rem;
    line-height: 1;
    display: flex;
    position: absolute;
    top: .8rem;
    right: .8rem
}

.mascot-close:before {
    content: "✕"
}

.mascot-close:hover {
    color: #e0f7ff;
    background: #52a9ff61;
    transform: translateY(-1px)
}

.mascot-display {
    isolation: isolate;
    justify-content: center;
    align-items: center;
    width: clamp(220px, 44vw, 340px);
    height: clamp(250px, 52vw, 390px);
    display: flex;
    position: relative
}

.mascot-display:before {
    content: "";
    filter: blur(14px);
    opacity: .56;
    z-index: -1;
    background: radial-gradient(circle at 50% 45%, #94d2ff8f 0%, #94d2ff1f 45%, #94d2ff00 78%);
    border-radius: 999px;
    transition: opacity .25s, transform .25s;
    position: absolute;
    inset: 10% 12%
}

.mascot-display:hover:before {
    opacity: .88;
    transform: scale(1.08)
}

.mascot-display:after {
    content: "";
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 16px #a4deffad)saturate(1.18);
    background-color: #0000;
    background-image: radial-gradient(circle at 16% 34%, #e0f8ff 0 2.4px, #aae7ffbd 3px 8px, #0000 9px), radial-gradient(circle at 78% 25%, #d2effffa 0 2.2px, #8ddbffb8 3px 8px, #0000 9px), radial-gradient(circle at 24% 76%, #ebf7fff5 0 2.2px, #aadaffb8 3px 8px, #0000 9px), radial-gradient(circle at 86% 71%, #c4eafff5 0 2.4px, #81c7ffb8 3px 8px, #0000 9px), radial-gradient(circle at 50% 16%, #f7fbfff5 0 1.8px, #bce8ffa8 2.6px 6px, #0000 7px), conic-gradient(at 34% 42%, #fff0 0deg, #cbf0ffd1 30deg, #fff0 60deg, #cbf0ffcc 90deg, #fff0 120deg, #cbf0ffd1 150deg, #fff0 180deg, #cbf0ffcc 210deg, #fff0 240deg, #cbf0ffd1 270deg, #fff0 300deg, #cbf0ffcc 330deg, #fff0 360deg), conic-gradient(at 66% 58%, #fff0 0deg, #ffc2f4b3 28deg, #fff0 58deg, #96e3ffb8 88deg, #fff0 118deg, #ffc2f4b3 148deg, #fff0 178deg, #96e3ffb8 208deg, #fff0 238deg, #ffc2f4b3 268deg, #fff0 298deg, #96e3ffb8 328deg, #fff0 360deg);
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
    background-repeat: no-repeat;
    background-size: auto, auto, auto, auto, auto, 18% 18%, 16% 16%;
    background-attachment: scroll, scroll, scroll, scroll, scroll, scroll, scroll;
    background-origin: padding-box, padding-box, padding-box, padding-box, padding-box, padding-box, padding-box;
    background-clip: border-box, border-box, border-box, border-box, border-box, border-box, border-box;
    position: absolute;
    inset: -8% -10%;
    transform: scale(.86)rotate(-4deg)
}

.mascot-container.is-mascot-hovered .mascot-display:after {
    animation: 2.35s cubic-bezier(.2, .64, .24, 1) infinite mascotSparkleBurst
}

@keyframes mascotSparkleBurst {

    0%,
    52%,
    to {
        opacity: 0;
        transform: scale(.86)rotate(-4deg)
    }

    7% {
        opacity: .34
    }

    13% {
        opacity: 1;
        transform: scale(1)rotate(0)
    }

    22% {
        opacity: .62;
        transform: scale(1.09)rotate(1.2deg)
    }

    30% {
        opacity: 0;
        transform: scale(1.18)rotate(2.8deg)
    }

    63% {
        opacity: .24
    }

    71% {
        opacity: .86;
        transform: scale(1.02)rotate(-.8deg)
    }

    82% {
        opacity: 0;
        transform: scale(1.14)rotate(1.8deg)
    }
}

.mascot-container.is-mascot-hovered .mascot-display:before {
    opacity: 1;
    filter: blur(12px);
    transform: scale(1.13)
}

.mascot-container.is-mascot-hovered .mascot-popup {
    box-shadow: 0 36px 76px #000000a3, 0 0 72px #8ad6ff52, inset 0 1px #d6efff4d
}

@media (width<=720px) {
    .mascot-display:after {
        mix-blend-mode: normal;
        filter: drop-shadow(0 0 12px #a4deff99)saturate(1.12)
    }
}

.mascot-sprite {
    object-fit: contain;
    filter: drop-shadow(0 8px 16px #0000004d);
    width: 100%;
    height: 100%;
    transition: transform .26s var(--ease-out), filter .26s ease;
    will-change: transform, filter;
    animation: 2.4s ease-in-out infinite mascotBounce
}

@keyframes mascotBounce {

    0%,
    to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-8px)
    }
}

.mascot-sprite:hover {
    filter: drop-shadow(0 18px 30px #00000075)saturate(1.14)brightness(1.05);
    animation: none;
    transform: translateY(-10px)scale(1.16)rotate(-1.8deg)
}

.mascot-dialogue {
    text-align: center;
    padding: 0 .5rem
}

.mascot-text {
    color: #e6ecff;
    letter-spacing: .01em;
    transition: color .22s ease, text-shadow .22s ease, transform .22s var(--ease-out);
    margin: 0;
    font-size: clamp(1rem, 2vw, 1.2rem);
    line-height: 1.6;
    animation: .5s .2s both mascotTextFade
}

.mascot-display:hover+.mascot-dialogue .mascot-text,
.mascot-container.is-mascot-hovered .mascot-text {
    color: #f4fbff;
    text-shadow: 0 0 18px #8dddff6b;
    transform: translateY(-2px)
}

@keyframes mascotTextFade {
    0% {
        opacity: 0;
        transform: translateY(8px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@media (width<=480px) {
    .mascot-popup {
        gap: 1rem;
        width: 94vw;
        max-width: 94vw;
        min-height: min(76vh, 560px);
        padding: 1.55rem 1.2rem 1.4rem
    }

    .mascot-display {
        width: clamp(190px, 58vw, 260px);
        height: clamp(220px, 67vw, 305px)
    }
}

.hero,
.section {
    isolation: isolate;
    position: relative
}

.hero:before,
.section:before {
    content: "";
    pointer-events: none;
    z-index: -1;
    border-radius: clamp(26px, 4vw, 38px);
    position: absolute;
    inset: clamp(.6rem, 1.5vw, 1.1rem) 0
}

.section:before {
    opacity: .72;
    border: 1px solid #5e8eff1a;
    box-shadow: inset 0 1px #abdbff0a, 0 24px 54px #040a1b29
}

.section:after {
    content: "";
    pointer-events: none;
    z-index: -1;
    opacity: .62;
    background: linear-gradient(90deg, #0000 0%, #84bfffa3 16%, #84bfff4d 50%, #84bfffa3 84%, #0000 100%);
    width: min(84%, 980px);
    height: 1px;
    position: absolute;
    top: clamp(.5rem, 1vw, .85rem);
    left: 50%;
    transform: translate(-50%);
    box-shadow: 0 0 22px #5799ff38
}

.hero:before {
    background: radial-gradient(circle at 14% 16%, #4e88ff38 0%, #0000 32%), radial-gradient(circle at 82% 80%, #43d5ff24 0%, #0000 28%), linear-gradient(#081739bd 0%, #09122b2e 100%);
    border: 1px solid #5a8bff1f;
    inset: clamp(.35rem, 1vw, .8rem) 0 clamp(.95rem, 2vw, 1.5rem);
    box-shadow: inset 0 1px #a4d3ff0d
}

.hero:after {
    content: "";
    pointer-events: none;
    z-index: -2;
    background-image: linear-gradient(180deg, #040c1e8f 0%, #040b1ddb 100%), var(--home-bg-image);
    filter: saturate(.92)contrast(1.04);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: clamp(26px, 4vw, 38px);
    position: absolute;
    inset: clamp(.35rem, 1vw, .8rem) 0 clamp(.95rem, 2vw, 1.5rem)
}

#about.section:before {
    background: radial-gradient(circle at 18% 24%, #5a93ff33 0%, #0000 28%) 0 0/130% 130%, radial-gradient(circle at 86% 78%, #3f69da1f 0%, #0000 24%) 0 0/145% 145%, linear-gradient(#0c1631c7 0%, #0c163133 100%) 0 0/100% 100%;
    animation: 18s ease-in-out infinite alternate aboutAuraDrift
}

#about.section:after {
    background: linear-gradient(90deg, #0000 0%, #91c3ffb8 16%, #91c3ff57 50%, #91c3ffb8 84%, #0000 100%);
    animation: 9s ease-in-out infinite aboutLinePulse
}

#skills.section:before {
    background: radial-gradient(circle at 82% 18%, #50cfff38 0%, #0000 28%) 0 0/132% 132%, radial-gradient(circle at 14% 84%, #307cf61f 0%, #0000 24%) 0 0/150% 150%, linear-gradient(#08122dd1 0%, #07102933 100%) 0 0/100% 100%;
    animation: 20s ease-in-out infinite alternate-reverse aboutAuraDrift
}

#skills.section:after {
    background: linear-gradient(90deg, #0000 0%, #7edfffc7 16%, #7edfff57 50%, #7edfffc7 84%, #0000 100%);
    animation: 10s ease-in-out infinite aboutLinePulse
}

#projects.section:before {
    background: radial-gradient(circle at 12% 78%, #4575ff38 0%, #0000 28%), radial-gradient(circle at 84% 22%, #52d6ff1f 0%, #0000 24%), linear-gradient(#0b183ad6 0%, #08122b38 100%)
}

#projects.section:after {
    background: linear-gradient(90deg, #0000 0%, #80baffd1 16%, #80baff61 50%, #80baffd1 84%, #0000 100%)
}

#achievements.section:before {
    background: radial-gradient(circle at 86% 76%, #4ed1ff33 0%, #0000 26%), radial-gradient(circle at 16% 18%, #4776ff1c 0%, #0000 22%), linear-gradient(#0a142fcc 0%, #08112833 100%)
}

#achievements.section:after {
    background: linear-gradient(90deg, #0000 0%, #80e4ffbd 16%, #80e4ff52 50%, #80e4ffbd 84%, #0000 100%)
}

#contact.section:before {
    background: radial-gradient(circle at 18% 18%, #5a93ff33 0%, #0000 24%), radial-gradient(circle at 82% 82%, #4ed1ff1a 0%, #0000 24%), linear-gradient(#0a1533db 0%, #07102642 100%)
}

#contact.section:after {
    background: linear-gradient(90deg, #0000 0%, #94c4ffb8 16%, #94c4ff52 50%, #94c4ffb8 84%, #0000 100%)
}

.hero {
    align-items: center;
    min-height: calc(100dvh + clamp(3rem, 5vw, 5rem));
    padding: clamp(5.4rem, 9.6vw, 7.6rem) 0 clamp(6rem, 10vw, 8.2rem);
    display: flex;
    overflow-x: clip
}

.hero-grid {
    grid-template-columns: 1fr;
    align-items: center;
    gap: clamp(1.8rem, 3vw, 2.6rem);
    display: grid
}

.hero-main {
    min-width: 0
}

.hero-media {
    justify-content: center;
    min-width: 0;
    display: flex
}

.hero-grid>* {
    min-width: 0
}

.eyebrow {
    color: var(--primary-strong);
    letter-spacing: .09em;
    margin: 0;
    font-size: .88rem;
    font-weight: 700
}

h1 {
    margin: .7rem 0;
    font-size: 40px;
    line-height: 1.08
}

.hero-text {
    color: var(--muted);
    max-width: 58ch;
    font-size: var(--type-body);
    line-height: 1.75
}

.typing-target.is-typing:after {
    content: "|";
    color: #a5d7fff2;
    margin-left: .08em;
    animation: .84s step-end infinite heroTypingCaretBlink
}

.typing-target.is-typed:after {
    content: ""
}

@keyframes heroTypingCaretBlink {

    0%,
    49% {
        opacity: 1
    }

    50%,
    to {
        opacity: 0
    }
}

.hero-portrait {
    --portrait-base-x: clamp(2px, .7vw, 8px);
    --portrait-base-rot: 0deg;
    z-index: 1;
    isolation: isolate;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    max-width: 620px;
    margin: clamp(.2rem, 1vw, .8rem) auto 0;
    padding-right: 0;
    display: flex;
    position: relative;
    overflow: hidden
}

.hero-portrait:before {
    content: "";
    mix-blend-mode: multiply;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    background: radial-gradient(circle at 20% 32%, #000000a8, #0000 44%), radial-gradient(circle at 78% 68%, #000000b8, #0000 48%), linear-gradient(96deg, #000000d1 4%, #00000024 38%, #000000e6 92%);
    width: min(100%, 560px);
    height: 100%;
    animation: 2s step-end infinite heroPortraitScanGlitch;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    -webkit-mask-image: linear-gradient(#000 84%, #0000 100%);
    mask-image: linear-gradient(#000 84%, #0000 100%)
}

.hero-portrait:after {
    content: "";
    filter: blur(4px);
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(#ececec42 0%, #ececec00 76%);
    width: min(76%, 500px);
    height: clamp(64px, 11vw, 100px);
    position: absolute;
    bottom: -10px;
    left: 58%;
    transform: translate(-50%)
}

.hero-portrait img {
    object-fit: cover;
    object-position: center 20%;
    filter: contrast(1.14)brightness(.96)drop-shadow(0 18px 40px #00000080);
    z-index: 1;
    width: min(100%, 540px);
    height: auto;
    animation: 2.8s step-end infinite heroPortraitImageGlitch;
    display: block;
    position: relative;
    -webkit-mask-image: linear-gradient(#000 84%, #0000 100%);
    mask-image: linear-gradient(#000 84%, #0000 100%)
}

@keyframes heroPortraitImageGlitch {

    0%,
    78%,
    to {
        transform: translate3d(var(--portrait-base-x), 0, 0) scale(1);
        filter: contrast(1.14)brightness(.96)drop-shadow(0 18px 40px #00000080)
    }

    82% {
        transform: translate3d(calc(var(--portrait-base-x) + 12px), -4px, 0) scale(1.02);
        filter: contrast(1.3)brightness(.74)drop-shadow(0 18px 40px #00000080)
    }

    86% {
        transform: translate3d(calc(var(--portrait-base-x) - 15px), 4px, 0) scale(.99);
        filter: contrast(1.42)brightness(.62)drop-shadow(0 18px 40px #00000080)
    }

    90% {
        transform: translate3d(calc(var(--portrait-base-x) + 7px), -2px, 0) scale(1.008);
        filter: contrast(1.35)brightness(.7)drop-shadow(0 18px 40px #00000080)
    }

    94% {
        transform: translate3d(calc(var(--portrait-base-x) - 4px), 1px, 0);
        filter: contrast(1.2)brightness(.9)drop-shadow(0 18px 40px #00000080)
    }

    96% {
        transform: translate3d(var(--portrait-base-x), 0, 0)
    }
}

@keyframes heroPortraitScanGlitch {

    0%,
    64%,
    to {
        opacity: 0;
        transform: translate(0)
    }

    68% {
        opacity: .56;
        transform: translate(-6px)skew(-2deg)
    }

    72% {
        opacity: .34;
        transform: translate(7px)skew(2deg)
    }

    76% {
        opacity: .2;
        transform: translate(0)
    }

    90% {
        opacity: .5;
        transform: translate(-8px)skew(-3deg)
    }

    94% {
        opacity: .28;
        transform: translate(8px)skew(3deg)
    }

    96% {
        opacity: .14;
        transform: translate(0)
    }
}

@keyframes heroPortraitTearBars {

    0%,
    80%,
    to {
        opacity: 0;
        clip-path: inset(0);
        transform: translate(-50%)translateY(0)
    }

    84% {
        opacity: .9;
        clip-path: inset(4% 0 52% round 3px);
        transform: translate(calc(-50% - 12px))translateY(-3px)skew(-3deg)scale(1.02)
    }

    88% {
        opacity: .84;
        clip-path: inset(34% 0 14% round 2px);
        transform: translate(calc(14px - 50%))translateY(3px)skew(3.2deg)scale(1.03)
    }

    92% {
        opacity: .44;
        clip-path: inset(12% 0 20% round 2px);
        transform: translate(calc(-50% - 6px))translateY(-1px)skew(-1.8deg)scale(1.01)
    }

    96% {
        opacity: .18;
        clip-path: inset(0);
        transform: translate(-50%)translateY(0)
    }
}

@keyframes heroPortraitRgbSplit {

    0%,
    80%,
    to {
        opacity: 0;
        transform: translate(-50%)scale(1)
    }

    85% {
        opacity: .24;
        transform: translate(calc(-50% - 12px))scale(1.015)
    }

    89% {
        opacity: .28;
        transform: translate(calc(13px - 50%))scale(1.018)
    }

    94% {
        opacity: .16;
        transform: translate(calc(-50% - 4px))scale(1.005)
    }

    96% {
        opacity: 0;
        transform: translate(-50%)scale(1)
    }
}

@keyframes heroPortraitNoiseBurst {

    0%,
    80%,
    to {
        opacity: 0;
        filter: grayscale()contrast(1.18)brightness(.86);
        transform: translate(-50%)scale(1)
    }

    84% {
        opacity: .84;
        filter: grayscale()contrast(2.05)brightness(.38);
        transform: translate(calc(-50% - 8px))scale(1.03)
    }

    88% {
        opacity: .76;
        filter: grayscale()contrast(2.1)brightness(.34);
        transform: translate(calc(10px - 50%))scale(1.035)
    }

    94% {
        opacity: .34;
        filter: grayscale()contrast(1.4)brightness(.62);
        transform: translate(calc(-50% - 3px))scale(1.01)
    }

    96% {
        opacity: .12;
        filter: grayscale()contrast(1.22)brightness(.8);
        transform: translate(-50%)scale(1)
    }
}

@media (width>=1060px) {
    .hero-grid {
        grid-template-columns: minmax(0, 1.14fr) minmax(360px, .86fr);
        align-items: start;
        gap: clamp(2rem, 4vw, 3.2rem)
    }

    .hero-media {
        justify-content: flex-end;
        align-self: end
    }

    .hero-portrait {
        margin-top: 0;
        margin-bottom: 0
    }
}

.section-about-preview {
    margin-top: clamp(.35rem, 1.2vw, .8rem);
    margin-bottom: clamp(.35rem, 1.2vw, .8rem);
    padding-top: 0;
    padding-bottom: 0
}

.section-about-preview .narrow {
    justify-items: center;
    gap: 0;
    padding-top: clamp(3.7rem, 6.3vw, 5rem);
    padding-bottom: clamp(7rem, 11vw, 8.9rem);
    display: grid
}

.section-about-preview .narrow:after {
    content: "";
    opacity: .88;
    background: linear-gradient(90deg, #0000 0%, #8dc7ff2e 14%, #8dc7ffc7 50%, #8dc7ff2e 86%, #0000 100%);
    justify-self: center;
    width: min(72%, 440px);
    height: 1px;
    margin-top: clamp(.5rem, 1.2vw, .8rem);
    display: block;
    box-shadow: 0 0 18px #5799ff2e
}

.section-about-preview .section-title-center {
    margin-bottom: clamp(1rem, 2vw, 1.3rem)
}

.section-about-preview .narrow p {
    text-align: center;
    letter-spacing: .005em;
    max-width: 68ch;
    margin: 0;
    font-size: clamp(1.12rem, 1.6vw, 1.32rem);
    line-height: 1.88
}

#about.section-about-preview .narrow:before {
    display: none
}

.about-preview-cta {
    margin-top: .2rem
}

.about-preview-link {
    color: #d7f2ff;
    letter-spacing: .06em;
    text-transform: uppercase;
    min-height: 40px;
    transition: transform .22s var(--ease-out), border-color .2s ease, background-color .2s ease, box-shadow .22s ease;
    background: #0e2456b8;
    border: 1px solid #6cc1ff75;
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    padding: .45rem .88rem;
    font-size: .86rem;
    font-weight: 700;
    display: inline-flex
}

.about-preview-link:hover,
.about-preview-link:focus-visible {
    background: #142f6cdb;
    border-color: #8de0ffdb;
    outline: none;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px #091c434d
}

.featured-projects {
    background: linear-gradient(#0a193ed6 0%, #07122e94 100%);
    border: 1px solid #68a6ff29;
    border-radius: 24px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-top: clamp(1.9rem, 4vw, 2.8rem);
    padding: clamp(.95rem, 2vw, 1.25rem);
    position: relative;
    box-shadow: 0 22px 40px #07112b47
}

.featured-projects-head {
    align-items: flex-start;
    gap: 1rem;
    min-width: 0;
    margin-bottom: 1rem;
    display: flex
}

.featured-projects-intro {
    gap: .38rem;
    min-width: 0;
    display: grid
}

.featured-projects-head h2 {
    letter-spacing: .02em;
    margin: 0;
    font-size: clamp(1.08rem, 2vw, 1.32rem)
}

.featured-projects-note {
    color: #d6eaffbd;
    max-width: 52ch;
    margin: 0;
    font-size: .92rem;
    line-height: 1.55
}

.featured-projects-controls {
    pointer-events: none;
    z-index: 3;
    justify-content: space-between;
    align-items: center;
    padding: 0 clamp(.8rem, 2vw, 1.5rem);
    display: flex;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%)
}

.carousel-control {
    color: #d7f2ff6b;
    cursor: pointer;
    pointer-events: auto;
    width: clamp(44px, 8vw, 52px);
    height: clamp(44px, 8vw, 52px);
    transition: transform .24s var(--ease-out), border-color .24s ease, background-color .24s ease, color .24s ease, box-shadow .24s ease;
    background: #0c1d4614;
    border: 1px solid #6bbcff14;
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex
}

.carousel-control:hover,
.carousel-control:focus-visible {
    color: #8bddffe0;
    background: #122a6038;
    border-color: #90ddff47;
    outline: none;
    box-shadow: inset 0 0 8px #3f63ff0f
}

.carousel-control-prev:hover {
    transform: translate(-2px)
}

.carousel-control-next:hover {
    transform: translate(2px)
}

.carousel-control span {
    font-size: clamp(1.2rem, 2.4vw, 1.6rem);
    line-height: 1
}

.featured-carousel-shell {
    isolation: isolate;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    position: relative
}

.featured-carousel-shell:before,
.featured-carousel-shell:after {
    content: "";
    pointer-events: none;
    z-index: 2;
    width: clamp(1.2rem, 2vw, 1.9rem);
    position: absolute;
    top: 0;
    bottom: .28rem
}

.featured-carousel-shell:before {
    background: linear-gradient(90deg, #07122eeb 0%, #07122e00 100%);
    left: 0
}

.featured-carousel-shell:after {
    background: linear-gradient(270deg, #07122eeb 0%, #07122e00 100%);
    right: 0
}

.featured-carousel-track {
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    cursor: default;
    grid-auto-columns: calc(50% - .5rem);
    grid-auto-flow: column;
    align-items: stretch;
    gap: 1rem;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: .3rem 0 .42rem;
    scroll-padding-inline: 0;
    display: grid;
    overflow-x: auto
}

.featured-carousel-track::-webkit-scrollbar {
    display: none
}

.featured-carousel-track:focus-visible {
    border-radius: 20px;
    outline: none;
    box-shadow: inset 0 0 0 2px #76ccff38
}

.featured-project-slide {
    aspect-ratio: 16/10;
    cursor: pointer;
    scroll-snap-align: start;
    will-change: auto;
    min-width: 0;
    transition: transform .42s var(--ease-out), opacity .3s ease, border-color .28s ease, box-shadow .42s var(--ease-out);
    background: #08132df0;
    border: 1px solid #6db2ff33;
    border-radius: 20px;
    display: block;
    position: relative;
    overflow: hidden;
    box-shadow: 0 18px 34px #050d2257
}

.featured-project-slide.is-active,
.featured-project-slide.is-near,
.featured-project-slide:hover,
.featured-project-slide:focus-visible {
    will-change: transform, opacity
}

.js-enabled .featured-project-slide {
    opacity: .72;
    transform: translateY(16px)scale(.96)
}

.js-enabled .featured-project-slide.is-near {
    opacity: .9;
    transform: translateY(7px)scale(.985)
}

.js-enabled .featured-project-slide.is-active {
    opacity: 1;
    border-color: #7ed1ff70;
    transform: translateY(0)scale(1);
    box-shadow: 0 26px 46px #050d2270, 0 0 0 1px #70bcff1f
}

.featured-project-slide:after {
    content: "";
    background: linear-gradient(#07112c14 24%, #050d22e0 100%);
    transition: background .32s;
    position: absolute;
    inset: 0
}

.js-enabled .featured-project-slide.is-active:after {
    background: linear-gradient(#0b183a0a 20%, #050d22d1 100%)
}

.featured-project-slide img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: transform .42s var(--ease-out), filter .34s ease;
    display: block
}

.featured-project-slide.is-active img,
.featured-project-slide:hover img,
.featured-project-slide:focus-visible img {
    filter: saturate(1.08);
    transform: scale(1.05)
}

.featured-project-slide:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px #6ac4ff40, 0 18px 34px #050d2257
}

.featured-project-copy {
    z-index: 1;
    transition: transform .34s var(--ease-out), opacity .28s ease;
    gap: .26rem;
    padding: 1rem 1rem 1.1rem;
    display: grid;
    position: absolute;
    inset: auto 0 0
}

.js-enabled .featured-project-slide .featured-project-copy {
    opacity: .88;
    transform: translateY(8px)
}

.js-enabled .featured-project-slide.is-active .featured-project-copy,
.featured-project-slide:focus-visible .featured-project-copy,
.featured-project-slide:hover .featured-project-copy {
    opacity: 1;
    transform: translateY(0)
}

.featured-project-copy strong {
    color: #f2f8ff;
    letter-spacing: .01em;
    font-size: clamp(1.06rem, 2vw, 1.26rem)
}

.featured-project-copy span {
    color: #d9eeffcc;
    font-size: .92rem;
    line-height: 1.5
}

.featured-carousel-footer {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    display: flex
}

.featured-projects-progress {
    align-items: center;
    min-width: 0;
    display: flex
}

.featured-projects-dots {
    flex-wrap: wrap;
    align-items: center;
    gap: .48rem;
    display: inline-flex
}

.carousel-dot {
    cursor: pointer;
    width: 10px;
    height: 10px;
    transition: transform .22s var(--ease-out), width .22s var(--ease-out), background-color .22s ease, border-color .22s ease, box-shadow .22s ease;
    background: #78b6ff2e;
    border: 1px solid #7bbcff57;
    border-radius: 999px;
    padding: 0
}

.carousel-dot:hover,
.carousel-dot:focus-visible {
    background: #90ddff57;
    border-color: #90ddffc2;
    outline: none;
    transform: scale(1.08)
}

.carousel-dot.is-active {
    background: linear-gradient(90deg, #79b2ffe6 0%, #6de5ffeb 100%);
    border-color: #8adcfff0;
    width: 28px;
    box-shadow: 0 0 18px #6de5ff47
}

.btn {
    min-height: 48px;
    transition: transform .24s var(--ease-smooth), box-shadow .24s ease, background-color .2s ease, border-color .2s ease;
    border: 1px solid #0000;
    border-radius: 11px;
    justify-content: center;
    align-items: center;
    padding: .84rem 1.35rem;
    font-weight: 600;
    display: inline-flex
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), #6782ff);
    color: #fff;
    box-shadow: 0 10px 26px #3f63ff47
}

.btn-ghost {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text)
}

.btn:hover {
    transform: translateY(var(--hover-lift-md)) scale(var(--hover-scale))
}

.btn-primary:hover {
    box-shadow: 0 12px 28px #3f63ff52
}

.btn-ghost:hover {
    background: var(--surface-soft);
    border-color: #cfd9f4
}

.social-links {
    flex-wrap: wrap;
    align-items: center;
    gap: .7rem;
    margin-top: 1.15rem;
    display: flex
}

.icon-link {
    border: 1px solid var(--border);
    background: var(--surface);
    width: 50px;
    height: 50px;
    color: var(--muted);
    transition: border-color .22s ease, color .2s ease, transform .22s var(--ease-out), box-shadow .22s ease;
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.icon-link:hover {
    color: var(--primary-strong);
    background: var(--surface-soft);
    transform: translateY(var(--hover-lift-md)) scale(1.04);
    border-color: #becbff;
    box-shadow: 0 12px 24px #3f63ff38
}

.icon-link svg {
    fill: currentColor;
    width: 22px;
    height: 22px
}

.card,
.timeline-item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background: linear-gradient(#121a32 0%, #0f172d 100%)
}

.section {
    padding: clamp(3.8rem, 7.6vw, 5.2rem) 0
}

@supports (content-visibility:auto) {
    .section {
        content-visibility: auto;
        contain-intrinsic-size: 1px 920px
    }

    #contact.section {
        contain-intrinsic-size: 1px 980px
    }
}

section[id],
article[id] {
    scroll-margin-top: calc(var(--header-height) + clamp(.8rem, 2vw, 1.4rem))
}

#about.section {
    padding-top: clamp(7rem, 12vw, 9.4rem)
}

.about-section-header {
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: clamp(1.5rem, 3vw, 2.2rem);
    display: flex;
    position: relative
}

.about-section-header h2 {
    text-align: center;
    color: #edf5ff;
    text-shadow: 0 0 14px #4e9aff38;
    margin: 0;
    animation: 6s ease-in-out infinite aboutTitlePulse
}

.about-hero {
    max-width: 900px;
    transition: opacity .32s var(--ease-out), transform .32s var(--ease-out), max-height .4s var(--ease-out);
    opacity: 1;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: clamp(2rem, 5vw, 3.8rem);
    max-height: 1000px;
    margin: 0 auto;
    animation: 8s ease-in-out infinite aboutHeroFloat;
    display: grid;
    transform: translateY(0)
}

.about-content {
    flex: 1
}

.about-content h2 {
    text-align: left;
    margin-bottom: 1.25rem
}

.about-content p {
    letter-spacing: .01em;
    text-shadow: 0 0 12px #3d84e414;
    font-size: clamp(1.08rem, 1.45vw, 1.22rem);
    line-height: 1.82;
    animation: 9s ease-in-out infinite aboutCopyGlow
}

.about-visual {
    isolation: isolate;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative
}

.about-visual:before {
    content: "";
    opacity: .58;
    pointer-events: none;
    border: 1px solid #88cbff47;
    border-radius: 22px;
    width: clamp(168px, 30vw, 238px);
    height: clamp(168px, 30vw, 238px);
    animation: 16s linear infinite aboutOrbitSpin;
    position: absolute
}

.about-visual:after {
    content: "";
    pointer-events: none;
    opacity: .52;
    background: radial-gradient(circle at 30% 30%, #76ceff38 0%, #76ceff00 68%);
    border-radius: 20px;
    width: clamp(150px, 27vw, 218px);
    height: clamp(150px, 27vw, 218px);
    animation: 6s ease-in-out infinite aboutPulseGlow;
    position: absolute
}

.about-visual img {
    opacity: 1;
    backface-visibility: hidden;
    will-change: transform;
    width: clamp(140px, 25vw, 200px);
    height: clamp(140px, 25vw, 200px);
    transition: transform .3s var(--ease-out), box-shadow .3s ease;
    border-radius: 16px;
    animation: 6.4s ease-in-out .35s infinite aboutAvatarFloat;
    transform: translateZ(0);
    box-shadow: 0 12px 32px #1c2c5e33, 0 0 24px #3f63ff1f
}

.about-visual img:hover {
    transform: scale(1.06)rotate(-2deg);
    box-shadow: 0 16px 40px #1c2c5e40, 0 0 32px #3f63ff2e
}

.about-visual .hero-portrait {
    --portrait-base-x: 0px;
    --portrait-base-rot: 0deg;
    max-width: clamp(140px, 25vw, 200px);
    margin: 0;
    padding: 0
}

.about-visual .hero-portrait:before,
.about-visual .hero-portrait:after {
    display: none
}

.about-visual .hero-portrait img {
    object-fit: cover;
    object-position: center 20%;
    border-radius: 16px;
    width: clamp(140px, 25vw, 200px);
    height: clamp(140px, 25vw, 200px);
    max-height: clamp(140px, 25vw, 200px);
    animation: 6.4s ease-in-out .35s infinite aboutAvatarFloat;
    box-shadow: 0 12px 32px #1c2c5e33, 0 0 24px #3f63ff1f;
    -webkit-mask-image: none;
    mask-image: none
}

#about .narrow:before {
    display: none
}

#contact.section {
    padding-top: clamp(5.2rem, 9.6vw, 6.6rem)
}

#contact .narrow {
    width: 100%
}

.section h2 {
    font-size: var(--type-h2);
    letter-spacing: -.02em;
    margin: 0 0 1.25rem
}

.section-title-center {
    text-align: center
}

.section p {
    color: var(--muted)
}

#about .narrow {
    position: relative
}

#about .narrow:before {
    content: "";
    opacity: .6;
    background: linear-gradient(90deg, #0000, #3f63ff, #0000);
    border-radius: 999px;
    width: clamp(80px, 20vw, 160px);
    height: 3px;
    position: absolute;
    bottom: clamp(-1.2rem, -2.4vw, -1.6rem);
    left: 50%;
    transform: translate(-50%)
}

#about .narrow p {
    letter-spacing: .01em;
    font-size: clamp(1.15rem, 1.7vw, 1.34rem);
    line-height: 1.85
}

.skills-merged-block {
    scroll-margin-top: calc(var(--header-height) + clamp(1.2rem, 2.5vw, 2rem));
    margin-top: clamp(5.2rem, 10vw, 7.2rem);
    position: relative
}

.card-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: clamp(1.35rem, 2vw, 1.8rem);
    display: grid
}

.card {
    transition: transform .24s var(--ease-out), box-shadow .24s ease, border-color .2s ease;
    padding: 1.35rem
}

.card:hover,
.timeline-item:hover {
    border-color: #d0daf2;
    transform: translateY(-5px)scale(1.01);
    box-shadow: 0 20px 38px #1c2c5e24
}

.card h3 {
    margin-top: 0;
    margin-bottom: .42rem
}

.skills-achievements {
    gap: clamp(1.05rem, 2vw, 1.45rem);
    display: grid
}

.skills-achievements-head {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: .75rem;
    display: flex
}

.skills-achievements-title {
    font-size: var(--type-h3);
    letter-spacing: .01em;
    margin: 0
}

.skills-achievements-intro {
    color: var(--muted);
    font-size: var(--type-meta);
    max-width: 60ch;
    margin: 0
}

.skills-achievements-layout {
    animation: aboutRevealRise .9s var(--ease-out) .1s both;
    grid-template-columns: 1fr;
    align-items: start;
    gap: clamp(.9rem, 1.8vw, 1.25rem);
    display: grid
}

.skill-invaders-shell {
    background: radial-gradient(circle at 12% 18%, #63bcff2e 0%, #63bcff00 38%), radial-gradient(circle at 82% 84%, #547fff24 0%, #547fff00 34%), linear-gradient(165deg, #0b1a3af2 0%, #050e21fa 100%);
    border: 1px solid #6db5ff70;
    border-radius: 20px;
    gap: clamp(1.05rem, 2.1vw, 1.5rem);
    margin: 0;
    padding: clamp(1.25rem, 2.8vw, 1.8rem);
    display: grid;
    box-shadow: 0 26px 50px #050e237a
}

.skill-invaders-hud {
    gap: .42rem;
    display: grid
}

.skill-invaders-hud-actions {
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    display: flex
}

.skill-invaders-title {
    letter-spacing: .02em;
    color: #d7efff;
    text-transform: uppercase;
    margin: 0;
    font-family: "Press Start 2P", Segoe UI, monospace;
    font-size: clamp(.72rem, 1.3vw, .82rem);
    line-height: 1.8
}

.skill-invaders-tip {
    color: #a2c4ea;
    margin: 0;
    font-size: .88rem
}

.skill-invaders-field-wrap {
    position: relative
}

.skill-invaders-modal {
    z-index: 7;
    pointer-events: none;
    opacity: 1;
    visibility: visible;
    place-items: center;
    padding: .75rem;
    transition: opacity .2s, visibility .2s;
    display: grid;
    position: absolute;
    inset: 0
}

.skill-invaders-modal.is-hidden {
    opacity: 0;
    visibility: hidden
}

.skill-invaders-modal-card {
    pointer-events: auto;
    text-align: center;
    background: linear-gradient(#0a1c3eeb 0%, #061024f0 100%);
    border: 1px solid #81c9ff94;
    border-radius: 12px;
    gap: .45rem;
    width: min(340px, 100vw - 3.2rem);
    padding: .68rem .72rem .72rem;
    display: grid;
    box-shadow: 0 14px 28px #030a188f
}

.skill-invaders-modal-title {
    color: #e9f8ff;
    letter-spacing: .01em;
    margin: 0;
    font-size: .94rem
}

.skill-invaders-modal-copy {
    color: #b8d4f2;
    margin: 0;
    font-size: .79rem;
    line-height: 1.5
}

.skill-invaders-modal-actions {
    grid-template-columns: minmax(0, 1fr);
    gap: .45rem;
    display: grid
}

.skill-invaders-modal-btn {
    color: #e6f5ff;
    letter-spacing: .02em;
    cursor: pointer;
    min-height: 34px;
    transition: border-color .2s ease, background-color .2s ease, transform .2s var(--ease-out);
    background: linear-gradient(#1f4c8fc7 0%, #102b55eb 100%);
    border: 1px solid #85c9ff8a;
    border-radius: 8px;
    font-family: Oxanium, Segoe UI, sans-serif;
    font-weight: 700
}

.skill-invaders-modal-btn:hover,
.skill-invaders-modal-btn:focus-visible {
    background: linear-gradient(#2b61b4d6 0%, #173d76f2 100%);
    border-color: #a6e3ffe0;
    outline: none
}

.skill-invaders-modal-btn:active {
    transform: translateY(1px)
}

.skill-invaders-modal-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none
}

.skill-invaders-field {
    cursor: crosshair;
    touch-action: none;
    background: linear-gradient(#081634e0 0%, #050e22fa 100%), repeating-linear-gradient(90deg, #9fddff17 0 1px, #9fddff00 1px 24px), repeating-linear-gradient(#9fddff17 0 1px, #9fddff00 1px 24px);
    border: 1px solid #7bc4ff75;
    border-radius: 14px;
    width: 100%;
    min-height: clamp(280px, 48vw, 460px);
    position: relative;
    overflow: hidden
}

.skill-invader {
    width: 62px;
    height: 62px;
    box-shadow: none;
    background: 0 0;
    border: none;
    place-items: center;
    transition: opacity .2s, transform .18s;
    display: grid;
    position: absolute
}

.skill-invader img {
    object-fit: contain;
    filter: drop-shadow(1px 0 #000000f2)drop-shadow(-1px 0 #000000f2)drop-shadow(0 1px #000000f2)drop-shadow(0 -1px #000000f2)drop-shadow(0 2px 4px #0000008f);
    pointer-events: none;
    width: 34px;
    height: 34px
}

.skill-invader.is-hit {
    opacity: 0;
    transform: scale(.48)
}

.skill-invaders-player {
    clip-path: polygon(0 100%, 0 62%, 14% 62%, 14% 38%, 30% 38%, 30% 22%, 70% 22%, 70% 38%, 86% 38%, 86% 62%, 100% 62%, 100% 100%);
    width: 66px;
    height: 26px;
    image-rendering: pixelated;
    background: repeating-linear-gradient(90deg, #8ed7ff 0 6px, #76c3f4 6px 12px, #5da7dc 12px 18px, #4d95cf 18px 24px, #5da7dc 24px 30px, #76c3f4 30px 36px, #8ed7ff 36px 42px, #76c3f4 42px 48px, #5da7dc 48px 54px, #4d95cf 54px 60px, #5da7dc 60px 66px);
    border: 2px solid #091428f2;
    border-radius: 0;
    position: absolute;
    bottom: 14px;
    transform: translate(-50%);
    box-shadow: 0 8px #00000052, inset 0 0 0 2px #18325cb3, inset 0 -3px #c4ebff73
}

.skill-invaders-player:before {
    content: "";
    clip-path: polygon(0 100%, 0 28%, 18% 28%, 18% 0, 82% 0, 82% 28%, 100% 28%, 100% 100%);
    background: linear-gradient(#dff5ff 0%, #9cd7fb 100%);
    border: 2px solid #0a1426f2;
    border-radius: 0;
    width: 22px;
    height: 10px;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translate(-50%);
    box-shadow: 0 3px #00000038
}

.skill-invaders-player:after {
    content: "";
    background: repeating-linear-gradient(90deg, #90e6ffe6 0 4px, #5cbeffe0 4px 8px);
    border-radius: 0;
    width: 34px;
    height: 8px;
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translate(-50%);
    box-shadow: 0 0 0 1px #061022e6, 0 0 10px #80d6ff59
}

.skill-invaders-shot {
    background: linear-gradient(#e8fbfffa 0%, #6ed5ffcc 100%);
    border-radius: 2px;
    width: 4px;
    height: 15px;
    position: absolute;
    box-shadow: 0 0 12px #76deffb3
}

.skill-invaders-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
    display: none
}

.skill-invaders-control {
    color: #d9efff;
    letter-spacing: .01em;
    background: linear-gradient(#143065bd 0%, #0e1e42e6 100%);
    border: 1px solid #80c1ff80;
    border-radius: 10px;
    min-height: 44px;
    font-family: Oxanium, Segoe UI, sans-serif;
    font-weight: 700
}

.skill-invaders-control:active {
    transform: translateY(1px)
}

.skill-invaders-restart {
    color: #e6f6ff;
    letter-spacing: .02em;
    cursor: pointer;
    background: linear-gradient(#204e97bd 0%, #143262eb 100%);
    border: 1px solid #7ec6ff9e;
    border-radius: 10px;
    justify-self: start;
    min-height: 40px;
    padding: .42rem .86rem;
    font-family: Oxanium, Segoe UI, sans-serif;
    font-weight: 700
}

.skill-invaders-hud-actions .skill-invaders-restart {
    justify-self: auto
}

.skill-invaders-restart:hover,
.skill-invaders-restart:focus-visible {
    background: linear-gradient(#285dadd6 0%, #163c76f2 100%);
    border-color: #a0e4ffeb;
    outline: none
}

.skill-invaders-showcase {
    background: linear-gradient(#091836b3 0%, #070f24e6 100%);
    border: 1px solid #70b3ff57;
    border-radius: 14px;
    grid-template-columns: minmax(0, 1.08fr) minmax(220px, .92fr);
    align-items: start;
    gap: .42rem 1.05rem;
    padding: 1.08rem 1.08rem 1.12rem;
    display: grid
}

.skill-invaders-showcase-title {
    color: #eaf6ff;
    margin: 0;
    font-size: clamp(1.08rem, 2vw, 1.34rem)
}

.skill-invaders-showcase-rank {
    color: #98d5ff;
    margin: .48rem 0 0;
    font-size: clamp(.98rem, 1.48vw, 1.06rem);
    font-weight: 700
}

.skill-invaders-showcase-summary,
.skill-invaders-showcase-unlocks {
    color: #bfd0ea;
    margin: .54rem 0 0;
    font-size: clamp(.93rem, 1.24vw, 1rem);
    line-height: 1.7
}

.skill-invaders-captured {
    flex-wrap: wrap;
    grid-area: 1/2/span 4;
    align-content: flex-start;
    gap: .55rem;
    margin-top: 0;
    display: flex
}

.skill-invaders-chip {
    color: #d8efff;
    cursor: pointer;
    background: #1a45878f;
    border: 1px solid #8cceff80;
    border-radius: 13px;
    place-items: center;
    width: 2.55rem;
    height: 2.55rem;
    padding: 0;
    transition: border-color .2s, background-color .2s, color .2s;
    display: inline-grid
}

.skill-invaders-chip-icon {
    object-fit: contain;
    filter: drop-shadow(1px 0 #000000eb)drop-shadow(-1px 0 #000000eb);
    pointer-events: none;
    width: 19px;
    height: 19px
}

.skill-invaders-win {
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 6;
    background: #02060ec2;
    place-items: center;
    padding: 1rem;
    transition: opacity .22s, visibility .22s;
    display: grid;
    position: absolute;
    inset: 0
}

.skill-invaders-win.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto
}

.skill-invaders-win-card {
    text-align: center;
    background: linear-gradient(#0a1b3afa 0%, #050d1efa 100%);
    border: 1px solid #aee0ff94;
    border-radius: 18px;
    width: min(100%, 420px);
    padding: 1.2rem 1.15rem;
    box-shadow: 0 24px 54px #00000075, 0 0 0 1px #60abff29
}

.skill-invaders-win-kicker {
    color: #82d2ff;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin: 0;
    font-size: .78rem;
    font-weight: 800
}

.skill-invaders-win-title {
    color: #f6fbff;
    margin: .42rem 0 0;
    font-family: Oxanium, Segoe UI, sans-serif;
    font-size: clamp(1.7rem, 3vw, 2.3rem)
}

.skill-invaders-win-copy {
    color: #bfd0ea;
    margin: .72rem 0 0;
    font-size: .98rem;
    line-height: 1.65
}

.skill-invaders-chip:hover,
.skill-invaders-chip:focus-visible {
    color: #edf9ff;
    background: #2457a4bd;
    border-color: #ace4ffeb;
    outline: none
}

.skill-invaders-chip.is-active {
    color: #f3fbff;
    background: linear-gradient(#2c6fc7d6 0%, #1e529deb 100%);
    border-color: #c2eefffa;
    box-shadow: 0 0 0 1px #9de2ff47, 0 0 16px #48aaff57
}

@media (width<=860px) {
    .skill-invaders-field {
        min-height: clamp(320px, 74vw, 460px)
    }

    .skill-invader {
        width: 54px;
        height: 54px
    }

    .skill-invader img {
        width: 30px;
        height: 30px
    }
}

@media (width<=480px) {
    .skill-invaders-shell {
        padding: 1rem .9rem
    }

    .skill-invaders-modal {
        padding: .56rem;
        inset: 0
    }

    .skill-invaders-modal-card {
        width: 100%;
        padding: .62rem .62rem .65rem
    }

    .skill-invaders-modal-title {
        font-size: .86rem
    }

    .skill-invaders-modal-copy {
        font-size: .75rem
    }

    .skill-invaders-modal-btn {
        min-height: 32px;
        font-size: .84rem
    }

    .skill-invaders-field {
        min-height: clamp(300px, 82vw, 440px)
    }

    .skill-invaders-showcase {
        grid-template-columns: minmax(0, 1fr);
        padding: .95rem .9rem
    }

    .skill-invaders-captured {
        grid-area: auto/1;
        margin-top: .6rem
    }

    .skill-invaders-win-card {
        padding: 1rem .9rem
    }
}

.achievement-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(172px, 100%), 1fr));
    gap: clamp(.82rem, 1.6vw, 1.08rem);
    display: grid
}

.achievement-tile {
    border: 1px solid var(--achievement-tile-border);
    background: var(--achievement-tile-bg);
    min-height: 188px;
    color: inherit;
    text-align: left;
    cursor: pointer;
    opacity: 0;
    animation: reveal-fade .6s var(--ease-out) forwards;
    transition: transform .28s var(--ease-out), border-color .24s ease, box-shadow .28s ease;
    border-radius: 14px;
    flex-direction: column;
    align-items: flex-start;
    gap: .7rem;
    padding: 1rem .94rem;
    display: flex;
    position: relative;
    overflow: hidden;
    transform: translateY(0);
    box-shadow: 0 14px 26px #0810274d
}

.achievement-tile:first-child {
    animation-delay: 80ms
}

.achievement-tile:nth-child(2) {
    animation-delay: .14s
}

.achievement-tile:nth-child(3) {
    animation-delay: .2s
}

.achievement-tile:nth-child(4) {
    animation-delay: .26s
}

.achievement-tile:nth-child(5) {
    animation-delay: .32s
}

.achievement-tile:nth-child(6) {
    animation-delay: .38s
}

.achievement-tile:nth-child(7) {
    animation-delay: .44s
}

@keyframes reveal-fade {
    0% {
        opacity: 0;
        transform: translateY(12px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.achievement-tile:before {
    content: "";
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    background: linear-gradient(145deg, #8fd8ff38, #6292ff0a);
    transition: opacity .24s;
    position: absolute;
    inset: 0
}

.achievement-tile:after {
    content: "";
    opacity: .28;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(#baebff00 0%, #baebff26 48%, #baebff00 100%);
    border-radius: 50%;
    width: 72%;
    height: 220%;
    animation: 8.2s ease-in-out infinite badgeSheen;
    position: absolute;
    top: -58%;
    left: -42%;
    transform: rotate(18deg)translate(-22%)
}

.achievement-tile:hover {
    transform: translateY(-4px)
}

.achievement-tile:hover:before {
    opacity: .32
}

.achievement-tile.is-active {
    border-color: #89d4ff;
    transform: translateY(-4px);
    box-shadow: 0 20px 34px #0911286b
}

.achievement-tile.is-active:before {
    opacity: .4
}

.achievement-tile:focus,
.achievement-tile:focus-visible {
    box-shadow: none;
    outline: none
}

.achievement-logo {
    z-index: 1;
    background: linear-gradient(145deg, #1a3060e0, #0c162cfa);
    border: 1px solid #e5f4ff4d;
    border-radius: 18px;
    justify-content: center;
    align-items: center;
    width: 72px;
    height: 72px;
    padding: .78rem;
    display: inline-flex;
    position: relative;
    box-shadow: 0 10px 16px #070d1f4d
}

.achievement-logo img {
    object-fit: contain;
    filter: drop-shadow(0 1px 4px #0000003d);
    width: 100%;
    height: 100%;
    animation: 5.6s ease-in-out infinite badgeIconFloat;
    display: block
}

.achievement-tile:nth-child(2n) .achievement-logo img {
    animation-delay: .35s
}

.achievement-tile:nth-child(3n) .achievement-logo img {
    animation-delay: .72s
}

.achievement-name {
    color: #e8f2ff;
    z-index: 1;
    margin: 0;
    font-size: 1.08rem;
    font-weight: 700;
    position: relative
}

.achievement-rank {
    color: #a8dfff;
    letter-spacing: .02em;
    text-transform: none;
    z-index: 1;
    background: #689aff29;
    border-radius: 999px;
    align-self: flex-start;
    margin-top: auto;
    padding: .28rem .65rem;
    font-size: .72rem;
    font-weight: 650;
    position: relative
}

.achievement-showcase {
    top: calc(var(--header-height) + 1rem);
    background: linear-gradient(165deg, #0e1c3af2 0%, #081124fa 100%);
    border: 1px solid #619af06b;
    margin-top: 0;
    padding: 1.2rem 1.24rem 1.25rem;
    position: sticky;
    overflow: hidden;
    box-shadow: 0 18px 34px #09122b57
}

@media (width<=520px) {
    .achievement-showcase {
        opacity: 0;
        pointer-events: none;
        z-index: 1000;
        width: min(90vw, 320px);
        max-height: 60vh;
        position: fixed;
        inset: 50% auto auto 50%;
        overflow-y: auto;
        transform: translate(-50%, -50%)scale(.8)
    }
}

.achievement-showcase:before {
    content: "";
    pointer-events: none;
    background: radial-gradient(circle, #95dcff47 0%, #95dcff00 72%);
    height: 120px;
    animation: 9.2s ease-in-out infinite showcaseSweep;
    position: absolute;
    inset: -18% -50% auto;
    transform: translate(-20%)
}

.achievement-showcase-close {
    display: none
}

@media (width<=980px) {
    .achievement-showcase-close {
        color: #d8ecff;
        cursor: pointer;
        z-index: 2;
        background: #06122cd1;
        border: 1px solid #8cbcff73;
        border-radius: 999px;
        justify-content: center;
        align-items: center;
        width: 28px;
        height: 28px;
        font-size: .9rem;
        line-height: 1;
        display: inline-flex;
        position: absolute;
        top: .6rem;
        right: .6rem
    }
}

.achievement-showcase.is-updating .achievement-showcase-title,
.achievement-showcase.is-updating .achievement-showcase-rank,
.achievement-showcase.is-updating .achievement-showcase-summary,
.achievement-showcase.is-updating .achievement-showcase-unlocks {
    animation: showcaseRefreshText .52s var(--ease-out)
}

.achievement-showcase:hover {
    border-color: #6aaeff7a;
    transform: none;
    box-shadow: 0 18px 34px #09122b57
}

.achievement-showcase-label {
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9ccff4;
    margin: 0;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.4
}

.achievement-showcase-title {
    color: #edf4ff;
    margin: .36rem 0 0;
    font-size: clamp(1.05rem, 2.1vw, 1.3rem)
}

.achievement-showcase-rank {
    color: #8fd4ff;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: .42rem 0 0;
    font-size: .84rem;
    font-weight: 700
}

.achievement-showcase-summary {
    color: #b8c5e2;
    margin: .56rem 0 0
}

.achievement-showcase-unlocks {
    color: #b7dfff;
    margin: .42rem 0 0;
    font-size: .9rem;
    font-weight: 600
}

.experience-section {
    padding-top: clamp(3.2rem, 7.2vw, 5rem);
    padding-bottom: clamp(2rem, 4.8vw, 3.2rem)
}

.experience-header {
    text-align: center;
    margin-bottom: clamp(2rem, 4vw, 3rem)
}

.experience-hero {
    grid-template-columns: 1fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: clamp(1.6rem, 3.6vw, 2.8rem);
    display: grid
}

.experience-content {
    flex-direction: column;
    order: 1;
    gap: clamp(1.2rem, 2.4vw, 1.8rem);
    display: flex
}

.experience-content p {
    color: var(--muted);
    max-width: 65ch;
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    line-height: 1.75
}

.experience-highlights {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.2rem;
    margin-top: .4rem;
    display: grid
}

.highlight-item {
    backdrop-filter: blur(8px);
    background: #6ca9ff0f;
    border: 1px solid #6ca9ff2e;
    border-radius: 8px;
    padding: 1.2rem
}

.highlight-item h4 {
    color: var(--accent);
    letter-spacing: .5px;
    margin-bottom: .6rem;
    font-size: .95rem;
    font-weight: 600
}

.highlight-item p {
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.6
}

.experience-visual {
    isolation: isolate;
    order: 2;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative
}

.experience-visual .hero-portrait {
    --portrait-base-x: 0px;
    --portrait-base-rot: 0deg;
    max-width: clamp(280px, 45vw, 380px);
    margin: 0;
    padding: 0
}

.experience-visual .hero-portrait:before,
.experience-visual .hero-portrait:after {
    display: none
}

.experience-visual .hero-portrait img {
    border-radius: 12px;
    width: clamp(280px, 45vw, 380px);
    height: auto;
    -webkit-mask-image: none;
    mask-image: none
}

.experience-doc-showcase {
    background: radial-gradient(circle at 78% 35%, #3676ff1a 0%, #3676ff00 46%), radial-gradient(circle at 8% 80%, #28468c38 0%, #28468c00 52%), linear-gradient(160deg, #070f22f5 0%, #040b1cfa 100%);
    border: 1px solid #68a6ff2e;
    border-radius: 24px;
    grid-template-columns: 1fr;
    align-items: center;
    gap: clamp(1.8rem, 4vw, 2.8rem);
    margin-top: clamp(1.4rem, 3vw, 2.2rem);
    padding: clamp(1.2rem, 2.5vw, 1.8rem);
    display: grid;
    position: relative;
    overflow: hidden;
    box-shadow: 0 26px 44px #050d225c
}

.experience-doc-showcase:after {
    content: "";
    pointer-events: none;
    opacity: .25;
    background: repeating-linear-gradient(90deg, #ffffff05 0 1px, #fff0 1px 8px);
    position: absolute;
    inset: 0
}

.experience-doc-info {
    z-index: 1;
    gap: clamp(.95rem, 2vw, 1.2rem);
    display: grid;
    position: relative
}

.experience-doc-info h3 {
    letter-spacing: -.02em;
    color: #f4f7ff;
    margin: 0;
    font-size: clamp(1.05rem, 1.75vw, 1.3rem);
    line-height: 1.35
}

.experience-doc-info p {
    color: #d6e2f7b8;
    max-width: 58ch;
    margin: 0;
    font-size: clamp(1rem, 1.45vw, 1.16rem);
    line-height: 1.72
}

.experience-doc-media {
    z-index: 1;
    aspect-ratio: 16/10;
    transition: transform .34s var(--ease-out), border-color .24s ease, box-shadow .32s var(--ease-out);
    background: #08132df0;
    border: 1px solid #7cb2ff38;
    border-radius: 18px;
    display: block;
    position: relative;
    overflow: hidden;
    box-shadow: 0 18px 34px #050d2257
}

.experience-doc-media:after {
    content: "";
    pointer-events: none;
    background: linear-gradient(#0b183a0f 18%, #050d22c7 100%);
    position: absolute;
    inset: 0
}

.experience-doc-media img {
    width: 100%;
    height: auto;
    transition: transform .42s var(--ease-out), filter .3s ease;
    display: block
}

.experience-doc-media:hover {
    border-color: #94d2ff70;
    transform: translateY(-3px);
    box-shadow: 0 24px 40px #050d2270, 0 0 0 1px #70bcff1f
}

.experience-doc-media:hover img {
    filter: none;
    transform: none
}

.experience-doc-showcase--organization {
    background: radial-gradient(circle at 15% 12%, #58acff33 0%, #58acff00 45%), linear-gradient(165deg, #0d1b39f2 0%, #070f22fa 100%);
    border-color: #85c7ff6b;
    box-shadow: 0 18px 32px #08102757
}

.experience-doc-showcase--organization .experience-doc-media {
    border-color: #88c5ff47;
    border-radius: 12px;
    box-shadow: 0 14px 28px #050c1c57
}

.experience-doc-media--offset {
    margin-top: 0
}

.experience-doc-media--offset-img {
    margin-top: -80px !important;
    padding-top: 20px
}

.experience-doc-showcase--organization .experience-doc-info h3,
.experience-doc-showcase--organization .experience-doc-info h4 {
    color: #edf5ff;
    text-wrap: balance;
    margin: 0;
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    line-height: 1.55
}

.experience-doc-showcase--organization .experience-doc-info p {
    color: #dfedffd1
}

.experience-doc-showcase--organization .experience-doc-info {
    gap: clamp(.72rem, 1.8vw, 1rem)
}

.experience-doc-showcase--organization .experience-doc-info .organization-role {
    letter-spacing: .01em;
    margin-top: .2rem;
    font-weight: 600
}

.experience-doc-showcase--organization .experience-doc-info .organization-year {
    letter-spacing: .02em;
    color: #d0e3fbe6;
    margin-top: -.1rem;
    font-size: clamp(.92rem, 1.25vw, 1.02rem)
}

.experience-doc-showcase--organization .experience-doc-info .organization-summary {
    max-width: 64ch;
    margin-top: .28rem;
    line-height: 1.84
}

@media (width>=1060px) {
    .experience-hero {
        grid-template-columns: 1.14fr .86fr
    }

    .experience-doc-showcase {
        grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr);
        padding: clamp(1.4rem, 2vw, 1.9rem) clamp(1.5rem, 2.4vw, 2.1rem)
    }

    .experience-doc-showcase--organization {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr)
    }

    .experience-content {
        order: 1
    }

    .experience-visual {
        order: 2
    }
}

.organization-card {
    background: radial-gradient(circle at 15% 12%, #58acff33 0%, #58acff00 45%), linear-gradient(165deg, #0d1b39f2 0%, #070f22fa 100%);
    border-color: #69aaff47;
    padding: clamp(1.15rem, 2.4vw, 1.7rem);
    box-shadow: 0 18px 32px #08102757
}

.organization-card-featured {
    border-color: #85c7ff6b
}

.organization-card h4 {
    color: #edf5ff;
    margin: 0;
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    line-height: 1.45
}

.organization-role {
    color: #ffd37b;
    margin: .38rem 0 0;
    font-size: .94rem;
    font-weight: 700
}

.organization-year {
    color: #9db4e2;
    margin: .14rem 0 0;
    font-size: .84rem
}

.organization-summary {
    color: #c0cce7;
    max-width: 82ch;
    margin: 1rem 0 0;
    font-size: .95rem;
    line-height: 1.7
}

@keyframes aboutAuraDrift {
    0% {
        background-position: 0 0, 100% 100%, 50%
    }

    to {
        background-position: 18% 14%, 84% 70%, 50%
    }
}

@keyframes aboutLinePulse {

    0%,
    to {
        opacity: .8;
        transform: translate(-50%)scaleX(.98)
    }

    50% {
        opacity: 1;
        transform: translate(-50%)scaleX(1.02)
    }
}

@keyframes aboutTitlePulse {

    0%,
    to {
        text-shadow: 0 0 12px #4e9aff2e
    }

    50% {
        text-shadow: 0 0 22px #7cc9ff5c
    }
}

@keyframes aboutHeroFloat {

    0%,
    to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-5px)
    }
}

@keyframes aboutCopyGlow {

    0%,
    to {
        text-shadow: 0 0 8px #3d84e40f
    }

    50% {
        text-shadow: 0 0 16px #76c4ff29
    }
}

@keyframes aboutAvatarFloat {

    0%,
    to {
        transform: translate(0, 0)
    }

    50% {
        transform: translateY(-5px)
    }
}

@keyframes aboutOrbitSpin {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes aboutPulseGlow {

    0%,
    to {
        opacity: .45;
        transform: scale(1)
    }

    50% {
        opacity: .75;
        transform: scale(1.03)
    }
}

@keyframes aboutRevealRise {
    0% {
        opacity: 0;
        transform: translateY(12px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes badgeSheen {

    0%,
    to {
        opacity: .18;
        transform: rotate(18deg)translate(-24%)
    }

    50% {
        opacity: .33;
        transform: rotate(18deg)translate(148%)
    }
}

@keyframes badgeIconFloat {

    0%,
    to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-4px)
    }
}

@keyframes showcaseSweep {

    0%,
    to {
        opacity: .24;
        transform: translate(-24%)
    }

    50% {
        opacity: .42;
        transform: translate(22%)
    }
}

@keyframes showcaseRefreshText {
    0% {
        opacity: .25;
        transform: translateY(8px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.perf-lite #about.section:before,
.perf-lite #about.section:after,
.perf-lite #skills.section:before,
.perf-lite #skills.section:after,
.perf-lite .about-hero,
.perf-lite .about-content p,
.perf-lite .about-visual:before,
.perf-lite .about-visual:after,
.perf-lite .achievement-tile:after,
.perf-lite .achievement-logo img,
.perf-lite .achievement-showcase:before {
    animation: none !important
}

.perf-lite .about-visual img {
    opacity: 1;
    transform: translate(0, 0);
    animation: none !important
}

#projects .card-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: clamp(1.45rem, 2.2vw, 2rem)
}

.project-card {
    border: 1px solid var(--project-card-border);
    background: var(--project-card-bg);
    box-shadow: var(--project-card-shadow);
    transition: transform .26s var(--ease-smooth), box-shadow .26s ease, border-color .22s ease;
    padding: 0;
    overflow: hidden
}

.project-card:hover {
    box-shadow: var(--project-card-hover-shadow);
    border-color: var(--project-card-hover-border);
    transform: translateY(-11px)
}

.project-thumb {
    aspect-ratio: 16/9;
    object-fit: cover;
    border-bottom: 1px solid var(--project-thumb-divider);
    width: 100%;
    transition: transform .3s var(--ease-out);
    display: block
}

.project-card:hover .project-thumb {
    transform: scale(1.05)
}

.project-card-body {
    flex-direction: column;
    gap: .85rem;
    padding: 1.35rem;
    display: flex
}

.project-card h3 {
    color: var(--project-card-title);
    font-size: var(--type-h3);
    letter-spacing: .01em;
    margin: 0
}

.project-card p {
    color: var(--project-card-text);
    margin: 0;
    line-height: 1.65
}

.project-impact {
    color: var(--muted);
    font-size: .93rem;
    line-height: 1.55
}

.project-tech {
    flex-wrap: wrap;
    gap: .55rem;
    display: flex
}

.project-tech span {
    border: 1px solid var(--project-pill-border);
    background: var(--project-pill-bg);
    color: var(--project-pill-text);
    font-size: var(--type-meta);
    border-radius: 999px;
    align-items: center;
    padding: .34rem .78rem;
    font-weight: 600;
    display: inline-flex
}

.project-link {
    border: 1px solid var(--project-link-border);
    background: var(--project-link-bg);
    width: fit-content;
    color: var(--project-link-text);
    transition: transform .22s var(--ease-out), border-color .22s ease, background-color .22s ease, color .22s ease;
    border-radius: 10px;
    align-items: center;
    margin-top: .2rem;
    padding: .6rem 1rem;
    font-weight: 700;
    display: inline-flex
}

.project-link:hover {
    border-color: var(--project-link-hover-border);
    background: var(--project-link-hover-bg);
    color: var(--project-link-hover-text);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px #2b70c438
}

#achievements .achievement-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: clamp(1.45rem, 2.2vw, 2rem)
}

.achievement-groups {
    gap: clamp(2rem, 4vw, 3rem);
    display: grid
}

.achievement-group {
    gap: 1.1rem;
    display: grid
}

.achievement-group+.achievement-group {
    border-top: 1px solid #70b4ff38;
    padding-top: clamp(1.45rem, 3vw, 2rem)
}

.achievement-group-head {
    gap: .34rem;
    display: grid
}

.achievement-group-kicker {
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8fdcff;
    margin: 0;
    font-family: "Press Start 2P", Segoe UI, monospace;
    font-size: clamp(.48rem, .95vw, .58rem)
}

.achievement-group-title {
    color: #edf4ff;
    margin: 0;
    font-size: clamp(1.02rem, 1.8vw, 1.28rem);
    line-height: 1.35
}

.achievement-group-non-technical .achievement-group-kicker {
    color: #ffb7c8
}

.achievement-card {
    border: 1px solid var(--project-card-border);
    background: var(--project-card-bg);
    box-shadow: var(--project-card-shadow);
    transition: transform .24s var(--ease-out), box-shadow .24s ease, border-color .22s ease;
    padding: 0;
    overflow: hidden
}

.achievement-card:hover {
    box-shadow: var(--project-card-hover-shadow);
    border-color: var(--project-card-hover-border);
    transform: translateY(-8px)
}

.achievement-accent {
    background: linear-gradient(90deg, #2ea3ff 0%, #31c8ff 100%);
    height: 10px
}

.achievement-thumb {
    aspect-ratio: 16/9;
    object-fit: cover;
    border-bottom: 1px solid var(--project-thumb-divider);
    width: 100%;
    transition: transform .3s var(--ease-out);
    display: block
}

.achievement-card:hover .achievement-thumb {
    transform: scale(1.035)
}

.achievement-card-body {
    flex-direction: column;
    gap: .85rem;
    padding: 1.3rem;
    display: flex
}

.achievement-card h3 {
    color: var(--project-card-title);
    font-size: var(--type-h3);
    letter-spacing: .01em;
    margin: 0
}

.achievement-card p {
    color: var(--project-card-text);
    margin: 0;
    line-height: 1.65
}

.show-more-item.is-collapsed {
    display: none
}

.show-more-wrap {
    justify-content: center;
    margin-top: 1.2rem;
    display: flex
}

.show-more-btn {
    color: var(--show-more-text);
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    opacity: .9;
    min-height: auto;
    transition: transform .22s var(--ease-out), color .22s ease, opacity .22s ease;
    background: 0 0;
    border: none;
    border-radius: 0;
    justify-content: center;
    align-items: center;
    gap: .48rem;
    padding: .28rem .22rem;
    font-size: .95rem;
    font-weight: 700;
    display: inline-flex;
    position: relative
}

.show-more-btn:after {
    content: "";
    opacity: .3;
    transform-origin: 50%;
    height: 1px;
    transition: transform .22s var(--ease-out), opacity .22s ease;
    background: currentColor;
    position: absolute;
    bottom: -.08rem;
    left: 0;
    right: 0;
    transform: scaleX(.72)
}

.show-more-btn:hover {
    color: var(--show-more-hover-text);
    opacity: 1;
    transform: translateY(-1px)
}

.show-more-btn:hover:after {
    opacity: .78;
    transform: scaleX(1)
}

.show-more-btn:focus,
.show-more-btn:focus-visible {
    box-shadow: none;
    outline: none
}

.show-more-icon {
    width: .95rem;
    transition: transform .24s var(--ease-out);
    justify-content: center;
    align-items: center;
    font-size: .84rem;
    display: inline-flex
}

.show-more-btn[aria-expanded=true] .show-more-icon {
    transform: rotate(180deg)
}

.show-more-item.show-more-reveal {
    animation: showMoreReveal .58s var(--ease-out) both;
    animation-delay: var(--show-more-delay, 0s)
}

@keyframes showMoreReveal {
    0% {
        opacity: 0;
        transform: translateY(24px)scale(.98)
    }

    to {
        opacity: 1;
        transform: translate(0, 0)scale(1)
    }
}

.stack {
    gap: .92rem;
    display: grid
}

.timeline-item {
    transition: transform .24s var(--ease-out), box-shadow .24s ease, border-color .2s ease;
    padding: 1.15rem 1.35rem
}

.timeline-item h3 {
    margin: 0;
    font-size: 1.12rem
}

.contact-form {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    transition: transform .24s var(--ease-out), box-shadow .24s ease, border-color .2s ease;
    background: linear-gradient(#121a32 0%, #0f172d 100%);
    margin-top: 0;
    padding: 1rem
}

.contact-panel {
    grid-template-columns: minmax(200px, .82fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(.9rem, 2vw, 1.2rem);
    width: min(980px, 100%);
    margin: 0 auto;
    display: grid
}

.contact-copy {
    align-content: start;
    gap: .62rem;
    padding-top: .2rem;
    display: grid
}

.contact-copy h2 {
    letter-spacing: -.02em;
    margin: 0;
    font-size: clamp(1.5rem, 2.3vw, 1.9rem)
}

.contact-copy p {
    color: var(--muted);
    margin: 0;
    line-height: 1.72
}

.contact-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
    display: grid
}

.contact-form-grid .form-row {
    margin-bottom: 0
}

.contact-form:hover {
    border-color: #d0daf2;
    transform: translateY(-3px);
    box-shadow: 0 16px 34px #1c2c5e21
}

.form-row {
    flex-direction: column;
    gap: .35rem;
    margin-bottom: .72rem;
    display: flex
}

.contact-form label {
    color: var(--text);
    font-size: .98rem;
    font-weight: 600
}

.contact-form input,
.contact-form textarea {
    border: 1px solid var(--border);
    width: 100%;
    font: inherit;
    color: var(--text);
    background: var(--surface);
    border-radius: 10px;
    padding: .82rem .92rem;
    transition: border-color .2s, box-shadow .2s
}

.contact-form textarea {
    resize: vertical;
    min-height: 96px
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
    border-color: #95aaff;
    outline: none;
    box-shadow: 0 0 0 3px #7b95ff33
}

.contact-form .btn {
    width: fit-content;
    margin-top: .35rem
}

.form-status {
    min-height: 1.4rem;
    color: var(--primary-strong);
    margin: .7rem 0 0;
    font-weight: 600
}

.contact-links {
    flex-wrap: wrap;
    align-items: center;
    gap: .72rem;
    margin-top: .2rem;
    display: flex
}

.contact-links a {
    border: 1px solid var(--border);
    background: var(--surface);
    width: 50px;
    height: 50px;
    color: var(--muted);
    transition: color .2s ease, border-color .22s ease, background-color .2s ease, transform .22s var(--ease-out), box-shadow .22s ease;
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.contact-links a svg {
    fill: currentColor;
    width: 22px;
    height: 22px
}

.contact-links a:hover {
    color: var(--primary-strong);
    background: var(--surface-soft);
    border-color: #becbff;
    transform: translateY(-3px)scale(1.03);
    box-shadow: 0 10px 22px #3f63ff2e
}

.js-motion .reveal-item {
    opacity: 0;
    transform: translate3d(0, var(--reveal-distance), 0) scale(.985);
    transition: opacity .5s ease, transform .56s var(--ease-smooth);
    transition-delay: var(--reveal-delay, 0s)
}

.js-motion .reveal-item.is-visible {
    opacity: 1;
    transform: translate(0, 0)scale(1)
}

.player-hud {
    z-index: 1;
    padding: clamp(1rem, 2.8vw, 1.8rem) 0 0;
    position: relative
}

.player-hud-shell {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    gap: clamp(.9rem, 2vw, 1.3rem);
    display: grid
}

.player-hud-main,
.quest-log {
    background: linear-gradient(168deg, #071434f2 0%, #050e25f0 100%), repeating-linear-gradient(90deg, #78bdff0f 0 1px, #0000 1px 36px);
    border: 1px solid #6cb6ff52;
    border-radius: 18px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 36px #040a1b5c, inset 0 0 0 1px #83cdff14
}

.player-hud-main:before,
.quest-log:before {
    content: "";
    pointer-events: none;
    opacity: .45;
    background: linear-gradient(90deg, #0000 0%, #7edeff24 45%, #0000 100%), linear-gradient(#5891ff24 0%, #0000 56%);
    position: absolute;
    inset: 0
}

.player-hud-main {
    gap: .55rem;
    padding: clamp(1rem, 2.4vw, 1.35rem);
    display: grid
}

.player-kicker {
    letter-spacing: .08em;
    color: #87d9ff;
    margin: 0;
    font-family: "Press Start 2P", Segoe UI, monospace;
    font-size: clamp(.5rem, 1vw, .62rem)
}

.player-level {
    letter-spacing: .02em;
    color: #f2f8ff;
    margin: 0;
    font-family: Oxanium, Inter, Segoe UI, sans-serif;
    font-size: clamp(1.26rem, 2.8vw, 1.72rem);
    font-weight: 700;
    line-height: 1.12
}

.player-class {
    color: #d0e8ffc7;
    margin: 0;
    font-size: .94rem
}

.xp-track {
    --xp-progress: 0%;
    background: #081431eb;
    border: 1px solid #6ac1ff8a;
    border-radius: 999px;
    width: 100%;
    height: 16px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px #568ef147, 0 0 20px #2b65d63d
}

.xp-fill {
    width: var(--xp-progress);
    border-radius: inherit;
    max-width: 100%;
    height: 100%;
    transition: width .35s var(--ease-out);
    background: linear-gradient(90deg, #5f82ff 0%, #67a6ff 42%, #73e1ff 100%), repeating-linear-gradient(90deg, #ffffff2e 0 10px, #fff0 10px 18px);
    display: block;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 16px #5aabff8c
}

.xp-fill:after {
    content: "";
    mix-blend-mode: screen;
    background: linear-gradient(110deg, #fff0 28%, #ffffff75 52%, #fff0 75%);
    animation: 2.6s linear infinite xpShimmer;
    position: absolute;
    inset: 0
}

.xp-label {
    letter-spacing: .03em;
    color: #d4edffd1;
    margin: 0;
    font-family: Oxanium, Inter, Segoe UI, sans-serif;
    font-size: .9rem
}

.quest-log {
    gap: .75rem;
    padding: clamp(1rem, 2.4vw, 1.35rem);
    display: grid
}

.quest-log-title {
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #e4f5ff;
    margin: 0;
    font-family: Oxanium, Inter, Segoe UI, sans-serif;
    font-size: clamp(1.06rem, 2.2vw, 1.24rem)
}

.quest-log-progress {
    color: #b8dcffd1;
    margin: 0;
    font-size: .92rem
}

.quest-list {
    gap: .55rem;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid
}

.quest-item {
    transition: border-color .24s ease, transform .24s var(--ease-out), background-color .24s ease;
    background: #091636bd;
    border: 1px solid #6aa3ec4d;
    border-radius: 10px;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: .6rem;
    padding: .58rem .72rem;
    display: grid
}

.quest-item:hover {
    border-color: #84dcffa3;
    transform: translate(3px)
}

.quest-item-status {
    color: #86d8ff;
    font-family: "Press Start 2P", Segoe UI, monospace;
    font-size: .54rem
}

.quest-item-jump {
    color: #dbf0ffe6;
    letter-spacing: .02em;
    font-family: Oxanium, Inter, Segoe UI, sans-serif;
    font-size: .95rem;
    font-weight: 600
}

.quest-item-jump:hover,
.quest-item-jump:focus-visible {
    color: #b9efff;
    text-underline-offset: 3px;
    outline: none;
    text-decoration: underline 1px
}

.quest-item.is-complete {
    animation: questPanelPulse .54s var(--ease-out);
    background: linear-gradient(120deg, #0c2858d1 0%, #0b1f43c2 100%);
    border-color: #76e2ffcc;
    box-shadow: 0 10px 22px #0b1d4057
}

.quest-item.is-complete .quest-item-status {
    color: #72f4cb
}

.section-kicker {
    color: #8edcff;
    letter-spacing: .07em;
    text-transform: uppercase;
    margin: 0;
    font-family: "Press Start 2P", Segoe UI, monospace;
    font-size: clamp(.5rem, 1.1vw, .62rem)
}

.hero-side-missions {
    flex-wrap: wrap;
    gap: .52rem;
    margin-top: .95rem;
    display: flex
}

.hero-side-missions span {
    color: #d2ecffeb;
    background: #0a1f4d94;
    border: 1px solid #72c5ff57;
    border-radius: 8px;
    align-items: center;
    min-height: 32px;
    padding: .34rem .56rem;
    font-family: Oxanium, Inter, Segoe UI, sans-serif;
    font-size: .86rem;
    font-weight: 600;
    display: inline-flex
}

.hero-actions {
    flex-wrap: wrap;
    align-items: center;
    gap: .66rem;
    margin-top: 1.05rem;
    display: flex
}

.pixel-btn {
    letter-spacing: .03em;
    border-radius: 9px;
    font-family: Oxanium, Inter, Segoe UI, sans-serif;
    font-size: .92rem;
    font-weight: 700
}

.pixel-btn.ghost {
    color: #d7f2fff0;
    background: #0e2351b8;
    border-color: #67b6ff75
}

.pixel-btn.ghost:hover,
.pixel-btn.ghost:focus-visible {
    color: #eaf8ff;
    background: #12306cd6;
    border-color: #84dcffd1;
    outline: none
}

.project-card,
.achievement-card {
    position: relative;
    overflow: hidden
}

.skills-achievements-copy {
    color: #b0ceeed6;
    max-width: 58ch;
    margin: 0;
    font-size: .92rem;
    line-height: 1.62
}

.game-toast {
    z-index: 60;
    color: #d6f3ff;
    letter-spacing: .03em;
    opacity: 0;
    visibility: hidden;
    min-width: min(420px, 100vw - 1.8rem);
    max-width: min(540px, 100vw - 1.8rem);
    transition: opacity .25s ease, transform .28s var(--ease-out), visibility .25s ease;
    pointer-events: none;
    background: linear-gradient(126deg, #08183cf5 0%, #06112df0 100%), repeating-linear-gradient(90deg, #8bd0ff14 0 1px, #0000 1px 20px);
    border: 1px solid #77cfff99;
    border-radius: 12px;
    padding: .66rem .82rem;
    font-family: Oxanium, Inter, Segoe UI, sans-serif;
    font-size: .92rem;
    font-weight: 700;
    position: fixed;
    bottom: clamp(.9rem, 2.4vw, 1.4rem);
    left: clamp(.9rem, 2.4vw, 1.4rem);
    transform: translateY(10px);
    box-shadow: 0 16px 28px #06122d6b
}

.game-toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0)
}

@keyframes questPanelPulse {
    0% {
        transform: translate(0)scale(.985)
    }

    to {
        transform: translate(0)scale(1)
    }
}

@keyframes xpShimmer {
    0% {
        transform: translate(-120%)
    }

    to {
        transform: translate(140%)
    }
}

@media (width<=980px) {
    .player-hud-shell {
        grid-template-columns: 1fr
    }

    .hero-actions {
        width: 100%
    }

    .pixel-btn {
        flex: 200px
    }
}

@media (width<=760px) {

    .player-hud-main,
    .quest-log {
        padding: .88rem
    }

    .player-level {
        font-size: 1.2rem
    }

    .hero-side-missions span {
        justify-content: flex-start;
        width: 100%
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch
    }

    .pixel-btn {
        width: 100%
    }
}

@media (width<=520px) {
    .player-hud {
        padding-top: .8rem
    }

    .quest-item {
        gap: .5rem;
        padding: .52rem .62rem
    }

    .quest-item-jump {
        font-size: .9rem
    }

    .game-toast {
        width: auto;
        min-width: 0;
        max-width: none;
        bottom: .72rem;
        left: .72rem;
        right: .72rem
    }
}

@media (width<=980px) {
    .site-brand-link {
        gap: .5rem;
        max-width: min(56vw, 260px)
    }

    .site-brand-name {
        text-overflow: ellipsis;
        white-space: nowrap;
        opacity: .9;
        max-width: min(42vw, 190px);
        font-size: clamp(.78rem, 2.2vw, .9rem);
        display: inline-block;
        overflow: hidden
    }

    .menu-toggle {
        justify-content: center;
        align-items: center;
        display: inline-flex
    }

    .main-nav {
        left: max(.9rem, 4vw);
        right: max(.9rem, 4vw);
        top: calc(var(--header-height) + 8px);
        max-height: calc(100vh - var(--header-height) - 1rem);
        max-height: calc(100dvh - var(--header-height) - 1rem);
        overscroll-behavior: contain;
        background: linear-gradient(140deg, #060d1ffa 0%, #08132cf5 100%), repeating-linear-gradient(90deg, #89c7ff0f 0 1px, #0000 1px 24px);
        border: 1px solid #6b8ad257;
        border-radius: 14px;
        flex-direction: column;
        gap: .28rem;
        padding: .95rem;
        display: none;
        position: absolute;
        overflow-y: auto;
        box-shadow: 0 16px 32px #030a1a80
    }

    .main-nav a,
    .nav-dropdown-trigger {
        background: #08122a66;
        border: 1px solid #0000;
        padding: .8rem .9rem;
        font-size: .97rem
    }

    .main-nav>a:hover,
    .main-nav>a.active,
    .nav-dropdown-trigger:hover,
    .nav-dropdown-trigger.active,
    .nav-dropdown.open .nav-dropdown-trigger {
        background: #5a75d933;
        border-color: #6b8ad257
    }

    .main-nav.open {
        padding-bottom: max(.95rem, env(safe-area-inset-bottom));
        display: flex
    }

    .main-nav .nav-dropdown {
        flex-direction: column;
        display: flex
    }

    .nav-dropdown-menu {
        box-shadow: none;
        opacity: 1;
        pointer-events: all;
        background: #060c1e99;
        border: 1px solid #6b8ad242;
        border-radius: 10px;
        flex-direction: column;
        min-width: 0;
        margin: .28rem 0 .12rem;
        padding: .4rem;
        display: none;
        position: static;
        transform: none
    }

    .nav-dropdown.open .nav-dropdown-menu {
        display: flex
    }

    .nav-dropdown-menu a {
        padding: .64rem .78rem;
        font-size: .92rem
    }

    .nav-dropdown-trigger:after {
        margin-left: auto;
        display: inline-block
    }

    .footer-wrap {
        text-align: center;
        flex-direction: column;
        justify-content: center
    }

    .about-section-header {
        margin-bottom: clamp(1.2rem, 2.5vw, 1.8rem)
    }

    @media (width<=520px) {
        .site-brand-link {
            max-width: min(62vw, 220px)
        }

        .site-brand-name {
            max-width: min(46vw, 148px);
            font-size: .76rem
        }
    }

    .about-hero {
        grid-template-columns: 1fr;
        gap: clamp(1.5rem, 3vw, 2.4rem)
    }

    .about-content h2 {
        text-align: center
    }

    .about-visual {
        justify-self: center
    }

    .about-visual:before,
    .about-visual:after {
        display: none
    }

    .about-visual img {
        animation: none;
        box-shadow: 0 10px 26px #1c2c5e3d, 0 0 18px #3f63ff1a
    }

    .skills-achievements-layout {
        grid-template-columns: 1fr
    }

    .achievement-showcase {
        z-index: 9999;
        opacity: 1;
        pointer-events: auto;
        border-radius: 16px;
        width: min(90vw, 360px);
        min-height: auto;
        max-height: 75vh;
        margin: 0;
        padding: 1.8rem;
        transition: opacity .3s, transform .3s;
        position: fixed;
        top: 50%;
        left: 50%;
        overflow-y: auto;
        transform: translate(-50%, -50%)scale(1);
        box-shadow: 0 24px 56px #0009, 0 0 0 9999px #00000080
    }

    .achievement-showcase:before {
        display: none
    }

    .achievement-showcase-title {
        margin-top: 1rem;
        font-size: 1.3rem
    }

    .achievement-showcase-rank {
        margin-top: .8rem;
        font-size: .95rem
    }

    .achievement-showcase-summary {
        margin-top: 1rem;
        font-size: .95rem;
        line-height: 1.5
    }

    .achievement-showcase-unlocks {
        margin-top: .8rem;
        font-size: .98rem;
        line-height: 1.5
    }
}

@media (width<=760px) {
    .scroll-codes {
        opacity: .18
    }

    .code-column {
        width: min(9.5vw, 68px);
        font-size: clamp(.4rem, 1vw, .54rem);
        line-height: 1.65
    }

    .splash-panel {
        width: 100vw;
        min-height: 100dvh;
        padding: clamp(1.3rem, 4.2vh, 2rem) clamp(.9rem, 4.4vw, 1.35rem)
    }

    .splash-logo {
        width: 156px;
        height: 156px
    }

    .splash-meter {
        width: min(92vw, 620px);
        height: 20px
    }

    .splash-percent {
        font-size: .58rem
    }

    .hero {
        min-height: calc(100dvh + 2rem);
        padding: clamp(4.2rem, 9.6vw, 5.6rem) 0 clamp(4.4rem, 9vw, 5.8rem)
    }

    .hero:after {
        background-position: 50% 22%
    }

    .featured-projects {
        margin-top: 1.6rem;
        padding: .92rem
    }

    .hero-portrait {
        --portrait-base-x: 0px;
        --portrait-base-rot: -.5deg;
        justify-content: center;
        margin-top: 1rem;
        margin-bottom: 1.4rem;
        padding-right: 0
    }

    .hero-portrait img {
        width: min(100%, 460px)
    }

    .section-about-preview {
        margin-top: clamp(3.8rem, 9vw, 4.8rem);
        margin-bottom: clamp(3.8rem, 9vw, 4.8rem);
        padding-top: 0;
        padding-bottom: 0
    }

    .section-about-preview .narrow {
        padding-top: clamp(2.9rem, 6vw, 3.8rem);
        padding-bottom: clamp(6.2rem, 12.8vw, 7.6rem);
        gap: 0;
        padding-inline: clamp(.2rem, 1.2vw, .5rem)
    }

    .section-about-preview .narrow:after {
        width: min(82%, 420px)
    }

    .section-about-preview .narrow p {
        font-size: 1.06rem;
        line-height: 1.82
    }

    .featured-projects-head {
        margin-bottom: .82rem
    }

    .featured-projects-note {
        font-size: .88rem
    }

    .featured-carousel-track {
        grid-auto-columns: calc(50% - .41rem);
        gap: .82rem
    }

    .featured-carousel-footer {
        margin-top: .88rem
    }

    .featured-projects-progress {
        gap: .72rem
    }

    .show-more-btn {
        width: auto;
        max-width: none
    }

    #projects .card-grid,
    #achievements .card-grid {
        grid-template-columns: 1fr
    }

    .project-card-body {
        padding: 1.05rem
    }

    .project-card h3 {
        font-size: clamp(1.18rem, 6vw, 1.45rem)
    }

    .project-card p {
        font-size: .96rem
    }

    .skills-achievements-head {
        flex-direction: column;
        align-items: flex-start;
        gap: .46rem
    }

    .achievement-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem
    }

    .achievement-tile {
        min-height: 170px;
        padding: .9rem .82rem
    }

    .achievement-logo {
        width: 58px;
        height: 58px;
        padding: .62rem
    }

    .achievement-name {
        font-size: .92rem
    }

    .achievement-showcase {
        padding: 1rem 1rem 1.08rem
    }

    .organization-card {
        padding: 1.15rem
    }

    .organization-card h4 {
        font-size: 1.02rem
    }

    .social-links {
        gap: .58rem
    }

    .icon-link {
        justify-content: center;
        width: 50px;
        height: 50px
    }

    .contact-form {
        padding: 1rem
    }

    .contact-panel {
        grid-template-columns: 1fr;
        gap: 1rem;
        width: min(100%, 760px)
    }

    #contact.section {
        padding-top: clamp(4.2rem, 11vw, 5rem)
    }

    .contact-copy {
        text-align: center;
        justify-items: center;
        padding-top: 0
    }

    .contact-form-grid {
        grid-template-columns: 1fr;
        gap: 0
    }

    .contact-form input,
    .contact-form textarea,
    .contact-form button {
        font-size: 16px
    }

    .contact-links {
        justify-content: center
    }

    .back-to-top {
        bottom: .8rem;
        right: .8rem
    }
}

@media (width<=520px) {
    html {
        font-size: 15px
    }

    .main-nav a,
    .nav-dropdown-trigger {
        font-size: .97rem;
        line-height: 1.35
    }

    .splash-title {
        font-size: .72rem;
        line-height: 1.55
    }

    .splash-hint {
        font-size: .52rem
    }

    .hero-text {
        max-width: 100%
    }

    .section-about-preview .narrow {
        gap: 0
    }

    .section-about-preview .narrow p {
        font-size: .96rem;
        line-height: 1.72
    }

    .about-preview-link {
        width: 100%
    }

    .featured-projects-head {
        flex-direction: column;
        align-items: flex-start
    }

    .featured-carousel-footer {
        align-items: stretch
    }

    .featured-projects-progress {
        justify-content: space-between;
        width: 100%
    }

    .featured-projects-controls {
        padding: 0 clamp(.8rem, 2vw, 1rem)
    }

    .carousel-dot.is-active {
        width: 24px
    }

    .featured-carousel-track {
        grid-auto-columns: calc(50% - .41rem)
    }

    .container {
        width: min(1120px, 100% - 1.2rem)
    }

    .section {
        padding: clamp(2.5rem, 9vw, 3.2rem) 0
    }

    .show-more-btn {
        font-size: .9rem
    }

    .achievement-grid {
        gap: .68rem
    }

    .hero-portrait {
        --portrait-base-rot: -.2deg;
        margin-top: .8rem;
        margin-bottom: 1.2rem
    }

    .hero-portrait img {
        width: min(100%, 390px)
    }

    .contact-form {
        padding: .9rem
    }

    .contact-copy h2 {
        font-size: clamp(1.36rem, 7vw, 1.62rem)
    }
}

@media (width<=360px) {
    html {
        font-size: 14px
    }

    .splash-logo {
        width: 132px;
        height: 132px
    }

    .main-nav a {
        padding: .72rem .78rem
    }

    .icon-link,
    .contact-links a {
        width: 46px;
        height: 46px
    }

    .achievement-grid {
        grid-template-columns: 1fr
    }

    .achievement-tile {
        min-height: 164px
    }
}

@media (orientation:landscape) and (height<=760px) {
    :root {
        --header-height: clamp(66px, 11vh, 74px)
    }

    .splash-screen {
        padding: 0
    }

    .splash-panel {
        width: 100vw;
        min-height: 100dvh;
        padding: clamp(.9rem, 3.5vh, 1.6rem) clamp(.9rem, 2.8vw, 1.4rem)
    }

    .splash-logo {
        width: 96px;
        height: 96px
    }

    .splash-title {
        margin-top: .55rem;
        line-height: 1.45
    }

    .splash-meter {
        width: min(88vw, 760px);
        height: 14px;
        margin-top: .6rem
    }

    .splash-percent {
        margin-top: .55rem;
        font-size: .55rem
    }

    .splash-hint {
        margin-top: .52rem;
        font-size: .46rem
    }

    .hero {
        min-height: calc(100dvh + 1.2rem);
        padding: clamp(3.2rem, 8vh, 4.2rem) 0 clamp(3rem, 6.4vh, 4rem)
    }

    .section {
        padding: clamp(2.8rem, 5.8vh, 3.6rem) 0
    }
}

@supports not (backdrop-filter:blur(2px)) {
    .site-header {
        background: #080f21f0
    }

    .back-to-top {
        background: #07122ef5
    }
}

@media (orientation:landscape) and (height<=620px) {
    .splash-title {
        font-size: .58rem
    }

    .splash-hint {
        display: none
    }
}

@media (hover:none) {

    .logo:hover,
    .main-nav a:hover,
    .menu-toggle:hover,
    .back-to-top:hover,
    .carousel-control:hover,
    .carousel-dot:hover,
    .btn:hover,
    .show-more-btn:hover,
    .icon-link:hover,
    .quest-item:hover,
    .achievement-tile:hover,
    .card:hover,
    .timeline-item:hover,
    .contact-form:hover,
    .contact-links a:hover {
        transform: none
    }

    .project-card:hover {
        box-shadow: var(--project-card-shadow);
        border-color: var(--project-card-border)
    }

    .project-card:hover .project-thumb,
    .achievement-card:hover .achievement-thumb,
    .logo:hover img,
    .icon-link:hover svg,
    .featured-project-slide:hover img {
        transform: none
    }

    .quest-item-jump:hover {
        text-decoration: none
    }

    .featured-carousel-track {
        cursor: auto
    }
}

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

    body,
    #about.section:before,
    #about.section:after,
    #skills.section:before,
    #skills.section:after,
    .about-section-header h2,
    .about-hero,
    .about-content p,
    .about-visual:before,
    .about-visual:after,
    .about-visual img,
    .hero-portrait:before,
    .hero-portrait img,
    .skills-achievements-layout,
    .achievement-tile:after,
    .achievement-logo img,
    .achievement-showcase:before,
    .achievement-showcase.is-updating .achievement-showcase-title,
    .achievement-showcase.is-updating .achievement-showcase-rank,
    .achievement-showcase.is-updating .achievement-showcase-summary,
    .achievement-showcase.is-updating .achievement-showcase-unlocks,
    .quest-item.is-complete,
    .xp-fill:after {
        animation: none !important
    }

    .scroll-codes,
    .scroll-codes:before,
    .code-column {
        animation: none !important;
        transform: none !important
    }

    .scroll-codes:before {
        opacity: .2 !important;
        background: repeating-linear-gradient(#0000 0 24px, #65bbff1a 24px 25px), repeating-linear-gradient(0deg, #568cff14 0 1px, #0000 1px 74px) !important
    }

    .js-enabled .back-to-top.is-visible img,
    .js-enabled .back-to-top.is-visible:after {
        animation: none !important;
        transform: none !important
    }

    .logo,
    .logo img,
    body:before,
    body:after,
    .main-nav a,
    .menu-toggle,
    .back-to-top,
    .back-to-top img,
    .splash-screen,
    .splash-panel,
    .splash-logo,
    .splash-meter-fill,
    .splash-hint,
    .btn,
    .show-more-btn,
    .show-more-icon,
    .show-more-item,
    .player-hud-main,
    .quest-log,
    .quest-item,
    .xp-fill,
    .game-toast,
    .icon-link,
    .achievement-tile,
    .card,
    .timeline-item,
    .contact-form,
    .contact-links a {
        transition: none !important
    }

    .js-motion .reveal-item {
        opacity: 1 !important;
        transition: none !important;
        transform: none !important
    }

    .splash-screen,
    .splash-screen:before,
    .splash-screen:after,
    .splash-panel,
    .splash-logo,
    .splash-hint,
    .splash-hint:before,
    .splash-hint:after {
        animation: none !important
    }
}

body.ui-switch {
    --primary: #5a8dff;
    --primary-strong: #8fc8ff;
    --primary-soft: #5a8dff29;
    --border: #25324c;
    --surface: #101a2aad;
    --surface-soft: #15243a99;
    --text: #edf4ff;
    --muted: #a4b4d5;
    animation: pageBgDrift 56s var(--ease-smooth) infinite alternate;
    background: radial-gradient(circle at 18% 8%, #6094ff47 0%, #0000 36%) 0 0/150% 150%, radial-gradient(circle at 82% 90%, #35cfff33 0%, #0000 34%) 0 0/170% 170%, linear-gradient(#060b15 0%, #070d18 52%, #050913 100%) 0 0/100% 100%;
    font-family: Oxanium, Segoe UI, sans-serif
}

body.ui-switch:before {
    opacity: .53
}

body.ui-switch:after {
    opacity: .31;
    background: radial-gradient(circle at 18% 12%, #6fadff29 0%, #0000 40%), radial-gradient(circle at 84% 84%, #52dcff1f 0%, #0000 34%), linear-gradient(#0309196b 0%, #020712a8 100%)
}

body.ui-switch .scroll-codes {
    opacity: .26;
    mix-blend-mode: screen
}

body.ui-switch .scroll-codes:before {
    opacity: .46;
    animation-duration: 18s
}

body.ui-switch .code-column {
    opacity: .56
}

body.ui-switch .hero-portrait:before {
    opacity: 0;
    animation: none
}

body.ui-switch .hero-portrait img {
    transform: translate3d(var(--portrait-base-x), 0, 0) scale(1);
    animation: none
}

body.ui-switch .hero-portrait-glitch {
    display: none
}

body.ui-switch .site-header {
    background: #080e1ad1;
    border-bottom: 1px solid #82bcff38
}

body.ui-switch .main-nav a,
body.ui-switch .nav-dropdown-trigger {
    border: 1px solid #0000
}

body.ui-switch .main-nav>a:hover,
body.ui-switch .main-nav>a.active,
body.ui-switch .nav-dropdown-trigger:hover,
body.ui-switch .nav-dropdown-trigger.active,
body.ui-switch .nav-dropdown.open .nav-dropdown-trigger {
    background: #5a8dff2e;
    border-color: #81baff6b
}

body.ui-switch .nav-dropdown-menu a.active {
    color: #e4f3ff;
    background: #5a8dff33;
    border-color: #81baff66
}

body.ui-switch .player-hud,
body.ui-switch .game-toast {
    display: none !important
}

.launcher-strip {
    z-index: 1;
    padding: clamp(1rem, 2.6vw, 1.45rem) 0 0;
    position: relative
}

.launcher-shell {
    background: linear-gradient(160deg, #091630f0 0%, #071022f0 100%), repeating-linear-gradient(90deg, #8cd0ff0f 0 1px, #0000 1px 24px);
    border: 1px solid #7ec2ff57;
    border-radius: 16px;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem;
    padding: clamp(.76rem, 1.8vw, .95rem);
    display: flex;
    box-shadow: 0 16px 32px #040a1b61
}

.launcher-label {
    letter-spacing: .07em;
    color: #8fdcff;
    margin: 0;
    font-family: "Press Start 2P", Segoe UI, monospace;
    font-size: clamp(.48rem, 1vw, .58rem)
}

.launcher-stats {
    flex-wrap: wrap;
    align-items: center;
    gap: .46rem;
    display: inline-flex
}

.launcher-stat {
    color: #dbf1ffe6;
    background: #0a1e479e;
    border: 1px solid #7fc9ff57;
    border-radius: 999px;
    align-items: center;
    gap: .34rem;
    min-height: 30px;
    padding: .18rem .58rem;
    font-size: .84rem;
    font-weight: 600;
    display: inline-flex
}

.launcher-stat strong {
    color: #9be8ff;
    letter-spacing: .02em
}

.launcher-link {
    color: #d7efff;
    letter-spacing: .03em;
    min-height: 34px;
    transition: transform .2s var(--ease-out), background-color .2s ease, border-color .2s ease;
    background: #4a9bff24;
    border: 1px solid #7ec6ff6b;
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    padding: .24rem .74rem;
    font-size: .84rem;
    font-weight: 700;
    display: inline-flex
}

.launcher-link:hover,
.launcher-link:focus-visible {
    background: #4a9bff3d;
    border-color: #98ddffb8;
    outline: none;
    transform: translateY(-1px)
}

.launcher-strip-compact {
    margin-bottom: clamp(1.1rem, 2.6vw, 1.6rem)
}

body.ui-switch .hero {
    min-height: calc(100dvh + .6rem);
    padding: clamp(4.2rem, 8.4vw, 6rem) 0 clamp(5.2rem, 8.8vw, 6.8rem)
}

body.ui-switch .hero:before {
    background: radial-gradient(circle at 14% 16%, #6094ff33 0%, #0000 34%), radial-gradient(circle at 82% 80%, #4ee1ff1f 0%, #0000 30%), linear-gradient(#081229bd 0%, #060d1e61 100%)
}

body.ui-switch .hero:after {
    filter: saturate(.86)contrast(1.04)brightness(.76)
}

body.ui-switch .section:after {
    opacity: .44
}

body.ui-switch .hero-side-missions span {
    background: #0a1d468a;
    border-color: #80ccff57;
    border-radius: 999px;
    font-size: .82rem
}

body.ui-switch .hero-actions .ghost {
    display: none
}

body.ui-switch .featured-projects {
    background: linear-gradient(#091632eb 0%, #071026d1 100%), repeating-linear-gradient(90deg, #8cd0ff0d 0 1px, #0000 1px 26px);
    border-color: #7ec2ff4d;
    border-radius: 20px;
    padding: clamp(1rem, 2.2vw, 1.4rem)
}

body.ui-switch .featured-projects-controls {
    display: none
}

body.ui-switch .featured-carousel-shell:before,
body.ui-switch .featured-carousel-shell:after {
    width: clamp(.9rem, 1.5vw, 1.35rem)
}

body.ui-switch .featured-carousel-track {
    grid-auto-columns: calc(100% - clamp(4.25rem, 10vw, 9.2rem));
    gap: clamp(.9rem, 1.7vw, 1.2rem);
    padding: .24rem 0 .44rem
}

body.ui-switch .featured-project-slide {
    aspect-ratio: 16/9;
    background: #07112bfa;
    border: 2px solid #6398ee5c;
    border-radius: 18px;
    box-shadow: 0 18px 34px #050d2270
}

body.ui-switch .featured-project-slide img {
    object-position: center
}

body.ui-switch .js-enabled .featured-project-slide {
    opacity: .48;
    transform: translateY(8px)scale(.93)
}

body.ui-switch .js-enabled .featured-project-slide.is-near {
    opacity: .78;
    transform: translateY(3px)scale(.97)
}

body.ui-switch .js-enabled .featured-project-slide.is-active {
    opacity: 1;
    border-color: #82ceffeb;
    transform: translateY(-2px)scale(1);
    box-shadow: 0 26px 44px #050d228f, 0 0 0 3px #4fadff42
}

body.ui-switch .featured-project-slide:focus-visible {
    box-shadow: 0 0 0 3px #4fadff5c, 0 26px 44px #050d228f
}

body.ui-switch .featured-project-slide:after {
    background: linear-gradient(#060e2214 24%, #040918e6 100%)
}

body.ui-switch .featured-project-copy {
    padding: .86rem .9rem .94rem
}

body.ui-switch .featured-project-copy strong {
    font-size: clamp(.98rem, 2vw, 1.18rem)
}

body.ui-switch .featured-project-copy span {
    display: none
}

body.ui-switch .featured-carousel-footer {
    justify-content: center;
    margin-top: .84rem
}

body.ui-switch .carousel-dot {
    width: 8px;
    height: 8px
}

body.ui-switch .carousel-dot.is-active {
    width: 24px
}

body.ui-switch .project-card,
body.ui-switch .achievement-card {
    background: linear-gradient(#0d1d3f 0%, #08142f 100%);
    border-color: #5f94e685
}

body.ui-switch .project-card-body,
body.ui-switch .achievement-card-body {
    gap: .6rem;
    padding: 1.08rem
}

body.ui-switch .project-card p,
body.ui-switch .achievement-card p {
    display: none
}

body.ui-switch .project-tech span {
    padding: .24rem .58rem;
    font-size: .78rem
}

body.ui-switch .project-card h3,
body.ui-switch .achievement-card h3 {
    color: #eef5ff;
    font-size: clamp(1.08rem, 2vw, 1.24rem)
}

body.ui-switch .project-link {
    color: #9be8ff;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-underline-offset: 3px;
    background: 0 0;
    border: 0;
    margin-top: 0;
    padding: 0;
    font-size: .78rem;
    text-decoration: underline 1px
}

body.ui-switch .project-link:hover {
    color: #d7f6ff;
    background: 0 0;
    border: 0;
    transform: none
}

body.ui-switch .show-more-btn {
    color: #8fdcff
}

body.ui-switch .show-more-btn:hover {
    color: #d4f2ff
}

body.ui-switch .section-library-portal .narrow {
    text-align: center;
    background: linear-gradient(#081631b8 0%, #060e1f9e 100%), radial-gradient(circle at 20% 18%, #70a6ff24 0%, #0000 35%);
    border: 1px solid #81c5ff57;
    border-radius: 18px;
    justify-items: center;
    gap: .9rem;
    padding: clamp(1rem, 2.4vw, 1.4rem);
    display: grid
}

body.ui-switch .section-library-portal h2,
body.ui-switch .section-library-portal p {
    margin: 0
}

body.ui-switch .split-zone {
    position: relative
}

body.ui-switch .split-zone-shell {
    border: 1px solid #6caaf559;
    border-radius: 20px;
    padding: clamp(1rem, 2vw, 1.35rem);
    box-shadow: 0 18px 34px #050c1e4d
}

body.ui-switch .split-zone-head {
    gap: .22rem;
    margin-bottom: .95rem;
    display: grid
}

body.ui-switch .split-zone-lead {
    color: var(--muted);
    max-width: 64ch;
    margin: 0;
    font-size: .95rem;
    line-height: 1.65
}

body.ui-switch .split-zone-kicker {
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .95;
    margin: 0;
    font-family: "Press Start 2P", Segoe UI, monospace;
    font-size: clamp(.44rem, .8vw, .52rem)
}

body.ui-switch .split-zone-head h2 {
    margin: 0
}

body.ui-switch .split-zone-projects .split-zone-shell {
    background: linear-gradient(#091734b8 0%, #0710246b 100%), radial-gradient(circle at 18% 18%, #70a6ff29 0%, #0000 36%);
    border-color: #72b6ff66
}

body.ui-switch .split-zone-projects .split-zone-kicker {
    color: #8fdcff
}

body.ui-switch .split-zone-achievements {
    margin-top: clamp(2.4rem, 6vw, 4rem)
}

body.ui-switch .split-zone-achievements:before {
    content: "";
    background: linear-gradient(90deg, #0000 0%, #7fc9ff9e 22%, #7fc9ff42 50%, #7fc9ff9e 78%, #0000 100%);
    width: min(76%, 760px);
    height: 1px;
    position: absolute;
    top: clamp(-1.6rem, -3vw, -1.1rem);
    left: 50%;
    transform: translate(-50%);
    box-shadow: 0 0 14px #4fadff3d
}

body.ui-switch .split-zone-achievements .split-zone-shell {
    background: linear-gradient(#0a16308f 0%, #0a0d1c80 100%), radial-gradient(circle at 84% 18%, #67baff24 0%, #0000 32%);
    border-color: #81c0ff70
}

body.ui-switch .split-zone-achievements .split-zone-kicker {
    color: #9edfff
}

body.ui-switch .split-zone-achievements .achievement-card {
    background: linear-gradient(#13294b 0%, #0d172b 100%);
    border-color: #7ec0ff6b
}

body.ui-switch .split-zone-achievements .achievement-accent {
    background: linear-gradient(90deg, #5da8ff 0%, #84e4ff 100%)
}

body.ui-switch .split-zone-achievements .achievement-thumb {
    border-bottom-color: #7fc9ff59
}

body.modal-open {
    overflow: hidden
}

.project-popup-trigger,
.achievement-popup-trigger {
    cursor: pointer
}

.project-popup-trigger .project-link,
.achievement-popup-trigger .project-link {
    z-index: 1;
    position: relative
}

.contact-submit-popup {
    z-index: 1250;
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: linear-gradient(#020814bd 0%, #010611e6 100%);
    place-items: center;
    padding: clamp(.8rem, 2vw, 1.4rem);
    transition: opacity .26s, visibility .26s;
    display: grid;
    position: fixed;
    inset: 0
}

.contact-submit-popup.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto
}

.contact-submit-popup-dialog {
    width: min(92vw, 460px);
    transition: transform .28s var(--ease-out);
    background: linear-gradient(#0d1f4af7 0%, #081534fa 100%), radial-gradient(circle at 20% 18%, #28b0ff1f 0%, #0000 40%);
    border: 1px solid #5cbaff9e;
    border-radius: 12px;
    padding: 1.15rem 1rem 1rem;
    position: relative;
    transform: translateY(14px)scale(.985);
    box-shadow: 0 22px 44px #040c229e, 0 0 0 1px #68beff3d, 0 0 28px #41a9ff38
}

.contact-submit-popup.is-open .contact-submit-popup-dialog {
    animation: .52s cubic-bezier(.16, 1, .3, 1) both achievementModalPopIn;
    transform: translateY(0)scale(1)
}

.contact-submit-popup[data-state=error] .contact-submit-popup-dialog {
    background: linear-gradient(#11254cf7 0%, #0a142cfa 100%), radial-gradient(circle at 20% 18%, #72c5ff24 0%, #0000 40%);
    border-color: #6cbfff9e;
    box-shadow: 0 22px 44px #060f259e, 0 0 0 1px #7dc9ff3d, 0 0 28px #59b2ff33
}

.contact-submit-popup h3 {
    color: #9be1ff;
    letter-spacing: .02em;
    margin: 0;
    padding-right: 2rem;
    font-size: clamp(1.02rem, 2vw, 1.22rem)
}

.contact-submit-popup[data-state=error] h3 {
    color: #d8efff
}

.contact-submit-popup p {
    color: #d8efffe0;
    margin: .7rem 0 0;
    line-height: 1.65
}

.contact-submit-popup[data-state=error] p {
    color: #daeeffe6
}

.contact-submit-popup-close {
    color: #d6e2ffd1;
    text-transform: uppercase;
    cursor: pointer;
    width: 34px;
    height: 34px;
    transition: color .2s ease, background-color .2s ease, transform .2s var(--ease-out);
    background: #06122eb8;
    border: 0;
    border-radius: 8px;
    font-family: "Press Start 2P", Segoe UI, monospace;
    font-size: .68rem;
    line-height: 1;
    position: absolute;
    top: .62rem;
    right: .62rem
}

.contact-submit-popup-close:hover,
.contact-submit-popup-close:focus-visible {
    color: #f2f7ff;
    background: #11275af0;
    outline: none;
    transform: scale(1.03)
}

.contact-submit-popup[data-state=error] .contact-submit-popup-close {
    color: #d8edffe6;
    background: #0d2148c7
}

.contact-submit-popup[data-state=error] .contact-submit-popup-close:hover,
.contact-submit-popup[data-state=error] .contact-submit-popup-close:focus-visible {
    color: #ecf8ff;
    background: #183976f0
}

.cv-modal {
    z-index: 1300;
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: linear-gradient(#030b1cc2 0%, #020814eb 100%);
    place-items: center;
    padding: clamp(.7rem, 2vw, 1.4rem);
    transition: opacity .26s, visibility .26s;
    display: grid;
    position: fixed;
    inset: 0
}

.cv-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto
}

.cv-modal-dialog {
    width: min(96vw, 980px);
    height: min(92vh, 920px);
    max-height: min(92vh, 920px);
    transition: transform .28s var(--ease-out);
    background: linear-gradient(#0c1f4df7 0%, #081534fa 100%), radial-gradient(circle at 18% 18%, #3cbcff1f 0%, #0000 38%);
    border: 1px solid #69c1ffa3;
    border-radius: 12px;
    grid-template-rows: auto minmax(0, 1fr) auto;
    display: grid;
    position: relative;
    overflow: hidden;
    transform: translateY(14px)scale(.985);
    box-shadow: 0 22px 46px #040c22a8, 0 0 0 1px #73c6ff3d, 0 0 28px #42aaff38
}

.cv-modal.is-open .cv-modal-dialog {
    animation: .52s cubic-bezier(.16, 1, .3, 1) both achievementModalPopIn;
    transform: translateY(0)scale(1)
}

.cv-modal-head {
    background: linear-gradient(#0d2355d6 0%, #0a1a3e85 100%);
    border-bottom: 1px solid #64bbff57;
    justify-content: flex-start;
    align-items: center;
    gap: .8rem;
    padding: .8rem .9rem;
    display: flex
}

.cv-modal-head h3 {
    color: #9be1ff;
    letter-spacing: .02em;
    flex: auto;
    min-width: 0;
    margin: 0;
    font-size: clamp(1.05rem, 2vw, 1.34rem)
}

.cv-modal-tools {
    flex-shrink: 0;
    align-items: center;
    gap: .32rem;
    display: inline-flex
}

.cv-modal-tools[hidden] {
    display: none
}

.cv-modal-zoom {
    color: #d9efff;
    text-transform: uppercase;
    cursor: pointer;
    min-width: 34px;
    height: 34px;
    transition: transform .2s var(--ease-out), border-color .2s ease, background-color .2s ease, color .2s ease;
    background: #10316685;
    border: 1px solid #76c7ff80;
    border-radius: 8px;
    padding: 0;
    font-family: "Press Start 2P", Segoe UI, monospace;
    font-size: .74rem;
    line-height: 1
}

.cv-modal-zoom-reset {
    letter-spacing: .03em;
    min-width: 74px;
    padding: 0 .38rem;
    font-size: .66rem
}

.cv-modal-zoom:hover,
.cv-modal-zoom:focus-visible {
    color: #f2f9ff;
    background: #163d7cbd;
    border-color: #98ddffe6;
    outline: none;
    transform: translateY(-1px)
}

.cv-modal-zoom:disabled {
    opacity: .5;
    cursor: default;
    transform: none
}

.cv-modal-close {
    color: #d6e2ffd1;
    text-transform: uppercase;
    cursor: pointer;
    width: 34px;
    height: 34px;
    transition: color .2s ease, background-color .2s ease, transform .2s var(--ease-out);
    background: #06122eb8;
    border: 0;
    border-radius: 8px;
    flex-shrink: 0;
    margin-left: .12rem;
    font-family: "Press Start 2P", Segoe UI, monospace;
    font-size: .68rem;
    line-height: 1
}

.cv-modal-close:hover,
.cv-modal-close:focus-visible {
    color: #f2f7ff;
    background: #11275af0;
    outline: none;
    transform: scale(1.03)
}

.cv-modal-preview {
    background: #061029e0;
    height: 100%;
    min-height: 0;
    position: relative
}

.cv-modal-loading {
    z-index: 2;
    color: #caecff;
    letter-spacing: .01em;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(#0714306b 0%, #061029ad 100%);
    justify-content: center;
    align-items: center;
    gap: .56rem;
    font-size: .9rem;
    transition: opacity .22s;
    display: flex;
    position: absolute;
    inset: 0
}

.cv-modal-loading.is-visible {
    opacity: 1
}

.cv-modal-loading[hidden] {
    display: none
}

.cv-modal-loading-spinner {
    border: 2px solid #85d0ff5c;
    border-top-color: #9be1ff;
    border-radius: 999px;
    width: 16px;
    height: 16px;
    animation: .9s linear infinite cvModalSpinner
}

.cv-modal-frame {
    z-index: 1;
    background: #061029e0;
    border: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: block;
    position: relative
}

.cv-modal-preview.is-canvas-preview .cv-modal-frame {
    display: none
}

.cv-modal-pages {
    z-index: 1;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
    align-content: start;
    justify-items: start;
    gap: .7rem;
    height: 100%;
    min-height: 0;
    padding: .7rem;
    display: grid;
    position: relative;
    overflow: auto
}

.cv-modal-pages[hidden] {
    display: none
}

.cv-modal-page {
    background: #fff;
    border: 1px solid #84c4ff3d;
    border-radius: 8px;
    width: fit-content;
    max-width: none;
    overflow: hidden;
    box-shadow: 0 8px 24px #040c2252
}

.cv-modal-page canvas {
    background: #fff;
    width: auto;
    max-width: none;
    height: auto;
    display: block
}

.cv-modal-actions {
    background: linear-gradient(#0a1b42b3 0%, #081432e0 100%);
    border-top: 1px solid #64bbff57;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .7rem;
    padding: .8rem .9rem;
    display: flex
}

.cv-modal-action {
    color: #d9efff;
    letter-spacing: .05em;
    text-transform: uppercase;
    min-height: 40px;
    transition: transform .2s var(--ease-out), border-color .2s ease, background-color .2s ease, color .2s ease;
    background: #10316685;
    border: 1px solid #76c7ff7a;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    padding: .46rem .92rem;
    font-size: .84rem;
    font-weight: 700;
    display: inline-flex
}

.cv-modal-action:hover,
.cv-modal-action:focus-visible {
    color: #f2f9ff;
    background: #163d7cbd;
    border-color: #98ddffe6;
    outline: none;
    transform: translateY(-1px)
}

body.ui-switch .cv-modal-action {
    color: #d9efff;
    background: #10316694;
    border: 1px solid #70c6ff80;
    text-decoration: none
}

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

.project-modal {
    z-index: 1200;
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: linear-gradient(#020814bd 0%, #010611e6 100%);
    place-items: center;
    padding: clamp(.8rem, 2vw, 1.4rem);
    transition: opacity .26s, visibility .26s;
    display: grid;
    position: fixed;
    inset: 0
}

.project-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto
}

.project-modal-dialog {
    isolation: isolate;
    opacity: 0;
    background: linear-gradient(#0d1f4af7 0%, #081534fa 100%), radial-gradient(circle at 20% 18%, #28b0ff1f 0%, #0000 40%);
    border: 1px solid #5cbaff9e;
    border-radius: 12px;
    width: min(92vw, 760px);
    max-height: min(90vh, 860px);
    transition: opacity .24s;
    position: relative;
    overflow: auto;
    box-shadow: 0 22px 44px #040c229e, 0 0 0 1px #68beff3d, 0 0 28px #41a9ff38
}

.project-modal-dialog:after {
    content: "";
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    mix-blend-mode: screen;
    background: repeating-linear-gradient(#91d9ff1f 0 2px, #0000 2px 7px), linear-gradient(120deg, #0000 18%, #6acdff38 48%, #0000 74%);
    position: absolute;
    inset: 0
}

.project-modal.is-open .project-modal-dialog {
    opacity: 1
}

.project-modal-close {
    z-index: 3;
    color: #d6e2ffd1;
    text-transform: uppercase;
    cursor: pointer;
    width: 34px;
    height: 34px;
    transition: color .2s ease, background-color .2s ease, transform .2s var(--ease-out);
    background: #06122eb8;
    border: 0;
    border-radius: 8px;
    font-family: "Press Start 2P", Segoe UI, monospace;
    font-size: .68rem;
    line-height: 1;
    position: absolute;
    top: .55rem;
    right: .55rem
}

.project-modal-close:hover,
.project-modal-close:focus-visible {
    color: #f2f7ff;
    background: #11275af0;
    outline: none;
    transform: scale(1.03)
}

.project-modal-image {
    aspect-ratio: 16/9;
    object-fit: contain;
    transform-origin: 50%;
    background: #040e21b8;
    border-bottom: 1px solid #5dbbff59;
    width: 100%;
    display: block
}

.project-modal-body {
    gap: .75rem;
    padding: clamp(.95rem, 2.1vw, 1.25rem);
    display: grid
}

.project-modal-body h3 {
    color: #79d0ff;
    letter-spacing: .02em;
    margin: 0;
    font-size: clamp(1.5rem, 3.2vw, 2rem)
}

.project-modal-meta {
    gap: .08rem;
    display: grid
}

.project-modal-meta p,
.project-modal-description {
    margin: 0;
    line-height: 1.7
}

.project-modal-meta span {
    color: #b5dbf9d1;
    font-weight: 500
}

.project-modal-meta strong {
    color: #f3fafff5
}

.project-modal-description {
    color: #daecffdb
}

.project-modal-tech {
    flex-wrap: wrap;
    gap: .5rem;
    display: flex
}

.project-modal-tech span {
    color: #d9efff;
    background: #10316694;
    border: 1px solid #7ec6ff80;
    border-radius: 999px;
    align-items: center;
    padding: .3rem .7rem;
    font-size: .84rem;
    font-weight: 600;
    display: inline-flex
}

.project-modal-link {
    margin-top: .2rem
}

body.ui-switch .project-modal-link {
    letter-spacing: .08em;
    font-size: .82rem
}

.achievement-modal {
    z-index: 1200;
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: linear-gradient(#030a18c2 0%, #020814e6 100%);
    place-items: center;
    padding: clamp(.8rem, 2vw, 1.4rem);
    transition: opacity .26s, visibility .26s;
    display: grid;
    position: fixed;
    inset: 0
}

.achievement-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto
}

.achievement-modal-dialog {
    isolation: isolate;
    opacity: 0;
    background: linear-gradient(#0e224ef7 0%, #0a1121fa 100%), radial-gradient(circle at 18% 20%, #66c4ff24 0%, #0000 40%);
    border: 1px solid #78c5ffad;
    border-radius: 12px;
    width: min(92vw, 760px);
    max-height: min(90vh, 860px);
    transition: opacity .24s;
    position: relative;
    overflow: auto;
    box-shadow: 0 22px 44px #040c229e, 0 0 0 1px #78c5ff3d, 0 0 28px #58b7ff38
}

.achievement-modal-dialog:after {
    content: "";
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    mix-blend-mode: screen;
    background: repeating-linear-gradient(#a1daff1f 0 2px, #0000 2px 7px), linear-gradient(120deg, #0000 18%, #66c4ff47 48%, #0000 74%);
    position: absolute;
    inset: 0
}

.achievement-modal.is-open .achievement-modal-dialog {
    opacity: 1
}

.achievement-modal-close {
    z-index: 3;
    color: #d6e2ffd1;
    text-transform: uppercase;
    cursor: pointer;
    width: 34px;
    height: 34px;
    transition: color .2s ease, background-color .2s ease, transform .2s var(--ease-out);
    background: #0e1f40cc;
    border: 0;
    border-radius: 8px;
    font-family: "Press Start 2P", Segoe UI, monospace;
    font-size: .68rem;
    line-height: 1;
    position: absolute;
    top: .55rem;
    right: .55rem
}

.achievement-modal-close:hover,
.achievement-modal-close:focus-visible {
    color: #f2f7ff;
    background: #1c3f80f0;
    outline: none;
    transform: scale(1.03)
}

.achievement-modal-image {
    aspect-ratio: 16/9;
    object-fit: contain;
    transform-origin: 50%;
    background: #07122abd;
    border-bottom: 1px solid #78c5ff57;
    width: 100%;
    display: block
}

.achievement-modal-image-wrapper {
    position: relative
}

.achievement-modal-image-dots {
    backdrop-filter: blur(2px);
    z-index: 10;
    background: #060a128c;
    border: 1px solid #6db0ff47;
    border-radius: 999px;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    padding: .45rem .35rem;
    display: flex;
    position: absolute;
    top: 50%;
    right: .8rem;
    transform: translateY(-50%)
}

.achievement-image-dot {
    cursor: pointer;
    width: 10px;
    height: 10px;
    transition: transform .22s var(--ease-out), background-color .22s ease, border-color .22s ease, box-shadow .22s ease;
    background: #78b6ff2e;
    border: 1px solid #7bbcff57;
    border-radius: 999px;
    padding: 0
}

.achievement-image-dot:hover,
.achievement-image-dot:focus-visible {
    background: #90ddff57;
    border-color: #90ddffc2;
    outline: none;
    transform: scale(1.12)
}

.achievement-image-dot.is-active {
    background: linear-gradient(#79b2fff2 0%, #6de5fff0 100%);
    border-color: #8adcfff0;
    transform: scale(1.32);
    box-shadow: 0 0 16px #6de5ff6b
}

@media (width<=599px) {
    .achievement-modal-image-dots {
        gap: .42rem;
        padding: .34rem .28rem;
        right: .55rem
    }

    .achievement-image-dot {
        width: 8px;
        height: 8px
    }

    .achievement-image-dot.is-active {
        transform: scale(1.28)
    }
}

.achievement-modal-body {
    gap: .75rem;
    padding: clamp(.95rem, 2.1vw, 1.25rem);
    display: grid
}

.achievement-modal-body h3 {
    color: #9adfff;
    letter-spacing: .02em;
    margin: 0;
    font-size: clamp(1.6rem, 3.5vw, 2.15rem)
}

.achievement-modal-meta {
    gap: .08rem;
    display: grid
}

.achievement-modal-meta p,
.achievement-modal-description,
.achievement-modal-credential {
    margin: 0;
    line-height: 1.7
}

.achievement-modal-meta span,
.achievement-modal-credential span {
    color: #c0e0ffd1;
    font-weight: 500
}

.achievement-modal-meta strong,
.achievement-modal-credential strong {
    color: #f3fafff5
}

.achievement-modal-description {
    color: #deebffd6
}

.achievement-modal-link {
    color: #a8e5ff;
    margin-top: .2rem
}

.achievement-modal-link[hidden] {
    display: none !important
}

body.ui-switch .achievement-modal-link {
    letter-spacing: .08em;
    color: #a8e5ff;
    font-size: .82rem
}

body.ui-switch .achievement-modal-link:hover {
    color: #ddf7ff
}

@keyframes achievementModalPopIn {
    0% {
        filter: saturate(.84)brightness(.84);
        transform: translateY(28px)scale(.91)
    }

    42% {
        filter: saturate(1.12)brightness(1.04);
        transform: translateY(-5px)scale(1.012)
    }

    68% {
        filter: saturate(1.04)brightness(1.01);
        transform: translateY(2px)scale(.996)
    }

    to {
        filter: saturate()brightness();
        transform: translateY(0)scale(1)
    }
}

@keyframes achievementModalImageSettle {
    0% {
        filter: saturate(.86)contrast(1.1);
        transform: scale(1.07)
    }

    to {
        filter: saturate()contrast();
        transform: scale(1)
    }
}

@media (width<=760px) {
    .achievement-modal {
        backdrop-filter: none;
        transition: none
    }

    .achievement-modal-dialog {
        transition: none;
        transform: none
    }

    .achievement-modal-dialog:after {
        display: none
    }

    .achievement-modal.is-open .achievement-modal-dialog,
    .achievement-modal.is-open .achievement-modal-dialog:after,
    .achievement-modal.is-open .achievement-modal-image {
        animation: none;
        transform: none
    }

    .cv-modal {
        padding: clamp(.45rem, 2vw, .62rem)
    }

    .cv-modal-dialog {
        width: min(96vw, 580px);
        height: calc(100vh - .9rem);
        max-height: calc(100vh - .9rem)
    }

    .project-modal-dialog,
    .achievement-modal-dialog {
        width: min(94vw, 580px)
    }

    .cv-modal-head {
        gap: .5rem;
        padding: .72rem
    }

    .cv-modal-head h3 {
        font-size: clamp(.96rem, 4.2vw, 1.12rem)
    }

    .cv-modal-tools {
        gap: .28rem
    }

    .cv-modal-zoom {
        min-width: 32px;
        height: 32px;
        font-size: .7rem
    }

    .cv-modal-zoom-reset {
        min-width: 64px;
        font-size: .6rem
    }

    .cv-modal-preview,
    .cv-modal-frame,
    .cv-modal-pages {
        height: 100%;
        min-height: 0
    }

    .cv-modal-actions {
        justify-content: flex-start;
        gap: .5rem
    }

    .cv-modal-action {
        flex: 100%
    }

    .cv-modal-close,
    .project-modal-close,
    .achievement-modal-close {
        top: .45rem;
        right: .45rem
    }
}

@supports (height:100dvh) {
    @media (width<=760px) {
        .cv-modal-dialog {
            height: calc(100dvh - .9rem);
            max-height: calc(100dvh - .9rem)
        }
    }
}

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

    .cv-modal,
    .cv-modal-dialog,
    .project-modal,
    .project-modal-dialog,
    .achievement-modal,
    .achievement-modal-dialog {
        transition: none
    }

    .cv-modal.is-open .cv-modal-dialog,
    .project-modal.is-open .project-modal-dialog,
    .project-modal.is-open .project-modal-dialog:after,
    .project-modal.is-open .project-modal-image,
    .achievement-modal.is-open .achievement-modal-dialog,
    .achievement-modal.is-open .achievement-modal-dialog:after,
    .achievement-modal.is-open .achievement-modal-image {
        animation: none
    }

    .cv-modal-loading,
    .cv-modal-loading-spinner {
        transition: none;
        animation: none
    }
}

@media (width<=980px) {
    .launcher-link {
        margin-left: 0
    }

    body.ui-switch .featured-carousel-track {
        grid-auto-columns: clamp(240px, 68vw, 520px)
    }

    body.ui-switch .split-zone-achievements {
        margin-top: clamp(2rem, 7vw, 2.8rem)
    }
}

@media (width<=760px) {
    .launcher-shell {
        align-items: flex-start;
        gap: .56rem
    }

    .launcher-stats {
        width: 100%
    }

    .launcher-stat {
        flex: calc(50% - .3rem);
        justify-content: center
    }

    .launcher-link {
        width: 100%
    }

    body.ui-switch .featured-carousel-track {
        grid-auto-columns: clamp(220px, 84vw, 460px)
    }

    body.ui-switch .split-zone-shell {
        padding: .9rem
    }

    body.ui-switch .split-zone-head {
        margin-bottom: .75rem
    }

    body.ui-switch .split-zone-achievements:before {
        width: 86%
    }
}

@media (width<=520px) {
    .launcher-label {
        width: 100%
    }

    .launcher-stat {
        flex: 100%
    }

    body.ui-switch .featured-carousel-track {
        grid-auto-columns: 90vw
    }
}

@keyframes logoPopZoom {
    0% {
        opacity: 0;
        transform: scale(.5)translateY(-40px)
    }

    50% {
        opacity: 1;
        transform: scale(1.8)translateY(0)
    }

    to {
        opacity: 1;
        transform: scale(1)translateY(0)
    }
}

.splash-screen {
    z-index: 120;
    color: #8edcff;
    text-align: center;
    opacity: 1;
    visibility: visible;
    background: radial-gradient(circle at 14% 24%, #2b75ff61 0%, #0000 40%) 0 0/140% 140%, radial-gradient(circle at 78% 20%, #22cbff47 0%, #0000 36%) 0 0/160% 160%, linear-gradient(118deg, #040f2f 0%, #0a1b4b 42%, #07173a 72%, #040d23 100%) 0 0/180% 180%;
    place-items: center;
    padding: 0;
    font-family: "Press Start 2P", Segoe UI, monospace;
    transition: opacity .45s, visibility .45s;
    animation: 16s ease-in-out infinite splashBackdropShift;
    display: grid;
    position: fixed;
    inset: 0;
    overflow: hidden
}

.splash-screen.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none
}

.splash-screen:before {
    content: "";
    opacity: .62;
    pointer-events: none;
    background: linear-gradient(#0000 48%, #00000042 50%, #0000 52%) 0 0/100% 4px, repeating-linear-gradient(90deg, #75c3ff1a 0 2px, #0000 2px 11px) 0 0/100% 100%, repeating-linear-gradient(0deg, #567df31a 0 1px, #0000 1px 64px) 0 0/100% 100%;
    animation: 7s linear infinite splashScanlines;
    position: absolute;
    inset: 0
}

.splash-screen:after {
    content: "";
    opacity: .46;
    pointer-events: none;
    background: radial-gradient(circle at 20% 30%, #4aa8ff6b 0%, #0000 44%), radial-gradient(circle at 78% 68%, #49e5ff5c 0%, #0000 46%), radial-gradient(circle at 55% 52%, #6787ff47 0%, #0000 52%);
    animation: 18s ease-in-out infinite alternate splashAuroraFloat;
    position: absolute;
    inset: -20%
}

.splash-panel {
    width: min(1680px, 100vw);
    min-height: 100dvh;
    transition: transform .45s var(--ease-out), opacity .4s ease;
    background: linear-gradient(#071636d6 0%, #051029e6 46%, #030a1bf5 100%), repeating-linear-gradient(90deg, #72c1ff17 0 1px, #0000 1px 48px);
    border: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(.55rem, 1.5vh, 1.1rem);
    padding: clamp(2rem, 5.5vh, 4.1rem) clamp(1.2rem, 5.2vw, 4.4rem);
    animation: 2.8s steps(2, end) infinite splashFlicker;
    display: flex;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 0 2px #66d6ff75, inset 0 0 0 16px #0b235a9e, inset 0 0 120px #2984ff33
}

.splash-panel:before,
.splash-panel:after {
    content: "";
    filter: drop-shadow(0 0 12px #6bd3ff73);
    background: 0 0;
    border: 3px solid #68d5ff;
    width: clamp(42px, 7vw, 96px);
    height: clamp(42px, 7vw, 96px);
    position: absolute
}

.splash-panel:before {
    border-bottom: 0;
    border-right: 0;
    top: clamp(.7rem, 2.2vw, 1.5rem);
    left: clamp(.7rem, 2.2vw, 1.5rem)
}

.splash-panel:after {
    border-top: 0;
    border-left: 0;
    bottom: clamp(.7rem, 2.2vw, 1.5rem);
    right: clamp(.7rem, 2.2vw, 1.5rem)
}

.splash-screen.is-hidden .splash-panel {
    opacity: 0;
    transform: translateY(18px)scale(.98)
}

.splash-scanlines {
    opacity: .5;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, #00000026 0 1px, #0000 1px 2px);
    animation: 4s ease-in-out infinite scanPulse;
    position: absolute;
    inset: 0
}

.splash-code-rain {
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: .72;
    position: absolute;
    inset: 0;
    overflow: hidden
}

.splash-code-column {
    left: var(--column-x, 50%);
    white-space: pre;
    color: #7ee0ffb8;
    letter-spacing: .02em;
    text-align: center;
    text-shadow: 0 0 14px #53bbff7a;
    width: 1.2ch;
    animation: codeRainFall var(--fall-duration, 10s) linear var(--fall-delay, 0s) infinite, codeGlitchPulse 3.1s steps(1, end) var(--glitch-delay, 0s) infinite;
    font-family: "Press Start 2P", Segoe UI, monospace;
    font-size: clamp(.5rem, .62vw, .72rem);
    line-height: 1.34;
    position: absolute;
    top: -145%;
    transform: translate(-50%)
}

.splash-code-column.rgb-g {
    color: #6eff96c2;
    text-shadow: 0 0 16px #5eff848f
}

.splash-code-column.rgb-c {
    color: #68d6ffb8;
    text-shadow: 0 0 16px #5aceff85
}

.splash-code-column.rgb-y {
    color: #ffdc92a8;
    text-shadow: 0 0 16px #ffca7680
}

.splash-code-column.rgb-p {
    color: #ffb8d29e;
    text-shadow: 0 0 16px #ffa6c475
}

.splash-code-column.rgb-b {
    color: #80b0ffb3;
    text-shadow: 0 0 16px #70a2ff80
}

.splash-logo-container {
    z-index: 4;
    justify-content: center;
    align-items: center;
    margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
    animation: .8s cubic-bezier(.22, 1, .36, 1) logoPopZoom;
    display: inline-flex;
    position: relative
}

.splash-logo-glow {
    z-index: -1;
    background: radial-gradient(circle, #5edcff4d 0%, #0000 70%);
    border-radius: 50%;
    animation: 2s ease-in-out infinite logoPulse;
    position: absolute;
    inset: -20px
}

.splash-logo {
    width: clamp(160px, 20vw, 280px);
    height: clamp(160px, 20vw, 280px);
    image-rendering: pixelated;
    filter: drop-shadow(0 0 48px #5edcffe0)drop-shadow(0 0 24px #96beff80);
    z-index: 1;
    animation: 3s ease-in-out infinite logoFloat
}

.splash-content {
    z-index: 4;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.5rem, 3vh, 2.5rem);
    animation: .8s cubic-bezier(.22, 1, .36, 1) .2s both contentSlideUp;
    display: flex;
    position: relative
}

.splash-title {
    letter-spacing: .12em;
    color: #5edcff;
    text-shadow: 0 0 32px #5edcffb8, 0 0 64px #349aff5c, 0 0 2px #fff6;
    margin: 0;
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    font-weight: 800;
    line-height: 1.2;
    animation: 3s ease-in-out infinite titleGlitch;
    position: relative
}

.splash-title:before,
.splash-title:after {
    content: attr(data-text);
    opacity: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.splash-title:before {
    color: #3a9aff;
    text-shadow: 0 0 20px #3a9aff99;
    animation: 3s ease-in-out infinite titleGlitchLeft
}

.splash-title:after {
    color: #7ee8ff;
    text-shadow: 0 0 20px #7ee8ff99;
    animation: 3s ease-in-out infinite titleGlitchRight
}

.splash-progress-fill {
    background: linear-gradient(90deg, #3a9aff 0%, #5edcff 50%, #7ee8ff 100%) 0 0/200% 100%;
    border-radius: 3px;
    width: 0%;
    height: 100%;
    transition: width .12s ease-out;
    animation: 1.5s ease-in-out infinite progressShimmer;
    box-shadow: 0 0 12px #5edcffcc
}

.splash-percent {
    z-index: 2;
    letter-spacing: .06em;
    color: #e8f7ff;
    text-shadow: 0 0 10px #11234de6, 0 0 6px #5edcff59;
    pointer-events: none;
    margin: 0;
    font-size: clamp(.6rem, .9vw, .8rem);
    font-weight: 700;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

@keyframes slideGrid {
    0% {
        background-position: 0 0
    }

    to {
        background-position: 40px 40px
    }
}

@keyframes scanPulse {

    0%,
    to {
        opacity: .4
    }

    50% {
        opacity: .7
    }
}

@keyframes logoPulse {

    0%,
    to {
        opacity: .3;
        transform: scale(1)
    }

    50% {
        opacity: .5;
        transform: scale(1.1)
    }
}

@keyframes logoFloat {

    0%,
    to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-8px)
    }
}

@keyframes logoExit {
    to {
        opacity: 0;
        transform: scale(.7)translateY(30px)
    }
}

@keyframes contentSlideUp {
    0% {
        opacity: 0;
        transform: translateY(30px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes contentSlideDown {
    to {
        opacity: 0;
        transform: translateY(-30px)
    }
}

@keyframes titleGlitch {

    0%,
    to {
        transform: translate(0)
    }

    20% {
        transform: translate(-2px, 2px)
    }

    40% {
        transform: translate(2px, -2px)
    }

    60% {
        transform: translate(-1px, 1px)
    }

    80% {
        transform: translate(1px, -1px)
    }
}

@keyframes titleGlitchLeft {

    0%,
    to {
        opacity: 0;
        transform: translate(-3px)
    }

    20% {
        opacity: .8;
        transform: translate(-2px, -3px)
    }

    40% {
        opacity: 0;
        transform: translate(0)
    }

    60% {
        opacity: .6;
        transform: translate(-4px, 2px)
    }

    80% {
        opacity: 0;
        transform: translate(0)
    }
}

@keyframes titleGlitchRight {

    0%,
    to {
        opacity: 0;
        transform: translate(3px)
    }

    20% {
        opacity: 0;
        transform: translate(0)
    }

    40% {
        opacity: .7;
        transform: translate(3px, 2px)
    }

    60% {
        opacity: 0;
        transform: translate(0)
    }

    80% {
        opacity: .6;
        transform: translate(2px, -3px)
    }
}

@keyframes progressShimmer {

    0%,
    to {
        background-position: 0%
    }

    50% {
        background-position: 100%
    }
}

.splash-bg-grid {
    opacity: .4;
    z-index: 1;
    background-image: repeating-linear-gradient(0deg, #0000, #0000 39px, #6697ff14 39px 40px), repeating-linear-gradient(90deg, #0000, #0000 39px, #6697ff14 39px 40px);
    background-size: 80px 80px;
    animation: 20s linear infinite slideGrid;
    position: absolute;
    inset: 0
}

.splash-scanlines {
    opacity: .5;
    z-index: 2;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, #00000026, #00000026 1px, #0000 1px 2px);
    animation: 3s ease-in-out infinite scanPulse;
    position: absolute;
    inset: 0
}

.splash-logo-container {
    z-index: 10;
    margin-bottom: clamp(1rem, 3vh, 2.5rem);
    animation: .8s cubic-bezier(.22, 1, .36, 1) logoPopZoom, 3s ease-in-out .8s infinite logoFloat;
    position: relative
}

.splash-logo-glow {
    filter: blur(24px);
    z-index: -1;
    background: radial-gradient(circle, #58c1ff99 0%, #58c1ff33 50%, #0000 100%);
    border-radius: 50%;
    animation: 2.4s ease-in-out infinite logoPulse;
    position: absolute;
    inset: -30%
}

.splash-logo {
    filter: drop-shadow(0 0 20px #58c1ff80);
    width: clamp(160px, 20vw, 280px);
    height: clamp(160px, 20vw, 280px);
    image-rendering: pixelated;
    display: block
}

.splash-content {
    z-index: 10;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.2rem, 2.5vh, 2rem);
    width: 100%;
    max-width: 720px;
    animation: 1s cubic-bezier(.22, 1, .36, 1) .2s both contentSlideUp;
    display: flex;
    position: relative
}

.splash-title {
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #60d8ff;
    text-shadow: 0 0 20px #60d8ff99, 0 0 40px #58c1ff4d;
    margin: 0;
    font-family: "Press Start 2P", monospace;
    font-size: clamp(1.4rem, 3.5vw, 2.4rem);
    font-weight: 700;
    animation: 4s ease-in-out infinite titleGlitch;
    position: relative
}

.splash-title:before {
    content: attr(data-text);
    color: #3fa6ff;
    text-shadow: 0 0 10px #3fa6ffcc;
    z-index: -1;
    width: 100%;
    height: 100%;
    animation: 4s ease-in-out infinite titleGlitchLeft;
    position: absolute;
    top: 0;
    left: 0
}

.splash-title:after {
    content: attr(data-text);
    color: #9be9ff;
    text-shadow: 0 0 10px #9be9ffcc;
    z-index: -1;
    width: 100%;
    height: 100%;
    animation: 4s ease-in-out infinite titleGlitchRight;
    position: absolute;
    top: 0;
    left: 0
}

.splash-progress-wrapper {
    flex-direction: column;
    align-items: center;
    gap: .8rem;
    width: min(600px, 90vw);
    display: flex
}

.splash-progress-bar {
    background: #071a42cc;
    border: 2px solid #60d8ff99;
    border-radius: 6px;
    width: 100%;
    height: 26px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 10px #0006, 0 0 20px #60d8ff4d
}

.splash-progress-fill {
    background: linear-gradient(90deg, #3fa6ff 0%, #60d8ff 50%, #9be9ff 100%) 0 0/200% 100%;
    width: 0%;
    height: 100%;
    transition: width .2s cubic-bezier(.22, 1, .36, 1);
    animation: 2s ease-in-out infinite progressShimmer;
    box-shadow: 0 0 15px #60d8ff99
}

.splash-percent {
    z-index: 2;
    color: #e8f7ff;
    text-shadow: 0 0 10px #11234de6, 0 0 6px #60d8ff59;
    pointer-events: none;
    margin: 0;
    font-family: "Press Start 2P", monospace;
    font-size: clamp(.58rem, .9vw, .72rem);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.splash-screen.is-hidden .splash-logo-container {
    animation: .6s cubic-bezier(.22, 1, .36, 1) forwards logoExit
}

.splash-screen.is-hidden .splash-content {
    animation: .5s cubic-bezier(.22, 1, .36, 1) forwards contentSlideDown
}

@media (width<=768px) {
    .splash-logo-glow {
        inset: -40%
    }
}