/*
 * pa'amon — עיצובי "מזל טוב"
 *
 * נוצר אוטומטית מ-mazal-tov-cohen.html על ידי
 * tools/extract-mazaltov.mjs. לא לערוך ידנית — לערוך את המקור
 * ולהריץ מחדש.
 *
 * כל הכללים מבודדים תחת .mz כדי שלא יתנגשו עם מסך התצוגה,
 * שמשתמש באותם שמות כלליים (.slide, .stage, .copy).
 */

.mz { container-type: size; position: absolute; inset: 0; }

/* ==========================================================
   מזל טוב לבנות כהן · 16 שקופיות
   שפה אחת: רדיד זהב, כסף ושמנת — בלונים, דגלונים, עוגות ומתנות.
   לכל בת: רקע משלה, מוטיב משלה, עוגה משלה וטיפוגרפיה משלה.
   כל הכיתוב ממורכז.
   ========================================================== */
.mz  {
  --ink:#150410;
  --cream:#FFF4E2;
  --cream-2:#F6E7CE;
  --gold:#E0BB63;
  --gold-lt:#FFF0BC;
  --gold-dk:#8F6A17;
  --silver:#C3CBD8;
  --silver-lt:#F2F6FB;
  --silver-dk:#79828F;
  --disp:'Suez One','Arial Hebrew','Narkisim',Georgia,serif;
  --serif:'Frank Ruhl Libre','Arial Hebrew',Georgia,serif;
  --body:'Assistant','Segoe UI','Arial Hebrew',Arial,sans-serif;
  --util:'Secular One','Assistant','Segoe UI',Arial,sans-serif;
  --fg:var(--cream);
  --hue:#E4557F;
  --m1:var(--gold);
  --m2:var(--silver);
}
.mz *  {
  box-sizing:border-box
}
.mz  {
  margin:0;
  direction:rtl;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--body);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- shell ---------- */
.mz .deck  {
  position:fixed;
  inset:0;
  overflow:hidden;
  background:var(--ink)
}
.mz #confetti  {
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none
}
.mz .grain  {
  position:absolute;
  inset:-40px;
  z-index:7;
  pointer-events:none;
  opacity:.12;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- slides ---------- */
.mz .mz-slide  {
  position:absolute;
  inset:0;
  z-index:2;
  overflow:hidden;
  background:var(--bg);
  color:var(--fg);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:scale(1.02);
  transition:opacity .5s ease, transform .7s cubic-bezier(.2,.8,.25,1), visibility 0s .7s;
}
.mz .mz-slide.mz-on  {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
  transition:opacity .45s ease, transform .8s cubic-bezier(.2,.8,.25,1);
}
.mz .mz-slide:not(.mz-on) *  {
  animation-play-state:paused !important
}
.mz .deco  {
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden
}
.mz .deco>svg.tile  {
  position:absolute;
  inset:0;
  width:100%;
  height:100%
}
.mz .balloons, .mz .props  {
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden
}

/* ---------- balloons ---------- */
.mz .bal  {
  position:absolute;
  bottom:-32%;
  animation:rise linear infinite
}
.mz .bal>span  {
  display:block;
  animation:swayB 5.6s ease-in-out infinite alternate
}
.mz .bal svg  {
  display:block;
  width:100%;
  height:auto
}
@keyframes rise  {
  from  {
  transform:translate3d(0,0,0)
}
to  {
  transform:translate3d(0,-172cqh,0)
}

}
@keyframes swayB  {
  from  {
  transform:translateX(-13px) rotate(-5deg)
}
to  {
  transform:translateX(13px) rotate(5deg)
}

}

/* ---------- centred message ---------- */
.mz .mz-stage  {
  position:relative;
  z-index:4;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:clamp(64px,10cqh,110px) clamp(16px,4cqw,60px) clamp(88px,13cqh,124px);
}
.mz .copy  {
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:min(680px,56cqw)
}
.mz .eyebrow  {
  display:inline-flex;
  align-items:center;
  gap:.7em;
  margin:0 0 clamp(8px,1.5cqh,16px);
  font-family:var(--util);
  font-size:clamp(.66rem,1.15cqw,.92rem);
  letter-spacing:.3em;
  color:var(--m1);
}
.mz .eyebrow::before, .mz .eyebrow::after  {
  content:"";
  width:clamp(20px,3.4cqw,52px);
  height:1px;
  background:currentColor;
  opacity:.7;
}
.mz .seal  {
  width:clamp(62px,7.4cqw,104px);
  margin:0 0 clamp(8px,1.5cqh,18px);
  rotate:-7deg;
  filter:drop-shadow(0 7px 16px rgba(0,0,0,.32))
}
.mz .seal svg  {
  display:block;
  width:100%;
  height:auto
}
.mz .seal text  {
  font-family:var(--disp);
  font-size:44px;
  fill:var(--sealink,#150410)
}
.mz .seal .tag  {
  font-family:var(--util);
  font-size:11px;
  letter-spacing:.16em;
  fill:var(--sealink,#150410);
  opacity:.7
}
.mz .mz-on .seal  {
  animation:sealIn .8s cubic-bezier(.16,1.6,.4,1) .1s both
}
@keyframes sealIn  {
  from  {
  opacity:0;
  transform:scale(.4) rotate(-34deg)
}
to  {
  opacity:1;
  transform:none
}

}
.mz .name  {
  margin:0;
  font-weight:400;
  line-height:.95;
  letter-spacing:-.01em;
  font-family:var(--disp);
  font-size:clamp(2.6rem,7.4cqw,6.6rem);
  color:var(--fg)
}
.mz .name span  {
  display:inline-block
}
.mz .mz-on .name span  {
  animation:letterIn .6s cubic-bezier(.18,1.5,.4,1) both;
  animation-delay:var(--d)
}
@keyframes letterIn  {
  from  {
  opacity:0;
  transform:translateY(.4em) rotate(-6deg) scale(.84)
}
to  {
  opacity:1;
  transform:none
}

}
.mz .surname  {
  margin:clamp(4px,.9cqh,12px) 0 0;
  font-family:var(--util);
  opacity:.9;
  font-size:clamp(.95rem,2cqw,1.65rem);
  color:var(--fg);
  letter-spacing:.04em
}
.mz .mz-on .surname  {
  animation:up .6s ease .5s both
}
.mz .orn  {
  width:clamp(150px,22cqw,270px);
  margin:clamp(10px,1.9cqh,22px) 0
}
.mz .orn svg  {
  display:block;
  width:100%;
  height:auto
}
.mz .mz-on .orn  {
  animation:ornIn .8s cubic-bezier(.2,.8,.25,1) .55s both
}
@keyframes ornIn  {
  from  {
  opacity:0;
  transform:scaleX(.2)
}
to  {
  opacity:1;
  transform:none
}

}
.mz .wish  {
  margin:0;
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1rem,1.9cqw,1.6rem);
  line-height:1.6;
  color:var(--fg)
}
.mz .wish b  {
  font-weight:900;
  color:var(--m1)
}
.mz .wish .l2  {
  display:block;
  margin-top:.4em;
  opacity:.9
}
.mz .wish .l2 b  {
  color:var(--m2)
}
.mz .mz-on .wish  {
  animation:up .7s ease .62s both
}
.mz .sign  {
  margin:clamp(12px,2.2cqh,26px) 0 0;
  padding-top:clamp(8px,1.5cqh,15px);
  font-family:var(--util);
  font-size:clamp(.7rem,1.25cqw,.98rem);
  letter-spacing:.09em;
  opacity:.82;
  border-top:1px solid color-mix(in srgb, var(--m1) 45%, transparent)
}
.mz .mz-on .sign  {
  animation:up .7s ease .78s both
}
@keyframes up  {
  from  {
  opacity:0;
  transform:translateY(16px)
}
to  {
  opacity:1;
  transform:none
}

}

/* type treatments — all foil, never flat */
.mz .type-gold .name  {
  background:linear-gradient(172deg,#FFF8E2 3%,#F3DA9A 22%,#C79A2E 45%,#8A6415 57%,#EDD293 76%,#FFFBEF 97%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.3)) drop-shadow(0 12px 26px rgba(0,0,0,.35));
}
.mz .type-silver .name  {
  background:linear-gradient(172deg,#FFFFFF 3%,#E7EDF6 22%,#A8B1C0 45%,#727B89 57%,#DFE6F0 76%,#FFFFFF 97%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.3)) drop-shadow(0 12px 26px rgba(0,0,0,.35));
}
.mz .type-cream .name  {
  color:var(--cream);
  text-shadow:.045em .05em 0 var(--m1), 0 14px 30px rgba(0,0,0,.4)
}
.mz .type-emboss .name  {
  color:var(--cream);
  text-shadow:0 -1px 0 rgba(255,255,255,.6), 0 2px 0 var(--m1), 0 3px 1px rgba(0,0,0,.5), 0 16px 32px rgba(0,0,0,.4);
}
.mz .type-inkgold .name  {
  color:var(--fg);
  text-shadow:.04em .045em 0 var(--m1), 0 10px 22px rgba(0,0,0,.18)
}

/* ---------- props: cake + gifts ---------- */
.mz .cake  {
  position:absolute;
  bottom:clamp(44px,7.4cqh,76px);
  inset-inline-start:clamp(2px,2.6cqw,62px);
  height:clamp(140px,40cqh,390px);
  width:clamp(112px,19cqw,258px);
}
.mz .cake svg  {
  display:block;
  width:100%;
  height:100%
}
.mz .mz-on .cake  {
  animation:cakeIn .9s cubic-bezier(.2,.9,.25,1) .2s both
}
@keyframes cakeIn  {
  from  {
  opacity:0;
  transform:translateY(42px) scale(.94)
}
to  {
  opacity:1;
  transform:none
}

}
.mz .flame  {
  transform-box:fill-box;
  transform-origin:bottom center;
  animation:flicker 1.1s ease-in-out infinite alternate
}
@keyframes flicker  {
  0%  {
  transform:scale(1,1) rotate(-2.5deg);
  opacity:.94
}
50%  {
  transform:scale(.92,1.1) rotate(1.5deg);
  opacity:1
}
100%  {
  transform:scale(1.07,.94) rotate(3deg);
  opacity:.9
}

}
.mz .gifts  {
  position:absolute;
  bottom:clamp(42px,7cqh,72px);
  inset-inline-end:clamp(2px,3.4cqw,74px);
  width:clamp(76px,12cqw,166px);
}
.mz .gifts svg  {
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.4))
}
.mz .mz-on .gifts  {
  animation:giftIn .8s cubic-bezier(.16,1.5,.4,1) .5s both
}
@keyframes giftIn  {
  from  {
  opacity:0;
  transform:translateY(28px) rotate(6deg)
}
to  {
  opacity:1;
  transform:none
}

}
.mz .props--end .cake  {
  inset-inline-start:auto;
  inset-inline-end:clamp(2px,2.6cqw,62px)
}
.mz .props--end .gifts  {
  inset-inline-end:auto;
  inset-inline-start:clamp(2px,3.4cqw,74px)
}
.mz .mz-slide--light .gifts svg  {
  filter:drop-shadow(0 12px 22px rgba(80,50,30,.22))
}
.mz .mz-slide--light .cake  {
  filter:drop-shadow(0 12px 24px rgba(80,50,30,.2))
}

/* ---------- bunting ---------- */
.mz .d-garland  {
  position:absolute;
  top:0;
  inset-inline:0
}
.mz .d-garland svg  {
  display:block;
  width:100%;
  height:auto
}
.mz .flag  {
  transform-box:fill-box;
  transform-origin:top center;
  animation:sway 4.8s ease-in-out infinite alternate
}
@keyframes sway  {
  from  {
  transform:rotate(-3.2deg)
}
to  {
  transform:rotate(3.2deg)
}

}

/* ---------- motif layers ---------- */
.mz .foilbit  {
  position:absolute;
  animation:foilFloat 8s ease-in-out infinite alternate
}
@keyframes foilFloat  {
  from  {
  transform:translateY(-6px) rotate(var(--r))
}
to  {
  transform:translateY(6px) rotate(calc(var(--r) + 10deg))
}

}
.mz .frame  {
  position:absolute;
  inset:clamp(13px,2.5cqh,30px);
  border:1.5px solid var(--m1);
  opacity:.6
}
.mz .frame::after  {
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid var(--m1);
  opacity:.5
}
.mz .corner  {
  position:absolute;
  width:clamp(58px,9cqw,120px)
}
.mz .corner svg  {
  display:block;
  width:100%;
  height:auto
}
.mz .rays  {
  position:absolute;
  top:-30%;
  left:50%;
  width:180vmax;
  height:180vmax;
  margin-left:-90vmax;
  background:repeating-conic-gradient(from 0deg,
        color-mix(in srgb,var(--m1) 22%,transparent) 0deg 1.6deg, transparent 1.6deg 8deg);
  animation:spin 140s linear infinite;
  opacity:.7
}
@keyframes spin  {
  to  {
  transform:rotate(360deg)
}

}
.mz .pearlstring  {
  position:absolute;
  top:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  animation:swayP 5s ease-in-out infinite alternate;
  transform-origin:top center
}
.mz .pearlstring i  {
  width:9px;
  height:9px;
  border-radius:50%;
  background:radial-gradient(circle at 32% 30%, #fff, var(--m2) 62%, var(--silver-dk));
  box-shadow:0 1px 2px rgba(0,0,0,.25)
}
@keyframes swayP  {
  from  {
  transform:rotate(-2.4deg)
}
to  {
  transform:rotate(2.4deg)
}

}
.mz .ribbon  {
  position:absolute;
  inset:0;
  opacity:.55
}
.mz .ribbon path  {
  animation:ribbonFlow 9s ease-in-out infinite alternate
}
@keyframes ribbonFlow  {
  from  {
  transform:translateY(-10px)
}
to  {
  transform:translateY(10px)
}

}
.mz .twinkle  {
  position:absolute;
  animation:twk 3.4s ease-in-out infinite
}
.mz .twinkle svg  {
  display:block;
  width:100%;
  height:auto
}
@keyframes twk  {
  0%,100%  {
  opacity:.2;
  transform:scale(.66) rotate(0)
}
50%  {
  opacity:1;
  transform:scale(1.1) rotate(16deg)
}

}
.mz .spotlight  {
  position:absolute;
  inset:0;
  background:radial-gradient(70% 58% at 50% 40%, color-mix(in srgb,var(--m1) 20%,transparent), transparent 72%)
}
.mz .medallion  {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-52%);
  width:min(96cqh,104cqw);
  opacity:.34;
  animation:spin 220s linear infinite
}
.mz .medallion svg  {
  display:block;
  width:100%;
  height:auto
}
.mz .hearts i  {
  position:absolute;
  bottom:-12%;
  animation:rise linear infinite
}
.mz .hearts svg  {
  display:block;
  width:100%;
  height:auto;
  animation:swayB 4.6s ease-in-out infinite alternate
}

/* ---------- opening / finale ---------- */
.mz .big  {
  margin:0;
  font-family:var(--disp);
  font-weight:400;
  line-height:.94;
  font-size:clamp(3rem,9.4cqw,8.4rem);
  color:var(--fg)
}
.mz .big span  {
  display:inline-block
}
.mz .mz-on .big span  {
  animation:letterIn .7s cubic-bezier(.18,1.5,.4,1) both;
  animation-delay:var(--d)
}
.mz .type-gold .big  {
  background:linear-gradient(172deg,#FFF8E2 3%,#F3DA9A 22%,#C79A2E 45%,#8A6415 57%,#EDD293 76%,#FFFBEF 97%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.32)) drop-shadow(0 14px 30px rgba(0,0,0,.4));
}
.mz .lede  {
  margin:0;
  max-width:36ch;
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(.92rem,1.7cqw,1.35rem);
  line-height:1.6;
  opacity:.9
}
.mz .mz-on .lede  {
  animation:up .7s ease .6s both
}
.mz .chips  {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(5px,.85cqw,11px);
  max-width:min(930px,92cqw);
  margin-top:clamp(6px,1.4cqh,16px)
}
.mz .chip  {
  font:inherit;
  font-family:var(--util);
  cursor:pointer;
  color:var(--cream);
  font-size:clamp(.68rem,1.22cqw,.95rem);
  padding:.44em 1.05em;
  border-radius:2px;
  background:rgba(255,244,226,.05);
  border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);
  transition:background .22s ease, color .22s ease, transform .22s ease, border-color .22s ease
}
.mz .chip:hover, .mz .chip:focus-visible  {
  background:var(--gold);
  border-color:var(--gold-lt);
  color:#150410;
  transform:translateY(-3px)
}
.mz .mz-on .chip  {
  animation:up .5s ease both;
  animation-delay:calc(.7s + var(--d))
}
.mz .hint  {
  margin:0;
  font-family:var(--util);
  font-size:clamp(.66rem,1.2cqw,.88rem);
  letter-spacing:.18em;
  opacity:.5
}
.mz .mz-on .hint  {
  animation:up .7s ease 1.5s both
}
.mz .hint kbd  {
  font:inherit;
  padding:.1em .5em;
  border-radius:3px;
  border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);
  background:rgba(255,244,226,.06)
}

/* ---------- chrome ---------- */
.mz .bar  {
  position:absolute;
  z-index:9;
  bottom:0;
  inset-inline:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:clamp(9px,1.5cqh,17px) clamp(14px,3.2cqw,38px);
  background:linear-gradient(0deg,rgba(10,3,9,.86),rgba(10,3,9,0));
  color:var(--cream)
}
.mz .btn  {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  flex:none;
  border-radius:50%;
  cursor:pointer;
  color:var(--cream);
  background:rgba(255,244,226,.08);
  border:1px solid rgba(224,187,99,.4);
  transition:background .2s,transform .2s,color .2s
}
.mz .btn:hover  {
  background:var(--gold);
  color:#150410;
  transform:translateY(-2px)
}
.mz .btn svg  {
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round
}
.mz .btn.wide  {
  width:auto;
  height:37px;
  border-radius:99px;
  padding:0 15px;
  gap:8px;
  grid-auto-flow:column;
  font-family:var(--util);
  font-size:.78rem;
  letter-spacing:.08em
}
.mz .dots  {
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  justify-content:center
}
.mz .dot  {
  width:8px;
  height:8px;
  padding:0;
  border-radius:50%;
  cursor:pointer;
  border:0;
  background:rgba(255,244,226,.3);
  transition:transform .22s,background .22s,width .22s
}
.mz .dot:hover  {
  transform:scale(1.45);
  background:var(--cream)
}
.mz .dot[aria-current="true"]  {
  width:24px;
  border-radius:99px;
  background:var(--dc,var(--gold))
}
.mz .counter  {
  font-family:var(--util);
  font-size:.78rem;
  letter-spacing:.12em;
  direction:ltr;
  color:rgba(255,244,226,.5);
  font-variant-numeric:tabular-nums;
  min-width:5ch;
  text-align:center
}
.mz .right-group  {
  display:flex;
  align-items:center;
  gap:10px
}
.mz:focus-visible  {
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:4px
}
.mz button  {
  font-family:inherit
}

/* ---------- responsive ---------- */
@media (max-width:900px)  {
  .mz .mz-stage  {
  padding:clamp(56px,9cqh,96px) clamp(12px,3.4cqw,36px) clamp(78px,11cqh,104px)
}
.mz .copy  {
  max-width:min(38ch,74cqw)
}
.mz .name  {
  font-size:clamp(1.9rem,6.6cqw,4.2rem)
}
.mz .surname  {
  font-size:clamp(.85rem,2.4cqw,1.3rem)
}
.mz .wish  {
  font-size:clamp(.82rem,2.2cqw,1.15rem)
}
.mz .sign  {
  font-size:clamp(.64rem,1.7cqw,.9rem)
}
.mz .seal  {
  width:clamp(48px,7cqw,80px)
}
.mz .orn  {
  width:clamp(120px,26cqw,210px)
}
.mz .cake  {
  width:clamp(92px,17cqw,190px);
  height:clamp(120px,34cqh,300px)
}
.mz .gifts  {
  width:clamp(62px,11cqw,120px)
}
.mz .dot  {
  width:6px;
  height:6px
}
.mz .dot[aria-current="true"]  {
  width:18px
}

}
@media (max-width:900px) and (orientation:portrait)  {
  .mz .copy  {
  max-width:86cqw
}
.mz .name  {
  font-size:clamp(2.2rem,10cqw,4.2rem)
}
.mz .mz-stage  {
  padding-bottom:clamp(150px,26cqh,230px)
}
.mz .cake  {
  width:clamp(104px,30cqw,190px);
  height:clamp(130px,26cqh,260px);
  bottom:clamp(56px,9cqh,88px)
}
.mz .gifts  {
  width:clamp(70px,20cqw,120px);
  bottom:clamp(54px,8.5cqh,84px)
}
.mz .bar  {
  flex-direction:column-reverse;
  gap:8px;
  padding-bottom:11px
}

}
@media (max-height:560px)  {
  .mz .mz-stage  {
  padding-top:48px;
  padding-bottom:62px
}
.mz .name  {
  font-size:clamp(1.75rem,6.2cqh,3.4rem)
}
.mz .seal  {
  width:clamp(44px,8cqh,72px)
}
.mz .cake  {
  height:clamp(110px,36cqh,250px);
  bottom:clamp(38px,6cqh,58px)
}
.mz .gifts  {
  bottom:clamp(36px,5.6cqh,54px)
}
.mz .d-garland  {
  opacity:.8
}

}
@media (prefers-reduced-motion:reduce)  {
  .mz *, .mz *::before, .mz *::after  {
  animation:none !important;
  transition-duration:.01ms !important
}
.mz .mz-slide  {
  transform:none
}

}
/* foil per-letter: background-clip:text on the parent misses transformed spans */
.mz .type-gold .name span {
  background:linear-gradient(172deg,#FFF8E2 3%,#F3DA9A 22%,#C79A2E 45%,#8A6415 57%,#EDD293 76%,#FFFBEF 97%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.mz .type-silver .name span {
  background:linear-gradient(172deg,#FFFFFF 3%,#E7EDF6 22%,#A8B1C0 45%,#727B89 57%,#DFE6F0 76%,#FFFFFF 97%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}