:root{
            --bg: #281d28;
            --text: #ffffff;
            --purple: #a86eff;
            --purple-dark: #7a40c8;
            --purple-light: #cfa8ff;
            --white: #ffffff;
            --muted: rgba(255,255,255,0.06);
            --card: rgba(168,110,255,0.03);
            --accent-grad: linear-gradient(90deg,var(--purple),var(--white));
        }

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

        body {
            font-family: 'Inter', 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
            background: var(--bg);
            color: var(--text);
            overflow-x: hidden;
        }

        nav {
            position: fixed;
            top: 16px;
            left: 50%;
            transform: translateX(-50%);
            width: calc(100% - 64px);
            max-width: 1200px;
            padding: 0.6rem;
            background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
            backdrop-filter: blur(10px) saturate(120%);
            -webkit-backdrop-filter: blur(10px) saturate(120%);
            z-index: 1100;
            display: block;
            border-radius: 14px;
            box-shadow: 0 10px 30px rgba(8,6,12,0.6), 0 1px 0 rgba(255,255,255,0.02) inset;
            animation: slideDown 0.6s ease;
        }
        .nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:6px 1rem; }

        .logo { display:flex; align-items:center; gap:14px; }
        .logo-img{ width:64px; height:64px; display:block; border-radius:12px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }

        .nav-links{ display:flex; gap:20px; align-items:center; list-style:none; }
        .nav-links li{ list-style:none; }
        .nav-links a{ color:var(--white); text-decoration:none; font-weight:600; padding:8px 10px; border-radius:8px; transition: transform 160ms ease, color 160ms ease, box-shadow 160ms ease; }
        .nav-links a:hover{ transform: translateY(-3px) scale(1.02); color: var(--purple-light); box-shadow: 0 8px 22px rgba(122,64,200,0.12); }

        /* Marquee Section */
        .marquee-section {
            display:none;
        }

        .marquee-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, rgba(168, 110, 255, 0.08) 0%, transparent 20%, transparent 80%, rgba(168, 110, 255, 0.06) 100%);
            pointer-events: none;
        }

        marquee {
            display:none;
        }

        .work-marquee-wrapper{ position:relative; z-index:1050; pointer-events:auto; }
        .work-marquee{ width:100%; max-width:1200px; margin: 18px auto 0 auto; overflow:hidden; padding:12px; border-radius:18px; border:1px solid rgba(255,255,255,0.03); background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02)); box-shadow: 0 18px 50px rgba(0,0,0,0.6); display:flex; gap:16px; align-items:center; position:relative; z-index:5; }

        .marquee-track{ display:flex; gap:16px; align-items:center; transform: translateX(0); animation: marquee 22s linear infinite; }
        .work-marquee:hover .marquee-track{ animation-play-state: paused; }

        .marquee-track img{ width:300px; height:170px; object-fit:cover; border-radius:12px; box-shadow: 0 10px 30px rgba(0,0,0,0.6); transition: transform 280ms cubic-bezier(.2,.9,.2,1); }
        .marquee-track img:hover{ transform: scale(1.05); }

        @keyframes marquee{ 0% { transform: translateX(0%);} 100% { transform: translateX(-50%);} }

        .hero-content{ margin-top: 40px; }

        .hero {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 18px;
            position: relative;
            background: linear-gradient(135deg, var(--bg) 0%, #23171f 50%, var(--bg) 100%);
            overflow: hidden;
            padding-top: 40px; /* give room under navbar */
        }

        .lighting-effect {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            pointer-events: none;
        }

        .light {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            animation: pulse 8s infinite ease-in-out;
        }

        .light1 {
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(168, 110, 255, 0.32), transparent);
            top: -10%;
            left: -10%;
            animation-delay: 0s;
        }

        .light2 {
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(168, 110, 255, 0.18), transparent);
            bottom: -15%;
            right: -15%;
            animation-delay: 4s;
        }

        .light3 {
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, rgba(216, 180, 255, 0.16), transparent);
            top: 40%;
            right: 10%;
            animation-delay: 2s;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 0.5; }
            50% { transform: scale(1.2); opacity: 0.8; }
        }

        .floating-shapes {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .shape {
            position: absolute;
            border-radius: 50%;
            filter: blur(60px);
            animation: float 20s infinite ease-in-out;
        }

        .shape1 {
            width: 300px;
            height: 300px;
            background: rgba(168, 110, 255, 0.12);
            top: 10%;
            left: 10%;
            animation-delay: 0s;
        }

        .shape2 {
            width: 400px;
            height: 400px;
            background: rgba(168, 110, 255, 0.08);
            bottom: 10%;
            right: 10%;
            animation-delay: 5s;
        }

        .shape3 {
            width: 200px;
            height: 200px;
            background: rgba(216, 180, 255, 0.1);
            top: 50%;
            right: 20%;
            animation-delay: 10s;
        }

        @keyframes float {
            0%, 100% { transform: translate(0, 0) scale(1); }
            33% { transform: translate(50px, -50px) scale(1.1); }
            66% { transform: translate(-50px, 50px) scale(0.9); }
        }

        .hero-content {
            text-align: center;
            z-index: 1;
            animation: fadeInUp 1s ease;
            padding: 12px 18px;
            max-width: 920px;
        }

        .hero h1 {
            font-size: 3.2rem;
            margin: 0.35rem 0 0.6rem 0;
            color: var(--purple-dark);
            animation: slideInLeft 1s ease;
            filter: drop-shadow(0 0 18px rgba(101, 50, 178, 0.32));
            font-family: 'Poppins', sans-serif;
            font-weight: 700;
            line-height: 1.02;
        }

        .hero p {
            font-size: 1.05rem;
            color: var(--white);
            margin: 0 0 1.4rem 0;
            animation: slideInRight 1s ease 0.3s both;
            font-weight: 400;
            opacity: 0.95;
        }

        .cta-btn {
            padding: 1rem 2.5rem;
            background: var(--purple-dark);
            border: none;
            border-radius: 50px;
            color: #fff;
            font-family: 'Poppins', 'Inter', sans-serif;
            font-size: 1.1rem;
            cursor: pointer;
            transition: all 0.18s ease;
            box-shadow: 0 10px 30px rgba(24, 10, 40, 0.6);
            animation: fadeIn 1s ease 0.6s both;
        }

        .cta-btn:hover {
            transform: translateY(-3px);
            filter: brightness(1.06);
            box-shadow: 0 15px 40px rgba(122, 64, 200, 0.18);
        }

        section {
            padding: 5rem 5%;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        #contact {
            padding: 6.5rem 5%;
        }

        .container {
            max-width: 1200px;
            width: 100%;
        }

        h2 {
            font-size: 3rem;
            text-align: center;
            margin-bottom: 3rem;
            color: var(--white);
            font-family: 'Poppins', sans-serif;
            font-weight: 700;
        }

        .projects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }



        .project-card {
            background: rgba(168, 110, 255, 0.05);
            padding: 2rem;
            border-radius: 20px;
            border: 1px solid rgba(168, 110, 255, 0.2);
            transition: all 0.4s ease;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .project-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(168, 110, 255, 0.1), rgba(168, 110, 255, 0.06));
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .project-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 60px rgba(168, 110, 255, 0.3);
            border-color: var(--purple);
        }

        .project-card:hover::before {
            opacity: 1;
        }

        .project-card h3 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            color: var(--purple);
            position: relative;
        }

        .project-card p {
            color: #ccc;
            line-height: 1.6;
            position: relative;
        }

        .about-content {
            display: grid;
            gap: 2.5rem;
            align-items: center;
        }

        .about-row {
            display: grid;
            grid-template-columns: 1fr 420px;
            gap: 2rem;
            align-items: center;
        }

        .about-row-2 {
            grid-template-columns: 420px 1fr;
        }

        .about-row .about-text-left,
        .about-row .about-text-right {
            background: rgba(168, 110, 255, 0.03);
            padding: 2rem 2.5rem;
            border-radius: 14px;
            border: 1px solid rgba(168, 110, 255, 0.08);
            color: #e6e6e6;
            line-height: 1.75;
        }

        .lead-title {
            font-size: 2.6rem;
            margin-bottom: 1rem;
            color: var(--purple-dark);
            font-weight: 800;
            letter-spacing: -0.02em;
            line-height: 1.05;
            font-family: 'Poppins', sans-serif;
        }

        .about-row p {
            font-size: 1.05rem;
            color: #e6e6e6;
        }

        .about-image {
            background: linear-gradient(135deg, rgba(168, 110, 255, 0.06), rgba(168, 110, 255, 0.03));
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid rgba(168, 110, 255, 0.08);
            box-shadow: 0 0 40px rgba(168, 110, 255, 0.06);
            padding: 8px;
            overflow: hidden;
            width: 100%;
            max-width: 520px;
            aspect-ratio: 1 / 1;
        }

        .about-image img,
        .about-figure-left img,
        .about-figure-right img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 14px;
            display: block;
            box-shadow: 0 8px 30px rgba(0,0,0,0.6);
            border: 1px solid rgba(168,110,255,0.08);
        }

        .circle-photo {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
            display: block;
            box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 18px rgba(168,110,255,0.06) inset;
            border: 6px solid rgba(255,255,255,0.03);
        }

        .circle-photo.large { max-width: 320px; max-height: 320px; width: 100%; height: 100%; }
        .circle-photo.medium { max-width: 220px; max-height: 220px; width: 100%; height: 100%; }

        .about-figure-right,
        .about-figure-left {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .about-figure-left, .about-figure-right {
            width: 100%;
            max-width: 420px;
        }

        .about-row-2 .lead-title {
            color: var(--purple-dark);
        }

        @media (max-width: 992px) {
            .about-row { grid-template-columns: 1fr 340px; }
            .lead-title { font-size: 2.2rem; }
            .circle-photo.large { width: 260px; height: 260px; }
        }

        @media (max-width: 768px) {
            .about-row { grid-template-columns: 1fr; }
            .lead-title { font-size: 1.8rem; }
            .about-row .about-text-left,
            .about-row .about-text-right { padding: 1.25rem; }
            .circle-photo.large { width: 220px; height: 220px; }
            .circle-photo.medium { width: 180px; height: 180px; }
        }

        @media (max-width: 480px) {
            .lead-title { font-size: 1.5rem; }
            .about-row { gap: 1rem; }
            .circle-photo.large { width: 180px; height: 180px; }
        }

.contact-box {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 30px;
    padding: 40px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(6px);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

        .form-group label {
    font-size: 14px;
    margin-bottom: 3px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 14px;
    border-radius: 10px;
    outline: none;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: white;
}

.form-group textarea {
    min-height: 160px;
    resize: vertical;
}

    .submit-btn {
    padding: 14px 18px;
    border: none;
    background: var(--purple-dark);
    color: white;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.12s;
}

.submit-btn:hover {
    filter: brightness(1.06);
}

.social-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.social-card {
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    padding: 18px;
    text-decoration: none;
    color: white;
    background: rgba(255,255,255,0.04);
    transition: 0.25s;
}

.social-card:hover {
    background: rgba(255,255,255,0.08);
    transform: translateY(-4px);
}


.icon {
    width: 35px;
    height: 35px;
    margin-bottom: 10px;
    border-radius: 50%;
    background-size: cover;
}

.instagram { background-image: url('https://cdn-icons-png.flaticon.com/512/2111/2111463.png'); }
.linkedin { background-image: url('https://cdn-icons-png.flaticon.com/512/3536/3536505.png'); }
.github { background-image: url('https://cdn-icons-png.flaticon.com/512/733/733553.png'); }
.discord { background-image: url('https://cdn-icons-png.flaticon.com/512/5968/5968756.png'); }

@media (max-width: 768px) {
    .contact-box {
        grid-template-columns: 1fr;
    }

    .social-card-grid {
        grid-template-columns: 1fr 1fr;
    }
}

        @media (max-width: 500px) {
    .social-card-grid {
        grid-template-columns: 1fr;
    }
}

        footer {
            background: rgba(10, 10, 15, 0.9);
            padding: 2rem 5%;
            text-align: center;
            border-top: 1px solid rgba(168, 110, 255, 0.2);
        }

        footer p {
            color: #ccc;
            font-size: 0.9rem;
        }

        footer .copyright {
            margin-top: 1rem;
            color: var(--purple);
        }

        @keyframes slideDown {
            from {
                transform: translateY(-100%);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        @keyframes fadeInUp {
            from {
                transform: translateY(50px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        @keyframes slideInLeft {
            from {
                transform: translateX(-100px);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        @keyframes slideInRight {
            from {
                transform: translateX(100px);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease;
        }

        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

        @media (max-width: 768px) {
            .nav-links {
                gap: 1rem;
                font-size: 0.9rem;
            }

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

            .hero p {
                font-size: 1.2rem;
            }

            .about-content,
            .contact-content {
                grid-template-columns: 1fr;
            }

            h2 {
                font-size: 5rem;
            }

            marquee {
                font-size: 1.5rem;
            }
        }

        .project-tools-pill{
            margin: 1.8rem auto 0 auto;
            display: flex;
            gap: 12px;
            align-items: center;
            justify-content: center;
            padding: 10px 18px;
            border-radius: 999px;
            background: rgba(0,0,0,0.28);
            border: 1px solid rgba(255,255,255,0.04);
            box-shadow: 0 8px 30px rgba(0,0,0,0.6), 0 2px 0 rgba(255,255,255,0.02) inset;
            max-width: 100%;
            overflow: hidden;
        }

        .project-tool{
            width: 44px;
            height: 44px;
            flex: 0 0 auto;
            display: grid;
            place-items: center;
            border-radius: 10px;
            background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
            padding: 6px;
            transition: transform 180ms ease, box-shadow 180ms ease;
            border: 1px solid rgba(255,255,255,0.03);
        }

        .project-tool img{
            width: 24px;
            height: 24px;
            object-fit: contain;
            display:block;
            filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
        }

        .project-tool:hover{
            transform: translateY(-4px) scale(1.06);
            box-shadow: 0 10px 30px rgba(0,0,0,0.6);
        }

        /* Light-theme specific overrides to ensure good contrast for elements that used hard-coded translucent whites */
        body.light-theme{
            --bg: #ffffff;
            --text: #111827;
            --white: #111827;
            --muted: rgba(17,24,39,0.04);
            --card: rgba(246,249,252,0.85);
            --surface-border: rgba(17,24,39,0.06);
        }

        body.light-theme .project-card,
        body.light-theme .contact-box,
        body.light-theme .social-card,
        body.light-theme .about-row .about-text-left,
        body.light-theme .about-row .about-text-right,
        body.light-theme .work-marquee,
        body.light-theme .project-tools-pill,
        body.light-theme .content-card .card-inner,
        body.light-theme .media-inner {
            background: var(--card);
            border-color: var(--surface-border);
            color: var(--text);
            box-shadow: 0 8px 30px rgba(2,6,23,0.06);
        }

        body.light-theme .form-group input,
        body.light-theme .form-group textarea,
        body.light-theme .me-text-input,
        body.light-theme .project-tool {
            background: rgba(17,24,39,0.03);
            color: var(--text);
            border: 1px solid rgba(17,24,39,0.06);
        }

        body.light-theme .me-text-input::placeholder,
        body.light-theme ::placeholder {
            color: rgba(17,24,39,0.5);
        }

        body.light-theme footer {
            background: #f8fafc;
            color: var(--text);
            border-top-color: rgba(17,24,39,0.06);
        }

        /* Ensure icons and text everywhere inherit the readable color on light theme */
        body.light-theme .nav-links a,
        body.light-theme h2,
        body.light-theme h1,
        body.light-theme p,
        body.light-theme label { color: var(--text); }


        @media (max-width: 700px){
            .project-tools-pill{ gap:10px; padding:8px 12px; }
            .project-tool{ width:40px; height:40px; }
            .project-tool img{ width:20px; height:20px; }
        }

        @media (max-width: 980px){
            .marquee-track img{ width:240px; height:140px; }
            .work-marquee{ padding:10px; }
            .hero h1{ font-size:2.6rem; }
            .hero p{ font-size:1rem; }
        }

        @media (max-width: 520px){
            .marquee-track img{ width:180px; height:110px; }
            .hero h1{ font-size:2rem; }
            .hero p{ font-size:0.92rem; }
            .work-marquee{ margin: 8px auto 0 auto; }
        }

        /* Light theme variables applied on body.light-theme */
        body.light-theme{ --bg: #ffffff; --text: #111827; --white: #111827; --muted: rgba(17,24,39,0.04); --card: rgba(10,8,20,0.03); }

        /* Light-mode tweaks for the Home / hero area to look modern and soft */
        body.light-theme .hero {
            background: linear-gradient(180deg, #f7fafc 0%, #f3f6fb 60%);
        }

        body.light-theme .nav-inner,
        body.light-theme nav {
            background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.6));
            box-shadow: 0 8px 20px rgba(16,24,40,0.06);
            border: 1px solid rgba(17,24,39,0.04);
        }

        body.light-theme .lighting-effect .light1,
        body.light-theme .lighting-effect .light2,
        body.light-theme .lighting-effect .light3 {
            filter: blur(48px);
            opacity: 0.7;
        }

        body.light-theme .lighting-effect .light1 { background: radial-gradient(circle, rgba(255,201,140,0.28), transparent); }
        body.light-theme .lighting-effect .light2 { background: radial-gradient(circle, rgba(255,182,193,0.18), transparent); }
        body.light-theme .lighting-effect .light3 { background: radial-gradient(circle, rgba(200,230,255,0.14), transparent); }

        body.light-theme .floating-shapes .shape { filter: blur(40px); opacity: 0.85; }
        body.light-theme .floating-shapes .shape1 { background: rgba(235,201,255,0.12); }
        body.light-theme .floating-shapes .shape2 { background: rgba(220,240,255,0.08); }
        body.light-theme .floating-shapes .shape3 { background: rgba(255,230,240,0.07); }

        body.light-theme .hero h1 {
            color: #0f1724;
            filter: none;
            text-shadow: 0 1px 0 rgba(255,255,255,0.6);
        }

        body.light-theme .hero p { color: rgba(17,24,39,0.78); }

        body.light-theme .cta-btn {
            background: linear-gradient(180deg, var(--purple), var(--purple-dark));
            color: #fff;
            box-shadow: 0 10px 30px rgba(122,64,200,0.09);
        }

        body.light-theme .work-marquee,
        body.light-theme .marquee-track img {
            background: transparent;
            box-shadow: 0 6px 18px rgba(16,24,40,0.06);
            border-color: rgba(17,24,39,0.04);
        }

        /* Reduce 'glow' and harsh dark shadows in light mode for a softer, modern look */
        body.light-theme .logo-img,
        body.light-theme .about-image img,
        body.light-theme .circle-photo { box-shadow: 0 8px 26px rgba(16,24,40,0.06); }

        .nav-actions{ display:flex; align-items:center; gap:8px; }
        .icon-btn{ background: transparent; border: none; color: var(--white); font-size:18px; padding:8px; border-radius:10px; cursor:pointer; transition: transform .16s ease, background .16s ease; }
        .icon-btn:hover{ transform: scale(1.06); background: rgba(255,255,255,0.03); }

        .layout-two-col .layout-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items:center; }
        .video-container{ background: linear-gradient(135deg, rgba(168,110,255,0.06), rgba(255,255,255,0.02)); padding: 18px; border-radius: 20px; box-shadow: 0 18px 50px rgba(8,6,12,0.06); border:1px solid rgba(168,110,255,0.06); }
        .rounded-video{ width:100%; height:auto; display:block; border-radius:18px; box-shadow: var(--shadow-1); max-height:520px; object-fit:cover; }
        .content-card .card-inner{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:22px; border-radius:18px; box-shadow: 0 12px 36px rgba(16,12,30,0.08); border:1px solid rgba(255,255,255,0.03); }
        .content-card h3{ color:var(--purple-dark); margin-bottom:0.6rem; }
        .muted{ color: rgba(255,255,255,0.7); font-size:0.95rem; }
        .ghost-btn{ padding:10px 16px; border-radius:10px; background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--white); margin-left:8px; }
        .card-actions{ margin-top:18px; display:flex; gap:8px; }

        /* Media showcase */
        .media-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:20px; align-items:start; }
        .media-card h4{ margin-bottom:12px; color:var(--purple); }
        .media-inner{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02)); padding:14px; border-radius:16px; border:1px solid rgba(255,255,255,0.04); box-shadow: 0 12px 36px rgba(0,0,0,0.12); }
        .ui-video{ width:100%; height:100%; display:block; border-radius:12px; object-fit:cover; }
        .ui-canvas{ width:100%; height:240px; display:block; border-radius:12px; background: linear-gradient(135deg, rgba(250,250,255,0.02), rgba(240,235,255,0.02)); }

        .floating-menu{ position:fixed; right:20px; top:50%; transform: translateY(-50%); display:flex; flex-direction:column; gap:12px; z-index:2000; }
        .float-btn{ width:56px; height:56px; border-radius:999px; display:grid; place-items:center; background: linear-gradient(180deg, var(--purple-light), var(--purple)); color:#fff; border:none; cursor:pointer; box-shadow: 0 14px 40px rgba(122,64,200,0.18); transition: transform .18s ease, box-shadow .18s ease; font-size:20px; }
        .float-btn:hover{ transform: scale(1.08); box-shadow: 0 20px 50px rgba(122,64,200,0.24); }

        .hover-swap{ position:relative; display:block; overflow:hidden; border-radius:12px; }
        .hover-swap img, .hover-swap video{ width:100%; height:100%; object-fit:cover; display:block; transition: opacity .36s ease; }
        .hover-swap video{ position:absolute; inset:0; opacity:0; pointer-events:none; }
        .hover-swap.playing video{ opacity:1; pointer-events:auto; }

        @media (max-width: 900px){
            .layout-two-col .layout-grid{ grid-template-columns: 1fr; }
            .floating-menu{ right:12px; gap:10px; }
            .ui-canvas{ height:200px; }
        }

        *{ transition: background-color .28s ease, color .28s ease, border-color .28s ease; }

        body.light-theme .icon-btn{ color: var(--text); }

        .project-mini-media .mini-media-row{ display:flex; gap:12px; align-items:center; margin-top:12px; }
        .mini-video-wrap, .mini-canvas-wrap{ flex:1 1 0; min-width:0; }
        .mini-video{ width:100%; height:160px; object-fit:cover; border-radius:10px; display:block; box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
        .mini-canvas{ width:100%; height:160px; display:block; border-radius:10px; background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(240,235,255,0.02)); box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
        .project-mini-media .muted{ color: rgba(255,255,255,0.75); }

        @media (max-width:800px){
            .project-mini-media .mini-media-row{ flex-direction:column; }
            .mini-video, .mini-canvas{ height:180px; }
        }

        .float-btn#fm-theme{ position:relative; overflow:visible; }
        .burst-item{ position:absolute; width:12px; height:12px; border-radius:50%; pointer-events:none; transform: scale(0); opacity:0.9; }
        @keyframes burstMove {
            0%{ transform: scale(0) translate(0,0); opacity:1; }
            60%{ transform: scale(1.1) translate(var(--tx), var(--ty)); opacity:0.85; }
            100%{ transform: scale(0.4) translate(calc(var(--tx)*1.2), calc(var(--ty)*1.2)); opacity:0; }
        }
        .burst-animate{ animation: burstMove 700ms cubic-bezier(.2,.8,.2,1) forwards; }

        .float-btn#fm-theme:hover{ animation: paint-pulse 900ms ease; }
        @keyframes paint-pulse { 0%{ transform: scale(1);} 50%{ transform: scale(1.06);} 100%{ transform: scale(1);} }

        .about-media-inner{ display:flex; gap:12px; align-items:center; }
        .about-video-wrap, .about-canvas-wrap{ flex:1 1 0; min-width:0; }
        .me-row video.rounded-video{ width:100%; height:auto; max-height:480px; }
        .me-canvas{ height:260px; }

        @media (max-width:900px){
            .about-media-inner{ flex-direction:column; }
            .me-row{ flex-direction:column; }
        }

        .mini-canvas{ pointer-events: none; }

        /* input for me canvas text */
        .me-text-input{ width:100%; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); color:var(--white); }
        .me-text-input::placeholder{ color: rgba(255,255,255,0.5); }


        /* Project card icon links */
        .project-card .project-links{ margin-top:12px; display:flex; gap:10px; align-items:center; }
        .project-card .project-links a{ display:inline-block; }
        .project-card .project-links img{ width:28px; height:28px; object-fit:contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45)); transition: transform .18s ease, filter .18s ease; }
        .project-card .project-links a:hover img{ transform: translateY(-3px) scale(1.06); filter: brightness(1.08) saturate(1.1); }

        /* Modern rounded icon buttons */
        .project-card .project-links .social-icon{ display:inline-grid; place-items:center; width:40px; height:40px; border-radius:10px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.04); box-shadow: 0 6px 20px rgba(0,0,0,0.35); padding:6px; }
        .project-card .project-links .social-icon img{ width:20px; height:20px; }