:root{
  --bg:#050507;
  --card:#0b1220;
  --accent:#1e90ff;
  --accent-2:#66b2ff;
  --muted:#9aa7b8;
  --glass: rgba(255,255,255,0.03);
  --radius:14px;
  --max-width:920px;
  font-family: "M PLUS Rounded 1c", system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  color-scheme: dark;
}

/* Reset / base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  padding:36px;
  background:
    radial-gradient(800px 400px at 10% 10%, rgba(30,144,255,0.06), transparent 10%),
    radial-gradient(800px 400px at 90% 90%, rgba(102,178,255,0.03), transparent 10%),
    var(--bg);
  color:#e6eef8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Layout */
.wrap{
  width:100%;
  max-width:var(--max-width);
  display:grid;
  grid-template-columns:320px 1fr;
  gap:28px;
  align-items:start;
}

/* Profile card */
.profile{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.04);
  border-radius:var(--radius);
  padding:20px;
  box-shadow: 0 10px 30px rgba(2,6,23,0.6);
  position:relative;
  overflow:hidden;
}

.avatar{
  width:100%;
  aspect-ratio:1/1;
  border-radius:12px;
  background-size:cover;
  background-position:center;
  box-shadow: inset 0 0 0 4px rgba(0,0,0,0.25), 0 8px 20px rgba(2,6,23,0.6);
  margin-bottom:14px;
}

.name{
  font-size:20px;
  font-weight:700;
  margin:0 0 4px 0;
}
.netname{
  font-size:13px;
  color:var(--muted);
  margin:0 0 12px 0;
}

.bio{
  background: linear-gradient(90deg, rgba(30,144,255,0.03), transparent);
  border-radius:10px;
  padding:12px;
  font-size:14px;
  color:#cfe9ff;
  margin-bottom:12px;
  line-height:1.45;
}

/* Buttons */
.cta{display:flex;gap:10px;margin-bottom:10px}
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
  font-size:14px;
  border:1px solid rgba(255,255,255,0.06);
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s;
  cursor:pointer;
}
.btn:active{transform:translateY(1px)}
.btn-youtube{
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#021122;
  box-shadow: 0 6px 18px rgba(30,144,255,0.14);
}
.btn-tiktok{
  background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  color:var(--accent-2);
  border:1px solid rgba(102,178,255,0.06);
}

/* Chips / meta */
.socials{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.chip{
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,0.02);
  color:var(--muted);
  font-size:13px;
  border:1px solid rgba(255,255,255,0.02);
}

/* Main content */
.main{display:flex;flex-direction:column;gap:18px;min-height:240px}
.hero{
  padding:18px;
  border-radius:var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.03);
  box-shadow: 0 6px 20px rgba(2,6,23,0.6);
}
.hero h2{margin:0 0 8px 0;font-size:20px}
.hero p{margin:0;color:#cfe9ff;font-size:15px}

.stats{display:flex;gap:12px;margin-top:12px;align-items:center;flex-wrap:wrap}
.stat{
  background:linear-gradient(90deg, rgba(30,144,255,0.06), rgba(102,178,255,0.02));
  padding:10px 14px;
  border-radius:12px;
  font-weight:700;
  color:var(--accent-2);
  font-size:14px;
  border:1px solid rgba(30,144,255,0.06);
}

.note{font-size:13px;color:var(--muted);margin-top:6px}

/* Footer */
footer{text-align:center;color:var(--muted);font-size:13px;opacity:0.95;padding-top:6px}

/* Small screens */
@media (max-width:880px){
  .wrap{grid-template-columns:1fr; gap:16px}
  body{padding:20px}
}

/* Decorative pulse */
.pulse{
  position:absolute;
  right:-80px;
  top:-80px;
  width:220px;
  height:220px;
  background: radial-gradient(circle at 30% 30%, rgba(30,144,255,0.08), transparent 15%);
  filter: blur(24px);
  transform: rotate(12deg);
  pointer-events:none;
}

/* Accessibility helpers */
.visually-hidden{
  position:absolute!important;
  height:1px;width:1px;
  overflow:hidden;clip:rect(1px,1px,1px,1px);
  white-space:nowrap;border:0;padding:0;margin:-1px;
}

/* Focus styles */
a:focus{outline:3px solid rgba(30,144,255,0.28);outline-offset:3px;border-radius:8px}