/* ── self-hosted fonts (OFL) — no third-party requests ── */
@font-face{
  font-family:"Space Grotesk";
  src:url("fonts/space-grotesk-var.woff2") format("woff2");
  font-weight:300 700;
  font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("fonts/jetbrains-mono-var.woff2") format("woff2");
  font-weight:100 800;
  font-display:swap;
}

:root{
  --bg:#060709;
  --ink:#e9edf3;
  --mut:#8a93a3;
  --mint:#6ff2c5;
  --mint-deep:#052018;
  --vio:#a08bff;
  --line:rgba(255,255,255,.08);
  --card:rgba(12,14,19,.82);
  --mx:50%; --my:35%;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Space Grotesk",system-ui,sans-serif;
  min-height:100dvh;
  display:grid;
  place-items:center;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--mint);color:var(--mint-deep)}

/* ── ambient atmosphere ─────────────────────── */
#sky{position:fixed;inset:0;z-index:0;display:block;pointer-events:none}
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%,transparent 40%,rgba(0,0,0,.55) 100%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.04;
  background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2"/></filter><rect width="120" height="120" filter="url(%23n)" opacity="0.6"/></svg>');
}
.aurora{
  position:fixed;z-index:0;pointer-events:none;filter:blur(90px);opacity:.2;
  border-radius:50%;
  animation:drift 26s ease-in-out infinite alternate;
}
.aurora.a{width:44vmax;height:30vmax;left:-10vmax;top:-12vmax;background:radial-gradient(circle,#1d5f4a,transparent 70%)}
.aurora.b{width:38vmax;height:34vmax;right:-12vmax;bottom:-14vmax;background:radial-gradient(circle,#372a6e,transparent 70%);animation-delay:-13s}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(6vmax,4vmax,0) scale(1.15)}
}

main{
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  padding:24px 16px;
  width:100%;
}

/* ── the card ───────────────────────────────── */
.card{
  position:relative;
  width:min(440px,94vw);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:24px;
  padding:28px 26px 24px;
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  transform-style:preserve-3d;
  will-change:transform;
}
.card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(340px circle at var(--mx) var(--my),rgba(111,242,197,.09),transparent 65%);
  transition:opacity .3s;
}

.top{display:flex;align-items:center;gap:16px}
.avatar-wrap{position:relative;width:66px;height:66px;flex:none}
.avatar-wrap::before{
  content:"";position:absolute;inset:-3px;border-radius:50%;z-index:-1;
  background:conic-gradient(from var(--ang,0deg),var(--mint),var(--vio),transparent 65%,var(--mint));
  animation:spin 5s linear infinite;
}
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes spin{to{--ang:360deg}}
.avatar{
  width:100%;height:100%;border-radius:50%;display:block;
  object-fit:cover;border:3px solid var(--bg);
  filter:saturate(1.05);
}
.status{
  position:absolute;right:0;bottom:1px;width:13px;height:13px;border-radius:50%;
  background:#3ddc84;border:2.5px solid var(--bg);
}
.status::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  border:2px solid #3ddc84;opacity:.7;
  animation:ping 2.2s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping{75%,100%{transform:scale(1.9);opacity:0}}

.eyebrow{
  font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mint);
}
h1{font-size:32px;font-weight:700;letter-spacing:-.02em;line-height:1.05;margin-top:2px}
.handle{font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--mut);margin-top:4px}
.handle a{color:var(--mut);text-decoration:none;border-bottom:1px dotted var(--mut)}
.handle a:hover{color:var(--ink)}

.bio{
  margin-top:14px;
  font-family:"JetBrains Mono",monospace;font-size:12.5px;line-height:1.55;color:#c4ccd8;
  background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:11px;padding:9px 12px;
}
.bio .p{color:var(--vio);margin-right:8px}

/* ── 3 latest updated repos ── */
.repos-section{
  margin-top:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.repos-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 2px;
  font-family:"JetBrains Mono",monospace;
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mut);
}
.repo-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.repo-item{
  display:flex;
  flex-direction:column;
  gap:3px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--line);
  border-radius:12px;
  padding:9px 12px;
  text-decoration:none;
  color:inherit;
  transition:background .2s, border-color .2s, transform .2s;
  will-change:transform;
}
.repo-item:hover{
  background:rgba(255,255,255,.05);
  border-color:rgba(111,242,197,.35);
  transform:translateY(-1px);
}
.repo-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.repo-name{
  font-family:"JetBrains Mono",monospace;
  font-size:12.5px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-.01em;
}
.repo-name .arr{
  font-size:10.5px;
  color:var(--mut);
  margin-left:2px;
  transition:transform .2s, color .2s;
  display:inline-block;
}
.repo-item:hover .repo-name .arr{
  transform:translate(2px,-2px);
  color:var(--mint);
}
.repo-lang{
  font-family:"JetBrains Mono",monospace;
  font-size:9.5px;
  padding:1px 6px;
  border-radius:5px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:var(--mut);
  white-space:nowrap;
}
.lang-python{color:#ffcf5c;border-color:rgba(255,207,92,.25);background:rgba(255,207,92,.06)}
.lang-ts{color:#5eb4ff;border-color:rgba(94,180,255,.25);background:rgba(94,180,255,.06)}
.lang-js{color:#f7df1e;border-color:rgba(247,223,30,.25);background:rgba(247,223,30,.06)}
.lang-go{color:#00acd7;border-color:rgba(0,172,215,.25);background:rgba(0,172,215,.06)}
.lang-other{color:var(--vio);border-color:rgba(160,139,255,.25);background:rgba(160,139,255,.06)}

.repo-desc{
  font-size:11px;
  line-height:1.4;
  color:var(--mut);
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
}
.repo-meta{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:"JetBrains Mono",monospace;
  font-size:9.5px;
  color:#6f7887;
  margin-top:1px;
}
.repo-star{
  color:#e3b341;
}

/* ── actions ── */
.actions{display:flex;gap:8px;margin-top:18px}
.btn{
  position:relative;
  display:flex;align-items:center;justify-content:center;gap:8px;
  height:46px;border-radius:12px;flex:1;
  font-family:"Space Grotesk",sans-serif;font-size:14px;font-weight:700;
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:box-shadow .25s,background .25s,border-color .25s;
  will-change:transform;
}
.btn svg{width:17px;height:17px;flex:none}
.btn.primary{background:var(--mint);color:var(--mint-deep)}
.btn.primary:hover{box-shadow:0 6px 30px rgba(111,242,197,.35)}
.btn.ghost{background:rgba(255,255,255,.03);border-color:var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:rgba(160,139,255,.6);box-shadow:0 6px 30px rgba(160,139,255,.18)}
.btn.copy{flex:0 0 46px}
.btn:focus-visible{outline:2px solid var(--mint);outline-offset:3px}

/* ── toast ── */
#toast{
  position:fixed;left:50%;bottom:34px;transform:translate(-50%,80px);
  background:#0d1117;border:1px solid var(--line);border-radius:12px;
  padding:10px 18px;z-index:9;
  font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--mint);
  opacity:0;transition:transform .35s cubic-bezier(.2,.9,.3,1.2),opacity .3s;
  pointer-events:none;
}
#toast.on{transform:translate(-50%,0);opacity:1}

@media (max-width:480px){
  h1{font-size:28px}
  .card{padding:22px 18px 20px}
  main{padding:16px 12px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition:none !important}
}