*{margin:0;padding:0;box-sizing:border-box}body{overflow-x:hidden}canvas{position:fixed;top:0;left:0;z-index:0}main{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:2.5rem;gap:1.5rem;max-width:700px;animation:fadeIn 1.2s ease forwards}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.name_wrapper{background:rgba(255,255,255,.08);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.18);text-align:center;padding:.75rem 2rem;border-radius:20px;width:fit-content;box-shadow:0 8px 32px #00000059,inset 0 1px #ffffff26}.name{--bg-size: 400%;--color-one: #ffb3e6;--color-two: #8b5cf6;font-size:clamp(2.4rem,7vw,4.8rem);font-family:Italiana,serif;background:linear-gradient(90deg,var(--color-one),var(--color-two),var(--color-one)) 0 0 / var(--bg-size) 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;white-space:nowrap;letter-spacing:.02em}@media (prefers-reduced-motion: no-preference){.name{animation:name-gradient 8s linear infinite}}@keyframes name-gradient{to{background-position:var(--bg-size) 0}}.bio{background:rgba(0,0,0,.45);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:1.5rem 1.75rem;color:#ffffffe0;font-size:clamp(.88rem,1.8vw,1.05rem);line-height:1.75;width:100%;box-shadow:0 8px 32px #0000004d,inset 0 1px #ffffff0f}a{background:linear-gradient(135deg,#ffb3e6 20%,#8b5cf6 80%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:600;text-decoration:none;transition:filter .2s ease}a:hover{filter:brightness(1.3)}.hint{position:fixed;bottom:1.5rem;right:1.75rem;z-index:1;color:#fff9;font-size:.75rem;letter-spacing:.08em;text-transform:lowercase;pointer-events:none;animation:fadeIn 2s ease forwards}@media (max-width: 768px){main{padding:1.75rem 1.75rem 3.5rem;justify-content:flex-end;max-width:100%}.name_wrapper{width:100%}.name{white-space:normal;font-size:clamp(2rem,10vw,3.2rem)}}@media (max-width: 768px){.hint{display:none}}@media (max-width: 480px){main{padding:1rem 1rem 2.5rem;gap:1rem}.name_wrapper{padding:.6rem 1.25rem;border-radius:14px}.bio{padding:1.1rem 1.25rem;border-radius:12px}}
