:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; background: #232323; color: #f5f5f5; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; padding: 32px 20px 56px; }
body::before { content: ""; position: fixed; inset: -60px; z-index: -1; background: linear-gradient(#16161655, #16161688), url("images/bunnihills_horz.jpg") center 43% / cover; filter: blur(45px); pointer-events: none; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 3px solid #96caff; outline-offset: 6px; }
.profile { max-width: 560px; margin: 0 auto; background: #232323; border-radius: 32px; overflow: hidden; box-shadow: 0 24px 60px #0005, 0 3px 5px #0004; display: flex; flex-direction: column; }
.profile-header { position: relative; height: 420px; isolation: isolate; }
.profile-photo-frame { width: 100%; height: 100%; overflow: hidden; }
.profile-photo { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 22%; transform: none; }
.profile-header::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 42%, #23232388 68%, #232323 100%); z-index: 1; }
.identity { position: absolute; bottom: 15px; left: 16px; right: 16px; z-index: 2; text-align: center; }
h1 { margin: 0; font-size: 36px; line-height: 1.16; font-weight: 750; letter-spacing: -1.3px; }
.identity h1 { display: flex; align-items: center; justify-content: center; gap: .2em; }
.name-checkmark { display: block; flex-shrink: 0; width: .85em; height: .85em; }
.handle { margin: 12px 0 0; font-size: 16px; line-height: 1.4; color: #eee; }
.handle-divider { margin: 0 .4em; color: #aaa; }
.online-status { display: inline-flex; align-items: center; gap: .4em; white-space: nowrap; }
.online-dot { width: .6em; height: .6em; border-radius: 50%; background: #6ac568; box-shadow: 0 0 0 3px #6ac56830; }
.socials { display: flex; justify-content: center; gap: 14px; padding: 19px 20px 36px; }
.social-link { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #4b4b4b; transition: background .2s, transform .2s; }
.social-link svg { width: 26px; height: 26px; }
.main-links { padding: 6px 16px 42px; display: grid; gap: 16px; }
.feature-link { position: relative; display: block; aspect-ratio: 1.77; overflow: hidden; border-radius: 20px; border: 1px solid #ffffff12; isolation: isolate; }
.feature-link img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .4s; }
.feature-link::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, #0008); }
.feature-link span { position: absolute; bottom: 24px; left: 44px; right: 44px; text-align: center; z-index: 1; font-size: 22px; font-weight: 700; text-shadow: 0 2px 12px #0008; }
.feature-arrow { position: absolute; z-index: 1; right: 20px; bottom: 25px; width: 22px; height: 22px; opacity: 0; transition: opacity .2s; }
.youtube-link { min-height: 68px; border-radius: 18px; background: #191a1a; display: grid; grid-template-columns: 36px 1fr 36px; gap: 12px; align-items: center; padding: 14px 26px; font-size: 20px; font-weight: 700; text-align: center; box-shadow: 0 7px 15px #0002; transition: background .2s, transform .2s; }
.youtube-link svg { width: 32px; height: 24px; }
@media (hover: hover) { .social-link:hover { background: #606060; transform: translateY(-3px); } .feature-link:hover img { transform: scale(1.035); } .feature-link:hover .feature-arrow { opacity: 1; } .youtube-link:hover { background: #303030; transform: translateY(-2px); } }
@media (max-width: 600px) {
  body { padding: 24px 18px 30px; }
  body::before { display: none; }
  .profile { min-height: calc(100svh - 54px); border-radius: 0; box-shadow: none; overflow: visible; }
  .profile-header { height: auto; text-align: center; }
  .profile-photo-frame { width: clamp(148px, 36vw, 220px); height: auto; aspect-ratio: 1; border-radius: 50%; border: 5px solid #f5f5f5; margin: 0 auto; }
  .profile-photo { object-position: center 50%; transform: none; }
  .profile-header::after { display: none; }
  .identity { position: static; margin: 0 0 22px; }
  h1 { font-size: clamp(32px, 7.5vw, 44px); letter-spacing: -1.2px; margin-top: 4px; }
  .handle { font-size: 18px; margin-top: 8px; }
  .main-links { padding: 0; gap: 16px; }
  .feature-link { aspect-ratio: 1.45; border-radius: 20px; }
  .feature-link span { bottom: 24px; font-size: 23px; }
  .youtube-link { min-height: 76px; font-size: 21px; }
  .socials { order: 3; margin-top: auto; padding: 64px 0 0; gap: 18px; }
  .social-link { width: 56px; height: 56px; }
  .social-link svg { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }

/* Human verification screen; Cloudflare renders the actual widget. */
[hidden] { display: none !important; }
.verify-body { background: #090909; display: grid; place-items: center; min-height: 100svh; padding: 32px 24px; }
.verify-body::before { display: none; }
.verification { width: 100%; max-width: 600px; text-align: center; }
.verification h1 { font-size: clamp(26px, 4.8vw, 36px); line-height: 1.25; letter-spacing: -.7px; margin: 0 auto 22px; max-width: 550px; }
.verification > p, .verification noscript p { color: #a0a0a0; font-size: clamp(16px, 3.2vw, 21px); line-height: 1.55; margin: 0 auto 44px; }
#turnstile-widget { width: 100%; max-width: 400px; margin: 0 auto; text-align: left; }
.verification-status { display: flex; justify-content: center; align-items: center; gap: 14px; color: #a0a0a0; font-size: 18px; line-height: 1.5; margin-top: 36px; }
.verification-spinner { flex-shrink: 0; width: 24px; height: 24px; border: 3px solid #333; border-top-color: #aaa; border-radius: 50%; animation: verification-spin 1s linear infinite; }
.verification-retry { margin-top: 24px; padding: 12px 24px; color: #eee; background: #292929; border: 1px solid #555; border-radius: 8px; font: inherit; cursor: pointer; }
@keyframes verification-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .verification-spinner { animation: none; } }