/* Sixteen independent text materials. Previews use the same material tokens. */
html[data-text-style] [data-gummy-type], .type-sample {
  --material-ink: var(--ink, #252522);
  --material-paint: none;
  --material-fill: currentColor;
  --material-stroke: 0 transparent;
  --material-shadow: none;
  --material-edge: none;
  --material-filter: none;
  --material-font: 'Gummy Display', ui-rounded, sans-serif;
  --material-weight: 650;
}
html[data-text-style] .creative-hero h1[data-gummy-type] {
  font-family: var(--material-font);
  font-weight: var(--material-weight);
  letter-spacing: -.045em;
  line-height: 1.02;
  color: var(--material-ink);
}
html[data-text-style] [data-gummy-type] .gummy-glyph { filter: var(--material-edge); }
html[data-text-style] [data-gummy-type] .gummy-face, .type-sample {
  color: var(--material-ink);
  background: var(--material-paint);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: var(--material-fill);
  -webkit-text-stroke: var(--material-stroke);
  text-shadow: var(--material-shadow);
  filter: var(--material-filter);
}
.type-sample {
  display: inline-block;
  font-family: var(--material-font);
  font-weight: var(--material-weight);
  font-size: 37px;
  line-height: 1.2;
  letter-spacing: -.045em;
  padding: 4px 5px 8px;
}
html[data-text-style='classic'] [data-gummy-type], .type-sample[data-style='classic'] {
  --material-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --material-weight: 450;
  --material-ink: var(--ink, #242522);
}
html[data-text-style='classic'] [data-gummy-type] .gummy-line:nth-child(2) {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  letter-spacing: -.055em;
}
html[data-text-style='gummy'] [data-gummy-type], .type-sample[data-style='gummy'] {
  --material-ink: #cf2d61;
  --material-fill: transparent;
  --material-stroke: .3px #a01b48;
  --material-edge: drop-shadow(0 .018em .008em #90133d) drop-shadow(0 .045em .026em #8f163f48);
  --material-filter: url('#gummy-type-gloss');
  --material-paint: radial-gradient(ellipse 90% 54% at 28% 15%,#fff9e5 0%,#fff9e5b8 8%,#fff5df00 43%),linear-gradient(170deg,#ff98b2,#e8376b 44%,#a5194b 93%);
}
html[data-text-style='gummy'] [data-gummy-type] .gummy-face {
  background: radial-gradient(ellipse 90% 54% at var(--shine-x) 15%,#fff9e5 0%,#fff9e5b8 8%,#fff5df00 43%),linear-gradient(170deg,var(--gel-top),var(--gel-middle) 44%,var(--gel-bottom) 93%);
}
html[data-text-style='chrome'] [data-gummy-type], .type-sample[data-style='chrome'] {
  --material-fill: transparent;
  --material-paint: linear-gradient(180deg,#fff 0%,#e1e9ed 15%,#7a8b96 29%,#f4ffff 40%,#263640 46%,#17212a 50%,#d7e6ed 55%,#fff 63%,#9aa9b1 75%,#314957 89%,#e8f4f7 100%);
  --material-stroke: .6px #63737d;
  --material-edge: drop-shadow(0 .018em 0 #fff) drop-shadow(0 .04em .025em #172b4855);
}
html[data-text-style='glass'] [data-gummy-type], .type-sample[data-style='glass'] {
  --material-fill: transparent;
  --material-paint: linear-gradient(140deg,#f7ffff 0%,#a2d2dd99 28%,#5c94b6bb 46%,#e8ffffdd 52%,#9dbbc4a6 64%,#46708b 100%);
  --material-stroke: .7px #8baeb9;
  --material-edge: drop-shadow(0 -.014em 0 #efffff) drop-shadow(.018em .035em .025em #345a7955);
}
html[data-text-style='ice'] [data-gummy-type], .type-sample[data-style='ice'] {
  --material-fill: transparent;
  --material-paint: repeating-linear-gradient(128deg,#fff0 0 18px,#ffffffb3 19px 20px,#fff0 22px 37px),linear-gradient(180deg,#fcffff,#d9f6ff 22%,#81bddc 53%,#b8ecff 58%,#457fa8 100%);
  --material-stroke: .55px #759ab5;
  --material-edge: drop-shadow(0 .025em 0 #d4f5ff) drop-shadow(0 .05em .04em #27527655);
}
html[data-text-style='candy-cane'] [data-gummy-type], .type-sample[data-style='candy-cane'] {
  --material-fill: transparent;
  --material-paint: linear-gradient(180deg,#ffffff9c,#fff0 34%,#4c000025 92%),repeating-linear-gradient(115deg,#fff9e7 0 18px,#e22840 18px 32px,#981a2e 33px 36px,#fff9e7 36px 51px,#f29c9f 51px 55px,#fff9e7 55px 61px);
  --material-stroke: .45px #ac5060;
  --material-edge: drop-shadow(0 .025em 0 #921f34) drop-shadow(0 .06em .03em #4c0c2038);
}
html[data-text-style='gingerbread'] [data-gummy-type], .type-sample[data-style='gingerbread'] {
  --material-fill: transparent;
  --material-paint: radial-gradient(ellipse at 50% 22%,#dca15c,#b56a33 52%,#754020 100%);
  --material-stroke: 1.25px #fff0c9;
  --material-edge: drop-shadow(0 .025em 0 #704024) drop-shadow(0 .05em .025em #4f271a44);
  --material-font: 'Gummy Display', ui-rounded, sans-serif;
  --material-weight: 600;
}
html[data-text-style='pumpkin'] [data-gummy-type], .type-sample[data-style='pumpkin'] {
  --material-fill: transparent;
  --material-paint: repeating-linear-gradient(90deg,#ffb04f 0%,#f08925 13%,#b84f14 19%,#f9902a 24%,#ffad4d 30%),linear-gradient(#ffc36e,#d65b16);
  --material-stroke: .45px #a4491b;
  --material-edge: drop-shadow(0 -.012em 0 #ffd999) drop-shadow(0 .04em 0 #6f361f) drop-shadow(0 .06em .04em #31152055);
}
html[data-text-style='neon'] [data-gummy-type], .type-sample[data-style='neon'] {
  --material-ink: #f7e7ff;
  --material-stroke: .75px #ca6dff;
  --material-shadow: 0 0 .025em #f6c8ff,0 0 .09em #cc48fa,0 0 .21em #a62df299;
  --material-font: -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --material-weight: 500;
  --material-edge: drop-shadow(0 1px 0 #662788);
}
html[data-text-style='holographic'] [data-gummy-type], .type-sample[data-style='holographic'] {
  --material-fill: transparent;
  --material-paint: repeating-linear-gradient(155deg,#e4fffa 0%,#bdc9fa 13%,#f1c9f4 28%,#adf0df 42%,#fbf0a4 55%,#f0beed 68%,#b6c9ff 83%,#e4fffa 100%);
  --material-stroke: .6px #9c8fab;
  --material-edge: drop-shadow(0 .022em 0 #766a90) drop-shadow(0 .05em .025em #4f3c7b44);
}
html[data-text-style='gold'] [data-gummy-type], .type-sample[data-style='gold'] {
  --material-fill: transparent;
  --material-paint: linear-gradient(180deg,#fff5c2 0%,#e4bc56 23%,#fff1b1 36%,#99651d 47%,#50300c 51%,#e6b74a 57%,#fff0a2 67%,#aa6b16 89%,#e5bc65 100%);
  --material-stroke: .45px #8f642b;
  --material-edge: drop-shadow(0 .025em 0 #805117) drop-shadow(0 .05em .025em #5f3a2044);
  --material-font: Georgia,'Times New Roman',serif;
  --material-weight: 650;
}
html[data-text-style='lava'] [data-gummy-type], .type-sample[data-style='lava'] {
  --material-fill: transparent;
  --material-paint: repeating-linear-gradient(135deg,#20161c 0 13px,#411b22 16px,#f2581f 18px,#ffc24e 20px,#752328 22px,#21151d 25px 43px);
  --material-stroke: .55px #a8432d;
  --material-edge: drop-shadow(0 .026em 0 #2d141b) drop-shadow(0 .035em .055em #e85e2938);
}
html[data-text-style='velvet'] [data-gummy-type], .type-sample[data-style='velvet'] {
  --material-fill: transparent;
  --material-paint: radial-gradient(ellipse at 30% 25%,#c46187,#7d2149 53%,#45142f 100%);
  --material-stroke: .3px #772047;
  --material-edge: drop-shadow(0 -.01em 0 #d998b4) drop-shadow(0 .045em .03em #3d102d44);
  --material-font: Georgia,'Times New Roman',serif;
  --material-weight: 650;
}
html[data-text-style='paper'] [data-gummy-type], .type-sample[data-style='paper'] {
  --material-ink: #ede8db;
  --material-stroke: .45px #a8a08c;
  --material-shadow: -.012em -.012em 0 #fffdf4,.018em .025em 0 #a8a08c,.025em .045em .03em #5e554336;
  --material-font: Georgia,'Times New Roman',serif;
  --material-weight: 650;
}
html[data-text-style='bubble'] [data-gummy-type], .type-sample[data-style='bubble'] {
  --material-fill: transparent;
  --material-paint: radial-gradient(ellipse 70% 60% at 25% 12%,#fff 0%,#fff8 15%,#fff0 42%),linear-gradient(145deg,#edb0dc88,#a3d8ee99 29%,#fff4baaa 45%,#b7dfed66 58%,#d6a3df99 78%,#a7e4e8aa);
  --material-stroke: .8px #af8db5;
  --material-edge: drop-shadow(0 -.014em 0 #fff) drop-shadow(0 .035em .025em #916c9e55);
  --material-weight: 600;
}
html[data-text-style='rainbow'] [data-gummy-type], .type-sample[data-style='rainbow'] {
  --material-fill: transparent;
  --material-paint: linear-gradient(135deg,#d8496f,#df7654 22%,#e2af3d 39%,#79aa5c 55%,#4c9cbd 72%,#8c68b1 88%,#cb5a9a);
  --material-stroke: .3px #6e526f;
  --material-edge: drop-shadow(0 .025em 0 #765577) drop-shadow(0 .05em .025em #44283a30);
}
html[data-text-style='rainbow'] [data-gummy-type] .gummy-face {
  background: linear-gradient(175deg,#ffffff77,#fff0 42%),linear-gradient(135deg,#d8496f,#df7654 22%,#e2af3d 39%,#79aa5c 55%,#4c9cbd 72%,#8c68b1 88%,#cb5a9a);
  background-size: 100% 100%, 420% 100%;
  background-position: center, calc(var(--glyph-index) * 13%) 50%;
  background-clip: text;
  -webkit-background-clip: text;
}
@media (prefers-contrast: more) {
  html[data-text-style] [data-gummy-type] .gummy-face { -webkit-text-stroke-width: .7px; }
}