.lp-demo{--lp-paper:#fff;--lp-canvas:#faf7f5;--lp-ink:#1d1b18;--lp-ink-2:#46423c;--lp-muted:#736d66;--lp-soft:#aaa49c;--lp-line:#1d1b1817;--lp-line-strong:#1d1b1829;--lp-sand:#bd9f77;--lp-sand-soft:#f4efe9;--lp-sand-deep:#8c6a43;--lp-on-ink:#fdfcfa;--lp-error:#c4462b;--lp-ring:#717171;--lp-ring-soft:#71717166;--lp-ease:cubic-bezier(.16, 1, .3, 1);color:var(--lp-ink);-webkit-font-smoothing:antialiased;font-family:Nunito,Adtool Math Fallback,ui-sans-serif,system-ui,sans-serif}@supports (color:lab(0% 0 0)){.lp-demo{--lp-sand:lab(67.552% 7.07039 25.3699);--lp-sand-soft:lab(94.8208% .905246 3.85242);--lp-sand-deep:lab(47.7216% 10.154 27.5204);--lp-ring:lab(47.8% 0 .0000119209);--lp-ring-soft:lab(47.8% 0 .0000119209/.4)}}.lp-demo :is(button,a,[tabindex]:not([tabindex="-1"])):focus{outline:none}.lp-demo :is(button,a,[tabindex]:not([tabindex="-1"])):focus-visible{outline:2px solid var(--lp-ring-soft);outline-offset:1px}.lp-demo-btn{cursor:pointer;height:50px;transition:transform .35s var(--lp-ease), box-shadow .35s var(--lp-ease), background-color .35s, color .35s;border-radius:9999px;justify-content:center;align-items:center;gap:.5rem;padding:0 1.5rem;font-size:15.5px;font-weight:700;display:inline-flex}.lp-demo-btn:active:not(:disabled){transform:scale(.97)}.lp-demo-btn:disabled{cursor:default}.lp-demo-btn-dark{background:var(--lp-ink);color:var(--lp-on-ink);box-shadow:inset 0 1px #ffffff1f,0 12px 26px -12px #22201c99}.lp-demo-btn-dark:hover:not(:disabled){transform:translateY(-1px);box-shadow:inset 0 1px #ffffff1f,0 18px 32px -14px #e2672b8c}.lp-demo-btn-dark:disabled{background:var(--lp-line-strong);color:var(--lp-muted);box-shadow:none}.lp-demo-btn-light{color:var(--lp-ink);box-shadow:0 0 0 1px var(--lp-line-strong) inset;background:#fff}.lp-demo-btn-light:hover{background:var(--lp-canvas)}.lp-demo-btn .lp-arrow{transition:transform .35s var(--lp-ease)}.lp-demo-btn:hover .lp-arrow{transform:translate(3px)}.lp-demo-option{box-shadow:0 0 0 1px var(--lp-line-strong);transition:box-shadow .5s cubic-bezier(.4,0,.2,1),background-color .2s,color .2s}.lp-demo-option:hover:not(:disabled):not([aria-pressed=true]){box-shadow:0 0 0 1px #1d1b1842,0 10px 24px -14px #502d1466}.lp-demo-option.lp-demo-option-fill{box-shadow:0 0 0 1px #0000}.lp-demo-input,.lp-demo-field{width:100%;box-shadow:0 0 0 1px var(--lp-line-strong) inset;color:var(--lp-ink);background:#fff;border-radius:14px;font-size:16px;font-weight:600;transition:box-shadow .2s ease-out,background-color .2s ease-out}.lp-demo-input{height:48px;padding:0 14px}textarea.lp-demo-input{height:auto;padding:12px 14px;line-height:1.5}.lp-demo-input::-moz-placeholder{color:var(--lp-soft);font-weight:600}.lp-demo-field input::-moz-placeholder{color:var(--lp-soft);font-weight:600}.lp-demo-input::placeholder,.lp-demo-field input::placeholder{color:var(--lp-soft);font-weight:600}.lp-demo-input[data-empty=true]{color:var(--lp-soft)}.lp-demo-input:hover,.lp-demo-field:hover{box-shadow:0 0 0 1px color-mix(in oklab, var(--lp-ring) 45%, transparent) inset}.lp-demo-input:focus,.lp-demo-field:focus-within{box-shadow:0 0 0 1px var(--lp-ring) inset, 0 0 0 1px var(--lp-ring-soft);outline:none}.lp-demo-input[aria-invalid=true],.lp-demo-field[data-invalid=true]{box-shadow:0 0 0 1px color-mix(in oklab, var(--lp-error) 70%, transparent) inset;background:#fffaf8}.lp-demo-input[aria-invalid=true]:focus,.lp-demo-field[data-invalid=true]:focus-within{box-shadow:0 0 0 1px var(--lp-error) inset, 0 0 0 1px color-mix(in oklab, var(--lp-error) 30%, transparent)}.lp-demo .lp-demo-field :is(button,a,[tabindex]):focus-visible{outline:none}@media (min-width:640px){.lp-demo-input,.lp-demo-field{font-size:15px}}.lp-demo-input[type=number]{appearance:textfield}.lp-demo-input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.lp-demo-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.lp-demo-grid{background-image:linear-gradient(90deg,#1d1b180b 1px,#0000 1px),linear-gradient(#1d1b180b 1px,#0000 1px);background-position:top;background-size:32px 32px;-webkit-mask-image:radial-gradient(80% 70% at 50% 35%,#000 25%,#0000 80%);mask-image:radial-gradient(80% 70% at 50% 35%,#000 25%,#0000 80%)}.lp-demo-backdrop{animation:lp-demo-fade .4s var(--lp-ease) both}.lp-demo-pop{animation:lp-demo-pop .6s var(--lp-ease) both}@keyframes lp-demo-fade{0%{opacity:0}}@keyframes lp-demo-pop{0%{opacity:0;transform:translateY(24px)scale(.98)}}.lp-demo-rise{animation:lp-demo-rise .5s var(--lp-ease) both;animation-delay:calc(var(--lp-demo-i,0) * 28ms)}@keyframes lp-demo-rise{0%{opacity:0;transform:translateY(8px)}}.lp-demo-tick{animation:.7s cubic-bezier(.34,1.5,.5,1) both lp-demo-tick}.lp-demo-tick path{stroke-dasharray:30;stroke-dashoffset:30px;animation:lp-demo-draw .5s var(--lp-ease) .35s forwards}@keyframes lp-demo-tick{0%{opacity:0;transform:scale(.6)}}@keyframes lp-demo-draw{to{stroke-dashoffset:0}}.lp-demo-live:after{content:"";background:inherit;border-radius:9999px;animation:2.4s ease-out infinite lp-demo-live;position:absolute;inset:0}@keyframes lp-demo-live{0%{opacity:.6;transform:scale(1)}70%,to{opacity:0;transform:scale(2.4)}}@media (prefers-reduced-motion:reduce){.lp-demo-backdrop,.lp-demo-pop,.lp-demo-rise,.lp-demo-tick,.lp-demo-live:after{animation:none!important}.lp-demo-tick path{stroke-dashoffset:0;animation:none!important}}
