:root{
  --bg: #050711;
  --panel: rgba(18,21,40,0.8);
  --glass: rgba(255,255,255,0.05);
  --stroke: rgba(255,255,255,0.15);
  --text: #e8ecff;
  --muted: #9da7c5;
  --accent-1: #7af2c5;
  --accent-2: #6fa8ff;
  --accent-3: #ff7dd1;
  --focus: #ffc861;
  font-family: 'Space Grotesk', 'DM Mono', system-ui, -apple-system, sans-serif;
}
*{ box-sizing:border-box; }
body{
  margin:0;
  color:var(--text);
  background: radial-gradient(circle at 10% 20%, rgba(122,242,197,0.12) 0, transparent 25%),
              radial-gradient(circle at 90% 70%, rgba(255,125,209,0.15) 0, transparent 30%),
              radial-gradient(circle at 30% 80%, rgba(111,168,255,0.12) 0, transparent 25%),
              var(--bg);
  min-height:100vh;
  padding: 28px clamp(16px, 3vw, 48px) 72px;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
a:hover{ color:var(--accent-2); }

.bg-grid{
  position:fixed; inset:0; pointer-events:none;
  background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size:120px 120px;
  mask-image: radial-gradient(circle at 50% 40%, rgba(0,0,0,0.9), transparent 70%);
  z-index:0;
}
.bg-glow{ position:fixed; filter:blur(120px); opacity:.4; z-index:0; }
.bg-glow-1{ width:480px; height:480px; background:var(--accent-2); top:-120px; left:-80px; }
.bg-glow-2{ width:420px; height:420px; background:var(--accent-3); bottom:-120px; right:-60px; }

.glass-nav{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 18px;
  background:linear-gradient(120deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border:1px solid var(--stroke);
  border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,0.35);
  backdrop-filter: blur(12px);
  margin-bottom:28px;
}
.brand{ display:flex; gap:12px; align-items:center; }
.brand-title{ font-weight:700; letter-spacing:0.04em; text-transform:uppercase; font-size:15px; }
.brand-sub{ font-size:13px; color:var(--muted); }
.orb{
  width:16px; height:16px; border-radius:999px;
  background:radial-gradient(circle at 30% 30%, #fff, var(--accent-1));
  box-shadow:0 0 18px var(--accent-1), 0 0 32px rgba(122,242,197,0.45);
}

.nav-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:12px;
  background:rgba(255,255,255,0.08);
  border:1px solid var(--stroke);
  color:var(--text);
  font-weight:600; letter-spacing:0.01em;
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.chip[type=\"button\"], button.chip{ border:0; cursor:pointer; font:inherit; }
.chip:hover{ transform:translateY(-2px); border-color:var(--accent-2); background:rgba(111,168,255,0.12); }
.chip-ghost{ background:transparent; }
.mode-toggle{ position:relative; display:inline-flex; align-items:center; gap:12px; padding:8px 14px 8px 6px; border-radius:16px; border:1px solid var(--stroke); background:rgba(255,255,255,0.07); cursor:pointer; font-weight:700; }
.mode-toggle input{
  position:absolute;
  opacity:0;
  width:46px;
  height:22px;
  left:6px;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  cursor:pointer;
}

.mode-toggle .slider{
  position:relative;
  width:46px;
  height:22px;
  border-radius:999px;
  background:rgba(255,255,255,0.12);
  border:1px solid var(--stroke);
  transition:background .2s ease;
}

.mode-toggle .slider::after{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--accent-2),var(--accent-3));
  box-shadow:0 4px 12px rgba(0,0,0,0.35);
  transform: translateX(0);
  transition:transform .2s ease;
}

.mode-toggle input:checked + .slider{ background:rgba(111,168,255,0.18); }
.mode-toggle input:checked + .slider::after{ transform:translateX(24px); }
.toggle-label{ font-size:13px; color:var(--muted); }

.hero{ display:grid; grid-template-columns:1.2fr 0.8fr; gap:32px; align-items:center; position:relative; z-index:1; margin-bottom:32px; }
.hero-text .mega{ font-size: clamp(36px, 4vw, 56px); margin:8px 0 16px; letter-spacing:-0.02em; }
.hero-text .lead{ max-width:620px; color:var(--muted); font-size:20px; }
.eyebrow{ text-transform:uppercase; letter-spacing:0.1em; font-size:12px; color:var(--accent-1); margin:0; }
.hero-meta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.meta-pill{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px;
  border-radius:14px; border:1px solid var(--stroke);
  background:rgba(255,255,255,0.05);
  color:var(--muted);
  font-size:14px;
}

.hero-portrait{ justify-self:end; display:flex; align-items:center; gap:18px; }
.portrait-shell{ position:relative; width:200px; height:200px; border-radius:26px; overflow:hidden; border:1px solid var(--stroke); box-shadow:0 24px 60px rgba(0,0,0,0.35); }
.portrait-shell img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.1); }
.pulse-ring{
  position:absolute; inset:-10px; border-radius:30px; border:2px solid rgba(111,168,255,0.4);
  animation:pulse 3s ease-in-out infinite;
}
@keyframes pulse{ 0%{ transform:scale(0.96); opacity:.8;} 50%{ transform:scale(1.02); opacity:.35;} 100%{ transform:scale(0.96); opacity:.8;} }
.stat-stack{ display:grid; gap:8px; }
.stat{ padding:10px 14px; border:1px solid var(--stroke); border-radius:12px; background:rgba(255,255,255,0.04); width:180px; }
.stat-label{ font-size:20px; font-weight:700; color:var(--accent-2); }
.stat-desc{ color:var(--muted); font-size:13px; }

.graph-stage{ position:relative; z-index:1; margin-top:20px; }
.graph-topbar{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; align-items:center; margin-bottom:12px; }
.graph-title{ display:flex; gap:10px; align-items:center; }
.graph-title h2{ margin:0; font-size:24px; }
.tiny-dot{ width:10px; height:10px; border-radius:50%; background:linear-gradient(120deg, var(--accent-1), var(--accent-3)); box-shadow:0 0 12px rgba(255,255,255,0.3); }
.legend{ display:flex; flex-wrap:wrap; gap:10px; color:var(--muted); font-size:13px; }
.legend-item{ display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:12px; background:rgba(255,255,255,0.04); border:1px solid var(--stroke); }
.dot{ width:12px; height:12px; border-radius:50%; display:inline-block; }
.dot-core{ background:var(--accent-1); box-shadow:0 0 10px rgba(122,242,197,0.7); }
.dot-project{ background:var(--accent-2); box-shadow:0 0 10px rgba(111,168,255,0.7); }
.dot-focus{ background:var(--focus); box-shadow:0 0 10px rgba(255,200,97,0.7); }
.dot-exp{ background:#ff9e7d; box-shadow:0 0 10px rgba(255,158,125,0.7); }
.dot-skill{ background:#a08bff; box-shadow:0 0 10px rgba(160,139,255,0.7); }
.dot-contact{ background:var(--accent-3); box-shadow:0 0 10px rgba(255,125,209,0.7); }

.graph-shell{ position:relative; border:1px solid var(--stroke); border-radius:20px; overflow:hidden; background:linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); box-shadow:0 30px 90px rgba(0,0,0,0.45); min-height:600px; height:clamp(560px, 75vh, 960px); }
#graph-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; cursor:grab; z-index:1; }
.link{ stroke:rgba(255,255,255,0.25); stroke-width:1.3px; opacity:0.6; transition:opacity .2s ease; }
.node circle{ stroke:rgba(255,255,255,0.35); stroke-width:2px; cursor:pointer; transition:transform .2s ease, filter .2s ease; }
.node text{ pointer-events:none; font-size:13px; fill:var(--text); text-shadow:0 2px 8px rgba(0,0,0,0.5); }
.node.hovered circle, .node.selected circle{ filter:drop-shadow(0 0 12px rgba(255,255,255,0.4)); transform:scale(1.06); }
.link.active{ opacity:1; stroke:var(--accent-2); }

.drawer{
  position:absolute; right:20px; top:20px; width:240px; max-height:80vh;
  background:var(--panel); border:1px solid var(--stroke); border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,0.45);
  padding:14px; display:none; flex-direction:column; gap:10px; z-index:2;
}
.drawer.open{ display:flex; animation:pop .2s ease; }
.drawer-header{ display:flex; justify-content:space-between; align-items:center; }
.drawer-list{ display:grid; gap:8px; overflow:auto; }
.drawer button{ width:100%; }
.drawer .chip{ justify-content:flex-start; width:100%; }
@keyframes pop{ from{ transform:translateY(-8px); opacity:0;} to{ transform:translateY(0); opacity:1;} }

.detail-panel{
  position:absolute; left:20px; top:20px; width:min(760px, 52vw); max-width:97vw; max-height:80vh;
  background:var(--panel); border:1px solid var(--stroke); border-radius:16px;
  padding:18px; display:flex; flex-direction:column; gap:12px; z-index:2;
  box-shadow:0 24px 60px rgba(0,0,0,0.45);
}
.panel-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
#panel-title{ margin:6px 0; font-size:22px; }
.panel-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.panel-body{ color:var(--muted); font-size:15px; line-height:1.6; overflow:auto; max-height:56vh; }
.panel-img-wrap{ position:relative; }
.panel-body img{ width:100%; height:320px; max-height:320px; object-fit:contain; background:rgba(255,255,255,0.03); border-radius:12px; border:1px solid var(--stroke); box-shadow:0 12px 32px rgba(0,0,0,0.35); }
.panel-body ul{ padding-left:18px; margin:10px 0; color:var(--text); }
.panel-body .tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.tag{ padding:6px 10px; border-radius:10px; border:1px solid var(--stroke); background:rgba(255,255,255,0.04); font-size:12px; color:var(--muted); }
.link-btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:10px; border:1px solid var(--stroke); background:rgba(111,168,255,0.12); color:var(--text); font-weight:600; }
.link-btn i{ color:var(--accent-2); }
.img-link{ position:absolute; right:12px; bottom:12px; padding:8px 12px; border-radius:10px; background:rgba(17,24,39,0.7); border:1px solid var(--stroke); color:var(--text); font-weight:600; text-decoration:none; box-shadow:0 8px 20px rgba(0,0,0,0.35); }
.text-view{ display:none; padding:30px 0 60px; }
body.text-mode .graph-stage{ display:none; }
body.text-mode .legend,
body.text-mode .node-prompt{ display:none; }
body.text-mode .hero-meta,
body.text-mode #drawer-toggle{ display:none; }
body.text-mode #text-view{ display:block; }
.text-view-inner{ display:grid; gap:24px; }
.text-view .text-section h3, .text-view h2{ margin-bottom:12px; }
.text-cards{ display:grid; gap:12px; }
.text-card{ padding:16px; border:1px solid var(--stroke); border-radius:14px; background:rgba(255,255,255,0.03); box-shadow:0 12px 40px rgba(0,0,0,0.35); }
.text-card h4{ margin:0 0 6px; }
.text-card .tags{ margin-top:8px; }
.text-card .tag{ display:inline-flex; }
.text-card .links{ margin-top:8px; display:flex; flex-wrap:wrap; gap:8px; }
.text-about h2{ margin-bottom:8px; }
.text-about #text-about{ color:var(--muted); line-height:1.6; }
.text-img{ margin-bottom:10px; }
.text-img img{ width:100%; max-height:220px; object-fit:contain; border-radius:12px; border:1px solid var(--stroke); background:rgba(255,255,255,0.03); box-shadow:0 8px 20px rgba(0,0,0,0.35); }
.pill-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.pill{ padding:8px 12px; border-radius:12px; border:1px solid var(--stroke); background:rgba(255,255,255,0.06); color:var(--muted); font-weight:600; font-size:13px; }
.text-skills-grid{ display:grid; gap:12px; }
.panel-mini{ margin-top:10px; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,0.05); border:1px dashed var(--stroke); font-size:13px; color:var(--muted); }
.actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }

.focus-pills{ display:flex; flex-wrap:wrap; gap:10px; }
.focus-pill{ padding:8px 12px; border-radius:999px; background:rgba(255,255,255,0.06); border:1px solid var(--stroke); color:var(--muted); font-size:13px; }

.footer{ margin-top:40px; }
.footer-inner{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; color:var(--muted); font-size:14px; border-top:1px solid var(--stroke); padding-top:16px; }
.footer-links{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.footer a{ color:var(--text); }

.highlight{ color:var(--accent-1); font-weight:600; }

@media (max-width: 960px){
  .hero{ grid-template-columns:1fr; }
  .hero-portrait{ justify-self:start; }
  .graph-shell{ min-height:520px; }
  .detail-panel{ position:relative; width:100%; left:0; top:0; max-height:none; margin-bottom:12px; }
  .drawer{ position:relative; width:100%; right:0; top:0; display:none; }
}
@media (max-width: 640px){
  body{ padding:18px 14px 60px; }
  .glass-nav{ flex-direction:column; align-items:flex-start; gap:12px; }
  .nav-actions{ width:100%; }
  .hero-text .mega{ font-size:34px; }
  .graph-topbar{ flex-direction:column; align-items:flex-start; }
  .legend{ width:100%; }
  .panel-actions{ width:100%; justify-content:flex-start; }
  #graph-canvas{ height:65vh; }
  .node text{ font-size:11px; }
}