/* ============================================
   variables.css
   CSS Custom Properties untuk seluruh project
   Undangan Digital Tema Jawa
   ============================================ */

:root {

   /* ==================================================
      MUSIC / VINYL CONTROL
      Posisi memakai jarak dari sisi kanan dan bawah layar.
   ================================================== */
   --music-vinyl-size: 58px;
   --music-vinyl-right: 16px;
   --music-vinyl-bottom: 18px;
   --music-vinyl-icon-size: 14px;
   --music-vinyl-spin-duration: 4s;
   --music-vinyl-z: 9998;

   /* ==================================================
      PARALLAX BACKGROUND
      0 = transparan penuh, 1 = tidak transparan
   ================================================== */
   /* Warna lapisan background transparan. Bisa memakai format hex, misalnya #f4e9da. */
   --parallax-background-color: #f0e3ce;
   --parallax-background-opacity: 0.6;
   /* 0px = tajam/tanpa blur; semakin besar nilainya semakin blur */
   --parallax-background-blur: 0.2px;

   /* ==================================================
     COVER / 01_cover
  ================================================== */

   /* Cover base */
   --cover-width: 393px;
   --cover-height: 852px;
   --cover-bg: #f4e9da;
   --cover-z: 9999;
   /* Intensitas bayangan/cahaya global cover: 0 = tanpa bayangan, 0.28 = standar. */
   --cover-shadow-opacity: 0.1;

   /* Loading aset sebelum cover dapat dibuka */
   --cover-loading-y: 155px;
   --cover-loading-color: #6d4a31;
   --cover-loading-spinner-size: 18px;
   --cover-loading-font-size: 12px;
   --cover-loading-width: 310px;
   --cover-loading-line-height: 1.35;
   --cover-loading-gap: 9px;
   --cover-loading-speed: 0.8s;

   /* Cover text top: "A Special Message Awaits.." */
   --cover-top-text-x: 81px;
   --cover-top-text-y: 243px;
   --cover-top-text-width: 238px;
   --cover-top-text-height: 87px;
   --cover-top-text-font-size: 27px;
   --cover-top-text-line-height: 1.45;
   --cover-top-text-letter-spacing: 0em;
   --cover-top-text-color: #000000;
   --cover-top-text-opacity: 1;
   --cover-top-text-rotate: 0deg;
   --cover-top-text-z: 1;

   /* Cover text bottom: "CLICK TO OPEN" */
   --cover-bottom-text-x: 125px;
   --cover-bottom-text-y: 494px;
   --cover-bottom-text-width: 143px;
   --cover-bottom-text-height: 19px;
   --cover-bottom-text-font-size: 14px;
   --cover-bottom-text-line-height: 1.35;
   --cover-bottom-text-letter-spacing: 0.12em;
   --cover-bottom-text-color: #000000;
   --cover-bottom-text-opacity: 1;
   --cover-bottom-text-rotate: 0deg;
   --cover-bottom-text-z: 1;

   /* Cover envelope body */
   --cover-envelope-body-x: 106px;
   --cover-envelope-body-y: 345px;
   --cover-envelope-body-width: 187px;
   --cover-envelope-body-height: 116px;
   --cover-envelope-body-opacity: 1;
   --cover-envelope-body-rotate: 0deg;
   --cover-envelope-body-z: 1;

   /* Cover envelope flap */
   --cover-envelope-flap-x: 106px;
   --cover-envelope-flap-y: 345px;
   --cover-envelope-flap-width: 182px;
   --cover-envelope-flap-height: 81px;
   --cover-envelope-flap-opacity: 1;
   --cover-envelope-flap-rotate: 0deg;
   --cover-envelope-flap-z: 2;

   /* Cover flower 1 (kanan atas amplop) */
   --cover-flower-1-x: 225px;
   --cover-flower-1-y: 310px;
   --cover-flower-1-width: 107px;
   --cover-flower-1-height: 90px;
   --cover-flower-1-opacity: 1;
   --cover-flower-1-rotate: 355deg;
   /* -1 = flip horizontal, 1 = normal */
   --cover-flower-1-flip-x: 1;
   --cover-flower-1-z: 3;

   /* Cover flower 2 (kiri bawah amplop) */
   --cover-flower-2-x: 65px;
   --cover-flower-2-y: 400px;
   --cover-flower-2-width: 106px;
   --cover-flower-2-height: 88px;
   --cover-flower-2-opacity: 1;
   --cover-flower-2-rotate: 0deg;
   --cover-flower-2-z: 1;

   /* Cover wax seal */
   --cover-wax-seal-x: 176px;
   --cover-wax-seal-y: 401px;
   --cover-wax-seal-width: 40px;
   --cover-wax-seal-height: 40px;
   --cover-wax-seal-opacity: 1;
   --cover-wax-seal-rotate: 0deg;
   --cover-wax-seal-z: 3;


   /* ==================================================
     SECTION 1 / 02_Video_Opening
  ================================================== */

   /* Section 1 base */
   --s1-width: 393px;
   --s1-height: 852px;
   --s1-bg: #ffffff;
   --s1-z: 9998;

   /* Section 1 text: THE WEDDING OF */
   --s1-wedding-x: 113px;
   --s1-wedding-y: 120px;
   --s1-wedding-width: 168px;
   --s1-wedding-height: 24px;
   --s1-wedding-font-size: 20px;
   --s1-wedding-line-height: 1.2;
   --s1-wedding-letter-spacing: 0em;
   --s1-wedding-color: #ffffff;
   --s1-wedding-opacity: 1;
   --s1-wedding-rotate: 0deg;
   --s1-wedding-z: 3;

   /* Section 1 text:  */
   --s1-umi-x: 116px;
   --s1-umi-y: 165px;
   --s1-umi-width: 92px;
   --s1-umi-height: 58px;
   --s1-umi-font-size: 48px;
   --s1-umi-line-height: 1.2;
   --s1-umi-letter-spacing: 0em;
   --s1-umi-color: #ffffff;
   --s1-umi-opacity: 1;
   --s1-umi-rotate: 0deg;
   --s1-umi-z: 3;

   /* Section 1 text: & (ampersand) */
   --s1-ampersand-x: 180px;
   --s1-ampersand-y: 220px;
   --s1-ampersand-width: 34px;
   --s1-ampersand-height: 58px;
   --s1-ampersand-font-size: 48px;
   --s1-ampersand-line-height: 1.2;
   --s1-ampersand-letter-spacing: 0em;
   --s1-ampersand-color: #ffffff;
   --s1-ampersand-opacity: 1;
   --s1-ampersand-rotate: 0deg;
   --s1-ampersand-z: 3;

   /* Section 1 text: ILHAM */
   --s1-ilham-x: 125px;
   --s1-ilham-y: 270px;
   --s1-ilham-width: 144px;
   --s1-ilham-height: 58px;
   --s1-ilham-font-size: 48px;
   --s1-ilham-line-height: 1.2;
   --s1-ilham-letter-spacing: 0em;
   --s1-ilham-color: #ffffff;
   --s1-ilham-opacity: 1;
   --s1-ilham-rotate: 0deg;
   --s1-ilham-z: 3;

   /* Section 1 text: Terima kasih... */
   --s1-thanks-x: 82px;
   --s1-thanks-y: 355px;
   --s1-thanks-width: 230px;
   --s1-thanks-height: 38px;
   --s1-thanks-font-size: 16px;
   --s1-thanks-line-height: 1.2;
   --s1-thanks-letter-spacing: 0em;
   --s1-thanks-color: #ffffff;
   --s1-thanks-opacity: 1;
   --s1-thanks-rotate: 0deg;
   --s1-thanks-z: 3;

   /* Section 1 text: Date (03 Juni 2026) */
   --s1-date-x: 143px;
   --s1-date-y: 786px;
   --s1-date-width: 105px;
   --s1-date-height: 24px;
   --s1-date-font-size: 20px;
   --s1-date-line-height: 1.2;
   --s1-date-letter-spacing: 0em;
   --s1-date-color: #ffffff;
   --s1-date-opacity: 1;
   --s1-date-rotate: 0deg;
   --s1-date-z: 3;

   /* Section 1 image/icon/decor: icon_1 */
   --s1-icon1-x: 130px;
   --s1-icon1-y: 334px;
   --s1-icon1-width: 133px;
   --s1-icon1-height: 33px;
   --s1-icon1-opacity: 1;
   --s1-icon1-rotate: 0deg;
   --s1-icon1-z: 3;

   /* Section 1 image/icon/decor: icon_1_2 */
   --s1-icon1-2-x: 157px;
   --s1-icon1-2-y: 777px;
   --s1-icon1-2-width: 80px;
   --s1-icon1-2-height: 20px;
   --s1-icon1-2-opacity: 1;
   --s1-icon1-2-rotate: 0deg;
   --s1-icon1-2-z: 3;

   /* Section 1 overlay/shape: Rectangle 1 */
   --s1-overlay-x: 0px;
   --s1-overlay-y: 0px;
   --s1-overlay-width: 393px;
   --s1-overlay-height: 852px;
   --s1-overlay-color: #545454;
   --s1-overlay-opacity: 0.3;
   --s1-overlay-rotate: 0deg;
   --s1-overlay-z: 2;


   /* ==================================================
     COVER / 01_cover — ENTRANCE ANIMATIONS
  ================================================== */

   --cover-fadein-duration: 0.65s;

   --cover-delay-title-1: 0.1s;
   --cover-delay-title-2: 0.25s;
   --cover-delay-envelope: 0.4s;
   --cover-delay-flower-tr: 0.55s;
   --cover-delay-flower-bl: 0.7s;
   --cover-delay-seal-img: 0.85s;
   --cover-delay-seal-text: 1s;
   --cover-delay-footer: 1.15s;

   --cover-typewriter-duration: 1.8s;
   --cover-typewriter-delay: 1.15s;
   --cover-typewriter-cursor-blink: 0.6s;


   /* ==================================================
     SECTION 2 / 03_Pembuka
  ================================================== */

   /* Section 2 base — Frame Figma: 393 x 557 */
   --s2-width: 393px;
   --s2-height: 557px;
   --s2-bg-color: #f3efe2;
   --s2-z: 9997;

   /* Section 2 background image: Bg_2 (x=27, y=61, w=339, h=430) */
   --s2-bg-x: 27px;
   --s2-bg-y: 61px;
   --s2-bg-width: 339px;
   --s2-bg-height: 430px;
   --s2-bg-opacity: 1;
   --s2-bg-rotate: 0deg;
   --s2-bg-z: 1;

   /* Section 2 element kanan: element_kanan_2 (x=288, y=332, w=98, h=122) */
   --s2-element-kanan-x: 243px;
   --s2-element-kanan-y: 332px;
   --s2-element-kanan-width: 122;
   --s2-element-kanan-height: 122px;
   --s2-element-kanan-opacity: 1;
   --s2-element-kanan-rotate: 0deg;
   --s2-element-kanan-z: 4;

   /* Section 2 element kiri: element_kiri_2 (x=28, y=75, w=75, h=134) */
   --s2-element-kiri-x: 28px;
   --s2-element-kiri-y: 75px;
   --s2-element-kiri-width: 134px;
   --s2-element-kiri-height: 134px;
   --s2-element-kiri-opacity: 1;
   --s2-element-kiri-rotate: 0deg;
   --s2-element-kiri-z: 4;

   /* Section 2 icon atas: icon_atas_2 (x=154, y=67, w=80, h=69) */
   --s2-icon-atas-x: 157px;
   --s2-icon-atas-y: 67px;
   --s2-icon-atas-width: 80px;
   --s2-icon-atas-height: 69px;
   --s2-icon-atas-opacity: 1;
   --s2-icon-atas-rotate: 0deg;
   --s2-icon-atas-z: 3;

   /* Section 2 icon tengah: icon_tengah_2 (x=157, y=142, w=78, h=12) */
   --s2-icon-tengah-x: 157px;
   --s2-icon-tengah-y: 142px;
   --s2-icon-tengah-width: 78px;
   --s2-icon-tengah-height: 12px;
   --s2-icon-tengah-opacity: 1;
   --s2-icon-tengah-rotate: 0deg;
   --s2-icon-tengah-z: 3;

   /* Section 2 pengantin: pengantin_2 (x=86, y=249, w=222, h=205) */
   --s2-pengantin-x: 86px;
   --s2-pengantin-y: 255px;
   --s2-pengantin-width: 222px;
   --s2-pengantin-height: 205px;
   --s2-pengantin-opacity: 1;
   --s2-pengantin-rotate: 0deg;
   --s2-pengantin-z: 2;

   /* Section 2 teks pembuka: teks_pembuka (x=84, y=157, w=226, h=44) */
   --s2-teks-pembuka-x: 84px;
   --s2-teks-pembuka-y: 150px;
   --s2-teks-pembuka-width: 226px;
   --s2-teks-pembuka-height: 44px;
   --s2-teks-pembuka-font-size: 14px;
   --s2-teks-pembuka-line-height: 1.5;
   --s2-teks-pembuka-letter-spacing: 0em;
   --s2-teks-pembuka-color: #ffffff;
   --s2-teks-pembuka-opacity: 1;
   --s2-teks-pembuka-rotate: 0deg;
   --s2-teks-pembuka-z: 3;

   /* Section 2 teks pembuka 2: teks_pembuka_2 (x=146, y=213, w=100, h=23) */
   --s2-teks-pembuka-2-x: 146px;
   --s2-teks-pembuka-2-y: 220px;
   --s2-teks-pembuka-2-width: 100px;
   --s2-teks-pembuka-2-height: 23px;
   --s2-teks-pembuka-2-font-size: 12px;
   --s2-teks-pembuka-2-line-height: 1.4;
   --s2-teks-pembuka-2-letter-spacing: 0em;
   --s2-teks-pembuka-2-color: #ffffff;
   --s2-teks-pembuka-2-opacity: 1;
   --s2-teks-pembuka-2-rotate: 0deg;
   --s2-teks-pembuka-2-z: 3;


   /* ==================================================
     SECTION 2 / 03_Pembuka — ENTRANCE ANIMATIONS
  ================================================== */
   --s2-fadein-duration: 1s;

   --s2-delay-bg: 0.6s;
   --s2-delay-element-kiri: 1.1s;
   --s2-delay-element-kanan: 1.6s;
   --s2-delay-icon-atas: 2.1s;
   --s2-delay-icon-tengah: 2.6s;
   --s2-delay-pengantin: 3.1s;
   --s2-delay-teks: 3.6s;
   --s2-delay-teks-2: 4.1s;


   /* ==================================================
     SECTION 3 / 04_Info_Mempelai
  ================================================== */

   /* Section 3 base — Frame Figma: 393 x 1200 */
   --s3-width: 393px;
   --s3-height: 1200px;
   --s3-bg-color: #f3efe2;
   --s3-z: 9996;

   /* Section 3 background: Bg_3 (x=0, y=0, w=393, h=1200) */
   --s3-bg-x: 0px;
   --s3-bg-y: 0px;
   --s3-bg-width: 393px;
   --s3-bg-height: 1200px;
   /* Transparansi aset Bg_3.webp: 0 = transparan, 1 = penuh */
   --s3-bg-opacity: 0.5;
   --s3-bg-rotate: 0deg;
   --s3-bg-z: 1;

   /* Section 3 mempelai cewek: gunakan scale untuk mengecilkan/memperbesar foto. */
   --s3-mempelai-cewk-x: 45px;
   --s3-mempelai-cewk-y: 150px;
   --s3-mempelai-cewk-width:300px;
   --s3-mempelai-cewk-height: 450px;
   /* 1 = ukuran asli; 0.74 kira-kira setara lebar 223px; >1 memperbesar */
   --s3-mempelai-cewk-scale: 0.7;
   --s3-mempelai-cewk-opacity: 1;
   --s3-mempelai-cewk-rotate: 0deg;
   --s3-mempelai-cewk-z: 2;

   /* Section 3 mempelai cowok: gunakan scale untuk mengecilkan/memperbesar foto. */
   --s3-mempelai-cowk-x: 45px;
   --s3-mempelai-cowk-y: 665px;
   --s3-mempelai-cowk-width: 300px;
   --s3-mempelai-cowk-height: 450px;
   /* 1 = ukuran asli; 0.74 kira-kira setara lebar 223px; >1 memperbesar */
   --s3-mempelai-cowk-scale: 0.7;
   --s3-mempelai-cowk-opacity: 1;
   --s3-mempelai-cowk-rotate: 0deg;
   --s3-mempelai-cowk-z: 2;

   /* Section 3 teks pembuka (x=84, y=113, w=226, h=66) */
   --s3-teks-pembuka-x: 84px;
   --s3-teks-pembuka-y: 110px;
   --s3-teks-pembuka-width: 226px;
   --s3-teks-pembuka-height: 66px;
   --s3-teks-pembuka-font-size: 16px;
   --s3-teks-pembuka-font-weight: 600;
   --s3-teks-pembuka-line-height: 1.4;
   --s3-teks-pembuka-letter-spacing: 0em;
   --s3-teks-pembuka-color: #b69b62;
   --s3-teks-pembuka-opacity: 1;
   --s3-teks-pembuka-rotate: 0deg;
   --s3-teks-pembuka-z: 3;

   /* Section 3 nama Umi (x=84, y=57, w=90, h=42) */
   --s3-name-umi-x: 84px;
   --s3-name-umi-center-x: 129px;
   --s3-name-umi-y: 55px;
   --s3-name-umi-width: 90px;
   --s3-name-umi-height: 42px;
   --s3-name-umi-font-size: 36px;
   --s3-name-umi-font-weight: 700;
   --s3-name-umi-line-height: 1.2;
   --s3-name-umi-letter-spacing: 0em;
   --s3-name-umi-color: #b69b62;
   --s3-name-umi-opacity: 1;
   --s3-name-umi-rotate: 0deg;
   --s3-name-umi-z: 3;

   /* Section 3 ampersand (x=163, y=57, w=60, h=42) */
   --s3-ampersand-x: 163px;
   --s3-ampersand-center-x: 193px;
   --s3-ampersand-y: 62px;
   --s3-ampersand-width: 60px;
   --s3-ampersand-height: 42px;
   --s3-ampersand-font-size: 32px;
   --s3-ampersand-font-weight: 700;
   --s3-ampersand-line-height: 1.2;
   --s3-ampersand-letter-spacing: 0em;
   --s3-ampersand-color: #b69b62;
   --s3-ampersand-opacity: 1;
   --s3-ampersand-rotate: 0deg;
   --s3-ampersand-z: 3;

   /* Section 3 nama Ilham (x=214, y=57, w=96, h=42) */
   --s3-name-ilham-x: 214px;
   --s3-name-ilham-center-x: 262px;
   --s3-name-ilham-y: 55px;
   --s3-name-ilham-width: 96px;
   --s3-name-ilham-height: 42px;
   --s3-name-ilham-font-size: 36px;
   --s3-name-ilham-font-weight: 700;
   --s3-name-ilham-line-height: 1.2;
   --s3-name-ilham-letter-spacing: 0em;
   --s3-name-ilham-color: #b69b62;
   --s3-name-ilham-opacity: 1;
   --s3-name-ilham-rotate: 0deg;
   --s3-name-ilham-z: 3;

   /* Section 3 fullname cewek (x=116, y=525, w=162, h=24) */
   --s3-fullname-cewk-x: 116px;
   --s3-fullname-cewk-center-x: 196.5px;
   --s3-fullname-cewk-y: 530px;
   --s3-fullname-cewk-width: 162px;
   --s3-fullname-cewk-height: 24px;
   --s3-fullname-cewk-font-size: 26px;
   --s3-fullname-cewk-font-weight: 550;
   --s3-fullname-cewk-line-height: 1.2;
   --s3-fullname-cewk-letter-spacing: 0em;
   --s3-fullname-cewk-color: #b69b62;
   --s3-fullname-cewk-opacity: 1;
   --s3-fullname-cewk-rotate: 0deg;
   --s3-fullname-cewk-z: 3;

   /* Section 3 info cewek (x=82, y=549, w=230, h=41) */
   --s3-info-cewk-x: 82px;
   --s3-info-cewk-y: 560px;
   --s3-info-cewk-width: 230px;
   --s3-info-cewk-height: 41px;
   --s3-info-cewk-font-size: 16px;
   --s3-info-cewk-font-weight: 700;
   --s3-info-cewk-line-height: 1.3;
   --s3-info-cewk-letter-spacing: 0em;
   --s3-info-cewk-color: #b69b62;
   --s3-info-cewk-opacity: 1;
   --s3-info-cewk-rotate: 0deg;
   --s3-info-cewk-z: 3;

   /* Section 3 instagram cewek (x=144, y=590, w=105, h=25) */
   --s3-instagram-cewk-x: 144px;
   --s3-instagram-cewk-y: 606px;
   --s3-instagram-cewk-width: 105px;
   --s3-instagram-cewk-height: 25px;
   --s3-instagram-cewk-font-size: 20px;
   --s3-instagram-cewk-font-weight: 700;
   --s3-instagram-cewk-line-height: 1.2;
   --s3-instagram-cewk-letter-spacing: 0em;
   --s3-instagram-cewk-color: #b69b62;
   --s3-instagram-cewk-opacity: 1;
   --s3-instagram-cewk-rotate: 0deg;
   --s3-instagram-cewk-z: 3;

   /* Section 3 fullname cowok (x=122, y=988, w=149, h=20) */
   --s3-fullname-cowk-x: 122px;
   --s3-fullname-cowk-center-x: 196.5px;
   --s3-fullname-cowk-y: 1046px;
   --s3-fullname-cowk-width: 149px;
   --s3-fullname-cowk-height: 20px;
   --s3-fullname-cowk-font-size: 26px;
   --s3-fullname-cowk-font-weight: 550;
   --s3-fullname-cowk-line-height: 1.2;
   --s3-fullname-cowk-letter-spacing: 0em;
   --s3-fullname-cowk-color: #b69b62;
   --s3-fullname-cowk-opacity: 1;
   --s3-fullname-cowk-rotate: 0deg;
   --s3-fullname-cowk-z: 3;

   /* Section 3 info cowok (x=82, y=1014, w=230, h=41) */
   --s3-info-cowok-x: 82px;
   --s3-info-cowok-y: 1076px;
   --s3-info-cowok-width: 230px;
   --s3-info-cowok-height: 41px;
   --s3-info-cowok-font-size: 16px;
   --s3-info-cowok-font-weight: 700;
   --s3-info-cowok-line-height: 1.3;
   --s3-info-cowok-letter-spacing: 0em;
   --s3-info-cowok-color: #b69b62;
   --s3-info-cowok-opacity: 1;
   --s3-info-cowok-rotate: 0deg;
   --s3-info-cowok-z: 3;

   /* Section 3 instagram cowok (x=144, y=1056, w=105, h=25) */
   --s3-instagram-cowo-x: 144px;
   --s3-instagram-cowo-y: 1119px;
   --s3-instagram-cowo-width: 105px;
   --s3-instagram-cowo-height: 25px;
   --s3-instagram-cowo-font-size: 20px;
   --s3-instagram-cowo-font-weight: 700;
   --s3-instagram-cowo-line-height: 1.2;
   --s3-instagram-cowo-letter-spacing: 0em;
   --s3-instagram-cowo-color: #b69b62;
   --s3-instagram-cowo-opacity: 1;
   --s3-instagram-cowo-rotate: 0deg;
   --s3-instagram-cowo-z: 3;


   /* ==================================================
     SECTION 4 / 05_Info_Acara
   ================================================== */

   /* Section 4 base — satu embed Maps */
   --s4-width: 393px;
   --s4-height: 710px;
   --s4-bg-color: #f3efe2;
   --s4-z: 9995;

   /* Section 4 Rectangle_bg_1 */
   --s4-bg1-x: 0px;
   --s4-bg1-y: 86px;
   --s4-bg1-width: 393px;
   --s4-bg1-height: 600px;
   --s4-bg1-color: #c5a46e;
   /* Transparansi elemen emas asli: 0 = transparan, 1 = warna penuh. */
   --s4-bg1-opacity: 0.2;
   --s4-bg1-border-radius: 0px;
   --s4-bg1-rotate: 0deg;
   --s4-bg1-z: 1;

   /* Section 4 Rectangle_bg_2 */
   --s4-bg2-x: 32px;
   --s4-bg2-y: 133px;
   --s4-bg2-width: 330px;
   --s4-bg2-height: 540px;
   --s4-bg2-color: #f3efe2;
   /* Transparansi elemen putih: 0 = transparan, 1 = warna penuh. */
   --s4-bg2-opacity: 1;
   --s4-bg2-border-radius: 36px;
   --s4-bg2-rotate: 0deg;
   --s4-bg2-z: 2;

   /* Geser panel putih dan seluruh isi acara secara vertikal. Nilai negatif = naik. */
   --s4-content-offset-y: -17px;

   /* Section 4 icon_4 (x=138, y=140, w=117, h=95) */
   --s4-icon-x: 138px;
   --s4-icon-y: 140px;
   --s4-icon-width: 117px;
   --s4-icon-height: 95px;
   --s4-icon-opacity: 1;
   --s4-icon-rotate: 0deg;
   --s4-icon-z: 3;

   /* Section 4 teks_weding_event (x=116, y=248, w=162, h=24) */
   --s4-title-x: 116px;
   --s4-title-y: 248px;
   --s4-title-width: 162px;
   --s4-title-height: 24px;
   --s4-title-font-size: 24px;
   --s4-title-line-height: 1.2;
   --s4-title-letter-spacing: 0em;
   --s4-title-color: #a77e44;
   --s4-title-opacity: 1;
   --s4-title-rotate: 0deg;
   --s4-title-z: 3;

   /* Section 4 countdown container (x=92, y=294, w=205, h=50) */
   --s4-countdown-x: 92px;
   --s4-countdown-y: 294px;
   --s4-countdown-width: 205px;
   --s4-countdown-height: 50px;
   --s4-countdown-z: 3;

   /* Section 4 countdown item */
   --s4-countdown-number-font-size: 18px;
   --s4-countdown-number-line-height: 1.2;
   --s4-countdown-number-color: #b69b62;
   --s4-countdown-label-font-size: 12px;
   --s4-countdown-label-color: #b69b62;

   /* Section 4 Rectangle_Tasyakuran (x=49, y=372, w=135, h=111) */
   --s4-card-tasyk-x: 49px;
   --s4-card-tasyk-y: 372px;
   --s4-card-tasyk-width: 135px;
   --s4-card-tasyk-height: 111px;
   --s4-card-tasyk-color: #c5a46e;
   --s4-card-tasyk-opacity: 1;
   --s4-card-tasyk-border-radius: 28px;
   --s4-card-tasyk-rotate: 0deg;
   --s4-card-tasyk-z: 3;

   /* Section 4 Rectangle_resepsi (x=210, y=372, w=135, h=111) */
   --s4-card-resepsi-x: 210px;
   --s4-card-resepsi-y: 372px;
   --s4-card-resepsi-width: 135px;
   --s4-card-resepsi-height: 111px;
   --s4-card-resepsi-color: #c5a46e;
   --s4-card-resepsi-opacity: 1;
   --s4-card-resepsi-border-radius: 28px;
   --s4-card-resepsi-rotate: 0deg;
   --s4-card-resepsi-z: 3;

   /* Section 4 teks_Tasykuran group (x=52, y=379, w=131, h=90) */
   --s4-tasyk-title-font-size: 16px;
   --s4-tasyk-title-color: #ffffff;
   --s4-tasyk-info-font-size: 13px;
   --s4-tasyk-info-color: #ffffff;
   --s4-tasyk-z: 4;

   /* Section 4 teks_Resepsi group (x=212, y=378, w=131, h=90) */
   --s4-resepsi-title-font-size: 16px;
   --s4-resepsi-title-color: #ffffff;
   --s4-resepsi-info-font-size: 13px;
   --s4-resepsi-info-color: #ffffff;
   --s4-resepsi-z: 4;

   /* Embed Maps di bawah kartu acara */
   --s4-map-x: 47px;
   --s4-map-width: 299px;
   --s4-map-height: 140px;
   --s4-map-tasyk-y: 515px;
   --s4-map-z: 5;

   /* Section 4 top decorative area height */
   --s4-top-area-height: 86px;
   --s4-top-area-color: #f3efe2;

   /* ==================================================
      SECTION 5 / 06_Timeline_Acara
   ================================================== */

   /* Section 5 base */
   --s5-width: 393px;
   --s5-height: 742px;
   --s5-bg-color: #f3efe2;
   --s5-z: 9994;

   /* Pojok Kanan Atas (x=300, y=0, w=93, h=121) */
   --s5-corner-tr-x: 300px;
   --s5-corner-tr-y: 0px;
   --s5-corner-tr-width: 93px;
   --s5-corner-tr-height: 121px;
   --s5-corner-tr-opacity: 1;
   --s5-corner-tr-rotate: 0deg;
   --s5-corner-tr-z: 1;

   /* Pojok Kiri Atas (Figma bounds: x=92.69, y=0 => offset and flipped. Let's position at top-left with scaleX) */
   --s5-corner-tl-x: 0px;
   --s5-corner-tl-y: 0px;
   --s5-corner-tl-width: 93px;
   --s5-corner-tl-height: 121px;
   --s5-corner-tl-opacity: 1;
   --s5-corner-tl-rotate: 0deg;
   --s5-corner-tl-z: 1;

   /* Pojok Kiri Bawah (Figma bounds: x=93, y=742 => flipped and inverted. Position at bottom-left) */
   --s5-corner-bl-x: 0px;
   --s5-corner-bl-y: 621px;
   /* 742 - 121 */
   --s5-corner-bl-width: 93px;
   --s5-corner-bl-height: 121px;
   --s5-corner-bl-opacity: 1;
   --s5-corner-bl-rotate: 0deg;
   --s5-corner-bl-z: 1;

   /* Pojok Kanan Bawah (Figma bounds: x=300, y=742 => inverted vertical. Position at bottom-right) */
   --s5-corner-br-x: 300px;
   --s5-corner-br-y: 621px;
   /* 742 - 121 */
   --s5-corner-br-width: 93px;
   --s5-corner-br-height: 121px;
   --s5-corner-br-opacity: 1;
   --s5-corner-br-rotate: 0deg;
   --s5-corner-br-z: 1;

   /* Element Tengah / Timeline Line (x=194, y=181, w=6, h=469) */
   --s5-timeline-line-x: 194px;
   --s5-timeline-line-y: 181px;
   --s5-timeline-line-width: 6px;
   --s5-timeline-line-height: 469px;
   --s5-timeline-line-opacity: 1;
   --s5-timeline-line-rotate: 0deg;
   --s5-timeline-line-z: 2;

   /* Icon 5 (x=144, y=10, w=105, h=105) */
   --s5-icon-x: 144px;
   --s5-icon-y: 10px;
   --s5-icon-width: 105px;
   --s5-icon-height: 105px;
   --s5-icon-opacity: 1;
   --s5-icon-rotate: 0deg;
   --s5-icon-z: 3;

   /* Title: Timeline Acara (x=116, y=114, w=162, h=24) */
   --s5-title-x: 116px;
   --s5-title-y: 114px;
   --s5-title-width: 162px;
   --s5-title-height: 24px;
   --s5-title-font-size: 24px;
   --s5-title-font-family: 'Glass Antiqua', serif;
   --s5-title-line-height: 1;
   --s5-title-letter-spacing: 0px;
   --s5-title-color: #a77e44;
   --s5-title-opacity: 1;
   --s5-title-rotate: 0deg;
   --s5-title-z: 3;

   /* Timeline Texts (Group Teks_info_timeline_acara) */
   --s5-text-font-family: 'Glass Antiqua', serif;
   --s5-text-font-size: 15px;
   --s5-text-color: #b69b62;
   --s5-text-line-height: 1.05;
   --s5-text-letter-spacing: 0px;
   --s5-text-opacity: 1;
   --s5-text-rotate: 0deg;
   --s5-text-z: 3;

   /* Text Items Coordinates */
   --s5-time-1-x: 133px;
   --s5-time-1-y: 175px;
   --s5-time-1-width: 39px;
   --s5-time-1-height: 16px;
   --s5-event-1-x: 53px;
   --s5-event-1-y: 189px;
   --s5-event-1-width: 118px;
   --s5-event-1-height: 16px;

   --s5-time-2-x: 222px;
   --s5-time-2-y: 263px;
   --s5-time-2-width: 34px;
   --s5-time-2-height: 16px;
   --s5-event-2-x: 219px;
   --s5-event-2-y: 279px;
   --s5-event-2-width: 96px;
   --s5-event-2-height: 32px;

   --s5-time-3-x: 136px;
   --s5-time-3-y: 354px;
   --s5-time-3-width: 35px;
   --s5-time-3-height: 16px;
   --s5-event-3-x: 64px;
   --s5-event-3-y: 370px;
   --s5-event-3-width: 109px;
   --s5-event-3-height: 16px;

   --s5-time-4-x: 222px;
   --s5-time-4-y: 448px;
   --s5-time-4-width: 33px;
   --s5-time-4-height: 16px;
   --s5-event-4-x: 222px;
   --s5-event-4-y: 464px;
   --s5-event-4-width: 82px;
   --s5-event-4-height: 16px;

   --s5-time-5-x: 141px;
   --s5-time-5-y: 545px;
   --s5-time-5-width: 32px;
   --s5-time-5-height: 16px;
   --s5-event-5-x: 42px;
   --s5-event-5-y: 561px;
   --s5-event-5-width: 131px;
   --s5-event-5-height: 16px;

   --s5-time-6-x: 222px;
   --s5-time-6-y: 638px;
   --s5-time-6-width: 33px;
   --s5-time-6-height: 16px;
   --s5-event-6-x: 222px;
   --s5-event-6-y: 654px;
   --s5-event-6-width: 96px;
   --s5-event-6-height: 16px;

   /* ==================================================
      SECTION 6 / 07_Galeri_Pengantin
      Frame Figma: 393 x 637 | bg: #f3efe2
   ================================================== */

   /* Base */
   --s6-width: 393px;
   --s6-height: 676px;
   --s6-bg-color: #f3efe2;
   --s6-z: 1;

   /* Icon Atas 6 (Icon_Atas_6): x=94, y=22, w=205, h=68 */
   --s6-icon-atas-x: 94px;
   --s6-icon-atas-y: 50px;
   --s6-icon-atas-width: 205px;
   --s6-icon-atas-height: 68px;
   --s6-icon-atas-opacity: 1;
   --s6-icon-atas-rotate: 0deg;
   --s6-icon-atas-z: 2;

   /* Title Teks (Galeri Pengantin): x=114, y=82, w=165, h=30 */
   --s6-title-x: 114px;
   --s6-title-y: 108px;
   --s6-title-width: 165px;
   --s6-title-height: 30px;
   --s6-title-font-size: 23px;
   --s6-title-font-family: 'Glass Antiqua', serif;
   --s6-title-line-height: 1;
   --s6-title-letter-spacing: 0px;
   --s6-title-color: #a77e44;
   --s6-title-opacity: 1;
   --s6-title-rotate: 0deg;
   --s6-title-z: 3;

   /* Frame Utama (border/frame besar): x=23, y=144, w=348, h=348 */
   --s6-frame-utama-x: 23px;
   --s6-frame-utama-y: 166px;
   --s6-frame-utama-width: 348px;
   --s6-frame-utama-height: 348px;
   --s6-frame-utama-opacity: 1;
   --s6-frame-utama-rotate: 0deg;
   --s6-frame-utama-z: 2;

   /* Main Image area (Gambar_1_Utama): x=40, y=158, w=314, h=313 */
   --s6-main-image-x: 40px;
   --s6-main-image-y: 181px;
   --s6-main-image-width: 314px;
   --s6-main-image-height: 313px;
   --s6-main-image-opacity: 1;
   --s6-main-image-rotate: 0deg;
   --s6-main-image-z: 1;

   /* Frame Preview (border area preview): x=58, y=514, w=277, h=99 */
   --s6-frame-preview-x: 58px;
   --s6-frame-preview-y: 530px;
   --s6-frame-preview-width: 277px;
   --s6-frame-preview-height: 99px;
   --s6-frame-preview-opacity: 1;
   --s6-frame-preview-rotate: 0deg;
   --s6-frame-preview-z: 2;

   /* Thumbnail aktif / center (Gambar_1_Preview): x=160, y=526, w=73, h=72 */
   --s6-thumb-active-x: 160px;
   --s6-thumb-active-y: 536px;
   --s6-thumb-active-width: 65px;
   --s6-thumb-active-height: 65px;

   /* Thumbnail kiri (Gambar_2_Preview): x=89, y=532, w=61, h=61 */
   --s6-thumb-left-x: 89px;
   --s6-thumb-left-y: 532px;
   --s6-thumb-left-width: 61px;
   --s6-thumb-left-height: 61px;

   /* Thumbnail kanan (Gambar_3_Preview): x=244, y=534, w=59, h=59 */
   --s6-thumb-right-x: 244px;
   --s6-thumb-right-y: 534px;
   --s6-thumb-right-width: 59px;
   --s6-thumb-right-height: 59px;

   /* Tombol Kiri (Tombol_Kiri): x=81, y=551, w=23, h=23 */
   --s6-button-left-x: 60px;
   --s6-button-left-y: 566px;
   --s6-button-left-width: 23px;
   --s6-button-left-height: 23px;
   --s6-button-left-opacity: 1;
   --s6-button-left-rotate: 0deg;
   --s6-button-left-z: 4;

   /* Tombol Kanan (Tombol_Kanan): x=312, y=551, w=23, h=23 */
   --s6-button-right-x: 312px;
   --s6-button-right-y: 566px;
   --s6-button-right-width: 23px;
   --s6-button-right-height: 23px;
   --s6-button-right-opacity: 1;
   --s6-button-right-rotate: 0deg;
   --s6-button-right-z: 4;

   /* Icon Bawah 6 (Icon_Bawah_6): x=102, y=643, w=190, h=16 */
   --s6-icon-bawah-x: 102px;
   --s6-icon-bawah-y: 643px;
   --s6-icon-bawah-width: 190px;
   --s6-icon-bawah-height: 16px;
   --s6-icon-bawah-opacity: 1;
   --s6-icon-bawah-rotate: 0deg;
   --s6-icon-bawah-z: 2;

   /* Entrance Animation Variables */
   --s6-reveal-distance: 48px;
   --s6-reveal-duration: 1.4s;
   --s6-reveal-easing: cubic-bezier(0.22, 1, 0.36, 1);

   --s6-icon-atas-anim-delay: 0.1s;
   --s6-title-anim-delay: 0.3s;
   --s6-button-left-anim-delay: 0.5s;
   --s6-button-right-anim-delay: 0.65s;
   --s6-icon-bawah-anim-delay: 0.9s;

   /* ==================================================
      SECTION 7 / 08_Tanda_Kasih
      Keterangan:
      - width/height/bg-color = ukuran dan warna background section
      - icon_7 = icon hadiah bagian atas
      - judul = teks "Tanda Kasih"
      - isi = teks paragraf pembuka
      - info_rek = gambar kartu rekening
      - salin_1/disalin_1 = tombol salin dan feedback rekening pertama
      - salin_2/disalin_2 = tombol salin dan feedback rekening kedua
      - copy-rek = nomor rekening yang akan dicopy oleh JavaScript
   ================================================== */


   /* Ukuran utama section */
   --s7-width: 393px;
   --s7-height: 617px;
   --s7-bg-color: #f3efe2;

   /* Rectangle 2 (Visual Spacer) */
   --s7-spacer-x: 0px;
   --s7-spacer-y: 35px;
   --s7-spacer-width: 393px;
   --s7-spacer-height: 547px;
   --s7-spacer-bg-color: #490000;
   /* Transparansi background merah: 0 = transparan, 1 = warna penuh. */
   --s7-spacer-opacity: 0.84;
   --s7-spacer-border-radius: 0px;
   --s7-spacer-z: 1;

   /* Icon hadiah atas */
   --s7-icon-7-x: 170px;
   --s7-icon-7-y: 67px;
   --s7-icon-7-width: 54px;
   --s7-icon-7-height: 89px;
   --s7-icon-7-opacity: 1;
   --s7-icon-7-z: 2;


   /* Judul "Tanda Kasih" */
   --s7-judul-x: 114px;
   --s7-judul-y: 156px;
   --s7-judul-width: 165px;
   --s7-judul-height: 30px;
   --s7-judul-font-family: 'Glass Antiqua', serif;
   --s7-judul-font-size: 23px;
   --s7-judul-color: #e9b878;
   --s7-judul-z: 3;


   /* Teks isi/paragraf pembuka */
   --s7-isi-x: 26px;
   --s7-isi-y: 186px;
   --s7-isi-width: 341px;
   --s7-isi-height: 48px;
   --s7-isi-font-family: 'Glass Antiqua', serif;
   --s7-isi-font-size: 14px;
   --s7-isi-color: #e9b878;
   --s7-isi-z: 3;


   /* Gambar kartu rekening */
   --s7-info-rek-x: 61px;
   --s7-info-rek-y: 239px;
   --s7-info-rek-width: 271px;
   --s7-info-rek-height: 294px;
   --s7-info-rek-opacity: 1;
   --s7-info-rek-z: 2;


   /* Tombol Salin rekening pertama */
   --s7-salin-1-x: 178px;
   --s7-salin-1-y: 347px;
   --s7-salin-1-width: 53px;
   --s7-salin-1-height: 17px;
   --s7-salin-1-font-family: 'Glass Antiqua', serif;
   --s7-salin-1-font-size: 16px;
   --s7-salin-1-color: #e9b878;
   --s7-salin-1-z: 4;


   /* Feedback Disalin rekening pertama */
   --s7-disalin-1-x: 180px;
   --s7-disalin-1-y: 348px;
   --s7-disalin-1-width: 53px;
   --s7-disalin-1-height: 17px;
   --s7-disalin-1-font-family: 'Glass Antiqua', serif;
   --s7-disalin-1-font-size: 15px;
   --s7-disalin-1-color: #e9b878;
   --s7-disalin-1-z: 4;


   /* Tombol Salin rekening kedua */
   --s7-salin-2-x: 178px;
   --s7-salin-2-y: 497px;
   --s7-salin-2-width: 53px;
   --s7-salin-2-height: 17px;
   --s7-salin-2-font-family: 'Glass Antiqua', serif;
   --s7-salin-2-font-size: 16px;
   --s7-salin-2-color: #e9b878;
   --s7-salin-2-z: 4;


   /* Feedback Disalin rekening kedua */
   --s7-disalin-2-x: 180px;
   --s7-disalin-2-y: 498px;
   --s7-disalin-2-width: 53px;
   --s7-disalin-2-height: 17px;
   --s7-disalin-2-font-family: 'Glass Antiqua', serif;
   --s7-disalin-2-font-size: 15px;
   --s7-disalin-2-color: #e9b878;
   --s7-disalin-2-z: 4;


   /* Nomor rekening yang dicopy oleh tombol Salin */
   --s7-copy-rek-1: "000401072450500";
   --s7-copy-rek-2: "661301027743533";


   /* Durasi teks "Disalin" tampil, dalam milidetik */
   --s7-copy-feedback-duration: 1000;

   /* Entrance Animation Variables */
   --s7-reveal-distance: 48px;
   --s7-reveal-duration: 1.4s;
   --s7-reveal-easing: cubic-bezier(0.22, 1, 0.36, 1);

   --s7-icon-7-anim-delay: 0.1s;
   --s7-judul-anim-delay: 0.3s;
   --s7-isi-anim-delay: 0.5s;
   --s7-salin-1-anim-delay: 0.75s;
   --s7-salin-2-anim-delay: 0.95s;


   /* ==================================================
      SECTION 8 / 09_Komentar
      Frame Figma: 393 x 782 | bg: #f3efe2
      Keterangan:
      - teks_judul    = judul "Ucapan Selamat & Do'a"
      - icon_8        = dekorasi atas (icon_8.png)
      - bagian_komentar   = textarea ucapan
      - bagian_nama_komentar = input nama
      - tombol_kirim  = tombol submit komentar
      - tombol_hadir / tombol_tidak_hadir = konfirmasi kehadiran
      - comments-wrapper  = kontainer daftar komentar dengan max-height scroll
      - comment-card  = card per komentar, dynamic height
      - teks_penutup  = teks penutup bawah
      - teks_U|I      = teks inisial paling bawah
   ================================================== */

   /* Ukuran utama section */
   --s8-width: 393px;
   --s8-height: 782px;
   --s8-bg-color: #f3efe2;

   /* Judul — Figma: x=86, y=23, w=222, h=27 | Glass Antiqua 26px | #865816 */
   --s8-judul-x: 86px;
   --s8-judul-y: 23px;
   --s8-judul-width: 222px;
   --s8-judul-height: 27px;
   --s8-judul-font-family: 'Glass Antiqua', serif;
   --s8-judul-font-size: 26px;
   --s8-judul-color: #865816;
   --s8-judul-z: 3;

   /* Icon 8 — Figma: x=107, y=60, w=180, h=21 */
   --s8-icon-8-x: 107px;
   --s8-icon-8-y: 60px;
   --s8-icon-8-width: 180px;
   --s8-icon-8-height: 21px;
   --s8-icon-8-opacity: 1;
   --s8-icon-8-z: 2;

   /* Textarea ucapan — Figma: x=44, y=104, w=306, h=119 */
   --s8-textarea-x: 44px;
   --s8-textarea-y: 104px;
   --s8-textarea-width: 306px;
   --s8-textarea-height: 119px;
   --s8-textarea-border-radius: 12px;
   --s8-textarea-font-family: 'Noto Serif', serif;
   --s8-textarea-font-size: 12px;
   --s8-textarea-placeholder-color: #a77e44;
   --s8-textarea-z: 2;

   /* Input nama — Figma: x=48, y=223, w=209, h=49 */
   --s8-input-name-x: 48px;
   --s8-input-name-y: 233px;
   --s8-input-name-width: 209px;
   --s8-input-name-height: 35px;
   --s8-input-name-border-radius: 8px;
   --s8-input-name-font-family: 'Noto Serif', serif;
   --s8-input-name-font-size: 12px;
   --s8-input-name-placeholder-color: #a77e44;
   --s8-input-name-z: 2;

   /* Tombol Kirim — Figma: x=290, y=234, w=60, h=33 */
   --s8-btn-kirim-x: 290px;
   --s8-btn-kirim-y: 234px;
   --s8-btn-kirim-width: 60px;
   --s8-btn-kirim-height: 33px;
   --s8-btn-kirim-border-radius: 8px;
   --s8-btn-kirim-bg: #490000;
   --s8-btn-kirim-color: #fdf5ea;
   --s8-btn-kirim-font-family: 'Noto Serif', serif;
   --s8-btn-kirim-font-size: 12px;
   --s8-btn-kirim-z: 3;

   /* Tombol Hadir — Figma: x=80, y=301, w=83, h=27 */
   --s8-btn-hadir-x: 80px;
   --s8-btn-hadir-y: 301px;
   --s8-btn-hadir-width: 83px;
   --s8-btn-hadir-height: 27px;
   --s8-btn-hadir-border-radius: 6px;
   --s8-btn-hadir-bg: #c5a46e;
   --s8-btn-hadir-color: #000000;
   --s8-btn-hadir-font-family: 'Noto Serif', serif;
   --s8-btn-hadir-font-size: 12px;
   --s8-btn-hadir-z: 3;

   /* Tombol Tidak Hadir — Figma: x=237, y=301, w=83, h=27 */
   --s8-btn-tidak-hadir-x: 237px;
   --s8-btn-tidak-hadir-y: 301px;
   --s8-btn-tidak-hadir-width: 83px;
   --s8-btn-tidak-hadir-height: 27px;
   --s8-btn-tidak-hadir-border-radius: 6px;
   --s8-btn-tidak-hadir-bg: #c5a46e;
   --s8-btn-tidak-hadir-color: #000000;
   --s8-btn-tidak-hadir-font-family: 'Noto Serif', serif;
   --s8-btn-tidak-hadir-font-size: 12px;
   --s8-btn-tidak-hadir-z: 3;

   /* Comments Wrapper — area scroll komentar */
   --s8-comments-wrapper-x: 48px;
   --s8-comments-wrapper-y: 378px;
   --s8-comments-wrapper-width: 299px;
   --s8-comments-wrapper-height: 270px;

   /* Comment Card */
   --s8-comment-card-bg: #fdf4e9;
   --s8-comment-card-border-radius: 17px;
   --s8-comment-card-min-height: 82px;
   --s8-comment-card-padding-x: 14px;
   --s8-comment-card-padding-y: 14px;
   --s8-comment-card-gap: 12px;

   /* Comment card teks */
   --s8-comment-name-font-family: 'Noto Serif', serif;
   --s8-comment-name-font-size: 14px;
   --s8-comment-name-color: #936523;

   --s8-comment-time-font-family: 'Noto Serif', serif;
   --s8-comment-time-font-size: 11px;
   --s8-comment-time-color: #936523;

   --s8-comment-msg-font-family: 'Noto Serif', serif;
   --s8-comment-msg-font-size: 12px;
   --s8-comment-msg-color: #936523;

   /* Teks Penutup — Figma: x=95, y=691, w=204, h=28 | Glass Antiqua 14px | #865816 */
   --s8-teks-penutup-x: 95px;
   --s8-teks-penutup-y: 691px;
   --s8-teks-penutup-width: 204px;
   --s8-teks-penutup-height: 28px;
   --s8-teks-penutup-font-family: 'Glass Antiqua', serif;
   --s8-teks-penutup-font-size: 14px;
   --s8-teks-penutup-color: #865816;
   --s8-teks-penutup-z: 3;

   /* Teks U | I — Figma: x=182, y=737, w=30, h=21 | Glass Antiqua 20px | #865816 */
   --s8-teks-ui-x: 182px;
   --s8-teks-ui-y: 737px;
   --s8-teks-ui-width: 30px;
   --s8-teks-ui-height: 21px;
   --s8-teks-ui-font-family: 'Glass Antiqua', serif;
   --s8-teks-ui-font-size: 20px;
   --s8-teks-ui-color: #865816;
   --s8-teks-ui-z: 3;

}