:root {
  --bg: #070b18;
  --bg-2: #0d1530;
  --card: rgba(255,255,255,0.05);
  --border: rgba(140,170,255,0.18);
  --text: #eef3ff;
  --muted: #9eadd0;
  --brand: #7aa2ff;
  --brand-2: #45e0c8;
  --brand-3: #8b7bff;
  --shadow: 0 24px 80px rgba(0,0,0,0.4);
  --radius: 18px;
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; color:var(--text); background:var(--bg); min-height:100vh; line-height:1.65; overflow-x:hidden; }
.bg { position:fixed; inset:0; z-index:-2; pointer-events:none; background: radial-gradient(1200px 700px at 12% -8%, rgba(90,130,255,.28), transparent 60%), radial-gradient(900px 500px at 88% 0%, rgba(69,224,200,.16), transparent 55%), linear-gradient(180deg, #070b18 0%, #0a1022 55%, #070b18 100%); }
#fx-canvas { position:absolute; inset:0; width:100%; height:100%; opacity:.55; }
.grid-lines { position:absolute; inset:0; background-image: linear-gradient(rgba(122,162,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(122,162,255,.08) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(circle at center, black 30%, transparent 78%); animation: grid-drift 18s linear infinite; }
.scanline { position:absolute; left:0; right:0; height:120px; background: linear-gradient(180deg, transparent, rgba(122,162,255,.08), transparent); animation: scan 7s linear infinite; }
.orb { position:absolute; border-radius:50%; filter: blur(40px); opacity:.55; animation: floaty 10s ease-in-out infinite; }
.orb-a { width:280px; height:280px; left:8%; top:18%; background: rgba(122,162,255,.28); }
.orb-b { width:320px; height:320px; right:6%; top:42%; background: rgba(69,224,200,.18); animation-delay: -4s; }
.cursor-glow { position:fixed; width:280px; height:280px; border-radius:50%; pointer-events:none; z-index:-1; background: radial-gradient(circle, rgba(122,162,255,.18), transparent 65%); transform: translate(-50%, -50%); opacity:0; transition: opacity .25s ease; }
.nav, main, footer { width:min(1120px, calc(100% - 2rem)); margin:0 auto; }
.nav { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 0; position:sticky; top:0; z-index:20; backdrop-filter: blur(14px); background: rgba(7,11,24,.62); border-bottom:1px solid transparent; transition: border-color .25s ease, background .25s ease; }
.nav.scrolled { border-bottom-color: rgba(140,170,255,.12); background: rgba(7,11,24,.82); }
.brand { display:inline-flex; align-items:center; gap:.55rem; font-weight:700; letter-spacing:.04em; color:var(--text); text-decoration:none; }
.brand-mark { width:10px; height:10px; border-radius:50%; background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 0 0 4px rgba(122,162,255,.15), 0 0 18px rgba(69,224,200,.55); animation: pulse 2.2s ease-in-out infinite; }
.nav a { color:var(--muted); text-decoration:none; margin-left:.85rem; font-size:.95rem; position:relative; }
.nav a:hover, .nav a.active { color:var(--text); }
.nav nav a::after { content:""; position:absolute; left:0; bottom:-6px; width:100%; height:2px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); transform: scaleX(0); transform-origin:left; transition: transform .25s ease; }
.nav nav a:hover::after, .nav nav a.active::after { transform: scaleX(1); }
.hero { display:grid; grid-template-columns: 1.2fr .8fr; gap:1.5rem; align-items:center; padding:3.2rem 0 2rem; }
.eyebrow { display:inline-flex; align-items:center; gap:.55rem; color:var(--brand-2); text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; margin:0 0 .9rem; }
.pulse-dot { width:8px; height:8px; border-radius:50%; background:var(--brand-2); box-shadow:0 0 0 0 rgba(69,224,200,.6); animation: ping 1.8s infinite; }
.hero h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); line-height:1.12; margin:0 0 1rem; }
.gradient-text { background: linear-gradient(120deg, var(--brand), var(--brand-2), var(--brand-3), var(--brand)); background-size: 220% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation: shine 5s linear infinite; }
.lead { max-width: 42rem; color:var(--muted); font-size:1.08rem; margin:0; min-height: 3.4em; }
.type-cursor::after { content:"|"; margin-left:2px; color:var(--brand-2); animation: blink 1s steps(1) infinite; }
.meta-row, .actions { display:flex; flex-wrap:wrap; gap:.7rem; }
.meta-row { margin-top:1.2rem; }
.chip { display:inline-flex; align-items:center; padding:.35rem .75rem; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.04); color:var(--muted); font-size:.9rem; backdrop-filter: blur(8px); }
.chip.glow { border-color: rgba(69,224,200,.35); color:#c9fff5; box-shadow: inset 0 0 0 1px rgba(69,224,200,.08), 0 0 18px rgba(69,224,200,.12); }
.actions { margin-top:1.5rem; }
.btn { position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; padding:.8rem 1.2rem; border-radius:999px; text-decoration:none; border:1px solid transparent; transition: transform .2s ease, filter .2s ease, background .2s ease; }
.btn.primary { background: linear-gradient(90deg, var(--brand), #6a8dff 45%, var(--brand-2)); color:white; box-shadow: var(--shadow); }
.btn.primary:hover { filter:brightness(1.06); transform: translateY(-1px); }
.btn.ghost { border-color: var(--border); color:var(--text); background: rgba(255,255,255,.03); }
.btn.ghost:hover { background: rgba(255,255,255,.08); transform: translateY(-1px); }
.btn-shine { position:absolute; inset:0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35), transparent 70%); transform: translateX(-120%); animation: sweep 3.4s ease-in-out infinite; }
.hero-panel { position:relative; min-height: 320px; border-radius: 24px; border:1px solid var(--border); background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); box-shadow: var(--shadow); overflow:hidden; padding:1.2rem; }
.panel-ring { position:absolute; inset:18px; border-radius: 50%; border:1px dashed rgba(122,162,255,.35); animation: spin 18s linear infinite; }
.panel-core { position:relative; z-index:1; height:100%; min-height:280px; display:grid; place-items:center; grid-template-columns: 1fr; gap:.8rem; }
.radar { position:absolute; width:180px; height:180px; border-radius:50%; background: conic-gradient(from 0deg, rgba, rgba 70%, rgba(69,224,200,.35), transparent 100%), radial-gradient(circle, rgba(122,162,255,.18), transparent 65%); border:1px solid rgba(122,162,255,.25); animation: spin 4.5s linear infinite; }
.stat { position:relative; z-index:2; text-align:center; background: rgba(7,11,24,.55); border:1px solid rgba(140,170,255,.16); border-radius:16px; padding:.7rem 1rem; min-width:110px; backdrop-filter: blur(8px); }
.stat strong { display:block; font-size:1.6rem; line-height:1.1; background: linear-gradient(90deg, #fff, var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat span { color:var(--muted); font-size:.85rem; }
.panel-core { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:.75rem; }
.floating-tags { position:absolute; inset:0; pointer-events:none; }
.floating-tags span { position:absolute; font-size:.78rem; color:#dce7ff; background: rgba(10,16,34,.7); border:1px solid rgba(140,170,255,.2); border-radius:999px; padding:.25rem .55rem; animation: drift 7s ease-in-out infinite; }
.floating-tags span:nth-child(1) { left:8%; top:14%; animation-delay:0s; }
.floating-tags span:nth-child(2) { right:10%; top:22%; animation-delay:-1.2s; }
.floating-tags span:nth-child(3) { left:12%; bottom:18%; animation-delay:-2s; }
.floating-tags span:nth-child(4) { right:14%; bottom:24%; animation-delay:-2.8s; }
.floating-tags span:nth-child(5) { left:42%; top:8%; animation-delay:-3.4s; }
.section { margin: 2.2rem 0 3rem; }
.section-head { margin-bottom: 1rem; }
.section-head h2 { margin:0 0 .35rem; font-size:1.5rem; }
.section-sub { margin:0; color:var(--muted); }
.about-grid, .skill-grid, .work-list { display:grid; gap:1rem; }
.about-grid { grid-template-columns: repeat(3, 1fr); }
.skill-grid { grid-template-columns: repeat(2, 1fr); }
.card, .work-item, .contact, .timeline-item { position:relative; overflow:hidden; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid var(--border); border-radius: var(--radius); padding:1.25rem 1.3rem; backdrop-filter: blur(10px); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.card:hover, .work-item:hover, .timeline-item:hover, .contact:hover { transform: translateY(-4px); border-color: rgba(122,162,255,.4); box-shadow: 0 18px 50px rgba(20, 40, 100, .28); }
.card-glow { position:absolute; inset:-40% auto auto -20%; width:180px; height:180px; background: radial-gradient(circle, rgba(122,162,255,.2), transparent 70%); opacity:0; transition: opacity .3s ease; pointer-events:none; }
.card:hover .card-glow, .work-item:hover .card-glow, .timeline-item:hover .card-glow, .contact:hover .card-glow { opacity:1; }
.card h3, .work-item h3, .timeline-item h3 { margin:0 0 .55rem; font-size:1.05rem; }
.card p, .card li, .work-item p, .work-item li, .contact p, .timeline-item li, .muted { color: var(--muted); }
.card ul, .work-item ul, .timeline-item ul { margin:0; padding-left:1.1rem; }
.card li + li, .work-item li + li, .timeline-item li + li { margin-top:.35rem; }
.bars { display:grid; gap:.55rem; margin-top:1rem; }
.bar { display:grid; grid-template-columns: 72px 1fr; gap:.6rem; align-items:center; color:var(--muted); font-size:.86rem; }
.bar i { display:block; height:8px; border-radius:999px; background: rgba(255,255,255,.08); position:relative; overflow:hidden; }
.bar i::after { content:""; position:absolute; inset:0 auto 0 0; width:0; border-radius:inherit; background: linear-gradient(90deg, var(--brand), var(--brand-2)); box-shadow: 0 0 12px rgba(69,224,200,.45); transition: width 1.1s cubic-bezier(.2,.8,.2,1); }
.reveal.in-view .bar i::after { width: var(--v); }
.timeline-head, .work-head { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; margin-bottom:.75rem; }
.timeline-head h3, .work-head h3 { margin-bottom:.2rem; }
.time { color: var(--brand-2); font-size:.92rem; margin:0; white-space:nowrap; }
.stack { color: var(--muted); font-size:.92rem; margin:0; text-align:right; max-width:22rem; }
.work-badge { position:absolute; top:14px; right:16px; font-size:.78rem; letter-spacing:.08em; color: rgba(220,231,255,.75); background: rgba(122,162,255,.12); border:1px solid rgba(122,162,255,.2); border-radius:999px; padding:.2rem .5rem; }
.contact { text-align:left; }
.contact-btn { margin-top:1rem; }
.link { color: var(--brand); text-decoration:none; word-break: break-all; }
footer { display:flex; justify-content:space-between; gap:1rem; color:var(--muted); font-size:.92rem; padding:2rem 0 3rem; border-top:1px solid rgba(255,255,255,.06); }
.reveal { opacity:0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in-view { opacity:1; transform:none; }
@keyframes shine { to { background-position: 220% center; } }
@keyframes sweep { 0%, 55% { transform: translateX(-120%); } 80%, 100% { transform: translateX(120%); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
@keyframes drift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(69,224,200,.55); } 70% { box-shadow: 0 0 0 12px rgba(69,224,200,0); } 100% { box-shadow: 0 0 0 0 rgba(69,224,200,0); } }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes scan { 0% { top: -10%; } 100% { top: 110%; } }
@keyframes grid-drift { to { background-position: 48px 48px; } }
@keyframes blink { 50% { opacity: 0; } }
@media (max-width: 960px) {
  .hero, .about-grid, .skill-grid { grid-template-columns: 1fr; }
  .nav { flex-wrap: wrap; }
  .nav nav { display:flex; flex-wrap:wrap; gap:.35rem .2rem; }
  .nav a { margin-left:0; margin-right:.75rem; }
  .timeline-head, .work-head { flex-direction: column; }
  .stack, .time { text-align:left; }
  footer { flex-direction: column; }
  .hero-panel { min-height: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal { opacity:1; transform:none; }
}