:root {
  color-scheme: dark;
  --bg: #11120b;
  --panel: #1a1c12;
  --panel-hover: #242618;
  --yellow: #f6cf48;
  --yellow-bright: #ffe17b;
  --ink: #f8f5e6;
  --muted: #adac9b;
  --line: rgba(250, 224, 135, .19);
  --display: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box }
html { min-width: 320px; scroll-behavior: smooth }
body {
  margin: 0;
  min-height: 100svh;
  color: var(--ink);
  font-family: var(--body);
  background:
    radial-gradient(ellipse 44% 33% at 50% 8%, rgba(246,207,72,.105), transparent 85%),
    radial-gradient(ellipse 36% 36% at 5% 99%, rgba(246,207,72,.04), transparent 90%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none }
img, svg { display: block }
button, a { -webkit-tap-highlight-color: transparent }
:focus-visible { outline: 3px solid var(--yellow-bright); outline-offset: 5px }
::selection { background: var(--yellow); color: #11120b }
.skip-link { position: fixed; top: -110px; left: 16px; z-index: 10; padding: 12px 18px; background: var(--yellow); color: #16180b; font-weight: 800 }
.skip-link:focus { top: 14px }
.profile {
  width: min(100% - 36px, 510px);
  min-height: 100svh;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: clamp(42px, 6.5vh, 86px) 28px;
}
.avatar-stage { position: relative; z-index: 0; margin: 3px auto 32px; width: 212px; height: 211px; display: grid; place-items: center }
.avatar-shine {
  position: absolute; z-index: -1; inset: -25px; border-radius: 50%;
  background: radial-gradient(circle, rgba(247,210,86,.19), transparent 68%);
  filter: blur(10px); pointer-events: none;
}
.avatar-link {
  width: 190px; height: 190px; position: relative; border: 5px solid var(--yellow);
  border-radius: 50%; padding: 5px; background: #2a2914;
  box-shadow: 0 0 0 5px rgba(246,207,72,.11), 0 13px 32px rgba(0,0,0,.26);
  transition: transform .3s ease, box-shadow .3s ease;
}
.avatar { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: #36341f }
.crumb { position: absolute; width: 11px; height: 11px; background: var(--yellow); border-radius: 3px; transform: rotate(25deg) }
.crumb-a { top: 18px; left: -17px; width: 8px; height: 8px; animation: drift-a 4s ease-in-out infinite }
.crumb-b { right: -12px; top: 45px; width: 13px; height: 13px; border-radius: 50%; animation: drift-b 5s ease-in-out infinite }
.crumb-c { bottom: 24px; left: -13px; width: 6px; height: 6px; animation: drift-a 3.5s ease-in-out infinite reverse }
.cheese-drop { position: absolute; bottom: -1px; left: 83px; width: 15px; height: 25px; border-radius: 0 0 50% 50%; background: var(--yellow); transform: rotate(-12deg); z-index: -1; box-shadow: 21px -6px 0 -4px var(--yellow) }
.intro { text-align: center; margin-bottom: 34px }
.eyebrow { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: .65rem; letter-spacing: .25em; color: var(--yellow); font-weight: 800 }
.star { font-size: .9rem; letter-spacing: 0 }
h1 { margin: 14px 0 5px; font-family: var(--display); font-size: clamp(3.3rem, 10.4vw, 4.75rem); letter-spacing: -.028em; font-weight: 800; line-height: 1.05 }
h1 span { color: var(--yellow) }
.intro p { margin: 13px 0 0; font-size: .95rem; color: var(--muted); line-height: 1.6 }
.links { width: 100%; display: grid; gap: 12px }
.social {
  display: grid; grid-template-columns: 54px 1fr 25px; align-items: center; gap: 16px;
  min-height: 89px; padding: 15px 18px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 11px;
  transition: background .2s ease, border-color .2s ease, transform .22s ease, box-shadow .22s ease;
}
.icon-tile { width: 51px; height: 51px; border-radius: 11px; display: grid; place-items: center; color: #15180a; background: var(--yellow) }
.icon-tile svg { width: 26px; height: 26px }
.social-label { display: flex; flex-direction: column; gap: 4px; min-width: 0 }
.social-label strong { font-weight: 850; font-size: 1.02rem; letter-spacing: -.015em }
.social-label small { color: var(--muted); font-size: .77rem; font-weight: 450; line-height: 1.5 }
.arrow { height: 21px; width: 21px; fill: none; stroke: var(--yellow); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; transition: transform .2s ease }
.footer { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 39px; color: #777a68; font-size: .64rem; letter-spacing: .16em; font-weight: 800 }
.footer-cheese { color: var(--yellow); opacity: .52; font-size: .85rem }
.cheese-loader { position: fixed; z-index: 20; inset: 0; pointer-events: none; display: grid; place-content: center; gap: 25px; background: var(--bg); animation: loader-exit 1.25s ease forwards }
.loader-wedge {
  position: relative; display: block; justify-self: center; width: 70px; height: 63px;
  clip-path: polygon(0 15%, 99% 0, 82% 100%, 0 100%);
  background: var(--yellow);
  animation: wobble .44s ease-in-out 2 alternate;
}
.loader-hole { position: absolute; background: #cb9f20; border-radius: 50% }
.hole-one { width: 16px; height: 13px; left: 12px; top: 27px }
.hole-two { width: 9px; height: 9px; left: 46px; top: 11px }
.hole-three { width: 7px; height: 11px; right: 13px; bottom: 12px }
.loader-caption { font-size: .64rem; font-weight: 800; letter-spacing: .22em; color: var(--yellow) }
.loader-dots { display: inline-block; letter-spacing: .07em }
@media (hover:hover) {
  .avatar-link:hover { transform: rotate(-5deg) scale(1.035); box-shadow: 0 0 0 6px rgba(246,207,72,.22), 0 16px 44px rgba(246,207,72,.17) }
  .social:hover { background: var(--panel-hover); border-color: var(--yellow); transform: translateY(-3px) rotate(-.3deg); box-shadow: 0 9px 35px rgba(246,207,72,.10) }
  .social:hover .arrow { transform: translate(3px,-3px) }
  .social:hover .icon-tile { animation: wobble .4s ease }
}
@keyframes drift-a { 0%,100% {transform: translateY(0) rotate(25deg)} 50% {transform: translateY(-8px) rotate(55deg)} }
@keyframes drift-b { 0%,100% {transform: translateY(0)} 50% {transform: translateY(9px)} }
@keyframes wobble { 0%,100% { transform: rotate(0) } 25% { transform: rotate(-9deg) } 65% { transform: rotate(8deg) } }
@keyframes loader-exit { 0%,60% {opacity:1;visibility:visible} 99% {opacity:0;visibility:visible} 100% {opacity:0;visibility:hidden} }
@media(max-width:390px) {
  .profile {width: min(100% - 28px, 510px); padding-block: 32px 26px}
  .avatar-stage { margin-bottom: 24px; transform: scale(.84); height: 172px }
  .intro { margin-bottom: 28px }
  h1 { font-size: clamp(2.85rem, 12.5vw, 3.7rem) }
  .social { min-height: 79px; padding: 12px; grid-template-columns: 45px 1fr 21px; gap: 12px }
  .icon-tile {width: 45px; height: 45px}
  .footer { margin-top: 29px }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important }
  .cheese-loader { display: none }
}