* {
        box-sizing: border-box;
    }

    :root {
        --mouse-x: 50%;
        --mouse-y: 50%;

        --bg-main: #0f172a;
        --bg-soft: #111c33;
        --bg-card: rgba(30, 42, 68, 0.62);
        --border-soft: rgba(148, 163, 184, 0.14);

        --text-main: #e2e8f0;
        --text-muted: #94a3b8;
        --text-soft: #cbd5e1;

        --accent: #5eead4;
        --accent-2: #38bdf8;

        --scroll-track: #0b1120;
        --scroll-thumb: #2dd4bf;
        --scroll-thumb-hover: #5eead4;

        --card-shadow: 0 20px 55px rgba(2, 6, 23, 0.35);
        --glow-shadow: 0 24px 80px rgba(20, 184, 166, 0.12);
    }

    html[data-theme="light"] {
        --bg-main: #f6f8fb;
        --bg-soft: #eef3f8;
        --bg-card: rgba(255, 255, 255, 0.88);
        --border-soft: rgba(30, 64, 100, 0.14);

        --text-main: #102033;
        --text-muted: #475569;
        --text-soft: #263d56;

        --accent: #0f766e;
        --accent-2: #0f766e;

        --scroll-track: #e5edf5;
        --scroll-thumb: #0f766e;
        --scroll-thumb-hover: #115e59;

        --card-shadow:
            0 18px 45px rgba(15, 23, 42, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.85);
        --glow-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    }

    html,
    body {
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        font-family: "Poppins", sans-serif;
        background: var(--bg-main);
        color: var(--text-main);
        scrollbar-color: var(--scroll-thumb) var(--scroll-track);
        scrollbar-width: thin;
    }

    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    ::-webkit-scrollbar-track {
        background: var(--scroll-track);
    }

    ::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, var(--accent), var(--accent-2));
        border-radius: 999px;
        border: 2px solid var(--scroll-track);
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--scroll-thumb-hover);
    }

    body {
        min-height: 100vh;
        position: relative;
        isolation: isolate;
        background:
            radial-gradient(circle at top left, rgba(30, 64, 175, 0.16), transparent 34rem),
            linear-gradient(180deg, var(--bg-main) 0%, #111827 100%);
        transition: background 0.3s ease, color 0.3s ease;
    }

    html[data-theme="light"] body {
        background:
            radial-gradient(circle at top left, rgba(15, 118, 110, 0.08), transparent 34rem),
            radial-gradient(circle at bottom right, rgba(15, 118, 110, 0.05), transparent 28rem),
            linear-gradient(180deg, #f6f8fb 0%, #eef3f8 100%);
        color: var(--text-main);
    }

    body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background:
            radial-gradient(
                720px circle at var(--mouse-x) var(--mouse-y),
                rgba(20, 184, 166, 0.14),
                rgba(56, 189, 248, 0.08) 28%,
                transparent 62%
            );
        transition: background 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
    }

    html[data-theme="light"] body::before {
        z-index: 2;
        opacity: 1;
        filter: blur(4px);
        background:
            radial-gradient(
                320px circle at var(--mouse-x) var(--mouse-y),
                rgba(15, 118, 110, 0.26) 0%,
                rgba(15, 118, 110, 0.18) 32%,
                rgba(15, 118, 110, 0.09) 54%,
                transparent 76%
            ),
            radial-gradient(
                760px circle at var(--mouse-x) var(--mouse-y),
                rgba(15, 118, 110, 0.12) 0%,
                rgba(15, 118, 110, 0.07) 38%,
                transparent 78%
            );
    }

    body::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background:
            linear-gradient(90deg, rgba(15, 23, 42, 0.86), transparent 45%, rgba(15, 23, 42, 0.36)),
            radial-gradient(circle at center, transparent, rgba(15, 23, 42, 0.35));
        transition: background 0.3s ease, opacity 0.3s ease;
    }

    html[data-theme="light"] body::after {
        background: transparent;
        opacity: 0;
    }

    header,
    main,
    footer {
        position: relative;
        z-index: 20;
    }

    .glass-card {
        background: linear-gradient(135deg, var(--bg-card), rgba(15, 23, 42, 0.58));
        border: 1px solid var(--border-soft);
        box-shadow: var(--card-shadow);
        backdrop-filter: blur(14px);
        transition:
            background 0.3s ease,
            border-color 0.3s ease,
            box-shadow 0.3s ease,
            transform 0.25s ease;
    }

    html[data-theme="light"] .glass-card {
        background: rgba(255, 255, 255, 0.88);
        border-color: rgba(30, 64, 100, 0.14);
        backdrop-filter: blur(12px);
    }

    .section-label {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
        background: color-mix(in srgb, var(--accent) 10%, transparent);
        color: var(--accent);
        padding: 0.45rem 0.85rem;
        border-radius: 999px;
        font-size: 0.76rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    html[data-theme="light"] .section-label {
        background: rgba(255, 255, 255, 0.85);
        border-color: rgba(15, 118, 110, 0.22);
        color: #0f766e;
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
    }

    .soft-divider {
        height: 1px;
        background: linear-gradient(
            90deg,
            transparent,
            color-mix(in srgb, var(--accent) 48%, transparent),
            color-mix(in srgb, var(--accent-2) 28%, transparent),
            transparent
        );
    }

    .nav-link {
        color: var(--text-muted);
    }

    .nav-link.active,
    .nav-link:hover {
        color: var(--accent);
    }

    .nav-link::after {
        content: "";
        display: block;
        width: 0;
        height: 2px;
        margin-top: 4px;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--accent), var(--accent-2));
        transition: width 0.25s ease;
    }

    .nav-link:hover::after,
    .nav-link.active::after {
        width: 100%;
    }

    html[data-theme="light"] #site-navbar,
    html[data-theme="light"] #site-navbar a,
    html[data-theme="light"] #site-navbar p,
    html[data-theme="light"] #site-navbar span {
        color: var(--text-main);
    }

    html[data-theme="light"] .nav-link {
        color: #334155 !important;
    }

    html[data-theme="light"] .nav-link:hover,
    html[data-theme="light"] .nav-link.active {
        color: #0f766e !important;
    }

    html[data-theme="light"] .nav-link::after {
        background: linear-gradient(90deg, #0f766e, #115e59);
    }


    .theme-icon-stack {
        position: relative;
        display: inline-flex;
        height: 1.15rem;
        width: 1.15rem;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .theme-icon-stack i {
        position: absolute;
        inset: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.25s ease, transform 0.25s ease;
    }

    html[data-theme="dark"] .theme-icon-sun {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }

    html[data-theme="dark"] .theme-icon-moon {
        opacity: 0;
        transform: rotate(-35deg) scale(0.65);
    }

    html[data-theme="light"] .theme-icon-sun {
        opacity: 0;
        transform: rotate(35deg) scale(0.65);
    }

    html[data-theme="light"] .theme-icon-moon {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }

    #typing-text::after {
        content: "|";
        margin-left: 4px;
        color: var(--accent);
        animation: blink 0.8s infinite;
    }

    @keyframes blink {
        0%, 100% {
            opacity: 1;
        }

        50% {
            opacity: 0;
        }
    }

    .skill-icon:hover .skill-tooltip {
        opacity: 1;
        transform: translateY(0);
    }

    html[data-theme="light"] .skill-icon {
        background: rgba(255, 255, 255, 0.65) !important;
        border-color: rgba(30, 64, 100, 0.12) !important;
    }

    html[data-theme="light"] .skill-icon:hover {
        background: rgba(15, 118, 110, 0.08) !important;
        border-color: rgba(15, 118, 110, 0.24) !important;
    }



    .hero-portrait-wrap {
        position: relative;
        min-height: 600px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hero-portrait-glow {
        position: absolute;
        left: 50%;
        top: 50%;
        width: min(86%, 520px);
        height: min(82%, 520px);
        transform: translate(-50%, -48%);
        border-radius: 999px;
        background:
            radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 52%),
            radial-gradient(circle at 50% 68%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 68%);
        filter: blur(44px);
        opacity: 0.85;
        pointer-events: none;
    }

    .hero-portrait-card {
        position: relative;
        width: min(88%, 430px);
        height: min(560px, 70vh);
        display: flex;
        align-items: flex-end;
        justify-content: center;
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--accent) 34%, rgba(255, 255, 255, 0.18));
        border-radius: 2rem;
        background: transparent;
        box-shadow:
            0 28px 90px rgba(2, 6, 23, 0.30),
            inset 0 1px 0 rgba(255, 255, 255, 0.10);
    }

    .hero-portrait-card::before {
        content: "";
        position: absolute;
        inset: 10px;
        z-index: 1;
        border-radius: 1.55rem;
        border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
        pointer-events: none;
    }

    .hero-portrait-card::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        border-radius: inherit;
        background: transparent;
        pointer-events: none;
    }

    .hero-portrait-image-area {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        overflow: hidden;
        border-radius: inherit;
        background: transparent;
    }

    .hero-portrait-image-area::before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 4.75rem;
        z-index: 1;
        width: 78%;
        height: 64%;
        transform: translateX(-50%);
        border-radius: 999px;
        background: transparent;
        pointer-events: none;
    }

    .hero-portrait-image {
        position: absolute;
        left: 50%;
        bottom: -10px;
        z-index: 3;
        width: auto;
        height: 106%;
        max-width: none;
        object-fit: contain;
        object-position: bottom center;
        transform: translateX(-50%) scale(1.08);
        transform-origin: bottom center;
        filter: drop-shadow(0 34px 38px rgba(2, 6, 23, 0.42));
    }

    .hero-floating-label {
        left: 50% !important;
        right: auto !important;
        bottom: 1.45rem !important;
        z-index: 6;
        width: min(84%, 360px);
        transform: translateX(-50%);
        border-radius: 1.35rem !important;
        border-color: color-mix(in srgb, var(--accent) 22%, transparent) !important;
        background: color-mix(in srgb, var(--bg-main) 86%, transparent);
        padding: 0.9rem 1rem !important;
        backdrop-filter: blur(14px);
    }

    html[data-theme="light"] .hero-portrait-glow {
        background:
            radial-gradient(circle at 50% 38%, rgba(15, 118, 110, 0.15), transparent 54%),
            radial-gradient(circle at 50% 68%, rgba(15, 118, 110, 0.08), transparent 70%);
        opacity: 0.9;
    }

    html[data-theme="light"] .hero-portrait-card {
        border-color: rgba(15, 118, 110, 0.28);
        background: transparent;
        box-shadow:
            0 28px 70px rgba(15, 23, 42, 0.10),
            inset 0 1px 0 rgba(255, 255, 255, 0.58);
    }

    html[data-theme="light"] .hero-portrait-card::before {
        border-color: rgba(15, 118, 110, 0.13);
    }

    html[data-theme="light"] .hero-portrait-card::after {
        background: transparent;
    }

    html[data-theme="light"] .hero-portrait-image-area::before {
        background: transparent;
    }

    html[data-theme="light"] .hero-portrait-image {
        filter: drop-shadow(0 30px 34px rgba(15, 23, 42, 0.18));
    }

    html[data-theme="light"] .hero-floating-label {
        background: rgba(255, 255, 255, 0.84);
        border-color: rgba(15, 118, 110, 0.18) !important;
    }

    .image-soft-hover {
        transition: transform 0.35s ease, filter 0.35s ease;
    }

    .group:hover .image-soft-hover {
        transform: scale(1.035);
        filter: brightness(1.08);
    }

    .project-card.is-hidden {
        display: none;
    }

    .project-filter-btn {
        color: var(--text-soft);
        background: rgba(255, 255, 255, 0.055);
        border-color: rgba(148, 163, 184, 0.22);
        box-shadow: none;
    }

    .project-filter-btn:hover {
        color: #ffffff;
        background: rgba(94, 234, 212, 0.10);
        border-color: rgba(94, 234, 212, 0.35);
    }

    .project-filter-btn.active {
        color: #06231f !important;
        background: #5eead4 !important;
        border-color: #5eead4 !important;
        box-shadow: 0 0 24px rgba(94, 234, 212, 0.28) !important;
    }

    .project-filter-btn.active,
    .project-filter-btn.active * {
        color: #06231f !important;
    }

    html[data-theme="light"] .project-filter-btn {
        background: transparent !important;
        border-color: transparent !important;
        color: #334155 !important;
        box-shadow: none !important;
    }

    html[data-theme="light"] .project-filter-btn:hover {
        background: rgba(15, 118, 110, 0.08) !important;
        color: #0f766e !important;
    }

    html[data-theme="light"] .project-filter-btn.active {
        background: #0f766e !important;
        color: #ffffff !important;
        border-color: #0f766e !important;
        box-shadow: 0 12px 28px rgba(15, 118, 110, 0.18) !important;
    }

    html[data-theme="light"] .project-card {
        background: rgba(255, 255, 255, 0.90) !important;
    }

    html[data-theme="light"] .project-card h3 {
        color: #102033 !important;
    }

    html[data-theme="light"] .project-card p {
        color: #475569 !important;
    }

    html[data-theme="light"] .project-card .bg-gradient-to-t {
        background: linear-gradient(
            to top,
            rgba(15, 23, 42, 0.62),
            rgba(15, 23, 42, 0.16),
            transparent
        ) !important;
    }

    .project-image-badge {
        background: rgba(15, 23, 42, 0.88);
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.18);
        backdrop-filter: blur(8px);
        text-shadow: none;
        letter-spacing: 0.01em;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22);
        pointer-events: none;
    }

    html[data-theme="dark"] .project-image-badge {
        background: rgba(15, 23, 42, 0.82);
        color: #ffffff;
        border: 1px solid rgba(94, 234, 212, 0.18);
    }

    html[data-theme="light"] .project-image-badge {
        background: rgba(15, 23, 42, 0.82);
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.22);
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
    }

    .project-card .bg-gradient-to-t {
        pointer-events: none;
    }

    html[data-theme="light"] .project-card .rounded-full.border.border-teal-300\/20,
    html[data-theme="light"] span.rounded-full.border.border-teal-300\/20 {
        background: rgba(15, 118, 110, 0.10) !important;
        border-color: rgba(15, 118, 110, 0.20) !important;
        color: #0f766e !important;
    }

    html[data-theme="light"] .project-card a.bg-white {
        background: #102033 !important;
        color: #ffffff !important;
    }

    html[data-theme="light"] .project-card a.bg-white:hover {
        background: #0f766e !important;
        color: #ffffff !important;
    }

    html[data-theme="light"] .project-card span.inline-flex:not(.project-image-badge) {
        background: rgba(15, 23, 42, 0.06) !important;
        border-color: rgba(15, 23, 42, 0.12) !important;
        color: #475569 !important;
    }

    .timeline-dot {
        position: absolute;
        left: 50%;
        top: 2rem;
        display: none;
        height: 1rem;
        width: 1rem;
        transform: translateX(-50%);
        border-radius: 999px;
        border: 4px solid var(--bg-main);
        background: var(--accent);
        box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 55%, transparent);
        z-index: 5;
    }

    html[data-theme="light"] .timeline-dot {
        background: #0f766e !important;
        border-color: #f6f8fb !important;
        box-shadow: 0 0 18px rgba(15, 118, 110, 0.28) !important;
    }

    html[data-theme="light"] h1,
    html[data-theme="light"] h2,
    html[data-theme="light"] h3,
    html[data-theme="light"] .text-mist-100,
    html[data-theme="light"] .text-white {
        color: #102033 !important;
    }

    html[data-theme="light"] p,
    html[data-theme="light"] .text-mist-300,
    html[data-theme="light"] .text-mist-400,
    html[data-theme="light"] .text-slate-300,
    html[data-theme="light"] .text-slate-400 {
        color: #475569 !important;
    }

    html[data-theme="light"] .bg-teal-300 {
        background-color: #0f766e !important;
        color: #ffffff !important;
    }

    html[data-theme="light"] .hover\:bg-teal-200:hover {
        background-color: #115e59 !important;
        color: #ffffff !important;
    }

    html[data-theme="light"] .bg-white\/5 {
        background-color: rgba(255, 255, 255, 0.72) !important;
    }

    html[data-theme="light"] .border-white\/10,
    html[data-theme="light"] .border-white\/15 {
        border-color: rgba(30, 64, 100, 0.14) !important;
    }

    html[data-theme="light"] #theme-toggle,
    html[data-theme="light"] #mobile-theme-toggle,
    html[data-theme="light"] a[download] {
        background: rgba(255, 255, 255, 0.80) !important;
        border-color: rgba(15, 118, 110, 0.20) !important;
        color: #0f766e !important;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06) !important;
    }

    html[data-theme="light"] #theme-toggle:hover,
    html[data-theme="light"] #mobile-theme-toggle:hover,
    html[data-theme="light"] a[download]:hover {
        background: #0f766e !important;
        color: #ffffff !important;
    }

    html[data-theme="light"] #mobile-menu {
        background: rgba(255, 255, 255, 0.96) !important;
        border-color: rgba(30, 64, 100, 0.14) !important;
    }

    html[data-theme="light"] .mobile-nav-link {
        color: #334155 !important;
    }

    html[data-theme="light"] .mobile-nav-link:hover {
        background: rgba(15, 118, 110, 0.08) !important;
        color: #0f766e !important;
    }

    @media (min-width: 768px) {
        .timeline-dot {
            display: block;
        }
    }

    @media (max-width: 768px) {
        body::before {
            background:
                radial-gradient(
                    520px circle at var(--mouse-x) var(--mouse-y),
                    color-mix(in srgb, var(--accent) 13%, transparent),
                    transparent 68%
                );
        }

        html[data-theme="light"] body::before {
            background:
                radial-gradient(
                    280px circle at var(--mouse-x) var(--mouse-y),
                    rgba(15, 118, 110, 0.24),
                    rgba(15, 118, 110, 0.13) 36%,
                    transparent 72%
                );
            filter: blur(4px);
        }

        body::after {
            background: linear-gradient(180deg, rgba(15, 23, 42, 0.20), rgba(15, 23, 42, 0.55));
        }

        html[data-theme="light"] body::after {
            background: transparent;
            opacity: 0;
        }

        .glass-card {
            backdrop-filter: none;
        }
    }

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