@layer components{.char-btn{width:100%;max-width:12em;font-family:var(--font-body);text-transform:uppercase;cursor:pointer;background:0 0;border:0;border-radius:.25em;justify-content:center;align-items:center;padding:.75em 1em .7em;font-size:1em;line-height:1;display:flex;position:relative}.char-btn:disabled{cursor:not-allowed;opacity:.6}.char-btn__bg{background-color:var(--color-acid);transition:inset .6s var(--ease-house);border-radius:.25em;position:absolute;inset:0}.char-btn:hover:not(:disabled) .char-btn__bg,.char-btn:focus-visible:not(:disabled) .char-btn__bg{inset:.125em}.char-btn__text{white-space:nowrap;color:var(--color-ink);line-height:1.3;display:inline-block;position:relative;overflow:hidden}.char-btn__text span{text-shadow:0 1.3em;transition:transform .6s var(--ease-house);display:inline-block;position:relative;transform:translateY(0)rotate(.001deg)}.char-btn:hover:not(:disabled) .char-btn__text span,.char-btn:focus-visible:not(:disabled) .char-btn__text span{transform:translateY(-1.3em)rotate(.001deg)}.char-btn:focus-visible{outline:2px solid var(--color-paper);outline-offset:-4px}.char-btn--papier .char-btn__bg{background-color:var(--color-paper)}.char-btn--papier:focus-visible{outline-color:var(--color-ink)}@media (prefers-reduced-motion:reduce){.char-btn__bg,.char-btn__text span{transition:none}}}