:root {
  color-scheme: light;
  --background: #fafbfc;
  --foreground: #181a1d;
  --border: #e2e4e7;
  --ring: #3e586f;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.site-shell { min-height: 100svh; padding: clamp(56px, 14vh, 140px) 24px 56px; }
.profile { width: min(100%, 420px); margin: 0 auto; }
.intro { text-align: center; }
.profile-picture {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto 18px;
  border-radius: 50%;
  object-fit: cover;
}
h1 { margin: 0; font-size: 1.625rem; line-height: 1.3; font-weight: 600; letter-spacing: -.035em; overflow-wrap: anywhere; }
.links { margin-top: 32px; }
.links ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.link-card {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 66px;
  padding: 18px 20px;
  border: 1px solid var(--platform-border, var(--border));
  border-radius: 12px;
  background: var(--platform-background, #fff);
  transition: background .18s, border-color .18s;
}
.link-card:hover { background: var(--platform-hover, #f0f2f4); border-color: var(--platform-color, #c0c4ca); }
.youtube { --platform-color: #c91c25; --platform-background: #fff2f2; --platform-hover: #ffe5e6; --platform-border: #f4cdcf; }
.twitch { --platform-color: #772ce8; --platform-background: #f6f0ff; --platform-hover: #ece0ff; --platform-border: #e3d1fc; }
.instagram { --platform-color: #c13584; --platform-background: #fff2f8; --platform-hover: #ffe3f0; --platform-border: #f3cee1; }
.tiktok { --platform-color: #25f4ee; --platform-background: #181a1d; --platform-hover: #292c31; --platform-border: #181a1d; color: #fff; }
.link-card .platform-icon { color: var(--platform-color); }
.tiktok .platform-icon { color: #fff; filter: drop-shadow(-1px -1px 0 #25f4ee) drop-shadow(1px 1px 0 #fe2c55); }
.tiktok .link-arrow { color: #c9cdd3; }
.link-card:focus-visible { outline: 3px solid var(--ring); outline-offset: 4px; }
.platform-icon { display: grid; place-items: center; flex: 0 0 26px; }
.link-copy { min-width: 0; overflow-wrap: anywhere; }
.link-name { font-size: 1rem; font-weight: 500; }
.link-end { margin-left: auto; display: flex; align-items: center; }
.link-arrow { flex-shrink: 0; color: #686c73; }
.contact { margin-top: 20px; text-align: center; }
.contact a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: #686c73; font-size: .875rem; text-decoration: underline; text-underline-offset: 4px; border-radius: 4px; }
.contact a:hover { color: var(--foreground); }
.contact a:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .link-card { transition: none; } }
