:root {
    --text-primary: #2c3e50;
    --text-secondary: #4a5568;
    --text-muted: #718096;
    --surface: rgba(255, 255, 255, 0.45);
    --surface-strong: rgba(255, 255, 255, 0.75);
    --border: rgba(255, 255, 255, 0.72);
    --shadow: 0 18px 50px rgba(49, 67, 96, 0.12);
    --page-gradient: linear-gradient(180deg, #e9d5ff 0%, #ffffff 100%);
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--text-primary);
    background: var(--page-gradient);
    min-height: 100vh;
}

a {
    color: inherit;
}

.site-header {
    position: sticky;
    top: 0;
    padding: 1.5rem 2rem 0;
}

.site-header__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.site-brand {
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.top-nav {
    display: flex;
    gap: 0.75rem;
}

.top-nav-link {
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 0.55rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.38);
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.top-nav-link:hover,
.top-nav-link.is-active {
    color: #1a202c;
    background: var(--surface-strong);
    border-color: rgba(255, 255, 255, 1);
}

.page-shell {
    min-height: calc(100vh - 5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.container {
    width: min(100%, 760px);
    text-align: center;
    animation: fadeIn 1.2s ease-out;
}

.hero,
.content-card {
    padding: 3rem 2rem;
}

h1 {
    font-size: clamp(2.75rem, 8vw, 4.5rem);
    font-weight: 800;
    letter-spacing: 0;
    margin-bottom: 0.5rem;
}

.subtitle {
    font-size: 1.05rem;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 2.5rem;
}

.intro,
.page-copy {
    max-width: 700px;
    margin: 0 auto 2.5rem;
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-secondary);
}

.links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.link-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 0.8rem 1.4rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: var(--surface);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.link-item:hover {
    color: #1a202c;
    border-color: rgba(255, 255, 255, 1);
    background: var(--surface-strong);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.link-icon,
.github-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@media (max-width: 700px) {
    .site-header {
        padding: 1rem 1rem 0;
    }

    .site-header__inner {
        flex-direction: column;
        align-items: stretch;
    }

    .site-brand {
        text-align: center;
    }

    .top-nav {
        justify-content: center;
        flex-wrap: wrap;
    }

    .page-shell {
        padding: 1rem;
    }

    .hero,
    .content-card {
        padding: 2.5rem 1.5rem;
    }
}

/* Cosmic theme */
:root{--ink:#f4f2ff;--soft:#b7b3cc;--space:#05040c;--line:rgba(191,171,255,.18);--violet:#9b87f5;--cyan:#72d8ef;--max:1180px}body{color:var(--ink);background:radial-gradient(circle at 75% 20%,#21143e,transparent 32%),radial-gradient(circle at 12% 75%,#0c2835,transparent 28%),var(--space);overflow-x:hidden}body::before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.5;background-image:radial-gradient(circle,#fff 0 1px,transparent 1.3px),radial-gradient(circle,#9bddec 0 1px,transparent 1.4px);background-position:0 0,37px 61px;background-size:93px 93px,151px 151px}.site-header{position:relative;z-index:5}.site-header__inner{max-width:var(--max)}.site-brand{color:var(--ink)}.site-brand::before{content:'';display:inline-block;width:8px;height:8px;margin-right:10px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}.top-nav-link{color:var(--soft);background:rgba(255,255,255,.03);border-color:var(--line)}.top-nav-link:hover,.top-nav-link.is-active{color:var(--ink);background:rgba(255,255,255,.08);border-color:var(--line)}.page-shell{width:min(calc(100% - 3rem),var(--max));margin:auto;padding:4rem 0 5rem}.hero{width:100%;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:clamp(2rem,8vw,7rem);text-align:left}.eyebrow{margin-bottom:1.4rem;color:var(--cyan);font:600 .72rem ui-monospace,monospace;letter-spacing:.15em;text-transform:uppercase}h1{color:var(--ink);font-size:clamp(3.4rem,8vw,7.2rem);line-height:.94;letter-spacing:-.065em}.gradient-text{color:transparent;background:linear-gradient(100deg,var(--ink),var(--violet),var(--cyan));background-clip:text;-webkit-background-clip:text}.intro,.page-copy{color:var(--soft);margin:1.7rem 0 2rem}.links{justify-content:flex-start}.link-item{color:var(--ink);background:rgba(255,255,255,.04);border-color:var(--line)}.link-item:first-child{background:var(--ink);color:var(--space)}.cosmos{position:relative;aspect-ratio:1;display:grid;place-items:center}.planet{position:relative;width:42%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 34% 28%,#d9ceff,#8d69d1 25%,#3b2766 58%,#120d22 76%);box-shadow:inset -22px -18px 38px #080510,0 0 55px #7656b866;animation:float 6s ease-in-out infinite}.planet::after{content:'';position:absolute;inset:11% -48%;border:1px solid #bad7ff77;border-radius:50%;transform:rotate(-17deg)}.orbit{position:absolute;inset:12%;border:1px solid var(--line);border-radius:50%;animation:spin 18s linear infinite}.orbit--outer{inset:1%;animation-duration:27s}.orbit::after{content:'';position:absolute;top:13%;right:12%;width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 13px var(--cyan)}.cosmos-label{position:absolute;right:0;bottom:10%;color:#77728f;font:.65rem ui-monospace,monospace}.section-heading{margin-bottom:2rem}.section-heading h1{font-size:clamp(3rem,8vw,6rem)}.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.space-card{min-height:230px;padding:1.6rem;border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,#ffffff0e,#ffffff05)}.space-card__index{color:var(--cyan);font:.68rem ui-monospace,monospace}.space-card h2{margin-top:4.5rem}.space-card p{margin-top:.65rem;color:var(--soft);line-height:1.65}.space-card--placeholder{border-style:dashed}.about-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:7vw}.profile-orb{width:230px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 34%,#a5e8f4 0 2%,#5a4c96 18%,#171027 60%,#090611 72%);box-shadow:0 0 70px #72d8ef29}.about-details{border:1px solid var(--line);border-radius:16px;overflow:hidden}.detail-row{display:grid;grid-template-columns:120px 1fr;padding:1rem 1.2rem;border-bottom:1px solid var(--line)}.detail-row span:first-child{color:#77728f}.detail-row span:last-child{color:var(--soft)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes float{50%{transform:translateY(-10px)}}@media(max-width:760px){.hero,.card-grid,.about-layout{grid-template-columns:1fr}.cosmos{width:min(100%,400px);margin:auto}.page-shell{width:calc(100% - 2rem)}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}



/* Refined gas giant */
.cosmos::before {
    content: "";
    position: absolute;
    width: 62%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(132, 104, 255, .18), rgba(95, 202, 232, .06) 46%, transparent 72%);
    filter: blur(18px);
    animation: atmospherePulse 5s ease-in-out infinite;
}

.planet {
    isolation: isolate;
    width: 46%;
    overflow: visible;
    background:
        radial-gradient(ellipse at 28% 20%, rgba(255,255,255,.95) 0 1.5%, transparent 7%),
        linear-gradient(168deg, transparent 0 15%, rgba(191,164,255,.32) 17% 21%, transparent 23% 31%, rgba(87,208,232,.22) 34% 38%, transparent 40% 49%, rgba(243,148,199,.18) 52% 56%, transparent 59%),
        radial-gradient(circle at 33% 27%, #dcd4ff 0 5%, #a788ed 18%, #654aa6 39%, #302251 63%, #100b1c 82%);
    box-shadow:
        inset -34px -24px 48px rgba(4,2,11,.82),
        inset 15px 12px 25px rgba(224,224,255,.2),
        0 0 3px rgba(232,224,255,.9),
        0 0 34px rgba(142,111,235,.62),
        0 0 95px rgba(78,184,222,.22);
}

.planet::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 5%;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 68% 67%, rgba(8,5,19,.32) 0 12%, transparent 13%),
        radial-gradient(ellipse at 33% 42%, rgba(255,255,255,.12) 0 5%, transparent 7%),
        repeating-linear-gradient(172deg, transparent 0 12px, rgba(216,202,255,.09) 14px, transparent 18px);
    mix-blend-mode: screen;
    transform: rotate(-8deg);
}

.planet::after {
    z-index: -1;
    inset: 24% -58%;
    border: 9px solid transparent;
    border-top-color: rgba(204,221,255,.62);
    border-bottom-color: rgba(91,68,147,.35);
    background: radial-gradient(ellipse, transparent 52%, rgba(144,190,222,.22) 54%, rgba(214,196,255,.55) 58%, transparent 62%);
    transform: rotate(-17deg);
    filter: drop-shadow(0 0 8px rgba(140,199,239,.3));
}

.cosmos::after {
    content: "";
    position: absolute;
    z-index: 3;
    width: 46%;
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: inset -30px -12px 35px rgba(2,1,8,.45);
    transform: translateY(var(--planet-float, 0));
}

@keyframes atmospherePulse {
    50% { opacity: .72; transform: scale(1.06); }
}

/* Hero vertical alignment */
.page-shell{align-items:flex-start;padding-top:1.25rem}
.hero{min-height:calc(100vh - 7.5rem);align-items:center;transform:translateY(-1.5rem)}
@media(max-width:760px){.page-shell{padding-top:1rem}.hero{min-height:auto;transform:translateY(-.5rem)}}
/* Orbit label and About planet refinements */
.cosmos-label {
    bottom: 4%;
}

.profile-orb {
    position: relative;
    isolation: isolate;
    overflow: visible;
    background:
        radial-gradient(ellipse at 31% 25%, rgba(255,255,255,.92) 0 1%, transparent 8%),
        linear-gradient(164deg, transparent 0 18%, rgba(138,226,245,.25) 20% 24%, transparent 27% 38%, rgba(161,137,231,.26) 41% 46%, transparent 49% 61%, rgba(87,191,218,.16) 64% 68%, transparent 71%),
        radial-gradient(circle at 35% 30%, #c9f5fb 0 4%, #77c9df 15%, #5963ad 38%, #27204b 64%, #0b0817 84%);
    box-shadow:
        inset -35px -25px 48px rgba(3,2,12,.82),
        inset 13px 10px 22px rgba(225,251,255,.2),
        0 0 2px rgba(220,250,255,.9),
        0 0 35px rgba(104,207,232,.42),
        0 0 85px rgba(126,102,222,.2);
    animation: aboutPlanetFloat 6.5s ease-in-out infinite;
}

.profile-orb::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 5%;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 65% 59%, rgba(7,5,25,.34) 0 10%, transparent 12%),
        repeating-linear-gradient(174deg, transparent 0 14px, rgba(222,248,255,.11) 16px, transparent 20px);
    mix-blend-mode: screen;
    transform: rotate(-7deg);
}

.profile-orb::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 28% -34%;
    border: 1px solid rgba(182,224,242,.46);
    border-radius: 50%;
    background: radial-gradient(ellipse, transparent 55%, rgba(132,194,224,.15) 57%, rgba(202,224,255,.38) 60%, transparent 63%);
    transform: rotate(-14deg);
    filter: drop-shadow(0 0 7px rgba(115,211,234,.25));
}

@keyframes aboutPlanetFloat {
    50% { transform: translateY(-8px) rotate(1.5deg); }
}
/* Organic generated starfield */
body::before {
    display: none;
}

.starfield {
    position: fixed;
    z-index: -2;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.starfield i {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    opacity: var(--alpha);
    background: hsl(var(--hue) 75% 88%);
}

.starfield__star--glow {
    box-shadow: 0 0 5px hsl(var(--hue) 90% 76%);
    animation: starTwinkle var(--duration) ease-in-out var(--delay) infinite;
}

@keyframes starTwinkle {
    0%, 100% { opacity: calc(var(--alpha) * .45); transform: scale(.8); }
    48% { opacity: var(--alpha); transform: scale(1.18); }
    56% { opacity: calc(var(--alpha) * .7); transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .starfield__star--glow { animation: none; }
}
/* TF cosmic brand mark */
.site-brand::before {
    display: none;
}

.site-logo {
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    filter: drop-shadow(0 0 7px rgba(114,216,239,.24));
    transition: transform .25s ease, filter .25s ease;
}

.site-brand:hover .site-logo {
    transform: rotate(-7deg) scale(1.07);
    filter: drop-shadow(0 0 10px rgba(155,135,245,.5));
}

@media (max-width: 460px) {
    .site-logo {
        width: 1.75rem;
        height: 1.75rem;
    }
}
/* Experience flight log */
.experience-page {
    display: block;
    padding-top: 3rem;
}

.experience-heading {
    max-width: 760px;
    margin-bottom: 4.5rem;
}

.experience-section {
    margin-top: 4rem;
}

.experience-section__title {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1.6rem;
    color: var(--ink);
    font-size: .82rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.experience-section__title span {
    color: var(--cyan);
}

.timeline {
    display: grid;
    gap: 1rem;
}

.timeline-entry {
    position: relative;
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: clamp(1.5rem, 5vw, 4rem);
    padding: clamp(1.5rem, 4vw, 2.25rem);
    border: 1px solid var(--line);
    border-radius: 1.25rem;
    background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
    transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

.timeline-entry:hover {
    transform: translateY(-3px);
    border-color: rgba(191,171,255,.36);
    background: rgba(24,18,45,.72);
}

.timeline-entry__marker {
    position: absolute;
    top: 2.3rem;
    left: -.35rem;
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 12px var(--cyan);
}

.timeline-entry__meta {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    color: var(--muted);
    font: .72rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .04em;
}

.timeline-entry__date {
    color: var(--cyan);
}

.timeline-entry__type {
    margin-bottom: .55rem;
    color: var(--violet);
    font: 600 .72rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.timeline-entry__body h3 {
    margin-bottom: .5rem;
    font-size: clamp(1.25rem, 3vw, 1.65rem);
    letter-spacing: -.025em;
}

.timeline-entry__body > p:not(.timeline-entry__type) {
    color: var(--soft);
    line-height: 1.65;
}

.timeline-entry__team {
    font-size: .9rem;
}

.timeline-entry__body ul {
    display: grid;
    gap: .8rem;
    margin: 1.4rem 0 0;
    padding-left: 1.1rem;
    color: var(--soft);
    line-height: 1.7;
}

.timeline-entry__body li::marker {
    color: var(--cyan);
}

.experience-facts {
    margin-top: 1.25rem;
    color: var(--soft);
}

.experience-facts strong {
    color: var(--ink);
}

.course-list {
    margin-top: 1.2rem;
    padding: .85rem 1rem;
    border: 1px solid var(--line);
    border-radius: .75rem;
    color: var(--soft);
    background: rgba(255,255,255,.025);
}

.course-list summary {
    cursor: pointer;
    color: var(--ink);
    font-size: .85rem;
    font-weight: 600;
}

.course-list p {
    margin-top: .85rem;
    line-height: 1.7;
}

.skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.4rem;
}

.skill-tags span {
    padding: .42rem .7rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--soft);
    background: rgba(255,255,255,.025);
    font-size: .72rem;
}

@media (max-width: 760px) {
    .experience-page {
        padding-top: 2rem;
    }

    .experience-heading {
        margin-bottom: 3rem;
    }

    .timeline-entry {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .timeline-entry__meta {
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
    }
}