:root{
  --bg:#080b17; --panel:#0c1224; --text:#e9eefb; --muted:#97a0b8;
  --accent:#22d3ee; --accent2:#7c3aed; --glow:#14b8a6; --border:#1a2340; --card:#0b1226;
}
html.light{
  --bg:#f8fbff; --panel:#ffffff; --text:#0b1020; --muted:#51607a;
  --accent:#0ea5e9; --accent2:#7c3aed; --glow:#0ea5e9; --border:#e6e8ee; --card:#ffffff;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(1200px 600px at 100% -10%, color-mix(in oklab,var(--accent) 10%, transparent), transparent),
            radial-gradient(1000px 600px at -10% 10%, color-mix(in oklab,var(--accent2) 12%, transparent), transparent),
            var(--bg);
  color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:0 1rem}
.muted{color:var(--muted)} .small{font-size:.9rem}

.bg.fx{position:fixed;inset:0;pointer-events:none;background:
    linear-gradient(transparent, transparent 70%, color-mix(in oklab, var(--accent) 10%, transparent)),
    repeating-linear-gradient(90deg, color-mix(in oklab,var(--panel) 95%, transparent) 0 1px, transparent 1px 60px);
  mask: radial-gradient(70% 60% at 50% -10%, black, transparent 70%);
  z-index:-1; animation:bgmove 16s linear infinite}
@keyframes bgmove{0%{background-position:0 0,0 0}100%{background-position:400px 0,120px 0}}

.site-header{border-bottom:1px solid var(--border);padding:1.2rem 0;background:color-mix(in oklab, var(--panel) 88%, transparent);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10}
.head{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.title{margin:.2rem 0;font-size:clamp(1.6rem,4vw,2.3rem);font-weight:800;letter-spacing:.3px}
.tag{margin:0;color:var(--muted)}
.accent{background:linear-gradient(135deg,var(--accent2),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}

.section{padding:2.2rem 0;border-bottom:1px solid var(--border)}
.card{border:1px solid var(--border);border-radius:16px;padding:1rem;background:var(--card)}
.glass{background:linear-gradient( to bottom right, color-mix(in oklab,var(--panel) 80%, transparent), color-mix(in oklab,var(--panel) 92%, transparent)); backdrop-filter: blur(6px)}
.neon{position:relative}
.neon:before{content:'';position:absolute;inset:-1px;border-radius:16px;pointer-events:none;
  background:linear-gradient(135deg,var(--accent),transparent 40%, var(--accent2));filter:blur(8px);opacity:.35}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.skills{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.skills-col h3{margin-top:.2rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:.4rem 0}
.chips li{padding:.35rem .65rem;border:1px solid var(--border);border-radius:999px;background:color-mix(in oklab, var(--panel) 94%, transparent)}
.meters label{display:flex;align-items:center;gap:.6rem;margin:.4rem 0}
meter{width:100%;height:12px;border-radius:999px;background:var(--panel)}
meter::-webkit-meter-bar{background:var(--panel);border-radius:999px}
meter::-webkit-meter-optimum-value{background:linear-gradient(90deg,var(--glow),var(--accent));border-radius:999px}

.timeline{list-style:none;padding:0;margin:0;border-left:2px solid color-mix(in oklab, var(--accent) 50%, transparent);margin-left:.6rem}
.timeline li{position:relative;margin:1rem 0 1.5rem 0;padding-left:1rem}
.timeline .dot{position:absolute;left:-9px;top:.3rem;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 18px color-mix(in oklab,var(--accent) 60%, transparent)}

.btn{border:1px solid var(--border);background:linear-gradient(135deg,color-mix(in oklab,var(--panel) 90%, transparent), color-mix(in oklab,var(--panel) 80%, transparent));
  color:var(--text);border-radius:12px;padding:.55rem .9rem;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.12);transition:transform .15s ease, border-color .2s ease}
.btn:hover{transform:translateY(-2px);border-color:color-mix(in oklab,var(--accent) 40%, var(--border))}
.btn.ghost{background:transparent;border-color:color-mix(in oklab,var(--accent) 40%, var(--border))}

.intro{margin-top:1rem}
.section-title{margin:.2rem 0 1rem 0;font-size:1.4rem;letter-spacing:.3px}

.footer{padding:2rem 0;color:var(--muted)}
@media (max-width: 780px){
  .skills{grid-template-columns:1fr}
}