.word-cloud {
  position: relative;
  min-height: 510px;
  margin-top: 40px;
  padding: 25px 28px 35px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .76);
  border-radius: 30px;
  background: rgba(255, 255, 252, .64);
  box-shadow: 0 18px 45px rgba(104, 83, 57, .07);
  backdrop-filter: blur(12px);
}
.word-cloud::before, .word-cloud::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.word-cloud::before { width: 280px; height: 280px; right: -85px; top: -125px; background: rgba(255, 227, 112, .45); filter: blur(20px); }
.word-cloud::after { width: 220px; height: 220px; left: -100px; bottom: -115px; background: rgba(205, 172, 252, .36); filter: blur(20px); }
.cloud-guide { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; color: #798278; font: 500 11px "DM Mono", monospace; letter-spacing: 1.2px; }
.cloud-legend { display: flex; align-items: center; gap: 9px; letter-spacing: 0; }
.cloud-legend span { padding: 5px 8px; border-radius: 999px; background: rgba(255, 255, 255, .56); font: 500 10px "Noto Sans SC", sans-serif; }
.cloud-legend .career { color: #7c4c86; }.cloud-legend .skill { color: #27736b; }.cloud-legend .hobby { color: #b76636; }.cloud-legend .identity { color: #526ea4; }
.cloud-words { position: relative; z-index: 1; min-height: 430px; margin-top: 15px; }
.cloud-word { position: absolute; left: var(--x); top: var(--y); color: #59615a; font: 700 var(--rendered-size, var(--size))/1 "Noto Sans SC", sans-serif; letter-spacing: -.06em; white-space: nowrap; transform: translate(-50%, -50%) rotate(var(--angle)); transition: transform .22s ease, filter .22s ease; transform-origin: center; cursor: default; }
.cloud-word.career { color: #7c4c86; }.cloud-word.skill { color: #27736b; }.cloud-word.hobby { color: #b76636; }.cloud-word.identity { color: #526ea4; }
.cloud-word:hover { z-index: 3; transform: translate(-50%, -50%) rotate(var(--angle)) scale(1.22); filter: drop-shadow(0 8px 10px rgba(35, 54, 45, .18)); }
@media (max-width: 800px) { .word-cloud { min-height: 425px; padding: 20px; } .cloud-guide { align-items: flex-start; gap: 10px; flex-direction: column; } .cloud-words { min-height: 345px; margin-top: 7px; } }
@media (max-width: 460px) { .cloud-legend { gap: 5px; }.cloud-legend span { padding: 4px 6px; font-size: 9px; } }

.role { text-decoration-skip-ink: none; }