.btn{--btn-bg: var(--ink);--btn-fg: var(--white);--btn-hover: var(--yellow);--btn-hover-fg: var(--ink);position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:space-between;gap:32px;min-height:48px;max-width:100%;padding:0 18px 0 20px;background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bg);font-family:var(--f-mono);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;line-height:1;white-space:nowrap;overflow:hidden;cursor:pointer;transition:color .45s var(--ease),border-color .45s var(--ease)}.btn:before{content:"";position:absolute;inset:0;z-index:-1;background:var(--btn-hover);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease)}.btn:hover:before,.btn:focus-visible:before{transform:scaleY(1)}.btn:hover,.btn:focus-visible{color:var(--btn-hover-fg)}.btn--full{width:100%}.btn--paper{--btn-bg: var(--paper);--btn-fg: var(--ink);--btn-hover: var(--ink);--btn-hover-fg: var(--yellow)}.btn--yellow{--btn-bg: var(--yellow);--btn-fg: var(--ink);--btn-hover: var(--ink);--btn-hover-fg: var(--yellow)}.btn--outline{--btn-bg: transparent;--btn-fg: var(--ink);--btn-hover: var(--ink);--btn-hover-fg: var(--yellow);border-color:var(--ink)}.btn--outline-light{--btn-bg: rgba(0, 0, 0, .32);--btn-fg: var(--white);--btn-hover: var(--yellow);--btn-hover-fg: var(--ink);border-color:#ffffffd9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.btn__label{display:block;overflow:hidden;height:1.3em;line-height:1.3em}.btn__roll{display:block;position:relative;transition:transform .55s var(--ease)}.btn__roll:after{content:attr(data-text);position:absolute;left:0;top:100%}.btn:hover .btn__roll,.btn:focus-visible .btn__roll{transform:translateY(-100%)}.btn--static:hover .btn__roll,.btn--static:focus-visible .btn__roll{transform:none}.btn__arrow{position:relative;display:block;width:18px;height:18px;overflow:hidden;flex:none}.btn__arrow svg{position:absolute;inset:0;transition:transform .6s var(--ease)}.btn__arrow svg:last-child{transform:translate(-120%)}.btn:hover .btn__arrow svg:first-child,.btn:focus-visible .btn__arrow svg:first-child{transform:translate(120%)}.btn:hover .btn__arrow svg:last-child,.btn:focus-visible .btn__arrow svg:last-child{transform:translate(0);transition-delay:.06s}.btn:focus-visible{outline-offset:3px}.btn--back{padding:0 20px 0 18px}.btn--back .btn__arrow svg:last-child{transform:translate(120%)}.btn--back:hover .btn__arrow svg:first-child,.btn--back:focus-visible .btn__arrow svg:first-child{transform:translate(-120%)}.btn--back:hover .btn__arrow svg:last-child,.btn--back:focus-visible .btn__arrow svg:last-child{transform:translate(0)}.btn:active{transform:translateY(1px)}@media(max-width:480px){.btn{gap:20px}}