:root {
            --ink: #063f2f;
            --charcoal: #114f3c;
            --sky: #6ed6ff;
            --mint: #8ef4cb;
            --sunset: #c9b458;
            --sand: #fbf9f1;
            --paper: #ffffff;
            --text: #19352d;
            --muted: #4d6a61;
            --radius-xl: 28px;
            --radius-lg: 20px;
            --radius-md: 14px;
            --shadow-soft: 0 18px 40px rgba(5, 63, 47, 0.12);
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        article { margin: 0; }

        body {
            margin: 0;
            font-family: 'Space Grotesk', sans-serif;
            color: var(--text);
            background:
                radial-gradient(circle at 8% 2%, rgba(0, 103, 71, 0.12) 0%, transparent 28%),
                radial-gradient(circle at 90% 22%, rgba(201, 180, 88, 0.15) 0%, transparent 30%),
                linear-gradient(180deg, #f7fcf9 0%, #f9f6ec 38%, #ffffff 100%);
            line-height: 1.6;
            overflow-x: hidden;
        }

        .container { width: min(980px, calc(100% - 2rem)); margin: 0 auto; }

        nav {
            position: fixed;
            inset: 14px 0 auto;
            z-index: 40;
        }

        .nav-shell {
            width: min(920px, calc(100% - 1.2rem));
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.92);
            border: 1px solid rgba(0, 103, 71, 0.14);
            backdrop-filter: blur(8px);
            border-radius: 999px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.5rem 0.9rem;
            box-shadow: 0 8px 20px rgba(0, 103, 71, 0.08);
        }

        .brand { font-weight: 700; font-size: 0.92rem; letter-spacing: 0.16em; color: var(--charcoal); text-transform: uppercase; }
        .nav-links { display: flex; flex-wrap: wrap; gap: 0.8rem; }
        .nav-links a {
            color: var(--charcoal);
            text-decoration: none;
            font-size: 0.84rem;
            font-weight: 600;
            padding: 0.4rem 0.72rem;
            border-radius: 999px;
            transition: background 0.25s ease, transform 0.25s ease;
        }
        .nav-links a:hover { background: rgba(0, 103, 71, 0.12); transform: translateY(-1px); }
        .nav-links a.active { background: rgba(0, 103, 71, 0.2); color: #0f6d50; font-weight: 700; }

        header { padding: 80px 0 48px; }
        .hero {
            border-radius: var(--radius-xl);
            overflow: hidden;
            background:
                radial-gradient(circle at 82% 18%, rgba(201, 180, 88, 0.2) 0%, transparent 34%),
                radial-gradient(circle at 12% 72%, rgba(110, 214, 255, 0.12) 0%, transparent 36%),
                linear-gradient(135deg, #006747 0%, #0f7a57 52%, #1f8a65 100%);
            box-shadow: 0 22px 50px rgba(0, 103, 71, 0.28);
            color: #f3fff9;
            padding: 28px;
            display: grid;
            gap: 16px;
            grid-template-columns: 140px 1fr;
        }
        .hero-img {
            width: 100%;
            aspect-ratio: 1 / 1;
            border-radius: 14px;
            object-fit: cover;
            border: 1px solid rgba(255, 255, 255, 0.45);
            box-shadow: 0 8px 16px rgba(3, 45, 32, 0.25);
        }
        h1 { margin: 10px 0 14px; font-family: 'Bitter', serif; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.15; font-weight: 800; }
        .hero p { margin: 0; font-size: 1.05rem; max-width: 62ch; color: rgba(243, 255, 249, 0.92); }
        .hero-eyebrow { margin: 0; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(243, 255, 249, 0.82); font-weight: 600; }

        .hero-actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
        .btn {
            border: none;
            border-radius: 999px;
            padding: 0.72rem 1.12rem;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-weight: 700;
        }
        .btn-primary { color: #0f3b2f; background: #d7f2e8; }
        .btn-ghost { color: #f3fff9; border: 1px solid rgba(243, 255, 249, 0.35); background: rgba(243, 255, 249, 0.12); }

        .social { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
        .social a {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            color: #f3fff9;
            text-decoration: none;
            display: inline-grid;
            place-items: center;
            border: 1px solid rgba(243, 255, 249, 0.28);
            background: rgba(243, 255, 249, 0.12);
        }

        section { padding: 20px 0; }
        .section-title { margin: 0 0 18px; font-family: 'Bitter', serif; font-size: clamp(1.7rem, 3vw, 2.4rem); color: var(--ink); }
        .section-kicker { margin: 0 0 8px; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: #4d6a61; }

        .about-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 12px; }
        .panel { background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(0, 103, 71, 0.12); border-radius: 12px; box-shadow: 0 8px 20px rgba(5,63,47,0.06); padding: 16px; }
        .about-text { margin: 0; color: var(--muted); font-size: 1.04rem; }
        .chip-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
        .chip { border-radius: 999px; padding: 0.44rem 0.84rem; background: linear-gradient(120deg, rgba(0, 103, 71, 0.12), rgba(201, 180, 88, 0.16)); border: 1px solid rgba(0, 103, 71, 0.18); font-size: 0.87rem; font-weight: 600; color: #155341; }

        .research-grid, .awards-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
        .card { position: relative; border-radius: 12px; overflow: hidden; background: var(--paper); border: 1px solid rgba(0, 103, 71, 0.12); box-shadow: 0 8px 18px rgba(5,63,47,0.06); }
        .card-media { position: relative; display: block; background: #091426; aspect-ratio: 16 / 8; overflow: hidden; }
        .card-media img { width: 100%; height: 100%; object-fit: cover; }
        .tag { position: absolute; top: 8px; left: 8px; z-index: 2; padding: 0.24rem 0.44rem; border-radius: 999px; background: rgba(201, 180, 88, 0.94); color: #144837; font-size: 0.64rem; font-weight: 700; }
        .card-body { padding: 10px 10px 12px; }
        .card-body h3 { margin: 0; font-size: 0.96rem; line-height: 1.35; color: #114a39; }
        .card-body p { margin: 6px 0 0; color: var(--muted); font-size: 0.88rem; }
        .project-description {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            overflow: hidden;
        }
        .project-description.is-expanded {
            display: block;
            -webkit-line-clamp: unset;
            overflow: visible;
        }
        .read-more-btn {
            margin-top: 8px;
            padding: 0;
            border: 0;
            background: transparent;
            color: #0f6d50;
            font: inherit;
            font-size: 0.82rem;
            font-weight: 700;
            cursor: pointer;
        }
        .read-more-btn:hover { text-decoration: underline; }
        .link-row { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
        .text-link { text-decoration: none; color: #0f6d50; font-size: 0.82rem; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }

        .carousel-container { display: flex; align-items: center; gap: 12px; }
        .carousel-wrapper { flex: 1; overflow: hidden; }
        .carousel-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
        .carousel-controls { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
        .carousel-btn { padding: 0.6rem 0.75rem; background: #0f6d50; color: white; border: none; border-radius: 12px; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.3s ease, transform 0.2s ease; }
        .carousel-btn:hover { background: #084d37; transform: scale(1.1); }
        .carousel-btn:active { transform: scale(0.95); }
        .carousel-btn[disabled] { background: #ccc; cursor: not-allowed; transform: none; }
        .carousel-btn-back { width: 40px; height: 40px; }
        .carousel-btn-next { width: 40px; height: 40px; }

        .experience-shell, .awards-shell, .education-shell {
            border-radius: 18px;
            padding: 18px;
            background: radial-gradient(circle at 90% 14%, rgba(201, 180, 88, 0.12) 0%, transparent 40%), linear-gradient(130deg, #f7fdf9 0%, #edf8f1 54%, #f9f5ea 100%);
            color: var(--text);
            box-shadow: 0 10px 22px rgba(5,63,47,0.06);
            border: 1px solid rgba(0, 103, 71, 0.10);
        }
        .news-shell {
            border-radius: 12px;
            padding: 12px;
            background: linear-gradient(180deg, #ffffff 0%, #fbfdfb 100%);
            color: var(--text);
            box-shadow: 0 6px 16px rgba(5,63,47,0.04);
            border: 1px solid rgba(0, 103, 71, 0.06);
        }
        .news-list { display: block; }
        .news-list.collapsed .news-item:nth-child(n+4) { display: none; }
        .news-toggle {
            margin-top: 10px;
            background: transparent;
            border: none;
            color: #0f6d50;
            font-weight: 700;
            cursor: pointer;
            padding: 6px 10px;
            border-radius: 8px;
        }
        .news-toggle:hover { background: rgba(15,109,80,0.06); }
        .news-item {
            display: flex;
            gap: 8px;
            align-items: center;
            padding: 6px 8px;
            border-bottom: 1px solid rgba(0,103,71,0.06);
        }
        .news-item:last-child { border-bottom: none; }
        .news-meta { font-size: 0.76rem; color: var(--muted); font-weight: 700; text-transform: uppercase; flex: 0 0 86px; }
        .news-item > div:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
        .news-item h3 { display: inline; margin: 0; font-size: 0.92rem; color: #114a39; font-weight: 700; }
        .news-item p { display: inline; margin: 0 0 0 8px; color: var(--muted); font-size: 0.88rem; }
        .timeline { margin-top: 6px; display: block; gap: 0; position: relative; }
        .timeline::before { content: ''; position: absolute; top: 0; bottom: 0; left: 110px; width: 2px; background: linear-gradient(180deg, rgba(0, 103, 71, 0.36), rgba(0, 103, 71, 0.08)); }
        .timeline-item { position: relative; z-index: 1; display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 12px; border-radius: 0; background: #ffffff; border-left: none; border-right: none; border-top: none; border-bottom: 1px solid rgba(0, 103, 71, 0.06); }
        .timeline-item:first-child { border-top: 1px solid rgba(0, 103, 71, 0.06); border-top-left-radius: 12px; border-top-right-radius: 12px; }
        .timeline-item:last-child { border-bottom: none; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
        .period { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: #0f6d50; font-weight: 700; padding-top: 2px; position: relative; }
        .period::after { display: none; }
        .badge { display: inline-block; padding: 0.3rem 0.56rem; border-radius: 4px; background: rgba(0, 103, 71, 0.12); border: 1px solid rgba(0, 103, 71, 0.25); font-size: 0.7rem; font-weight: 700; }
        .timeline-item h3 { margin: 0; font-size: 1.16rem; color: #114a39; }
        .company { margin: 2px 0 8px; color: #2f5d4f; font-weight: 600; font-size: 0.95rem; }
        .timeline-item p { margin: 0; color: #4d6a61; font-size: 0.96rem; }

        .publication-list { display: grid; gap: 8px; }
        .publication { background: #ffffff; border: 1px solid rgba(0, 103, 71, 0.12); border-radius: 10px; box-shadow: 0 8px 18px rgba(5,63,47,0.06); padding: 12px; display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 10px; }
        .publication h3 { margin: 0; color: #114a39; font-size: 1.02rem; line-height: 1.4; }
        .publication p { margin: 6px 0 0; font-size: 0.92rem; color: var(--muted); }
        .pub-links { display: flex; flex-wrap: wrap; gap: 10px; }
        .pill-btn { text-decoration: none; border-radius: 999px; padding: 0.42rem 0.82rem; font-size: 0.82rem; font-weight: 700; border: 1px solid rgba(0, 103, 71, 0.28); color: #0f6d50; background: rgba(0, 103, 71, 0.08); display: inline-flex; align-items: center; gap: 6px; }

        footer {
            margin-top: 48px;
            background: radial-gradient(circle at 20% -8%, rgba(0, 103, 71, 0.1) 0%, transparent 42%), linear-gradient(130deg, #edf8f2 0%, #e6f4ec 54%, #f9f5ea 100%);
            color: #1d4034;
            padding: 40px 0 52px;
            border-top: 1px solid rgba(0, 103, 71, 0.14);
        }
        .footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
        .footer-note { margin: 0; color: #42665b; font-size: 0.94rem; }

        @media (max-width: 980px) {
            .hero { grid-template-columns: 1fr; padding: 34px; }
            .hero-img { width: 160px; }
            .about-grid, .research-grid, .awards-grid { grid-template-columns: 1fr; }
        }

        @media (max-width: 720px) {
            nav { inset: 8px 0 auto; }
            .nav-shell { border-radius: 22px; align-items: start; gap: 8px; flex-direction: column; }
            .nav-links a { font-size: 0.8rem; padding: 0.3rem 0.55rem; }
            header { padding-top: 144px; }
            .hero { padding: 28px 20px; }
            .hero-img { width: 132px; border-radius: 18px; }
            .timeline::before { left: 10px; }
            .timeline-item { grid-template-columns: 1fr; gap: 10px; padding: 16px 14px 16px 22px; }
            .period { padding-left: 12px; }
            .period::after { left: -3px; right: auto; top: 4px; }
            .experience-shell { padding: 24px 14px; }
            .publication { padding: 14px; }
            .carousel-container { flex-direction: column-reverse; gap: 12px; }
            .carousel-controls { flex-direction: row; justify-content: center; }
        }

        /* Theme toggle button */
        .theme-toggle {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            border: 1px solid rgba(0, 103, 71, 0.14);
            background: rgba(0, 103, 71, 0.06);
            color: var(--charcoal);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
            flex-shrink: 0;
            transition: background 0.25s ease, color 0.25s ease;
        }
        .theme-toggle:hover { background: rgba(0, 103, 71, 0.14); }

        /* Dark theme overrides */
        [data-theme="dark"] {
            --ink: #d7f5e6;
            --charcoal: #cdeee0;
            --text: #e7f3ee;
            --muted: #9fc2b6;
            --paper: #142823;
            --sand: #0d1815;
        }

        [data-theme="dark"] body {
            background:
                radial-gradient(circle at 8% 2%, rgba(0, 214, 150, 0.10) 0%, transparent 28%),
                radial-gradient(circle at 90% 22%, rgba(201, 180, 88, 0.10) 0%, transparent 30%),
                linear-gradient(180deg, #0b1512 0%, #0d1512 38%, #0a100e 100%);
        }

        [data-theme="dark"] .nav-shell {
            background: rgba(15, 26, 22, 0.88);
            border-color: rgba(142, 244, 203, 0.16);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
        }
        [data-theme="dark"] .nav-links a:hover { background: rgba(142, 244, 203, 0.14); }
        [data-theme="dark"] .nav-links a.active { background: rgba(142, 244, 203, 0.22); color: #8ef4cb; }
        [data-theme="dark"] .theme-toggle {
            border-color: rgba(142, 244, 203, 0.2);
            background: rgba(142, 244, 203, 0.08);
            color: #bdf0d9;
        }
        [data-theme="dark"] .theme-toggle:hover { background: rgba(142, 244, 203, 0.18); }

        [data-theme="dark"] .section-kicker { color: #8fb6a9; }

        [data-theme="dark"] .panel {
            background: rgba(19, 36, 31, 0.9);
            border-color: rgba(142, 244, 203, 0.14);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
        }
        [data-theme="dark"] .chip {
            background: linear-gradient(120deg, rgba(142, 244, 203, 0.14), rgba(201, 180, 88, 0.14));
            border-color: rgba(142, 244, 203, 0.22);
            color: #bdf0d9;
        }

        [data-theme="dark"] .card {
            background: #142823;
            border-color: rgba(142, 244, 203, 0.14);
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
        }
        [data-theme="dark"] .card-body h3 { color: #d7f5e6; }
        [data-theme="dark"] .read-more-btn,
        [data-theme="dark"] .text-link,
        [data-theme="dark"] .news-toggle,
        [data-theme="dark"] .period,
        [data-theme="dark"] .pill-btn { color: #6ee7b7; }
        [data-theme="dark"] .pill-btn {
            border-color: rgba(142, 244, 203, 0.3);
            background: rgba(142, 244, 203, 0.1);
        }
        [data-theme="dark"] .carousel-btn[disabled] { background: #2a3a35; }

        [data-theme="dark"] .experience-shell,
        [data-theme="dark"] .awards-shell,
        [data-theme="dark"] .education-shell {
            background:
                radial-gradient(circle at 90% 14%, rgba(201, 180, 88, 0.08) 0%, transparent 40%),
                linear-gradient(130deg, #0f1e1a 0%, #10201b 54%, #14201a 100%);
            border-color: rgba(142, 244, 203, 0.10);
            box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3);
        }
        [data-theme="dark"] .news-shell {
            background: linear-gradient(180deg, #10201b 0%, #0d1815 100%);
            border-color: rgba(142, 244, 203, 0.08);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
        }
        [data-theme="dark"] .news-item { border-bottom-color: rgba(142, 244, 203, 0.10); }
        [data-theme="dark"] .news-item h3 { color: #d7f5e6; }

        [data-theme="dark"] .timeline::before {
            background: linear-gradient(180deg, rgba(142, 244, 203, 0.30), rgba(142, 244, 203, 0.06));
        }
        [data-theme="dark"] .timeline-item {
            background: #142823;
            border-bottom-color: rgba(142, 244, 203, 0.08);
        }
        [data-theme="dark"] .timeline-item:first-child { border-top-color: rgba(142, 244, 203, 0.08); }
        [data-theme="dark"] .timeline-item h3 { color: #d7f5e6; }
        [data-theme="dark"] .company { color: #9fd8bf; }
        [data-theme="dark"] .timeline-item p { color: #9fc2b6; }
        [data-theme="dark"] .badge {
            background: rgba(142, 244, 203, 0.12);
            border-color: rgba(142, 244, 203, 0.28);
        }

        [data-theme="dark"] .publication {
            background: #142823;
            border-color: rgba(142, 244, 203, 0.14);
        }
        [data-theme="dark"] .publication h3 { color: #d7f5e6; }

        [data-theme="dark"] footer {
            background:
                radial-gradient(circle at 20% -8%, rgba(142, 244, 203, 0.08) 0%, transparent 42%),
                linear-gradient(130deg, #0f1e1a 0%, #0d1a16 54%, #10201a 100%);
            color: #cfe9dd;
            border-top-color: rgba(142, 244, 203, 0.14);
        }
        [data-theme="dark"] .footer-note { color: #9fc2b6; }