/* زمینه‌های صفحه اول: هر بار که سایت باز می‌شود یکی از چهار زمینه (پوشه bg/) انتخاب می‌شود
   و کادرهای صفحه (panel) با رنگ و تزئین همان زمینه، مرتب و یکی‌یکی وارد می‌شوند.
   انتخاب زمینه: اسکریپت کوچک داخل <head> در index.html (برای دیدن یک زمینه خاص: ‎?bg=night|sage|blue|garden‎)؛ حرکت ورود: backdrop.js
   این فایل با tools/make-backdrop.py ساخته شده تا رنگ هر زمینه داخل نقش‌های SVG باشد؛ با دست هم می‌شود ویرایشش کرد. */
html[data-bg] body{background:var(--t-base);position:relative}
html[data-bg] body::before{content:"";position:fixed;inset:0;z-index:-2;background:var(--t-img) center top/cover no-repeat}
/* صفحه پهن (رایانه): تصویر کامل در وسط، دو طرف همان تصویر محو */
@media (min-aspect-ratio:4/5){
  html[data-bg] body::before{inset:-40px;filter:blur(24px) saturate(1.05) brightness(.92)}
  html[data-bg] body::after{content:"";position:fixed;inset:0;z-index:-1;background:var(--t-img) center top/auto 100% no-repeat;box-shadow:inset 0 0 60px #0003}
}
html[data-bg] .site-foot{background:radial-gradient(farthest-side,var(--t-veil) 45%,transparent);text-shadow:0 0 10px var(--t-paper),0 0 4px var(--t-paper),0 0 2px var(--t-paper)}
html[data-bg] .site-foot .today{color:var(--t-ink);font-weight:600}
/* رنگ‌های اصلی سایت (سربرگ منو، دکمه‌ها، نشانه‌ها) هم به رنگ قاب همان زمینه */
html[data-bg]{--deep:var(--t-frame);--emerald:var(--t-head);--mint:color-mix(in srgb,var(--t-frame) 13%,#fff)}
/* دکمه‌ها و متن‌های سبز/طلایی روی زمینه روشن باید دست‌کم کنتراست ۴٫۵ داشته باشند (WCAG AA)؛ رنگ قاب‌های تزئینی همان می‌ماند. */
html[data-bg=sage]{--deep:#566e52}html[data-bg=garden]{--deep:#336857}html[data-bg=dark]{--deep:#765b34;--emerald:#765b34}
html[data-theme=dark][data-bg=sage]{--emerald:#566e52}html[data-theme=dark][data-bg=garden]{--emerald:#336857}html[data-theme=dark][data-bg=dark]{--emerald:#765b34}
/* دکمه منو (☰) به رنگ قاب همان زمینه */
html[data-bg] .sm-btn{background:var(--t-frame);border-color:var(--t-gold)}
html[data-bg] .sm-btn:hover{background:var(--t-head)}
html[data-bg] .sm-btn .sm-dot{background:var(--t-gold);box-shadow:0 0 0 2px var(--t-frame)}
html[data-bg] .shell .panel .tagline{color:var(--t-head)}
/* پنجره وسط (backdrop.js جای آن را روی تصویر حساب می‌کند): خود صفحه عادی اسکرول می‌شود،
   ولی کادرها فقط داخل قاب وسط تصویر دیده می‌شوند و بالا و پایینش محو است (--m0 و --m1 با اسکرول جابه‌جا می‌شوند) */
html[data-bg].bgx-win body{padding:0}
/* سربرگ خالی در پنجره وسط فقط کمی فاصله می‌دهد تا کادر اول کامل داخل پنجره دیده شود */
html[data-bg].bgx-win main>header{padding-top:4px;margin:0}
html[data-bg].bgx-win main.shell{position:relative;max-width:none;width:var(--win-w);margin:0 auto 0 var(--win-l);
  padding:calc(var(--win-t) + 18px) 14px calc(var(--win-gap) + 40px);
  -webkit-mask-image:linear-gradient(transparent var(--m0),#000 calc(var(--m0) + 34px),#000 calc(var(--m1) - 44px),transparent var(--m1));
  mask-image:linear-gradient(transparent var(--m0),#000 calc(var(--m0) + 34px),#000 calc(var(--m1) - 44px),transparent var(--m1))}
html[data-bg].bgx-win .shell .panel{margin-inline:0}
html[data-bg].bgx-win .shell .site-foot{margin:6px auto 0}
html[data-bg].bgx-win .shell>.panel:first-of-type .bgx-frame:first-child{margin-top:16px}
/* کادرها */
html[data-bg] .shell .panel{position:relative;background:var(--t-paper);color:var(--t-ink);text-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  border:2px solid var(--t-gold);border-radius:var(--t-radius);padding:30px 28px 26px;margin-bottom:40px;
  box-shadow:inset 0 0 0 5px var(--t-paper),inset 0 0 0 6.5px var(--t-frame),inset 0 0 0 9px var(--t-paper),inset 0 0 0 10px var(--t-line),0 12px 32px rgba(0,0,0,.2)}
html[data-bg] .shell .panel::before{content:"";position:absolute;pointer-events:none;inset:-44px -12px -12px;background-repeat:no-repeat;background-position:var(--t-orn-pos);background-size:var(--t-orn-size)}
html[data-bg] .shell .panel h2{color:var(--t-head);text-align:center}
html[data-bg] .shell .panel>h2::after,html[data-bg] .shell .panel>.chl-head>h2::after{content:"";display:block;width:160px;height:12px;margin:0 auto;background:var(--t-div) center/contain no-repeat}
html[data-bg] .shell .panel>.chl-head{justify-content:center}
html[data-bg] .shell .panel :is(.hint,.lead,.x-prog,.x-deadline,.chl-fold summary){color:var(--t-ink2);text-shadow:none}
html[data-bg] .shell .panel :is(.x-link,.intro-acc button){color:var(--t-head);text-shadow:none}
html[data-bg] .shell .panel .chl-adm h4{color:var(--t-head);text-shadow:none}
html[data-bg] .shell .panel .x-bar{background:var(--t-line)}
html[data-bg] .shell .panel .x-spin{border-color:var(--t-line);border-top-color:var(--t-frame)}
html[data-bg] .shell .panel .intro-notice{border-right-color:var(--t-frame)}
html[data-bg] .shell .panel .intro-notice b{color:var(--t-head)}
html[data-bg] .shell .panel button:not(:is(.intro-light,.reg-light,.chs-alt,.rm-ghost,.x-link,.rd,.hd-open,[data-hz-change])){background:var(--t-frame)}
html[data-bg] .shell .panel button:not(:is(.intro-light,.reg-light,.chs-alt,.rm-ghost,.x-link,.rd,.hd-open,[data-hz-change])):hover:not(:disabled){filter:brightness(.88)}
html[data-bg] .shell .panel button:is(.intro-light,.reg-light,.chs-alt,.rm-ghost){color:var(--t-head);border-color:var(--t-frame)}
/* همان کنتراست ۴٫۵ برای دکمه‌های کادرهای صفحه اول، در حالت روشن */
html[data-bg=sage]:not([data-theme=dark]) .shell .panel button:not(:is(.intro-light,.reg-light,.chs-alt,.rm-ghost,.x-link,.rd,.hd-open,[data-hz-change])){background:var(--deep)}
html[data-bg=dark]:not([data-theme=dark]) .shell .panel button:is(.intro-light,.reg-light,.chs-alt,.rm-ghost){color:var(--deep)}
html[data-bg] .shell .panel :is(.hz-mine,.current-group){background:var(--t-frame)}
/* دکمه‌های روشنی که نوشته‌شان به رنگ ‎--deep‎ است با قانون بالا هم‌رنگِ زمینه‌شان می‌شدند و بی‌نوشته دیده می‌شدند (میان‌بُرهای تاریخ، حالت گروه، گزینه‌های چله، فهرست جزء‌ها). */
html[data-bg] .shell .panel :is(.jd-quick,.chl-chips,.qf-juz) button,html[data-bg] .shell .panel :is(.grp-mode,.qf-tabs) button:not(.on){background:#fff;color:var(--t-head);border-color:var(--t-frame)}
html[data-bg] .shell .panel .qf-juz button.cur{background:var(--mint)}
html[data-bg] .shell .panel :is(.chl-small,.acs-pass) button{background:none}
html[data-bg] .shell .panel :is(.chl-small,.acs-pass) button:not(.chl-red){color:var(--t-head)}
@media(max-width:600px){
  html[data-bg] .shell .panel{padding:28px 18px 22px;margin-bottom:34px}
  html[data-bg] .shell{padding:0 4px}
}
/* حرکت ورود کادرها (فقط وقتی backdrop.js کلاس bgx-anim را گذاشته باشد) */
.bgx-anim .shell>.panel:not(.bgx-in),.bgx-anim header:not(.bgx-in){opacity:0}
.bgx-anim .shell>.panel.bgx-in:not(.bgx-done){animation:var(--t-anim) .8s cubic-bezier(.2,.75,.25,1) both;animation-delay:var(--bgx-d,0ms)}
.bgx-anim .shell>.panel.bgx-in:not(.bgx-done)::before{animation:bgxOrn .7s ease-out both;animation-delay:calc(var(--bgx-d,0ms) + 350ms)}
.bgx-anim header.bgx-in:not(.bgx-done){animation:bgxDown .9s cubic-bezier(.2,.75,.25,1) both}
@keyframes bgxDown{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}
@keyframes bgxOrn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes bgxRise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes bgxSoft{from{opacity:0;transform:translateY(10px) scale(.985);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes bgxOpen{from{opacity:0;transform:perspective(900px) rotateX(-16deg) translateY(18px);transform-origin:50% 0}to{opacity:1;transform:none;transform-origin:50% 0}}
@keyframes bgxUnfold{0%{opacity:0;transform:scale(.9,.55)}60%{opacity:1;transform:scale(1.015,1.02)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bgx-anim .shell>.panel:not(.bgx-in),.bgx-anim header:not(.bgx-in){opacity:1}.bgx-anim *{animation:none!important}}

/* night */
html[data-bg=night]{--t-img:url('bg/night.webp');--t-paper:#fbf4e2;--t-frame:#1f5a3a;--t-line:#9fb79f;--t-gold:#c9a14a;--t-ink:#2b241a;--t-ink2:#5b4f40;--t-head:#1f5a3a;--t-base:#163423;--t-radius:14px;--t-ratio:.667;--t-veil:#fbf4e2cc;--t-anim:bgxRise;--t-orn-pos:center top 22px,left top 32px,right top 32px,left bottom,right bottom;--t-orn-size:120px 44px,36px 36px,36px 36px,36px 36px,36px 36px}
html[data-bg=night] .shell .panel::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 44'%3E%3Cpath d='M4 22H40M80 22H116' stroke='%23c9a14a' stroke-width='1.6'/%3E%3Ccircle cx='44' cy='22' r='2' fill='%23c9a14a'/%3E%3Ccircle cx='76' cy='22' r='2' fill='%23c9a14a'/%3E%3Ccircle cx='60' cy='22' r='18' fill='%231f5a3a' stroke='%23c9a14a' stroke-width='2.4'/%3E%3Ccircle cx='60' cy='22' r='14.5' fill='none' stroke='%23c9a14a' stroke-width='.8' opacity='.7'/%3E%3Cpath d='M63 11A11 11 0 1 0 63 33A9 9 0 1 1 63 11Z' fill='%23f0d68a'/%3E%3Cpath d='M66 17.5l1.1 2.4 2.6.3-1.9 1.8.5 2.6-2.3-1.3-2.3 1.3.5-2.6-1.9-1.8 2.6-.3z' fill='%23f0d68a'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M3 33V12A9 9 0 0 1 12 3H33' fill='none' stroke='%23c9a14a' stroke-width='2.2'/%3E%3Cpath d='M9 33V16A7 7 0 0 1 16 9H33' fill='none' stroke='%23c9a14a' stroke-width='1' opacity='.75'/%3E%3Ccircle cx='13' cy='13' r='2.6' fill='%23c9a14a'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cg transform='matrix(-1 0 0 1 36 0)'%3E%3Cpath d='M3 33V12A9 9 0 0 1 12 3H33' fill='none' stroke='%23c9a14a' stroke-width='2.2'/%3E%3Cpath d='M9 33V16A7 7 0 0 1 16 9H33' fill='none' stroke='%23c9a14a' stroke-width='1' opacity='.75'/%3E%3Ccircle cx='13' cy='13' r='2.6' fill='%23c9a14a'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cg transform='matrix(1 0 0 -1 0 36)'%3E%3Cpath d='M3 33V12A9 9 0 0 1 12 3H33' fill='none' stroke='%23c9a14a' stroke-width='2.2'/%3E%3Cpath d='M9 33V16A7 7 0 0 1 16 9H33' fill='none' stroke='%23c9a14a' stroke-width='1' opacity='.75'/%3E%3Ccircle cx='13' cy='13' r='2.6' fill='%23c9a14a'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cg transform='matrix(-1 0 0 -1 36 36)'%3E%3Cpath d='M3 33V12A9 9 0 0 1 12 3H33' fill='none' stroke='%23c9a14a' stroke-width='2.2'/%3E%3Cpath d='M9 33V16A7 7 0 0 1 16 9H33' fill='none' stroke='%23c9a14a' stroke-width='1' opacity='.75'/%3E%3Ccircle cx='13' cy='13' r='2.6' fill='%23c9a14a'/%3E%3C/g%3E%3C/svg%3E")}
/* sage */
html[data-bg=sage]{--t-img:url('bg/sage.webp');--t-paper:#fcfaf2;--t-frame:#6b8a66;--t-line:#a9bca2;--t-gold:#c6b98f;--t-ink:#2e3329;--t-ink2:#5d6656;--t-head:#4b6b47;--t-base:#c9d5c0;--t-radius:26px;--t-ratio:.667;--t-veil:#fcfaf2bf;--t-anim:bgxSoft;--t-orn-pos:center top 19px,left 6px bottom 2px;--t-orn-size:40px 50px,70px 44px}
html[data-bg=sage] .shell .panel::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 50'%3E%3Cellipse cx='20' cy='14' rx='3.2' ry='6' fill='%236b8a66' transform='rotate(0 20 22)'/%3E%3Cellipse cx='20' cy='14' rx='3.2' ry='6' fill='%236b8a66' transform='rotate(45 20 22)'/%3E%3Cellipse cx='20' cy='14' rx='3.2' ry='6' fill='%236b8a66' transform='rotate(90 20 22)'/%3E%3Cellipse cx='20' cy='14' rx='3.2' ry='6' fill='%236b8a66' transform='rotate(135 20 22)'/%3E%3Cellipse cx='20' cy='14' rx='3.2' ry='6' fill='%236b8a66' transform='rotate(180 20 22)'/%3E%3Cellipse cx='20' cy='14' rx='3.2' ry='6' fill='%236b8a66' transform='rotate(225 20 22)'/%3E%3Cellipse cx='20' cy='14' rx='3.2' ry='6' fill='%236b8a66' transform='rotate(270 20 22)'/%3E%3Cellipse cx='20' cy='14' rx='3.2' ry='6' fill='%236b8a66' transform='rotate(315 20 22)'/%3E%3Ccircle cx='20' cy='22' r='3.6' fill='%23fcfaf2'/%3E%3Ccircle cx='20' cy='22' r='1.6' fill='%236b8a66'/%3E%3Cpath d='M20 33V40' stroke='%236b8a66' stroke-width='1.2'/%3E%3Cpath d='M20 39L23 43.5L20 48L17 43.5Z' fill='%236b8a66'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 44'%3E%3Cpath d='M4 40C20 36 36 26 52 8' fill='none' stroke='%236b8a66' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M18 34C14 26 18 20 24 18C26 26 22 32 18 34Z' fill='%236b8a66' opacity='.85'/%3E%3Cpath d='M30 28C32 20 38 17 44 18C40 25 36 28 30 28Z' fill='%236b8a66' opacity='.7'/%3E%3Cpath d='M38 20C36 12 40 6 46 4C48 12 44 17 38 20Z' fill='%236b8a66' opacity='.85'/%3E%3Cg fill='%23fff' stroke='%23a9bca2' stroke-width='.6'%3E%3Ccircle cx='52' cy='8' r='3'/%3E%3Ccircle cx='26' cy='31' r='2.4'/%3E%3Ccircle cx='12' cy='38' r='2'/%3E%3C/g%3E%3C/svg%3E")}
html[data-bg=sage]{--t-div:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 12'%3E%3Cpath d='M4 6H66M94 6H156' stroke='%23a9bca2' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='70' cy='6' r='1.6' fill='%23a9bca2'/%3E%3Ccircle cx='90' cy='6' r='1.6' fill='%23a9bca2'/%3E%3Cpath d='M80 0.5L85.5 6L80 11.5L74.5 6Z' fill='%23fcfaf2' stroke='%23a9bca2' stroke-width='1'/%3E%3C/svg%3E")}
/* blue */
html[data-bg=blue]{--t-img:url('bg/blue.webp');--t-paper:#fdf8ec;--t-frame:#4a6a8e;--t-line:#9fb3c9;--t-gold:#c9a35a;--t-ink:#26303b;--t-ink2:#56606b;--t-head:#36557a;--t-base:#34506f;--t-radius:90px 90px 14px 14px;--t-ratio:.708;--t-veil:#fdf8ecd0;--t-anim:bgxOpen;--t-orn-pos:center top 14px,left bottom,right bottom;--t-orn-size:120px 60px,34px 34px,34px 34px}
html[data-bg=blue] .shell .panel::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cpath d='M4 30H34M86 30H116' stroke='%23c9a35a' stroke-width='1.6'/%3E%3Cpath d='M30 30L34 26L38 30L34 34Z' fill='%23c9a35a'/%3E%3Cpath d='M82 30L86 26L90 30L86 34Z' fill='%23c9a35a'/%3E%3Cg transform='translate(30 0)'%3E%3Cpath d='M30 4L36.5 15.5L49.5 10.5L44.5 23.5L56 30L44.5 36.5L49.5 49.5L36.5 44.5L30 56L23.5 44.5L10.5 49.5L15.5 36.5L4 30L15.5 23.5L10.5 10.5L23.5 15.5Z' fill='%234a6a8e' stroke='%23c9a35a' stroke-width='2'/%3E%3Ccircle cx='30' cy='30' r='11' fill='%23fdf8ec' stroke='%23c9a35a' stroke-width='1.6'/%3E%3Cpath d='M30 22L33 27L38.5 27.5L34 31L35.5 36.5L30 33.5L24.5 36.5L26 31L21.5 27.5L27 27Z' fill='%234a6a8e'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cg transform='matrix(1 0 0 -1 0 34)'%3E%3Cpath d='M4 30C4 16 16 4 30 4' fill='none' stroke='%23c9a35a' stroke-width='1.6'/%3E%3Cpath d='M10 30C10 19 19 10 30 10' fill='none' stroke='%234a6a8e' stroke-width='1' opacity='.7'/%3E%3Cpath d='M6 6L11 3L16 6L11 9Z' fill='%23c9a35a'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cg transform='matrix(-1 0 0 -1 34 34)'%3E%3Cpath d='M4 30C4 16 16 4 30 4' fill='none' stroke='%23c9a35a' stroke-width='1.6'/%3E%3Cpath d='M10 30C10 19 19 10 30 10' fill='none' stroke='%234a6a8e' stroke-width='1' opacity='.7'/%3E%3Cpath d='M6 6L11 3L16 6L11 9Z' fill='%23c9a35a'/%3E%3C/g%3E%3C/svg%3E")}
html[data-bg=blue]{--t-div:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 12'%3E%3Cpath d='M4 6H66M94 6H156' stroke='%23c9a35a' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='70' cy='6' r='1.6' fill='%23c9a35a'/%3E%3Ccircle cx='90' cy='6' r='1.6' fill='%23c9a35a'/%3E%3Cpath d='M80 0.5L85.5 6L80 11.5L74.5 6Z' fill='%234a6a8e' stroke='%23c9a35a' stroke-width='1'/%3E%3C/svg%3E")}
/* garden */
html[data-bg=garden]{--t-img:url('bg/garden.webp');--t-paper:#fdf8e8;--t-frame:#3c7a66;--t-line:#8fb7a6;--t-gold:#cdae6a;--t-ink:#24302b;--t-ink2:#55635c;--t-head:#2e6957;--t-base:#a8c2b1;--t-radius:18px;--t-ratio:.563;--t-veil:#fdf8e8d9;--t-anim:bgxUnfold;--t-orn-pos:center top 33px,left 0 top calc(50% + 16px),right 0 top calc(50% + 16px),center bottom 1px;--t-orn-size:44px 22px,28px 56px,28px 56px,44px 22px}
html[data-bg=garden] .shell .panel::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 22'%3E%3Cpath d='M22 1L30 11L22 21L14 11Z' fill='%233c7a66' stroke='%23cdae6a' stroke-width='1.5'/%3E%3Ccircle cx='22' cy='11' r='2.2' fill='%23cdae6a'/%3E%3Ccircle cx='9' cy='11' r='2' fill='%23cdae6a'/%3E%3Ccircle cx='35' cy='11' r='2' fill='%23cdae6a'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 56'%3E%3Cpath d='M14 1C20 10 27 18 27 28C27 38 20 46 14 55C8 46 1 38 1 28C1 18 8 10 14 1Z' fill='%233c7a66' stroke='%23cdae6a' stroke-width='1.8'/%3E%3Cpath d='M14 7C18.5 14 23 20 23 28C23 36 18.5 42 14 49C9.5 42 5 36 5 28C5 20 9.5 14 14 7Z' fill='none' stroke='%23cdae6a' stroke-width='.8' opacity='.8'/%3E%3Cellipse cx='14' cy='22.6' rx='2.4' ry='3.8' fill='%23fbf3df' transform='rotate(0 14 28)'/%3E%3Cellipse cx='14' cy='22.6' rx='2.4' ry='3.8' fill='%23fbf3df' transform='rotate(72 14 28)'/%3E%3Cellipse cx='14' cy='22.6' rx='2.4' ry='3.8' fill='%23fbf3df' transform='rotate(144 14 28)'/%3E%3Cellipse cx='14' cy='22.6' rx='2.4' ry='3.8' fill='%23fbf3df' transform='rotate(216 14 28)'/%3E%3Cellipse cx='14' cy='22.6' rx='2.4' ry='3.8' fill='%23fbf3df' transform='rotate(288 14 28)'/%3E%3Ccircle cx='14' cy='28' r='2' fill='%23cdae6a'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 56'%3E%3Cpath d='M14 1C20 10 27 18 27 28C27 38 20 46 14 55C8 46 1 38 1 28C1 18 8 10 14 1Z' fill='%233c7a66' stroke='%23cdae6a' stroke-width='1.8'/%3E%3Cpath d='M14 7C18.5 14 23 20 23 28C23 36 18.5 42 14 49C9.5 42 5 36 5 28C5 20 9.5 14 14 7Z' fill='none' stroke='%23cdae6a' stroke-width='.8' opacity='.8'/%3E%3Cellipse cx='14' cy='22.6' rx='2.4' ry='3.8' fill='%23fbf3df' transform='rotate(0 14 28)'/%3E%3Cellipse cx='14' cy='22.6' rx='2.4' ry='3.8' fill='%23fbf3df' transform='rotate(72 14 28)'/%3E%3Cellipse cx='14' cy='22.6' rx='2.4' ry='3.8' fill='%23fbf3df' transform='rotate(144 14 28)'/%3E%3Cellipse cx='14' cy='22.6' rx='2.4' ry='3.8' fill='%23fbf3df' transform='rotate(216 14 28)'/%3E%3Cellipse cx='14' cy='22.6' rx='2.4' ry='3.8' fill='%23fbf3df' transform='rotate(288 14 28)'/%3E%3Ccircle cx='14' cy='28' r='2' fill='%23cdae6a'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 22'%3E%3Cpath d='M22 1L30 11L22 21L14 11Z' fill='%233c7a66' stroke='%23cdae6a' stroke-width='1.5'/%3E%3Ccircle cx='22' cy='11' r='2.2' fill='%23cdae6a'/%3E%3Ccircle cx='9' cy='11' r='2' fill='%23cdae6a'/%3E%3Ccircle cx='35' cy='11' r='2' fill='%23cdae6a'/%3E%3C/svg%3E")}
html[data-bg=garden]{--t-div:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 12'%3E%3Cpath d='M4 6H66M94 6H156' stroke='%23cdae6a' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='70' cy='6' r='1.6' fill='%23cdae6a'/%3E%3Ccircle cx='90' cy='6' r='1.6' fill='%23cdae6a'/%3E%3Cpath d='M80 0.5L85.5 6L80 11.5L74.5 6Z' fill='%233c7a66' stroke='%23cdae6a' stroke-width='1'/%3E%3C/svg%3E")}
/* dark */
html[data-bg=dark]{--t-paper:#1d1916;--t-frame:#8b6b3d;--t-line:#4a3d2c;--t-gold:#c9a35a;--t-ink:#eadfc8;--t-ink2:#b8aa8f;--t-head:#d9b56b;--t-base:#0d0b0a;--t-radius:14px;--t-ratio:.7;--t-veil:#1d1916d9;--t-anim:bgxSoft;--t-orn-pos:center top 22px,left top 32px,right top 32px,left bottom,right bottom;--t-orn-size:120px 40px,36px 36px,36px 36px,36px 36px,36px 36px}
html[data-bg=dark] .shell .panel::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40'%3E%3Cpath d='M4 20H44M76 20H116' stroke='%23c9a35a' stroke-width='1.3'/%3E%3Ccircle cx='48' cy='20' r='1.8' fill='%23c9a35a'/%3E%3Ccircle cx='72' cy='20' r='1.8' fill='%23c9a35a'/%3E%3Cpath d='M60 3C66 12 69 16 69 22A9 9 0 0 1 51 22C51 16 54 12 60 3Z' fill='%231d1916' stroke='%23c9a35a' stroke-width='1.8'/%3E%3Cpath d='M60 11C63 16 64.5 18.5 64.5 22A4.5 4.5 0 0 1 55.5 22C55.5 18.5 57 16 60 11Z' fill='%23c9a35a' opacity='.85'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M3 33V12A9 9 0 0 1 12 3H33' fill='none' stroke='%23c9a35a' stroke-width='1.8'/%3E%3Cpath d='M9 33V16A7 7 0 0 1 16 9H33' fill='none' stroke='%238b6b3d' stroke-width='1'/%3E%3Cpath d='M13 9L17 13L13 17L9 13Z' fill='%23c9a35a'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cg transform='matrix(-1 0 0 1 36 0)'%3E%3Cpath d='M3 33V12A9 9 0 0 1 12 3H33' fill='none' stroke='%23c9a35a' stroke-width='1.8'/%3E%3Cpath d='M9 33V16A7 7 0 0 1 16 9H33' fill='none' stroke='%238b6b3d' stroke-width='1'/%3E%3Cpath d='M13 9L17 13L13 17L9 13Z' fill='%23c9a35a'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cg transform='matrix(1 0 0 -1 0 36)'%3E%3Cpath d='M3 33V12A9 9 0 0 1 12 3H33' fill='none' stroke='%23c9a35a' stroke-width='1.8'/%3E%3Cpath d='M9 33V16A7 7 0 0 1 16 9H33' fill='none' stroke='%238b6b3d' stroke-width='1'/%3E%3Cpath d='M13 9L17 13L13 17L9 13Z' fill='%23c9a35a'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cg transform='matrix(-1 0 0 -1 36 36)'%3E%3Cpath d='M3 33V12A9 9 0 0 1 12 3H33' fill='none' stroke='%23c9a35a' stroke-width='1.8'/%3E%3Cpath d='M9 33V16A7 7 0 0 1 16 9H33' fill='none' stroke='%238b6b3d' stroke-width='1'/%3E%3Cpath d='M13 9L17 13L13 17L9 13Z' fill='%23c9a35a'/%3E%3C/g%3E%3C/svg%3E")}
html[data-bg=dark]{--t-div:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 12'%3E%3Cpath d='M4 6H66M94 6H156' stroke='%23c9a35a' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='70' cy='6' r='1.6' fill='%23c9a35a'/%3E%3Ccircle cx='90' cy='6' r='1.6' fill='%23c9a35a'/%3E%3Cpath d='M80 0.5L85.5 6L80 11.5L74.5 6Z' fill='%231d1916' stroke='%23c9a35a' stroke-width='1'/%3E%3C/svg%3E")}
html[data-bg=night] .shell .panel h2{display:table;margin:2px auto 12px;padding:0 34px;background:linear-gradient(#26663f,#1a4a30);color:#f6e3ad;border:1.5px solid var(--t-gold);border-radius:12px;box-shadow:inset 0 0 0 3px #1f5a3a,inset 0 0 0 4px #c9a14a99,0 3px 8px #0003;line-height:1.7}
html[data-bg=night] .shell .panel>h2::after,html[data-bg=night] .shell .panel>.chl-head>h2::after{display:none}
html[data-bg=garden] .shell .panel{padding-inline:34px}
@media(max-width:600px){html[data-bg=night] .shell .panel h2{padding:0 22px}html[data-bg=garden] .shell .panel{padding-inline:26px}}
/* کادرهای جدا (گزینه‌های صفحه اول): قاب دولایه با مدال گل‌دار در دو طرف و گره کوچک بالا و پایین، مثل تصویر نمونه */
html[data-bg] .shell .panel.intro-split{background:none;border:0;box-shadow:none;padding:0;margin-bottom:34px}
html[data-bg] .shell .panel.intro-split::before{display:none}
html[data-bg] .bgx-frame{position:relative;display:block;margin:30px 24px;padding:18px 40px;background:var(--t-paper);color:var(--t-ink);text-shadow:none;
  border:2px solid var(--t-gold);border-radius:16px;box-shadow:inset 0 0 0 4px var(--t-paper),inset 0 0 0 6.5px var(--t-frame),inset 0 0 0 8px var(--t-gold),0 8px 22px rgba(0,0,0,.18)}
html[data-bg] .bgx-frame::before{content:"";position:absolute;pointer-events:none;inset:-11px -22px;background-repeat:no-repeat;background-size:34px 64px,34px 64px,40px 20px,40px 20px;background-position:left 4px center,right 4px center,center top 1px,center bottom 1px}
html[data-bg] .shell .intro-head{text-align:center;padding-top:22px}
html[data-bg] .shell .intro-head>h2::after{content:"";display:block;width:160px;height:12px;margin:0 auto;background:var(--t-div) center/contain no-repeat}
/* «نوران» در همه زمینه‌ها ساده و بی‌کادر است (لوح سبز فقط برای عنوان بقیه کادرهای سبز شب) */
html[data-bg=night] .shell .intro-head>h2.brand{display:block;margin:0;padding:0;background:none;border:0;box-shadow:none;color:var(--t-head);line-height:1.45}
html[data-bg] .shell .intro-head .lead{margin:6px 0 0}
html[data-bg] .shell .intro-head .hint{margin:6px 0 0;font-size:15px}
html[data-bg] .intro-opt{text-decoration:none;text-align:center;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
html[data-bg] .intro-opt:hover,html[data-bg] .intro-opt:focus-visible{transform:translateY(-2px);box-shadow:inset 0 0 0 4px var(--t-paper),inset 0 0 0 6.5px var(--t-frame),inset 0 0 0 8px var(--t-gold),0 12px 26px rgba(0,0,0,.24);outline:none}
html[data-bg] .intro-opt b{display:block;font:normal 32px/1.6 SiteFont,Tahoma,serif;color:var(--t-head)}
html[data-bg] .intro-opt span{display:block;font-size:15px;line-height:1.85;color:var(--t-ink2)}
html[data-bg] .shell .panel.intro-split .intro-notice.bgx-frame{border-right-width:2px;border-right-color:var(--t-gold);padding:18px 40px}
html[data-bg] .shell .panel.intro-split .intro-notice b{text-align:center}
html[data-bg] .shell .panel.intro-split>.intro-tools,html[data-bg] .shell .panel.intro-split>.intro-acc{margin:0 24px}
@media(max-width:600px){html[data-bg] .bgx-frame{margin:26px 18px;padding:16px 30px}html[data-bg] .shell .panel.intro-split .intro-notice.bgx-frame{padding:16px 30px}html[data-bg] .intro-opt b{font-size:28px}html[data-bg] .shell .panel.intro-split>.intro-tools{margin:0 6px}}
.bgx-anim .bgx-frame:not(.bgx-in){opacity:0}
.bgx-anim .bgx-frame.bgx-in:not(.bgx-done){animation:var(--t-anim) .8s cubic-bezier(.2,.75,.25,1) both;animation-delay:var(--bgx-d,0ms)}
.bgx-anim .bgx-frame.bgx-in:not(.bgx-done)::before{animation:bgxOrn .7s ease-out both;animation-delay:calc(var(--bgx-d,0ms) + 350ms)}
@media (prefers-reduced-motion:reduce){.bgx-anim .bgx-frame:not(.bgx-in){opacity:1}}
html[data-bg=night] .bgx-frame::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 64'%3E%3Cpath d='M34 3C26 3 24 10 18 12C11 14 13 22 6 25C1 27.5 1 36.5 6 39C13 42 11 50 18 52C24 54 26 61 34 61Z' fill='%231f5a3a' stroke='%23c9a14a' stroke-width='2'/%3E%3Cpath d='M34 9C28 9 26 15 21 17C16 19 17 25 11 28C8 29.5 8 34.5 11 36C17 39 16 45 21 47C26 49 28 55 34 55' fill='none' stroke='%23c9a14a' stroke-width='.9' opacity='.8'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%23fbf4e2' transform='rotate(0 17 32)'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%23fbf4e2' transform='rotate(72 17 32)'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%23fbf4e2' transform='rotate(144 17 32)'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%23fbf4e2' transform='rotate(216 17 32)'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%23fbf4e2' transform='rotate(288 17 32)'/%3E%3Ccircle cx='17' cy='32' r='2.2' fill='%23c9a14a'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 64'%3E%3Cg transform='matrix(-1 0 0 1 34 0)'%3E%3Cpath d='M34 3C26 3 24 10 18 12C11 14 13 22 6 25C1 27.5 1 36.5 6 39C13 42 11 50 18 52C24 54 26 61 34 61Z' fill='%231f5a3a' stroke='%23c9a14a' stroke-width='2'/%3E%3Cpath d='M34 9C28 9 26 15 21 17C16 19 17 25 11 28C8 29.5 8 34.5 11 36C17 39 16 45 21 47C26 49 28 55 34 55' fill='none' stroke='%23c9a14a' stroke-width='.9' opacity='.8'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%23fbf4e2' transform='rotate(0 17 32)'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%23fbf4e2' transform='rotate(72 17 32)'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%23fbf4e2' transform='rotate(144 17 32)'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%23fbf4e2' transform='rotate(216 17 32)'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%23fbf4e2' transform='rotate(288 17 32)'/%3E%3Ccircle cx='17' cy='32' r='2.2' fill='%23c9a14a'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath d='M3 10C9 10 11 4 16 6M37 10C31 10 29 4 24 6M3 10C9 10 11 16 16 14M37 10C31 10 29 16 24 14' fill='none' stroke='%23c9a14a' stroke-width='1.3'/%3E%3Cpath d='M20 1L28 10L20 19L12 10Z' fill='%231f5a3a' stroke='%23c9a14a' stroke-width='1.5'/%3E%3Ccircle cx='20' cy='10' r='2.3' fill='%23fbf4e2'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath d='M3 10C9 10 11 4 16 6M37 10C31 10 29 4 24 6M3 10C9 10 11 16 16 14M37 10C31 10 29 16 24 14' fill='none' stroke='%23c9a14a' stroke-width='1.3'/%3E%3Cpath d='M20 1L28 10L20 19L12 10Z' fill='%231f5a3a' stroke='%23c9a14a' stroke-width='1.5'/%3E%3Ccircle cx='20' cy='10' r='2.3' fill='%23fbf4e2'/%3E%3C/svg%3E")}
html[data-bg=sage] .bgx-frame::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 64'%3E%3Cpath d='M34 3C26 3 24 10 18 12C11 14 13 22 6 25C1 27.5 1 36.5 6 39C13 42 11 50 18 52C24 54 26 61 34 61Z' fill='%236b8a66' stroke='%23c6b98f' stroke-width='2'/%3E%3Cpath d='M34 9C28 9 26 15 21 17C16 19 17 25 11 28C8 29.5 8 34.5 11 36C17 39 16 45 21 47C26 49 28 55 34 55' fill='none' stroke='%23c6b98f' stroke-width='.9' opacity='.8'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%23fcfaf2' transform='rotate(0 17 32)'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%23fcfaf2' transform='rotate(72 17 32)'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%23fcfaf2' transform='rotate(144 17 32)'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%23fcfaf2' transform='rotate(216 17 32)'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%23fcfaf2' transform='rotate(288 17 32)'/%3E%3Ccircle cx='17' cy='32' r='2.2' fill='%23c6b98f'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 64'%3E%3Cg transform='matrix(-1 0 0 1 34 0)'%3E%3Cpath d='M34 3C26 3 24 10 18 12C11 14 13 22 6 25C1 27.5 1 36.5 6 39C13 42 11 50 18 52C24 54 26 61 34 61Z' fill='%236b8a66' stroke='%23c6b98f' stroke-width='2'/%3E%3Cpath d='M34 9C28 9 26 15 21 17C16 19 17 25 11 28C8 29.5 8 34.5 11 36C17 39 16 45 21 47C26 49 28 55 34 55' fill='none' stroke='%23c6b98f' stroke-width='.9' opacity='.8'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%23fcfaf2' transform='rotate(0 17 32)'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%23fcfaf2' transform='rotate(72 17 32)'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%23fcfaf2' transform='rotate(144 17 32)'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%23fcfaf2' transform='rotate(216 17 32)'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%23fcfaf2' transform='rotate(288 17 32)'/%3E%3Ccircle cx='17' cy='32' r='2.2' fill='%23c6b98f'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath d='M3 10C9 10 11 4 16 6M37 10C31 10 29 4 24 6M3 10C9 10 11 16 16 14M37 10C31 10 29 16 24 14' fill='none' stroke='%23c6b98f' stroke-width='1.3'/%3E%3Cpath d='M20 1L28 10L20 19L12 10Z' fill='%236b8a66' stroke='%23c6b98f' stroke-width='1.5'/%3E%3Ccircle cx='20' cy='10' r='2.3' fill='%23fcfaf2'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath d='M3 10C9 10 11 4 16 6M37 10C31 10 29 4 24 6M3 10C9 10 11 16 16 14M37 10C31 10 29 16 24 14' fill='none' stroke='%23c6b98f' stroke-width='1.3'/%3E%3Cpath d='M20 1L28 10L20 19L12 10Z' fill='%236b8a66' stroke='%23c6b98f' stroke-width='1.5'/%3E%3Ccircle cx='20' cy='10' r='2.3' fill='%23fcfaf2'/%3E%3C/svg%3E")}
html[data-bg=blue] .bgx-frame::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 64'%3E%3Cpath d='M34 3C26 3 24 10 18 12C11 14 13 22 6 25C1 27.5 1 36.5 6 39C13 42 11 50 18 52C24 54 26 61 34 61Z' fill='%234a6a8e' stroke='%23c9a35a' stroke-width='2'/%3E%3Cpath d='M34 9C28 9 26 15 21 17C16 19 17 25 11 28C8 29.5 8 34.5 11 36C17 39 16 45 21 47C26 49 28 55 34 55' fill='none' stroke='%23c9a35a' stroke-width='.9' opacity='.8'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%23fdf8ec' transform='rotate(0 17 32)'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%23fdf8ec' transform='rotate(72 17 32)'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%23fdf8ec' transform='rotate(144 17 32)'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%23fdf8ec' transform='rotate(216 17 32)'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%23fdf8ec' transform='rotate(288 17 32)'/%3E%3Ccircle cx='17' cy='32' r='2.2' fill='%23c9a35a'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 64'%3E%3Cg transform='matrix(-1 0 0 1 34 0)'%3E%3Cpath d='M34 3C26 3 24 10 18 12C11 14 13 22 6 25C1 27.5 1 36.5 6 39C13 42 11 50 18 52C24 54 26 61 34 61Z' fill='%234a6a8e' stroke='%23c9a35a' stroke-width='2'/%3E%3Cpath d='M34 9C28 9 26 15 21 17C16 19 17 25 11 28C8 29.5 8 34.5 11 36C17 39 16 45 21 47C26 49 28 55 34 55' fill='none' stroke='%23c9a35a' stroke-width='.9' opacity='.8'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%23fdf8ec' transform='rotate(0 17 32)'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%23fdf8ec' transform='rotate(72 17 32)'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%23fdf8ec' transform='rotate(144 17 32)'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%23fdf8ec' transform='rotate(216 17 32)'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%23fdf8ec' transform='rotate(288 17 32)'/%3E%3Ccircle cx='17' cy='32' r='2.2' fill='%23c9a35a'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath d='M3 10C9 10 11 4 16 6M37 10C31 10 29 4 24 6M3 10C9 10 11 16 16 14M37 10C31 10 29 16 24 14' fill='none' stroke='%23c9a35a' stroke-width='1.3'/%3E%3Cpath d='M20 1L28 10L20 19L12 10Z' fill='%234a6a8e' stroke='%23c9a35a' stroke-width='1.5'/%3E%3Ccircle cx='20' cy='10' r='2.3' fill='%23fdf8ec'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath d='M3 10C9 10 11 4 16 6M37 10C31 10 29 4 24 6M3 10C9 10 11 16 16 14M37 10C31 10 29 16 24 14' fill='none' stroke='%23c9a35a' stroke-width='1.3'/%3E%3Cpath d='M20 1L28 10L20 19L12 10Z' fill='%234a6a8e' stroke='%23c9a35a' stroke-width='1.5'/%3E%3Ccircle cx='20' cy='10' r='2.3' fill='%23fdf8ec'/%3E%3C/svg%3E")}
html[data-bg=garden] .bgx-frame::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 64'%3E%3Cpath d='M34 3C26 3 24 10 18 12C11 14 13 22 6 25C1 27.5 1 36.5 6 39C13 42 11 50 18 52C24 54 26 61 34 61Z' fill='%233c7a66' stroke='%23cdae6a' stroke-width='2'/%3E%3Cpath d='M34 9C28 9 26 15 21 17C16 19 17 25 11 28C8 29.5 8 34.5 11 36C17 39 16 45 21 47C26 49 28 55 34 55' fill='none' stroke='%23cdae6a' stroke-width='.9' opacity='.8'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%23fdf8e8' transform='rotate(0 17 32)'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%23fdf8e8' transform='rotate(72 17 32)'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%23fdf8e8' transform='rotate(144 17 32)'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%23fdf8e8' transform='rotate(216 17 32)'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%23fdf8e8' transform='rotate(288 17 32)'/%3E%3Ccircle cx='17' cy='32' r='2.2' fill='%23cdae6a'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 64'%3E%3Cg transform='matrix(-1 0 0 1 34 0)'%3E%3Cpath d='M34 3C26 3 24 10 18 12C11 14 13 22 6 25C1 27.5 1 36.5 6 39C13 42 11 50 18 52C24 54 26 61 34 61Z' fill='%233c7a66' stroke='%23cdae6a' stroke-width='2'/%3E%3Cpath d='M34 9C28 9 26 15 21 17C16 19 17 25 11 28C8 29.5 8 34.5 11 36C17 39 16 45 21 47C26 49 28 55 34 55' fill='none' stroke='%23cdae6a' stroke-width='.9' opacity='.8'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%23fdf8e8' transform='rotate(0 17 32)'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%23fdf8e8' transform='rotate(72 17 32)'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%23fdf8e8' transform='rotate(144 17 32)'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%23fdf8e8' transform='rotate(216 17 32)'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%23fdf8e8' transform='rotate(288 17 32)'/%3E%3Ccircle cx='17' cy='32' r='2.2' fill='%23cdae6a'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath d='M3 10C9 10 11 4 16 6M37 10C31 10 29 4 24 6M3 10C9 10 11 16 16 14M37 10C31 10 29 16 24 14' fill='none' stroke='%23cdae6a' stroke-width='1.3'/%3E%3Cpath d='M20 1L28 10L20 19L12 10Z' fill='%233c7a66' stroke='%23cdae6a' stroke-width='1.5'/%3E%3Ccircle cx='20' cy='10' r='2.3' fill='%23fdf8e8'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath d='M3 10C9 10 11 4 16 6M37 10C31 10 29 4 24 6M3 10C9 10 11 16 16 14M37 10C31 10 29 16 24 14' fill='none' stroke='%23cdae6a' stroke-width='1.3'/%3E%3Cpath d='M20 1L28 10L20 19L12 10Z' fill='%233c7a66' stroke='%23cdae6a' stroke-width='1.5'/%3E%3Ccircle cx='20' cy='10' r='2.3' fill='%23fdf8e8'/%3E%3C/svg%3E")}
html[data-bg=dark] .bgx-frame::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 64'%3E%3Cpath d='M34 3C26 3 24 10 18 12C11 14 13 22 6 25C1 27.5 1 36.5 6 39C13 42 11 50 18 52C24 54 26 61 34 61Z' fill='%238b6b3d' stroke='%23c9a35a' stroke-width='2'/%3E%3Cpath d='M34 9C28 9 26 15 21 17C16 19 17 25 11 28C8 29.5 8 34.5 11 36C17 39 16 45 21 47C26 49 28 55 34 55' fill='none' stroke='%23c9a35a' stroke-width='.9' opacity='.8'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%231d1916' transform='rotate(0 17 32)'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%231d1916' transform='rotate(72 17 32)'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%231d1916' transform='rotate(144 17 32)'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%231d1916' transform='rotate(216 17 32)'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%231d1916' transform='rotate(288 17 32)'/%3E%3Ccircle cx='17' cy='32' r='2.2' fill='%23c9a35a'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 64'%3E%3Cg transform='matrix(-1 0 0 1 34 0)'%3E%3Cpath d='M34 3C26 3 24 10 18 12C11 14 13 22 6 25C1 27.5 1 36.5 6 39C13 42 11 50 18 52C24 54 26 61 34 61Z' fill='%238b6b3d' stroke='%23c9a35a' stroke-width='2'/%3E%3Cpath d='M34 9C28 9 26 15 21 17C16 19 17 25 11 28C8 29.5 8 34.5 11 36C17 39 16 45 21 47C26 49 28 55 34 55' fill='none' stroke='%23c9a35a' stroke-width='.9' opacity='.8'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%231d1916' transform='rotate(0 17 32)'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%231d1916' transform='rotate(72 17 32)'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%231d1916' transform='rotate(144 17 32)'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%231d1916' transform='rotate(216 17 32)'/%3E%3Cellipse cx='17' cy='26.5' rx='2.6' ry='4' fill='%231d1916' transform='rotate(288 17 32)'/%3E%3Ccircle cx='17' cy='32' r='2.2' fill='%23c9a35a'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath d='M3 10C9 10 11 4 16 6M37 10C31 10 29 4 24 6M3 10C9 10 11 16 16 14M37 10C31 10 29 16 24 14' fill='none' stroke='%23c9a35a' stroke-width='1.3'/%3E%3Cpath d='M20 1L28 10L20 19L12 10Z' fill='%238b6b3d' stroke='%23c9a35a' stroke-width='1.5'/%3E%3Ccircle cx='20' cy='10' r='2.3' fill='%231d1916'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath d='M3 10C9 10 11 4 16 6M37 10C31 10 29 4 24 6M3 10C9 10 11 16 16 14M37 10C31 10 29 16 24 14' fill='none' stroke='%23c9a35a' stroke-width='1.3'/%3E%3Cpath d='M20 1L28 10L20 19L12 10Z' fill='%238b6b3d' stroke='%23c9a35a' stroke-width='1.5'/%3E%3Ccircle cx='20' cy='10' r='2.3' fill='%231d1916'/%3E%3C/svg%3E")}