:root {
  --links-background: #050824;
  --links-surface: #121945;
  --links-text: #f9f9ff;
  --links-muted: #aeb4d6;
  --links-accent: #66d9ff;
  --links-accent2: #f56db4;
  --links-featuredFrom: #343c9e;
  --links-featuredTo: #6b273e;
  --links-radius: 20px;
  --links-width: 580px;
}
html { background: var(--links-background); color: var(--links-text); overflow-x: clip; }
html[data-links-font="rounded"] { font-family: ui-rounded, "Trebuchet MS", system-ui, sans-serif; }
html[data-links-font="serif"] { font-family: Georgia, Cambria, serif; }
html[data-links-font="mono"] { font-family: ui-monospace, Consolas, monospace; }
.links-page {
  color: var(--links-text);
  background-color: var(--links-background);
  background-image: var(--links-background-image, none), radial-gradient(circle at 50% -15%, color-mix(in srgb, var(--links-accent) 21%, var(--links-background)) 0%, var(--links-background) 72%);
  background-position: center, center;
  background-size: cover, auto;
  background-attachment: fixed, scroll;
  overflow-x: clip;
}
.links-page .cosmos {
  background: radial-gradient(ellipse at 80% 20%, color-mix(in srgb, var(--links-accent) 14%, transparent), transparent 56%), radial-gradient(ellipse at 16% 72%, color-mix(in srgb, var(--links-accent2) 12%, transparent), transparent 45%);
}
/* Uploaded backgrounds stay visible beneath a quieter decorative layer. */
.links-page[data-links-background-image="custom"] .cosmos { background: none; opacity: .36; }
.links-page[data-links-background-image="custom"] .cosmos::before,
.links-page[data-links-background-image="custom"] .cosmos::after { display: none; }
.links-page .links-shell { width: min(calc(100% - 32px), var(--links-width)); max-width: none; padding: 44px 0 30px; }
.links-page .profile {
  position: relative; padding: 12px 12px 16px; border: 0; border-radius: 0;
  background: none; box-shadow: none;
}
.links-page .profile::before,.links-page .profile::after { content: none; }
.links-page .avatar-ring { position: relative; width: 112px; height: 112px; padding: 4px; margin: 0 auto 23px; background: linear-gradient(135deg, var(--links-accent), var(--links-accent2)); box-shadow: 0 0 32px color-mix(in srgb, var(--links-accent) 22%, transparent); }
.links-page .avatar-ring::before {
  content: ''; position: absolute; inset: -9px; border: 1px solid color-mix(in srgb, var(--links-accent) 28%, transparent);
  border-top-color: var(--links-accent); border-right-color: transparent; border-radius: inherit; opacity: .65;
  animation: links-avatar-orbit 22s linear infinite;
}
.links-page .avatar-ring img { border-color: var(--links-background); }
html[data-avatar-shape="rounded"] .avatar-ring,
html[data-avatar-shape="rounded"] .avatar-ring img { border-radius: 24px; }
html[data-avatar-shape="square"] .avatar-ring,
html[data-avatar-shape="square"] .avatar-ring img { border-radius: 7px; }
/* Square and rounded avatar frames stay aligned with the chosen shape. */
html[data-avatar-shape="rounded"] .avatar-ring::before,
html[data-avatar-shape="square"] .avatar-ring::before { animation: none; }
.links-page .footer-star { color: var(--links-accent); }
.links-page .profile h1 { font-size: clamp(2.1rem,6.6vw,3.05rem); letter-spacing: -.055em; }
.links-page .link-copy small,.links-page .links-footer { color: var(--links-muted); }
.links-page .links-list { gap: 12px; margin-top: 23px; }
.links-page .group-label { display: flex; align-items: center; gap: 13px; margin: 17px 4px 2px; color: color-mix(in srgb, var(--links-muted) 80%, var(--links-text)); font-size: .65rem; letter-spacing: .15em; }
.links-page .group-label::after { content: ''; flex: 1; min-width: 18px; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--links-accent) 22%, transparent), transparent); }
.links-page .featured-link,.links-page .link-card { position: relative; border-radius: var(--links-radius); transition: transform .2s ease, border-color .2s ease; }
.links-page .featured-link { min-height: 126px; background: linear-gradient(112deg, var(--links-featuredFrom), var(--links-featuredTo)); border-color: color-mix(in srgb, var(--links-accent) 45%, transparent); box-shadow: 0 12px 30px #0000002d; }
.links-page .featured-link::before { content: ''; position: absolute; top: -1px; height: 1px; left: 14%; right: 14%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--links-text) 75%, transparent), transparent); opacity: .8; }
.links-page .feature-icon { width: 57px; height: 57px; border: 1px solid color-mix(in srgb, var(--links-text) 18%, transparent); background: color-mix(in srgb, var(--links-background) 20%, transparent); }
.links-page .feature-kicker { color: var(--links-accent); }
.links-page .feature-meta { color: color-mix(in srgb, var(--links-text) 76%, var(--links-muted)); }
.links-page .feature-live { width: fit-content; padding: 4px 9px; border-radius: 6px; background: #dc1639; color: #fff; font-size: .66rem; font-weight: 850; letter-spacing: .07em; }
.links-page .featured-link.is-live { border-color: #f9405d; }
.links-page .link-card { min-height: 78px; background: linear-gradient(120deg, color-mix(in srgb, var(--links-surface) 89%, transparent), color-mix(in srgb, var(--links-background) 79%, var(--links-surface))); border-color: color-mix(in srgb, var(--links-accent) 22%, transparent); box-shadow: 0 6px 22px #00000016; }
.links-page .link-card:hover { background: linear-gradient(120deg, color-mix(in srgb, var(--links-surface) 90%, var(--links-accent)), var(--links-surface)); }
.links-page .featured-link:hover,.links-page .link-card:hover { border-color: var(--links-accent); transform: translateY(-2px); box-shadow: 0 10px 28px #00000030; }
.links-page .icon { width: 48px; height: 48px; border: 1px solid color-mix(in srgb, var(--links-text) 7%, transparent); }
.links-page .arrow { width: 27px; height: 27px; display: grid; place-items: center; font-size: 1.08rem; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--links-accent) 20%, transparent); color: color-mix(in srgb, var(--links-accent) 45%, var(--links-text)); }
.links-page .tiktok-icon { mix-blend-mode: screen; }
.links-page .links-footer { padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--links-accent) 15%, transparent); margin-top: 29px; }
.links-page .profile h1,.links-page .group-label,.links-page .links-footer,
.links-page .feature-kicker,.links-page .feature-copy strong,.links-page .feature-meta,.links-page .link-copy strong,.links-page .link-copy small { overflow-wrap: anywhere; }
.links-page .feature-meta,.links-page .link-copy small,.links-page .links-footer { line-height: 1.5; }
.links-page .feature-copy,.links-page .link-copy { flex: 1; }
.links-page .feature-copy strong { display: block; overflow: visible; -webkit-line-clamp: unset; }
.links-page .featured-link:focus-visible,.links-page .link-card:focus-visible { outline: 3px solid var(--links-accent); outline-offset: 4px; }
@keyframes links-avatar-orbit { to { transform: rotate(360deg); } }
@media(max-width:480px) {
  .links-page { background-attachment: scroll,scroll; }
  .links-page .links-shell { width: min(calc(100% - 28px), var(--links-width)); padding-top: 27px; padding-bottom: 18px; }
  .links-page .profile { padding: 9px 10px 13px; }
  .links-page .avatar-ring { width: 94px; height: 94px; margin-bottom: 20px; }
  .links-page .profile h1 { font-size: clamp(1.75rem,7.5vw,2.35rem); letter-spacing: -.045em; }
  .links-page .links-list { margin-top: 19px; gap: 10px; }
  .links-page .featured-link { min-height: 110px; padding: 13px; gap: 10px; }
  .links-page .feature-icon { width: 44px; height: 44px; border-radius: 12px; }
  .links-page .feature-icon img { width: 27px; height: 27px; }
  .links-page .feature-kicker { font-size: .59rem; letter-spacing: .08em; }
  .links-page .feature-copy strong { font-size: .98rem; }
  .links-page .feature-meta { font-size: .69rem; }
  .links-page .link-card { min-height: 71px; padding: 10px 12px; gap: 11px; }
  .links-page .icon { width: 42px; height: 42px; border-radius: 12px; }
  .links-page .link-copy strong { font-size: .94rem; }
  .links-page .link-copy small { font-size: .72rem; line-height: 1.4; }
  .links-page .arrow { width: 23px; height: 23px; font-size: .95rem; }
  .links-page .group-label { margin-top: 12px; }
  .links-page .links-footer { margin-top: 23px; }
}
@media(max-width:350px) {
  .links-page .featured-link { padding: 11px; gap: 8px; }
  .links-page .feature-icon { width: 40px; height: 40px; }
  .links-page .feature-copy strong { font-size: .9rem; }
  .links-page .link-card { padding: 9px 10px; gap: 9px; }
  .links-page .arrow { width: 21px; height: 21px; }
}
@media(hover:none) {
  .links-page .featured-link:hover,.links-page .link-card:hover { transform: none; }
}
/* Fixed uploaded backgrounds are unstable when mobile browser bars slide in and out. */
@media(pointer:coarse) {
  .links-page { background-attachment: scroll,scroll; }
}
.low-detail .links-page .featured-link,.low-detail .links-page .link-card { transition: none; }
.low-detail .links-page .featured-link:hover,.low-detail .links-page .link-card:hover { transform: none; }
@media(prefers-reduced-motion:reduce) {
  .links-page .featured-link,.links-page .link-card { transition: none; }
  .links-page .featured-link:hover,.links-page .link-card:hover { transform: none; }
  .links-page .avatar-ring::before { animation: none; }
}