/* dznir theme kit: the phone frame, mock link pages and every page theme.
   Shared by the landing page today and by the real app later. */

/* Phones */
/* .slot places each hero phone in the fan; GSAP only animates the .phone inside it. */
.slot {
  --pw: clamp(200px, 17vw, 256px);
  position: absolute; left: 50%; top: 50%;
  width: var(--pw); margin-left: calc(var(--pw) * -0.5); margin-top: calc(var(--pw) * -19 / 18);
  translate: var(--x) var(--y);
  rotate: var(--r);
}
.slot--front { z-index: 2; }
.phone {
  --pw: clamp(200px, 17vw, 256px);
  position: relative; margin: 0;
  width: var(--pw); aspect-ratio: 9 / 19;
  padding: 8px; border-radius: calc(var(--pw) * 0.17);
  background: var(--ink);
  box-shadow: 0 40px 80px -32px rgba(20, 19, 17, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  will-change: transform;
}
.slot .phone { width: 100%; --pw: inherit; }
.phone::before {
  content: ''; position: absolute; left: 50%; top: 16px; z-index: 2;
  width: 32%; height: 20px; border-radius: 999px; background: var(--ink); transform: translateX(-50%);
}
.phone__screen { width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--pw) * 0.17 - 8px); background: #000; }

.mini {
  --bg: #FAF8F5; --bg2: var(--bg); --fg: #1C1B19; --mut: #5E5A54; --btn: #1C1B19; --btnfg: #FFFFFF; --rad: 12px; --font: var(--sans);
  --hl: var(--accent);
  height: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 56px 16px 24px;
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--bg);
  color: var(--fg); font-family: var(--font); text-align: center;
  transition: background 0.6s, color 0.6s;
}
.mini__avatar {
  display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 4px; border-radius: 50%;
  background: var(--btn); color: var(--btnfg); font-size: 20px; font-weight: 600;
  transition: background 0.6s, color 0.6s, border-radius 0.6s;
}
.mini__name { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.2; }
.mini__bio { margin: 0; font-size: 12px; color: var(--mut); line-height: 1.3; }
.mini__socials { display: flex; gap: 8px; margin: 4px 0 8px; }
.mini__socials svg { width: 16px; height: 16px; }
.mini__link {
  display: block; width: 100%; padding: 12px 8px; border-radius: var(--rad);
  background: var(--btn); color: var(--btnfg); border: 1.5px solid var(--btn);
  font-size: 12px; font-weight: 600; line-height: 1.2;
  transition: background 0.6s, color 0.6s, border-radius 0.6s, border-color 0.6s, box-shadow 0.6s;
}
.mini__link--hl { position: relative; box-shadow: 0 0 0 3px color-mix(in srgb, var(--hl) 40%, transparent); }
.mini__foot { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; color: var(--mut); }
.mini__foot svg { width: 12px; height: 12px; }

.phone--paper .mini { --bg: #FAF8F5; --fg: #1C1B19; --mut: #5E5A54; --btn: #1C1B19; --btnfg: #FFFFFF; --rad: 12px; }
.phone--midnight .mini {
  --bg: #0E1116; --bg2: #1F2A3C; --fg: #F3F4F6; --mut: #A7B0BE; --btn: transparent; --btnfg: #F3F4F6; --rad: 999px;
  --hl: #7C9CFF;
}
.phone--midnight .mini__link { border-color: rgba(243, 244, 246, 0.7); }
.phone--midnight .mini__avatar { background: #F3F4F6; color: #0E1116; }
.phone--sunset .mini {
  --bg: #C2410C; --bg2: #9D174D; --fg: #FFFFFF; --mut: #FFF1EB; --btn: #FFFFFF; --btnfg: #7C1D3B; --rad: 16px;
  --font: 'DM Sans', var(--sans); --hl: #FFD3C2;
}


/* ---------- Animated page backgrounds (the mock pages) ---------- */

.bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg i, .bg b { position: absolute; display: block; }

/* Aurora: soft pastel blobs */
.bg--aurora { background: #FAF8F5; }
.bg--aurora i { width: 90%; aspect-ratio: 1; border-radius: 50%; filter: blur(28px); opacity: 0.9; animation: blob 12s ease-in-out infinite alternate; }
.bg--aurora i:nth-child(1) { left: -30%; top: -10%; background: #FFC9B5; }
.bg--aurora i:nth-child(2) { right: -35%; top: 25%; background: #D9CCFF; animation-duration: 15s; animation-delay: -5s; }
.bg--aurora i:nth-child(3) { left: -10%; bottom: -30%; background: #C7F0DC; animation-duration: 18s; animation-delay: -9s; }
@keyframes blob {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(18%, 12%) scale(1.15); }
  100% { transform: translate(-12%, -8%) scale(0.9); }
}

/* Nebula: dark aurora + twinkling stars */
.bg--nebula { background: #080B15; }
.bg--nebula i { width: 100%; aspect-ratio: 1; border-radius: 50%; filter: blur(30px); opacity: 0.6; animation: blob 14s ease-in-out infinite alternate; }
.bg--nebula i:nth-child(1) { left: -40%; top: -20%; background: #3B5BFF; }
.bg--nebula i:nth-child(2) { right: -45%; top: 30%; background: #A34DFF; animation-duration: 17s; animation-delay: -6s; }
.bg--nebula i:nth-child(3) { left: -20%; bottom: -45%; background: #00B39A; animation-duration: 20s; animation-delay: -10s; opacity: 0.45; }
.bg--nebula b {
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 20%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 40% 70%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 85% 60%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 10% 85%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 60% 45%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 10%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 90%, #fff 50%, transparent 51%);
  animation: twinkle 3s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: 0.35; } to { opacity: 1; } }

/* Liquid: a slowly turning conic swirl */
.bg--liquid { background: #9D174D; }
.bg--liquid i {
  left: -50%; top: -50%; width: 200%; height: 200%;
  background: conic-gradient(from 0deg, #FF7A3D, #E0245E, #7C1D6F, #FF4D1F, #FFB347, #FF7A3D);
  filter: blur(34px); animation: swirl 14s linear infinite;
}
@keyframes swirl { to { transform: rotate(360deg); } }

/* Paper glow: warm, quiet movement for editorial themes */
.bg--paperglow { background: #F4EFE6; }
.bg--paperglow i { width: 80%; aspect-ratio: 1; border-radius: 50%; filter: blur(30px); opacity: 0.7; animation: blob 16s ease-in-out infinite alternate; }
.bg--paperglow i:nth-child(1) { right: -30%; top: -15%; background: #F2C9A0; }
.bg--paperglow i:nth-child(2) { left: -30%; bottom: -20%; background: #E9B9A8; animation-delay: -8s; }

/* Grid: moving lines for the mono theme */
.bg--grid { background: #FFFFFF; }
.bg--grid i {
  inset: -40px;
  background-image: linear-gradient(rgba(17, 17, 17, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(17, 17, 17, 0.09) 1px, transparent 1px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 30%, transparent 75%);
  mask-image: radial-gradient(circle at 50% 40%, #000 30%, transparent 75%);
  animation: grid-pan 6s linear infinite;
}
@keyframes grid-pan { to { transform: translate(20px, 20px); } }

/* Forest aurora */
.bg--forest { background: #0D241C; }
.bg--forest i:nth-child(1) { background: #1F6B4A; }
.bg--forest i:nth-child(2) { background: #C6F432; opacity: 0.35; }
.bg--forest i:nth-child(3) { background: #2E8B6A; }

/* Make the morph phone fade between backgrounds */
.phone--morph .bg { opacity: 0; transition: opacity 0.8s var(--ease-out); }
.phone--morph[data-theme='sunset'] [data-bg='sunset'],
.phone--morph[data-theme='editorial'] [data-bg='editorial'],
.phone--morph[data-theme='mono'] [data-bg='mono'],
.phone--morph[data-theme='forest'] [data-bg='forest'] { opacity: 1; }

/* Glassy buttons on the animated pages */
.phone--paper .mini__link { background: rgba(28, 27, 25, 0.92); }
.phone--midnight .mini__link { background: rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* =========================================================
   Theme gallery: "A theme for every vibe"
   Original themes inspired by eras and internet culture.
   No show names, logos or fonts are used.
   ========================================================= */

.vibes { padding: 160px 0 128px; overflow: hidden; }
.vibes__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.vibes__side { display: grid; justify-items: end; gap: 16px; }
.vibes__lede { margin: 0; max-width: 20em; font-size: clamp(18px, 1.4vw, 21px); font-weight: 500; color: var(--ink-2); text-align: right; }
.vibes__arrows { display: flex; gap: 8px; }
.arrow {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--ink); background: transparent; color: var(--ink); font: 500 20px/1 var(--sans); cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.arrow:hover { background: var(--ink); color: var(--paper); }

.vibes__track {
  display: flex; gap: 32px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 56px max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))) 24px;
  scroll-padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  scrollbar-width: none; cursor: grab;
}
.vibes__track::-webkit-scrollbar { display: none; }
.vibes__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.vibes__track.is-dragging * { pointer-events: none; }
.vibe-card { flex: none; width: 288px; scroll-snap-align: start; }
.vibe-card .phone { --pw: 264px; margin: 0 auto 24px; transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out); }
.vibe-card:hover .phone { transform: translateY(-12px) rotate(-2deg); box-shadow: 0 56px 96px -40px rgba(20, 19, 17, 0.6); }
.vibe-card > h3 { margin: 0 0 4px; font-family: var(--serif); font-size: 36px; font-weight: 400; line-height: 1; letter-spacing: -0.02em; }
.vibe-card > p { margin: 0; font-size: 15px; color: var(--muted); }

.vibe.is-paused *, .vibe.is-paused *::before, .vibe.is-paused *::after { animation-play-state: paused !important; }
.vibe .bg span { position: absolute; display: block; }

/* ---- Rift: 80s sci-fi horror ---- */
.vibe--rift .mini {
  --bg: #07060A; --fg: #F4E9E9; --mut: #BFAFAF; --btn: transparent; --btnfg: #FFE1DB; --rad: 6px; --hl: #FF2A2A;
}
.vibe--rift .bg { background: radial-gradient(130% 60% at 50% 115%, #4A0707, #07060A 62%); }
.vibe--rift .mini__name {
  font-family: 'Playfair Display', Georgia, serif; font-weight: 900; font-size: 19px; text-transform: uppercase; letter-spacing: 0.04em;
  color: transparent; -webkit-text-stroke: 1px #FF4433;
  text-shadow: 0 0 6px rgba(255, 50, 40, 0.9), 0 0 18px rgba(255, 0, 0, 0.55);
  animation: rift-flicker 5s infinite;
}
.vibe--rift .mini__avatar { background: #160808; color: #FF5A47; box-shadow: 0 0 0 1px #FF3B30, 0 0 18px rgba(255, 40, 30, 0.5); }
.vibe--rift .mini__avatar.has-img { background: #FF3B30; }
.vibe--rift .mini__link { border-color: rgba(255, 90, 70, 0.55); background: rgba(255, 40, 30, 0.06); box-shadow: inset 0 0 12px rgba(255, 40, 30, 0.12); }
.vibe--rift .mini__link--hl { background: rgba(255, 40, 30, 0.22); border-color: #FF4433; }
.rift-lights { top: 38px; left: 6%; right: 6%; height: 16px; display: flex !important; justify-content: space-between; align-items: flex-start; }
.rift-lights::before { content: ''; position: absolute; left: 0; right: 0; top: -6px; height: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.22); border-radius: 0 0 50% 50%; }
.rift-lights i { position: relative !important; width: 7px; height: 10px; border-radius: 50% 50% 45% 45%; color: #FF3B30; background: currentColor; box-shadow: 0 0 8px 2px currentColor; animation: bulb 3s infinite; }
.rift-lights i:nth-child(4n + 2) { color: #FFD23F; animation-delay: -0.7s; }
.rift-lights i:nth-child(4n + 3) { color: #3FA7FF; animation-delay: -1.4s; animation-duration: 2.2s; }
.rift-lights i:nth-child(4n + 4) { color: #42E07A; animation-delay: -2.1s; }
.rift-lights i:nth-child(odd) { margin-top: 3px; }
@keyframes bulb { 0%, 100% { opacity: 1; } 46% { opacity: 1; } 48% { opacity: 0.15; } 52% { opacity: 1; } 70% { opacity: 0.25; } 74% { opacity: 1; } }
@keyframes rift-flicker { 0%, 100% { opacity: 1; } 41% { opacity: 1; } 42% { opacity: 0.35; } 43% { opacity: 1; } 45% { opacity: 0.5; } 46% { opacity: 1; } 82% { opacity: 1; } 83% { opacity: 0.6; } 84% { opacity: 1; } }
.rift-ash { inset: 0; }
.rift-ash i { position: absolute; left: var(--x); bottom: -8px; width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 235, 230, 0.6); scale: var(--s); animation: ash-rise var(--d) linear var(--dl) infinite; }
@keyframes ash-rise { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 0.9; } 100% { transform: translate(24px, -620px); opacity: 0; } }
.rift-fog { left: -20%; right: -20%; bottom: 0; height: 45%; background: radial-gradient(60% 50% at 50% 100%, rgba(150, 0, 0, 0.45), transparent 70%); filter: blur(8px); animation: fog 7s ease-in-out infinite alternate; }
@keyframes fog { from { transform: translateX(-6%); opacity: 0.7; } to { transform: translateX(6%); opacity: 1; } }

/* ---- Couch '94: 90s sitcom ---- */
.vibe--couch .mini {
  --bg: #5B2A86; --fg: #FFFFFF; --mut: #EADCF7; --btn: #FFD43B; --btnfg: #3A1A58; --rad: 999px; --hl: #E53935;
  --font: 'DM Sans', var(--sans);
}
.vibe--couch .bg { background: repeating-linear-gradient(90deg, #5B2A86 0 18px, #56287F 18px 36px); }
.vibe--couch .mini__name { font-family: 'Permanent Marker', cursive; font-weight: 400; font-size: 17px; letter-spacing: 0.06em; line-height: 1.1; }
.vibe--couch .mini__name span { display: block; }
.vibe--couch .mini__name b { font-weight: 400; padding: 0 1px; }
.vibe--couch .mini__name b:nth-of-type(3n + 1) { color: #E53935; }
.vibe--couch .mini__name b:nth-of-type(3n + 2) { color: #FFD43B; }
.vibe--couch .mini__name b:nth-of-type(3n + 3) { color: #3FA7FF; }
.vibe--couch .mini__avatar { background: #FFFFFF; color: #5B2A86; box-shadow: 0 0 0 4px #FFD43B, 0 0 0 7px #5B2A86, 0 0 0 9px #FFD43B; }
.vibe--couch .mini__link--hl { background: #E53935; border-color: #E53935; color: #FFFFFF; }
.couch-dots { inset: 0; }
.couch-dots i { position: absolute; left: var(--x); top: calc((var(--s) - 0.6) * 118%); width: 10px; height: 10px; border-radius: 50%; scale: var(--s); background: #E53935; opacity: 0.85; animation: dot-bob var(--d) ease-in-out var(--dl) infinite alternate; }
.couch-dots i:nth-child(4n + 2) { background: #FFD43B; }
.couch-dots i:nth-child(4n + 3) { background: #3FA7FF; }
.couch-dots i:nth-child(4n + 4) { background: #42E07A; }
@keyframes dot-bob { from { transform: translate(0, 0); } to { transform: translate(10px, -28px); } }

/* ---- Meme Lord ---- */
.vibe--meme .mini {
  --bg: #FFFFFF; --fg: #111111; --mut: #555555; --btn: #FFFFFF; --btnfg: #111111; --rad: 10px; --hl: #FFE14D;
  padding-top: 48px; gap: 6px;
}
.vibe--meme .bg { background: radial-gradient(#E9E9E9 1px, transparent 1.4px) 0 0 / 12px 12px, #FFFFFF; }
.meme-cap {
  margin: 0; font-family: 'Anton', Impact, sans-serif; font-size: 22px; line-height: 1; text-transform: uppercase; letter-spacing: 0.01em; color: #FFFFFF;
  text-shadow: 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000, 0 2px 0 #000, 2px 0 0 #000, 0 -2px 0 #000, -2px 0 0 #000;
}
.meme-cap--bottom { margin-top: auto; }
.vibe--meme .mini__avatar { border-radius: 14px; background: #111111; color: #FFE14D; rotate: -6deg; }
.vibe--meme .mini__name { font-family: 'Anton', Impact, sans-serif; font-weight: 400; font-size: 18px; letter-spacing: 0.02em; }
.vibe--meme .mini__link { border: 2px solid #111111; box-shadow: 3px 3px 0 #111111; font-weight: 700; }
.vibe--meme .mini__link--hl { background: #FFE14D; animation: wiggle 2.4s ease-in-out infinite; }
@keyframes wiggle { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-2.5deg); } 80% { transform: rotate(2.5deg); } 85% { transform: rotate(-1.5deg); } 90% { transform: rotate(1deg); } }
.meme-emoji { inset: 0; }
.meme-emoji i { position: absolute; font-style: normal; font-size: 22px; animation: emoji-bounce 2.6s ease-in-out infinite; }
.meme-emoji i:nth-child(1) { left: 8%; top: 18%; }
.meme-emoji i:nth-child(2) { right: 8%; top: 22%; animation-delay: -0.6s; }
.meme-emoji i:nth-child(3) { left: 6%; top: 54%; animation-delay: -1.2s; }
.meme-emoji i:nth-child(4) { right: 6%; top: 60%; animation-delay: -1.8s; }
.meme-emoji i:nth-child(5) { left: 14%; bottom: 12%; animation-delay: -0.9s; }
.meme-emoji i:nth-child(6) { right: 14%; bottom: 14%; animation-delay: -2.2s; }
@keyframes emoji-bounce { 0%, 100% { transform: translateY(0) rotate(-10deg) scale(1); } 50% { transform: translateY(-10px) rotate(12deg) scale(1.15); } }

/* ---- Glitch: gamer neon ---- */
.vibe--glitch .mini {
  --bg: #05060A; --fg: #E8FDFF; --mut: #8FB9C2; --btn: transparent; --btnfg: #00F0FF; --rad: 0; --hl: #FF2BD6;
  --font: 'VT323', ui-monospace, monospace;
}
.vibe--glitch .bg { background: radial-gradient(90% 60% at 50% 0%, #0B2A3A, #05060A 70%); }
.vibe--glitch .mini__name { position: relative; font-size: 28px; font-weight: 400; letter-spacing: 0.06em; text-shadow: 0 0 8px rgba(0, 240, 255, 0.7); }
.vibe--glitch .mini__name::before, .vibe--glitch .mini__name::after {
  content: attr(data-text); position: absolute; inset: 0; overflow: hidden;
}
.vibe--glitch .mini__name::before { color: #FF2BD6; animation: glitch-a 2.6s infinite steps(1); }
.vibe--glitch .mini__name::after { color: #00F0FF; animation: glitch-b 2.6s infinite steps(1); }
@keyframes glitch-a { 0%, 86%, 100% { transform: none; clip-path: inset(0 0 100% 0); } 88% { transform: translate(-3px, 0); clip-path: inset(10% 0 55% 0); } 92% { transform: translate(3px, 0); clip-path: inset(60% 0 10% 0); } 96% { transform: translate(-2px, 0); clip-path: inset(35% 0 40% 0); } }
@keyframes glitch-b { 0%, 86%, 100% { transform: none; clip-path: inset(100% 0 0 0); } 89% { transform: translate(3px, 0); clip-path: inset(50% 0 20% 0); } 93% { transform: translate(-3px, 0); clip-path: inset(5% 0 70% 0); } 97% { transform: translate(2px, 0); clip-path: inset(70% 0 5% 0); } }
.vibe--glitch .mini__bio { font-size: 15px; }
.vibe--glitch .mini__avatar { border-radius: 0; background: #05060A; color: #00F0FF; font-family: 'VT323', monospace; font-size: 26px; box-shadow: 0 0 0 1px #00F0FF, 0 0 16px rgba(0, 240, 255, 0.5); }
.vibe--glitch .mini__link {
  font-size: 16px; font-weight: 400; letter-spacing: 0.04em; text-align: left; padding-left: 16px;
  border-color: #00F0FF; background: rgba(0, 240, 255, 0.06);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.vibe--glitch .mini__link--hl { border-color: #FF2BD6; color: #FF2BD6; background: rgba(255, 43, 214, 0.12); box-shadow: none; animation: neon 1.6s ease-in-out infinite alternate; }
@keyframes neon { from { text-shadow: 0 0 2px #FF2BD6; } to { text-shadow: 0 0 10px #FF2BD6, 0 0 18px #FF2BD6; } }
.glitch-scan { inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 3px); }
.glitch-scan::after { content: ''; position: absolute; left: 0; right: 0; height: 30%; background: linear-gradient(transparent, rgba(0, 240, 255, 0.08), transparent); animation: scan 3.4s linear infinite; }
@keyframes scan { from { top: -30%; } to { top: 100%; } }
.glitch-bars { inset: 0; }
.glitch-bars i { position: absolute; left: 0; right: 0; height: 3px; opacity: 0; animation: bar 3s steps(1) infinite; }
.glitch-bars i:nth-child(1) { top: 22%; background: #FF2BD6; }
.glitch-bars i:nth-child(2) { top: 58%; height: 5px; background: #00F0FF; animation-delay: -1.1s; }
.glitch-bars i:nth-child(3) { top: 80%; background: #FFFFFF; animation-delay: -2.2s; }
@keyframes bar { 0%, 90%, 100% { opacity: 0; } 92% { opacity: 0.5; transform: translateX(-10%); } 95% { opacity: 0.3; transform: translateX(10%); } }

/* ---- Vapor: synthwave sunset ---- */
.vibe--vapor .mini {
  --bg: #1B0B3A; --fg: #FFFFFF; --mut: #FFD1F4; --btn: rgba(27, 11, 58, 0.62); --btnfg: #FFFFFF; --rad: 8px; --hl: #01CDFE;
}
.vibe--vapor .bg { background: linear-gradient(180deg, #1B0B3A 0%, #4A1466 40%, #A3206B 62%, #1B0B3A 62.5%); }
.vapor-sun {
  left: 50%; top: 34px; width: 150px; height: 150px; margin-left: -75px; border-radius: 50%;
  background: linear-gradient(180deg, #FFE36E 0%, #FF9A3C 45%, #FF3D8B 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 52% 57%, #000 57% 66%, transparent 66% 71%, #000 71% 79%, transparent 79% 85%, #000 85%);
  mask-image: linear-gradient(180deg, #000 52%, transparent 52% 57%, #000 57% 66%, transparent 66% 71%, #000 71% 79%, transparent 79% 85%, #000 85%);
  box-shadow: 0 0 60px rgba(255, 90, 160, 0.6);
  animation: sun-pulse 4s ease-in-out infinite alternate;
}
@keyframes sun-pulse { from { filter: brightness(1); } to { filter: brightness(1.2); } }
.vapor-grid {
  left: -60%; right: -60%; bottom: 0; height: 40%;
  background-image: linear-gradient(#FF71CE 1.5px, transparent 1.5px), linear-gradient(90deg, #FF71CE 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  transform: perspective(140px) rotateX(58deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(transparent, #000 40%); mask-image: linear-gradient(transparent, #000 40%);
  animation: grid-run 0.9s linear infinite;
}
@keyframes grid-run { to { background-position: 0 26px; } }
.vibe--vapor .mini__avatar { background: #1B0B3A; color: #FF71CE; box-shadow: 0 0 0 2px #FF71CE; position: relative; }
.vibe--vapor .mini__name { font-family: 'Righteous', var(--sans); font-weight: 400; font-size: 22px; letter-spacing: 0.08em; text-shadow: 0 0 10px #FF71CE, 0 0 22px rgba(255, 113, 206, 0.6); }
.vibe--vapor .mini__link { border-color: #FF71CE; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vibe--vapor .mini__link--hl { border-color: #01CDFE; color: #01CDFE; box-shadow: 0 0 14px rgba(1, 205, 254, 0.45); }
.vibe--vapor .mini__link:first-of-type { margin-top: 24px; }

/* ---- Sakura: pastel petals ---- */
.vibe--sakura .mini {
  --bg: #FFF0F5; --fg: #5A2340; --mut: #96506F; --btn: #FFFFFF; --btnfg: #A62E63; --rad: 999px; --hl: #FF8FB8;
  --font: 'Nunito', var(--sans);
}
.vibe--sakura .bg { background: linear-gradient(180deg, #FFE1EC, #FFF6F9 60%, #FFEAF2); }
.vibe--sakura .mini__name { font-weight: 800; font-size: 18px; }
.vibe--sakura .mini__avatar { background: #FFB7CE; color: #FFFFFF; box-shadow: 0 0 0 4px #FFFFFF, 0 8px 20px -6px rgba(214, 51, 108, 0.5); }
.vibe--sakura .mini__link { border-color: #FFC2D6; box-shadow: 0 6px 14px -8px rgba(214, 51, 108, 0.45); font-weight: 800; }
.vibe--sakura .mini__link--hl { background: #D6336C; border-color: #D6336C; color: #FFFFFF; }
.sakura-petals { inset: 0; }
.sakura-petals i {
  position: absolute; left: var(--x); top: -16px; width: 11px; height: 8px; scale: var(--s);
  border-radius: 100% 0 100% 0; background: linear-gradient(135deg, #FFC9DA, #FF9FC0);
  animation: petal var(--d) linear var(--dl) infinite;
}
@keyframes petal {
  0% { transform: translate(0, 0) rotate(0); opacity: 0; }
  8% { opacity: 1; }
  50% { transform: translate(28px, 300px) rotate(200deg); }
  100% { transform: translate(-12px, 620px) rotate(400deg); opacity: 0.2; }
}

@media (max-width: 720px) {
  .vibes { padding: 112px 0 96px; }
  .vibes__head { flex-direction: column; align-items: flex-start; }
  .vibes__side { justify-items: start; }
  .vibes__lede { text-align: left; }
  .vibes__arrows { display: none; }
  .vibe-card { width: 248px; }
  .vibe-card .phone { --pw: 232px; }
  .vibes__track { gap: 20px; padding-top: 40px; }
}

/* =========================================================
   Realistic link-page details (patterns people already know)
   ========================================================= */
.tick { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-left: 2px; }

/* Designer page: "Studio" */
.phone--studio .phone__screen, .vibe--studio .phone__screen { background: #F6F4EF; }
.mini--studio {
  --bg: #F6F4EF; --fg: #141311; --mut: #5E5A54; --btn: #FFFFFF; --btnfg: #141311; --rad: 12px; --hl: #141311; /* muted 5.4:1 on the blocks */
  --font: 'Hanken Grotesk', var(--sans);
  padding: 52px 14px 18px; gap: 7px;
}
.mini--studio .mini__name { font-family: 'Syne', var(--sans); font-weight: 800; font-size: 17px; letter-spacing: -0.02em; }
.mini--studio .mini__link { border: 1px solid rgba(20, 19, 17, 0.1); box-shadow: 0 2px 0 rgba(20, 19, 17, 0.04); }
.mini--studio .mini__link--hl { background: #141311; color: #FFFFFF; border-color: #141311; box-shadow: none; }
.mini--studio .mini__socials { margin: 4px 0 0; color: #141311; }
.studio__av {
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; margin-bottom: 2px;
  background: conic-gradient(from 200deg, #FF7A59, #FFB547, #C6F432, #7B5CFF, #FF7A59); padding: 3px;
}
.studio__av i { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #141311; color: #FFFFFF; font-style: normal; font-weight: 700; font-size: 18px; border: 2px solid #F6F4EF; }
.avail { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #E3F6E8; color: #17663A; font-size: 10.5px; font-weight: 700; }
.avail i { position: relative; width: 6px; height: 6px; border-radius: 50%; background: #22C55E; }
.avail i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #22C55E; animation: pulse 2s var(--ease-out) infinite; }
.avail--dark { background: rgba(34, 197, 94, 0.15); color: #7CF0A8; }
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; margin: 2px 0; }
.shot { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; }
.shot--1 { background: radial-gradient(circle at 30% 70%, #FFB547 0 22%, transparent 23%), linear-gradient(135deg, #FF7A59, #E0245E); }
.shot--2 { background: #141311; display: grid; place-items: center; }
.shot--2 b { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; font-size: 26px; color: #C6F432; }
.shot--3 { background: repeating-radial-gradient(circle at 100% 100%, #7B5CFF 0 6px, #A78BFA 6px 12px); }
.shot--4 { background: #FFFFFF; border: 1px solid rgba(20, 19, 17, 0.1); display: grid; align-content: center; gap: 4px; padding: 8px; }
.shot--4 i { display: block; height: 5px; border-radius: 3px; background: #E7E4DD; }
.shot--4 i:first-child { width: 60%; background: #141311; }
.shot--4 i:last-child { width: 40%; background: #7B5CFF; }
.shot { animation: shot-in 6s ease-in-out infinite; }
.shot--2 { animation-delay: -1.5s; } .shot--3 { animation-delay: -3s; } .shot--4 { animation-delay: -4.5s; }
@keyframes shot-in { 0%, 80%, 100% { transform: none; } 88% { transform: translateY(-3px) scale(1.03); } }

/* YouTube-style video link card */
.vcard { display: block; width: 100%; border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); text-align: left; }
.vcard__thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: radial-gradient(circle at 70% 30%, #FF3D8B, transparent 50%), radial-gradient(circle at 20% 80%, #3B5BFF, transparent 55%), #1A1030; }
.vcard__play { position: absolute; left: 50%; top: 50%; width: 34px; height: 24px; margin: -12px 0 0 -17px; border-radius: 8px; background: #FF0000; }
.vcard__play::after { content: ''; position: absolute; left: 13px; top: 6px; border-left: 10px solid #FFFFFF; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.vcard__thumb b { position: absolute; right: 6px; bottom: 6px; padding: 1px 5px; border-radius: 4px; background: rgba(0, 0, 0, 0.8); color: #FFFFFF; font-size: 9.5px; font-weight: 700; }
.vcard__t { display: block; padding: 8px 10px; font-size: 11.5px; font-weight: 700; color: #F3F4F6; }

/* Links with a thumbnail on the left */
.mini__link--thumb { position: relative; padding-left: 40px; text-align: left; }
.mini__link--thumb i { position: absolute; left: 6px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(124, 29, 59, 0.08); font-style: normal; font-size: 14px; }
.mini__link--hl.mini__link--thumb i { background: rgba(255, 255, 255, 0.3); }

/* Compare slider extras */
.cmp .shots { width: 100%; }
.cmp .avail { margin-bottom: 2px; }
.cmp .tick { width: 15px; height: 15px; }

/* Phone hardware stays dark on the dark theme */
.phone { background: #050507; box-shadow: 0 40px 80px -32px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 0 1px rgba(255, 255, 255, 0.06); }
.phone::before { background: #050507; }


/* Never squash page elements when a phone is short on height. The name, bio and socials sit in .mini__head
   (display: contents, layouts.css), so they are flex items of .mini too: without the second selector the editor's short
   phone squashed a name with overflow: hidden (the RK themes) to a sliver (owner, 31 Oct 2026). */
.mini > *, .mini__head > *, .studio__av, .mini__avatar { flex-shrink: 0; }

/* =========================================================
   Renderer layers + content blocks that adapt to any theme
   ========================================================= */
.pg-layer { position: absolute; inset: 0; }
.pg-layer > .mini { height: 100%; }
/* The dznir.com badge (Free, or anyone who hasn't hidden it): stuck to the bottom while the page scrolls, never hidden */
.mini__url { position: sticky; bottom: 12px; z-index: 5; display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding: 5px 10px; border: 1px solid color-mix(in srgb, var(--fg, #141311) 10%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--bg, #FAF8F5) 82%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.35); font-size: 10.5px; font-weight: 600; color: var(--mut, #6B665D); }
.mini__url b { color: var(--fg, #141311); }
/* always one line, centred (owner: "center aligned inline like old"): browsers may break after the "/" when space is
   tight, so it never wraps; a very long username is cut with … instead */
.mini__url { align-self: center; max-width: calc(100% - 24px); white-space: nowrap; }
.mini__url > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mini__url .wm__z { flex: none; }
.mini__url .wm__z { width: 9px; height: 10px; color: var(--fg, #141311); }
/* The editor's phone preview and the theme cards: the badge rests after the last block instead of sitting over a
   block or a video (owner, 27 Oct 2026); the real page keeps it pinned to the screen */
.mini__url.mini__url--rest { position: static; }

.blk {
  display: block; width: 100%; overflow: hidden; text-align: left; color: var(--fg);
  border-radius: 14px; background: color-mix(in srgb, var(--fg) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
}
.blk__thumb { position: relative; display: block; aspect-ratio: 16 / 8; background: radial-gradient(circle at 70% 30%, #FFB547, transparent 55%), radial-gradient(circle at 20% 80%, #E0245E, transparent 60%), #3A1D5C; }
.blk__play { position: absolute; left: 50%; top: 50%; width: 32px; height: 22px; margin: -11px 0 0 -16px; border-radius: 7px; background: #FF0000; }
.blk__play::after { content: ''; position: absolute; left: 12px; top: 5px; border-left: 10px solid #FFFFFF; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.blk__thumb b { position: absolute; right: 6px; bottom: 6px; padding: 1px 5px; border-radius: 4px; background: rgba(0, 0, 0, 0.75); color: #FFFFFF; font-size: 9.5px; font-weight: 700; }
.blk__t { display: block; padding: 8px 10px; font-size: 11.5px; font-weight: 700; }
.blk--menu { padding: 10px 12px; display: grid; gap: 4px; }
.blk__h { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); }
.blk__row { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.blk__row b { font-weight: 700; }
.blk--track { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; }
.blk__art { width: 40px; height: 40px; border-radius: 8px; background: conic-gradient(from 90deg, #01CDFE, #FF71CE, #B967FF, #01CDFE); }
.blk__info b { display: block; font-size: 12px; }
.blk__info small { display: block; font-size: 10px; color: var(--mut); }
.blk__bar { display: block; height: 3px; margin-top: 5px; border-radius: 2px; background: color-mix(in srgb, var(--fg) 18%, transparent); }
.blk__bar i { display: block; width: 38%; height: 100%; border-radius: inherit; background: var(--fg); animation: progress 8s linear infinite; }
@keyframes progress { from { width: 8%; } to { width: 92%; } }
.blk__time { font-size: 10px; color: var(--mut); }
.blk--live .blk__thumb { aspect-ratio: 16 / 7; background: linear-gradient(135deg, #0B2A3A, #3B0B4A); }
.blk__live { position: absolute; left: 8px; top: 8px; padding: 2px 7px; border-radius: 4px; background: #E91916; color: #FFFFFF; font-size: 10px; font-weight: 800; letter-spacing: 0.04em; animation: live 1.6s ease-in-out infinite; }
@keyframes live { 50% { opacity: 0.55; } }
.blk--live .blk__thumb b { right: auto; left: 8px; bottom: 8px; }
/* Live now block: the stream's own thumbnail while live; a calm "Next stream" card when not */
.blk--live.is-live .blk__thumb { background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.6)), var(--thumb, linear-gradient(135deg, #0B2A3A, #3B0B4A)) center / cover; }
.blk--live.is-live .blk__thumb b { right: 8px; overflow: hidden; background: none; padding: 0; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.blk--live.is-off .blk__thumb { aspect-ratio: 16 / 5; }
.blk__next { position: absolute; left: 8px; top: 8px; padding: 2px 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.16); color: #FFFFFF; font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
/* Off air: the channel card (banner, profile picture, name, next stream); Twitch has no banner, so its picture, blurred */
.blk--chan { display: block; overflow: hidden; text-align: left; }
.blk__banner { position: relative; display: block; aspect-ratio: 16 / 4.5; overflow: hidden; background: linear-gradient(135deg, #0B2A3A, #3B0B4A); }
.blk__banner::before { content: ''; position: absolute; inset: 0; background: var(--banner, none) center / cover; }
.blk__banner.is-blur::before { inset: -40%; filter: blur(28px) saturate(1.4) brightness(0.85); }
.blk--chan-twitch .blk__banner { background: #6441A5; }
.blk--chan-kick .blk__banner { background: #0B0B0B; }
.blk--chan-youtube .blk__banner { background: #CC0000; }
.blk__chan { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 0 10px 8px; }
.blk__avatar { width: 36px; height: 36px; margin-top: -14px; border: 2px solid var(--card-bg, var(--bg)); border-radius: 50%; object-fit: cover; background: var(--bg); position: relative; }
.blk__chan-text { display: grid; min-width: 0; padding-top: 6px; }
.blk__chan-text b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.blk__chan-text small { overflow: hidden; color: var(--mut); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.blk__plat { width: 14px; height: 14px; margin-top: 6px; color: var(--mut); }
.blk--chan-youtube .blk__plat { color: #FF0000; }
.blk--chan-twitch .blk__plat { color: #9146FF; }
.blk--chan-kick .blk__plat { color: #53FC18; }
.shots--art .shot--a1 { background: radial-gradient(circle at 40% 40%, #FFD6E4 0 20%, transparent 21%), linear-gradient(160deg, #FF9FC0, #B967FF); }
.shots--art .shot--a2 { background: radial-gradient(circle at 60% 60%, #FFF3C4 0 26%, transparent 27%), #7FD1C7; }
.shots--art .shot--a3 { background: repeating-linear-gradient(45deg, #FFB7CE 0 8px, #FFE4EE 8px 16px); }
.shots--art .shot--a4 { background: conic-gradient(from 0deg at 50% 50%, #FFB547, #FF7A59, #E0245E, #FFB547); }

/* Playground controls: font + button shape overrides beat any theme */
.ft-sans .mini, .ft-sans .mini__name { font-family: 'Instrument Sans', sans-serif !important; }
.ft-serif .mini, .ft-serif .mini__name { font-family: 'Instrument Serif', Georgia, serif !important; font-weight: 400 !important; }
.ft-serif .mini__name { font-size: 22px !important; }
.ft-rounded .mini, .ft-rounded .mini__name { font-family: 'Nunito', sans-serif !important; }
.ft-mono .mini, .ft-mono .mini__name { font-family: 'JetBrains Mono', ui-monospace, monospace !important; }
/* the page's button shape; a block with its own style (.bsx, block-styles.css) keeps that */
.sh-pill :not(.bsx) > .mini__link, .sh-pill .blk { border-radius: 999px !important; clip-path: none !important; }
.sh-pill .blk { border-radius: 18px !important; }
.sh-rounded :not(.bsx) > .mini__link { border-radius: 12px !important; clip-path: none !important; }
.sh-square :not(.bsx) > .mini__link, .sh-square .blk, .sh-square .shot { border-radius: 0 !important; clip-path: none !important; }
/* ...and the buttons and fields inside cards (Work with me, Pay with any UPI app, Get directions, sign-up forms), so
   the whole page follows it (owner, 28 Oct: "its not working on the preview"). A block with its own Block style keeps it. */
.sh-pill .blk-hook:not(.bsx) :is(.blk__btn, .fm__btn, .fm__row, .fm__in:not(.fm__area)) { border-radius: 999px !important; }
.sh-pill .blk-hook:not(.bsx) .fm__area { border-radius: 18px !important; }
.sh-rounded .blk-hook:not(.bsx) .blk { border-radius: 16px !important; }
.sh-rounded .blk-hook:not(.bsx) :is(.blk__btn, .fm__btn, .fm__in, .fm__area) { border-radius: 10px !important; }
.sh-rounded .blk-hook:not(.bsx) .fm__row { border-radius: 14px !important; }
.sh-square .blk-hook:not(.bsx) :is(.blk__btn, .fm__btn, .fm__in, .fm__area, .fm__row) { border-radius: 0 !important; }
/* Media kit (owner, 28 Oct: "make sure button shape will work on Media Kit"): the kit page's tabs, stat tiles and cards,
   the floating kit cards, and the Work with me form (a dialog outside the page: it carries sh-* itself) */
.sh-rounded .kt .blk { border-radius: 16px !important; }
.sh-rounded .kt-tabs { border-radius: 12px !important; }
.sh-rounded .kt-tab { border-radius: 8px !important; }
.sh-square :is(.kt-tabs, .kt-tab, .kit__item, .kf__card) { border-radius: 0 !important; }
.collab.sh-pill :is(input, select) { border-radius: 999px !important; }
.collab.sh-pill textarea { border-radius: 24px !important; }
.collab.sh-rounded :is(input, select, textarea, .collab__send) { border-radius: 12px !important; }
.collab.sh-square, .collab.sh-square :is(input, select, textarea, .collab__send) { border-radius: 0 !important; }

/* =========================================================
   Profile pictures (illustrated, fictional people)
   ========================================================= */
.mini__avatar.has-img { padding: 3px; background: var(--btn); overflow: hidden; }
.mini__avatar.has-img img, .studio__av.has-img img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #FFFFFF; }
.studio__av.has-img img { border: 2px solid #F6F4EF; }
.vibe--glitch .mini__avatar.has-img { border-radius: 0; padding: 2px; background: #00F0FF; }
.vibe--glitch .mini__avatar.has-img img { border-radius: 0; }
.vibe--meme .mini__avatar.has-img img { border-radius: 12px; }

/* Rift: red lightning flashes */
.rift-bolt { inset: 0; background: radial-gradient(60% 40% at 70% 20%, rgba(255, 40, 30, 0.55), transparent 70%); opacity: 0; animation: rift-flash 6s infinite; }
.rift-bolt::after {
  content: ''; position: absolute; right: 16%; top: 6%; width: 38px; height: 110px; background: #FF5A47;
  clip-path: polygon(55% 0, 20% 48%, 48% 48%, 30% 100%, 80% 40%, 52% 40%, 70% 0);
  filter: drop-shadow(0 0 8px #FF2A2A);
}
@keyframes rift-flash { 0%, 88%, 100% { opacity: 0; } 89% { opacity: 1; } 90% { opacity: 0.2; } 91.5% { opacity: 0.9; } 93% { opacity: 0; } }

/* ---- Villain Arc: iron, emerald runes, green lightning ---- */
.vibe--villain .mini {
  --bg: #060D09; --fg: #E6F2EA; --mut: #8FB59E; --btn: rgba(16, 38, 26, 0.85); --btnfg: #DFF5E7; --rad: 6px; --hl: #1FD17A;
  --font: 'Instrument Sans', var(--sans);
}
.vibe--villain .bg { background: radial-gradient(90% 60% at 50% 0%, #0E2A1B, #060D09 70%); }
.vl-metal { inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 9px), linear-gradient(180deg, rgba(160, 175, 168, 0.12), transparent 40%); }
.vl-runes { inset: 0; }
.vl-runes i { position: absolute; font-style: normal; font-size: 20px; color: #1FD17A; text-shadow: 0 0 10px #1FD17A; opacity: 0.25; animation: rune 5s ease-in-out infinite; }
.vl-runes i:nth-child(1) { left: 10%; top: 16%; }
.vl-runes i:nth-child(2) { right: 12%; top: 28%; animation-delay: -1s; }
.vl-runes i:nth-child(3) { left: 14%; top: 62%; animation-delay: -2s; }
.vl-runes i:nth-child(4) { right: 10%; top: 72%; animation-delay: -3s; }
.vl-runes i:nth-child(5) { left: 46%; top: 88%; animation-delay: -4s; }
@keyframes rune { 50% { opacity: 0.9; transform: translateY(-6px); } }
.vl-bolt { inset: 0; opacity: 0; background: radial-gradient(50% 35% at 30% 25%, rgba(31, 209, 122, 0.5), transparent 70%); animation: rift-flash 7s 1.5s infinite; }
.vl-bolt::after { content: ''; position: absolute; left: 14%; top: 8%; width: 34px; height: 100px; background: #6CFFB4; clip-path: polygon(55% 0, 20% 48%, 48% 48%, 30% 100%, 80% 40%, 52% 40%, 70% 0); filter: drop-shadow(0 0 10px #1FD17A); }
.vl-smoke { left: -20%; right: -20%; bottom: 0; height: 40%; background: radial-gradient(60% 60% at 50% 100%, rgba(31, 209, 122, 0.22), transparent 70%); filter: blur(10px); animation: fog 8s ease-in-out infinite alternate; }
.vibe--villain .mini__name {
  font-family: 'Cinzel', Georgia, serif; font-weight: 900; font-size: 18px; letter-spacing: 0.06em; text-transform: uppercase;
  background: linear-gradient(180deg, #FFFFFF 0%, #A9B8B0 45%, #5E6B64 55%, #D9E4DE 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 6px rgba(31, 209, 122, 0.55));
}
.vibe--villain .mini__avatar.has-img { background: linear-gradient(135deg, #1FD17A, #C9D4CE 50%, #4B5A52); box-shadow: 0 0 18px rgba(31, 209, 122, 0.45); }
.vibe--villain .mini__link { border: 1px solid rgba(31, 209, 122, 0.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.vibe--villain .mini__link--hl { background: #1FD17A; color: #04140B; border-color: #1FD17A; box-shadow: 0 0 22px rgba(31, 209, 122, 0.5); }

/* ---- Multiverse: comic halftone, colour offsets, panels ---- */
.vibe--multi .mini {
  --bg: #1B1464; --fg: #FFFFFF; --mut: #D7D4FF; --btn: #FFFFFF; --btnfg: #111111; --rad: 6px; --hl: #FFE14D;
}
.vibe--multi .bg { background: #1B1464; }
.mv-dots { inset: -20px; background: radial-gradient(circle, rgba(255, 46, 99, 0.55) 1.6px, transparent 2px) 0 0 / 10px 10px, radial-gradient(circle, rgba(0, 229, 255, 0.4) 1.6px, transparent 2px) 5px 5px / 10px 10px; -webkit-mask-image: linear-gradient(160deg, #000, transparent 65%); mask-image: linear-gradient(160deg, #000, transparent 65%); animation: mv-shift 4s steps(4) infinite; }
@keyframes mv-shift { 50% { transform: translate(3px, -2px); } }
.mv-panels { inset: 0; background: linear-gradient(118deg, transparent 49.4%, #000 49.5% 50.5%, transparent 50.6%) 0 0 / 100% 100%, linear-gradient(62deg, transparent 49.4%, #000 49.5% 50.5%, transparent 50.6%) 0 60% / 100% 50% no-repeat; opacity: 0.35; }
.mv-burst { right: -40px; top: 30px; width: 140px; height: 140px; background: conic-gradient(from 0deg, #FFE14D 0 8deg, transparent 8deg 22deg, #FFE14D 22deg 30deg, transparent 30deg 45deg); border-radius: 50%; opacity: 0.4; animation: spin 18s linear infinite; }
.vibe--multi .mini__name { font-family: 'Bangers', 'Impact', sans-serif; font-weight: 400; font-size: 26px; letter-spacing: 0.04em; color: #FFE14D; text-shadow: -2px 0 #FF2E63, 2px 0 #00E5FF, 3px 3px 0 #000; animation: mv-jit 2.4s steps(1) infinite; }
@keyframes mv-jit { 0%, 86%, 100% { text-shadow: -2px 0 #FF2E63, 2px 0 #00E5FF, 3px 3px 0 #000; } 88% { text-shadow: -5px 1px #FF2E63, 5px -1px #00E5FF, 3px 3px 0 #000; } 92% { text-shadow: 3px 0 #FF2E63, -3px 0 #00E5FF, 3px 3px 0 #000; } }
.vibe--multi .mini__avatar.has-img { background: #FFE14D; border: 2px solid #000; }
.vibe--multi .mini__link { border: 2px solid #000; box-shadow: 3px 3px 0 #FF2E63; font-weight: 800; }
.vibe--multi .mini__link--hl { background: #FFE14D; box-shadow: 3px 3px 0 #00E5FF; }
.vibe--multi .blk { background: #FFFFFF; color: #111111; border: 2px solid #000; --mut: #444; }

/* ---- Lime Summer: lowercase, acid lime, a little blurry ---- */
.vibe--lime .mini {
  --bg: #8ACE00; --fg: #000000; --mut: #1F3300; --btn: #000000; --btnfg: #8ACE00; --rad: 0px; --hl: #000000;
  --font: Arial, Helvetica, sans-serif; text-transform: lowercase;
}
.vibe--lime .bg { background: #8ACE00; }
.lm-blur { inset: 0; background: radial-gradient(60% 40% at 50% 30%, rgba(255, 255, 255, 0.25), transparent 70%); animation: lime-breathe 4s ease-in-out infinite alternate; }
@keyframes lime-breathe { to { opacity: 0.4; transform: scale(1.1); } }
.vibe--lime .mini__name { font-family: Arial, Helvetica, sans-serif; font-weight: 400; font-size: 30px; letter-spacing: -0.06em; filter: blur(0.7px); transform: scaleX(0.92); animation: lime-blur 3s ease-in-out infinite alternate; }
@keyframes lime-blur { to { filter: blur(1.4px); } }
.vibe--lime .mini__avatar.has-img { border-radius: 0; background: #000000; }
.vibe--lime .mini__avatar.has-img img { border-radius: 0; }
.vibe--lime .mini__link { font-weight: 400; letter-spacing: -0.02em; }
.vibe--lime .blk { background: rgba(0, 0, 0, 0.08); border-color: rgba(0, 0, 0, 0.3); border-radius: 0; }

/* ---- Y2K Chrome: holographic, glossy, sparkly ---- */
.vibe--y2k .mini {
  --bg: #E6E1FF; --fg: #1A1446; --mut: #4A4380; --btn: #FFFFFF; --btnfg: #1A1446; --rad: 999px; --hl: #FF6AD5;
  --font: 'Instrument Sans', var(--sans);
}
.y2k-holo { inset: -30%; background: conic-gradient(from 0deg, #FFD1F5, #C7E8FF, #D9C8FF, #FFF2B8, #C8FFE9, #FFD1F5); filter: blur(20px); animation: swirl 10s linear infinite; }
.y2k-stars { inset: 0; }
.y2k-stars i { position: absolute; left: var(--x); top: calc((var(--s) - 0.6) * 118%); width: 12px; height: 12px; scale: var(--s); background: #FFFFFF; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); filter: drop-shadow(0 0 4px #FFFFFF); animation: twinkle var(--d) ease-in-out var(--dl) infinite alternate; }
.vibe--y2k .mini__name { font-family: 'Audiowide', sans-serif; font-weight: 400; font-size: 20px; letter-spacing: 0.02em; background: linear-gradient(180deg, #FFFFFF 0%, #B9C3D6 40%, #5B6886 52%, #E9EEF7 70%, #8E9AB4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0.6px #1A1446; filter: drop-shadow(0 2px 0 rgba(26, 20, 70, 0.25)); }
.vibe--y2k .mini__avatar.has-img { background: linear-gradient(135deg, #FFFFFF, #B9C3D6, #FF6AD5); }
.vibe--y2k .mini__link { background: linear-gradient(180deg, #FFFFFF 0%, #EDEBFF 100%); border: 1px solid rgba(26, 20, 70, 0.15); box-shadow: inset 0 1px 0 #FFFFFF, 0 6px 14px -8px rgba(26, 20, 70, 0.5); }
.vibe--y2k .mini__link--hl { background: linear-gradient(180deg, #FF9BE6, #FF6AD5); color: #1A1446; border-color: #FF6AD5; font-weight: 700; } /* dark ink: white on pink was 2.6:1 */
.vibe--y2k .blk { background: rgba(255, 255, 255, 0.6); }

.blk--class { padding: 10px 12px; display: grid; gap: 3px; }
.blk--class > b { font-size: 14px; }
.blk__spots { color: var(--fg); }

/* Links live in a wrapper (so they can be dragged); keep them full width with the page's spacing */
.mini__links { display: flex; flex-direction: column; gap: inherit; width: 100%; }

/* ======================================================================================================
   Drafts added 28 Oct 2026 (HQ → Page themes → To review). Fonts are ones every page already loads; motion is
   transform / opacity only, and "moving effects off" (.is-still) stills it all.
   ====================================================================================================== */

/* ---- Passport (travel): boarding-pass paper, a plane on a dotted route, stamps ---- */
.vibe--passport .mini { --bg: #F4EFE3; --fg: #1E2A3A; --mut: #5B6577; --btn: #FFFFFF; --btnfg: #1E2A3A; --rad: 10px; --hl: #E0412F; --font: 'DM Sans', var(--sans); }
.vibe--passport .bg { background: linear-gradient(rgba(30, 42, 58, 0.06) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(30, 42, 58, 0.06) 1px, transparent 1px) 0 0 / 22px 22px, #F4EFE3; }
.ps-route { left: -25%; top: 6%; width: 150%; height: 46%; border: 2px dashed rgba(224, 65, 47, 0.35); border-radius: 50%; }
.ps-plane { left: 0; top: 0; font-size: 22px; color: #E0412F; animation: ps-fly 9s linear infinite; }
@keyframes ps-fly { from { transform: translate(-40px, 150px) rotate(-18deg); } to { transform: translate(360px, 40px) rotate(-18deg); } }
.ps-stamp { padding: 6px 10px; border: 2px dashed currentColor; border-radius: 50%; color: rgba(224, 65, 47, 0.4); font: 700 9px 'JetBrains Mono', monospace; letter-spacing: 0.12em; }
.ps-stamp--a { left: 8%; bottom: 10%; transform: rotate(-14deg); }
.ps-stamp--b { right: 7%; top: 42%; color: rgba(30, 42, 58, 0.28); border-radius: 6px; transform: rotate(9deg); }
.vibe--passport .mini__name { font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.vibe--passport .mini__link { border: 1.5px dashed rgba(30, 42, 58, 0.35); letter-spacing: 0.06em; text-transform: uppercase;
  -webkit-mask: radial-gradient(circle 6px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 6px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 6px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 6px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat; }
.vibe--passport .mini__link--hl { background: #E0412F; border-color: #E0412F; color: #FFFFFF; }

/* ---- Postcard (travel): sunset, a sinking sun, hills, a stamp ---- */
.vibe--postcard .mini { --bg: #FF9A62; --fg: #FFFFFF; --mut: #FFF3EA; --btn: rgba(255, 255, 255, 0.86); --btnfg: #7A2E14; --rad: 999px; --hl: #FFE7A8; --font: 'DM Sans', var(--sans); }
.vibe--postcard .bg { background: linear-gradient(180deg, #FFB476 0%, #FF8A5C 38%, #F25F5C 62%, #5B3A70 100%); }
.pc-sun { left: 50%; top: 50%; width: 130px; height: 130px; margin-left: -65px; border-radius: 50%; background: radial-gradient(circle, #FFE7A8, #FFC163 70%); box-shadow: 0 0 60px rgba(255, 210, 120, 0.7); animation: pc-sink 10s ease-in-out infinite alternate; }
@keyframes pc-sink { to { transform: translateY(40px); } }
.pc-hills { left: 0; right: 0; bottom: 0; height: 32%; background: #5B3A70; clip-path: polygon(0 40%, 18% 18%, 36% 46%, 58% 10%, 80% 42%, 100% 22%, 100% 100%, 0 100%); }
.pc-hills::after { content: ''; position: absolute; inset: 30% 0 0; background: #3E2752; clip-path: polygon(0 30%, 24% 0, 50% 36%, 74% 8%, 100% 40%, 100% 100%, 0 100%); }
.pc-cloud { width: 120px; height: 34px; border-radius: 999px; background: rgba(255, 255, 255, 0.55); filter: blur(6px); animation: pc-drift 26s linear infinite; }
.pc-cloud--a { top: 14%; left: -40%; }
.pc-cloud--b { top: 30%; left: -60%; animation-delay: -13s; transform: scale(0.7); }
@keyframes pc-drift { to { translate: 520px 0; } }
.pc-stamp { right: 8%; top: 9%; width: 34px; height: 40px; border: 3px dotted rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.18); transform: rotate(8deg); }
.vibe--postcard .mini__name { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 900; font-size: 22px; text-shadow: 0 2px 14px rgba(122, 46, 20, 0.45); }
.vibe--postcard .mini__link { border-color: transparent; font-weight: 700; box-shadow: 0 8px 18px -10px rgba(91, 58, 112, 0.7); }
.vibe--postcard .mini__link--hl { background: #7A2E14; color: #FFE7A8; border-color: #7A2E14; }

/* ---- Clinic (doctors): calm blue-teal, a heartbeat line, a soft pulse ---- */
.vibe--clinic .mini { --bg: #F3F8FB; --fg: #0F2A3D; --mut: #4C6578; --btn: #FFFFFF; --btnfg: #0F4C6B; --rad: 14px; --hl: #0EA5A4; --font: 'DM Sans', var(--sans); }
.vibe--clinic .bg { background: linear-gradient(180deg, #E6F2FA, #F7FBFD 50%, #E8F6F3); }
.cl-cross { inset: 0; opacity: 0.08; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M12 8h4v4h4v4h-4v4h-4v-4H8v-4h4z' fill='%230E7490'/%3E%3C/svg%3E"); }
.cl-ecg { left: 0; right: 0; top: 33%; height: 40px; opacity: 0.55; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='40'%3E%3Cpath d='M0 20h70l8-12 8 26 8-34 8 20h98' fill='none' stroke='%230EA5A4' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 200px 40px repeat-x; -webkit-mask: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); mask: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); animation: cl-beat 3s linear infinite; }
@keyframes cl-beat { to { background-position: -200px 0; } }
.cl-pulse { left: 50%; top: 56px; width: 64px; height: 64px; margin-left: -32px; border-radius: 50%; border: 2px solid #0EA5A4; animation: cl-ring 2.4s ease-out infinite; }
@keyframes cl-ring { from { transform: scale(1); opacity: 0.6; } to { transform: scale(1.9); opacity: 0; } }
.vibe--clinic .mini__name { font-weight: 800; }
.vibe--clinic .mini__avatar { background: #0F4C6B; color: #FFFFFF; }
.vibe--clinic .mini__link { border-color: #CFE3EE; box-shadow: 0 6px 14px -10px rgba(15, 76, 107, 0.35); }
.vibe--clinic .mini__link--hl { background: #0EA5A4; border-color: #0EA5A4; color: #FFFFFF; }

/* ---- Apothecary (pharmacies): mint, floating capsules, glass buttons ---- */
.vibe--apothecary .mini { --bg: #E9F6EF; --fg: #123B2B; --mut: #4E7262; --btn: rgba(255, 255, 255, 0.72); --btnfg: #155C3F; --rad: 999px; --hl: #2FB37A; --font: 'Nunito', var(--sans); }
.vibe--apothecary .bg { background: radial-gradient(120% 70% at 50% 0%, #D3F2E3, #EEF8F2 55%, #E1F0F7); }
.ap-pills i { left: var(--x); top: 100%; width: 26px; height: 10px; border-radius: 999px; scale: var(--s); background: linear-gradient(90deg, #2FB37A 50%, #FFFFFF 50%); box-shadow: 0 4px 10px -4px rgba(18, 59, 43, 0.4); animation: ap-rise calc(var(--d) * 2) linear var(--dl) infinite; }
.ap-pills i:nth-child(3n) { background: linear-gradient(90deg, #7DD3FC 50%, #FFFFFF 50%); }
@keyframes ap-rise { to { transform: translateY(-900px) rotate(260deg); } }
.vibe--apothecary .mini__name { font-weight: 900; }
.vibe--apothecary .mini__avatar { background: #2FB37A; color: #FFFFFF; box-shadow: 0 0 0 4px #FFFFFF; }
.vibe--apothecary .mini__link { border: 1px solid rgba(47, 179, 122, 0.35); font-weight: 800; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.vibe--apothecary .mini__link--hl { background: #1E8A5A; color: #FFFFFF; border-color: #1E8A5A; } /* deep enough for white text (was #2FB37A, 2.7:1) */

/* ---- Portfolio: dznir.com/example's look (owner, 28 Oct 2026): warm paper, white cards with a hairline, an ink first
   link, ↗ on every link, square social tiles, a ringed photo, serif italics for prices and quotes. Pairs with the
   Profile layout (--ly-card) but works with every layout. ---- */
.vibe--folio .mini { --bg: #F3F1EC; --fg: #141311; --mut: #6B675F; --btn: #FFFFFF; --btnfg: #141311; --rad: 14px; --hl: #FF4D1F; --ly-card: #FFFFFF; --font: 'Instrument Sans', var(--sans); }
.vibe--folio .bg { background: #F3F1EC; }
.vibe--folio .mini__avatar { width: 72px; height: 72px; padding: 3px; background: radial-gradient(closest-side, #141311 calc(100% - 4px), transparent calc(100% - 3px)), conic-gradient(from 200deg, #FF7A59, #FFB547, #7B5CFF, #FF7A59); color: #FFFFFF; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.vibe--folio .mini__avatar.has-img img { border: 2px solid #FFFFFF; }
.vibe--folio .mini__name { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; }
.vibe--folio .mini__bio { color: #3B3A36; font-size: 12.5px; line-height: 1.45; }
.vibe--folio .mini__socials > a { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #FFFFFF; border: 1px solid rgba(20, 19, 17, 0.09); color: #141311; }
.vibe--folio .mini__socials > svg { box-sizing: border-box; width: 30px; height: 30px; padding: 7px; border-radius: 9px; background: #FFFFFF; border: 1px solid rgba(20, 19, 17, 0.09); }
.vibe--folio .mini__link { position: relative; padding: 13px 32px 13px 14px; border: 1px solid rgba(20, 19, 17, 0.09); background: #FFFFFF; color: #141311; font-size: 12.5px; font-weight: 600; text-align: left; box-shadow: 0 10px 24px -22px rgba(20, 19, 17, 0.45); }
.vibe--folio .mini__link::after { content: '↗'; position: absolute; right: 13px; top: 50%; translate: 0 -50%; color: #6B675F; font-weight: 500; }
.vibe--folio .mini__link--hl { background: #141311; color: #FFFFFF; border-color: #141311; box-shadow: 0 14px 28px -20px rgba(20, 19, 17, 0.6); }
.vibe--folio .mini__link--hl::after { color: rgba(255, 255, 255, 0.7); }
.vibe--folio .blk { background: #FFFFFF; border-color: rgba(20, 19, 17, 0.09); border-radius: 18px; }
.vibe--folio .blk__h { color: #141311; font-size: 12px; letter-spacing: -0.01em; text-transform: none; }
.vibe--folio :is(.blk__btn:not(.blk__btn--upi), .fm__btn, .kt-tab.is-on) { background: #141311; color: #FFFFFF; }
.vibe--folio .blk__row--svc .blk__chip { padding: 0; background: none; color: #141311; font-family: 'Instrument Serif', Georgia, serif; font-size: 15px; font-style: italic; font-weight: 400; }
.vibe--folio .blk__quote { color: #3B3A36; font-family: 'Instrument Serif', Georgia, serif; font-size: 15px; line-height: 1.35; }
.vibe--folio .blk__quote small { font-family: var(--font); }
.vibe--folio .blk--stats .stat { justify-items: start; padding: 4px 12px; border-radius: 0; background: none; text-align: left; }
.vibe--folio .blk--stats .stat + .stat { border-left: 1px solid rgba(20, 19, 17, 0.09); }
.vibe--folio .stat b { letter-spacing: -0.02em; }
.vibe--folio .blk__quote { background: none; }

/* ---- Shonen Panel (anime): manga paper, screentone, speed lines, a red impact burst ---- */
.vibe--shonen .mini { --bg: #FFFFFF; --fg: #0B0B0B; --mut: #2E2E2E; --btn: #0B0B0B; --btnfg: #FFFFFF; --rad: 0; --hl: #E3242B; --font: 'DM Sans', var(--sans); }
.vibe--shonen .bg { background: #FFFFFF; }
.sh-tone { inset: 0; background: radial-gradient(circle, rgba(0, 0, 0, 0.2) 1.1px, transparent 1.5px) 0 0 / 7px 7px; -webkit-mask: linear-gradient(180deg, transparent 40%, #000); mask: linear-gradient(180deg, transparent 40%, #000); }
.sh-lines { inset: -40%; background: repeating-conic-gradient(from 0deg at 50% 32%, rgba(0, 0, 0, 0.82) 0 1deg, transparent 1deg 6deg); -webkit-mask: radial-gradient(circle at 50% 32%, transparent 22%, #000 55%); mask: radial-gradient(circle at 50% 32%, transparent 22%, #000 55%); animation: sh-spin 18s linear infinite; }
@keyframes sh-spin { to { transform: rotate(360deg); } }
.sh-burst { left: 50%; top: 30px; width: 120px; height: 120px; margin-left: -60px; background: #E3242B; clip-path: polygon(50% 0, 58% 30%, 85% 10%, 70% 40%, 100% 45%, 72% 58%, 92% 85%, 60% 72%, 50% 100%, 40% 72%, 8% 85%, 28% 58%, 0 45%, 30% 40%, 15% 10%, 42% 30%); animation: sh-pop 0.9s steps(2) infinite alternate; }
@keyframes sh-pop { to { transform: scale(1.08) rotate(6deg); } }
.vibe--shonen .mini__avatar { position: relative; box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 6px #0B0B0B; }
.vibe--shonen .mini__name { font-family: 'Bangers', var(--sans); font-weight: 400; font-size: 28px; letter-spacing: 0.04em; text-shadow: 3px 3px 0 #E3242B; }
.vibe--shonen .mini__bio { padding: 2px 8px; background: #FFFFFF; border: 2px solid #0B0B0B; font-weight: 600; }
.vibe--shonen .mini__link { clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.vibe--shonen .mini__link--hl { background: #E3242B; border-color: #E3242B; }

/* ---- Aura Burst (anime): indigo night, a rising blue-violet aura, sparks ---- */
.vibe--aura .mini { --bg: #0B0A1F; --fg: #EDEBFF; --mut: #B5B0E6; --btn: rgba(30, 24, 80, 0.72); --btnfg: #EDEBFF; --rad: 12px; --hl: #7C5CFF; --font: 'DM Sans', var(--sans); }
.vibe--aura .bg { background: radial-gradient(80% 50% at 50% 18%, #2B1F7A, #0B0A1F 70%); }
.au-flame i { left: 50%; top: 10px; width: 170px; height: 190px; margin-left: -85px; border-radius: 50% 50% 46% 46%; background: conic-gradient(from 0deg, #6A5CFF, #22D3EE, #A855F7, #6A5CFF); filter: blur(22px); opacity: 0.7; animation: au-turn 4s linear infinite; }
.au-flame i:nth-child(2) { width: 120px; height: 150px; margin-left: -60px; top: 30px; opacity: 0.55; animation-duration: 2.6s; animation-direction: reverse; }
@keyframes au-turn { 0% { transform: rotate(0) scaleY(1); } 50% { transform: rotate(180deg) scaleY(1.12); } 100% { transform: rotate(360deg) scaleY(1); } }
.au-sparks i { left: var(--x); top: 100%; width: 3px; height: 3px; border-radius: 50%; background: #9BE7FF; box-shadow: 0 0 8px #22D3EE; animation: ap-rise var(--d) linear var(--dl) infinite; }
.vibe--aura .mini__name { font-family: 'Audiowide', var(--sans); font-weight: 400; font-size: 20px; text-shadow: 0 0 12px #7C5CFF, 0 0 24px #22D3EE; }
.vibe--aura .mini__avatar { position: relative; background: #EDEBFF; color: #2B1F7A; box-shadow: 0 0 24px #7C5CFF; }
.vibe--aura .mini__link { border: 1px solid rgba(124, 92, 255, 0.6); box-shadow: inset 0 0 12px rgba(124, 92, 255, 0.25); }
.vibe--aura .mini__link--hl { background: linear-gradient(90deg, #7C5CFF, #22D3EE); color: #0B0A1F; border-color: transparent; }

/* ---- Level Up (anime): a game "system" window, cyan brackets, rank letters ---- */
.vibe--levelup .mini { --bg: #05070F; --fg: #DDF6FF; --mut: #7FA6B8; --btn: rgba(8, 24, 40, 0.86); --btnfg: #BFF1FF; --rad: 2px; --hl: #38BDF8; --font: 'JetBrains Mono', monospace; }
.vibe--levelup .bg { background: linear-gradient(rgba(56, 189, 248, 0.05) 1px, transparent 1px) 0 0 / 100% 26px, linear-gradient(180deg, #05070F, #0A1226); }
.lv-frame { inset: 10px; border: 1px solid rgba(56, 189, 248, 0.3); box-shadow: inset 0 0 30px rgba(56, 189, 248, 0.12); }
.lv-quest { left: 50%; bottom: 46px; transform: translateX(-50%); padding: 4px 10px; border: 1px solid rgba(56, 189, 248, 0.55); background: rgba(8, 24, 40, 0.9); color: #38BDF8; font: 400 15px 'VT323', monospace; letter-spacing: 0.08em; white-space: nowrap; animation: lv-blink 2.4s steps(2) infinite; }
@keyframes lv-blink { 50% { opacity: 0.55; } }
.lv-rank i { left: var(--x); top: 100%; color: rgba(168, 85, 247, 0.5); font: 400 22px 'VT323', monospace; font-style: normal; text-shadow: 0 0 10px #A855F7; animation: ap-rise calc(var(--d) * 1.6) linear var(--dl) infinite; }
.vibe--levelup .mini__name { font-family: 'Audiowide', var(--sans); font-weight: 400; font-size: 18px; letter-spacing: 0.08em; text-transform: uppercase; color: #FFFFFF; text-shadow: 0 0 10px #38BDF8; }
.vibe--levelup .mini__avatar { border-radius: 4px; background: #0A1226; color: #38BDF8; box-shadow: 0 0 0 1px #38BDF8, 0 0 18px rgba(56, 189, 248, 0.45); }
.vibe--levelup .mini__link { border: 1px solid rgba(56, 189, 248, 0.5); letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 0 10px rgba(56, 189, 248, 0.18);
  background: linear-gradient(#38BDF8, #38BDF8) top left / 8px 2px no-repeat, linear-gradient(#38BDF8, #38BDF8) top left / 2px 8px no-repeat, linear-gradient(#38BDF8, #38BDF8) bottom right / 8px 2px no-repeat, linear-gradient(#38BDF8, #38BDF8) bottom right / 2px 8px no-repeat, var(--btn); }
.vibe--levelup .mini__link--hl { background-color: rgba(56, 189, 248, 0.2); color: #FFFFFF; border-color: #38BDF8; }

/* ---- Ukiyo Wave (anime): woodblock waves, a red sun, a checker band ---- */
.vibe--ukiyo .mini { --bg: #F3EAD7; --fg: #1D2B4F; --mut: #5A6585; --btn: #1D2B4F; --btnfg: #F3EAD7; --rad: 6px; --hl: #C8323C; --font: 'DM Sans', var(--sans); }
.vibe--ukiyo .bg { background: #F3EAD7; }
.uk-sun { right: 7%; top: 16px; width: 52px; height: 52px; border-radius: 50%; background: #C8323C; opacity: 0.9; }
.uk-waves { left: 0; right: 0; bottom: 0; height: 30%;
  background: radial-gradient(circle at 50% 100%, #F3EAD7 0 18%, #1D2B4F 19% 26%, #F3EAD7 27% 34%, #1D2B4F 35% 42%, #F3EAD7 43% 50%, #1D2B4F 51% 58%, transparent 59%) 0 0 / 44px 22px,
              radial-gradient(circle at 50% 100%, #F3EAD7 0 18%, #1D2B4F 19% 26%, #F3EAD7 27% 34%, #1D2B4F 35% 42%, #F3EAD7 43% 50%, #1D2B4F 51% 58%, transparent 59%) 22px 11px / 44px 22px, #1D2B4F;
  animation: uk-roll 8s linear infinite; }
@keyframes uk-roll { to { background-position: 44px 0, 66px 11px, 0 0; } }
.uk-check { left: 0; right: 0; bottom: 30%; height: 10px; background: conic-gradient(#1E6B4F 25%, #111111 0 50%, #1E6B4F 0 75%, #111111 0) 0 0 / 10px 10px; }
.vibe--ukiyo .mini__name { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 21px; }
.vibe--ukiyo .mini__link--hl { background: #C8323C; border-color: #C8323C; color: #FFFFFF; }

/* ---- Sparkle Idol (anime): candy pastels, twinkling stars, glossy buttons ---- */
.vibe--idol .mini { --bg: #FFE6F4; --fg: #6B1F57; --mut: #A0567F; --btn: rgba(255, 255, 255, 0.88); --btnfg: #C2257E; --rad: 999px; --hl: #FF5FB2; --font: 'Nunito', var(--sans); }
.vibe--idol .bg { background: linear-gradient(160deg, #FFD6EE, #E9D5FF 55%, #CFE7FF); }
.id-stars i { left: var(--x); top: calc(var(--x) * 0.9); width: 12px; height: 12px; scale: var(--s); background: #FFFFFF; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 4px #FF9AD5); animation: id-twinkle calc(var(--d) * 0.4) ease-in-out var(--dl) infinite alternate; }
@keyframes id-twinkle { from { opacity: 0.2; transform: scale(0.5) rotate(0); } to { opacity: 1; transform: scale(1.1) rotate(45deg); } }
.vibe--idol .mini__name { font-weight: 900; font-size: 20px; background: linear-gradient(90deg, #FF5FB2, #9B5CFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vibe--idol .mini__avatar { background: #FF8FCB; color: #FFFFFF; box-shadow: 0 0 0 4px #FFFFFF, 0 8px 22px -6px rgba(194, 37, 126, 0.55); }
.vibe--idol .mini__link { border: 2px solid #FFFFFF; font-weight: 800; box-shadow: 0 6px 16px -8px rgba(194, 37, 126, 0.5), inset 0 -3px 0 rgba(255, 95, 178, 0.15); }
.vibe--idol .mini__link--hl { background: linear-gradient(90deg, #FF5FB2, #9B5CFF); color: #FFFFFF; }

/* ---- Neo City (anime): black and red, hazard stripes, a turning HUD, a scan line ---- */
.vibe--neocity .mini { --bg: #0A0A0A; --fg: #F2F2F2; --mut: #A3A3A3; --btn: rgba(20, 20, 20, 0.92); --btnfg: #F2F2F2; --rad: 0; --hl: #FF2A2A; --font: 'DM Sans', var(--sans); }
.vibe--neocity .bg { background: radial-gradient(100% 60% at 50% 0%, #2A0505, #0A0A0A 65%); }
.nc-hud { left: 50%; top: 32px; width: 112px; height: 112px; margin-left: -56px; border-radius: 50%; border: 1px dashed rgba(255, 42, 42, 0.65); animation: sh-spin 10s linear infinite; }
.nc-hud::after { content: ''; position: absolute; inset: 12px; border-radius: 50%; border: 2px solid transparent; border-top-color: #FF2A2A; border-bottom-color: #FF2A2A; }
.nc-scan { left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, #FF2A2A, transparent); box-shadow: 0 0 12px #FF2A2A; animation: nc-sweep 4s linear infinite; }
@keyframes nc-sweep { to { transform: translateY(560px); } }
.nc-hazard { left: 0; right: 0; bottom: 16%; height: 14px; background: repeating-linear-gradient(-45deg, #FFCC00 0 10px, #0A0A0A 10px 20px); background-size: 28px 14px; animation: nc-slide 1s linear infinite; opacity: 0.85; }
@keyframes nc-slide { to { background-position: 28px 0; } }
.vibe--neocity .mini__name { font-family: 'Audiowide', var(--sans); font-weight: 400; font-size: 18px; letter-spacing: 0.12em; text-transform: uppercase; text-shadow: 0 0 10px rgba(255, 42, 42, 0.8); }
.vibe--neocity .mini__avatar { background: #FF2A2A; color: #0A0A0A; }
.vibe--neocity .mini__link { border: 1px solid #FF2A2A; letter-spacing: 0.1em; text-transform: uppercase; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.vibe--neocity .mini__link--hl { background: #FF2A2A; color: #0A0A0A; }

/* ---- Meadow (anime): watercolour sky, drifting clouds, swaying grass ---- */
.vibe--meadow .mini { --bg: #BFE3FF; --fg: #1F3B2A; --mut: #3D5C49; --btn: rgba(255, 255, 255, 0.9); --btnfg: #2F5D3F; --rad: 16px; --hl: #F6B94A; --font: 'Nunito', var(--sans); }
.vibe--meadow .bg { background: linear-gradient(180deg, #9FD3FF 0%, #CDEBFF 45%, #E9F7E4 70%, #BFE3A4 100%); }
.md-cloud { width: 140px; height: 46px; border-radius: 999px; background: #FFFFFF; filter: blur(4px); opacity: 0.9; box-shadow: 40px -14px 0 6px #FFFFFF, -30px -8px 0 2px #FFFFFF; animation: pc-drift 40s linear infinite; }
.md-cloud--a { top: 12%; left: -45%; }
.md-cloud--b { top: 26%; left: -75%; animation-delay: -20s; scale: 0.7; }
.md-hill { left: -20%; right: -20%; bottom: -8%; height: 30%; border-radius: 50% 50% 0 0; background: #8CCB6E; }
.md-hill::after { content: ''; position: absolute; left: 30%; right: -30%; top: 26%; bottom: 0; border-radius: 50% 50% 0 0; background: #6FB35A; }
.md-grass { left: 0; right: 0; bottom: 0; height: 9%; background: repeating-linear-gradient(80deg, #5FA34A 0 2px, transparent 2px 6px); transform-origin: bottom; animation: md-sway 3s ease-in-out infinite alternate; }
@keyframes md-sway { to { transform: skewX(-8deg); } }
.vibe--meadow .mini__name { font-weight: 900; font-size: 20px; text-shadow: 0 1px 0 #FFFFFF; }
.vibe--meadow .mini__avatar { background: #FFFFFF; color: #2F5D3F; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.6); }
.vibe--meadow .mini__link { border-color: transparent; font-weight: 800; box-shadow: 0 6px 14px -8px rgba(31, 59, 42, 0.35); }
.vibe--meadow .mini__link--hl { background: #F6B94A; color: #4A2E00; }

/* ---- Brainrot (crazy): a hue-cycling checkerboard, spinning stickers, a tape, tilted buttons ---- */
.vibe--brainrot .mini { --bg: #FFF200; --fg: #111111; --mut: #111111; --btn: #FFFFFF; --btnfg: #111111; --rad: 10px; --hl: #FF2E93; --font: 'DM Sans', var(--sans); }
.br-check { inset: 0; background: conic-gradient(#FFF200 25%, #FF8AC4 0 50%, #FFF200 0 75%, #FF8AC4 0) 0 0 / 40px 40px; animation: br-hue 6s linear infinite; }
@keyframes br-hue { to { filter: hue-rotate(360deg); } }
.br-stickers i { font-size: 26px; font-style: normal; animation: br-spin 3s ease-in-out infinite; }
.br-stickers i:nth-child(1) { left: 6%; top: 12%; } .br-stickers i:nth-child(2) { right: 8%; top: 20%; animation-delay: -1s; }
.br-stickers i:nth-child(3) { left: 10%; top: 58%; animation-delay: -2s; } .br-stickers i:nth-child(4) { right: 10%; top: 66%; animation-delay: -0.5s; }
.br-stickers i:nth-child(5) { left: 44%; bottom: 6%; animation-delay: -1.5s; } .br-stickers i:nth-child(6) { right: 30%; top: 4%; animation-delay: -2.5s; }
@keyframes br-spin { 0%, 100% { transform: rotate(-14deg) scale(1); } 50% { transform: rotate(16deg) scale(1.25); } }
.br-tape { left: -10%; right: -10%; bottom: 22%; padding: 4px 0; background: #111111; color: #FFF200; font: 400 12px 'Permanent Marker', var(--sans); white-space: nowrap; transform: rotate(-6deg); overflow: hidden; }
.br-tape b { display: inline-block; font-weight: 400; animation: br-run 10s linear infinite; }
@keyframes br-run { to { transform: translateX(-50%); } }
.vibe--brainrot .mini__name { font-family: 'Permanent Marker', var(--sans); font-weight: 400; font-size: 24px; text-shadow: 2px 2px 0 #FF2E93, -2px -2px 0 #00E5FF; animation: br-wiggle 2.2s ease-in-out infinite; }
@keyframes br-wiggle { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
.vibe--brainrot .mini__bio { font-weight: 700; }
.vibe--brainrot .mini__link { border: 2px solid #111111; font-weight: 800; box-shadow: 4px 4px 0 #111111; }
.vibe--brainrot .mini__link:nth-of-type(odd) { transform: rotate(-1.5deg); }
.vibe--brainrot .mini__link:nth-of-type(even) { transform: rotate(1.5deg); }
.vibe--brainrot .mini__link--hl { background: #FF2E93; color: #FFFFFF; }

/* ---- Rave (crazy): black, sweeping lasers, a soft strobe, disco dots ---- */
.vibe--rave .mini { --bg: #050505; --fg: #FFFFFF; --mut: #C8C8C8; --btn: rgba(255, 255, 255, 0.06); --btnfg: #FFFFFF; --rad: 999px; --hl: #39FF14; --font: 'DM Sans', var(--sans); }
.vibe--rave .bg { background: #050505; }
.rv-laser { left: -50%; right: -50%; bottom: -10%; height: 120%; transform-origin: 50% 100%;
  background: conic-gradient(from -60deg at 50% 100%, transparent 0 18deg, rgba(57, 255, 20, 0.5) 18deg 19deg, transparent 19deg 46deg, rgba(255, 46, 240, 0.5) 46deg 47deg, transparent 47deg 74deg, rgba(0, 229, 255, 0.45) 74deg 75deg, transparent 75deg 102deg, rgba(57, 255, 20, 0.5) 102deg 103deg, transparent 103deg);
  animation: rv-sweep 3.2s ease-in-out infinite alternate; }
.rv-laser--b { top: -10%; bottom: auto; transform-origin: 50% 0; rotate: 180deg; animation-duration: 4.1s; opacity: 0.7; }
@keyframes rv-sweep { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
.rv-strobe { inset: 0; background: #FFFFFF; opacity: 0; animation: rv-flash 2.6s steps(1) infinite; } /* under 1 flash a second, soft */
@keyframes rv-flash { 0% { opacity: 0.1; } 4%, 100% { opacity: 0; } }
.rv-dots i { left: var(--x); top: calc(var(--x) * 0.8); width: 4px; height: 4px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 8px #FFFFFF; animation: id-twinkle calc(var(--d) * 0.3) ease-in-out var(--dl) infinite alternate; }
.vibe--rave .mini__name { font-family: 'Anton', var(--sans); font-weight: 400; font-size: 28px; letter-spacing: 0.04em; text-transform: uppercase; background: linear-gradient(90deg, #39FF14, #FF2EF0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vibe--rave .mini__avatar { background: #111111; color: #39FF14; box-shadow: 0 0 0 2px #39FF14, 0 0 20px rgba(57, 255, 20, 0.5); }
.vibe--rave .mini__link { border: 1.5px solid rgba(255, 255, 255, 0.4); font-weight: 700; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vibe--rave .mini__link--hl { background: #39FF14; color: #050505; border-color: #39FF14; box-shadow: 0 0 20px rgba(57, 255, 20, 0.6); }

/* ---- Liquid Glass (trend): soft colour blobs behind frosted glass buttons ---- */
.vibe--glass .mini { --bg: #EEF1F8; --fg: #14161C; --mut: #4B5161; --btn: rgba(255, 255, 255, 0.3); --btnfg: #14161C; --rad: 18px; --hl: #3B82F6; --font: 'Instrument Sans', var(--sans); }
.vibe--glass .bg { background: #E9EEF8; }
.lg-blobs i { width: 80%; aspect-ratio: 1; border-radius: 50%; filter: blur(34px); opacity: 0.85; animation: blob 14s ease-in-out infinite alternate; }
.lg-blobs i:nth-child(1) { left: -25%; top: -5%; background: #8EC5FF; }
.lg-blobs i:nth-child(2) { right: -30%; top: 28%; background: #FFB3D9; animation-delay: -5s; }
.lg-blobs i:nth-child(3) { left: -10%; bottom: -15%; background: #B8F2D0; animation-delay: -9s; }
.vibe--glass .mini__name { font-weight: 700; font-size: 18px; }
.vibe--glass .mini__avatar { background: rgba(255, 255, 255, 0.45); color: #14161C; box-shadow: inset 0 1px 0 #FFFFFF, 0 8px 20px -10px rgba(20, 22, 28, 0.35); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.vibe--glass .mini__link { border: 1px solid rgba(255, 255, 255, 0.75); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.3), 0 8px 24px -12px rgba(20, 22, 28, 0.35); }
.vibe--glass .mini__link--hl { background: rgba(59, 130, 246, 0.85); color: #FFFFFF; border-color: rgba(255, 255, 255, 0.6); }

/* ---- Frutiger Aero (trend): glossy sky to grass, rising bubbles, shiny buttons ---- */
.vibe--aero .mini { --bg: #BDEBFF; --fg: #08324A; --mut: #2D5A73; --btn: #FFFFFF; --btnfg: #0A5A7C; --rad: 999px; --hl: #3FCB5C; --font: 'Nunito', var(--sans); }
.vibe--aero .bg { background: linear-gradient(180deg, #5FC8FF 0%, #B9EDFF 45%, #E8FBEF 75%, #9DE38C 100%); }
.fa-shine { left: -20%; right: -20%; top: -30%; height: 55%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.5), transparent); }
.fa-bubbles i { left: var(--x); top: 100%; width: calc(var(--s) * 26px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.7);
  background: radial-gradient(circle at 30% 30%, #FFFFFF 0 8%, rgba(255, 255, 255, 0.35) 9% 40%, rgba(255, 255, 255, 0.08) 41% 70%, rgba(255, 255, 255, 0.4) 71%); animation: ap-rise calc(var(--d) * 2.2) linear var(--dl) infinite; }
.vibe--aero .mini__name { font-weight: 900; font-size: 20px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); }
.vibe--aero .mini__avatar { background: radial-gradient(circle at 30% 25%, #FFFFFF, #7FD6FF 60%, #2BA8E0); color: #08324A; box-shadow: 0 6px 16px -6px rgba(10, 90, 124, 0.5); }
.vibe--aero .mini__link { border: 1px solid rgba(10, 90, 124, 0.22); font-weight: 800; background: linear-gradient(180deg, #FFFFFF 0%, #E6F7FF 50%, #CDEFFF 51%, #EAF9FF 100%); box-shadow: inset 0 1px 0 #FFFFFF, 0 4px 10px -4px rgba(10, 90, 124, 0.35); }
.vibe--aero .mini__link--hl { background: linear-gradient(180deg, #A8F5B4, #3FCB5C 50%, #2FB54C 51%, #6BE27F); color: #053A14; border-color: rgba(5, 58, 20, 0.25); }

/* Shared by the drafts above: their particles sit absolutely in the background; reduced motion stills them, and the
   rave strobe never flashes at all. */
.ap-pills i, .au-flame i, .au-sparks i, .lv-rank i, .id-stars i, .br-stickers i, .rv-dots i, .lg-blobs i, .fa-bubbles i { position: absolute; display: block; }
.ap-pills, .au-flame, .au-sparks, .lv-rank, .id-stars, .br-stickers, .rv-dots, .lg-blobs, .fa-bubbles { inset: 0; }
.vibe--passport .bg, .vibe--postcard .bg, .vibe--meadow .bg, .vibe--shonen .bg, .vibe--brainrot .bg, .vibe--rave .bg { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .vibe--passport .bg *, .vibe--postcard .bg *, .vibe--clinic .bg *, .vibe--apothecary .bg *, .vibe--shonen .bg *, .vibe--aura .bg *, .vibe--levelup .bg *, .vibe--ukiyo .bg *,
  .vibe--idol .bg *, .vibe--neocity .bg *, .vibe--meadow .bg *, .vibe--brainrot *, .vibe--rave .bg *, .vibe--glass .bg *, .vibe--aero .bg * { animation: none !important; }
  .rv-strobe { display: none !important; }
}
.is-still .rv-strobe { display: none; }

/* ======================================================================================================
   More drafts, 28 Oct 2026: clickbait and meme looks, eco looks, and a red-sky rooftop noir.
   ====================================================================================================== */
@keyframes dz-fall { from { transform: translateY(-40px) rotate(0); } to { transform: translateY(720px) rotate(320deg); } }
@keyframes dz-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---- Clickbait: a "you won't believe" thumbnail. Red arrow, red ring, yellow burst, shocked emoji ---- */
.vibe--clickbait .mini { --bg: #FFD400; --fg: #111111; --mut: #111111; --btn: #FFFFFF; --btnfg: #111111; --rad: 8px; --hl: #FF1E1E; --font: 'DM Sans', var(--sans); }
.vibe--clickbait .bg { background: repeating-conic-gradient(from 0deg at 50% 22%, #FFD400 0 10deg, #FFB800 10deg 20deg); }
.cb-ring { left: 50%; top: 22px; width: 116px; height: 116px; margin-left: -58px; border-radius: 50%; border: 5px solid #FF1E1E; box-shadow: 0 0 0 3px #FFFFFF; animation: cl-ring2 1.4s ease-in-out infinite; }
@keyframes cl-ring2 { 50% { transform: scale(1.07); } }
.cb-arrow { right: 6%; top: 112px; width: 74px; height: 40px; background: #FF1E1E; filter: drop-shadow(3px 3px 0 #FFFFFF) drop-shadow(-1px -1px 0 #FFFFFF); clip-path: polygon(0 35%, 60% 35%, 60% 0, 100% 50%, 60% 100%, 60% 65%, 0 65%); rotate: 205deg; animation: cb-poke 0.8s ease-in-out infinite alternate; }
@keyframes cb-poke { to { translate: -8px -4px; } }
.cb-shock { left: 6%; top: 96px; font-size: 40px; font-style: normal; rotate: -12deg; animation: dz-bob 1.2s ease-in-out infinite; }
.cb-tag { left: 6%; top: 22px; padding: 4px 8px; background: #FF1E1E; color: #FFFFFF; font: 400 13px 'Anton', var(--sans); letter-spacing: 0.06em; transform: rotate(-6deg); box-shadow: 3px 3px 0 #111111; }
.cb-count { right: 6%; top: 26px; padding: 4px 8px; border-radius: 4px; background: #111111; color: #FFFFFF; font: 700 11px 'JetBrains Mono', monospace; }
.vibe--clickbait .mini__name { font-family: 'Anton', var(--sans); font-weight: 400; font-size: 30px; line-height: 1; text-transform: uppercase; color: #FFFFFF; -webkit-text-stroke: 2px #111111; paint-order: stroke fill; text-shadow: 4px 4px 0 #FF1E1E; }
.vibe--clickbait .mini__bio { font-weight: 800; text-transform: uppercase; }
.vibe--clickbait .mini__link { border: 3px solid #111111; font-weight: 900; text-transform: uppercase; box-shadow: 4px 4px 0 #111111; }
.vibe--clickbait .mini__link--hl { background: #FF1E1E; color: #FFFFFF; animation: cl-ring2 1.4s ease-in-out infinite; }

/* ---- Deep Fried: a meme cooked too long. Blown-out colour, noise, glowing flare eyes, shaking emoji ---- */
.vibe--deepfried .mini { --bg: #FF5A00; --fg: #FFFFFF; --mut: #FFF1C2; --btn: #FFFFFF; --btnfg: #111111; --rad: 0; --hl: #FFF200; --font: 'DM Sans', var(--sans); }
.vibe--deepfried .bg { background: radial-gradient(circle at 30% 20%, #FFE100, transparent 40%), radial-gradient(circle at 80% 70%, #FF0066, transparent 45%), #FF5A00; filter: saturate(1.8) contrast(1.3); }
.df-noise { inset: 0; opacity: 0.35; mix-blend-mode: overlay; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); animation: df-crackle 0.4s steps(3) infinite; }
@keyframes df-crackle { 33% { background-position: 40px 20px; } 66% { background-position: -30px 50px; } }
.df-flare { top: 62px; width: 46px; height: 46px; background: radial-gradient(circle, #FFFFFF 0 8%, #FF2020 22%, transparent 62%); animation: df-flash 1.6s ease-in-out infinite; }
.df-flare::before, .df-flare::after { content: ''; position: absolute; left: 50%; top: 50%; width: 120px; height: 3px; margin: -1.5px 0 0 -60px; background: linear-gradient(90deg, transparent, #FF4040, #FFFFFF, #FF4040, transparent); }
.df-flare::after { rotate: 90deg; width: 70px; margin-left: -35px; }
.df-flare--a { left: calc(50% - 46px); } .df-flare--b { left: calc(50% + 0px); animation-delay: -0.3s; }
@keyframes df-flash { 50% { transform: scale(1.3) rotate(45deg); } }
.df-emoji i { font-size: 26px; font-style: normal; animation: df-shake 0.25s linear infinite; }
.df-emoji i:nth-child(1) { left: 6%; top: 20%; } .df-emoji i:nth-child(2) { right: 7%; top: 16%; }
.df-emoji i:nth-child(3) { left: 8%; bottom: 14%; } .df-emoji i:nth-child(4) { right: 8%; bottom: 20%; } .df-emoji i:nth-child(5) { right: 40%; top: 3%; }
@keyframes df-shake { 25% { transform: translate(1px, -1px) rotate(3deg); } 75% { transform: translate(-1px, 1px) rotate(-3deg); } }
.vibe--deepfried .mini__name { font-family: 'Anton', Impact, var(--sans); font-weight: 400; font-size: 28px; text-transform: uppercase; -webkit-text-stroke: 2px #000000; paint-order: stroke fill; letter-spacing: 0.02em; }
.vibe--deepfried .mini__bio { font-family: 'Anton', Impact, var(--sans); text-transform: uppercase; -webkit-text-stroke: 1px #000000; paint-order: stroke fill; letter-spacing: 0.03em; }
.vibe--deepfried .mini__link { border: 3px solid #000000; font-weight: 900; text-transform: uppercase; }
.vibe--deepfried .mini__link--hl { background: #FFF200; color: #000000; }

/* ---- Breaking News: a live broadcast. Red BREAKING bar, a ticker, a blinking LIVE, a turning globe ---- */
.vibe--news .mini { --bg: #0A1A3A; --fg: #FFFFFF; --mut: #B9C6E4; --btn: #FFFFFF; --btnfg: #0A1A3A; --rad: 4px; --hl: #E10600; --font: 'DM Sans', var(--sans); }
.vibe--news .bg { background: linear-gradient(160deg, #12306B, #0A1A3A 55%, #050D20); }
.nw-globe { left: 50%; top: 32px; width: 150px; height: 150px; margin-left: -75px; border-radius: 50%; opacity: 0.35;
  background: repeating-linear-gradient(90deg, transparent 0 14px, rgba(120, 170, 255, 0.7) 14px 15px), repeating-linear-gradient(0deg, transparent 0 14px, rgba(120, 170, 255, 0.7) 14px 15px);
  -webkit-mask: radial-gradient(circle, #000 69%, transparent 70%); mask: radial-gradient(circle, #000 69%, transparent 70%); animation: nw-turn 6s linear infinite; }
@keyframes nw-turn { to { background-position: 15px 0, 0 0; } }
.nw-live { z-index: 1; left: 8px; top: 5px; padding: 3px 8px; border-radius: 3px; background: #E10600; color: #FFFFFF; font: 800 10px 'DM Sans', var(--sans); letter-spacing: 0.1em; }
.nw-live::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: #FFFFFF; vertical-align: 1px; animation: lv-blink 1s steps(2) infinite; }
.nw-bar { left: 0; right: 0; top: 0; height: 26px; padding-left: 64px; background: #E10600; color: #FFFFFF; font: 400 16px/26px 'Anton', var(--sans); letter-spacing: 0.06em; }
.nw-tick { left: 0; right: 0; bottom: 8px; height: 26px; overflow: hidden; background: #FFFFFF; color: #0A1A3A; font: 700 11px/26px 'DM Sans', var(--sans); white-space: nowrap; }
.vibe .bg .nw-tick b { position: static; display: inline-block; animation: br-run 16s linear infinite; }
.vibe--news .mini__name { font-family: 'Anton', var(--sans); font-weight: 400; font-size: 24px; letter-spacing: 0.03em; text-transform: uppercase; }
.vibe--news .mini__link { border-left: 4px solid #E10600; font-weight: 800; }
.vibe--news .mini__link--hl { background: #E10600; color: #FFFFFF; border-color: #E10600; }

/* ---- Evergreen (eco): recycled paper, falling leaves, a sprout growing ---- */
.vibe--evergreen .mini { --bg: #EEF0E2; --fg: #1F3A24; --mut: #4F6B52; --btn: #FFFFFF; --btnfg: #1F3A24; --rad: 999px; --hl: #3E7B3A; --font: 'DM Sans', var(--sans); }
.vibe--evergreen .bg { background: radial-gradient(rgba(90, 70, 40, 0.14) 1px, transparent 1.4px) 0 0 / 9px 9px, radial-gradient(rgba(60, 110, 60, 0.12) 1px, transparent 1.6px) 4px 5px / 13px 13px, linear-gradient(180deg, #F2F3E6, #E3EAD3); }
.eg-leaves i { position: absolute; display: block; left: var(--x); top: 0; width: 16px; height: 16px; scale: var(--s); border-radius: 0 100% 0 100%; background: linear-gradient(135deg, #6FAE5A, #2F6B34); box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.12); animation: dz-fall calc(var(--d) * 1.4) linear var(--dl) infinite; }
.eg-leaves i:nth-child(3n) { background: linear-gradient(135deg, #B9D36A, #6E9B37); }
.eg-leaves { inset: 0; }
.eg-sprout { left: 50%; bottom: 0; width: 4px; height: 70px; margin-left: -2px; background: #3E7B3A; border-radius: 2px; transform-origin: bottom; animation: eg-grow 6s ease-in-out infinite alternate; }
.eg-sprout::before, .eg-sprout::after { content: ''; position: absolute; top: 4px; width: 26px; height: 16px; background: #5D9E4C; border-radius: 0 100% 0 100%; }
.eg-sprout::before { right: 2px; transform: scaleX(-1); } .eg-sprout::after { left: 2px; }
@keyframes eg-grow { from { transform: scaleY(0.55); } to { transform: scaleY(1); } }
.eg-ground { left: 0; right: 0; bottom: 0; height: 14px; background: #7A5A3A; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.vibe--evergreen .mini__name { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 26px; }
.vibe--evergreen .mini__link { border: 1.5px solid #C8D3B4; font-weight: 700; }
.vibe--evergreen .mini__link--hl { background: #3E7B3A; color: #FFFFFF; border-color: #3E7B3A; }

/* ---- Solarpunk (eco): golden light, a turning wind turbine, solar panels, vines ---- */
.vibe--solarpunk .mini { --bg: #FFF1C9; --fg: #1E3B2C; --mut: #4D6B57; --btn: rgba(255, 255, 255, 0.85); --btnfg: #1E3B2C; --rad: 14px; --hl: #F59E0B; --font: 'Nunito', var(--sans); }
.vibe--solarpunk .bg { background: linear-gradient(180deg, #FFD978 0%, #FFF0C2 40%, #DDF3C4 72%, #8FCB7A 100%); }
.sp-rays { left: 50%; top: -120px; width: 400px; height: 400px; margin-left: -200px; background: repeating-conic-gradient(rgba(255, 255, 255, 0.35) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 20%, transparent 65%); mask: radial-gradient(circle, #000 20%, transparent 65%); animation: sh-spin 40s linear infinite; }
.sp-mast { right: 18%; bottom: 18%; width: 4px; height: 120px; background: #F4F7F2; box-shadow: 0 0 0 1px rgba(30, 59, 44, 0.35); }
.sp-blades { right: calc(18% - 34px); bottom: calc(18% + 86px); width: 70px; height: 70px; animation: sh-spin 5s linear infinite;
  background: linear-gradient(#2F5D3F, #2F5D3F) 50% 0 / 4px 50% no-repeat; border-radius: 50%; }
.sp-blades::before, .sp-blades::after { content: ''; position: absolute; inset: 0; background: linear-gradient(#2F5D3F, #2F5D3F) 50% 0 / 4px 50% no-repeat; transform: rotate(120deg); }
.sp-blades::after { transform: rotate(240deg); }
.sp-panels { left: 6%; bottom: 14%; width: 46%; height: 40px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.5) 1px, transparent 1px) 0 0 / 16px 100%, linear-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px) 0 0 / 100% 13px, linear-gradient(160deg, #2F5D9E, #1E3B6B); transform: skewX(-18deg); box-shadow: 0 6px 0 #6B7C8F; }
.sp-panels::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.5) 45%, transparent 60%) -100% 0 / 200% 100% no-repeat; animation: sp-glint 4s ease-in-out infinite; }
@keyframes sp-glint { to { background-position: 200% 0; } }
.sp-vine { left: 0; top: 0; bottom: 0; width: 22px; background: radial-gradient(ellipse 9px 6px at 70% 50%, #4FA05A 98%, transparent) 0 0 / 22px 34px, linear-gradient(90deg, transparent 9px, #3E7B3A 9px 12px, transparent 12px); opacity: 0.8; }
.vibe--solarpunk .mini__name { font-weight: 900; font-size: 21px; }
.vibe--solarpunk .mini__link { border: 1.5px solid rgba(30, 59, 44, 0.18); font-weight: 800; }
.vibe--solarpunk .mini__link--hl { background: #F59E0B; color: #1E3B2C; border-color: #F59E0B; }

/* ---- Rooftop Noir: a red cartoon sky, black art-deco towers, a searchlight, a rooftop ledge ---- */
.vibe--rooftop .mini { --bg: #A11D0B; --fg: #FFFFFF; --mut: #FFD3C4; --btn: #0B0B0E; --btnfg: #FFFFFF; --rad: 2px; --hl: #FFD23F; --font: 'DM Sans', var(--sans); }
.vibe--rooftop .bg { background: radial-gradient(90% 60% at 30% 25%, #D7361A, #A11D0B 55%, #5E0E06); }
.rt-beam { left: 50%; bottom: 20%; width: 60px; height: 140%; margin-left: -30px; transform-origin: 50% 100%; background: linear-gradient(0deg, rgba(255, 236, 190, 0.45), transparent 80%); clip-path: polygon(40% 100%, 60% 100%, 100% 0, 0 0); animation: rt-sweep 7s ease-in-out infinite alternate; }
@keyframes rt-sweep { from { transform: rotate(-28deg); } to { transform: rotate(24deg); } }
.rt-city { left: 0; right: 0; bottom: 0; height: 44%; background: #0B0B0E;
  clip-path: polygon(0 40%, 8% 40%, 8% 22%, 14% 22%, 14% 34%, 22% 34%, 22% 8%, 25% 0, 28% 8%, 28% 30%, 38% 30%, 38% 46%, 46% 46%, 46% 18%, 52% 18%, 52% 38%, 60% 38%, 60% 12%, 63% 4%, 66% 12%, 66% 42%, 76% 42%, 76% 26%, 84% 26%, 84% 50%, 92% 50%, 92% 30%, 100% 30%, 100% 100%, 0 100%); }
.rt-windows { left: 0; right: 0; bottom: 0; height: 30%; background: radial-gradient(#FFD23F 1px, transparent 1.6px) 0 0 / 11px 13px; opacity: 0.45; -webkit-mask: linear-gradient(90deg, #000 0 20%, transparent 20% 30%, #000 30% 55%, transparent 55% 62%, #000 62%); mask: linear-gradient(90deg, #000 0 20%, transparent 20% 30%, #000 30% 55%, transparent 55% 62%, #000 62%); animation: lv-blink 5s steps(2) infinite; }
.rt-ledge { left: -10%; right: -10%; bottom: -6%; height: 22%; background: #16161C; transform: rotate(-9deg); box-shadow: 0 -3px 0 #2A2A33; }
.vibe--rooftop .mini__name { font-family: 'Anton', var(--sans); font-weight: 400; font-size: 26px; letter-spacing: 0.06em; text-transform: uppercase; text-shadow: 3px 3px 0 #0B0B0E; }
.vibe--rooftop .mini__link { border: 1px solid #0B0B0E; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 4px 0 #5E0E06; }
.vibe--rooftop .mini__link--hl { background: #FFD23F; color: #0B0B0E; }

.cb-shock, .df-emoji i { position: absolute; display: block; }
.df-emoji { inset: 0; }
@media (prefers-reduced-motion: reduce) {
  .vibe--clickbait *, .vibe--deepfried .bg *, .vibe--news .bg *, .vibe--evergreen .bg *, .vibe--solarpunk .bg *, .vibe--rooftop .bg * { animation: none !important; }
}

/* ======================================================================================================
   The owner's private stream-style themes, 28 Oct 2026 (settings.private: only creators HQ gives them to can use
   them). One family, layer "vibe vibe--rkx vibe--rk-<colour>", made to move like his stream overlay:
   INTRO (once, ~2.5 s): the RK logo slices in from offset strips with a red/cyan split, settles, lifts into the
   header; then the avatar, name, bio, icons, blocks and badge slice in one after another.
   CALM LOOP (10 s, seamless): the glow shifts, edge bars drift like his outro, the avatar breathes, one light sweep
   at a time (name, then the main button, then the logo), the underline under the name stretches gently.
   Everything's final state is the default, so "moving effects off" (.is-still) and reduced motion show the finished
   page. Motion is transform / opacity / clip only. Art: themes/rk-wall.jpg (his graffiti wall), themes/rk-logo.png.
   ====================================================================================================== */
.vibe--rkx .mini { --rk: #E8132B; --rk-glow: #6B0C1A; --rk-mid: #2A060B; --vig: 0.7; --bg: #0A0304; --fg: #FFFFFF; --mut: #F0C9CD; --btn: rgba(20, 6, 9, 0.8); --btnfg: #FFFFFF; --rad: 0; --hl: var(--rk); --font: 'DM Sans', var(--sans); }
.vibe--rkx:not(.vibe--rkx-open) .mini { padding-top: 80px; }
.vibe--rkx-open .mini { padding-top: 24px; }
.vibe--rkx .bg { overflow: hidden; background: var(--bg); }
/* room for the RK logo above the avatar (80 x 51 at 12px), on the public page too (public.css sets .pub .pg-layer > .mini padding) */
.pub .pg-layer.vibe--rkx:not(.vibe--rkx-open) > .mini, .pg-layer.vibe--rkx:not(.vibe--rkx-open) > .mini { padding-top: 80px; }
/* the logo-free versions start close to the top (owner, 28 Oct: "reduce the spacing on top") */
.pub .pg-layer.vibe--rkx-open > .mini, .pg-layer.vibe--rkx-open > .mini { padding-top: 24px; }
.rkx-amb { inset: -10%; background: radial-gradient(85% 55% at 50% 28%, var(--rk-glow) 0%, var(--rk-mid) 45%, var(--bg) 80%); animation: rkx-amb 10s ease-in-out infinite alternate; }
@keyframes rkx-amb { from { transform: translate(-12px, -8px) scale(1.02); } to { transform: translate(12px, 10px) scale(1.06); } }
.rkx-vig { inset: 0; background: radial-gradient(120% 80% at 50% 35%, transparent 50%, rgba(0, 0, 0, var(--vig))); }
.rkx-bars { inset: 0; }
.rkx-bars i { left: var(--x); top: -140px; width: 3px; height: var(--h); background: var(--rk); box-shadow: 0 0 10px var(--rk); opacity: 0.45; animation: rkx-bar var(--d) linear var(--dl) infinite; }
@keyframes rkx-bar { to { transform: translateY(1400px); } }
/* intro: the logo strips (default hidden = the end state) */
.rkx-reveal { left: 50%; top: 12px; width: 200px; height: 127px; margin-left: -100px; opacity: 0; transform-origin: 50% 0; animation: rkx-reveal 1.95s linear; z-index: 3; }
@keyframes rkx-reveal { 0%, 68% { opacity: 1; transform: translateY(202px) scale(1); } 100% { opacity: 1; transform: translateY(0) scale(0.4); } }
.rkx-reveal i { left: 0; right: 0; top: calc(var(--i) * 18.14px); height: 18.7px; background: url('/themes/rk-logo.png') 0 calc(var(--i) * -18.14px) / 200px 127px no-repeat; animation: rkx-strip 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--i) * 40ms) backwards; }
@keyframes rkx-strip {
  0% { opacity: 0; transform: translateX(var(--o)); filter: drop-shadow(6px 0 0 #E8132B) drop-shadow(-6px 0 0 #00E5FF); }
  12% { opacity: 1; }
  55% { transform: translateX(calc(var(--o) * -0.12)); filter: drop-shadow(3px 0 0 #E8132B) drop-shadow(-3px 0 0 #00E5FF); }
  68% { transform: translateX(5px); } 76% { transform: translateX(-4px); } 84% { transform: translateX(2px); filter: none; }
  100% { opacity: 1; transform: none; filter: none; }
}
.rkx-hdr { left: 50%; top: 12px; width: 80px; height: 51px; margin-left: -40px; background: url('/themes/rk-logo.png') center / contain no-repeat; animation: rkx-in 0.25s ease-out 1.88s backwards; z-index: 3; }
@keyframes rkx-in { from { opacity: 0; } }
.rkx-hdr::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.8) 50%, transparent 60%) 0 0 / 300% 100%; -webkit-mask: url('/themes/rk-logo.png') center / contain no-repeat; mask: url('/themes/rk-logo.png') center / contain no-repeat; opacity: 0; animation: rkx-logo-sweep 10s ease-in-out 8.6s infinite; }
@keyframes rkx-logo-sweep { 0% { opacity: 1; background-position: 100% 0; } 12% { opacity: 1; background-position: 0 0; } 13%, 100% { opacity: 0; } }
/* the page slices in, top to bottom (each element's final state is its own) */
.vibe--rkx .mini__avatar, .vibe--rkx .mini__name, .vibe--rkx .mini__bio, .vibe--rkx .mini__socials, .vibe--rkx .mini__links > *, .vibe--rkx .mini__foot { animation: rkx-slice 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) var(--rkd, 2.4s) backwards; }
@keyframes rkx-slice { 0% { opacity: 0; clip-path: inset(-30px 100% -30px -30px); transform: translateX(-10px); } 1% { opacity: 1; } 60% { transform: translateX(4px); } 100% { clip-path: inset(-30px -30px -30px -30px); transform: none; } }
.vibe--rkx .mini__avatar { --rkd: 1.75s; width: 84px; height: 84px; position: relative; background: var(--rk); color: #FFFFFF; box-shadow: 0 0 0 3px var(--rk-ring, #FFFFFF), 0 0 0 6px var(--rk), 0 0 26px color-mix(in srgb, var(--rk) 55%, transparent); animation: rkx-slice 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 1.75s backwards, rkx-breathe 5s ease-in-out 2.4s infinite alternate; }
@keyframes rkx-breathe { from { transform: translateY(0); } to { transform: translateY(-5px) scale(1.01); } }
.vibe--rkx .mini__name { --rkd: 1.83s; position: relative; overflow: hidden; padding: 0 10px 12px; background: linear-gradient(var(--rk), var(--rk)) 50% 100% / 46px 3px no-repeat; animation: rkx-slice 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 1.83s backwards, rkx-ul 5s ease-in-out 2.4s infinite alternate; }
@keyframes rkx-ul { to { background-size: 66px 3px; } }
.vibe--rkx .mini__name::after { content: ''; position: absolute; top: -10%; bottom: -10%; left: -60px; width: 46px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent); mix-blend-mode: overlay; transform: skewX(-20deg); animation: rkx-name-sweep 10s ease-in-out 4.6s infinite; }
@keyframes rkx-name-sweep { 0% { left: -60px; } 14%, 100% { left: 110%; } }
.vibe--rkx .mini__bio { --rkd: 1.91s; font-weight: 600; }
.vibe--rkx .mini__socials { --rkd: 1.99s; }
.vibe--rkx .mini__links > :nth-child(1) { --rkd: 2.07s; } .vibe--rkx .mini__links > :nth-child(2) { --rkd: 2.14s; }
.vibe--rkx .mini__links > :nth-child(3) { --rkd: 2.21s; } .vibe--rkx .mini__links > :nth-child(4) { --rkd: 2.28s; }
.vibe--rkx .mini__links > :nth-child(5) { --rkd: 2.35s; } .vibe--rkx .mini__links > :nth-child(6) { --rkd: 2.42s; }
.vibe--rkx .mini__foot { --rkd: 2.5s; }
.vibe--rkx .mini__link { position: relative; overflow: hidden; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.vibe--rkx .mini__link--hl { background: var(--hl); color: var(--hlfg, #FFFFFF); border-color: var(--hl); box-shadow: none; }
.vibe--rkx .mini__link--hl::after { content: ''; position: absolute; top: 0; bottom: 0; left: -80px; width: 70px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); transform: skewX(-20deg); animation: rkx-btn-sweep 10s ease-in-out 6.6s infinite; }
@keyframes rkx-btn-sweep { 0% { left: -80px; } 12%, 100% { left: 110%; } }

/* ---- RK Live (red): his graffiti wall, slanted Anton, marker bio, angled buttons ---- */
.rkx-wall { inset: -6% -40%; background: url('/themes/rk-wall.jpg') center / cover; opacity: 0.16; mix-blend-mode: screen; animation: rkx-drift 20s ease-in-out infinite alternate; }
@keyframes rkx-drift { from { transform: translate(-18px, 6px); } to { transform: translate(18px, -6px); } }
.vibe--rk-red .mini__name, .vibe--rk-orange .mini__name, .vibe--rk-white .mini__name { font-family: 'Anton', var(--sans); font-weight: 400; font-size: 32px; font-style: italic; letter-spacing: 0.02em; text-transform: uppercase; }
.vibe--rk-red .mini__name { text-shadow: 3px 3px 0 var(--rk); }
.vibe--rk-red .mini__bio, .vibe--rk-white .mini__bio { font-family: 'Permanent Marker', var(--sans); font-weight: 400; font-size: 15px; color: #F23A4D; transform: rotate(-2deg); }
.vibe--rk-red .mini__link, .vibe--rk-white .mini__link, .vibe--rk-anime .mini__link { clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%); }
.vibe--rk-red .mini__link { border: 0; border-left: 4px solid var(--rk); }
.vibe--rk-red .mini__link--hl { border-left-color: #FFFFFF; }

/* ---- Gold Crown: black + yellow brush strokes, halftone, a crown, marker name ---- */
.vibe--rk-gold .mini { --rk: #FFD400; --rk-glow: #3D3300; --rk-mid: #141200; --bg: #0A0A0A; --mut: #FFE38A; --btn: #151515; --hlfg: #111111; --rad: 10px; --rk-ring: #0A0A0A; }
.rkx-tone { inset: 0; background: radial-gradient(color-mix(in srgb, var(--rk) 16%, transparent) 1.5px, transparent 1.8px) 0 0 / 10px 10px; -webkit-mask: linear-gradient(160deg, #000, transparent 60%); mask: linear-gradient(160deg, #000, transparent 60%); }
.rkx-stroke { left: -20%; width: 140%; background: var(--rk); transform: rotate(-12deg); }
.rkx-stroke--a { top: 30%; height: 54px; clip-path: polygon(2% 30%, 100% 0, 97% 70%, 0 100%); opacity: 0.85; animation: rkx-stroke 14s ease-in-out infinite alternate; }
.rkx-stroke--b { bottom: 12%; height: 34px; clip-path: polygon(0 20%, 100% 0, 98% 80%, 3% 100%); opacity: 0.4; animation: rkx-stroke 18s ease-in-out infinite alternate-reverse; }
@keyframes rkx-stroke { from { translate: -14px 0; } to { translate: 14px 0; } }
.rkx-crown { right: 8%; top: 13%; width: 70px; height: 50px; opacity: 0.22; transform: rotate(14deg); background: var(--rk); clip-path: polygon(0 100%, 0 25%, 25% 60%, 50% 0, 75% 60%, 100% 25%, 100% 100%); animation: rkx-bob 6s ease-in-out infinite alternate; }
@keyframes rkx-bob { to { translate: 0 -8px; } }
.vibe--rk-gold .mini__name { font-family: 'Permanent Marker', var(--sans); font-weight: 400; font-size: 30px; transform: rotate(-3deg); text-shadow: 3px 3px 0 var(--rk); }
.vibe--rk-gold .mini__link { border: 2px solid var(--rk); }
.vibe--rk-gold .mini__link--hl { box-shadow: 0 5px 0 #9C7F00; }

/* ---- Neon Lime: black, lime rings pulsing out from the avatar, a lime floor glow ---- */
.vibe--rk-lime .mini { --rk: #A6FF00; --rk-glow: #1E3300; --rk-mid: #0A1000; --bg: #050605; --mut: #C9F7A4; --btn: rgba(255, 255, 255, 0.06); --hlfg: #071000; --rad: 999px; --rk-ring: #050605; }
.rkx-ring { left: 50%; top: 122px; width: 200px; height: 200px; margin: -100px 0 0 -100px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--rk) 45%, transparent); box-shadow: 0 0 40px color-mix(in srgb, var(--rk) 25%, transparent); animation: rkx-ring 5s ease-out infinite; }
.rkx-ring--b { animation-delay: -2.5s; }
@keyframes rkx-ring { from { transform: scale(0.55); opacity: 0.9; } to { transform: scale(1.8); opacity: 0; } }
.rkx-floor { left: 0; right: 0; bottom: 0; height: 40%; background: radial-gradient(80% 100% at 50% 100%, color-mix(in srgb, var(--rk) 22%, transparent), transparent 70%); animation: rkx-amb 8s ease-in-out infinite alternate; }
.vibe--rk-lime .mini__name { font-family: 'Audiowide', var(--sans); font-weight: 400; font-size: 24px; text-shadow: 0 0 14px color-mix(in srgb, var(--rk) 70%, transparent); }
.vibe--rk-lime .mini__link { border: 1px solid color-mix(in srgb, var(--rk) 50%, transparent); box-shadow: inset 0 0 14px color-mix(in srgb, var(--rk) 12%, transparent); text-transform: none; letter-spacing: 0; }

/* ---- Violet Orbit: deep purple, a tilted orbit ring around the avatar, twinkling stars ---- */
.vibe--rk-violet .mini { --rk: #7C4DFF; --rk-glow: #3B1E8A; --rk-mid: #170D33; --bg: #0B0716; --mut: #D4C3FF; --btn: rgba(124, 77, 255, 0.14); --rad: 16px; }
.rkx-orbit { left: 50%; top: 122px; width: 190px; height: 58px; margin: -29px 0 0 -95px; border-radius: 50%; border: 2px solid rgba(160, 120, 255, 0.85); box-shadow: 0 0 18px var(--rk); animation: rkx-orbit 12s linear infinite; }
@keyframes rkx-orbit { from { transform: rotate(-14deg); } 50% { transform: rotate(-6deg) scaleX(1.06); } to { transform: rotate(-14deg); } }
.rkx-stars { inset: 0; }
.rkx-stars i { left: var(--x); top: calc(var(--x) * 0.9 + 4%); width: 3px; height: 3px; border-radius: 50%; background: #CDB8FF; box-shadow: 0 0 6px #B79CFF; animation: rkx-twinkle var(--d) ease-in-out var(--dl) infinite alternate; }
@keyframes rkx-twinkle { from { opacity: 0.15; } to { opacity: 0.9; } }
.vibe--rk-violet .mini__name { font-family: 'Bricolage Grotesque', var(--sans); font-weight: 800; font-size: 28px; letter-spacing: -0.02em; }
.vibe--rk-violet .mini__link { border: 1px solid color-mix(in srgb, var(--rk) 55%, transparent); text-transform: none; letter-spacing: 0; }

/* ---- Sunset Orange: black with an orange diagonal band behind the header ---- */
.vibe--rk-orange .mini { --rk: #FF6A00; --rk-glow: #4A1E00; --rk-mid: #170A02; --bg: #0C0C0C; --mut: #FFD0B0; --btn: #1A1A1A; --hlfg: #111111; --rad: 4px; } /* dark text on the orange buttons: white was 2.9:1 */
.rkx-band { left: -30%; top: 6%; width: 160%; height: 110px; background: linear-gradient(90deg, #FF6A00, #FF9A3D); transform: rotate(-24deg); animation: rkx-stroke 16s ease-in-out infinite alternate; }
.rkx-band--thin { top: 22%; height: 16px; background: #2A2A2A; animation-direction: alternate-reverse; }
.vibe--rk-orange .mini__link { border-bottom: 3px solid var(--rk); }

/* ---- Anime Crimson: red manga speed lines, halftone, a panel cut; comic name, tilted avatar card ---- */
.vibe--rk-anime .mini { --rk: #E8132B; --rk-glow: #5A0A14; --rk-mid: #1E0508; --bg: #140406; --mut: #FFC2C8; --btn: rgba(0, 0, 0, 0.68); }
.rkx-speed { inset: -40%; background: repeating-conic-gradient(from 0deg at 50% 22%, color-mix(in srgb, var(--rk) 50%, transparent) 0 1.2deg, transparent 1.2deg 7deg); -webkit-mask: radial-gradient(circle at 50% 22%, transparent 18%, #000 55%); mask: radial-gradient(circle at 50% 22%, transparent 18%, #000 55%); animation: rkx-spin 40s linear infinite; }
@keyframes rkx-spin { to { transform: rotate(360deg); } }
.vibe--rk-anime .rkx-tone { --rk: #000000; -webkit-mask: none; mask: none; opacity: 0.6; }
.rkx-cut { inset: 0; background: linear-gradient(115deg, transparent 62%, rgba(255, 255, 255, 0.07) 62% 63%, transparent 63%); }
.vibe--rk-anime .mini__avatar { border-radius: 18px; box-shadow: 0 0 0 3px #FFFFFF, 6px 6px 0 var(--rk); }
@keyframes rkx-breathe-tilt { from { transform: rotate(-3deg); } to { transform: rotate(-3deg) translateY(-5px); } }
.vibe--rk-anime .mini__avatar { transform: rotate(-3deg); animation-name: rkx-slice, rkx-breathe-tilt; }
.vibe--rk-anime .mini__name { font-family: 'Bangers', var(--sans); font-weight: 400; font-size: 32px; letter-spacing: 0.04em; text-shadow: 3px 3px 0 var(--rk), -1px -1px 0 #000000; }
.vibe--rk-anime .mini__link { border: 2px solid #FFFFFF; }

/* ---- Clean White: paper white, red paint splashes and drips, outlined buttons with a hard shadow ---- */
.vibe--rk-white .mini { --rk: #E8132B; --rk-glow: #FFFFFF; --rk-mid: #FAF9F6; --vig: 0.06; --bg: #FAF9F6; --fg: #111111; --mut: #5E5A54; --btn: #FFFFFF; --btnfg: #111111; --rad: 12px; --rk-ring: #111111; }
.vibe--rk-white .mini__avatar { box-shadow: 0 0 0 3px #111111, 6px 6px 0 var(--rk); }
.rkx-splat { border-radius: 50%; background: radial-gradient(circle at 40% 40%, var(--rk) 48%, transparent 49%), radial-gradient(circle at 75% 30%, var(--rk) 18%, transparent 19%), radial-gradient(circle at 30% 80%, var(--rk) 14%, transparent 15%), radial-gradient(circle at 85% 75%, var(--rk) 10%, transparent 11%); opacity: 0.88; animation: rkx-bob 7s ease-in-out infinite alternate; }
.rkx-splat--a { right: -70px; top: -50px; width: 260px; height: 260px; }
.rkx-splat--b { left: -70px; bottom: -60px; width: 230px; height: 230px; animation-direction: alternate-reverse; }
.rkx-drop { width: 10px; height: 10px; border-radius: 50%; background: var(--rk); animation: rkx-drip 6s ease-in-out infinite; }
.rkx-drop--a { left: 9%; top: 14%; } .rkx-drop--b { right: 12%; top: 40%; width: 7px; height: 7px; animation-delay: -3s; }
@keyframes rkx-drip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(14px) scaleY(1.3); } }
.vibe--rk-white .rkx-bars i { opacity: 0.25; }
.vibe--rk-white .mini__name { color: #111111; }
.vibe--rk-white .mini__link { border: 2px solid #111111; border-radius: var(--rad); clip-path: none; box-shadow: 4px 4px 0 #111111; }
.vibe--rk-white .mini__link--hl { border-color: #111111; box-shadow: 4px 4px 0 #111111; }
.vibe--rk-white .mini__foot { color: #5E5A54; }

/* Fixes across the family (owner, 28 Oct: "need to fix all my RK page theme"):
   - buttons inside cards (Work with me, Subscribe, Send, the active kit tab) took the dark see-through --btn plate and
     vanished into the card: they're the theme's colour now, like the main button (UPI keeps its green; a block with
     its own Block style keeps it)
   - Clean White: cards are solid paper, so the red splashes never sit behind their text */
.vibe--rkx :is(.blk__btn:not(.blk__btn--upi), .fm__btn, .kt-tab.is-on):not(.bsx *) { background: var(--hl); color: var(--hlfg, #FFFFFF); }
.vibe--rk-white .blk:not(.bsx *) { background: #FFFFFF; border-color: #111111; }
.vibe--rk-white :is(.blk__btn:not(.blk__btn--upi), .fm__btn):not(.bsx *) { box-shadow: 3px 3px 0 #111111; }
/* the logo-free Clean White (stream-white) has its header 56px higher: the top splash moves up and out, clear of the
   red marker bio */
.vibe--rkx-open.vibe--rk-white .rkx-splat--a { top: -130px; right: -120px; }

/* Logo-free versions for everyone (stream-*, owner 28 Oct 2026: "make the version without logo for everyone"): the same
   motion and colourways, but no RK logo and no gap for it. The intro is glitch bars flashing across the screen while
   the creator's own avatar glitches in (RGB split, jumping slices), then the page slices in and settles into the calm
   loop. Hidden bars and the settled avatar are the defaults, so "moving effects off" and reduced motion show the page. */
.rkx-glitch { inset: 0; z-index: 3; pointer-events: none; }
.rkx-glitch i { left: -10%; right: -10%; top: var(--t); height: var(--h); background: var(--c); opacity: 0; animation: rkx-flash 0.5s steps(5) var(--dl); }
@keyframes rkx-flash { 0% { opacity: 0.85; transform: translateX(-24%); } 40% { opacity: 0.55; transform: translateX(12%); } 80% { opacity: 0.7; transform: translateX(-6%); } 100% { opacity: 0; transform: translateX(20%); } }
.vibe--rkx-open .mini__avatar { animation: rkx-glitch-in 0.7s linear 0.3s backwards, rkx-breathe 5s ease-in-out 1.4s infinite alternate; }
.vibe--rk-anime.vibe--rkx-open .mini__avatar { animation-name: rkx-glitch-in, rkx-breathe-tilt; }
@keyframes rkx-glitch-in {
  0% { opacity: 0; clip-path: inset(40% -40px 45% -40px); transform: translateX(-14px); filter: drop-shadow(-6px 0 0 #00E5FF) drop-shadow(6px 0 0 #E8132B); }
  8% { opacity: 1; }
  16% { clip-path: inset(8% -40px 70% -40px); transform: translateX(12px); }
  26% { clip-path: inset(62% -40px 8% -40px); transform: translateX(-8px); }
  36% { clip-path: inset(0 -40px 48% -40px); transform: translateX(6px) skewX(-8deg); }
  46% { clip-path: inset(28% -40px 18% -40px); transform: translateX(-4px); }
  58% { clip-path: inset(-40px); transform: translateX(3px); filter: drop-shadow(-4px 0 0 #00E5FF) drop-shadow(4px 0 0 #E8132B); }
  74% { transform: translateX(-2px); filter: drop-shadow(-2px 0 0 #00E5FF) drop-shadow(2px 0 0 #E8132B); }
  100% { opacity: 1; clip-path: inset(-40px); transform: none; filter: none; }
}
.vibe--rkx-open .mini__name { animation-delay: 0.85s, 1.4s; }
.vibe--rkx-open .mini__bio { --rkd: 0.93s; } .vibe--rkx-open .mini__socials { --rkd: 1.01s; }
.vibe--rkx-open .mini__links > :nth-child(1) { --rkd: 1.09s; } .vibe--rkx-open .mini__links > :nth-child(2) { --rkd: 1.16s; }
.vibe--rkx-open .mini__links > :nth-child(3) { --rkd: 1.23s; } .vibe--rkx-open .mini__links > :nth-child(4) { --rkd: 1.3s; }
.vibe--rkx-open .mini__links > :nth-child(5) { --rkd: 1.37s; } .vibe--rkx-open .mini__links > :nth-child(6) { --rkd: 1.44s; }
.vibe--rkx-open .mini__links > * { --rkd: 1.5s; } /* any block after the sixth */
.vibe--rkx-open .mini__foot { --rkd: 1.55s; }
.vibe--rkx-open .rkx-ring, .vibe--rkx-open .rkx-orbit { top: 66px; } /* around the avatar, 56px higher without the logo */

@media (prefers-reduced-motion: reduce) {
  .vibe--rkx .bg *, .vibe--rkx .mini__avatar, .vibe--rkx .mini__name, .vibe--rkx .mini__name::after, .vibe--rkx .mini__bio, .vibe--rkx .mini__socials,
  .vibe--rkx .mini__links > *, .vibe--rkx .mini__foot, .vibe--rkx .mini__link--hl::after, .rkx-hdr::after { animation: none !important; }
}

/* ======================================================================================================
   Xyaa Energy (owner, 30 Oct 2026): a private theme made for Xyaa's pitch (she's a Monster Energy athlete). Layer
   "vibe vibe--rkx vibe--xyaa": the owner's RK stream intro and calm loop (above), with her claw M × XYAA
   logo (themes/xyaa-logo.png, same 200x127 shape as rk-logo.png) slicing in and lifting into the header, a green/yellow
   glitch split instead of red/cyan, and energy-can art: black brushed metal, three claw scratches in the corner that
   slash in after the intro, carbonation fizz rising. settings.private: only creators HQ gives it to.
   Every animation's final state is the default, so "moving effects off" and reduced motion show the finished page.
   ====================================================================================================== */
.vibe--xyaa .mini {
  --xe: #8CFF1A; --rk: var(--xe); --rk-glow: #1E3A08; --rk-mid: #0A1404; --rk-ring: #050605; --vig: 0.7;
  --bg: #050605; --fg: #FFFFFF; --mut: #C6F59A; --btn: rgba(12, 14, 11, 0.88); --btnfg: #F2FFE6; --rad: 4px; --hl: var(--xe); --hlfg: #061000;
  --font: 'DM Sans', var(--sans);
}
.vibe--xyaa .bg { background: #050605; }
.vibe--xyaa .rkx-reveal i { background-image: url('/themes/xyaa-logo.png'); animation-name: xe-strip; }
.vibe--xyaa .rkx-hdr { background-image: url('/themes/xyaa-logo.png'); }
.vibe--xyaa .rkx-hdr::after { -webkit-mask-image: url('/themes/xyaa-logo.png'); mask-image: url('/themes/xyaa-logo.png'); }
@keyframes xe-strip {
  0% { opacity: 0; transform: translateX(var(--o)); filter: drop-shadow(6px 0 0 #8CFF1A) drop-shadow(-6px 0 0 #F2FF5A); }
  12% { opacity: 1; }
  55% { transform: translateX(calc(var(--o) * -0.12)); filter: drop-shadow(3px 0 0 #8CFF1A) drop-shadow(-3px 0 0 #F2FF5A); }
  68% { transform: translateX(5px); } 76% { transform: translateX(-4px); } 84% { transform: translateX(2px); filter: none; }
  100% { opacity: 1; transform: none; filter: none; }
}
.xe-metal { inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 4px), linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 30%, transparent 75%, rgba(255, 255, 255, 0.03)); }
.xe-claw { right: -6px; top: 40px; width: 100px; height: 240px; transform: rotate(14deg); opacity: 0.5; filter: drop-shadow(0 0 6px var(--xe, #8CFF1A)) drop-shadow(0 0 18px rgba(140, 255, 26, 0.55)); }
.xe-claw i { position: absolute; top: 0; width: 18px; height: 100%; background: linear-gradient(180deg, #D9FF9E, #8CFF1A 30%, #5FC400);
  clip-path: polygon(46% 0, 62% 5%, 54% 15%, 72% 24%, 58% 37%, 78% 50%, 60% 63%, 74% 77%, 52% 100%, 36% 81%, 24% 67%, 40% 53%, 22% 39%, 38% 25%, 26% 12%);
  animation: xe-slash 0.5s cubic-bezier(0.2, 0.9, 0.2, 1) backwards, xe-buzz 6s 3.4s ease-in-out infinite; }
.xe-claw i:nth-child(1) { left: 6px; height: 86%; top: 8%; animation-delay: 2.2s, 3.4s; }
.xe-claw i:nth-child(2) { left: 41px; animation-delay: 2.32s, 3.8s; }
.xe-claw i:nth-child(3) { left: 76px; height: 80%; top: 14%; animation-delay: 2.44s, 4.2s; }
@keyframes xe-slash { from { clip-path: polygon(46% 0, 62% 5%, 62% 5%, 46% 0, 46% 0, 46% 0, 46% 0, 46% 0, 46% 0, 46% 0, 46% 0, 46% 0, 46% 0, 46% 0, 26% 12%); opacity: 0; } 30% { opacity: 1; } }
@keyframes xe-buzz { 0%, 86%, 100% { opacity: 1; } 88% { opacity: 0.45; } 90% { opacity: 1; } 92% { opacity: 0.7; } }
.xe-fizz { inset: 0; }
.xe-fizz i { position: absolute; left: var(--x); bottom: -12px; width: 7px; height: 7px; border-radius: 50%; scale: var(--s); border: 1px solid rgba(198, 245, 154, 0.55); background: rgba(140, 255, 26, 0.12); animation: xe-rise var(--d) linear var(--dl) infinite; }
@keyframes xe-rise { from { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; } 50% { transform: translate(6px, -55vh); } to { transform: translate(-4px, -110vh); opacity: 0; } }
.xe-glow { left: -20%; right: -20%; bottom: 0; height: 30%; background: radial-gradient(60% 70% at 50% 100%, rgba(140, 255, 26, 0.2), transparent 70%); filter: blur(8px); }
.vibe--xyaa .mini__name { font-family: 'Anton', var(--sans); font-weight: 400; font-size: 34px; line-height: 1.05; letter-spacing: 0.04em; text-transform: uppercase; color: #FFFFFF; text-shadow: 0 0 1px var(--xe), 0 0 16px rgba(140, 255, 26, 0.55); }
.vibe--xyaa .mini__bio { color: var(--mut); }
.vibe--xyaa .mini__link { border: 1px solid rgba(140, 255, 26, 0.5); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); box-shadow: inset 0 0 16px rgba(140, 255, 26, 0.08); }
.vibe--xyaa .mini__link--hl { background: var(--xe); color: #061000; border-color: var(--xe); box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .vibe--xyaa .bg * { animation: none !important; }
}

/* ======================================================================================================
   Page tabs and link cards (owner, 31 Oct 2026: tabs like Linktree's "Links" and "Shop", and links shown with their
   picture, affiliate links too). partials/page: one radio per tab (visually hidden, still focusable: arrow keys move
   between tabs), a pill bar of labels, and one panel per tab; no script. Everything wears the theme's own colours.
   ====================================================================================================== */
.pg-tabs__r { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.pg-tabs { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(72px, 1fr)); gap: 4px; width: fit-content; max-width: 100%; margin: 4px auto 8px; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--fg) 12%, transparent); }
.pg-tabs__l { display: block; padding: 8px 12px; border-radius: 999px; overflow: hidden; color: var(--fg); font-size: 12px; font-weight: 600; line-height: 1.2; text-align: center; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; transition: background 0.2s, color 0.2s; }
.pg-tabs__r--0:checked ~ .pg-tabs .pg-tabs__l--0,
.pg-tabs__r--1:checked ~ .pg-tabs .pg-tabs__l--1,
.pg-tabs__r--2:checked ~ .pg-tabs .pg-tabs__l--2,
.pg-tabs__r--3:checked ~ .pg-tabs .pg-tabs__l--3,
.pg-tabs__r--4:checked ~ .pg-tabs .pg-tabs__l--4,
.pg-tabs__r--5:checked ~ .pg-tabs .pg-tabs__l--5 { background: var(--btn); color: var(--btnfg); box-shadow: 0 4px 12px -8px rgba(0, 0, 0, 0.5); }
.pg-tabs__r--0:focus-visible ~ .pg-tabs .pg-tabs__l--0,
.pg-tabs__r--1:focus-visible ~ .pg-tabs .pg-tabs__l--1,
.pg-tabs__r--2:focus-visible ~ .pg-tabs .pg-tabs__l--2,
.pg-tabs__r--3:focus-visible ~ .pg-tabs .pg-tabs__l--3,
.pg-tabs__r--4:focus-visible ~ .pg-tabs .pg-tabs__l--4,
.pg-tabs__r--5:focus-visible ~ .pg-tabs .pg-tabs__l--5 { outline: 2px solid var(--hl, var(--btn)); outline-offset: 2px; }
.pg-tabs__r--0:not(:checked) ~ .pg-tabs__r:checked ~ .pg-panel--0,
.pg-tabs__r--1:not(:checked) ~ .pg-panel--1,
.pg-tabs__r--2:not(:checked) ~ .pg-panel--2,
.pg-tabs__r--3:not(:checked) ~ .pg-panel--3,
.pg-tabs__r--4:not(:checked) ~ .pg-panel--4,
.pg-tabs__r--5:not(:checked) ~ .pg-panel--5 { display: none !important; }
/* nothing checked (should never happen, but a page must never come out blank): the first tab shows */
.mini:not(:has(> .pg-tabs__r:checked)) .pg-tabs__l--0 { background: var(--btn); color: var(--btnfg); }

/* Link cards: two to a row; a card with no card beside it lies flat (picture on the left) */
.mini__links:has(> .blk-hook--card) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mini__links:has(> .blk-hook--card) > * { grid-column: 1 / -1; }
.mini__links:has(> .blk-hook--card) > .blk-hook--card { grid-column: auto; }
.mini__links > .blk-hook--card:not(.blk-hook--card + .blk-hook--card):not(:has(+ .blk-hook--card)) { grid-column: 1 / -1; }
.lcard { position: relative; display: flex; flex-direction: column; height: 100%; color: var(--fg); }
.lcard__img { display: block; aspect-ratio: 1; background: #FFFFFF; }
.lcard__img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lcard__img--none { display: grid; place-items: center; background: color-mix(in srgb, var(--fg) 10%, transparent); }
.lcard__img--none i { color: var(--mut); font-size: 28px; font-style: normal; font-weight: 800; }
.lcard__body { display: grid; gap: 4px; padding: 8px 12px 12px; }
.lcard__t { display: -webkit-box; overflow: hidden; font-size: 12px; font-weight: 700; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.lcard__p { color: var(--mut); font-size: 11px; font-weight: 600; }
.lcard__tag { position: absolute; top: 8px; left: 8px; padding: 4px 8px; border-radius: 999px; background: rgba(17, 17, 16, 0.72); color: #FFFFFF; font-size: 9px; font-weight: 700; line-height: 1; }
.mini__links > .blk-hook--card:not(.blk-hook--card + .blk-hook--card):not(:has(+ .blk-hook--card)) .lcard { flex-direction: row; align-items: center; }
.mini__links > .blk-hook--card:not(.blk-hook--card + .blk-hook--card):not(:has(+ .blk-hook--card)) .lcard__img { flex: none; width: 72px; }
.aff-tag { display: inline-block; margin-left: 8px; padding: 4px 8px; border-radius: 999px; background: color-mix(in srgb, var(--btnfg, #FFFFFF) 18%, transparent); font-size: 9px; font-weight: 700; line-height: 1; vertical-align: middle; }