@import url("https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css");

@font-face {
  font-family: "SejongGeulggot";
  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/2410-2@1.0/SejongGeulggot.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

:root{
  /* EDIT BACKGROUND HERE */
  --bg:#0b0d10;
  --bg2:#0f1318;

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.62);
  --hair: rgba(255,255,255,.10);

  --avatar-border: rgba(255,255,255,.35);
  --avatar-shadow: 0 18px 60px rgba(0,0,0,.62);

  /* widths */
  --content-max: 980px;
  --pill-max: 760px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{ overflow-x:hidden; }

body{
  margin:0;
  font-family:"SejongGeulggot",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background: var(--bg);   /* solid only */
  overflow-x:hidden;
}

@supports (-webkit-touch-callout: none) {
  .pill {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transform: translate3d(0,0,0);
  }
}


.bg-glow{
  position: fixed;
  inset: -200px;               /* overscan prevents edge seams */
  pointer-events: none;
  z-index: -1;

  /* IMPORTANT: iOS scroll seam fix */
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  will-change: transform;

  background:
    radial-gradient(1100px 500px at 20% -10%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(900px 380px at 80% 0%, rgba(255,255,255,0.04), transparent 55%),
    radial-gradient(700px 320px at 50% 20%, rgba(255,255,255,0.06), transparent 62%),
    radial-gradient(900px 480px at 50% 120%, rgba(255,255,255,0.04), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));

  background-repeat: no-repeat;
}


.page{
  width:min(var(--content-max),100%);
  margin:0 auto;
  padding:26px 14px 10px;
}

.profile{
  display:grid;
  justify-items:center;
  text-align:center;
  padding-top:8px;
}

.avatar{
  width:clamp(130px,22vw,180px);
  height:clamp(130px,22vw,180px);
  border-radius:999px;
  object-fit:cover;
  box-shadow:var(--avatar-shadow);
  outline:2px solid var(--avatar-border);
  outline-offset:8px;
}

.name{ margin:18px 0 6px; font-size:clamp(26px,3.8vw,36px); line-height:1.1; }
.tagline{ margin:0; color:var(--muted); font-size:14px; max-width:60ch; }

.rule{ height:1px; background:var(--hair); margin:18px 0; }
.rule.soft{ background:rgba(255,255,255,0.07); margin:16px 0; }

.section{ padding:6px 0; }
.section-head{ display:flex; align-items:center; margin-bottom:10px; }
.section-mini{ color:rgba(255,255,255,0.72); font-size:12px; letter-spacing:.3px; }

/* alignment helpers */
.align-responsive{ justify-content:flex-start; }
.center-always{ justify-content:center; }
.centered-block{ display:grid; justify-content:center; }

@media (min-width: 860px){
  .align-responsive{ justify-content:center; }
  .centered-on-desktop{ justify-content:center; text-align:center; }
}

/* Pills */
.pills{
  display:grid;
  gap:10px;
  justify-items:center;
}

.pill{
  width:min(var(--pill-max),100%);
  display:grid;
  grid-template-columns: 20px 1fr 20px;
  align-items:center;
  gap:10px;

  padding:11px 14px;
  border-radius:999px;
  text-decoration:none;
  color:var(--text);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition:transform 120ms ease, filter 120ms ease;
}

.pill:hover{ transform:translateY(-1px); filter:brightness(1.06); }
.pill i.ph{ font-size:16px; opacity:.95; }

.pill-text{
  font-size:13px;
  text-align:center;
  justify-self:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.pill > i.ph:last-child{ opacity:.7; justify-self:end; }

/* BLUE-ONLY gradients for all pill types */
.pill.tg{
  background: linear-gradient(90deg,
    rgba(80, 170, 255, 0.22),
    rgba(255,255,255, 0.06)
  );
}

.pill.tw{
  background: linear-gradient(90deg,
    rgba(40, 150, 255, 0.20),
    rgba(255,255,255, 0.06)
  );
}

.pill.qq{
  background: linear-gradient(90deg,
    rgba(0, 170, 255, 0.18),
    rgba(255,255,255, 0.06)
  );
}

.pill.phn{
  background: linear-gradient(90deg,
    rgba(60, 190, 255, 0.16),
    rgba(255,255,255, 0.06)
  );
}

.pill.adr{
  background: linear-gradient(90deg,
    rgba(90, 140, 255, 0.16),
    rgba(255,255,255, 0.06)
  );
}

/* Useful links: neutral blue glass */
.pill.link{
  background: linear-gradient(90deg,
    rgba(120, 170, 255, 0.12),
    rgba(255,255,255, 0.05)
  );
}

/* Languages */
.lang-vert{ gap:10px; padding-top:2px; }
.lang-line{
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(255,255,255,.90);
  font-size:14px;
}
.flag{ font-size:16px; }

/* QQ brand icon (SVG mask) */
.brand-icon{
  width:16px;
  height:16px;
  display:inline-block;
  background: currentColor;
  opacity:.95;
  -webkit-mask: no-repeat center / contain;
  mask: no-repeat center / contain;
}

/* Keep your existing URL if it works for you */
.brand-icon.qq{
  -webkit-mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@9.19.0/icons/tencentqq.svg");
  mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@9.19.0/icons/tencentqq.svg");
}

/* Hobbies */
.hobbies{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.hob{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(255,255,255,0.04);
  font-size:13px;
}
.hob i{ opacity:.9; }
.dot{ opacity:.35; user-select:none; }

/* OC */
.plain{ margin:0; color:rgba(255,255,255,0.86); line-height:1.6; }

/* ASCII */
.ascii-center{
  display:grid;
  place-items:center;
  width:100%;
  overflow:hidden; /* prevents page swipe */
}

.ascii-scale{
  display:inline-block;
  transform-origin: top center;
  margin: 0 auto; /* helps centering */
}

.ascii{
  margin:0;
  color:rgba(255,255,255,0.92);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  font-size:9px;
  line-height:1.05;
  text-align:left;
  white-space:pre;
  overflow:visible;
}

/* Footer */
.footer{ padding:18px 14px 26px; }
.footer-inner{
  width:min(var(--content-max),100%);
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  align-items:center;
  color:rgba(255,255,255,0.60);
  font-size:12px;
}
.sep{ opacity:.35; }
.beian{ color:rgba(255,255,255,0.70); text-decoration:none; }
.beian:hover{ text-decoration:underline; }