@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&display=swap');

:root {
  --bg:#0f172a;
  --text:#e5e7eb;
  --accent:#cd9bf9;
  --card:#1e293b;
  --nav-bg:rgba(15,23,42,.7);
  --featured-bg:linear-gradient(135deg,#2a3b5f,#1f2b42);
  --bg-gradient:linear-gradient(135deg,#050816,#0f172a 55%,#111d3d);
  --bg-fx-1:rgba(56,189,248,.22);
  --bg-fx-2:rgba(248,113,113,.18);
  --bg-fx-3:rgba(147,197,253,.18);
  --orb-one:rgba(59,130,246,.35);
  --orb-two:rgba(244,114,182,.45);
  --grid-color:rgba(255,255,255,.08);
  --bg-aurora-1:#5c2bd8;
  --bg-aurora-2:#14b8a6;
  --beam-color:rgba(99,102,241,.32);
  --star-color:rgba(255,255,255,.85);
  --cursor-core:rgba(124,58,237,.45);
  --cursor-ring:rgba(56,189,248,.65);
  --cursor-spectrum-a:rgba(192,132,252,.9);
  --cursor-spectrum-b:rgba(56,189,248,.9);
  --cursor-spectrum-c:rgba(236,72,153,.95);
  --cursor-nx:0;
  --cursor-ny:0;
  --trail-size:22px;
  --burst-color:rgba(192,132,252,.95);
  --burst-color-alt:rgba(56,189,248,.95);
  --burst-halo:rgba(255,255,255,.85);
}
@media (prefers-color-scheme: light) {
  :root {
    --bg:#fff;
    --text:#111827;
    --card:#f3f4f6;
    --nav-bg:rgba(255,255,255,.85);
    --featured-bg:linear-gradient(135deg,#f5f5ff,#e8f0ff);
    --bg-gradient:linear-gradient(135deg,#f5f8ff,#fff6fb);
    --bg-fx-1:rgba(14,165,233,.18);
    --bg-fx-2:rgba(244,114,182,.16);
    --bg-fx-3:rgba(16,185,129,.15);
    --orb-one:rgba(14,165,233,.25);
    --orb-two:rgba(244,114,182,.32);
    --grid-color:rgba(15,23,42,.06);
    --bg-aurora-1:#7c3aed;
    --bg-aurora-2:#0ea5e9;
    --beam-color:rgba(59,130,246,.25);
    --star-color:rgba(15,23,42,.7);
    --cursor-core:rgba(124,58,237,.35);
    --cursor-ring:rgba(14,165,233,.55);
    --cursor-spectrum-a:rgba(157,78,221,.85);
    --cursor-spectrum-b:rgba(14,165,233,.85);
    --cursor-spectrum-c:rgba(244,114,182,.9);
    --burst-color:rgba(192,132,252,.95);
    --burst-color-alt:rgba(14,165,233,.9);
    --burst-halo:rgba(255,255,255,.85);
  }
}
html { scroll-behavior:smooth; }

body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; min-height:100vh; background:var(--bg); color:var(--text); color-scheme:dark; overflow-x:hidden; }
body.has-fancy-cursor { cursor:none; }
@media (prefers-color-scheme: light) {
  body { color-scheme:light; }
}
/* Simplified gradient background with subtle layered color wash (no glow effects) */
.bg-canvas { position:fixed; inset:0; z-index:-3; pointer-events:none; overflow:hidden; background:var(--bg-gradient); background-attachment:fixed; }
.bg-canvas::before,
.bg-canvas::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.55; }
.bg-canvas::before { background:linear-gradient(145deg, rgba(124,58,237,.25) 0%, transparent 45%, rgba(14,165,233,.2) 100%); }
.bg-canvas::after { background:radial-gradient(circle at 20% 20%, rgba(236,72,153,.18), transparent 50%), radial-gradient(circle at 80% 75%, rgba(14,165,233,.18), transparent 55%); mix-blend-mode:normal; opacity:.4; }
.cursor-orb { position:fixed; top:0; left:0; width:260px; height:260px; border-radius:50%; pointer-events:none; background:radial-gradient(circle at 35% 25%, rgba(255,255,255,.78) 0%, rgba(255,255,255,0) 40%), radial-gradient(circle at 50% 50%, var(--cursor-core) 0%, rgba(15,23,42,0) 62%), radial-gradient(circle at 65% 40%, var(--cursor-spectrum-b) 0%, transparent 65%), radial-gradient(circle at 30% 70%, var(--cursor-spectrum-c) 0%, transparent 75%); box-shadow:0 0 140px var(--cursor-spectrum-a), 0 0 220px var(--cursor-spectrum-b); filter:blur(30px) saturate(190%); mix-blend-mode:screen; opacity:0; transform:translate3d(-999px,-999px,0); transition:opacity .35s ease, filter .3s ease, box-shadow .3s ease; z-index:-1; backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.08); }
.cursor-orb.is-actionable { filter:blur(26px) saturate(230%); box-shadow:0 0 160px rgba(59,130,246,.75), 0 0 250px rgba(236,72,153,.65); }
.cursor-orb.is-pressed { filter:blur(24px) saturate(260%); box-shadow:0 0 200px rgba(59,130,246,.85), 0 0 280px rgba(236,72,153,.8); }
.cursor-orb::before { content:""; position:absolute; inset:10%; border-radius:50%; background:conic-gradient(from 180deg, rgba(255,255,255,.45), rgba(255,255,255,0), rgba(255,255,255,.45)); filter:blur(12px); opacity:.65; animation:orbSpin 16s linear infinite; }
.cursor-orb::after { content:""; position:absolute; inset:18%; border-radius:50%; border:1px solid rgba(255,255,255,.45); box-shadow:0 0 40px var(--cursor-ring), 0 0 60px var(--cursor-spectrum-b); opacity:.65; animation:cursorPulse 9s linear infinite; }
.cursor-glyph { position:fixed; width:26px; height:26px; border-radius:10px; pointer-events:none; border:2px solid rgba(255,255,255,.92); background:linear-gradient(135deg, var(--cursor-spectrum-c), var(--cursor-spectrum-b)); box-shadow:0 8px 26px rgba(13,25,47,.55), 0 0 32px var(--cursor-spectrum-b), 0 0 48px rgba(244,114,182,.75); transform:translate3d(-999px,-999px,0) rotate(45deg); opacity:0; transition:opacity .2s ease, border .2s ease, transform .2s ease, box-shadow .2s ease; z-index:25; mix-blend-mode:screen; backdrop-filter:blur(4px); }
.cursor-glyph::before { content:""; position:absolute; inset:-8px; border-radius:14px; border:1px solid rgba(255,255,255,.25); opacity:0; transform:scale(.6); transition:opacity .2s ease, transform .2s ease; filter:blur(3px); }
.cursor-glyph::after { content:""; position:absolute; inset:28%; border-radius:50%; background:rgba(255,255,255,.92); box-shadow:0 0 8px rgba(255,255,255,.9); transition:box-shadow .2s ease, transform .2s ease; }
.cursor-glyph.is-visible { opacity:1; }
.cursor-glyph.is-actionable { border-color:rgba(255,255,255,1); background:linear-gradient(135deg, rgba(59,130,246,.95), rgba(236,72,153,.92)); box-shadow:0 10px 30px rgba(13,25,47,.6), 0 0 36px rgba(59,130,246,.85), 0 0 60px rgba(236,72,153,.9); }
.cursor-glyph.is-actionable::before { opacity:1; transform:scale(1); border-color:rgba(56,189,248,.8); box-shadow:0 0 18px rgba(56,189,248,.75); }
.cursor-glyph.is-actionable::after { box-shadow:0 0 16px rgba(255,255,255,.95), 0 0 30px rgba(236,72,153,.85); }
.cursor-glyph.is-pressed { border-color:rgba(255,255,255,1); box-shadow:0 12px 36px rgba(13,25,47,.7), 0 0 40px rgba(59,130,246,.95), 0 0 70px rgba(236,72,153,.95); }
.cursor-glyph.is-pressed::before { opacity:1; transform:scale(1.15); border-color:rgba(236,72,153,.8); box-shadow:0 0 20px rgba(236,72,153,.8); animation:cursorRingPulse .45s ease-out; }
.cursor-glyph.is-pressed::after { transform:scale(1.2); box-shadow:0 0 20px rgba(255,255,255,1), 0 0 36px rgba(236,72,153,.9); }
.cursor-trail { position:fixed; width:var(--trail-size); height:var(--trail-size); border-radius:50%; pointer-events:none; background:radial-gradient(circle, rgba(255,255,255,.95) 0%, var(--trail-color, hsla(270,95%,70%,.95)) 38%, transparent 80%); mix-blend-mode:color-dodge; filter:blur(10px); opacity:0; transform:translate3d(-999px,-999px,0); transition:opacity .35s ease-out, transform .25s ease-out; z-index:20; box-shadow:0 0 28px var(--trail-color, hsla(270,95%,70%,.65)), 0 0 48px rgba(255,255,255,.25); border:1px solid rgba(255,255,255,.12); }
.cursor-trail.is-active { opacity:.85; }
.cursor-trail.is-secondary { filter:blur(18px); opacity:.5; }
@keyframes cursorPulse { 0% { transform:scale(.8) rotate(0deg); opacity:.4; } 50% { opacity:.8; } 100% { transform:scale(1.2) rotate(360deg); opacity:.4; } }
@keyframes orbSpin { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } }
@keyframes cursorRingPulse { 0% { transform:scale(.6); opacity:.9; } 80% { opacity:.4; } 100% { transform:scale(1.5); opacity:0; } }
.click-burst { position:fixed; width:220px; height:220px; margin:-110px 0 0 -110px; pointer-events:none; border-radius:50%; mix-blend-mode:screen; background:radial-gradient(circle, rgba(255,255,255,.65) 0%, rgba(255,255,255,.2) 45%, transparent 75%); box-shadow:0 0 50px var(--burst-color, rgba(192,132,252,.9)), 0 0 80px var(--burst-color-alt, rgba(56,189,248,.85)); animation:clickRippleCore .9s ease-out forwards; opacity:.92; }
.click-burst::before { content:""; position:absolute; inset:18%; border-radius:50%; border:1.8px solid var(--burst-color, rgba(192,132,252,.9)); box-shadow:0 0 30px var(--burst-color, rgba(192,132,252,.85)); opacity:.85; animation:clickRippleRing .9s ease-out forwards; }
.click-burst::after { content:""; position:absolute; inset:36%; border-radius:50%; border:1.6px solid var(--burst-color-alt, rgba(56,189,248,.9)); opacity:.8; animation:clickRippleRingAlt .9s ease-out forwards; }
@keyframes clickRippleCore { 0% { transform:scale(.25); opacity:.98; } 70% { opacity:.5; } 100% { transform:scale(1.45); opacity:0; } }
@keyframes clickRippleRing { 0% { transform:scale(.6); opacity:.9; } 100% { transform:scale(2.2); opacity:0; } }
@keyframes clickRippleRingAlt { 0% { transform:scale(.8); opacity:.85; } 100% { transform:scale(2.5); opacity:0; } }
header { padding:3rem 1rem; display:flex; justify-content:center; }
.hero { width:min(100%, 960px); display:flex; align-items:center; justify-content:center; gap:2rem; flex-wrap:wrap; text-align:center; }
.hero-text { flex:1; min-width:260px; text-align:center; }
h1 { font-size:3rem; margin:0; }
.calligraphy { font-family:'Dancing Script',cursive; display:block; font-size:1.5rem; }
.subtitle { opacity:.8; margin-top:.6rem; }
.hero-links { display:flex; justify-content:center; gap:.75rem; margin-top:1rem; flex-wrap:wrap; }
.hero-links a { display:inline-flex; align-items:center; gap:.4rem; padding:.45rem 1rem; border-radius:999px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:var(--text); text-decoration:none; font-size:.9rem; transition:.2s; }
.hero-links a:hover { transform:translateY(-2px); background:rgba(255,255,255,.15); }
.hero-links img { width:20px; height:20px; object-fit:contain; }
.portrait-frame { width:220px; height:220px; border-radius:26px; overflow:hidden; border:4px solid rgba(255,255,255,.08); box-shadow:0 12px 40px rgba(0,0,0,.35); background:rgba(255,255,255,.05); display:flex; align-items:center; justify-content:center; }
.portrait-img { width:100%; height:100%; object-fit:cover; }

nav { position:sticky; top:0; backdrop-filter:blur(10px); background:var(--nav-bg); display:flex; justify-content:center; gap:2rem; padding:1rem; z-index:10; }
nav a { color:var(--accent); text-decoration:none; }

section { max-width:1400px; margin:auto; padding:2.1rem 1.5rem; }
.card { background:var(--card); padding:1.5rem; border-radius:16px; margin-bottom:2.5rem; box-shadow:0 6px 30px rgba(0,0,0,.25);}    
.card p { line-height:1.8; }

.topics-grid { display:flex; flex-direction:column; gap:2.25rem; }
.topic-card { --topic-bg:rgba(248,249,255,.95); --topic-border:rgba(148,163,184,.35); --topic-pill:rgba(148,163,184,.2); --topic-accent:#475569; border-radius:28px; padding:1.75rem; border:1px solid var(--topic-border); background:var(--topic-bg); box-shadow:0 25px 60px rgba(0,0,0,.18); display:flex; flex-direction:column; gap:1.25rem; color:#0f172a; }
.topic-card.theme-violet { --topic-bg:rgba(243,236,255,.95); --topic-border:rgba(99,102,241,.35); --topic-pill:rgba(99,102,241,.18); --topic-accent:#5b21b6; }
.topic-card.theme-amber { --topic-bg:rgba(255,250,240,.95); --topic-border:rgba(251,191,36,.4); --topic-pill:rgba(251,191,36,.2); --topic-accent:#d97706; }
.topic-card.theme-cyan { --topic-bg:rgba(236,253,245,.95); --topic-border:rgba(16,185,129,.35); --topic-pill:rgba(16,185,129,.15); --topic-accent:#0f9d7a; }
.topic-card.theme-rose { --topic-bg:rgba(255,241,247,.95); --topic-border:rgba(244,114,182,.35); --topic-pill:rgba(244,114,182,.18); --topic-accent:#db2777; }
.topic-heading { display:flex; align-items:center; gap:1rem; }
.topic-icon { width:52px; height:52px; border-radius:16px; background:var(--topic-pill); display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:var(--topic-accent); }
.topic-meta { margin:.2rem 0 0; font-size:.9rem; opacity:.75; }
.topic-items { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px, 320px); gap:1rem; overflow-x:auto; padding-bottom:.5rem; scroll-snap-type:x proximity; }
.topic-items::-webkit-scrollbar { height:6px; }
.topic-items::-webkit-scrollbar-thumb { background:rgba(15,23,42,.25); border-radius:999px; }
.topic-item { display:flex; flex-direction:column; gap:.75rem; border-radius:20px; padding:1rem; border:1px solid var(--topic-border); background:rgba(255,255,255,.8); transition:.25s; scroll-snap-align:start; }
.topic-item:hover { transform:translateY(-4px); }
.topic-thumb { width:100%; border-radius:14px; object-fit:cover; aspect-ratio:4 / 3; }
.paper-title { font-weight:600; font-size:1.05rem; word-break:break-word; color:#0f172a; }
.paper-meta { font-size:.85rem; opacity:.7; margin:.3rem 0; }
.badge { position:relative; display:inline-flex; align-items:center; gap:.2rem; font-size:.72rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:.25rem .75rem; border-radius:999px; background:linear-gradient(135deg, rgba(205,155,249,.95), rgba(141,194,255,.95)); color:#111827; border:1px solid rgba(255,255,255,.7); box-shadow:0 6px 16px rgba(15,23,42,.15); margin-left:.4rem; }
.badge::after { content:""; position:absolute; inset:2px; border-radius:999px; background:linear-gradient(120deg, rgba(255,255,255,.65), rgba(255,255,255,0)); opacity:.7; pointer-events:none; }
.links a { font-size:.8rem; margin-right:.6rem; color:var(--topic-accent, var(--accent)); text-decoration:none; }

.experience-grid, .education-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:1.2rem; }
.experience-card, .education-card { position:relative; border-radius:20px; padding:1.15rem; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); box-shadow:0 18px 40px rgba(0,0,0,.25); display:flex; flex-direction:column; gap:.6rem; backdrop-filter:blur(6px); }
.experience-card::before, .education-card::before { content:""; position:absolute; inset:0; border-radius:20px; border:1px dashed rgba(255,255,255,.12); pointer-events:none; opacity:.5; }
.experience-role, .education-degree { font-size:1.1rem; font-weight:600; }
.experience-org, .education-school { font-size:.95rem; opacity:.85; }
.experience-meta, .education-meta { font-size:.85rem; opacity:.7; display:flex; flex-direction:column; gap:.1rem; }
.experience-desc, .education-desc { font-size:.9rem; line-height:1.5; opacity:.85; }
.experience-badge, .education-badge { align-self:flex-start; font-size:.7rem; text-transform:uppercase; letter-spacing:.15em; padding:.16rem .7rem; border-radius:999px; background:linear-gradient(120deg, rgba(205,155,249,.9), rgba(56,189,248,.85)); border:1px solid rgba(255,255,255,.4); color:#0f172a; box-shadow:0 6px 18px rgba(0,0,0,.25); position:relative; overflow:hidden; }
.experience-badge::after, .education-badge::after { content:""; position:absolute; inset:1px; border-radius:999px; background:linear-gradient(120deg, rgba(255,255,255,.55), rgba(255,255,255,0)); opacity:.7; pointer-events:none; }
.experience-location { font-size:.8rem; opacity:.65; display:flex; gap:.4rem; align-items:center; }

.papers { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; }
.paper-card { background:var(--card); padding:1rem; border-radius:12px; transition:.2s; }
.paper-card:hover { transform:translateY(-4px); }

.error-msg { opacity:0.7; font-size:0.9rem; margin-top:1rem; }

.scholar-card { display:flex; flex-direction:column; gap:1rem; }
.scholar-stats { display:flex; flex-wrap:wrap; gap:1rem; }
.scholar-stat { flex:1; min-width:140px; padding:1rem; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); text-align:center; }
.scholar-stat strong { display:block; font-size:1.5rem; margin-bottom:.2rem; }
.scholar-stat span { font-size:.85rem; opacity:.75; }
.scholar-link { align-self:flex-start; display:inline-flex; align-items:center; gap:.4rem; padding:.55rem 1.1rem; border-radius:999px; border:1px solid rgba(255,255,255,.2); color:var(--text); text-decoration:none; background:rgba(255,255,255,.08); transition:.2s; }
.scholar-link:hover { transform:translateY(-2px); background:rgba(255,255,255,.15); }

footer { text-align:center; padding:2rem; opacity:.6; }

@media (max-width: 700px) {
  .topic-items { grid-auto-columns:minmax(240px, 85%); }
}

@media (prefers-reduced-motion: reduce) {
  .bg-layer,
  .bg-canvas::before,
  .bg-canvas::after,
  .cursor-orb,
  .cursor-orb::before,
  .cursor-orb::after,
  .cursor-glyph,
  .cursor-trail,
  .click-burst { animation:none !important; transition:none !important; }
}