:root{
  --bg:#0f0f10;
  --fg:#f2f2f2;
  --muted:#9b9b9f;
  --line:rgba(255,255,255,.12);
  --link:#f4f4f5;
  --label:#d8d0bd;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  min-height:100%;
  background:radial-gradient(circle at 50% 42%,#18181a 0,#101011 42%,#0b0b0c 100%);
  color:var(--fg);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  display:grid;
  place-items:center;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.shell{
  width:min(92vw,620px);
  text-align:center;
  padding:48px 18px;
  animation:rise .5s ease both;
}
.logo{
  margin:0;
  font-size:clamp(2.65rem,7vw,4.45rem);
  line-height:1;
  font-weight:750;
  letter-spacing:-.075em;
  color:#fff;
  text-shadow:0 18px 50px rgba(255,255,255,.08);
}
.logo .mei{color:#d4c4a5}
.tagline{
  margin:14px 0 0;
  color:var(--muted);
  font-size:15px;
  letter-spacing:.01em;
}
.socials{
  height:44px;
  margin:25px auto 9px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
}
.social{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  color:#efefef;
  opacity:.82;
  position:relative;
  transition:opacity .16s ease,transform .16s ease,filter .16s ease;
  outline:none;
}
.social svg{width:20px;height:20px;display:block;fill:currentColor}
.social:hover,.social:focus-visible{
  opacity:1;
  transform:translateY(-3px) scale(1.08);
  filter:drop-shadow(0 8px 20px rgba(255,255,255,.14));
}
.social::after{
  content:attr(data-label);
  position:absolute;
  left:50%;
  top:30px;
  transform:translateX(-50%) translateY(2px);
  color:var(--label);
  font-size:11px;
  font-weight:600;
  letter-spacing:.02em;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .14s ease, transform .14s ease;
}
.social:hover::after,.social:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}
.nav{
  margin:27px auto 0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:8px;
  color:#c8c8cc;
  font-size:13px;
  line-height:1.8;
}
.nav a{transition:color .14s ease,text-shadow .14s ease}
.nav a:hover,.nav a:focus-visible{color:#fff;text-shadow:0 0 18px rgba(255,255,255,.16)}
.dot{color:#5f5f66;user-select:none}
.card{
  width:min(92vw,720px);
  text-align:left;
  padding:32px;
  border:1px solid var(--line);
  border-radius:22px;
  background:rgba(255,255,255,.035);
  box-shadow:0 30px 80px rgba(0,0,0,.28);
  backdrop-filter:blur(10px);
}
.card h1{margin:0 0 12px;font-size:2rem;letter-spacing:-.04em}
.card h2{margin:28px 0 8px;font-size:1rem;color:#fff}
.card p,.card li{color:#b9b9bf;font-size:15px;line-height:1.75}
.card ul{padding-left:20px}.back{display:inline-block;margin-top:22px;color:#d4c4a5;font-size:13px}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:520px){.socials{gap:15px}.nav{max-width:330px}.card{padding:24px}.logo{letter-spacing:-.06em}}



/* DukMei final compact xge-style refinements */
:root{
  --duk-bg:#0b0b0d;
  --duk-text:#eeeeef;
  --duk-muted:#8f8f96;
  --duk-dim:#6f6f76;
  --duk-line:rgba(255,255,255,.08);
}
body{
  background:var(--duk-bg);
  color:var(--duk-text);
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
.nav,.links,.nav-links{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:0;
  width:100%;
  margin-top:28px;
  color:var(--duk-dim);
  font-size:13px;
  line-height:1.9;
}
.nav a,.links a,.nav-links a{
  color:var(--duk-muted);
  text-decoration:none;
  padding:0 2px;
  transition:color .16s ease, transform .16s ease;
}
.nav a:hover,.links a:hover,.nav-links a:hover{
  color:#fff;
  transform:translateY(-1px);
}
.dot,.sep{
  color:var(--duk-dim);
  opacity:.72;
  padding:0 8px;
}
.socials,.icons{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  margin-top:17px;
  height:22px;
}
.social,.icon{
  width:18px!important;
  height:18px!important;
  display:inline-grid;
  place-items:center;
  color:var(--duk-muted);
  position:relative;
}
.social svg,.icon svg{
  width:17px!important;
  height:17px!important;
  max-width:17px!important;
  max-height:17px!important;
  fill:currentColor;
}
.social:after,.icon:after{
  content:attr(data-label);
  position:absolute;
  left:50%;
  top:25px;
  transform:translateX(-50%) translateY(-2px);
  color:var(--duk-dim);
  font-size:11px;
  line-height:1;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease, transform .16s ease;
}
.social:hover:after,.icon:hover:after{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.page{
  min-height:100svh;
  display:flex;
  justify-content:center;
  padding:78px 24px 48px;
}
.card{
  width:min(100%,640px);
  animation:dukRise .38s ease both;
}
.page-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:46px;
}
.back,.mini-brand{
  color:var(--duk-muted);
  font-size:13px;
  text-decoration:none;
}
.back:hover,.mini-brand:hover{color:#fff}
.card h1{
  margin:0 0 12px;
  font-size:24px;
  line-height:1.15;
  font-weight:500;
  letter-spacing:-.035em;
}
.card h2{
  margin:30px 0 10px;
  font-size:13px;
  color:var(--duk-text);
  font-weight:500;
}
.card p,.card li{
  color:var(--duk-muted);
  font-size:13px;
  line-height:1.8;
}
.card ul{list-style:none;margin:10px 0 0;padding:0}
.card li{padding:8px 0;border-bottom:1px solid var(--duk-line)}
.inline-links{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.inline-links a,.cta{
  color:var(--duk-text);
  text-decoration:none;
  font-size:13px;
  border-bottom:1px solid rgba(255,255,255,.22);
  padding-bottom:2px;
  transition:opacity .16s ease, transform .16s ease;
}
.inline-links a:hover,.cta:hover{opacity:.78;transform:translateY(-1px)}
.skills{
  margin-top:18px;
  display:grid;
  gap:15px;
}
.skill{
  display:grid;
  gap:7px;
}
.skill-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--duk-muted);
  font-size:12px;
}
.skill-track{
  height:7px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
}
.skill-fill{
  height:100%;
  width:var(--value);
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,.42), rgba(255,255,255,.86));
  animation:skillGrow .9s ease both;
}
@keyframes skillGrow{from{width:0}to{width:var(--value)}}
@keyframes dukRise{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}