:root {
  color-scheme: light;
  --background: #aaa9b0;
  --panel: #eeedf1;
  --button: #ffffff;
  --text: #201e24;
  --muted: #59535d;
  --line: rgba(139, 110, 157, .18);
  --accent: #b396c3;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: radial-gradient(circle at 50% 8%, rgba(228, 211, 235, .20), transparent 57%), var(--background);
  color: var(--text);
  font: 400 16px/1.5 "Segoe UI", "Helvetica Neue", Arial, "Noto Sans JP", sans-serif;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
a { color: inherit; }
a:focus-visible { outline: 2px solid #8d69a0; outline-offset: 3px; }
.skip-link {
  position: fixed; top: -100px; left: 12px; z-index: 5;
  padding: 9px 14px; color: #111; background: white; border-radius: 8px;
}
.skip-link:focus { top: 12px; }
.page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px 18px;
}
.profile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(100%, 720px);
  min-height: 780px;
  padding: 82px 36px 32px;
  border-radius: 30px;
  background: linear-gradient(155deg, #f0eef3 0%, var(--panel) 58%, #e9e8ed 100%);
  border: 1px solid rgba(255, 255, 255, .40);
  text-align: center;
  box-shadow: 0 16px 36px rgba(37, 30, 46, .12);
}
.profile > :not(.backdrop-art) {
  position: relative;
  z-index: 1;
}
.backdrop-art {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse 240px 230px at 86% 9%, rgba(182, 170, 200, .13), transparent 80%),
    radial-gradient(ellipse 280px 230px at 1% 86%, rgba(197, 180, 201, .12), transparent 80%),
    repeating-linear-gradient(100deg, transparent 0 78px, rgba(151, 139, 173, .024) 79px, transparent 80px);
}
.backdrop-orbit {
  position: absolute;
  width: 620px;
  height: 265px;
  border: 1px solid rgba(153, 133, 173, .16);
  border-radius: 50%;
  transform: rotate(-23deg);
}
.backdrop-orbit-a { top: -145px; right: -315px; }
.backdrop-orbit-b {
  width: 470px;
  height: 204px;
  left: -300px;
  bottom: 34px;
  transform: rotate(31deg);
  border-color: rgba(165, 147, 178, .14);
}
.backdrop-glow {
  position: absolute;
  top: -130px;
  right: -68px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, rgba(246, 236, 245, .5), rgba(190, 174, 201, .10) 45%, transparent 72%);
}
.backdrop-star {
  position: absolute;
  color: rgba(153, 131, 169, .24);
  font: 400 18px/1 Georgia, serif;
}
.backdrop-star-a { top: 33px; left: 15%; }
.backdrop-star-b { bottom: 48px; right: 13%; }

.configuration-error {
  background: #e3d3d5;
  border: 1px solid #b98e96;
  border-radius: 10px;
  padding: 12px;
  margin: -48px 0 28px;
  font-size: 13px;
}
.avatar-wrap {
  width: 118px; height: 118px;
  margin: 0 auto 20px;
}
.avatar-fallback,
.avatar-image {
  display: block;
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.avatar-fallback {
  background: #25232a;
  box-shadow: 0 0 0 3px #f6f3f8, 0 0 0 4px rgba(171, 143, 188, .52);
}
.avatar-image {
  box-shadow: 0 0 0 3px #f6f3f8, 0 0 0 4px rgba(171, 143, 188, .52);
}
h1 {
  margin: 0;
  font-size: clamp(25px, 3vw, 32px);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
.profile-bio {
  margin: 9px auto 38px;
  max-width: 540px;
  color: #303030;
  font-size: 16px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.social-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.link-list { display: flex; flex-direction: column; gap: 14px; }
.link-card {
  width: 100%;
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 17px 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--button);
  box-shadow: 0 2px 8px rgba(50, 39, 64, .025);
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
a.link-card:hover, a.link-card:focus-visible {
  background: #fdfaff;
  border-color: rgba(151, 111, 174, .46);
  box-shadow: 0 6px 16px rgba(84, 59, 102, .09);
  transform: translateY(-1px);
}
.link-card.is-unconfigured { opacity: .66; cursor: default; }
.featured-section { margin-top: 32px; }
.featured-divider {
  height: 1px;
  width: 100%;
  margin-bottom: 22px;
  background: linear-gradient(90deg, transparent, rgba(143, 124, 159, .27), transparent);
}
.featured-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 112px;
  padding: 18px 22px;
  border: 1px solid rgba(151, 128, 172, .32);
  border-radius: 14px;
  background: linear-gradient(110deg, rgba(255, 255, 255, .88), rgba(242, 237, 246, .92));
  box-shadow: 0 4px 15px rgba(68, 51, 82, .05);
  text-decoration: none;
  text-align: left;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
a.featured-card:hover, a.featured-card:focus-visible {
  border-color: rgba(145, 106, 168, .61);
  box-shadow: 0 7px 20px rgba(86, 63, 99, .10);
  transform: translateY(-1px);
}
.featured-card.is-unconfigured { opacity: .7; cursor: default; }
.featured-copy { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.featured-eyebrow {
  color: #74687d;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .095em;
  text-transform: uppercase;
}
.featured-title {
  color: var(--text);
  font-size: 17px;
  line-height: 1.35;
  font-weight: 650;
  overflow-wrap: anywhere;
}
.featured-subtitle { font-size: 12px; line-height: 1.35; color: var(--muted); }
.featured-off {
  flex: none;
  padding: 6px 9px;
  border-radius: 7px;
  border: 1px solid rgba(143, 111, 160, .26);
  background: rgba(199, 178, 211, .29);
  color: #62536b;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .015em;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .page { padding: 16px 12px; }
  .profile {
    min-height: auto;
    padding: 52px 19px 26px;
    border-radius: 22px;
  }
  .avatar-wrap { width: 100px; height: 100px; margin-bottom: 18px; }
  h1 { font-size: 26px; }
  .profile-bio { margin-bottom: 30px; font-size: 15px; }
  .link-card { min-height: 66px; font-size: 17px; }
  .social-links { gap: 10px; margin-bottom: 14px; }
  .social-links .link-card { padding-inline: 12px; }
  .backdrop-orbit-a { right: -445px; opacity: .55; }
  .backdrop-orbit-b { left: -365px; opacity: .55; }
  .backdrop-star-a { top: 18px; left: 7%; }
  .featured-section { margin-top: 26px; }
  .featured-card { min-height: 100px; padding: 16px; }
  .featured-title { font-size: 16px; }
  .featured-off { font-size: 11px; padding: 5px 7px; }

}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .link-card, .featured-card { transition: none; }
}