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

:root {
    --bg: #0b0d16;
    --bg-soft: #151827;

    --card: rgba(21, 23, 36, .78);
    --card-strong: rgba(255, 255, 255, .055);
    --surface: rgba(255, 255, 255, .045);

    --border: rgba(255, 255, 255, .09);

    --text: #f8f4ff;
    --muted: #b6aec8;

    --pink: #f28ab8;
    --pink-soft: rgba(242, 138, 184, .18);

    --lavender: #a994ff;
    --blue: #80d7ff;

    --shadow: rgba(0, 0, 0, .5);

    --progress-bg: rgba(255, 255, 255, .16);
}

body.light {
    --bg: #eee6ef;
    --bg-soft: #faf4fb;

    --card: rgba(255, 255, 255, .72);
    --card-strong: rgba(255, 255, 255, .62);
    --surface: rgba(255, 255, 255, .58);

    --border: rgba(122, 93, 125, .2);

    --text: #343241;
    --muted: #746f82;

    --pink: #df6fa4;
    --pink-soft: rgba(223, 111, 164, .14);

    --lavender: #886ee4;
    --blue: #2f97cf;

    --shadow: rgba(92, 72, 102, .16);

    --progress-bg: rgba(70, 55, 82, .22);
}

body {
    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 2rem;

    font-family: "Plus Jakarta Sans", sans-serif;

    color: var(--text);

    background:
        radial-gradient(circle at 15% 10%, rgba(242, 138, 184, .14), transparent 28%),
        radial-gradient(circle at 85% 18%, rgba(169, 148, 255, .12), transparent 32%),
        radial-gradient(circle at 60% 90%, rgba(128, 215, 255, .06), transparent 30%),
        var(--bg);

    overflow-x: hidden;

    transition:
        background .35s ease,
        color .35s ease;
}

.card {
    width: 100%;
    max-width: 620px;

    position: relative;

    padding: 2.25rem;

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 34px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.025)
        ),
        var(--card);

    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);

    box-shadow:
        0 32px 70px var(--shadow),
        inset 0 1px rgba(255,255,255,.07);

    animation: cardIn .75s ease both;
}

.card::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(circle at 90% 24%, rgba(242, 138, 184, .12), transparent 18%),
        linear-gradient(135deg, transparent 0 68%, rgba(242, 138, 184, .06));
}

.card::after {
    content: "";

    position: absolute;
    top: 0;
    left: -120%;

    width: 65%;
    height: 100%;

    transform: skewX(-18deg);

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.045),
            transparent
        );

    animation: cardShine 7s ease-in-out infinite;
}

.site-title {
    position: relative;

    text-align: center;

    margin-bottom: 1.5rem;

    color: var(--pink);

    font-size: .78rem;
    font-weight: 700;

    letter-spacing: 2.8px;

    opacity: .9;
}

.theme-toggle {
    position: absolute;
    top: .7rem;
    right: 1rem;

    z-index: 5;

    width: 48px;
    height: 32px;

    border: 1px solid var(--border);
    border-radius: 999px;

    color: var(--text);
    background: var(--card-strong);

    box-shadow:
        inset 0 1px rgba(255,255,255,.08),
        0 10px 24px rgba(0,0,0,.12);

    cursor: pointer;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.hero {
    position: relative;

    text-align: center;

    margin-bottom: 2rem;
}

.hero-banner {
    height: 150px;
    position: relative;
    margin: -0.25rem -0.75rem 0;
    border-radius: 28px;
    overflow: hidden;

    border: 1px solid var(--border);
    background: var(--bg-soft);
}

.hero-banner-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;

    opacity: .80;
    filter:
        grayscale(1)
        contrast(1.08)
        brightness(.98);
}

.hero-banner::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(11, 13, 22, .08),
            rgba(11, 13, 22, .28)
        );

    pointer-events: none;
}

.avatar-wrap {
    width: 138px;
    height: 138px;

    position: relative;

    margin: -105px auto 1.2rem;
}

.avatar {
    width: 100%;
    height: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
    
    border: 5px solid rgba(255,255,255,.78);
    border-radius: 50%;
    
    color: white;
    
    font-size: 3rem;
    font-weight: 800;

    position: relative;
    z-index: 1;
    
    background:
        radial-gradient(circle at 35% 25%, rgba(255,255,255,.35), transparent 20%),
        linear-gradient(135deg, var(--pink), var(--lavender));

    box-shadow:
        0 16px 35px rgba(0,0,0,.25),
        0 0 40px rgba(242,138,184,.2);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.avatar img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 50%;

    display: block;
}

.avatar:hover {
    transform:
        translateY(-4px)
        rotate(-2deg);

    box-shadow:
        0 18px 38px rgba(0,0,0,.28),
        0 0 52px rgba(242,138,184,.26);
}


.hero h1 {
    font-size: 2.75rem;
    line-height: 1;

    letter-spacing: -.8px;

    margin-bottom: .35rem;

    text-shadow:
        0 8px 22px rgba(0,0,0,.18);
}

.hero h1 span,
.footer-note span {
    font-family: "Nunito", Inter, system-ui, sans-serif;
    color: var(--pink);
}

#live-time {
    transition: color .2s ease;
    cursor: default;
}

.subtitle {
    color: var(--pink);

    font-size: .82rem;
    font-weight: 700;

    opacity: .80;

    margin-bottom: 1.2rem;

    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.bio {
    max-width: 400px;

    margin: 1.25rem auto;
    margin-bottom: 1.8rem;
    color: var(--muted);

    font-size: 1rem;
    font-weight: 450;

    line-height: 1.8;
    letter-spacing: .15px;
}

section {
    position: relative;
    margin-top: 1.8rem;
    margin-bottom: 1.75rem;
}

h2 {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: .55rem;

    margin-bottom: 1rem;

    font-size: 1.17rem;
}

h2 span {
    color: var(--pink);
}

.music-player {
    position: relative;

    display: grid;
    grid-template-columns: 72px 1fr 52px;
    align-items: center;

    gap: 1rem;

    padding: 1rem;

    border-radius: 24px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.025)
        ),
        var(--surface);

    border: 1px solid var(--border);

    overflow: hidden;

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.music-player::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(circle at 16% 20%, rgba(242,138,184,.10), transparent 22%),
        linear-gradient(
            115deg,
            transparent 0 34%,
            rgba(255,255,255,.055) 46%,
            transparent 58% 100%
        );

    opacity: .75;
}

.music-player::after {
    content: "";

    position: absolute;
    left: -90%;
    top: 0;

    width: 55%;
    height: 100%;

    transform: skewX(-22deg);

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.09),
            transparent
        );

    transition: .8s ease;
}

.music-player:hover {
    transform: translateY(-2px);

    border-color:
        rgba(242,138,184,.24);

    box-shadow:
        0 14px 34px rgba(0,0,0,.18),
        0 0 28px rgba(242,138,184,.08);
}

.music-player:hover::after {
    left: 140%;
}

.cover {
    position: relative;
    z-index: 1;

    width: 72px;
    height: 72px;

    object-fit: cover;

    border-radius: 18px;

    border: 1px solid var(--border);

    background: var(--bg-soft);

    box-shadow:
        0 8px 20px rgba(0,0,0,.16);

    transition:
        transform .3s ease;
}

.music-player.is-idle:hover .cover {
    transform: scale(1.035);
}

.track-details {
    position: relative;
    z-index: 1;

    min-width: 0;
}

.track-title {
    font-weight: 800;

    margin-bottom: .25rem;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.track-artist {
    color: var(--muted);

    font-size: .88rem;

    margin-bottom: .75rem;
}

.progress-area {
    display: flex;
    align-items: center;

    gap: .6rem;
}

.time {
    min-width: 35px;

    color: var(--muted);

    font-size: .76rem;
}

.progress-bar {
    flex: 1;

    height: 7px;

    -webkit-appearance: none;
    appearance: none;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--pink) 0%,
            var(--pink) var(--progress, 0%),
            var(--progress-bg) var(--progress, 0%),
            var(--progress-bg) 100%
        );

    cursor: pointer;

    outline: none;
}

.progress-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;

    width: 16px;
    height: 16px;

    border-radius: 50%;

    background: var(--pink);

    border: 2px solid rgba(255,255,255,.9);

    box-shadow:
        0 0 0 5px rgba(242,138,184,.11),
        0 0 16px rgba(242,138,184,.5);
}

.progress-bar::-moz-range-thumb {
    width: 16px;
    height: 16px;

    border-radius: 50%;

    background: var(--pink);

    border: 2px solid rgba(255,255,255,.9);

    box-shadow:
        0 0 0 5px rgba(242,138,184,.11),
        0 0 16px rgba(242,138,184,.5);
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: .8rem;
}

.skill-item {
    position: relative;

    min-height: 68px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: .35rem;

    overflow: hidden;

    border-radius: 22px;

    border: 1px solid var(--border);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.02)
        ),
        var(--card-strong);

    color: var(--text);

    font-weight: 700;

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}

.skill-item::before {
    content: "";

    position: absolute;
    top: 0;
    left: -190%;

    width: 70%;
    height: 100%;

    transform: skewX(-25deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.14),
            transparent
        );

    transition: .75s ease;
}

.skill-item::after {
    content: "";

    position: absolute;
    left: 50%;
    bottom: -18px;

    width: 0;
    height: 20px;

    transform: translateX(-50%);

    background: var(--pink);

    filter: blur(20px);

    transition: .35s ease;
}

.skill-item:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(242,138,184,.38);

    background: var(--pink-soft);

    box-shadow:
        0 16px 34px rgba(242,138,184,.10);
}

.skill-item:hover::before {
    left: 160%;
}

.skill-item:hover::after {
    width: 72%;
}

.section-icon,
.skill-icon,
.contact-icon {
    display: block;
    object-fit: contain;

    filter:
        drop-shadow(0 0 10px rgba(242,138,184,.18));
}

.section-icon {
    width: 20px;
    height: 20px;
}

.skill-icon {
    width: 28px;
    height: 28px;
}

.contact-icon {
    width: 22px;
    height: 22px;
}

.contacts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: .8rem;

    max-width: 560px;
    margin: 0 auto;
}

.contact-link {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: .65rem;

    min-height: 48px;

    font-size: .95rem;

    overflow: hidden;

    text-decoration: none;

    color: var(--text);

    font-weight: 800;

    border: 1px solid var(--border);
    border-radius: 22px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.02)
        ),
        var(--card-strong);

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

.contact-link::before {
    content: "";

    position: absolute;
    top: 0;
    left: -190%;

    width: 60%;
    height: 100%;

    transform: skewX(-25deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.14),
            transparent
        );

    transition: .75s ease;
}


.contact-link:hover {
    transform: translateY(-5px);

    border-color:
        rgba(242,138,184,.42);

    box-shadow:
        0 16px 34px rgba(242,138,184,.11);
}

.contact-link:hover::before {
    left: 170%;
}

.footer-note {
    position: relative;

    padding-top: 1rem;

    color: var(--muted);

    text-align: center;

    border-top: 1px solid var(--border);
}

.cat-peek {
    position: absolute;
    right: 22px;
    bottom: 88px;

    width: 78px;
    height: 70px;

    z-index: 1;

    opacity: .75;

    pointer-events: none;
}

.cat-face {
    position: absolute;
    bottom: 0;

    width: 78px;
    height: 52px;

    border: 3px solid var(--muted);
    border-bottom: 0;

    border-radius: 28px 28px 0 0;

    background: rgba(255,255,255,.035);
}

.ear {
    position: absolute;
    top: 8px;

    width: 26px;
    height: 26px;

    border-top: 3px solid var(--muted);
    border-left: 3px solid var(--muted);

    transform: rotate(45deg);

    background: var(--card);
}

.ear-left {
    left: 9px;
}

.ear-right {
    right: 9px;
}

.eye {
    position: absolute;
    top: 22px;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--muted);
}

.eye:first-child {
    left: 24px;
}

.eye:nth-child(2) {
    right: 24px;
}

.mouth {
    position: absolute;
    left: 50%;
    top: 28px;

    transform: translateX(-50%);

    color: var(--muted);

    font-size: .9rem;
}

.petals {
    position: fixed;
    inset: 0;

    pointer-events: none;

    overflow: hidden;
}

.petals span {
    position: absolute;
    top: -20px;

    width: 12px;
    height: 8px;

    border-radius: 60% 40% 60% 40%;

    background: var(--pink);

    opacity: .38;

    animation:
        fall 12s linear infinite;
}

.petals span:nth-child(1) {
    left: 14%;
    animation-delay: 0s;
}

.petals span:nth-child(2) {
    left: 34%;
    animation-delay: 2s;
    animation-duration: 14s;
}

.petals span:nth-child(3) {
    left: 58%;
    animation-delay: 4s;
    animation-duration: 13s;
}

.petals span:nth-child(4) {
    left: 76%;
    animation-delay: 1s;
    animation-duration: 16s;
}

.petals span:nth-child(5) {
    left: 88%;
    animation-delay: 5s;
    animation-duration: 15s;
}

@keyframes fall {
    to {
        transform:
            translate3d(-80px, 110vh, 0)
            rotate(520deg);
    }
}

@keyframes cardIn {
    from {
        opacity: 0;
        transform:
            translateY(18px)
            scale(.98);
    }

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

@keyframes cardShine {
    0%,
    48% {
        left: -120%;
    }

    62% {
        left: 145%;
    }

    100% {
        left: 145%;
    }
}

@media (max-width: 680px) {
    body {
        padding: 1rem;
    }

    .card {
        padding: 1.4rem;
        border-radius: 28px;
    }

    .theme-toggle {
        top: 1rem;
        right: 1rem;
    }

    .site-title {
        margin-top: .2rem;
    }

    .hero-banner {
        height: 105px;
    }

    .avatar-wrap {
        width: 122px;
        height: 122px;

        margin-top: -54px;
    }

    .hero h1 {
        font-size: 2.25rem;
    }

    .music-player {
        grid-template-columns: 76px 1fr;
    }

    .cover {
        width: 76px;
        height: 76px;
    }

    .skills-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contacts {
        grid-template-columns: 1fr;
    }

}

.skill-icon,
.contact-icon,
.play-icon,
.section-icon {
    filter:
        brightness(0)
        saturate(100%)
        invert(73%)
        sepia(31%)
        saturate(1060%)
        hue-rotate(291deg)
        brightness(101%)
        contrast(94%)
        drop-shadow(0 0 10px rgba(242,138,184,.2));
}

/* Spotify status polish */
.player-section {
    margin-bottom: 1.75rem;
}

.spotify-note {
    margin-top: .25rem;
    text-align: center;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.35;
    opacity: .75;
}

.progress-bar {
    pointer-events: none;
    cursor: default;
}

.progress-bar::-webkit-slider-thumb {
    pointer-events: none;
}

.progress-bar::-moz-range-thumb {
    pointer-events: none;
}

.music-player {
    grid-template-columns: 72px 1fr;
}

.music-player.is-idle {
    opacity: .78;
    border-style: dashed;
}

.music-player.is-idle .cover {
    padding: 8px;
    object-fit: contain;

    background:
        radial-gradient(circle at 50% 45%, rgba(242,138,184,.16), transparent 55%),
        rgba(255,255,255,.04);

    filter:
        brightness(0)
        saturate(100%)
        invert(73%)
        sepia(31%)
        saturate(1060%)
        hue-rotate(291deg)
        brightness(101%)
        contrast(94%)
        drop-shadow(0 0 12px rgba(242,138,184,.25));

    opacity: .9;
}

.music-player:not(.is-idle) .cover {
    padding: 0;
    filter: none;
    opacity: 1;
}

.music-player.is-idle .track-title {
    color: var(--muted);
}

.music-player.is-idle .track-artist {
    font-style: italic;
}

.music-player.is-idle .progress-bar {
    opacity: .45;
}

/* Final theme toggle animation */
.theme-toggle {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: visible;

    transition:
        transform .42s cubic-bezier(.16, 1, .3, 1),
        border-color .35s ease,
        background-color .35s ease,
        box-shadow .45s ease;
}

.theme-toggle::before {
    content: "";

    position: absolute;
    inset: 7px;

    border-radius: 50%;

    background:
        radial-gradient(circle, rgba(242, 138, 184, .2), transparent 68%);

    opacity: .55;
    transform: scale(.75);

    transition:
        opacity .5s ease,
        transform .52s cubic-bezier(.16, 1, .3, 1);
}

.theme-toggle:hover {
    transform: translateY(-2px);

    border-color: rgba(242, 138, 184, .42);

    box-shadow:
        0 0 28px rgba(242, 138, 184, .13),
        inset 0 1px rgba(255,255,255,.1);
}

.theme-toggle:hover::before {
    opacity: .9;
    transform: scale(1.04);
}

.theme-toggle:active {
    transform: translateY(0) scale(.96);
}

.theme-icon-wrap {
    position: relative;
    z-index: 1;

    width: 20px;
    height: 20px;

    overflow: hidden;
    display: block;

    transition:
        transform .5s cubic-bezier(.16, 1, .3, 1);

    will-change: transform;
}

.theme-toggle:hover .theme-icon-wrap {
    transform: scale(1.04);
}

.theme-toggle:active .theme-icon-wrap {
    transform: scale(.96);
}

.theme-icon {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;
    object-fit: contain;

    backface-visibility: hidden;
    transform-origin: center;
    will-change: opacity, transform;

    filter:
        brightness(0)
        saturate(100%)
        invert(73%)
        sepia(31%)
        saturate(1060%)
        hue-rotate(291deg)
        brightness(101%)
        contrast(94%)
        drop-shadow(0 0 10px rgba(242,138,184,.22));

    transition:
        opacity .46s ease,
        transform .58s cubic-bezier(.16, 1, .3, 1),
        filter .35s ease;
}

.theme-icon-sun {
    opacity: 1;
    transform: scale(1);
}

.theme-icon-moon {
    opacity: 0;
    transform: scale(.88);
}

body.light .theme-icon-sun {
    opacity: 0;
    transform: scale(.82);
}

body.light .theme-icon-moon {
    opacity: 1;
    transform: scale(0.92);
}

body.light .theme-toggle:hover .theme-icon-moon {
    transform: scale(0.98);
}

.theme-toggle .theme-icon {
    filter:
        brightness(0)
        saturate(100%)
        invert(73%)
        sepia(31%)
        saturate(1060%)
        hue-rotate(291deg)
        brightness(101%)
        contrast(94%)
        drop-shadow(0 0 10px rgba(242,138,184,.22));
}

.theme-toggle img,
.theme-toggle:hover img,
.theme-toggle:active img {
    transform-origin: center;
}

@media (max-width: 680px) {
    .theme-toggle {
        top: 1.15rem;
        right: 1.15rem;
    }

    .theme-toggle img,
    .theme-toggle:hover img {
        width: 100%;
        height: 100%;
    }

    .theme-toggle:hover .theme-icon-wrap {
        transform: scale(1.03);
    }

    .theme-toggle:active .theme-icon-wrap {
        transform: scale(.97);
    }

    .music-player {
        grid-template-columns: 76px 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

.contact-link.copied {
    border-color: rgba(242, 138, 184, .55);
    background: var(--pink-soft);
}

.toast {
    position: fixed;

    left: 50%;
    bottom: 28px;

    transform: translate(-50%, 24px);

    padding: .8rem 1.2rem;

    border-radius: 14px;

    background: rgba(26, 28, 40, .68);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);

    border: 1px solid rgba(242,138,184,.22);

    color: #fff;
    font-size: .9rem;
    font-weight: 600;

    box-shadow:
        0 10px 24px rgba(0,0,0,.28),
        0 0 18px rgba(242,138,184,.08);

    opacity: 0;
    pointer-events: none;

    transition:
        opacity .28s ease,
        transform .35s cubic-bezier(.22,1,.36,1);

    z-index: 9999;
}

.toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

body.light .toast {
    background: rgba(255,255,255,.88);
    color: #2b2b35;
    border-color: rgba(242,138,184,.24);
}

.track-title-row {
    display: flex;
    align-items: center;
    gap: .45rem;

    min-width: 0;
}

.equalizer {
    width: 14px;
    height: 14px;

    display: flex;
    align-items: flex-end;
    gap: 3px;

    flex: 0 0 auto;
}

.equalizer span {
    width: 4px;
    height: 6px;

    border-radius: 999px;

    background: var(--pink);

    opacity: .8;

    transition:
        height .18s ease,
        opacity .18s ease;
}

.music-player.is-idle .equalizer {
    display: none;
}

.equalizer span {
    width: 3px !important;
    min-width: 3px;
}