* { box-sizing: border-box; margin: 0; padding: 0; }
:root { color-scheme: dark; font-family: 'Segoe UI', Roboto, system-ui, sans-serif; }
body { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 30px 20px; background: var(--page-background); background-attachment: fixed; color: #f7f7f7; overflow-x: hidden; }
body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 18%, #ffffff03, transparent 65%); pointer-events: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { display: inline-block; width: 1em; height: 1em; vertical-align: -.12em; flex-shrink: 0; }
.bio-card { position: relative; z-index: 1; width: 100%; max-width: 420px; padding: 30px 24px 22px; border: 1px solid #ffffff16; border-radius: 48px; background: var(--card); box-shadow: 0 32px 90px #0009, inset 0 1px 0 #ffffff08; text-align: center; }
.hot-badge { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 7px 13px; border: 1px solid #ffffff1c; border-radius: 50px; background: #ffffff06; color: var(--accent); font-size: .61rem; font-weight: 800; line-height: 1.4; letter-spacing: 1.6px; margin-bottom: 20px; }
.hot-badge .icon { font-size: .9rem; }
.avatar { width: 120px; height: 120px; padding: 4px; margin: 0 auto 16px; border-radius: 50%; background: linear-gradient(145deg, var(--accent), var(--accent2) 65%, #363636); box-shadow: 0 0 30px #0008; animation: avatar-breathe 5s ease-in-out infinite; }
@keyframes avatar-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.avatar-inner { width: 100%; height: 100%; border-radius: inherit; overflow: hidden; border: 2px solid #080808; background: #101010; }
.avatar-video { position: relative; isolation: isolate; }
.avatar-inner video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.avatar-video::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: rgba(255, 8, 20, .50); mix-blend-mode: multiply; pointer-events: none; }
.avatar-media-toggle { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; border: 0; border-radius: inherit; background: #0004; color: white; opacity: 0; transition: opacity .2s ease; }
.avatar-media-toggle svg { width: 26px; height: 26px; filter: drop-shadow(0 1px 4px #0008); }
.avatar-media-toggle .video-play-icon { display: none; }
.avatar-video:hover .avatar-media-toggle, .avatar-media-toggle:focus-visible, .avatar-video.is-paused .avatar-media-toggle { opacity: 1; }
.avatar-video.is-paused .video-pause-icon { display: none; }
.avatar-video.is-paused .video-play-icon { display: block; }
.name { font-size: clamp(1.85rem, 6vw, 2.4rem); font-weight: 900; line-height: 1.16; letter-spacing: -1px; color: var(--accent); background: linear-gradient(110deg, #fff, var(--accent) 40%, var(--accent2), var(--accent)); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: name-light 8s ease-in-out infinite alternate; }
@keyframes name-light { to { background-position: 100% 50%; } }
.subhead { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 11px; color: #e4e4e4; font-size: .84rem; font-weight: 600; line-height: 1.5; }
.subhead .heart { color: var(--accent); font-size: .72rem; }
.intro { max-width: 32ch; margin: 11px auto 0; color: #a6a6a6; font-size: .82rem; line-height: 1.75; }
.link-grid { display: flex; flex-direction: column; gap: 17px; margin: 25px 0 23px; }
.link-btn { position: relative; display: flex; align-items: center; gap: 12px; min-height: 75px; padding: 14px 19px; border: 1px solid #ffffff30; border-radius: 50px; text-decoration: none; color: #fff; overflow: hidden; transform-origin: center; transition: box-shadow .2s ease, filter .2s ease; animation: gentle-drift 4s ease-in-out infinite; }
.link-btn.has-random-motion { animation: none; }
.link-btn > .icon { width: 23px; height: 23px; }
.link-btn .chevron { width: 10px; height: 13px; margin-left: auto; opacity: .75; }
.button-copy { flex: 1; min-width: 0; text-align: center; }
.button-copy strong { display: block; font-size: .88rem; font-weight: 800; letter-spacing: .28px; line-height: 1.4; }
.button-copy small { display: block; margin-top: 4px; font-size: .66rem; font-weight: 500; line-height: 1.45; opacity: .95; }
.btn-1 { --cta-glow: 42,171,238; background: linear-gradient(115deg, #007ab6, #159bdc 55%, #31afea); box-shadow: 0 5px 24px rgba(var(--cta-glow),.19); animation-duration: 3.6s; }
.btn-2 { color: #291208; --cta-glow: 236,120,61; background: linear-gradient(115deg, #db5538, #ec783d 60%, #ed9456); box-shadow: 0 5px 24px rgba(var(--cta-glow),.2); animation-duration: 4.3s; animation-delay: -.8s; }
.btn-3 { --cta-glow: 255,0,68; background: linear-gradient(115deg, #b90939, #e7154b 60%, #f13b68); box-shadow: 0 5px 24px rgba(var(--cta-glow),.19); animation-duration: 4.8s; animation-delay: -1.6s; }
.link-btn::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(130deg, #ffffff0d, transparent 55%); pointer-events: none; }
@keyframes gentle-drift { 0%,100% { transform: translate(0,0) rotate(0deg) scale(1); } 35% { transform: translate(-1px,-2px) rotate(.7deg) scale(1.012); } 70% { transform: translate(1px,1px) rotate(-.7deg) scale(1.005); } }
@media (hover:hover) and (pointer:fine) { .link-btn:hover { filter: brightness(1.08); box-shadow: 0 5px 35px rgba(var(--cta-glow),.35); } }
.link-btn:active { filter: brightness(1.12); }
a:focus-visible, button:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.online-badge { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 9px 15px; border: 1px solid #ffffff12; border-radius: 50px; background: #ffffff04; color: #bbb; font-size: .75rem; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #82dca4; box-shadow: 0 0 10px #82dca440; animation: status-pulse 2.7s ease-in-out infinite; }
@keyframes status-pulse { 50% { opacity: .45; } }
.online-badge strong { font-weight: 700; font-variant-numeric: tabular-nums; color: #eee; }
.online-badge .divider { opacity: .25; }
.online-badge .bolt { color: var(--accent); font-size: .7rem; }
.closing { max-width: 31ch; margin: 14px auto 0; color: #aaa; font-size: .72rem; line-height: 1.65; }
.footer { margin-top: 22px; padding-top: 16px; border-top: 1px solid #ffffff0b; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px 8px; color: #8b8b8b; font-size: .6rem; letter-spacing: .3px; }
.footer .crown { margin-right: 3px; color: var(--accent); }
.adult-label { margin-left: 3px; border: 1px solid #ffffff22; border-radius: 5px; padding: 2px 4px; font-weight: 700; color: #aaa; }
.no-script { font-size: .75rem; color: #bbb; margin-top: 16px; }
dialog { width: min(360px, calc(100% - 40px)); margin: auto; padding: 36px 26px 28px; border: 1px solid #ffffff24; border-radius: 30px; background: #121212; color: #fff; text-align: center; box-shadow: 0 20px 90px #0009; }
dialog::backdrop { background: #000c; backdrop-filter: blur(8px); }
.dialog-close { position: absolute; top: 9px; right: 12px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; color: #ddd; background: transparent; font-size: 1.8rem; }
.dialog-close:hover { background: #ffffff0a; }
.dialog-icon { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 22px; border-radius: 50%; background: #ffffff07; color: var(--accent); font-size: 2rem; }
.dialog-eyebrow { font-size: .65rem; font-weight: 700; letter-spacing: 1.5px; color: var(--accent); margin-bottom: 9px; }
dialog h2 { font-size: 1.5rem; letter-spacing: -.4px; }
dialog p#dialog-description { margin: 14px 0 24px; color: #aaa; font-size: .9rem; line-height: 1.65; }
.dialog-button { width: 100%; border: 1px solid #ffffff24; border-radius: 60px; padding: 14px 20px; background: #282828; color: #fff; font-size: .9rem; font-weight: 700; }
.dialog-button:hover { background: #333; }
@media (max-width: 460px) { body { padding: 20px 14px; } .bio-card { padding: 26px 18px 21px; border-radius: 40px; } .avatar { width: 110px; height: 110px; } .link-btn { padding-inline: 16px; gap: 10px; } .button-copy strong { font-size: .83rem; } }
@media (max-width: 380px) { body { padding-inline: 12px; } .bio-card { padding-inline: 14px; border-radius: 34px; } .link-btn { padding-inline: 12px; gap: 8px; } .link-btn > .icon { width: 20px; height: 20px; } .link-btn .chevron { width: 8px; } .button-copy strong { font-size: .75rem; letter-spacing: .1px; } .button-copy small { font-size: .61rem; } .subhead { font-size: .78rem; } .intro { font-size: .78rem; } .hot-badge { font-size: .57rem; letter-spacing: 1.3px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }