/* Lehmus Labs 2.0 — sticker buttons.
   Markup is written by tarrat.js from a plain <a class="st" data-ic="fwd">Label</a> or <button class="st">.
   Variants: .ink (dark face) · .pale (meadow face) · .sm (header size) · .ico (round) · .block (full width)
   · .deco (decorative round sticker inside another link) · [data-fly] (torn off and carried to its #target). */
:root {
  --st-ink: #18321d; --st-lime: #abcf37; --st-lime-hi: #d6ee7e; --st-meadow: #e6efd6; --st-focus: #39742c; --st-focus-dark: #f9c620;
  --st-ease: cubic-bezier(.2, .8, .2, 1);
  --st-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.35' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
@property --h { syntax: "<number>"; inherits: true; initial-value: 0; }

.st {
  --s: 0; --ga: 45deg; --h: 0; --W: 260; --H: 58; --rot: -1deg; --r: 14px; --cut: 4px; --fh: 50px; --dsz: 42px; --pr: 60px; --pl: 22px;
  --face: var(--st-lime); --fg: var(--st-ink); --dot: var(--st-ink); --dot-fg: var(--st-lime-hi);
  --Wp: calc(var(--W) * 1px); --Hp: calc(var(--H) * 1px);
  position: relative; display: inline-flex; vertical-align: middle; padding: 0; border: 0; background: none; color: var(--fg); cursor: pointer; text-decoration: none;
  font: 700 1.0625rem/1 var(--display, "Gabarito", Arial, sans-serif); letter-spacing: -.012em; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transform: rotate(var(--rot));
  filter: drop-shadow(0 .5px .35px rgb(24 50 29 / .34)) drop-shadow(0 1.5px 2.5px rgb(24 50 29 / .12));
  transition: --h .3s var(--st-ease), filter .15s;
}
.on-dark .st, .st.on-dark { filter: drop-shadow(0 .6px .4px rgb(0 0 0 / .42)) drop-shadow(0 2px 4px rgb(0 10 4 / .24)); }
.st > * { pointer-events: none; }
.st .st-body { position: relative; display: block; width: 100%; }
.st .st-sheet { position: relative; display: block; padding: var(--cut); border-radius: calc(var(--r) + var(--cut)); background: linear-gradient(160deg, #ffffff, #f5f7f2); box-shadow: inset 0 0 0 .5px rgb(24 50 29 / .12); }
.st .st-face {
  position: relative; overflow: hidden; display: flex; align-items: center; height: var(--fh); padding: 0 var(--pr) 0 var(--pl); border-radius: var(--r);
  background: linear-gradient(172deg, rgb(255 255 255 / .08), rgb(255 255 255 / 0) 62%), var(--face);
  box-shadow: inset 0 0 0 .5px rgb(24 50 29 / .12);
}
.st .st-face::after { content: ""; position: absolute; inset: 0; background: var(--st-grain); mix-blend-mode: multiply; opacity: .12; }
.st .st-sheet::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  background: linear-gradient(var(--ga), rgb(24 50 29 / calc(min(var(--s) / 35, 1) * .3)) calc(var(--s) * 1px), rgb(24 50 29 / 0) calc(var(--s) * 1px + 16px)); }
.st .st-t { position: relative; z-index: 1; margin-top: -.04em; }
.st .st-crease { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: var(--crease, 0); background: var(--kimg, none) var(--kpos, 0 0) / var(--ksize, auto) no-repeat; }
.st.gumming { filter: none; }
.st.gumming .st-body, .st.gumming .st-dotw { visibility: hidden; }
.st-gum { position: fixed; z-index: 61; pointer-events: none; transform-origin: 50% 50%; filter: drop-shadow(0 .6px .5px rgb(24 50 29 / .3)) drop-shadow(0 8px 10px rgb(24 50 29 / .16)); }
.st .st-roll {
  --u: calc(var(--s) * 1px); --rp: calc(var(--rho, 0) * 1px);
  position: absolute; inset: 0; z-index: 2; border-radius: calc(var(--r) + var(--cut)); pointer-events: none; clip-path: polygon(0 0, 0 0, 0 0);
  background: linear-gradient(var(--ga),
    rgb(24 50 29 / 0) calc(var(--u) - var(--rp) - 2.2px), rgb(24 50 29 / .22) calc(var(--u) - var(--rp) - .6px),
    rgb(214 222 204) calc(var(--u) - var(--rp) + .4px), rgb(255 255 255) calc(var(--u) - var(--rp) * .6),
    rgb(236 241 230) calc(var(--u) - var(--rp) * .3), rgb(176 188 166) calc(var(--u) - .4px), rgb(176 188 166 / 0) calc(var(--u) + .8px));
}
.st .st-strings {
  --u: calc(var(--s) * 1px); --rp: calc(var(--rho, 0) * 1px);
  position: absolute; inset: 0; z-index: 2; border-radius: calc(var(--r) + var(--cut)); pointer-events: none; opacity: 0; transition: opacity .25s;
  background:
    repeating-linear-gradient(calc(var(--ga) + 90deg), rgb(255 255 255 / 0) 0 7px, rgb(255 255 255 / .5) 7.5px, rgb(255 255 255 / 0) 8.2px 15.7px),
    repeating-linear-gradient(calc(var(--ga) + 90deg), rgb(255 255 255 / 0) 0 16px, rgb(232 238 224 / .42) 16.5px, rgb(255 255 255 / 0) 17.1px 26.9px),
    repeating-linear-gradient(calc(var(--ga) + 90deg), rgb(24 50 29 / 0) 0 11.3px, rgb(24 50 29 / .08) 11.7px, rgb(24 50 29 / 0) 12.2px 21.4px);
  -webkit-mask: linear-gradient(var(--ga), transparent calc(var(--u) - var(--rp) - 5px), #000 calc(var(--u) - var(--rp) - 2.6px), #000 calc(var(--u) - var(--rp) - .8px), transparent calc(var(--u) - var(--rp) + .2px));
  mask: linear-gradient(var(--ga), transparent calc(var(--u) - var(--rp) - 5px), #000 calc(var(--u) - var(--rp) - 2.6px), #000 calc(var(--u) - var(--rp) - .8px), transparent calc(var(--u) - var(--rp) + .2px));
}
.st.tearing .st-strings { opacity: var(--glue, 1); transition: none; }
.st .st-flapw { position: absolute; inset: 0; z-index: 3; perspective: 1400px; filter: drop-shadow(calc(.8px + var(--s) * .012px) calc(1px + var(--s) * .02px) calc(1px + var(--s) * .015px) rgb(24 50 29 / .28)) drop-shadow(calc(2px + var(--s) * .04px) calc(3px + var(--s) * .07px) calc(4px + var(--s) * .07px) rgb(24 50 29 / .14)); }
.st .st-flap { position: absolute; left: 0; top: 0; width: var(--Wp); height: var(--Hp); border-radius: calc(var(--r) + var(--cut)); overflow: hidden; background: #eff3ea; transform-origin: 0 0; clip-path: polygon(0 0, 0 0, 0 0); }
.st .st-ghost { position: absolute; inset: 0; padding: var(--cut); border-radius: inherit; opacity: .2; filter: blur(.5px) saturate(.75); }
.st .st-ghost .st-face { box-shadow: none; }
.st .st-glue {
  --fu: calc(var(--s) * 1px);
  position: absolute; inset: 0; border-radius: inherit;
  background:
    linear-gradient(var(--ga), rgb(255 255 255 / 0) calc(var(--fu) - 10px), rgb(255 255 255 / .95) calc(var(--fu) - 3.5px), rgb(226 232 218) calc(var(--fu) - 1px), rgb(186 196 176) var(--fu)),
    linear-gradient(var(--ga), rgb(255 255 255 / 0) calc(var(--fu) * .64), rgb(255 255 255 / .95) calc(var(--fu) * .66), rgb(255 255 255 / 0) calc(var(--fu) * .68)),
    linear-gradient(var(--ga), rgb(255 255 255 / 0) calc(var(--fu) * .34), rgb(255 255 255 / .9) calc(var(--fu) * .47), rgb(255 255 255 / .5) calc(var(--fu) * .52), rgb(255 255 255 / 0) calc(var(--fu) * .6)),
    linear-gradient(var(--ga), rgb(255 255 255 / 0) calc(var(--fu) * .1), rgb(255 255 255 / .55) calc(var(--fu) * .16), rgb(255 255 255 / 0) calc(var(--fu) * .23)),
    linear-gradient(var(--ga), rgb(24 50 29 / .15) 0, rgb(24 50 29 / 0) calc(var(--fu) * .3), rgb(24 50 29 / .06) calc(var(--fu) * .8), rgb(24 50 29 / 0) calc(var(--fu) - 8px)),
    repeating-linear-gradient(45deg, rgb(24 50 29 / .03) 0 .6px, rgb(24 50 29 / 0) .6px 4.6px),
    repeating-linear-gradient(-45deg, rgb(24 50 29 / .03) 0 .6px, rgb(24 50 29 / 0) .6px 4.6px),
    linear-gradient(var(--ga), rgb(255 255 255 / .1), rgb(255 255 255 / .35));
}
/* the arrow: its own round sticker over the top edge; it folds away with the corner it sits on */
.st .st-dotw { position: absolute; inset: 0; z-index: 2; }
.st .st-dot {
  position: absolute; display: block; right: 10px; top: 50%; width: var(--dsz); height: var(--dsz); margin-top: calc(var(--dsz) / -2); padding: 3px; border-radius: 50%;
  background: linear-gradient(160deg, #ffffff, #f5f7f2);
  transform: translate(7px, -11px) rotate(calc(11deg - var(--h) * 8deg));
  filter: drop-shadow(0 .6px .45px rgb(24 50 29 / .36)) drop-shadow(0 1.5px 2px rgb(24 50 29 / .14));
}
.st .st-dface { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: radial-gradient(120% 100% at 25% 10%, rgb(255 255 255 / .14), rgb(255 255 255 / 0) 55%), var(--dot); color: var(--dot-fg); }
.st .st-dface > * { grid-area: 1 / 1; }
.st .st-dface::after { content: ""; position: absolute; inset: 0; background: var(--st-grain); mix-blend-mode: multiply; opacity: .15; }
.st .st-dface svg { position: relative; z-index: 1; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; overflow: visible; margin: 0;
  transform: rotate(calc(-11deg + var(--h) * 8deg)) translate(calc(var(--h) * var(--ax, 1) * 1.5px), calc(var(--h) * var(--ay, 0) * 1.5px)); transition: opacity .15s; }

/* states */
@media (hover: hover) { .st.live:hover:not(.gone) { --h: 1; } }
.st.pressing { filter: drop-shadow(0 .3px .25px rgb(24 50 29 / .4)) drop-shadow(0 .6px 1px rgb(24 50 29 / .1)); }
.st:focus-visible { outline: 2px dashed var(--st-focus); outline-offset: 7px; border-radius: 24px; }
.on-dark .st:focus-visible { outline-color: var(--st-focus-dark); }
.st.gone { filter: none; cursor: default; }
.st.gone .st-body, .st.gone .st-dotw { visibility: hidden; }
.st.gone::after, .st:disabled::after, .st[aria-disabled="true"]::after { content: ""; position: absolute; left: 0; top: 0; width: var(--Wp); height: var(--Hp); border-radius: calc(var(--r) + var(--cut)); outline: 1.5px dashed #b7c2b0; outline-offset: -1.5px; }
.on-dark .st.gone::after { outline-color: #ffffff4d; }
.st:disabled, .st[aria-disabled="true"] { cursor: not-allowed; color: #97a292; filter: none; }
.st:disabled .st-sheet, .st:disabled .st-face, .st:disabled .st-dot, .st:disabled .st-dface { background: transparent; box-shadow: none; filter: none; }
.st:disabled .st-face::after, .st:disabled .st-dface::after, .st:disabled .st-flapw { display: none; }
/* busy: the arrow steps aside and a small arc turns in the round sticker; done: a check */
.st[aria-busy="true"] { cursor: progress; }
.st[aria-busy="true"] .st-dface svg, .st.is-done .st-dface svg { opacity: 0; }
.st[aria-busy="true"] .st-dface::before { content: ""; position: relative; z-index: 1; width: 40%; height: 40%; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; border-bottom-color: transparent; animation: st-spin .8s linear infinite; }
@keyframes st-spin { to { transform: rotate(360deg); } }

/* in flight, and landed */
.st-carry { position: fixed; z-index: 60; margin: 0; pointer-events: none; transform-origin: 50% 50%; filter: drop-shadow(0 .6px .5px rgb(24 50 29 / .3)) drop-shadow(0 calc(3px + var(--lift, 0) * 24px) calc(4px + var(--lift, 0) * 18px) rgb(24 50 29 / calc(.14 + var(--lift, 0) * .12))); }
.st.carry-spin { position: absolute; left: 0; top: 0; display: block; transform-origin: 0 0; filter: none; transition: none; }
.st-face3d { position: relative; display: block; }
.st-spot { position: absolute; z-index: 4; right: clamp(20px, 4vw, 64px); top: clamp(28px, 5vw, 72px); width: 0; height: 0; pointer-events: none; }
.st-spot .st { position: absolute; right: 0; top: 0; pointer-events: none; transform: rotate(var(--rot)) scale(.9); animation: st-land .5s cubic-bezier(.2, 1, .3, 1) both; }
@keyframes st-land { 0% { transform: rotate(var(--rot)) scale(.9); } 22% { transform: rotate(var(--rot)) scale(.885, .878); } 100% { transform: rotate(var(--rot)) scale(.9); } }
@keyframes st-reprint { from { opacity: 0; transform: rotate(var(--rot)) scale(.96); } to { opacity: 1; transform: rotate(var(--rot)); } }
.st.in { animation: st-reprint .5s var(--st-ease) both; }

/* variants */
.st.ink { --face: #1d3a23; --fg: #fff; --dot: var(--st-lime); --dot-fg: var(--st-ink); }
.st.pale { --face: var(--st-meadow); --dot: var(--st-lime); --dot-fg: var(--st-ink); }
.st.sm { --fh: 38px; --dsz: 34px; --pr: 44px; --pl: 16px; --r: 11px; --cut: 3px; font-size: .9375rem; }
.st.sm .st-dot { right: 7px; transform: translate(6px, -8px) rotate(calc(11deg - var(--h) * 8deg)); }
.st.sm .st-dface svg { width: 15px; height: 15px; }
.st.block { display: flex; width: 100%; }
.st.ico { --dsz: 54px; --dot: var(--st-lime); --dot-fg: var(--st-ink); }
.st.ico.ink { --dot: #1d3a23; --dot-fg: var(--st-lime-hi); }
.st.ico .st-body { display: none; }
.st.ico .st-dotw { position: relative; inset: auto; display: block; }
.st.ico .st-dot { position: relative; right: auto; top: auto; margin: 0; padding: 4px; transform: rotate(calc(-8deg + var(--h) * 12deg)) scale(var(--pop, 1)); transition: transform .12s; }
.st.ico .st-dface svg { width: 22px; height: 22px; transform: rotate(calc(8deg - var(--h) * 12deg)); }
.st.ico.pressing .st-dot { transform: rotate(calc(-8deg + var(--h) * 12deg)) scale(.94); }
.st.ico.gone::after { border-radius: 50%; }
.st.deco { cursor: inherit; }
@media (hover: hover) { :hover > .st.deco, .deco-root:hover .st.deco { --h: 1; } }

@media (prefers-reduced-motion: reduce) { .st, .st * { transition-duration: .01ms !important; animation: none !important; } }
.still .st, .still .st * { transition-duration: .01ms !important; animation: none !important; }
@media (forced-colors: active) { .st .st-sheet { border: 1px solid LinkText; } .st .st-flapw, .st .st-roll, .st .st-strings { display: none; } }