:root{
  --bg:#fff7fb;
  --fg:#16161a;
  --muted:#6b6172;
  --pill:#ffffff;
  --border:rgba(22,22,26,.10);
  --accent:#d85aa6;
}

body{
  margin:0;
  background: radial-gradient(1200px 600px at 20% 10%, rgba(216,90,166,.10), transparent 60%),
              radial-gradient(900px 500px at 80% 0%, rgba(70,130,255,.10), transparent 55%),
              var(--bg);
  color:var(--fg);
  line-height:1.8;
  font-family:
    ui-rounded,
    "Hiragino Maru Gothic ProN",
    "SF Pro Rounded",
    system-ui,
    -apple-system,
    "Hiragino Sans",
    "Noto Sans JP",
    sans-serif;
}

main{ max-width:680px; margin: 11vh auto; padding: 0 20px; }
h1{ margin:0 0 10px; font-size: clamp(34px, 4vw, 46px); }
h2{ margin: 26px 0 10px; font-size: 16px; color: var(--muted); }

ul{ list-style:none; padding:0; margin: 12px 0 0; display:flex; flex-direction:column; gap:12px; }

a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  color: var(--fg);
  text-decoration:none;
}

.link-content{
  display:flex;
  align-items:center;
  gap:10px;
}

.thumb{
  width:36px;
  height:36px;
  border-radius:10px;
  object-fit:cover;
  opacity: 0.85;
  background:#fff;
  border:1px solid rgba(22,22,26,.08);
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

a:hover{ border-color: rgba(216,90,166,.35); }

h1{
  font-weight: 700;
  letter-spacing: -0.01em;
}

a::after{
  content: "→";
  color: var(--accent);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  opacity: .6;
  transition: transform .15s ease, opacity .15s ease;
}
a:hover::after{
  transform: translateX(4px);
  opacity: 1;
}

.name{
  margin: 0 0 20px;
  line-height: 1.3;
}

.name .jp{
  display: block;
  font-size: clamp(40px, 6vw, 56px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.name .en{
  display: block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--muted);
}

.hero{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}

.name-text{
  display: flex;
  flex-direction: column;
}


.avatar{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  border: 0.5px solid rgba(36, 33, 33, 0.06);
  box-shadow:
    0 2px 12px rgba(32, 26, 26, 0.1),
    0 0 0 2px rgba(247, 187, 205, 0.65);
}