/* xybf.me: the hashstats palette (pink, purple, yellow on near-black), dark by default. */
:root {
  --xy-pink: #f11c7f;
  --xy-purple: #6d2e93;
  --xy-yellow: #ffc629;
  --bs-primary: #f11c7f;
  --bs-primary-rgb: 241, 28, 127;
  --bs-link-color: #b31262;
  --bs-link-hover-color: #6d2e93;
}
[data-bs-theme="dark"] {
  --bs-body-bg: #0b0b0b;
  --bs-body-color: #f2f2f2;
  --bs-tertiary-bg: #161616;
  --bs-link-color: #ff5aa5;
  --bs-link-hover-color: #ffc629;
}
body { background: var(--bs-body-bg); }
.btn-primary { --bs-btn-bg: var(--xy-pink); --bs-btn-border-color: var(--xy-pink); --bs-btn-hover-bg: #b31262; --bs-btn-hover-border-color: #b31262;
  --bs-btn-active-bg: #b31262; --bs-btn-disabled-bg: var(--xy-pink); }
.xy-bar { background: #000; border-bottom: 3px solid var(--xy-pink); }
.xy-brand { color: #fff; font-weight: 800; letter-spacing: .02em; }
.xy-brand span, .xy-display span { color: var(--xy-yellow); }
.xy-brand:hover { color: #fff; }
.xy-hero { padding: 4rem 0 3rem; }
.xy-display { font-size: clamp(2.5rem, 9vw, 5rem); font-weight: 800; letter-spacing: -.02em; }
.xy-narrow { max-width: 26rem; margin: 2rem auto; }
.xy-narrow-lg { max-width: 56rem; }
.xy-stat { display: flex; flex-direction: column; align-items: center; min-width: 5.5rem; padding: .5rem .75rem;
  border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); }
.xy-stat strong { font-size: 1.35rem; color: var(--xy-yellow); }
.xy-stat span { font-size: .8rem; color: var(--bs-secondary-color); }
[data-bs-theme="light"] .xy-stat strong { color: var(--xy-purple); }
.xy-off { opacity: .6; }
.xy-url { max-width: 28rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }