/* ==========================================================================
   Sophie v3 - looks: more colour moods, perfect light + dark mode, gorgeous backdrops,
   3D lighting, support dialog, "My world" viewer, legal pages.
   Loaded after site.css.
   ========================================================================== */

/* ---- colour moods: backdrop colours (--bg-a..d feed every animated backdrop) ---- */
html[data-palette="coral"]{--bg-a:#FFD7C6;--bg-b:#FF9E8A;--bg-c:#FFEFC9;--bg-d:#F5C9D9}
html[data-palette="champagne"]{--bg-a:#FFE6B8;--bg-b:#E8C77B;--bg-c:#FFF6E0;--bg-d:#F2D1C9}
html[data-palette="mauve"]{--bg-a:#EBCDE4;--bg-b:#D9A3C9;--bg-c:#F9E2EE;--bg-d:#CBB6F0}
html[data-palette="lilac"]{--bg-a:#E3D9FA;--bg-b:#B9A2EA;--bg-c:#FBE3F0;--bg-d:#C6E0FA}
html[data-palette="cherry"]{--bg-a:#FFC9CF;--bg-b:#F2788A;--bg-c:#FFE2D5;--bg-d:#E8B4D8}
html[data-palette="peach"]{--bg-a:#FFD9C0;--bg-b:#FFB38A;--bg-c:#FFF0C9;--bg-d:#F7C6D8}
html[data-palette="lilac"]{--blush:#EEE6FB;--blush-2:#DDD0F6;--rose:#B9A2EA;--rose-deep:#6B49B8;--rose-ink:#4B2F8C;--coral:#E58BB3;
  --grad:linear-gradient(135deg,#CDB9F5 0%,#9C7BE0 55%,#6B49B8 100%);--grad-text:linear-gradient(120deg,#9C7BE0 0%,#6B49B8 50%,#E58BB3 100%);--ink:#2A1A47;--ink-soft:#6A5A8C}
html[data-palette="cherry"]{--blush:#FFE1E3;--blush-2:#FFC9CE;--rose:#F2788A;--rose-deep:#A8203D;--rose-ink:#7D1730;--coral:#FF7E6B;
  --grad:linear-gradient(135deg,#FF9AAA 0%,#E04864 55%,#A8203D 100%);--grad-text:linear-gradient(120deg,#E04864 0%,#A8203D 50%,#E8A24F 100%);--ink:#3B1620;--ink-soft:#7D4350}
html[data-palette="ballet"]{--blush:#FFF1F4;--blush-2:#FBDDE5;--rose:#F6C1CF;--rose-deep:#C0587A;--rose-ink:#8F3A58;--coral:#F7A8B8;
  --grad:linear-gradient(135deg,#FBCFDB 0%,#EE8FAE 55%,#C0587A 100%);--grad-text:linear-gradient(120deg,#EE8FAE 0%,#C0587A 50%,#E8C77B 100%);--ink:#3A2230;--ink-soft:#7D5A6B;
  --bg-a:#FFEFF3;--bg-b:#F8C9D6;--bg-c:#FFF6E8;--bg-d:#EBD6F2}
html[data-palette="orchid"]{--blush:#F8E4FA;--blush-2:#EFC9F4;--rose:#D78BE3;--rose-deep:#A02FB8;--rose-ink:#701F82;--coral:#F078C0;
  --grad:linear-gradient(135deg,#E7A6F0 0%,#C45AD6 55%,#8E27A8 100%);--grad-text:linear-gradient(120deg,#C45AD6 0%,#8E27A8 50%,#F078C0 100%);--ink:#34123B;--ink-soft:#744880;
  --bg-a:#F3D6F7;--bg-b:#D98AE6;--bg-c:#FFE3F3;--bg-d:#C9B5F7}
html[data-palette="sunset"]{--blush:#FFE6E0;--blush-2:#FFD0C6;--rose:#FF9A9E;--rose-deep:#D6456B;--rose-ink:#9A2A4F;--coral:#FF8A6B;
  --grad:linear-gradient(135deg,#FFB199 0%,#FF6F91 55%,#B5469F 100%);--grad-text:linear-gradient(120deg,#FF6F91 0%,#B5469F 50%,#FFB347 100%);--ink:#3B1B2A;--ink-soft:#7E4B5E;
  --bg-a:#FFD9C9;--bg-b:#FF8FA3;--bg-c:#FFE7B8;--bg-d:#C9A6F0}
html[data-palette="mint"]{--blush:#E6F8F0;--blush-2:#CFF0E3;--rose:#8FDCC0;--rose-deep:#1F8A6A;--rose-ink:#12614A;--coral:#F59DB5;
  --grad:linear-gradient(135deg,#A8EAD2 0%,#4FC3A1 55%,#1F8A6A 100%);--grad-text:linear-gradient(120deg,#4FC3A1 0%,#1F8A6A 50%,#F59DB5 100%);--ink:#16332B;--ink-soft:#4F7569;
  --bg-a:#D9F5EA;--bg-b:#8FDCC0;--bg-c:#FFE9F0;--bg-d:#C9EBF7}
html[data-palette="sky"]{--blush:#E8F3FF;--blush-2:#D2E6FC;--rose:#9CC8F5;--rose-deep:#2F6FBF;--rose-ink:#1F4A8A;--coral:#F5A3C8;
  --grad:linear-gradient(135deg,#B5D8FA 0%,#6AA6EB 55%,#2F6FBF 100%);--grad-text:linear-gradient(120deg,#6AA6EB 0%,#2F6FBF 50%,#F5A3C8 100%);--ink:#172B45;--ink-soft:#4F6B8C;
  --bg-a:#D8EAFE;--bg-b:#9CC8F5;--bg-c:#FFE6F1;--bg-d:#D7CCF7}

/* ---- dark mode (every colour mood has a matching night version) ---- */
html[data-mode="dark"]{
  color-scheme:dark;
  --cream:#150911;--ink:#FDEEF3;--ink-soft:#D9B8C6;--rose-ink:#FFC6D8;--rose-deep:#FF8FB4;--gold-deep:#EBCB84;
  --glass:rgba(36,15,27,.60);--glass-strong:rgba(32,13,24,.93);--glass-line:rgba(255,255,255,.14);
  --fill:rgba(255,255,255,.075);--fill-strong:rgba(48,20,34,.94);
  --blush:#2B1120;--blush-2:#3B1729;
  --shadow:0 28px 70px -28px rgba(0,0,0,.9);--shadow-sm:0 12px 30px -14px rgba(0,0,0,.8);
  --grad-text:linear-gradient(120deg,#FF9DBA 0%,#FF6F9C 45%,#F4CB7A 100%);
  --bg-a:#2D1022;--bg-b:#6E1F48;--bg-c:#1B0D2E;--bg-d:#45123A;
}
@supports (color:color-mix(in srgb,red,blue)){
  html[data-mode="dark"]{
    --bg-a:color-mix(in srgb,var(--rose) 24%,#12060e);--bg-b:color-mix(in srgb,var(--rose) 52%,#1c0a15);
    --bg-c:color-mix(in srgb,var(--coral) 14%,#130820);--bg-d:color-mix(in srgb,var(--rose-deep) 36%,#14081e);
  }
}
@supports (color:color-mix(in srgb,red,blue)){
  html[data-mode="dark"]{--grad-text:linear-gradient(120deg,color-mix(in srgb,var(--rose) 80%,#fff),var(--coral) 55%,#F4CB7A)}
}
html[data-mode="dark"] body{background:var(--cream)}
html[data-mode="dark"] .bg::after{background:linear-gradient(180deg,rgba(14,4,10,.18),rgba(24,6,16,.22))}
html[data-mode="dark"] .bg::before{opacity:.5}
html[data-mode="dark"] .live__badge{background:var(--fill-strong);color:#ff7d95}
html[data-mode="dark"] .badge{background:linear-gradient(145deg,rgba(255,255,255,.2),var(--blush))}
html[data-mode="dark"] .about__img{border-color:rgba(255,255,255,.16)}
html[data-mode="dark"] .hub-link:hover{background:rgba(255,255,255,.15)}
html[data-mode="dark"] .avatar-ring img,html[data-mode="dark"] .enter__ring img{border-color:#2b1120}
html[data-mode="dark"] .hub__foot{border-top-color:rgba(255,255,255,.16)}
html[data-mode="dark"] .toast{background:#fff;color:#3a1f2b}
html[data-mode="dark"] .btn--ghost{border-color:rgba(255,255,255,.22)}
html[data-mode="dark"] .fol__delta.pos{color:#6be3a6;background:rgba(31,157,99,.2)}
html[data-mode="dark"] .fol__delta.neg{color:#ff8fa5;background:rgba(214,64,92,.22)}
html[data-mode="dark"] .enter{background:radial-gradient(circle at 50% 30%,rgba(54,18,38,.96),rgba(22,7,16,.97) 70%)}
html[data-mode="dark"] .dots i{background:rgba(255,255,255,.25)}
html[data-mode="dark"] .filter[aria-pressed="false"]{color:var(--ink-soft)}
html[data-mode="dark"] .lang__list a:hover,html[data-mode="dark"] .lang__list a[aria-current]{background:rgba(255,143,180,.2)}
html[data-mode="dark"] .nav__links a:hover{background:rgba(255,143,180,.16)}
html[data-mode="dark"] .arch::before{background:radial-gradient(closest-side,rgba(255,160,200,.7),rgba(255,111,156,.35) 46%,transparent 74%)}
html{transition:background-color .5s var(--ease)}
body,.glass,.btn--ghost,.chips li,.fol,.stat,.card{transition-property:background,background-color,border-color,color,box-shadow,transform,opacity;transition-duration:.45s,.45s,.45s,.45s,.45s,.45s,.45s;transition-timing-function:var(--ease)}

/* ---- light / dark switch ---- */
.modebtn{position:relative;overflow:hidden;width:42px;height:42px;flex:none;border-radius:50%;border:1px solid var(--glass-line);background:var(--fill);color:var(--rose-ink);
  display:grid;place-items:center;padding:0;transition:transform .35s var(--ease),background .3s}
.modebtn:hover{transform:translateY(-2px) rotate(-12deg)}
.modebtn svg{position:absolute;width:21px;height:21px;transition:transform .6s var(--ease),opacity .35s}
.modebtn .m-moon{opacity:0;transform:rotate(-120deg) scale(.4)}
html[data-mode="dark"] .modebtn .m-sun{opacity:0;transform:rotate(120deg) scale(.4)}
html[data-mode="dark"] .modebtn .m-moon{opacity:1;transform:none}
.donate-nav{padding-inline:.85rem;min-height:40px;font-size:.88rem;font-weight:800;letter-spacing:.02em;white-space:nowrap}
.donate-nav .lbl{display:inline}

/* ---- backdrops ---- */
.bg i{position:absolute;display:none;pointer-events:none}
.bg:not([data-style="photo"]):not([data-style="custom"]){background-image:none;background-color:var(--bg-a);overflow:hidden}
.bg:not([data-style="photo"]):not([data-style="custom"])::after{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 40%,rgba(255,255,255,.08))}
html[data-mode="dark"] .bg:not([data-style="photo"]):not([data-style="custom"])::after{background:linear-gradient(180deg,rgba(10,3,8,.25),rgba(10,3,8,.1) 45%,rgba(10,3,8,.4))}
.bg[data-style="custom"]{background-size:cover}

/* aurora + blossom: blurred colour clouds */
.bg[data-style="aurora"],.bg[data-style="blossom"]{background-image:linear-gradient(160deg,var(--bg-a),var(--bg-c) 55%,var(--bg-d))}
.bg[data-style="aurora"] i,.bg[data-style="blossom"] i{display:block;border-radius:50%;filter:blur(72px);opacity:.8;will-change:transform}
.bg[data-style="aurora"] i:nth-child(1),.bg[data-style="blossom"] i:nth-child(1){width:62vmax;height:62vmax;left:-18vmax;top:-22vmax;background:var(--bg-b);animation:drift1 28s ease-in-out infinite alternate}
.bg[data-style="aurora"] i:nth-child(2),.bg[data-style="blossom"] i:nth-child(2){width:56vmax;height:56vmax;right:-20vmax;top:8vh;background:var(--bg-d);animation:drift2 34s ease-in-out infinite alternate}
.bg[data-style="aurora"] i:nth-child(3),.bg[data-style="blossom"] i:nth-child(3){width:64vmax;height:50vmax;left:15vw;bottom:-28vmax;background:var(--bg-c);animation:drift3 40s ease-in-out infinite alternate}
html[data-mode="dark"] .bg[data-style="aurora"] i,html[data-mode="dark"] .bg[data-style="blossom"] i{opacity:.7}
.bg[data-style="blossom"]{background-image:linear-gradient(135deg,#fff2f6,var(--bg-a) 50%,var(--bg-c))}
html[data-mode="dark"] .bg[data-style="blossom"]{background-image:linear-gradient(135deg,var(--bg-a),var(--bg-c))}
.bg[data-style="blossom"] i:nth-child(1){background:#fff;opacity:.55}
html[data-mode="dark"] .bg[data-style="blossom"] i:nth-child(1){background:var(--bg-b);opacity:.6}
@keyframes drift1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(18vw,14vh,0) scale(1.18)}}
@keyframes drift2{from{transform:translate3d(0,0,0) scale(1.1)}to{transform:translate3d(-16vw,18vh,0) scale(.9)}}
@keyframes drift3{from{transform:translate3d(0,0,0) scale(.95)}to{transform:translate3d(-12vw,-14vh,0) scale(1.2)}}

/* bokeh: glowing discs with a bright rim */
.bg[data-style="bokeh"]{background-image:linear-gradient(135deg,var(--bg-a),var(--bg-b) 70%,var(--bg-d))}
.bg[data-style="bokeh"] i{display:block;inset:-6%;filter:blur(1.2px);will-change:transform}
.bg[data-style="bokeh"] i:nth-child(1){background:
  radial-gradient(circle at 12% 24%,rgba(255,255,255,.12) 0 4.2vmax,rgba(255,255,255,.55) 4.6vmax,transparent 4.9vmax),
  radial-gradient(circle at 80% 16%,rgba(255,236,190,.14) 0 3vmax,rgba(255,236,190,.6) 3.3vmax,transparent 3.6vmax),
  radial-gradient(circle at 58% 72%,rgba(255,255,255,.1) 0 6.4vmax,rgba(255,255,255,.4) 6.9vmax,transparent 7.2vmax);animation:bokeh1 24s ease-in-out infinite alternate}
.bg[data-style="bokeh"] i:nth-child(2){background:
  radial-gradient(circle at 30% 82%,rgba(255,226,170,.12) 0 3.4vmax,rgba(255,226,170,.55) 3.7vmax,transparent 4vmax),
  radial-gradient(circle at 90% 60%,rgba(255,255,255,.1) 0 5vmax,rgba(255,255,255,.4) 5.4vmax,transparent 5.7vmax),
  radial-gradient(circle at 44% 12%,rgba(255,255,255,.1) 0 2.4vmax,rgba(255,255,255,.55) 2.7vmax,transparent 3vmax);animation:bokeh2 30s ease-in-out infinite alternate}
.bg[data-style="bokeh"] i:nth-child(3){background:
  radial-gradient(circle at 70% 90%,rgba(255,255,255,.1) 0 2.8vmax,rgba(255,255,255,.5) 3.1vmax,transparent 3.4vmax),
  radial-gradient(circle at 6% 62%,rgba(255,236,190,.1) 0 3.6vmax,rgba(255,236,190,.5) 3.9vmax,transparent 4.2vmax),
  radial-gradient(circle at 92% 34%,rgba(255,255,255,.1) 0 1.8vmax,rgba(255,255,255,.55) 2.1vmax,transparent 2.4vmax);animation:bokeh1 36s ease-in-out -9s infinite alternate-reverse}
html[data-mode="dark"] .bg[data-style="bokeh"] i{opacity:.55}
@keyframes bokeh1{from{transform:translate3d(-2vw,3vh,0) scale(1)}to{transform:translate3d(3vw,-4vh,0) scale(1.08)}}
@keyframes bokeh2{from{transform:translate3d(3vw,-2vh,0) scale(1.06)}to{transform:translate3d(-3vw,4vh,0) scale(.97)}}

/* satin silk */
.bg[data-style="silk"]{background-image:linear-gradient(135deg,var(--bg-b),var(--bg-a) 45%,var(--bg-d))}
.bg[data-style="silk"] i{display:block;inset:-25%;filter:blur(14px);will-change:transform}
.bg[data-style="silk"] i:nth-child(1){background:repeating-linear-gradient(112deg,transparent 0 70px,rgba(255,255,255,.4) 120px,transparent 190px);animation:silk 38s linear infinite alternate}
.bg[data-style="silk"] i:nth-child(2){background:repeating-linear-gradient(66deg,transparent 0 90px,rgba(255,255,255,.25) 150px,transparent 230px);animation:silk 52s linear -12s infinite alternate-reverse}
.bg[data-style="silk"] i:nth-child(3){background:repeating-linear-gradient(140deg,transparent 0 110px,rgba(0,0,0,.08) 170px,transparent 260px);animation:silk 46s linear -20s infinite alternate}
html[data-mode="dark"] .bg[data-style="silk"] i:nth-child(1){background:repeating-linear-gradient(112deg,transparent 0 70px,rgba(255,140,185,.22) 120px,transparent 190px)}
html[data-mode="dark"] .bg[data-style="silk"] i:nth-child(2){background:repeating-linear-gradient(66deg,transparent 0 90px,rgba(255,255,255,.1) 150px,transparent 230px)}
@keyframes silk{from{transform:translate3d(-6%,-3%,0) rotate(0deg)}to{transform:translate3d(6%,4%,0) rotate(2.5deg)}}

/* golden hour */
.bg[data-style="goldenhour"]{background-image:linear-gradient(180deg,#FFE3EF 0%,#FFC7CF 52%,#FFB48C 100%)}
html[data-mode="dark"] .bg[data-style="goldenhour"]{background-image:linear-gradient(180deg,#2a0f24 0%,#5a1c34 58%,#8a3a3a 100%)}
.bg[data-style="goldenhour"] i:nth-child(1){display:block;width:110vmax;height:110vmax;right:-30vmax;bottom:-62vmax;border-radius:50%;
  background:radial-gradient(circle,#fff3c4 0,#ffcf8a 20%,rgba(255,158,122,.45) 42%,transparent 68%);animation:sun 14s ease-in-out infinite alternate}
.bg[data-style="goldenhour"] i:nth-child(2){display:block;width:70vmax;height:40vmax;left:-12vmax;top:-10vmax;border-radius:50%;filter:blur(60px);background:rgba(255,255,255,.55);animation:drift1 40s ease-in-out infinite alternate}
html[data-mode="dark"] .bg[data-style="goldenhour"] i:nth-child(1){opacity:.7}
html[data-mode="dark"] .bg[data-style="goldenhour"] i:nth-child(2){background:rgba(255,120,160,.18)}
@keyframes sun{from{transform:scale(.94);opacity:.85}to{transform:scale(1.06);opacity:1}}

/* pearl / holographic */
.bg[data-style="pearl"]{background-image:linear-gradient(135deg,var(--bg-a),var(--bg-c) 50%,var(--bg-d))}
.bg[data-style="pearl"] i:nth-child(1){display:block;width:140vmax;height:140vmax;left:50%;top:50%;margin:-70vmax 0 0 -70vmax;border-radius:50%;filter:blur(60px);opacity:.75;
  background:conic-gradient(from 0deg,var(--bg-a),#cfe9ff,var(--bg-c),var(--bg-b),#fff3d6,var(--bg-d),var(--bg-a));animation:spin 90s linear infinite;will-change:transform}
.bg[data-style="pearl"] i:nth-child(2){display:block;inset:0;background:radial-gradient(60% 50% at 30% 20%,rgba(255,255,255,.7),transparent 70%),radial-gradient(50% 50% at 80% 85%,rgba(255,255,255,.45),transparent 70%)}
html[data-mode="dark"] .bg[data-style="pearl"] i:nth-child(1){opacity:.55}
html[data-mode="dark"] .bg[data-style="pearl"] i:nth-child(2){opacity:.25}

/* glitter dust */
.bg[data-style="glitter"]{background-image:linear-gradient(160deg,var(--bg-b),var(--bg-a) 60%,var(--bg-c))}
.bg[data-style="glitter"] i{display:block;inset:0}
.bg[data-style="glitter"] i:nth-child(1){background-image:radial-gradient(1.6px 1.6px at 20px 30px,#fff,transparent),radial-gradient(2px 2px at 90px 140px,#fff,transparent),radial-gradient(1.4px 1.4px at 160px 60px,#ffe9a8,transparent),radial-gradient(2.2px 2.2px at 130px 190px,#fff,transparent);background-size:211px 223px;animation:twinkle 3.6s ease-in-out infinite alternate}
.bg[data-style="glitter"] i:nth-child(2){background-image:radial-gradient(1.8px 1.8px at 50px 80px,#fff,transparent),radial-gradient(1.4px 1.4px at 170px 20px,#ffe9a8,transparent),radial-gradient(2px 2px at 110px 170px,#fff,transparent);background-size:263px 241px;animation:twinkle 5.2s ease-in-out -1.7s infinite alternate}
.bg[data-style="glitter"] i:nth-child(3){background-image:radial-gradient(2.6px 2.6px at 60px 120px,#fff,transparent),radial-gradient(2px 2px at 210px 70px,#fff,transparent),radial-gradient(3px 3px at 150px 220px,#ffe9a8,transparent);background-size:317px 293px;animation:twinkle 7s ease-in-out -3s infinite alternate}

/* sunset beach */
.bg[data-style="sunset"]{background-image:linear-gradient(180deg,var(--bg-d) 0%,var(--bg-b) 46%,var(--bg-c) 80%,var(--bg-a) 100%)}
.bg[data-style="sunset"] i:nth-child(1){display:block;width:34vmax;height:34vmax;left:50%;margin-left:-17vmax;bottom:6vh;border-radius:50%;filter:blur(2px);
  background:radial-gradient(circle,#fffbe0 0,#ffe29a 36%,rgba(255,190,130,.0) 72%);box-shadow:0 0 120px 60px rgba(255,200,140,.55);animation:sun 12s ease-in-out infinite alternate}
.bg[data-style="sunset"] i:nth-child(2){display:block;left:0;right:0;bottom:0;height:24vh;background:repeating-linear-gradient(180deg,rgba(255,255,255,.18) 0 2px,transparent 2px 14px);
  -webkit-mask-image:linear-gradient(0deg,#000,transparent);mask-image:linear-gradient(0deg,#000,transparent);animation:shimmer 6s ease-in-out infinite alternate}
html[data-mode="dark"] .bg[data-style="sunset"] i:nth-child(1){opacity:.55}
@keyframes shimmer{from{transform:translateX(-1%)}to{transform:translateX(1%)}}

/* dream clouds */
.bg[data-style="dream"]{background-image:linear-gradient(180deg,var(--bg-d),var(--bg-a) 62%,var(--bg-c))}
.bg[data-style="dream"] i{display:block;border-radius:50%;filter:blur(34px);background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0));will-change:transform}
.bg[data-style="dream"] i:nth-child(1){width:70vw;height:26vh;left:-12vw;top:12vh;animation:cloud 60s linear infinite alternate}
.bg[data-style="dream"] i:nth-child(2){width:62vw;height:24vh;right:-14vw;top:44vh;animation:cloud 75s linear -20s infinite alternate-reverse}
.bg[data-style="dream"] i:nth-child(3){width:80vw;height:30vh;left:8vw;bottom:-4vh;animation:cloud 90s linear -40s infinite alternate}
html[data-mode="dark"] .bg[data-style="dream"] i{background:radial-gradient(closest-side,rgba(255,150,200,.28),rgba(255,150,200,0))}
@keyframes cloud{from{transform:translateX(-6vw)}to{transform:translateX(9vw)}}

/* ---- 3D lighting ---- */
.spot{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.9;mix-blend-mode:soft-light;
  background:radial-gradient(560px circle at var(--mx,62%) var(--my,22%),rgba(255,255,255,.75),transparent 62%)}
html[data-mode="dark"] .spot{mix-blend-mode:screen;opacity:.55;background:radial-gradient(560px circle at var(--mx,62%) var(--my,22%),rgba(255,120,175,.32),transparent 62%)}
html[data-fx="0"] .spot{display:none}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .4  0 0 0 0 .2  0 0 0 0 .3  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
html[data-mode="dark"] .grain{mix-blend-mode:screen;opacity:.05}

html[data-fx="1"] .glass{
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(255,255,255,.12);
  background-image:linear-gradient(145deg,rgba(255,255,255,.5),rgba(255,255,255,0) 40%),radial-gradient(460px circle at var(--gx,60%) var(--gy,-25%),rgba(255,255,255,.4),transparent 55%)}
html[data-fx="1"][data-mode="dark"] .glass{
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.4);
  background-image:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,0) 40%),radial-gradient(460px circle at var(--gx,60%) var(--gy,-25%),rgba(255,130,180,.16),transparent 55%)}
html[data-fx="1"] .btn--primary{box-shadow:0 18px 34px -14px rgba(184,58,99,.75),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -3px 7px rgba(120,20,60,.3)}
html[data-fx="1"] .arch::after{content:"";position:absolute;inset:9px;border-radius:inherit;pointer-events:none;mix-blend-mode:soft-light;
  background:linear-gradient(115deg,rgba(255,255,255,.85),transparent 38%,transparent 68%,rgba(255,255,255,.4))}
html[data-fx="1"] .hero__art{transition:transform .25s var(--ease);transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.tilt-live{transition:transform .12s linear!important;will-change:transform}
@media (prefers-reduced-motion:reduce){.bg i,.bg::before,.spot{animation:none!important}.modebtn,.modebtn svg{transition:none}}

/* ---- support Sophie: call-to-action card + dialog ---- */
.support-cta{margin:1rem auto 0}
.support{display:flex;align-items:center;gap:1.1rem;padding:1.2rem 1.5rem;border-radius:var(--radius);position:relative;overflow:hidden}
.support::before{content:"";position:absolute;inset:-60% -10% auto auto;width:60%;height:200%;background:radial-gradient(closest-side,rgba(255,111,156,.35),transparent);pointer-events:none}
.support>*{position:relative}
.support__emoji{font-size:2.3rem;animation:beat 1.8s ease-in-out infinite}
.support__text{flex:1;display:flex;flex-direction:column;line-height:1.3;min-width:0}
.support__text b{font-family:var(--font-display);font-size:1.5rem;line-height:1.1}
.support__text small{color:var(--ink-soft);font-size:.92rem}
@media (max-width:640px){.support{flex-direction:column;text-align:center}}
@keyframes beat{0%,100%{transform:scale(1)}14%{transform:scale(1.18)}28%{transform:scale(1)}42%{transform:scale(1.12)}70%{transform:scale(1)}}
dialog.modal{border:0;padding:0;background:transparent;width:min(94vw,470px);max-width:94vw;overflow:visible;color:var(--ink)}
dialog.modal::backdrop{background:rgba(44,10,28,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.modal__card{position:relative;padding:2rem 1.6rem 1.7rem;text-align:center;background:var(--glass-strong);animation:pop .5s var(--ease)}
.modal__x{position:absolute;top:.7rem;right:.7rem;width:38px;height:38px;border-radius:50%;border:1px solid var(--glass-line);background:var(--fill);color:var(--ink-soft);font-size:1rem}
.modal__heart{font-size:2.8rem;line-height:1;animation:beat 1.8s ease-in-out infinite}
.modal__card h2{font-family:var(--font-display);font-size:clamp(1.7rem,5vw,2.2rem);line-height:1.1;margin:.4rem 0 .5rem}
.modal__text{color:var(--ink-soft)}
.paybox{margin:1.1rem 0 .4rem;padding:.8rem .9rem;border-radius:18px;background:var(--fill);border:1.5px dashed var(--rose)}
.paybox__label{display:block;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--ink-soft);margin-bottom:.35rem}
.paybox__row{display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap}
.paybox code{font-family:var(--font-body);font-weight:800;font-size:1rem;word-break:break-all;color:var(--rose-ink);user-select:all}
.modal__ask{font-family:var(--font-display);font-size:1.45rem;font-weight:600;line-height:1.2;margin:1.2rem 0 .9rem}
.modal__btns{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
.modal__btns .btn{min-width:130px}
.modal__msg{margin-top:1rem;font-weight:700;color:var(--rose-ink)}
@keyframes pop{from{opacity:0;transform:translateY(24px) scale(.94)}to{opacity:1;transform:none}}
button.hub-link{width:100%;font:inherit;color:inherit;cursor:pointer}

/* ---- "My world" cards with media + viewer ---- */
.card--media{cursor:pointer;position:relative;overflow:hidden}
.card--media:focus-visible{outline:3px solid var(--rose-deep);outline-offset:3px}
.card__cover{margin:-1.6rem -1.4rem 1rem;height:158px;overflow:hidden;position:relative}
.card__cover::after{content:"";position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(0deg,var(--glass-strong),transparent)}
.card__cover img,.card__cover video{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.card--media:hover .card__cover img,.card--media:hover .card__cover video{transform:scale(1.09)}
.card__cover--video{background:linear-gradient(160deg,#3a1828,#8e2c4e 55%,#e8678f)}
.card__cover .card__still,.card__cover .card__tease{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.card__tease{opacity:0;transition:opacity .45s ease}
.card__tease.is-on{opacity:1}
.card__cover--video::before{content:"▶";position:absolute;z-index:3;left:50%;top:42%;transform:translate(-50%,-50%);
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;padding-left:3px;
  background:rgba(255,255,255,.92);color:var(--rose-ink);font-size:14px;box-shadow:0 8px 18px rgba(40,8,20,.28);pointer-events:none}
.card--media .badge{margin-top:-2.7rem;position:relative;z-index:2}
.card__count{display:flex;align-items:center;gap:.5rem;margin-top:.8rem;font-weight:800;font-size:.86rem;color:var(--rose-deep)}
.card__count i{font-style:normal;margin-left:auto;transition:transform .4s var(--ease)}
.card--media:hover .card__count i{transform:translateX(6px)}
html.wv-open{overflow:hidden}
dialog.wv{border:0;padding:0;margin:0;max-width:none;max-height:none;width:100vw;height:100vh;height:100dvh;background:transparent;color:#fff;overflow:hidden}
dialog.wv::backdrop{background:rgba(22,6,16,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.wv__in{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto auto;padding:max(12px,var(--safe-t)) clamp(10px,3vw,34px) max(12px,var(--safe-b));gap:.7rem;animation:pop .45s var(--ease)}
.wv__bar{display:flex;align-items:center;gap:.9rem}
.wv__title{flex:1;min-width:0;display:flex;align-items:center;gap:.7rem}
.wv__emoji{font-size:1.8rem}
.wv__title b{display:block;font-family:var(--font-display);font-size:clamp(1.4rem,3.5vw,2rem);line-height:1.05}
.wv__title small{display:block;opacity:.75;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw}
.wv__x{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff;font-size:1.2rem;flex:none}
.wv__x:hover{background:rgba(255,255,255,.25)}
.wv__stage{position:relative;min-height:0;display:grid;place-items:center}
.wv__media{max-width:100%;max-height:100%;display:grid;place-items:center;min-height:0;min-width:0}
.wv__media img,.wv__media video{max-width:min(100%,1800px);max-height:calc(100vh - 230px);max-height:calc(100dvh - 230px);object-fit:contain;border-radius:20px;background:#000;box-shadow:0 30px 90px rgba(0,0,0,.6);animation:fadein .4s ease}
@keyframes fadein{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.wv__nav{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(20,6,14,.55);color:#fff;font-size:1.7rem;display:grid;place-items:center;z-index:3;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.wv__nav:hover{background:rgba(255,255,255,.25)}
.wv__prev{left:4px}.wv__next{right:4px}
.wv__cap{text-align:center;min-height:1.4em;font-weight:700;opacity:.92}
.wv__cap span{opacity:.6;font-weight:600;margin-left:.6rem;font-size:.9rem}
.wv__strip{display:flex;gap:.5rem;overflow-x:auto;padding:.2rem .1rem .4rem;justify-content:safe center;scrollbar-width:thin}
.wv__strip button{flex:none;width:68px;height:68px;padding:0;border:2px solid transparent;border-radius:14px;overflow:hidden;background:#222;opacity:.6;position:relative;transition:all .3s var(--ease)}
.wv__strip button.on{opacity:1;border-color:#fff;transform:translateY(-3px)}
.wv__strip img,.wv__strip video{width:100%;height:100%;object-fit:cover;pointer-events:none}
.wv__strip .play{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:1.1rem;text-shadow:0 2px 8px #000}
.wv__soon{text-align:center;padding:3rem 1rem;font-family:var(--font-display);font-size:1.6rem}
@media (max-width:640px){.wv__nav{width:42px;height:42px;font-size:1.4rem}.wv__strip button{width:56px;height:56px}.wv__media img,.wv__media video{max-height:calc(100dvh - 210px);border-radius:14px}}

/* ---- footer legal + legal pages ---- */
.footer__legal{display:flex;gap:1rem;justify-content:center;margin-top:.5rem;font-size:.84rem}
.footer__legal a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px}
.footer__legal a:hover{color:var(--rose-deep)}
.legal{padding:clamp(1.4rem,4vw,3rem) 0 4rem}
.legal__card{max-width:780px;margin:1rem auto;padding:clamp(1.4rem,4vw,2.6rem)}
.legal__card h1{font-family:var(--font-display);font-size:clamp(2rem,5vw,3rem);line-height:1.05;margin-bottom:1rem}
.legal__card p{color:var(--ink-soft);margin-top:.9rem;overflow-wrap:anywhere}

/* ---- background video (admin: Looks & backgrounds) ---- */
.bgvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease;pointer-events:none;background:transparent}
.bgvid.on{opacity:1}
.bg--video-on::after{background:linear-gradient(180deg,rgba(255,248,246,.16),rgba(255,232,238,.32))}
html[data-mode="dark"] .bg--video-on::after{background:linear-gradient(180deg,rgba(14,4,10,.42),rgba(24,6,16,.6))}

/* ---- princess polish: sparkles, 3D lift, soft glow ---- */
.sparkles{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.sparkles i{position:absolute;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95) 0 35%,rgba(255,214,160,.0) 70%);
  box-shadow:0 0 10px rgba(255,214,180,.7);animation:twinkle 5.6s ease-in-out infinite;opacity:.0}
.sparkles i:nth-child(1){left:12%;top:18%;animation-delay:0s}
.sparkles i:nth-child(2){left:78%;top:12%;animation-delay:1.1s;width:5px;height:5px}
.sparkles i:nth-child(3){left:64%;top:42%;animation-delay:2.2s}
.sparkles i:nth-child(4){left:22%;top:62%;animation-delay:.7s;width:6px;height:6px}
.sparkles i:nth-child(5){left:88%;top:70%;animation-delay:3.4s}
.sparkles i:nth-child(6){left:8%;top:80%;animation-delay:4.1s;width:4px;height:4px}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4)}40%{opacity:.9;transform:scale(1.15)}70%{opacity:.35;transform:scale(.7)}}
.arch,.hero__art{transform-style:preserve-3d;perspective:900px}
.arch{transition:transform .7s var(--ease),filter .7s var(--ease);filter:drop-shadow(0 28px 40px rgba(150,40,82,.28))}
.hero__art:hover .arch{transform:rotateX(4deg) rotateY(-6deg) scale(1.02)}
.shot,.card{transform-style:preserve-3d;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.shot:hover{transform:translateY(-8px) rotateX(3deg) scale(1.015);box-shadow:0 28px 50px -22px rgba(150,40,82,.55)}
.card:hover{transform:translateY(-10px) rotate(-.6deg) scale(1.015)}
.donate-nav,.btn--primary{box-shadow:0 10px 22px -14px rgba(184,58,99,.7),inset 0 1px 0 rgba(255,255,255,.4)}
html[data-fx="0"] .sparkles,html[data-fx="0"] .arch{filter:none;animation:none}
@media (prefers-reduced-motion:reduce){
  .sparkles,.petal{display:none!important}
  .arch,.shot,.card,.hero__art:hover .arch{transform:none!important;filter:none}
}