:root{
      /* Light, modern tech palette based on best practices for technology websites.
         Professional tones like blue, white and gray convey trust and innovation, while
         vivid accents of cyan and violet add energy without overwhelming【785560565454268†L849-L853】.
         Using 3‑5 colors keeps the design cohesive and readable【785560565454268†L857-L860】. */
      /* Charcoal & Cream palette: near‑monochrome charcoal with golden accents */
      --bg:#f9f5ef;          /* warm cream backdrop */
      --panel:#ffffff;       /* white panels */
      --panel-2:#f4eee8;     /* off‑white secondary panels */
      --text:#2a2b2a;        /* charcoal for primary text */
      --muted:#575753;       /* mid‑grey for secondary copy */
      --cyan:#5a8a72;        /* forest green primary accent */
      --blue:#72a689;        /* muted teal secondary accent */
      --violet:#d0a96f;      /* soft amber for highlights */
      --green:#588157;       /* dark green for success indicators */
      --amber:#d4a373;       /* warm gold used sparingly */
      --danger:#c65757;      /* brick red for error states */
      --line:rgba(0,0,0,.06);/* subtle border for cream theme */
      --glass:rgba(255,255,255,.78);/* semi‑opaque white glass panels */
      --shadow:0 12px 44px rgba(0,0,0,.08);/* subtle deeper shadows */
      --radius:26px;
      --max:1180px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      min-height:100vh;
      font-family:'Inter','Space Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:
        /* Subtle radial highlights using accent colours drawn from the light tech palette. */
        radial-gradient(circle at 12% 8%, rgba(90,138,114,.15), transparent 34%), /* forest highlight */
        radial-gradient(circle at 82% 18%, rgba(208,169,111,.14), transparent 32%), /* amber highlight */
        radial-gradient(circle at 50% 92%, rgba(88,129,87,.12), transparent 38%), /* dark green undertone */
        var(--bg);
      color:var(--text);
      overflow-x:hidden;
      cursor:none;
    }

    body.loaded .loader{opacity:0; visibility:hidden; pointer-events:none}
    body.no-cursor{cursor:auto}
    body.no-cursor .cursor-dot, body.no-cursor .cursor-ring{display:none}
    a, button, input, textarea{font:inherit}
    a{color:inherit;text-decoration:none}
    button{border:0;cursor:none}
    img{max-width:100%;display:block}

    .loader{
      position:fixed; inset:0; z-index:9999;
      display:grid; place-items:center;
      background:linear-gradient(135deg,#f6f1e7,#faf6ef 54%,#f4ece1);
      transition:opacity .8s ease, visibility .8s ease;
    }
    .loader-card{text-align:center; position:relative}
    .loader-radar{
      width:116px;height:116px;border-radius:50%; margin:0 auto 22px;
      border:1px solid rgba(90,138,114,.25);
      position:relative; overflow:hidden; box-shadow:0 0 46px rgba(90,138,114,.28);
    }
    .loader-radar:before{
      content:""; position:absolute; inset:50% 0 0 50%;
      background:linear-gradient(45deg, rgba(90,138,114,.55), transparent 54%);
      transform-origin:0 0; animation:sweep 1.1s linear infinite;
    }
    .loader-radar:after{
      /* Remove initials from loader – use a simple glow instead of "MA" */
      content:""; position:absolute; inset:0; display:grid; place-items:center;
      font-weight:900; letter-spacing:.1em; color:var(--cyan);
      background:radial-gradient(circle, rgba(90,138,114,.12), transparent 60%);
    }
    .loader-text{letter-spacing:.28em; text-transform:uppercase; color:var(--muted); font-size:.75rem}

    .cursor-dot,.cursor-ring{position:fixed; top:0; left:0; pointer-events:none; z-index:9998; transform:translate(-50%,-50%)}
    .cursor-dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 18px var(--cyan)}
.cursor-ring{width:42px;height:42px;border-radius:50%;border:1px solid rgba(90,138,114,.6);box-shadow:0 0 38px rgba(90,138,114,.18);transition:width .25s,height .25s,border-color .25s}
.cursor-ring.active{width:68px;height:68px;border-color:rgba(208,169,111,.8)}

    #particles{position:fixed; inset:0; width:100%; height:100%; z-index:-3}
    .noise{position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
    .grid-bg{position:fixed; inset:0; pointer-events:none; z-index:-2; background:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size:72px 72px; mask-image:linear-gradient(to bottom, black, transparent 80%)}

    .container{width:min(var(--max), calc(100% - 42px)); margin-inline:auto}
    .section{padding:110px 0; position:relative}
    .section-title{font-size:clamp(2rem,4vw,4.2rem); line-height:1; margin:0 0 16px; letter-spacing:-.055em}
    .section-kicker{font-size:.78rem; color:var(--cyan); text-transform:uppercase; letter-spacing:.22em; margin:0 0 14px; font-weight:800}
    .section-lead{max-width:760px; color:var(--muted); line-height:1.8; margin:0 0 42px}

    header{position:fixed; inset:16px 0 auto; z-index:1000; pointer-events:none}
    .nav{
      pointer-events:auto; width:min(var(--max), calc(100% - 34px)); margin:auto;
      display:flex; align-items:center; justify-content:space-between; gap:20px;
      padding:12px 14px; border:1px solid var(--line); border-radius:999px;
      /* Lighten navigation background and border for better contrast on cream themes */
      /* Use a solid panel for stronger contrast against the hero background */
      background:var(--panel);
      backdrop-filter:blur(14px);
      box-shadow:0 12px 32px rgba(0,0,0,.08);
    }
    .brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:-.03em}
    .brand-mark{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--cyan),var(--violet)); color:#030a17; box-shadow:0 0 34px rgba(0,188,212,.36)}
    .nav-links{display:flex;align-items:center;gap:4px}
    .nav-links a{padding:10px 13px;color:var(--muted);border-radius:999px;font-size:.92rem;transition:.25s ease}
    .nav-links a:hover{color:var(--text);background:rgba(255,255,255,.08)}
    .menu-btn{display:none;background:var(--glass);color:var(--text);padding:10px 14px;border-radius:999px;border:1px solid var(--line)}

    .hero{min-height:100vh; display:grid; align-items:center; padding:120px 0 80px; position:relative; overflow:hidden}
    .hero-grid{display:grid;grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
    .eyebrow{display:inline-flex;gap:10px;align-items:center;border:1px solid var(--line);background:rgba(255,255,255,.06);padding:9px 13px;border-radius:999px;color:var(--muted);font-weight:700;font-size:.85rem; margin-bottom:22px}
    .eyebrow .live{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 20px var(--green);animation:pulse 1.5s infinite}
    /* Reduce the hero name size further for a more balanced layout.  The name should not dominate the hero section */
    h1{
      /* On large screens the name tops out around 5rem rather than 5.5rem, and on small screens we bump down the minimum as well */
      font-size:clamp(2.3rem,5.8vw,5rem);
      line-height:.9;
      letter-spacing:-.05em;
      margin:0 0 18px;
      font-family:'Fraunces','Inter',serif;
      font-family:'Fraunces','Inter',serif;
      font-weight:700;
    }

    /* Use Fraunces specifically for the Mrunal Marihal hero heading */
    .hero-name{
      font-family:'Fraunces','Inter',serif!important;
      font-weight:800;
      font-variation-settings:'opsz' 72;
    }

    .shimmer{
      background:linear-gradient(90deg,#fff,var(--cyan),var(--violet),#fff);
      background-size:260% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
      animation:shimmer 4.5s linear infinite;
    }
    .type-line{font-size:clamp(1.2rem,2.4vw,2.05rem); color:#5a8a72; min-height:1.35em; font-weight:800; letter-spacing:-.035em; margin:0 0 20px}
    .caret{display:inline-block;width:3px;height:1em;background:var(--cyan);margin-left:5px;vertical-align:-.12em;animation:blink .8s infinite}
    .hero-copy{font-size:1.08rem;line-height:1.85;color:var(--muted);max-width:700px;margin:0 0 32px}
    .hero-actions{display:flex;gap:15px;flex-wrap:wrap;align-items:center}
    .btn{display:inline-flex;gap:10px;align-items:center;justify-content:center;padding:14px 20px;border-radius:999px;font-weight:900;transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; position:relative; overflow:hidden}
    .btn:hover{transform:translateY(-4px)}
    .btn-primary{background:linear-gradient(135deg,var(--cyan),var(--blue),var(--violet)); color:#0d1b2b; box-shadow:0 0 0 0 rgba(0,188,212,.45); animation:glowPulse 2.2s infinite}
    .btn-ghost{border:1px solid var(--line); color:var(--text); background:rgba(255,255,255,.06)}

    .hero-visual{position:relative; min-height:560px; perspective:1200px}
    .avatar-stack{position:absolute; right:32px; top:20px; width:150px; height:150px; display:grid; place-items:center; z-index:4}
    .avatar-stack .ring{position:absolute; border:1px solid rgba(0,188,212,.34); border-radius:50%; animation:ripple 2.4s linear infinite}
    .avatar-stack .r1{inset:22px; animation-delay:0s}.avatar-stack .r2{inset:8px; animation-delay:.6s}.avatar-stack .r3{inset:-8px; animation-delay:1.2s}
    .avatar{width:88px;height:88px;border-radius:26px;display:grid;place-items:center;font-size:1.8rem;font-weight:1000;letter-spacing:.04em;background:linear-gradient(135deg,rgba(0,188,212,.95),rgba(164,74,254,.95));color:#0d1b2b;box-shadow:0 0 44px rgba(0,188,212,.36);animation:avatarPulse 2s ease-in-out infinite}
    .float-card{
      position:absolute; left:0; right:42px; top:118px; min-height:360px;
      border:1px solid var(--line); border-radius:36px; background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.035));
      backdrop-filter:blur(24px); box-shadow:var(--shadow); transform-style:preserve-3d; animation:floatRotate 8s ease-in-out infinite;
      padding:28px; overflow:hidden;
    }
    .float-card:before{content:"";position:absolute;inset:-2px;background:conic-gradient(from 90deg, transparent, rgba(0,188,212,.45), transparent, rgba(164,74,254,.4), transparent); animation:spin 8s linear infinite; opacity:.55}
    .float-card-inner{position:relative; z-index:1; background:rgba(4,8,22,.72); border:1px solid var(--line); border-radius:28px; height:100%; padding:24px; min-height:304px}
    .radar-orbit{width:230px;height:230px;border-radius:50%;border:1px solid rgba(0,188,212,.32);margin:8px auto 24px; position:relative; background:radial-gradient(circle, rgba(0,188,212,.12), transparent 62%)}
    .radar-orbit:before{content:"";position:absolute;inset:50% 0 0 50%;background:linear-gradient(45deg, rgba(0,188,212,.65), transparent 60%);transform-origin:0 0;animation:sweep 2.4s linear infinite}
    .radar-orbit .dot{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 20px var(--green)}
    .dot.d1{left:60px;top:88px}.dot.d2{right:70px;top:62px}.dot.d3{right:92px;bottom:58px}
    .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.stat{border:1px solid var(--line);border-radius:18px;padding:16px;background:rgba(255,255,255,.055)}.stat strong{display:block;font-size:1.55rem}.stat span{color:var(--muted);font-size:.78rem}

    .marquee{border-block:1px solid var(--line); background:rgba(255,255,255,.035); overflow:hidden; padding:16px 0}
    .marquee-track{display:flex;gap:18px; width:max-content; animation:marquee 28s linear infinite}
    .marquee span{display:inline-flex;align-items:center;padding:10px 18px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.055);color:#dfe9ff;font-weight:800;white-space:nowrap}

    .about-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:40px; align-items:start}
    .bio-card,.timeline,.skill-card,.project-card,.exp-item,.contact-card{border:1px solid var(--line);background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.035));backdrop-filter:blur(18px);box-shadow:0 20px 70px rgba(0,0,0,.24)}
    .bio-card{border-radius:var(--radius);padding:30px;position:sticky;top:110px}.bio-card p{line-height:1.82;color:var(--muted)}
    .badge-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.badge{border:1px solid var(--line);border-radius:999px;padding:8px 12px;color:#d0f6fb;background:rgba(0,188,212,.06);font-weight:800;font-size:.82rem}
    .timeline{border-radius:var(--radius);padding:26px}.timeline-item{display:grid;grid-template-columns:130px 1fr;gap:20px;position:relative;padding:0 0 30px}.timeline-item:not(:last-child):before{content:"";position:absolute;left:144px;top:24px;bottom:4px;width:1px;background:linear-gradient(var(--cyan),transparent)}.timeline-dot{width:14px;height:14px;border-radius:50%;background:var(--cyan);box-shadow:0 0 20px var(--cyan);position:absolute;left:138px;top:5px}.time{color:var(--cyan);font-weight:900;font-size:.88rem}.timeline h3{margin:0 0 8px}.timeline p{margin:0;color:var(--muted);line-height:1.7}

    .skills-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.skill-card{border-radius:24px;padding:22px;position:relative;overflow:hidden;transition:.25s ease}.skill-card:hover{transform:translateY(-8px);border-color:rgba(0,188,212,.5);box-shadow:0 28px 90px rgba(0,188,212,.1)}.skill-head{display:flex;align-items:center;justify-content:space-between;gap:14px}.skill-icon{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(0,188,212,.22),rgba(164,74,254,.2));font-weight:1000}.skill-card h3{margin:0;font-size:1.05rem}.skill-card p{color:var(--muted);font-size:.9rem;line-height:1.6;min-height:46px}.bar{height:9px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}.bar span{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--cyan),var(--violet));transition:width 1.2s cubic-bezier(.2,.8,.2,1)}.tooltip{position:absolute;left:18px;right:18px;bottom:18px;padding:11px 13px;border:1px solid rgba(0,188,212,.28);border-radius:16px;background:rgba(13,27,43,.93);color:#e2f4f7;opacity:0;transform:translateY(12px);transition:.25s ease;font-size:.82rem;box-shadow:0 16px 40px rgba(0,0,0,.38)}.skill-card:hover .tooltip{opacity:1;transform:translateY(0)}

    .bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:214px;gap:18px}.project-card{border-radius:26px;padding:24px;position:relative;overflow:hidden;transition:.3s ease;display:flex;flex-direction:column;justify-content:space-between}.project-card:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:4px;background:linear-gradient(90deg,transparent,var(--cyan),var(--violet),transparent);transition:left .65s ease}.project-card:hover:before{left:100%}.project-card:hover{transform:translateY(-8px) scale(1.01);border-color:rgba(182,92,255,.55)}.project-card.large{grid-column:span 2;grid-row:span 2}.project-card.wide{grid-column:span 2}.project-card h3{margin:0 0 10px;font-size:1.35rem}.project-card p{color:var(--muted);line-height:1.65;margin:0}.stack{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.stack span{font-size:.78rem;font-weight:900;color:#06101c;background:linear-gradient(135deg,var(--cyan),#fff);padding:7px 10px;border-radius:999px}.project-links{display:flex;gap:10px;margin-top:18px}.project-links a{border:1px solid var(--line);padding:9px 12px;border-radius:999px;color:#dfe9ff;font-weight:800;font-size:.82rem;background:rgba(255,255,255,.055)}

    .experience-list{display:grid;gap:16px}.exp-item{border-radius:24px;overflow:hidden}.exp-button{width:100%;display:grid;grid-template-columns:64px 1fr auto;gap:16px;align-items:center;background:transparent;color:var(--text);padding:20px;text-align:left}.logo{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,var(--cyan),var(--violet));color:#030510;font-weight:1000}.exp-button h3{margin:0 0 4px}.exp-button p{margin:0;color:var(--muted)}.chev{font-size:1.5rem;transition:.25s ease}.exp-item.open .chev{transform:rotate(45deg)}.exp-content{max-height:0;overflow:hidden;transition:max-height .45s ease}.exp-content ul{margin:0;padding:0 24px 24px 104px;color:var(--muted);line-height:1.8}.exp-content li{margin-bottom:9px}

    .contact-wrap{display:grid;grid-template-columns:1fr .78fr;gap:28px;align-items:stretch}.contact-card{border-radius:30px;padding:28px;position:relative;overflow:hidden}.contact-ripples{position:absolute;right:-40px;top:-40px;width:220px;height:220px;pointer-events:none}.contact-ripples span{position:absolute;inset:40px;border:1px solid rgba(0,188,212,.35);border-radius:50%;animation:ripple 2.8s linear infinite}.contact-ripples span:nth-child(2){animation-delay:.8s}.contact-ripples span:nth-child(3){animation-delay:1.6s}.form-grid{display:grid;gap:14px}.field{display:grid;gap:8px}.field label{font-size:.82rem;font-weight:900;color:#d0f6fb}.field input,.field textarea{width:100%;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.06);color:var(--text);padding:14px 15px;outline:none;transition:.25s ease}.field input:focus,.field textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(0,188,212,.08)}textarea{min-height:140px;resize:vertical}.socials{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}.social{width:54px;height:54px;border-radius:18px;border:1px solid var(--line);display:grid;place-items:center;background:rgba(255,255,255,.06);font-weight:1000;animation:floatIcon 3s ease-in-out infinite}.social:nth-child(2){animation-delay:.35s}.social:nth-child(3){animation-delay:.7s}.contact-details{display:grid;gap:14px;margin-top:24px}.contact-details a,.contact-details span{color:var(--muted);line-height:1.6}

    footer{padding:38px 0;border-top:1px solid var(--line);color:var(--muted);text-align:center}

    .reveal{opacity:0;transform:translateY(34px);transition:opacity .8s ease, transform .8s ease}.reveal-left{opacity:0;transform:translateX(-42px);transition:opacity .8s ease, transform .8s ease}.reveal-right{opacity:0;transform:translateX(42px);transition:opacity .8s ease, transform .8s ease}.visible{opacity:1;transform:translate(0,0)}

    @keyframes shimmer{to{background-position:260% 0}}
    @keyframes blink{50%{opacity:0}}
    @keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.7);opacity:.45}}
    @keyframes glowPulse{0%,100%{box-shadow:0 0 0 0 rgba(0,188,212,.4),0 0 36px rgba(0,188,212,.24)}50%{box-shadow:0 0 0 12px rgba(0,188,212,0),0 0 54px rgba(164,74,254,.34)}}
    @keyframes ripple{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.38);opacity:0}}
    @keyframes avatarPulse{0%,100%{transform:scale(1);filter:saturate(1)}50%{transform:scale(1.05);filter:saturate(1.3)}}
    @keyframes floatRotate{0%,100%{transform:rotateX(8deg) rotateY(-10deg) translateY(0)}50%{transform:rotateX(-2deg) rotateY(9deg) translateY(-22px)}}
    @keyframes spin{to{transform:rotate(360deg)}}
    @keyframes sweep{to{transform:rotate(360deg)}}
    @keyframes marquee{to{transform:translateX(-50%)}}
    @keyframes floatIcon{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

    @media (max-width:980px){
      body{cursor:auto}.cursor-dot,.cursor-ring{display:none}
      .hero-grid,.about-grid,.contact-wrap{grid-template-columns:1fr}.hero-visual{min-height:500px}.skills-grid{grid-template-columns:repeat(2,1fr)}.bento{grid-template-columns:repeat(2,1fr)}.project-card.large,.project-card.wide{grid-column:span 2}.bio-card{position:relative;top:auto}
      /* Lighten the mobile navigation dropdown for better readability */
      .nav-links{display:none;position:absolute;left:16px;right:16px;top:72px;flex-direction:column;background:var(--glass);border:1px solid var(--line);border-radius:24px;padding:12px}
      .nav-links.show{display:flex}
      .nav-links a{width:100%;text-align:center}
      .menu-btn{display:block}

    /* === User requested adjustments for improved readability and spacing === */
    /* Hide decorative backgrounds such as particle network, grid lines and noise texture */
    #particles,.grid-bg,.noise{display:none!important}
    /* Remove the animated typewriter line entirely */
    .type-line{display:none!important}
    /* Darken the floating stats card for contrast against the lighter cream background */
    .float-card{
      /* Use a semi‑transparent dark card so inner content such as stats remains legible */
      background:linear-gradient(135deg,rgba(13,27,43,.35),rgba(13,27,43,.25));
      border:1px solid rgba(0,0,0,.08);
      box-shadow:0 20px 60px rgba(0,0,0,.16);
    }
    .float-card:before{opacity:.2}
.float-card-inner{background:rgba(13,27,43,.5)}
    .stats .stat{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.stat strong{color:#ffffff!important}
.stat span{color:rgba(255,255,255,.8)!important}

    /* Removed invert filter on stat numbers – colours now explicitly set */
    /* Provide spacing between timeline dots and their headings */
    .timeline-item > div:nth-child(3){padding-left:12px}
    /* Provide spacing between experience and education titles and their preceding icons/dots */
    .exp-button span:nth-of-type(2) h3{margin-left:8px}
    /* Ensure M.Tech abbreviation fits within its logo badge */
    /* Enlarge the experience logo pill so longer abbreviations like "M.Tech" fit comfortably */
    .exp-button .logo{min-width:72px;font-size:.75rem}
    /* Lighten tooltips and progress bars to improve legibility */
    .tooltip{background:rgba(255,255,255,.94);color:var(--text);border-color:rgba(0,0,0,.08)}
    /* Display hero name with solid text colour rather than shimmer to ensure legibility */
    .shimmer{background:none!important;color:var(--text)!important;-webkit-background-clip:initial!important;background-clip:initial!important}

    /* Additional overrides for selected charcoal & cream theme to enhance readability on dark boxes */
    .skill-card{
      /* Use light panel backgrounds for skills to avoid dark colour behind text */
      background:var(--panel) !important;
      border:1px solid var(--line) !important;
    }
    .skill-card:hover{
      box-shadow:0 28px 90px rgba(0,0,0,.1) !important;
    }
    .skill-card .bar{
      background:rgba(0,0,0,.08) !important;
    }
    .tooltip{
      background:var(--panel) !important;
      color:var(--text) !important;
      border-color:var(--line) !important;
      box-shadow:0 12px 30px rgba(0,0,0,.12) !important;
    }
    }
    @media (max-width:640px){
      .container{width:min(100% - 28px, var(--max))}
      .section{padding:78px 0}
      .hero{padding-top:112px}
      .hero-visual{min-height:430px}
      .float-card{right:0;top:90px;padding:16px}
      .avatar-stack{right:6px;top:0;transform:scale(.78)}
      .stats{grid-template-columns:1fr}
      .skills-grid,.bento{grid-template-columns:1fr}
      .project-card.large,.project-card.wide{grid-column:span 1;grid-row:span 1}
      .timeline-item{grid-template-columns:1fr;gap:8px;padding-left:28px}
      .timeline-item:not(:last-child):before{left:6px}
      .timeline-dot{left:0}
      .exp-button{grid-template-columns:50px 1fr auto;padding:16px}
      .logo{width:48px;height:48px}
      .exp-content ul{padding:0 18px 20px 28px}
      .hero-actions{align-items:stretch}
      .btn{width:100%}
      /* Reduce hero name size on small screens */
      h1{font-size:2.3rem}
      .type-line{font-size:1.1rem}

      /* Hide the 3D radar card on very small screens to prevent it from overflowing and breaking the layout.  The hero remains focused on the text. */
      .hero-visual{display:none}
    }
    /* === Custom overrides === */
    /* Ensure project cards grow to fit longer descriptions and publication names */
    .bento {
      /* Increase minimum row height for better text visibility */
      grid-auto-rows: minmax(300px, auto);
    }
    .project-card {
      /* Increase minimum height for all project cards */
      min-height: 300px;
      height: auto;
    }

    /* Publications grid and card styling */
    .pub-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 18px;
    }
    .pub-card {
      border: 1px solid var(--line);
      border-radius: 26px;
      padding: 22px;
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035));
      backdrop-filter: blur(18px);
      box-shadow: 0 20px 70px rgba(0, 0, 0, 0.24);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: 0.3s ease;
      min-height: 220px;
    }
    .pub-card:hover {
      transform: translateY(-6px);
      border-color: rgba(182, 92, 255, 0.55);
    }
    .pub-card h3 {
      margin: 0 0 6px;
      font-size: 1.15rem;
      color: var(--text);
    }
    .pub-meta {
      font-size: 0.85rem;
      font-weight: 800;
      color: var(--cyan);
      margin: 0 0 8px;
    }
    .pub-card p {
      color: var(--muted);
      margin: 0 0 14px;
      line-height: 1.6;
    }
    .pub-links {
      display: flex;
      gap: 10px;
    }
    .pub-links a {
      border: 1px solid var(--line);
      padding: 8px 12px;
      border-radius: 999px;
      color: #dfe9ff;
      font-weight: 800;
      font-size: 0.8rem;
      background: rgba(255, 255, 255, 0.055);
      transition: 0.2s ease;
    }
    .pub-links a:hover {
      background: rgba(72, 246, 255, 0.14);
      border-color: var(--cyan);
    }

    /* ===========================================================
       Light theme overrides
       These styles adjust backgrounds, borders and colours to
       harmonise the interface with a light palette. They
       intentionally override earlier definitions.  Instead of
       editing each selector above, we add these rules at the end
       so they cascade and take precedence for the light theme.  */

    /* Navigation bar and dropdown menu: lighten background and add subtle shadow */
    .nav {
      background: rgba(255, 255, 255, 0.82);
      backdrop-filter: blur(12px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    }
    .nav-links {
      /* Dark transparent backdrop for the navigation links bar */
      background: rgba(6, 10, 25, 0.58);
    }
    .nav-links a:hover {
      /* On hover, lighten slightly to guide interaction */
      background: rgba(255, 255, 255, 0.08);
    }

    /* Loader: deep dark gradient to align with the new dark theme */
    .loader {
      /* Light gradient moving from soft blues to pale sky */
      background: linear-gradient(135deg, #e7effa, #f4f8fc 54%, #eff5fd);
    }
    .loader-radar {
      border-color: rgba(14, 165, 233, 0.25);
      box-shadow: 0 0 30px rgba(14, 165, 233, 0.18);
    }
    .loader-radar:before {
      background: linear-gradient(45deg, rgba(14, 165, 233, 0.45), transparent 54%);
    }
    .loader-radar:after {
      background: radial-gradient(circle, rgba(14, 165, 233, 0.1), transparent 60%);
    }

    /* Floating card on hero: dark glass panel to match dark theme */
    .float-card {
      background: var(--glass);
      box-shadow: var(--shadow);
    }
    .float-card-inner {
      background: rgba(255, 255, 255, 0.85);
      border-color: var(--line);
    }
    .radar-orbit {
      border-color: rgba(14, 165, 233, 0.32);
      background: radial-gradient(circle, rgba(14, 165, 233, 0.12), transparent 62%);
    }
    .stats .stat {
      /* Light tinted statistic cards for consistency on light theme */
      background: rgba(0, 0, 0, 0.03);
    }

    /* Marquee banner: subtle light strip */
    .marquee {
      background: rgba(0, 0, 0, 0.03);
      border-top-color: var(--line);
      border-bottom-color: var(--line);
    }
    .marquee span {
      background: rgba(0, 0, 0, 0.05);
      color: var(--text);
    }

    /* Card backgrounds: use light glass effect */
    .bio-card,
    .timeline,
    .skill-card,
    .project-card,
    .exp-item,
    .contact-card {
      /* Use light glass panels with gentle shadow for all cards */
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.9));
      box-shadow: 0 20px 70px rgba(0, 0, 0, 0.1);
    }
    /* Skill icons: softer gradients */
    .skill-icon {
      /* Use bright teal and violet for skill icons on light background */
      background: linear-gradient(135deg, rgba(14,165,233,0.15), rgba(124,58,237,0.13));
    }
    /* Progress bar backgrounds: visible on light panels */
    .bar {
      background: rgba(0, 0, 0, 0.1);
    }
    /* Tooltip: invert to light background and dark text */
    .tooltip {
      background: rgba(255, 255, 255, 0.95);
      color: var(--text);
      border-color: rgba(14, 165, 233, 0.28);
    }
    /* Project links: darker text on light chip */
    .project-links a {
      color: var(--text);
      background: rgba(0, 0, 0, 0.03);
    }
    .project-links a:hover {
      background: rgba(14, 165, 233, 0.1);
      border-color: var(--cyan);
    }

    /* Publication cards: match light glass aesthetic */
    .pub-card {
      background: var(--glass);
      box-shadow: var(--shadow);
    }
    .pub-links a {
      color: var(--cyan);
      background: rgba(255, 255, 255, 0.1);
    }
    .pub-links a:hover {
      background: rgba(0, 188, 212, 0.18);
      border-color: var(--cyan);
    }

    /* Contact card and form fields: brighter surfaces */
    .contact-card {
      background: var(--glass);
    }
    .contact-card .contact-ripples span {
      border-color: rgba(0, 188, 212, 0.35);
    }
    .field input,
    .field textarea {
      background: rgba(255, 255, 255, 0.06);
    }
    .field label {
      color: var(--muted);
    }
    .social {
      background: rgba(255, 255, 255, 0.08);
      color: var(--cyan);
    }
    .social:hover {
      background: rgba(0, 188, 212, 0.18);
    }

    /* Footer: light separator and muted text */
    footer {
      border-top-color: var(--line);
      color: var(--muted);
    }

    /* Typewriter line and caret: adapt colours for light theme */
    .type-line {
      color: var(--text);
    }
    .caret {
      background: var(--cyan);
    }

    /* Ensure the dynamic typewriter text inherits dark colour on light theme */
    #typewriter {
      color: var(--text);
    }

  /* Light theme overrides: adjust navigation, panels and interactive elements to suit the new colour palette */
  .nav {
    /* Use a more opaque background and remove heavy blurring for better contrast on light theme */
    background: rgba(255,255,255,.92);
    border-color: var(--line);
    box-shadow: 0 12px 40px rgba(0,0,0,.05);
    backdrop-filter: none;
  }
  .nav-links a:hover {
    background: rgba(0,0,0,.05);
    color: var(--text);
  }
  .menu-btn {
    background: rgba(255,255,255,.75);
    border-color: var(--line);
    color: var(--text);
  }

  /* Lighten panel backgrounds for content sections */
  .bio-card,
  .timeline,
  .skill-card,
  .project-card,
  .exp-item,
  .contact-card {
    background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,255,255,.9));
    border-color: var(--line);
    box-shadow: 0 20px 70px rgba(0,0,0,.1);
  }

  .float-card-inner {
    background: rgba(255,255,255,.85);
    border-color: var(--line);
  }

  .radar-orbit {
    border-color: rgba(14,165,233,.35);
    background: radial-gradient(circle, rgba(14,165,233,.15), transparent 62%);
  }

  .stat {
    background: rgba(0,0,0,.03);
  }

  .badge {
    color: #046e8b;
    background: rgba(14,165,233,.08);
  }

  .skill-icon {
    background: linear-gradient(135deg, rgba(14,165,233,.15), rgba(124,58,237,.13));
  }

  .skill-card:hover {
    border-color: rgba(14,165,233,.5);
    box-shadow: 0 28px 90px rgba(14,165,233,.1);
  }

  .tooltip {
    background: rgba(255,255,255,.95);
    border-color: rgba(14,165,233,.28);
    color: var(--text);
  }

  .project-card:before {
    background: linear-gradient(90deg, transparent, var(--cyan), var(--violet), transparent);
  }

  .project-card:hover {
    border-color: rgba(124,58,237,.4);
  }

  .project-links a {
    background: rgba(0,0,0,.03);
    color: var(--text);
  }

  .exp-button {
    background: transparent;
    color: var(--text);
  }
  .exp-item.open .chev {
    color: var(--text);
  }
  .exp-content ul {
    color: var(--muted);
  }

  .contact-card {
    background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,255,255,.9));
  }
  .field input,
  .field textarea {
    background: rgba(255,255,255,.92);
    color: var(--text);
  }
  .field label {
    color: var(--text);
  }

  .social {
    background: rgba(0,0,0,.04);
    border-color: var(--line);
  }
  .social:hover {
    background: rgba(14,165,233,.1);
  }

  .contact-ripples span {
    border-color: rgba(14,165,233,.35);
  }

  footer {
    border-top-color: var(--line);
    color: var(--muted);
  }

  .marquee {
    background: rgba(0,0,0,.03);
    border-color: var(--line);
  }
  .marquee span {
    background: rgba(0,0,0,.05);
    color: var(--text);
  }

  /* Override mobile navigation panel background for light theme */
  @media (max-width:980px){
    .nav-links{
      background: rgba(255,255,255,.96);
    }
  }

  /* Charcoal & Cream overrides */
  .skill-card:hover{
    border-color: rgba(90,138,114,.5);
    box-shadow: 0 28px 90px rgba(90,138,114,.1);
  }
  .skill-icon{
    background: linear-gradient(135deg, rgba(90,138,114,.22), rgba(208,169,111,.2));
  }
  .tooltip{
    border-color: rgba(90,138,114,.28);
    background: rgba(42,39,34,.93);
    color: #f9f5ef;
  }
  .project-card:hover{
    border-color: rgba(208,169,111,.55);
  }
  .radar-orbit{
    border-color: rgba(90,138,114,.32);
    background: radial-gradient(circle, rgba(90,138,114,.12), transparent 62%);
  }
  .radar-orbit:before{
    background: linear-gradient(45deg, rgba(90,138,114,.65), transparent 60%);
  }
  .cursor-ring{
    border-color: rgba(90,138,114,.6);
    box-shadow: 0 0 38px rgba(90,138,114,.18);
  }
  .cursor-ring.active{
    border-color: rgba(208,169,111,.8);
  }
  .btn-primary{
    color: #2a2b2a;
    box-shadow: 0 0 0 0 rgba(90,138,114,.45);
  }
  .brand-mark{
    color: #2a2b2a;
    box-shadow: 0 0 34px rgba(90,138,114,.36);
  }
  .avatar{
    background: linear-gradient(135deg, rgba(90,138,114,.95), rgba(208,169,111,.95));
    color: #2a2b2a;
    box-shadow: 0 0 44px rgba(90,138,114,.36);
  }
  .badge{
    background: rgba(90,138,114,.06);
    color: #2a2b2a;
  }
    /* ------------------------------------------------------------------ */
    /* Global overrides based on user feedback (applied at all screen sizes) */
    #particles,.grid-bg,.noise{display:none!important}
    .type-line{display:none!important}
    /* Restyle the floating stats card to be lighter and more legible */
    .float-card{
      background:var(--panel)!important;
      border:1px solid var(--line)!important;
      box-shadow:0 24px 80px rgba(0,0,0,.08)!important;
    }
    .float-card:before{opacity:.15!important}
    .float-card-inner{
      background:var(--panel-2)!important;
      border-color:var(--line)!important;
    }
    .radar-orbit{
      border-color:rgba(90,138,114,.32)!important;
      background:radial-gradient(circle, rgba(90,138,114,.12), transparent 62%)!important;
    }
    .stats .stat{
      background:rgba(0,0,0,.03)!important;
      border-color:rgba(0,0,0,.08)!important;
    }
    .stats .stat strong{
      /* Use accent colour for statistic numbers so they stand out on the light card */
      color:var(--cyan)!important;
      filter:none!important;
    }
    .stats .stat span{
      /* Darken statistic labels for contrast */
      color:var(--text)!important;
    }
    /* Statistics text colours are defined above to match the overall theme */
    /* Apply requested spacing and sizing across all viewport widths */
    .timeline-item > div:nth-child(3){padding-left:12px}
    .exp-button span:nth-of-type(2) h3{margin-left:8px}
    .exp-button .logo{min-width:72px;font-size:.75rem}
    /* Use light panels and subtle shadows for tooltips */
    .tooltip{background:var(--panel)!important;color:var(--text)!important;border-color:var(--line)!important;box-shadow:0 12px 30px rgba(0,0,0,.12)!important}
    .shimmer{background:none!important;color:var(--text)!important;-webkit-background-clip:initial!important;background-clip:initial!important}

    /* Brighten skill cards for improved legibility */
    .skill-card{
      background:var(--panel)!important;
      border:1px solid var(--line)!important;
    }
    .skill-card:hover{
      box-shadow:0 28px 90px rgba(0,0,0,.1)!important;
    }
    .skill-card .bar{
      background:rgba(0,0,0,.08)!important;
    }

    /* Add space between timeline dots and headings by indenting the headline itself */
    .timeline h3{
      margin-left:4px;
    }


    /* === Final requested overrides: readable light RF Portfolio menu + enabled typewriter === */
    .nav{
      background:rgba(255,255,255,.96)!important;
      border:1px solid rgba(0,0,0,.08)!important;
      box-shadow:0 12px 36px rgba(0,0,0,.08)!important;
      backdrop-filter:none!important;
    }
    .brand,
    .brand span{
      color:var(--text)!important;
    }
    .nav-links{
      background:rgba(255,255,255,.84)!important;
      border-radius:999px!important;
      padding:3px!important;
    }
    .nav-links a{
      color:var(--text)!important;
      background:transparent!important;
      font-weight:700!important;
    }
    .nav-links a:hover{
      color:var(--text)!important;
      background:rgba(90,138,114,.12)!important;
    }
    .menu-btn{
      background:rgba(255,255,255,.95)!important;
      color:var(--text)!important;
      border:1px solid rgba(0,0,0,.08)!important;
    }
    @media (max-width:980px){
      .nav-links{
        background:rgba(255,255,255,.98)!important;
        border:1px solid rgba(0,0,0,.08)!important;
        border-radius:24px!important;
      }
    }

    .type-line{
      display:block!important;
      visibility:visible!important;
      opacity:1!important;
      color:var(--cyan)!important;
    }
    #typewriter{
      display:inline!important;
      color:var(--cyan)!important;
    }
    .caret{
      display:inline-block!important;
      background:var(--cyan)!important;
    }