<style>
:root{
  --baby-blue:#AFCBFF; /* card */
  --white:#FFFFFF;
  --silver:#E6EEF8;
  --pink:#F8C8DC;      /* brand background base */
  --bg2-dim:#C6A0B0;   /* darker end */
  --navy:#2A3A5E;
  --ink:#0B0B0F;
  --plum:#3A1E2E;

  /* brand color variables (explicit + safe fallbacks) */
  --ko-fi:#FF5E5B;
  --twitch:#9146FF;
  --youtube:#FF0000;
  --kick:#53FC18;
  --bsky:#1185FE;
  --discord:#5865F2;
  --x:#1DA1F2; /* X / Twitter brand blue */

  --radius:20px;
  --shadow:0 10px 30px rgba(42,58,94,.15);
  --text:#1f2330;
  --muted:#52607a;
  --accent: var(--baby-blue);
  --accent-2: var(--pink);
  --card: #AFCBFF;
  --stroke: rgba(120,150,210,.40);
  --tex1: rgba(255,255,255,.06);
  --tex2: rgba(255,255,255,.035);
}

/* Theme overrides */
body.theme-cozy {
  /* brand tokens (keep other uses intact) */
  --accent: #AFCBFF;   /* baby blue */
  --accent-2: #F8C8DC; /* soft pink */
  --text: #1f2330;
  --card: #AFCBFF;
  --stroke: rgba(120,150,210,.40);
  /* background endpoints used elsewhere if needed */
  --bg1: #0B0B0F; /* inky black (top) */
  --bg2: #F8C8DC; /* soft pink (bottom) */
  /* texture vars */
  --tex1: rgba(255,255,255,.06);
  --tex2: rgba(255,255,255,.035);
  /* layered background */
  background-image:
    radial-gradient(var(--tex1) 1px, transparent 1px),
    radial-gradient(var(--tex2) 1px, transparent 1px),
    linear-gradient(180deg,
      rgba(11,11,15,0.96) 0%,
      rgba(42,58,94,0.85) 12%,
      rgba(198,160,176,0.62) 40%,
      rgba(248,200,220,0.30) 70%,
      rgba(248,200,220,0.12) 100%
    ),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  background-size:
    3px 3px,
    7px 7px,
    auto,
    auto;
  background-position:
    0 0,
    1px 2px,
    center,
    center;
  background-attachment: fixed;
  transition: background .6s ease, color .3s ease;
}

body.theme-mistress{
  --accent:#2A3A5E;
  --accent-2:#3A1E2E;
  --text:#f1f3f8;
  --muted:#c6cbe0;
  --card: rgba(23,28,45,.6);
  --stroke: rgba(58,30,46,.6);
  --bg1:#0B0B0F;
  --bg2:#1a1d2b;
  --tex1: rgba(0,0,0,0);
  --tex2: rgba(0,0,0,0);
}

/* keep theme-specific safe fallbacks for brand colors (ensures theme switching won't unset them) */
body.theme-cozy,
body.theme-mistress {
  --ko-fi: #FF5E5B;
  --twitch: #9146FF;
  --youtube: #FF0000;
  --kick: #53FC18;
  --bsky: #1185FE;
  --discord: #5865F2;
  --x: #1DA1F2;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Nunito,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background-image:
    radial-gradient(var(--tex1) 1px, transparent 1px),
    radial-gradient(var(--tex2) 1px, transparent 1px),
    radial-gradient(1200px 600px at 20% -10%, var(--bg2), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, color-mix(in srgb, var(--accent-2) 35%, transparent), transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  background-size:
    3px 3px,
    7px 7px,
    auto,
    auto,
    auto;
  background-position:
    0 0,
    1px 2px,
    center,
    center,
    center;
  background-attachment: fixed;
  transition: background .6s ease, color .3s ease;
}

.wrap{
  max-width: 780px;
  margin: 48px auto;
  padding: 0 20px;
  position: relative; /* for absolute decorative art */
}

/* decorative side art behind the main card (adjusted for new images) */
.bg-deco {
  position: absolute;
  top: 25%;
  transform: translateY(-50%);
  pointer-events: none;
  user-select: none;
  opacity: 0.7;                  /* slightly stronger so images read well */
  filter: drop-shadow(0 18px 40px rgba(0,0,0,0.10));
  width: auto;           /* keep aspect ratio */
  height: clamp(240px, 40vh, 720px); /* tune these values; ~3x taller than small default */
  z-index: 0; /* behind the card */
  transition: transform .6s ease, opacity .3s ease;
  will-change: transform, opacity;
  loading: lazy;
}

/* placement & mirroring */
/* move decorative art further out left/right */
.bg-deco.left  { left: clamp(-220px, -14vw, -100px); transform: translate(-8%, -50%); }
.bg-deco.right { right: clamp(-220px, -14vw, -100px); transform: translate(8%, -50%); }

/* ensure card above decorations */
.card { position: relative; z-index: 1; }

/* hide on small screens */
@media (max-width: 1000px) {
  .bg-deco { display: none; }
}

/* small parallax on scroll (subtle) */
@media (prefers-reduced-motion: no-preference) {
  /* JS will adjust transform on scroll if needed; keep small cap in CSS */
}

.card{
  position:relative;
  background: var(--card);
  border:1px solid var(--stroke);
  border-radius: 28px;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  overflow:hidden;
}

header{
  padding: 28px 24px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.brand{
  display:flex; align-items:center; gap:14px;
}

.avatar{
  width:72px; height:72px; border-radius:50%;
  border:3px solid var(--accent);
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  object-fit:cover; background:#fff;
}

.title{
  margin:0;
  font-family:"Mochiy Pop One", cursive;
  font-size:28px; line-height:1;
  letter-spacing:.5px;
}

.subtitle{
  margin:4px 0 0; color:var(--muted); font-size:14px;
}

.toggle{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.4);
  color:inherit;
  padding:10px 14px; border-radius: 999px; cursor:pointer;
  font-weight:700;
}

body.theme-mistress .toggle{ background: rgba(12,14,24,.4); }

.hero{ padding: 8px 24px 24px; }
h1{ margin:12px 0 6px; font-size:24px; }
p.tagline{ margin:0; color:var(--muted); font-size:16px; }
.chips{ margin:14px 0 0; display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  font-size:12px; font-weight:800; letter-spacing:.4px;
  background: linear-gradient(0deg, var(--silver), #fff);
  border:1px solid var(--stroke); padding:6px 10px; border-radius:999px;
}
body.theme-mistress .chip{
  background: linear-gradient(0deg, rgba(42,58,94,.25), rgba(255,255,255,.05));
}

.links{ padding: 10px 20px 24px; display:grid; gap:12px; }

/* base button styling */
.btn{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; border:none; text-decoration:none; color:#fff; font-weight:800; padding:14px 16px; border-radius:14px; position:relative; transform: translateZ(0); }
.btn span.label{ display:flex; align-items:center; gap:10px; }
.btn .note{ font-size:12px; font-weight:700; opacity:.9; }

/* provider base colors: use variables with safe fallbacks */
.twitch  { background: var(--twitch, #9146FF); color: #fff; }
.youtube { background: var(--youtube, #FF0000); color: #fff; }
.kick    { background: var(--kick, #53FC18); /* bright green fallback */
           /* bright backgrounds need dark text for contrast */
           color: #0b0b0b; border: 1px solid rgba(0,0,0,0.08); }
.kofi    { background: var(--ko-fi, #FF5E5B); color: #fff; }
.x       { background: var(--x, #1DA1F2); color: #fff; }
.bsky    { background: var(--bsky, #1185FE); color: #fff; }
.discord { background: var(--discord, #5865F2); color: #fff; }

/* live pill / dot */
.live-pill{ display:none; align-items:center; gap:6px; background:#ff3b3b; color:#fff; font-size:12px; padding:4px 8px; border-radius:999px; }
.live-dot{ width:6px; height:6px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.25); }
a.twitch[data-live="true"] .live-pill{ display:inline-flex; }

.section{ padding: 10px 24px 24px; }
.section h2{ font-family:"Mochiy Pop One", cursive; font-size:18px; margin:0 0 8px; }
.about{ background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.2)); border-top:1px solid var(--stroke); }
body.theme-mistress .about{ background: linear-gradient(180deg, rgba(42,58,94,.24), rgba(0,0,0,.15)); }
.tip{ margin-top:12px; font-size:14px; color:var(--muted); background: rgba(255,255,255,.6); border:1px dashed var(--stroke); padding:10px 12px; border-radius:12px; }
body.theme-mistress .tip{ background: rgba(255,255,255,.08); }

.embed{ position:relative; padding-top:56.25%; border-radius:14px; overflow:hidden; border:1px solid var(--stroke); background:#000; }
.embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

footer{ text-align:center; color:var(--muted); font-size:12px; padding:18px 8px 40px; }

@media (prefers-reduced-motion: reduce){ .bg-deco { transition:none !important } }
@media (max-width:900px){ .bg-deco { display:none } }

/* ----- Ko‑fi & BlueSky: force solid fills and remove overlays ----- */
/* place near end so overrides apply */
.links .btn.kofi,
.links .btn.bsky {
  background-image: none !important;
  color: #fff !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: var(--shadow);
  -webkit-text-fill-color: #fff !important;
}

/* explicit color fallbacks using variables (again to ensure cascade coverage) */
.links .btn.kofi { background-color: var(--ko-fi, #FF5E5B) !important; }
.links .btn.bsky { background-color: var(--bsky, #1185FE) !important; }

/* remove pseudo-element overlays that might cause translucency */
.links .btn.kofi::before,
.links .btn.kofi::after,
.links .btn.bsky::before,
.links .btn.bsky::after {
  display: none !important;
  background: none !important;
  content: none !important;
}

/* ----- Unified hover behavior for all buttons: subtle, no translate ----- */
/* apply the subtle hover to all .links .btn so every button behaves the same */
.links .btn {
  transition: filter .18s ease, box-shadow .18s ease, background-color .18s ease, opacity .18s ease;
  will-change: filter, box-shadow;
  transform: none !important; /* neutralize translate from other rules */
}

/* subtle hover: brighten slightly + soft shadow, no translation */
.links .btn:hover,
.links .btn:focus {
  transform: none !important;
  filter: brightness(1.05);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  opacity: 1 !important;
  outline: none;
}

/* ensure label/icon text remains readable by default */
.links .btn .label,
.links .btn .icon {
  color: #fff !important;
}

/* some brand buttons need special text color handling for contrast */
/* Kick is bright neon green — use dark text for better readability */
.links .btn.kick,
.links .btn.kick .label,
.links .btn.kick .icon {
  color: #0b0b0b !important;
  -webkit-text-fill-color: #0b0b0b !important;
}

/* If you prefer Kick to be a dark background with a green accent (as in some designs),
   you can override .kick to use a dark background and green accent color instead:
   .kick { background: #0b0b0b; color: var(--kick); border:1px solid rgba(255,255,255,0.03); }
   Uncomment or change as desired. */

/* reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .links .btn { transition: none !important; box-shadow: none !important; filter: none !important; }
}
</style>