/* Dear Deena: classic 2000s fan-site edition */

/* Layout: a white page frame with a magenta border floating on a pink cloud sky.
   A row of picture tiles for the menu, then (home page) a header whose slideshow
   drifts and fades into the pink, then a blue body: boxes down the left,
   thick-bordered cards and wide boxes on the right, and a footer strip.
   Posts, pages and channels skip the header and the left column. */
:root {
  --sky-1: #E7DBFF;
  --sky-2: #FFE3F2;
  --sky-3: #DCEEFF;
  --panel: #FFF9FD;
  --white: #FFFFFF;
  --ink: #3B1F5C;
  --ink-soft: #6C5889;
  --link: #B8187A;
  --line: #EBDDF8;
  --line-2: #D2B6F0;

  --pink: #F27BBE;   --pink-d: #BC3B86;
  --hot: #EE4A9F;    --hot-d: #AE176C;
  --lilac: #A77BEA;  --lilac-d: #643AB3;
  --peri: #8E9CF5;   --peri-d: #4753BB;
  --sky: #6CC3F2;    --sky-d: #2878AE;
  --night: #1E1040;  --night-2: #3A1F6E;
  --glow-c: #9BEFFA; --glow-m: #FF8AD0;
  --blush: #FFE3F1;  --lav: #F0E6FF;    --mist: #E3F3FF;
  --iri: linear-gradient(135deg, #F8B6DE 0%, #D9BCF7 36%, #B9D8FA 68%, #F5BCE4 100%);

  --f-bubble: "Fredoka", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --f-script: "Dancing Script", "Brush Script MT", cursive;
  --f-pixel: "Silkscreen", "Courier New", monospace;
  --f-term: "VT323", "Courier New", monospace;
  --f-body: "Trebuchet MS", Verdana, Tahoma, system-ui, sans-serif;

  --r: 24px;
  --soft-shadow: 0 10px 28px rgba(110, 70, 190, 0.16);
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  padding-inline: clamp(16px, 2.5vw, 28px);
  padding-block: 18px 0;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
  background-color: #F4AFD2;
  background-image: linear-gradient(180deg, #E683B8 0%, #F3AACF 55%, #FAD0E4 100%);
  background-attachment: fixed;
}
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: var(--link); }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; text-wrap: balance; }
p { margin: 0; }
button, input, textarea, select { font: inherit; }
:focus-visible { outline: 3px dashed var(--lilac-d); outline-offset: 3px; }
.sr, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 10px; z-index: 50; background: var(--white); color: var(--ink); padding: 8px 14px; border-radius: 10px; font-weight: 700; }
.skip:focus { left: 16px; }
.site { max-width: 1100px; margin-inline: auto; }

/* ---------- Glossy pearl buttons ---------- */
.gel {
  --c: var(--pink); --d: var(--pink-d);
  position: relative; display: block; overflow: hidden; cursor: pointer;
  padding: 0.52em 0.9em; border-radius: 16px; border: 2px solid var(--d);
  font-family: var(--f-bubble); font-weight: 600; font-size: 1.1rem; letter-spacing: 0.02em; line-height: 1.15;
  color: #fff; text-align: center; text-decoration: none;
  text-shadow: 0 1px 0 var(--d), 0 -1px 0 var(--d), 1px 0 0 var(--d), -1px 0 0 var(--d), 0 2px 2px var(--d);
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--c) 42%, #fff) 0%,
    var(--c) 49%,
    color-mix(in srgb, var(--c) 86%, var(--d)) 51%,
    color-mix(in srgb, var(--c) 88%, #fff) 100%);
  box-shadow: 0 3px 0 var(--d), 0 6px 14px color-mix(in srgb, var(--d) 28%, transparent), inset 0 0 0 2px rgba(255,255,255,.35);
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}
.gel::before {
  content: ""; position: absolute; left: 7%; right: 7%; top: 2px; height: 46%;
  border-radius: 14px 14px 50% 50% / 14px 14px 30% 30%;
  background: linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.15));
  pointer-events: none;
}
.gel::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.75), transparent);
  transform: skewX(-18deg); transition: left .6s ease; pointer-events: none;
}
.gel span { position: relative; z-index: 1; }
.gel:hover { transform: translateY(-1px); filter: brightness(1.05) saturate(1.08); }
.gel:hover::after { left: 125%; }
.gel:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--d); }
.gel[aria-current="page"] { box-shadow: 0 3px 0 var(--d), 0 0 0 3px #fff, 0 0 18px 4px color-mix(in srgb, var(--c) 65%, transparent); }
.gel[aria-current="page"] span::before { content: "✦ "; }
.gel.inline { display: inline-block; padding: 0.55em 1.3em; border-radius: 999px; }
.gel.inline::before { border-radius: 999px; }
.g-pink { --c: var(--pink); --d: var(--pink-d); }
.g-hot { --c: var(--hot); --d: var(--hot-d); }
.g-lilac { --c: var(--lilac); --d: var(--lilac-d); }
.g-peri { --c: var(--peri); --d: var(--peri-d); }
.g-sky { --c: var(--sky); --d: var(--sky-d); }
.g-night { --c: #50318F; --d: var(--night); }
.g-night span { color: #fff; text-shadow: -1.5px 0 var(--glow-c), 1.5px 0 var(--glow-m); }
.g-pearl {
  --c: #FBE3F4; --d: #C27BB0;
  color: var(--hot-d);
  text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
  background: linear-gradient(to bottom, #FFFFFF 0%, #FFE6F5 48%, #F1DAF8 52%, #E2EEFF 100%);
}


/* ---------- The page frame ---------- */
.site {
  position: relative; max-width: 1140px; margin-inline: auto; padding: 12px;
  background: #fff; border: 4px solid #DE4F98; border-radius: 26px;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .55), 0 22px 54px rgba(150, 40, 110, .28);
}

/* Announcement strip */
.announce {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 10px; padding: 8px 16px;
  border-radius: 16px; text-decoration: none; color: var(--hot-d);
  background: linear-gradient(90deg, #F8BCDB 0%, #FCE2F0 50%, #F5C9E7 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.85), inset 0 -3px 0 rgba(214, 79, 152, .12);
}
.announce:hover .announce-text { text-decoration: underline; }
.announce-star { color: #fff; font-size: 1.1rem; text-shadow: 0 0 8px rgba(255,255,255,.9); }
.announce-text { font-family: var(--f-bubble); font-weight: 600; font-size: 1.05rem; }
.announce-sub { font-size: 0.84rem; color: var(--ink-soft); }
.announce-new { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: #fff; color: var(--hot-d); font-family: var(--f-bubble); font-weight: 700; font-size: 0.72rem; letter-spacing: .06em; box-shadow: 0 0 0 2px #F5B4D6; }

/* Menu: a row of picture tiles with arrows, like the old Cartoon Network site */
.topnav {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  margin-bottom: 12px; padding: 10px 12px; border-radius: 18px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF3F9 100%);
  box-shadow: inset 0 0 0 2px #F6CFE3, 0 4px 0 #F2C2DB, 0 8px 18px rgba(190, 70, 140, .12);
}
.topnav.has-logo { grid-template-columns: auto auto minmax(0, 1fr) auto; }
.topnav-logo { display: block; padding: 0 6px 0 2px; }
.topnav-logo img { display: block; width: 150px; height: auto; filter: drop-shadow(0 2px 0 #fff) drop-shadow(0 4px 10px rgba(190, 40, 120, .25)); }
.tn-arrow {
  position: relative; overflow: hidden; width: 44px; height: 76px; padding: 0; border: 0; border-radius: 12px; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, #6A4BAA 0%, #43267E 49%, #2E175F 51%, #452A82 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.28), 0 3px 0 var(--night), 0 6px 12px rgba(30, 16, 64, .3);
  transition: filter .15s ease, opacity .15s ease;
}
.tn-arrow::before { content: ""; position: absolute; left: 10%; right: 10%; top: 3px; height: 42%; border-radius: 9px 9px 40% 40%; background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.05)); pointer-events: none; }
.tn-arrow svg { position: relative; width: 26px; height: 26px; filter: drop-shadow(0 1px 0 var(--night)); }
.tn-next svg { transform: scaleX(-1); }
.tn-arrow:hover:not(:disabled) { background: linear-gradient(180deg, #FA95C6 0%, #E9529C 49%, #D63E8A 51%, #EE6FAE 100%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 3px 0 var(--hot-d), 0 6px 12px rgba(174, 23, 108, .3); }
.tn-arrow:disabled { opacity: .4; cursor: default; }
.tn-track {
  list-style: none; margin: 0; padding: 4px 4px 2px; min-width: 0;
  display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-behavior: smooth; scrollbar-width: none;
}
.tn-track::-webkit-scrollbar { display: none; }
.tn-track > li { flex: none; scroll-snap-align: start; }
.tn-item { display: grid; justify-items: center; gap: 6px; min-width: 86px; padding-top: 2px; color: var(--ink); text-decoration: none; border-radius: 14px; }
.tn-tile {
  position: relative; overflow: hidden; display: grid; place-items: center; width: 78px; height: 78px;
  border-radius: 18px; border: 3px solid #fff; background: var(--tb, var(--iri));
  box-shadow: 0 0 0 1.5px var(--tr, #E5C3EE), 0 4px 0 var(--td, #B98AD4), 0 7px 12px rgba(110, 50, 120, .2);
  transition: transform .15s ease, box-shadow .15s ease;
}
.tn-tile::before { content: ""; position: absolute; z-index: 2; left: 6%; right: 6%; top: 2px; height: 44%; border-radius: 12px 12px 40% 40%; background: linear-gradient(rgba(255,255,255,.62), rgba(255,255,255,.04)); pointer-events: none; }
.tn-tile::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(circle at 80% 24%, #fff 0 3%, transparent 4.5%), radial-gradient(circle at 18% 80%, rgba(255,255,255,.85) 0 2.5%, transparent 4%); }
.tile-icon { position: relative; z-index: 1; width: 42px; height: 42px; color: #fff; filter: drop-shadow(0 2px 0 var(--td, #B98AD4)); }
.tile-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.42); }
.tile-bfly { position: relative; z-index: 1; width: 70px; height: 66px; overflow: visible; filter: drop-shadow(0 0 6px rgba(255, 236, 190, .9)); }
.tile-bfly .wings { transform-origin: 100px 90px; animation: flap .9s ease-in-out infinite alternate; }
.tn-label { font-family: var(--f-bubble); font-weight: 600; font-size: 0.8rem; line-height: 1.1; white-space: nowrap; }
.tn-item:hover .tn-tile { transform: translateY(-3px) rotate(-3deg); }
.tn-item:hover .tn-label { color: var(--hot-d); }
.tn-item[aria-current="page"] .tn-tile { box-shadow: 0 0 0 3px var(--hot), 0 4px 0 var(--hot-d), 0 0 18px rgba(238, 74, 159, .6); }
.tn-item[aria-current="page"] .tn-label { color: var(--hot-d); }
.tile-home { --tb: radial-gradient(circle at 50% 50%, rgba(255,255,255,.85) 0 18%, transparent 55%), linear-gradient(150deg, #FFC7E3 0%, #DDC2FF 55%, #C2DEFF 100%); --tr: #E5C3EE; --td: #B98AD4; }
.tile-winx-lore { --tb: linear-gradient(150deg, #FFB2DA 0%, #EE4A9F 100%); --tr: #F07DB8; --td: #AE176C; }
.tile-collections { --tb: linear-gradient(150deg, #DFC7FC 0%, #9A69E2 100%); --tr: #B793EC; --td: #643AB3; }
.tile-tech, .tile-tiktok { --tb: repeating-linear-gradient(to bottom, rgba(155,239,250,.1) 0 2px, transparent 2px 4px), linear-gradient(160deg, #4A2C8A 0%, #160B33 100%); --tr: #6B52A6; --td: var(--night); }
.tile-tech .tile-icon, .tile-tiktok .tile-icon { filter: drop-shadow(-2px 0 0 var(--glow-c)) drop-shadow(2px 0 0 var(--glow-m)); }
.tile-deenas-diary { --tb: linear-gradient(150deg, #CED5FF 0%, #7D8CEF 100%); --tr: #A3AEF6; --td: var(--peri-d); }
.tile-shop { --tb: linear-gradient(150deg, #FFC4DF 0%, #EF68A9 100%); --tr: #F493C2; --td: var(--pink-d); }
.tile-about { --tb: #F49CC6; --tr: #F493C2; --td: var(--pink-d); }
.tile-links { --tb: linear-gradient(150deg, #CAECFF 0%, #58B2EB 100%); --tr: #8CCBF2; --td: var(--sky-d); }
.tile-instagram { --tb: linear-gradient(150deg, #FF9DD0 0%, #AE7AEA 100%); --tr: #D597E0; --td: #7A4BC4; }
.tile-youtube { --tb: linear-gradient(150deg, #FFA3CD 0%, #D62E86 100%); --tr: #EE7AB5; --td: #9E1660; }
.tile-star { --tb: var(--iri); --tr: #E5C3EE; --td: #B98AD4; }

/* Home page header: logo and tagline over the slideshow, which drifts slowly and fades into the pink */
.masthead {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr); align-items: center;
  min-height: 420px; border-radius: 22px;
  background: linear-gradient(100deg, #F7C0DC 0%, #FCE4F0 50%, #FFF0F7 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.9);
}
.mast-bg { position: absolute; inset: 0; z-index: 0; }
.mast-bg::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, #F8C4DF 0%, rgba(248, 196, 223, .95) 22%, rgba(250, 210, 231, .6) 40%, rgba(252, 226, 240, 0) 60%),
    linear-gradient(180deg, rgba(253, 230, 242, .85) 0%, rgba(253, 230, 242, 0) 18%, rgba(253, 230, 242, 0) 78%, rgba(253, 230, 242, .95) 100%),
    linear-gradient(270deg, rgba(253, 230, 242, .9) 0%, rgba(253, 230, 242, 0) 14%);
}
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.hero-slide.is-active { opacity: 1; z-index: 1; }
.hero-slide:not(.is-active) { pointer-events: none; }
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; display: block; transform-origin: 70% 50%; transform: scale(1.04); }
.hero-slide.is-active .hero-media, .hero-slide.is-leaving .hero-media { animation: dd-drift var(--dur, 7.5s) linear forwards; }
.hero-slide:nth-child(3n+2).is-active .hero-media, .hero-slide:nth-child(3n+2).is-leaving .hero-media { animation-name: dd-drift-2; }
.hero-slide:nth-child(3n+3).is-active .hero-media, .hero-slide:nth-child(3n+3).is-leaving .hero-media { animation-name: dd-drift-3; }
.masthead.is-paused .hero-media { animation-play-state: paused; }
@keyframes dd-drift { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.15) translate3d(-2.5%, -1%, 0); } }
@keyframes dd-drift-2 { from { transform: scale(1.15) translate3d(-2%, 1%, 0); } to { transform: scale(1.04) translate3d(1.5%, 0, 0); } }
@keyframes dd-drift-3 { from { transform: scale(1.05) translate3d(2%, 1%, 0); } to { transform: scale(1.16) translate3d(-1%, -1.5%, 0); } }
.hero-link { position: absolute; inset: 0; z-index: 3; display: block; }
.glint {
  position: absolute; z-index: 3; width: var(--g, 22px); height: var(--g, 22px); pointer-events: none;
  background: radial-gradient(circle, #fff 0 14%, rgba(255,255,255,.7) 26%, transparent 60%);
  animation: twinkle 3s ease-in-out infinite;
}
.glint::before, .glint::after { content: ""; position: absolute; left: 50%; top: -80%; width: 2px; height: 260%; margin-left: -1px; background: linear-gradient(transparent, #fff 45%, #fff 55%, transparent); }
.glint::after { transform: rotate(90deg); }
@keyframes twinkle { 0%, 100% { opacity: .35; transform: scale(.65); } 50% { opacity: 1; transform: scale(1.1); } }
.g1 { top: 10%; left: 6%; --g: 34px; }
.g2 { top: 22%; left: 30%; --g: 22px; animation-delay: .7s; }
.g3 { top: 50%; left: 8%; --g: 28px; animation-delay: 1.4s; }
.g4 { top: 74%; left: 34%; --g: 18px; animation-delay: .3s; }
.g5 { top: 84%; left: 10%; --g: 24px; animation-delay: 2s; }
.g6 { top: 8%; left: 42%; --g: 16px; animation-delay: 2.5s; }
.g7 { top: 40%; left: 38%; --g: 14px; animation-delay: 1.1s; }
.mast-brand { position: relative; z-index: 3; grid-column: 1; display: grid; align-content: center; justify-items: center; gap: 10px; padding: 30px 20px 48px; text-align: center; }
.mast-logo { display: block; }
.mast-logo img, .mast-brand .custom-logo { display: block; width: min(320px, 100%); height: auto; filter: drop-shadow(0 4px 0 #fff) drop-shadow(0 10px 20px rgba(190, 40, 120, .3)); }
.mast-slogan { font-family: var(--f-script); font-weight: 700; font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.6rem); line-height: 1.05; color: var(--hot-d); text-shadow: 0 2px 0 #fff, 0 0 18px rgba(255, 255, 255, .9); }
.mast-intro { max-width: 30ch; font-size: 0.95rem; line-height: 1.45; color: var(--ink); text-shadow: 0 1px 0 rgba(255,255,255,.8); }
.mast-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.masthead .hero-controls { position: absolute; z-index: 4; right: 16px; bottom: 14px; padding: 6px 8px 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .7); box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 4px 10px rgba(174, 23, 108, .15); }

/* Title at the top of posts, pages and channels */
.entry-head { display: grid; justify-items: center; gap: 10px; max-width: 780px; margin: 0 auto 26px; text-align: center; }
.entry-kicker { font-family: var(--f-bubble); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c, var(--lilac-d)); }
.entry-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; font-size: 0.88rem; color: var(--ink-soft); }
.entry-meta a.tag { text-decoration: none; }
.entry-title { max-width: 26ch; font-family: var(--f-bubble); font-weight: 600; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); line-height: 1.1; color: var(--c, var(--hot-d)); overflow-wrap: anywhere; }
.entry-desc { max-width: 52ch; font-size: 1rem; color: var(--ink); }
.entry-head::after { content: "✦  ✧  ✦"; white-space: pre; font-size: 0.85rem; letter-spacing: .3em; color: var(--c, var(--lilac)); opacity: .55; }
.head-tech .entry-title { color: var(--night-2); text-shadow: -2px 0 var(--glow-c), 2px 0 var(--glow-m); }

/* Buttons in the 2000s "login" style */
.pill {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0.5em 1.15em; border-radius: 999px; border: 2px solid #fff;
  font-family: var(--f-bubble); font-weight: 600; font-size: 1rem; line-height: 1.15; color: #fff; text-decoration: none;
  text-shadow: 0 1px 0 #A9206A;
  background: linear-gradient(to bottom, #FA95C6 0%, #E9529C 49%, #D63E8A 51%, #EE6FAE 100%);
  box-shadow: 0 0 0 1px #E07FB2, 0 3px 0 #B3256F, 0 5px 10px rgba(180, 40, 110, .28);
  transition: transform .12s ease, filter .12s ease;
}
.pill::before { content: ""; position: absolute; left: 8%; right: 8%; top: 2px; height: 44%; border-radius: 999px; background: linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.1)); pointer-events: none; }
.pill > * { position: relative; }
.pill:hover { transform: translateY(-1px); filter: brightness(1.06); }
.pill:active { transform: translateY(2px); }
.pill-lilac { text-shadow: 0 1px 0 #55309A; background: linear-gradient(to bottom, #CDAAF6 0%, #A47AE6 49%, #8D62D6 51%, #B48CEC 100%); box-shadow: 0 0 0 1px #B494E4, 0 3px 0 #5E3BA6, 0 5px 10px rgba(94, 59, 166, .28); }
.pill-night { text-shadow: -1px 0 var(--glow-c), 1px 0 var(--glow-m); background: linear-gradient(to bottom, #6D52A8 0%, #4B2E8E 49%, #3A2178 51%, #5A3D98 100%); box-shadow: 0 0 0 1px #7C66B4, 0 3px 0 var(--night), 0 5px 10px rgba(30, 16, 64, .3); }
.pill[aria-current="page"] { background: linear-gradient(to bottom, #CDAAF6 0%, #A47AE6 49%, #8D62D6 51%, #B48CEC 100%); text-shadow: 0 1px 0 #55309A; box-shadow: 0 0 0 1px #B494E4, 0 3px 0 #5E3BA6, 0 0 14px rgba(167, 123, 234, .6); }
.pill[aria-current="page"]::after { content: " ✦"; position: relative; }
.pill-sm { font-size: 0.86rem; padding: 0.42em 0.9em; }
.pill .icon { width: 16px; height: 16px; }

/* ---------- The blue body ---------- */
.portal {
  margin-top: 12px;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "main"; gap: 16px;
  padding: 16px; border-radius: 22px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='280'%20height='280'%20viewBox='0%200%20280%20280'%3E%3Cg%20fill='white'%3E%3Cpath%20fill-opacity='.2'%20d='M70%2096c-16-26-58-12-48%2020%208%2024%2048%2050%2048%2050s40-26%2048-50c10-32-32-46-48-20z'/%3E%3Cpath%20fill-opacity='.14'%20transform='rotate%2818%20210%20200%29'%20d='M210%20176c-12-20-44-9-36%2015%206%2018%2036%2038%2036%2038s30-20%2036-38c8-24-24-35-36-15z'/%3E%3Cpath%20fill-opacity='.16'%20transform='rotate%28-14%20205%2060%29'%20d='M205%2046c-8-13-29-6-24%2010%204%2012%2024%2025%2024%2025s20-13%2024-25c5-16-16-23-24-10z'/%3E%3Cpath%20fill-opacity='.12'%20d='M60%20226c-7-11-25-5-21%209%203%2010%2021%2022%2021%2022s18-12%2021-22c4-14-14-20-21-9z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 280px 280px, linear-gradient(180deg, #6E9FBA 0%, #88B8CF 30%, #A6D0E2 70%, #C3E3EF 100%);
  box-shadow: inset 0 3px 10px rgba(20, 60, 90, .3), inset 0 0 0 1px rgba(255,255,255,.4);
}
.portal.has-side { grid-template-columns: 270px minmax(0, 1fr); grid-template-areas: "rest main"; }
.side-rest { grid-area: rest; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.main { grid-area: main; min-width: 0; display: grid; gap: 18px; align-content: start; }

/* Sidebar boxes */
.sbox {
  position: relative; overflow: hidden; padding: 16px; border-radius: 20px;
  background: #fff; border: 4px solid #A9D0E2;
  box-shadow: 0 0 0 2px rgba(255,255,255,.75), 0 5px 12px rgba(20, 60, 90, .2);
}
.sbox-pink { background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='26'%20height='26'%3E%3Ccircle%20cx='4'%20cy='4'%20r='1.6'%20fill='%23F7C3DD'/%3E%3Ccircle%20cx='17'%20cy='17'%20r='1.2'%20fill='%23F7C3DD'/%3E%3C/svg%3E") 0 0 / 26px 26px, #FDEAF4; border-color: #F4B7D6; }
.sbox-title { font-family: var(--f-bubble); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase; color: #3F7896; margin-bottom: 10px; }
.sbox-hand { font-family: var(--f-script); font-weight: 700; font-size: 1.7rem; line-height: 1; color: var(--hot-d); margin-bottom: 12px; }
.join-q { font-family: var(--f-script); font-weight: 700; font-size: 1.5rem; line-height: 1.1; color: var(--ink); }
.join-a { margin-top: 4px; font-size: 0.95rem; color: var(--ink); }
.join-a b { font-family: var(--f-bubble); font-weight: 600; font-size: 1.15rem; color: var(--hot-d); }
.join-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sbox-shop { text-align: center; }
.shop-hand { font-family: var(--f-script); font-weight: 700; font-size: 2.3rem; line-height: 1; color: var(--hot-d); text-shadow: 2px 2px 0 #fff; transform: rotate(-3deg); }
.shop-kicker { margin-top: 6px; font-family: var(--f-bubble); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lilac-d); }
.shop-list { list-style: none; margin: 10px 0 14px; padding: 0; display: grid; gap: 4px; font-weight: 700; font-size: 0.95rem; color: var(--ink); }
.shop-list li::before { content: "♥ "; color: var(--pink); }
.flowers { position: absolute; color: #F7A8CF; font-size: 1.8rem; line-height: 1; opacity: .8; pointer-events: none; }
.flowers.f1 { top: 8px; right: 10px; }
.flowers.f2 { bottom: 8px; left: 10px; font-size: 1.4rem; color: #F2BDE0; }
.sbox-search .sbox-title { display: block; }
.search-row { display: flex; gap: 8px; align-items: center; }
.search-row input {
  flex: 1; min-width: 0; padding: 0.5em 0.9em; border-radius: 999px; border: 2px solid #A9D0E2; background: #EEF7FC; color: var(--ink);
  box-shadow: inset 0 2px 4px rgba(20, 60, 90, .12);
}
.search-row input::placeholder { color: #7E97A8; }
.search-row input:focus { outline: none; border-color: var(--pink); background: #fff; box-shadow: 0 0 0 3px rgba(242, 123, 190, .25); }
.search-row .pill { cursor: pointer; flex: none; }
.sbox-pick { text-align: center; border-color: #CDB4F2; background: linear-gradient(180deg, #F6EEFF 0%, #fff 60%); }
.pick-hand { font-family: var(--f-script); font-weight: 700; font-size: 2rem; line-height: 1; color: var(--lilac-d); text-shadow: 2px 2px 0 #fff; transform: rotate(-3deg); margin-bottom: 10px; }
.pick-img { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; text-decoration: none; box-shadow: 0 0 0 3px #fff, 0 3px 8px rgba(100, 60, 170, .25); }
.pick-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pick-new { position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: 999px; background: var(--hot); color: #fff; font-family: var(--f-bubble); font-weight: 700; font-size: 0.7rem; letter-spacing: .06em; box-shadow: 0 0 0 2px #fff; transform: rotate(6deg); }
.pick-title { margin-top: 12px; font-family: var(--f-bubble); font-weight: 600; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .02em; color: var(--lilac-d); }
.pick-text { margin: 4px 0 12px; font-size: 0.9rem; color: var(--ink); }
.sbox-onair {
  flex: 1; padding-bottom: 120px;
  background:
    radial-gradient(ellipse 70% 120px at 50% 100%, #FCE3F0 0%, rgba(252, 227, 240, 0) 100%),
    #fff;
}
.sbox-onair::after {
  content: "✿  ❀  ✿"; white-space: pre; position: absolute; left: 0; right: 0; bottom: 18px; text-align: center;
  font-size: 1.6rem; letter-spacing: .2em; color: #F4A9CE; opacity: .85; pointer-events: none;
}
.sbox-onair::before {
  content: ""; position: absolute; left: 50%; bottom: 56px; width: 70px; height: 66px; margin-left: -35px; pointer-events: none;
  background: radial-gradient(circle, #fff 0 14%, rgba(255,255,255,.7) 26%, transparent 60%);
  filter: drop-shadow(0 0 6px rgba(244, 169, 206, .9));
}
.onair-in { position: sticky; top: 16px; }
.onair-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.onair { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; border-radius: 14px; background: #F1F8FC; color: var(--ink); text-decoration: none; }
.onair:hover { background: #E3F1F8; }
.onair .social-icon { width: 36px; height: 36px; }
.onair .social-icon .icon { width: 18px; height: 18px; }
.onair-text { display: grid; min-width: 0; font-size: 0.78rem; color: var(--ink-soft); }
.onair-text b { font-family: var(--f-bubble); font-weight: 600; font-size: 1rem; color: var(--ink); }
.onair-count { display: grid; justify-items: end; font-size: 0.7rem; color: var(--ink-soft); }
.onair-count b { font-family: var(--f-bubble); font-weight: 600; font-size: 1.25rem; line-height: 1; color: var(--hot-d); }
.onair-total { margin-top: 12px; font-size: 0.92rem; color: var(--ink); }
.onair-total b { font-family: var(--f-bubble); font-weight: 600; color: #3F7896; font-size: 1.1rem; }
.counts-note { margin-top: 4px; font-size: 0.72rem; color: var(--ink-soft); }

/* Colours for cards and wide boxes */
.c-magenta { --c: #D7438F; --bg: #FFF1F7; }
.c-rose    { --c: #EE6CA8; --bg: #FFF2F8; }
.c-purple  { --c: #8B5FCB; --bg: #F6F0FF; }
.c-teal    { --c: #4C85A4; --bg: #EEF7FB; }
.c-sky     { --c: #4AA6DB; --bg: #EEF8FF; }

/* Feature cards: picture, coloured title, text, link */
.fcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fcard {
  min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 16px;
  background: #fff; border: 7px solid var(--c); border-radius: 24px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.8), 0 6px 14px rgba(20, 60, 90, .2);
}
.fcard-img { text-decoration: none; position: relative; display: grid; place-items: center; aspect-ratio: 16 / 8; max-width: 100%; overflow: hidden; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }
.fcard-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fcard-ch { position: absolute; top: 8px; left: 8px; padding: 4px 8px; border-radius: 6px; background: rgba(255,255,255,.9); color: var(--c); font-family: var(--f-bubble); font-weight: 700; font-size: 0.7rem; letter-spacing: .08em; }
.fcard-title { margin-top: 4px; font-family: var(--f-bubble); font-weight: 600; font-size: 1.2rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--c); }
.fcard-title small { font-size: 0.7rem; letter-spacing: .06em; color: var(--ink-soft); }
.fcard p { font-size: 0.95rem; line-height: 1.5; color: var(--ink); }
.fcard .more { margin-top: auto; padding-top: 4px; }
.more { color: #D0157A; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.more:hover { color: var(--lilac-d); }

/* Wide boxes with rows */
.wbox {
  min-width: 0; padding: 16px 20px 18px; border-radius: 24px; border: 7px solid var(--c);
  background: linear-gradient(180deg, #fff 0%, var(--bg) 100%);
  box-shadow: 0 0 0 2px rgba(255,255,255,.8), 0 6px 14px rgba(20, 60, 90, .2);
}
.wbox-title { margin-bottom: 4px; font-family: var(--f-bubble); font-weight: 600; font-size: 1.3rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--c); }
.wbox-title small { margin-left: 8px; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--ink-soft); }
.wbox-intro { margin-bottom: 12px; color: var(--ink); }
.wbox-empty { padding: 12px 0 4px; color: var(--ink); }
.wbox-foot { margin-top: 10px; text-align: right; }
.wrow { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; align-items: start; padding: 14px 0; border-top: 2px solid color-mix(in srgb, var(--c) 30%, transparent); }
.wbox-title + .wrow, .wbox-intro + .wrow { border-top: 0; }
.wrow-img { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; max-width: 100%; overflow: hidden; border-radius: 14px; box-shadow: 0 0 0 3px #fff, 0 3px 8px rgba(20, 60, 90, .2); text-decoration: none; }
.wrow-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wrow-img .glyph { font-size: 2.4rem; }
.wrow-body { min-width: 0; display: grid; gap: 4px; align-content: start; }
.wrow-body .tag { justify-self: start; }
.wrow-title { font-family: var(--f-bubble); font-weight: 600; font-size: 1.08rem; line-height: 1.25; letter-spacing: 0.02em; text-transform: uppercase; }
.wrow-title a { color: var(--c); text-decoration: none; }
.wrow-title a:hover { text-decoration: underline; }
.wrow-text { font-size: 0.95rem; line-height: 1.5; color: var(--ink); }
.wrow-foot { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; font-size: 0.86rem; }
.wrow-date { color: var(--ink-soft); }
.sample-note { margin-top: 8px; font-size: 0.76rem; color: var(--ink-soft); }

/* About me */
.about-grid { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 10px; }

/* Post box */
.post-box {
  min-width: 0; padding: clamp(16px, 4vw, 40px) clamp(14px, 4vw, 44px); border-radius: 24px; border: 7px solid var(--c);
  background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.8), 0 6px 14px rgba(20, 60, 90, .2);
}
.post-box .entry-content { max-width: 68ch; margin-inline: auto; }
.entry-feature { max-width: 68ch; margin: 0 auto 28px; overflow: hidden; border-radius: 16px; box-shadow: 0 0 0 3px #fff, 0 0 0 5px color-mix(in srgb, var(--c) 35%, transparent), 0 8px 18px rgba(20, 60, 90, .18); }
.entry-feature img { display: block; width: 100%; height: auto; border-radius: 0; }
.entry-back { margin-top: 14px; text-align: center; }

/* Footer strip */
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 12px; padding: 14px 10px 4px; border-top: 2px solid #F6CDE2; font-size: 0.86rem; color: var(--ink); }
.foot-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.foot-logo img { display: block; width: 120px; height: auto; }
.foot-right { display: grid; justify-items: end; gap: 6px; text-align: right; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 0; }
.foot-links a { color: #2E4E8F; text-decoration: underline; }
.foot-links a + a::before { content: "|"; display: inline-block; margin: 0 8px; color: var(--ink-soft); text-decoration: none; }
.foot-social { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 14px; }
.foot-social a { display: inline-flex; align-items: center; gap: 5px; color: var(--hot-d); font-weight: 700; text-decoration: none; }
.foot-social a:hover { text-decoration: underline; }
.foot-social .icon { width: 16px; height: 16px; }
.foot-mail { color: var(--ink-soft); }
.addr { font-weight: 700; color: var(--ink); user-select: all; overflow-wrap: anywhere; }

/* Marquee sits on the blue */
.marquee { overflow: hidden; white-space: nowrap; border-radius: 999px; border: 3px solid #fff; background: linear-gradient(90deg, var(--night), var(--night-2), var(--night)); box-shadow: 0 4px 10px rgba(20, 60, 90, .25); }

/* Slideshow dots and pause button */
.hero-controls { display: flex; align-items: center; justify-content: center; gap: 8px; }
.hero-dot { width: 13px; height: 13px; padding: 0; border-radius: 999px; cursor: pointer; border: 2px solid #fff; background: var(--line-2); box-shadow: 0 0 0 1px var(--lilac); transition: width .3s ease, background .3s ease; }
.hero-dot[aria-current="true"] { width: 30px; background: var(--hot); box-shadow: 0 0 0 1px var(--hot-d), 0 0 10px rgba(238, 74, 159, .5); }
.hero-pause { margin-left: 4px; width: 30px; height: 30px; padding: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; border: 2px solid #fff; background: var(--lilac); color: #fff; font-size: 0.62rem; box-shadow: 0 0 0 1px var(--lilac-d); }
.hero-pause .hp-play { display: none; font-size: 0.75rem; padding-left: 2px; }
.hero-pause[aria-pressed="true"] .hp-pause { display: none; }
.hero-pause[aria-pressed="true"] .hp-play { display: inline; }

/* Post cards (channel pages, search, "more from") */
.pcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.pcard { min-width: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: #fff; border: 3px solid #fff; box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 35%, transparent), 0 6px 14px rgba(20, 60, 90, .14); transition: transform .15s ease; }
.pcard:hover { transform: translateY(-2px); }
.pcard-img { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; max-width: 100%; overflow: hidden; text-decoration: none; }
.pcard-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pcard-img .glyph { font-size: 2.4rem; }
.pcard-body { flex: 1; display: grid; gap: 6px; align-content: start; padding: 12px 14px 14px; }
.pcard-body .tag { justify-self: start; }
.pcard-title { font-family: var(--f-bubble); font-weight: 600; font-size: 1.02rem; line-height: 1.25; letter-spacing: 0.02em; text-transform: uppercase; }
.pcard-title a { color: var(--c); text-decoration: none; }
.pcard-title a:hover { text-decoration: underline; }
.pcard-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 0.84rem; }
.list-box .pcards { margin-top: 0; }

/* Shared pieces */
.thumb-winx-lore, .thumb-other { background: radial-gradient(circle at 25% 30%, #fff 0 5%, transparent 6%), linear-gradient(150deg, #FFDAEE, #F48CC8); }
.thumb-collections { background: radial-gradient(circle at 72% 30%, #fff 0 5%, transparent 6%), linear-gradient(150deg, #F2E8FF, #B792F2); }
.thumb-tech { background: repeating-linear-gradient(to bottom, rgba(155,239,250,.08) 0 2px, transparent 2px 4px), linear-gradient(160deg, #2A1556, #120A2A); }
.thumb-tech .glyph { color: #fff; text-shadow: -2px 0 var(--glow-c), 2px 0 var(--glow-m); }
.thumb-deenas-diary { background: radial-gradient(circle at 70% 70%, #fff 0 5%, transparent 6%), linear-gradient(150deg, #E6E9FF, #98A6F6); }
.tag { display: inline-block; white-space: nowrap; font: 400 0.55rem/1 var(--f-pixel); letter-spacing: 0.05em; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; color: #fff; background: var(--pink-d); }
.tag-winx-lore { background: var(--hot-d); }
.tag-collections { background: var(--lilac-d); }
.tag-tech { background: var(--night); color: var(--glow-c); }
.tag-deenas-diary { background: var(--peri-d); }
.empty { text-align: center; padding: 24px 12px; border: 2px dashed var(--line-2); border-radius: 16px; background: #fff; }
.empty-title { font-family: var(--f-bubble); font-weight: 600; font-size: 1.5rem; color: var(--hot-d); margin-bottom: 4px; }
.pager { margin-top: 18px; }
.pager .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pager .page-numbers { display: inline-block; padding: 0.4em 0.9em; border-radius: 999px; border: 2px solid var(--line-2); background: #fff; color: var(--ink); text-decoration: none; font-weight: 700; }
.pager .page-numbers.current, .pager a.page-numbers:hover { background: var(--lilac); border-color: var(--lilac-d); color: #fff; }
.polaroid { margin: 4px 0 0; padding: 9px 9px 11px; background: #fff; border: 1px solid var(--line-2); transform: rotate(-4deg); box-shadow: 5px 7px 0 var(--pink), 0 10px 22px rgba(110, 70, 190, .2); }
.polaroid-img { position: relative; aspect-ratio: 4 / 5; max-width: 100%; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, #FFEAF4 0, transparent 45%), var(--iri); }
.polaroid-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.polaroid-d { font-family: var(--f-script); font-weight: 700; font-size: 6rem; line-height: 1; color: #fff; text-shadow: 0 3px 0 var(--pink-d), 0 0 20px rgba(255,255,255,.8); }
.polaroid figcaption { font-family: var(--f-script); font-weight: 700; font-size: 1.1rem; text-align: center; margin-top: 7px; }
.about-copy { min-width: 0; display: grid; gap: 14px; font-size: 0.95rem; }
.counts-note { font-size: 0.72rem; color: var(--ink-soft); }
/* Round icon badges for the social links */
.social-icon { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line-2), 0 4px 10px rgba(110, 70, 190, .2); }
.social-icon .icon { width: 22px; height: 22px; }
.find-tiktok .social-icon, .social-tiktok .social-icon { background: linear-gradient(150deg, #3A1F6E, #1E1040); color: var(--glow-c); }
.find-instagram .social-icon, .social-instagram .social-icon { background: linear-gradient(150deg, #F27BBE, #A77BEA); }
.find-youtube .social-icon, .social-youtube .social-icon { background: linear-gradient(150deg, #FF8AC4, #D62E86); }


.marquee-track { display: inline-flex; gap: 44px; padding: 10px 0 10px 22px; font: 400 0.72rem/1 var(--f-pixel); letter-spacing: 0.05em; animation: ticker 38s linear infinite; }
.marquee-track span:nth-child(5n+1) { color: var(--glow-c); }
.marquee-track span:nth-child(5n+2) { color: #FFA9D8; }
.marquee-track span:nth-child(5n+3) { color: #D6C2FF; }
.marquee-track span:nth-child(5n+4) { color: #A9D8FF; }
.marquee-track span:nth-child(5n+5) { color: #FFD1EC; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Carousels */
.carousel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.car-btn { width: 42px; height: 42px; padding: 0; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem; line-height: 1; }
.car-btn::before { border-radius: 50%; }
.car-btn:disabled { opacity: 0.35; cursor: default; transform: none; filter: none; }
.car-track {
  list-style: none; margin: 0; padding: 6px 4px 14px; min-width: 0;
  display: grid; grid-auto-flow: column; gap: 14px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: thin; scrollbar-color: var(--lilac) transparent;
}
.car-videos { grid-auto-columns: calc((100% - 56px) / 5); }
.car-tiktoks { grid-auto-columns: 325px; }
.car-track > li { scroll-snap-align: start; min-width: 0; }
.vid-link { display: grid; gap: 6px; color: var(--ink); text-decoration: none; }
.vid-thumb { position: relative; display: block; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; border-radius: 14px; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--line-2), 0 6px 14px rgba(110, 70, 190, .18); }
.vid-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vid-ch { position: absolute; left: 6px; top: 6px; z-index: 1; padding: 4px 6px; border-radius: 4px; font: 400 0.55rem/1 var(--f-pixel); letter-spacing: 0.04em; background: var(--night); color: var(--glow-c); }
.vid-play { position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%); width: 40px; height: 40px; padding-left: 3px; border-radius: 50%; display: grid; place-items: center; background: var(--hot); border: 2px solid #fff; color: #fff; font-size: 0.9rem; box-shadow: 0 3px 0 var(--hot-d), 0 0 14px rgba(255, 138, 208, .6); transition: transform .15s ease; }
.vid-link:hover .vid-play { transform: translate(-50%, -50%) scale(1.12); }
.vid-link[aria-current="true"] .vid-thumb { box-shadow: 0 0 0 3px var(--hot), 0 0 18px rgba(238, 74, 159, .5); }
.vid-link[aria-current="true"] .vid-ch { background: var(--hot); color: #fff; }
.vid-link[aria-current="true"] .vid-ch::after { content: " · ON AIR"; }
.vid-title { font-weight: 700; font-size: 0.86rem; line-height: 1.3; color: var(--link); }
.vid-link:hover .vid-title { text-decoration: underline; }
.vid-date { font-size: 0.72rem; color: var(--ink-soft); margin-top: -3px; }

/* TikTok */
.tt-frame {
  position: relative; display: grid; justify-items: center; gap: 8px;
  padding: 20px clamp(10px, 3vw, 28px); border-radius: 20px; border: 2px dashed var(--line-2);
  background: radial-gradient(circle, rgba(255,255,255,.95) 1.4px, transparent 2px) 0 0 / 22px 22px, linear-gradient(135deg, #FFE4F3, #F0E6FF 50%, #E2F1FF);
}
.tt-frame > .carousel { width: 100%; }
.tt-frame .tiktok-embed { margin: 0 !important; width: 100%; }
.tt-tw1 { top: 10px; left: 14px; color: var(--hot); text-shadow: none; }
.tt-tw2 { bottom: 12px; right: 16px; color: var(--lilac-d); text-shadow: none; animation-delay: 1s; }
.tt-card { width: 100%; max-width: 760px; display: grid; gap: 14px; padding: 16px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 2px var(--line), 0 8px 18px rgba(74, 166, 219, .15); }
.tt-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tt-avatar { width: 56px; height: 56px; flex: none; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--sky); }
.tt-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.35); }
.tt-who { flex: 1 1 150px; display: grid; min-width: 0; }
.tt-who b { font-family: var(--f-bubble); font-weight: 600; font-size: 1.1rem; color: var(--ink); }
.tt-who span { font-size: 0.85rem; color: var(--ink-soft); }
.tt-follow { margin-left: auto; }
.tt-row { grid-auto-columns: calc((100% - 60px) / 5); gap: 12px; padding: 6px 6px 8px; scroll-padding-inline: 6px; }
.tt-vid { display: grid; gap: 6px; color: var(--ink); text-decoration: none; }
.tt-thumb { position: relative; display: grid; place-items: center; aspect-ratio: 9 / 16; max-width: 100%; overflow: hidden; border-radius: 14px; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--line-2), 0 6px 14px rgba(110, 70, 190, .18); }
.tt-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tt-vid:hover .vid-play { transform: translate(-50%, -50%) scale(1.12); }
.tt-cap { font-size: 0.8rem; font-weight: 700; line-height: 1.3; color: var(--link); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tt-vid:hover .tt-cap { text-decoration: underline; }
.tt-empty { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; text-decoration: none; }
.tt-tile { aspect-ratio: 9 / 16; max-width: 100%; display: grid; place-items: center; border-radius: 14px; border: 3px solid #fff; color: #fff; font-size: 1.8rem; text-shadow: 0 2px 0 rgba(59,31,92,.2); box-shadow: 0 0 0 2px var(--line-2); opacity: .75; }
.tt-empty-cta { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; }
.tt-empty:hover .tt-empty-cta { filter: brightness(1.06); }

/* Shared pastel art backgrounds */
.art-0 { background: radial-gradient(circle at 28% 30%, #fff 0 7%, transparent 8%), linear-gradient(150deg, #FFD9EE, #F48CC8); }
.art-1 { background: radial-gradient(circle at 72% 26%, #fff 0 6%, transparent 7%), linear-gradient(150deg, #E0F3FF, #86CDF4); }
.art-2 { background: radial-gradient(circle at 30% 72%, #fff 0 7%, transparent 8%), linear-gradient(150deg, #F2E8FF, #B792F2); }
.art-3 { background: radial-gradient(circle at 70% 70%, #fff 0 6%, transparent 7%), linear-gradient(150deg, #E6E9FF, #98A6F6); }
.glyph { font-family: var(--f-body); font-size: 3rem; line-height: 1; color: #fff; text-shadow: 0 3px 0 rgba(59,31,92,.25), 0 0 16px rgba(255,255,255,.8); }


/* ---------- Posts and pages ---------- */
.entry-end { margin-top: 32px; text-align: center; letter-spacing: 0.6em; color: var(--lilac); }

/* ENTRY:START (copied into editor.css so the editor looks the same) */
.entry-content { min-width: 0; font-size: 1.06rem; line-height: 1.75; color: var(--ink); overflow-wrap: break-word; }
.entry-content > * + * { margin-top: 1.15em; }
.entry-content > :first-child { margin-top: 0; }
.entry-content h2 { margin-top: 1.6em; font-family: var(--f-bubble); font-weight: 600; font-size: 1.9rem; line-height: 1.15; color: var(--lilac-d); }
.entry-content h3 { margin-top: 1.5em; font-family: var(--f-bubble); font-weight: 600; font-size: 1.45rem; line-height: 1.2; color: var(--hot-d); }
.entry-content h4, .entry-content h5, .entry-content h6 { margin-top: 1.4em; font-size: 1.08rem; font-weight: 700; color: var(--ink); }
.entry-content a { color: var(--link); font-weight: 700; text-decoration-color: var(--pink); text-underline-offset: 3px; }
.entry-content a:hover { text-decoration-style: wavy; }
.entry-content strong, .entry-content b { color: var(--ink); }
.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-content li + li { margin-top: 0.35em; }
.entry-content li::marker { color: var(--hot); }
.entry-content blockquote, .entry-content .wp-block-quote { position: relative; margin: 1.6em 0; padding: 18px 22px 18px 58px; border: 0; border-radius: 16px; background: var(--lav); font-size: 1.08rem; }
.entry-content blockquote::before, .entry-content .wp-block-quote::before { content: "\201C"; position: absolute; left: 16px; top: 4px; font-family: var(--f-bubble); font-weight: 600; font-size: 3.4rem; line-height: 1; color: var(--hot); }
.entry-content blockquote p + p { margin-top: 0.8em; }
.entry-content cite, .entry-content .wp-block-quote cite { display: block; margin-top: 8px; font-size: 0.85rem; font-style: normal; color: var(--ink-soft); }
.entry-content .wp-block-pullquote { margin: 1.8em 0; padding: 22px 10px; border-block: 3px solid var(--pink); text-align: center; }
.entry-content .wp-block-pullquote blockquote { margin: 0; padding: 0; background: none; }
.entry-content .wp-block-pullquote blockquote::before { content: none; }
.entry-content .wp-block-pullquote p { font-family: var(--f-bubble); font-weight: 600; font-size: 1.7rem; line-height: 1.25; color: var(--hot-d); }
.entry-content img { border-radius: 14px; }
.entry-content figure { margin-inline: 0; }
.entry-content figcaption, .entry-content .wp-element-caption { margin-top: 8px; text-align: center; font-family: var(--f-script); font-weight: 700; font-size: 1.2rem; line-height: 1.3; color: var(--ink-soft); }
.entry-content .wp-block-image.is-style-rounded img { border-radius: 999px; }
.entry-content .wp-block-button__link, .entry-content .wp-element-button {
  display: inline-block; padding: 0.6em 1.4em; border-radius: 999px; border: 2px solid var(--hot-d);
  font-family: var(--f-bubble); font-weight: 600; font-size: 1.12rem; line-height: 1.2; text-decoration: none;
  color: #fff; text-shadow: 0 1px 0 var(--hot-d), 0 -1px 0 var(--hot-d), 1px 0 0 var(--hot-d), -1px 0 0 var(--hot-d);
  background: linear-gradient(to bottom, #F9A6D2 0%, var(--hot) 49%, #DC3A90 51%, #F269B2 100%);
  box-shadow: 0 3px 0 var(--hot-d), 0 6px 14px rgba(174, 23, 108, .25);
}
.entry-content .wp-block-button__link:hover { filter: brightness(1.06); text-decoration: none; }
.entry-content .is-style-outline .wp-block-button__link { background: #fff; color: var(--hot-d); text-shadow: none; }
.entry-content hr, .entry-content .wp-block-separator { border: 0; height: auto; margin: 2em auto; background: none; text-align: center; overflow: visible; opacity: 1; }
.entry-content hr::before, .entry-content .wp-block-separator::before { content: "\2726   \2727   \2726"; white-space: pre; letter-spacing: 0.3em; color: var(--lilac); font-size: 1.1rem; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.entry-content th, .entry-content td { padding: 8px 12px; border: 1px solid var(--line-2); text-align: left; }
.entry-content th, .entry-content thead td { background: var(--blush); color: var(--hot-d); }
.entry-content .wp-block-table { overflow-x: auto; }
.entry-content code { padding: 0.1em 0.4em; border-radius: 6px; background: var(--lav); font-size: 0.92em; }
.entry-content pre { overflow-x: auto; padding: 16px 18px; border-radius: 14px; background: var(--night); color: var(--glow-c); font-family: var(--f-term); font-size: 1.2rem; line-height: 1.3; }
.entry-content pre code { padding: 0; background: none; color: inherit; font-size: inherit; }
.entry-content iframe, .entry-content video, .entry-content embed { max-width: 100%; }
.entry-content .wp-block-embed { margin-block: 1.6em; }
.entry-content .wp-block-embed iframe { border-radius: 14px; }
.entry-content .wp-block-embed-tiktok .wp-block-embed__wrapper, .entry-content .wp-block-embed-instagram .wp-block-embed__wrapper { display: flex; justify-content: center; }
.entry-content .wp-block-gallery { gap: 10px; }
.entry-content .has-background { padding: 1.1em 1.4em; border-radius: 14px; }
.entry-content .alignleft { float: left; margin: 0.3em 1.4em 1em 0; max-width: 50%; }
.entry-content .alignright { float: right; margin: 0.3em 0 1em 1.4em; max-width: 50%; }
.entry-content .aligncenter { margin-inline: auto; text-align: center; }
.entry-content .wp-block-cover { border-radius: 16px; overflow: hidden; }
.entry-content details { padding: 12px 16px; border-radius: 14px; background: var(--mist); }
.entry-content summary { cursor: pointer; font-weight: 700; color: var(--sky-d); }
.entry-content::after { content: ""; display: table; clear: both; }
.has-plum-color { color: #3B1F5C !important; }
.has-hot-pink-color { color: #D62E86 !important; }
.has-bubblegum-color { color: #F27BBE !important; }
.has-lilac-color { color: #A77BEA !important; }
.has-deep-purple-color { color: #5B3A9E !important; }
.has-periwinkle-color { color: #8E9CF5 !important; }
.has-sky-color { color: #5DB8EE !important; }
.has-blush-color { color: #FFE3F1 !important; }
.has-lavender-mist-color { color: #F0E6FF !important; }
.has-sky-mist-color { color: #E3F3FF !important; }
.has-white-color { color: #FFFFFF !important; }
.has-plum-background-color { background-color: #3B1F5C !important; }
.has-hot-pink-background-color { background-color: #D62E86 !important; }
.has-bubblegum-background-color { background-color: #F27BBE !important; }
.has-lilac-background-color { background-color: #A77BEA !important; }
.has-deep-purple-background-color { background-color: #5B3A9E !important; }
.has-periwinkle-background-color { background-color: #8E9CF5 !important; }
.has-sky-background-color { background-color: #5DB8EE !important; }
.has-blush-background-color { background-color: #FFE3F1 !important; }
.has-lavender-mist-background-color { background-color: #F0E6FF !important; }
.has-sky-mist-background-color { background-color: #E3F3FF !important; }
.has-white-background-color { background-color: #FFFFFF !important; }
.has-fairy-dust-gradient-background { background: linear-gradient(135deg,#FFE3F1 0%,#F0E6FF 50%,#E3F3FF 100%) !important; }
.has-pink-lilac-gradient-background { background: linear-gradient(135deg,#F27BBE 0%,#A77BEA 100%) !important; }
.has-night-sky-gradient-background { background: linear-gradient(160deg,#1E1040 0%,#3A1F6E 100%) !important; }
.has-small-font-size { font-size: 14px !important; }
.has-normal-font-size { font-size: 17px !important; }
.has-large-font-size { font-size: 22px !important; }
.has-huge-font-size { font-size: 30px !important; line-height: 1.3; }
/* ENTRY:END */

/* Comments */
.comments-count, .comment-reply-title { font-family: var(--f-bubble); font-weight: 600; font-size: 1.4rem; color: var(--lilac-d); }
.comment-list { list-style: none; margin: 14px 0 24px; padding: 0; display: grid; gap: 12px; }
.comment-list .children { list-style: none; margin: 12px 0 0 24px; padding: 0; display: grid; gap: 12px; }
.comment-body { padding: 14px 16px; border-radius: 16px; background: #fff; border: 2px solid var(--line); }
.comment-author { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.comment-author .avatar { border-radius: 50%; border: 2px solid var(--line-2); }
.comment-author .says { display: none; }
.comment-metadata { margin: 2px 0 8px 54px; font-size: 0.75rem; }
.comment-metadata a { color: var(--ink-soft); text-decoration: none; }
.comment-content p + p { margin-top: 0.6em; }
.reply a { font-size: 0.8rem; font-weight: 700; }
.comment-form { display: grid; gap: 10px; margin-top: 10px; }
.comment-form label { display: block; font-weight: 700; font-size: 0.85rem; margin-bottom: 4px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
  width: 100%; padding: 9px 12px; border-radius: 10px; border: 2px solid var(--line-2); background: #fff; color: var(--ink);
}
.comment-form input:focus, .comment-form textarea:focus { outline: none; box-shadow: 0 0 0 3px var(--lav); border-color: var(--lilac); }
.comment-form .submit { color: #fff; }
.comment-notes, .logged-in-as { font-size: 0.82rem; color: var(--ink-soft); }

/* WooCommerce */
.woocommerce .woocommerce-products-header__title { display: none; }
.woocommerce ul.products li.product { padding: 10px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 2px var(--line); text-align: center; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--f-bubble); font-weight: 600; font-size: 1.15rem; color: var(--ink); }
.woocommerce ul.products li.product .price, .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--link); font-weight: 700; }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt {
  border-radius: 999px; border: 2px solid var(--hot-d); padding: 0.6em 1.3em;
  font-family: var(--f-bubble); font-weight: 600; font-size: 1.05rem; color: #fff;
  background: linear-gradient(to bottom, #F9A6D2 0%, var(--hot) 49%, #DC3A90 51%, #F269B2 100%);
  text-shadow: 0 1px 0 var(--hot-d);
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { color: #fff; filter: brightness(1.06); background: linear-gradient(to bottom, #F9A6D2 0%, var(--hot) 49%, #DC3A90 51%, #F269B2 100%); }
.woocommerce span.onsale { background: var(--hot); }
.woocommerce div.product .product_title { font-family: var(--f-bubble); font-weight: 600; color: var(--hot-d); }
.woocommerce-message, .woocommerce-info { border-top-color: var(--lilac); }
.woocommerce-message::before, .woocommerce-info::before { color: var(--lilac); }

/* Pop-up video player for the TV Guide */
.player { width: min(960px, 92vw); max-width: none; padding: 0; border: 0; background: transparent; overflow: visible; }
.player::backdrop { background: rgba(30, 16, 64, .72); backdrop-filter: blur(4px); }
.player-box { position: relative; padding: 10px; border-radius: 26px; background: var(--iri); box-shadow: 0 0 0 3px #fff, 0 20px 50px rgba(30, 16, 64, .5); }
.player-screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 18px; background: #000; }
.player-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player-close { position: absolute; top: -16px; right: -16px; z-index: 2; width: 46px; height: 46px; padding: 0; border-radius: 50%; display: grid; place-items: center; font-size: 1.7rem; line-height: 1; }
.player-close::before { border-radius: 50%; }


/* ---------- Sky behind everything: clouds and twinkles ---------- */
.sky-layer { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.sky-pan {
  position: absolute; top: 0; left: 0; height: 100%; aspect-ratio: 48 / 9; max-width: none;
  background: url("sky.jpg") repeat-x 0 0 / 33.3334% 100%;
  animation: sky-pan 300s linear infinite; will-change: transform;
}
@keyframes sky-pan { from { transform: translateX(0); } to { transform: translateX(-33.3334%); } }
.sky-glow { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 45% at 80% 0%, rgba(255, 240, 248, .45), transparent 70%); }
.twinkle {
  position: absolute; z-index: 1; width: var(--s); height: var(--s);
  background: radial-gradient(circle, #fff 0 18%, rgba(255, 228, 242, .7) 30%, transparent 62%);
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, .8));
  animation: twinkle 3.2s ease-in-out infinite; animation-delay: var(--d);
}
.twinkle::before, .twinkle::after { content: ""; position: absolute; left: 50%; top: -60%; width: 2px; height: 220%; margin-left: -1px; border-radius: 2px; background: linear-gradient(transparent, #fff 45%, #fff 55%, transparent); }
.twinkle::after { transform: rotate(90deg); }

/* ---------- Butterflies and sparkles floating over the page ---------- */
.fx-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.fx-layer { position: fixed; inset: 0; z-index: 40; overflow: hidden; pointer-events: none; }
.fly { position: absolute; left: 0; width: var(--size); height: calc(var(--size) * .95); will-change: transform; animation: var(--path) var(--dur) linear infinite; animation-delay: var(--delay); }
.path-a { --path: fly-a; }
.path-b { --path: fly-b; }
.path-c { --path: fly-c; }
.bfly { display: block; width: 100%; height: 100%; overflow: visible; opacity: .95; filter: drop-shadow(0 0 10px rgba(255, 236, 190, .8)) drop-shadow(0 6px 10px rgba(130, 60, 160, .22)); }
.bfly .wings { transform-origin: 100px 90px; animation: flap .5s ease-in-out infinite alternate; }
.wing-b { filter: hue-rotate(-24deg) drop-shadow(0 0 10px rgba(255, 236, 190, .8)) drop-shadow(0 6px 10px rgba(130, 60, 160, .22)); }
.wing-c { filter: hue-rotate(26deg) drop-shadow(0 0 10px rgba(255, 236, 190, .8)) drop-shadow(0 6px 10px rgba(130, 60, 160, .22)); }
@keyframes flap { from { transform: scaleX(1); } to { transform: scaleX(.42); } }
@keyframes fly-a {
  0% { transform: translate(-8vw, 0) rotate(18deg); }
  25% { transform: translate(24vw, -7vh) rotate(32deg); }
  50% { transform: translate(52vw, 3vh) rotate(10deg); }
  75% { transform: translate(80vw, -6vh) rotate(34deg); }
  100% { transform: translate(110vw, -2vh) rotate(22deg); }
}
@keyframes fly-b {
  0% { transform: translate(108vw, 0) rotate(-18deg); }
  25% { transform: translate(76vw, 6vh) rotate(-32deg); }
  50% { transform: translate(48vw, -4vh) rotate(-10deg); }
  75% { transform: translate(20vw, 5vh) rotate(-30deg); }
  100% { transform: translate(-10vw, -3vh) rotate(-20deg); }
}
@keyframes fly-c {
  0% { transform: translate(-6vw, 12vh) rotate(26deg); }
  30% { transform: translate(28vw, -2vh) rotate(38deg); }
  60% { transform: translate(62vw, -10vh) rotate(16deg); }
  100% { transform: translate(108vw, -22vh) rotate(30deg); }
}
.fx-spark {
  position: absolute; width: var(--s); height: var(--s); opacity: 0;
  background: radial-gradient(circle, #FFFBEA 0 18%, rgba(255, 220, 150, .8) 32%, transparent 64%);
  filter: drop-shadow(0 0 5px rgba(255, 226, 160, .9));
  animation: sparkle-float 7s ease-in-out infinite; animation-delay: var(--d);
}
.fx-spark::before, .fx-spark::after { content: ""; position: absolute; left: 50%; top: -70%; width: 2px; height: 240%; margin-left: -1px; border-radius: 2px; background: linear-gradient(transparent, #FFF6D8 45%, #F6D88E 55%, transparent); }
.fx-spark::after { transform: rotate(90deg); }
@keyframes sparkle-float {
  0% { opacity: 0; transform: translateY(14px) scale(.4) rotate(0deg); }
  45% { opacity: 1; transform: translateY(-6px) scale(1) rotate(45deg); }
  100% { opacity: 0; transform: translateY(-34px) scale(.4) rotate(90deg); }
}


/* ---------- Link in bio page (deardeena.com/links) ---------- */
.lb { position: relative; z-index: 1; max-width: 580px; margin: 0 auto; padding-block: 84px 40px; }
.lb-card {
  position: relative; display: grid; gap: 18px; padding: 0 22px 22px; text-align: center;
  border-radius: 32px; border: 3px solid transparent;
  background: linear-gradient(rgba(255, 249, 253, .9), rgba(255, 249, 253, .9)) padding-box, var(--iri) border-box;
  box-shadow: 0 0 0 4px rgba(255,255,255,.6), 0 16px 40px rgba(150, 60, 140, .22);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.lb-head { display: grid; justify-items: center; gap: 8px; }
.lb-photo-ring { display: block; width: 142px; height: 142px; margin-top: -72px; padding: 5px; border-radius: 50%; background: var(--iri); box-shadow: 0 0 0 4px #fff, 0 0 34px rgba(255, 140, 205, .75); }
.lb-photo { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.lb-logo { display: block; margin-top: 6px; }
.lb-logo img { display: block; width: 210px; max-width: 70vw; height: auto; filter: drop-shadow(0 3px 0 #fff) drop-shadow(0 6px 14px rgba(214, 46, 134, .28)); }
.lb-slogan { font-family: var(--f-script); font-weight: 700; font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.4rem); line-height: 1.05; color: var(--hot-d); text-shadow: 0 2px 0 #fff, 0 0 20px rgba(255, 150, 210, .6); }
.lb-intro { max-width: 34ch; font-size: 0.92rem; line-height: 1.45; color: var(--ink-soft); }
.lb-socials { display: flex; justify-content: center; gap: 22px; margin-top: 8px; }
.lb-social { display: grid; justify-items: center; gap: 4px; text-decoration: none; color: var(--ink); }
.lb-social .social-icon { width: 50px; height: 50px; transition: transform .15s ease; }
.lb-social .social-icon .icon { width: 24px; height: 24px; }
.lb-social:hover .social-icon { transform: translateY(-2px) scale(1.06); }
.lb-social-name { font-family: var(--f-bubble); font-weight: 600; font-size: 0.82rem; }

.lb-links { display: grid; gap: 12px; }
.lb-btn {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
  min-height: 62px; padding: 10px 18px 10px 10px; border-radius: 999px; border: 2px solid #fff;
  background: linear-gradient(to bottom, #FFFFFF 0%, #FFF0F8 50%, #FBE3F4 100%);
  box-shadow: 0 0 0 2px var(--line-2), 0 8px 18px rgba(110, 70, 190, .16);
  color: var(--ink); text-decoration: none; font-family: var(--f-bubble); font-weight: 600; font-size: 1.06rem; line-height: 1.2;
  transition: transform .15s ease, box-shadow .15s ease;
}
.lb-btn:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--lilac), 0 12px 24px rgba(110, 70, 190, .24); }
.lb-btn-icon { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(150deg, var(--pink), var(--lilac)); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line-2); }
.lb-btn-icon .icon { width: 21px; height: 21px; }
.lb-btn-text { min-width: 0; text-align: center; overflow-wrap: anywhere; }
.lb-btn-go { font-size: 1.6rem; line-height: 1; color: var(--lilac); }
.lb-new { padding: 4px 9px; border-radius: 999px; background: #fff; color: var(--hot-d); font-family: var(--f-bubble); font-weight: 700; font-size: 0.7rem; line-height: 1; letter-spacing: 0.06em; text-shadow: none; box-shadow: 0 0 0 1px rgba(255,255,255,.6); }
.lb-btn.is-featured {
  border-color: var(--hot-d); color: #fff;
  text-shadow: 0 1px 0 var(--hot-d), 0 -1px 0 var(--hot-d), 1px 0 0 var(--hot-d), -1px 0 0 var(--hot-d);
  background: linear-gradient(to bottom, #F9A6D2 0%, var(--hot) 49%, #DC3A90 51%, #F269B2 100%);
  box-shadow: 0 4px 0 var(--hot-d), 0 0 24px rgba(238, 74, 159, .45);
}
.lb-btn.is-featured::before { content: ""; position: absolute; left: 6%; right: 6%; top: 3px; height: 44%; border-radius: 999px; background: linear-gradient(rgba(255,255,255,.75), rgba(255,255,255,.08)); pointer-events: none; }
.lb-btn.is-featured::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.7), transparent); transform: skewX(-18deg); animation: lb-shine 3.6s ease-in-out infinite; pointer-events: none; }
.lb-btn.is-featured .lb-btn-icon { background: #fff; color: var(--hot); border-color: #fff; box-shadow: none; }
.lb-btn.is-featured .lb-btn-go { color: #fff; }
.lb-btn.is-featured > * { position: relative; z-index: 1; }
@keyframes lb-shine { 0%, 55% { left: -40%; } 100% { left: 130%; } }

.lb-tiles { display: grid; gap: 12px; }
.lb-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lb-tile { display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; border: 3px solid #fff; background: #fff; color: var(--ink); text-decoration: none; box-shadow: 0 0 0 2px var(--line), 0 10px 22px rgba(110, 70, 190, .16); transition: transform .15s ease; }
.lb-tile:hover { transform: translateY(-2px); }
.lb-tile-media { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; }
.lb-small .lb-tile-media { aspect-ratio: 4 / 3; }
.lb-tile-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lb-tile-body { display: grid; gap: 4px; padding: 10px 14px 14px; }
.lb-kicker { display: flex; align-items: center; gap: 6px; font-family: var(--f-bubble); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--lilac-d); }
.lb-kicker .icon { width: 15px; height: 15px; flex: none; }
.lb-tile-title { font-family: var(--f-bubble); font-weight: 600; font-size: 1rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.lb-channels { display: grid; gap: 10px; padding-top: 16px; border-top: 2px dashed var(--line-2); }
.lb-h { font-family: var(--f-script); font-weight: 700; font-size: 1.7rem; line-height: 1; color: var(--hot-d); }
.lb-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.lb-chip { padding: 8px 14px; border-radius: 999px; color: #fff; background: var(--pink-d); font-family: var(--f-bubble); font-weight: 600; font-size: 0.9rem; text-decoration: none; box-shadow: 0 3px 0 rgba(59, 31, 92, .25); }
.lb-chip.tag-winx-lore { background: var(--hot-d); }
.lb-chip.tag-collections { background: var(--lilac-d); }
.lb-chip.tag-tech { background: var(--night); color: var(--glow-c); }
.lb-chip.tag-deenas-diary { background: var(--peri-d); }
.lb-chip:hover { filter: brightness(1.1); }
.lb-foot { display: grid; gap: 4px; text-align: center; font-size: 0.78rem; color: var(--ink-soft); }
.lb-foot a { color: var(--hot-d); font-weight: 700; }


/* ---------- Narrower screens ---------- */
@media (max-width: 960px) {
  .portal.has-side { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "rest"; }
  .side-rest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sbox-onair { grid-column: 1 / -1; }
  .onair-in { position: static; }
  .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topnav-logo img { width: 120px; }
}
@media (max-width: 760px) {
  .masthead { grid-template-columns: minmax(0, 1fr); align-items: start; min-height: 0; padding-bottom: 250px; background: linear-gradient(180deg, #FCE4F0 0%, #FBD9EA 100%); }
  .mast-bg {
    top: auto; height: 400px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 18%, #000 42%, #000 86%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 18%, #000 42%, #000 86%, transparent 100%);
  }
  .mast-bg::after { background: linear-gradient(90deg, rgba(252, 226, 239, .7) 0%, rgba(252, 226, 239, 0) 16%, rgba(252, 226, 239, 0) 84%, rgba(252, 226, 239, .7) 100%); }
  .hero-media { object-position: 80% 50%; transform-origin: 80% 50%; }
  .mast-brand { padding: 22px 14px 0; }
  .masthead .hero-controls { right: 50%; transform: translateX(50%); bottom: 12px; }
  .g2, .g4, .g6, .g7 { display: none; }
}
@media (max-width: 700px) {
  .fcards { grid-template-columns: minmax(0, 1fr); }
  .wrow { grid-template-columns: 130px minmax(0, 1fr); gap: 14px; }
  .foot { flex-direction: column; align-items: flex-start; }
  .foot-right { justify-items: start; text-align: left; }
  .foot-links, .foot-social { justify-content: flex-start; }
}
@media (max-width: 560px) {
  body { padding-inline: 10px; padding-block: 10px 20px; }
  .site { padding: 8px; border-width: 3px; border-radius: 20px; }
  .announce { padding: 8px 12px; }
  .announce-sub { flex-basis: 100%; }
  .announce-new { display: none; }
  .topnav { gap: 6px; padding: 8px 6px; border-radius: 16px; }
  .topnav.has-logo { grid-template-columns: auto minmax(0, 1fr) auto; }
  .topnav-logo { grid-column: 1 / -1; justify-self: center; padding: 0 0 2px; }
  .topnav-logo img { width: 130px; }
  .tn-arrow { width: 30px; height: 58px; border-radius: 10px; }
  .tn-arrow svg { width: 20px; height: 20px; }
  .tn-track { gap: 8px; }
  .tn-item { min-width: 64px; }
  .tn-tile { width: 60px; height: 60px; border-radius: 14px; }
  .tile-icon { width: 32px; height: 32px; }
  .tile-bfly { width: 52px; height: 50px; }
  .tn-label { font-size: 0.74rem; }
  .masthead { border-radius: 18px; }
  .portal { padding: 10px; gap: 12px; }
  .side-rest { grid-template-columns: minmax(0, 1fr); }
  .fcard, .wbox, .post-box { border-width: 5px; border-radius: 20px; }
  .wbox { padding: 14px; }
  .wrow { grid-template-columns: minmax(0, 1fr); }
  .wrow-img { aspect-ratio: 16 / 9; }
  .pcards { grid-template-columns: minmax(0, 1fr); }
  .about-grid { grid-template-columns: minmax(0, 1fr); }
  .polaroid { width: 180px; margin-inline: auto; }
  .carousel { grid-template-columns: minmax(0, 1fr); }
  .car-btn { display: none; }
  .car-tiktoks { grid-auto-columns: minmax(300px, 92%); }
  .tt-row { grid-auto-columns: 42%; }
  .tt-empty { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tt-empty .tt-tile:nth-child(n+4) { display: none; }
  .tt-follow { margin-left: 0; }
  .entry-content .alignleft, .entry-content .alignright { float: none; margin: 1em 0; max-width: 100%; }
  .lb { padding-block: 76px 30px; }
  .lb-card { padding: 0 14px 18px; border-radius: 28px; }
  .lb-socials { gap: 16px; }
  .lb-btn { min-height: 58px; font-size: 1rem; }
  .fly:nth-child(3), .fx-spark:nth-child(n+8) { display: none; }
  .fly { width: calc(var(--size) * .72); height: calc(var(--size) * .68); }
}

/* ---------- Less motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tw, .twinkle, .glint, .tile-bfly .wings { animation: none; }
  .hero-media, .hero-slide.is-active .hero-media, .hero-slide.is-leaving .hero-media { animation: none; transform: none; }
  .tn-track { scroll-behavior: auto; }
  .tn-tile, .pcard { transition: none; }
  .tn-item:hover .tn-tile, .pcard:hover { transform: none; }
  .fx-layer { display: none; }
  .lb-btn.is-featured::after { animation: none; display: none; }
  .lb-btn, .lb-tile, .lb-social .social-icon { transition: none; }
  .sky-pan { animation: none; }
  .marquee { white-space: normal; }
  .marquee-track { animation: none; flex-wrap: wrap; row-gap: 8px; padding-right: 22px; }
  .marquee-track span[aria-hidden="true"] { display: none; }
  .car-track { scroll-behavior: auto; }
  .gel, .gel::after, .pill, .vid-play, .hero-slide { transition: none; }
  .gel:hover, .pill:hover { transform: none; }
}