:root{--placeholder-color: hsl(240, 54%, 87%);--bg-color: hsl(240, 54%, 97%);--focus-color: hsla(240, 54%, 61%, 0.6);--shadow-color: hsla(240, 54%, 61%, 0.2);--text-color: hsl(0, 0%, 20%);--text-color-inversed: hsl(0, 0%, 95%);--success-color: hsl(145, 63%, 42%);--success-color-desaturated: hsl(145, 0%, 42%);--failure-color: hsl(0, 79%, 63%);--border-radius: 6px;--z-index-xs: 1;--z-index-sm: 10;--z-index-md: 100;--easing: cubic-bezier(0.25, 0.01, 0.25, 1);--transition-duration-step-1: 450ms;--transition-duration-step-2: 300ms;--transition-duration-step-3: 300ms;--transition-delay-step-2: calc(var(--transition-duration-step-1));--transition-delay-step-3: calc( var(--transition-duration-step-1) + var(--transition-duration-step-2) );--transition-step-1: var(--transition-duration-step-1) var(--easing);--transition-step-2: var(--transition-duration-step-2) var(--easing) var(--transition-delay-step-2);--transition-step-3: var(--transition-duration-step-3) var(--easing) var(--transition-delay-step-3)}.sms_area{display:flex;justify-content:center;align-items:center;width:100vw;margin:0}.sms_area *,.sms_area *::after,.sms_area *::before{box-sizing:border-box;font-family:Helvetica Neue}.sms_area .main{display:grid;justify-content:center}.sms_area .label{font-size:14px;line-height:15px;text-align:center;letter-spacing:0.01em;color:var(--text-color)}.sms_area .label.is-muted{color:#828282}.sms_area .animation-controls{margin-top:55px}.sms_area .animation-controls__content{display:grid;grid-auto-flow:column;justify-content:center;gap:6px}.sms_area .btn{min-width:90px;padding:9px 0;border:0;border-radius:6px;font-size:14px;line-height:15px;letter-spacing:0.01em;font-weight:bold;cursor:pointer;transition:opacity 150ms ease-in}.sms_area .btn:hover,.sms_area .btn:focus{opacity:0.7}.sms_area .btn:active{position:relative;top:1px}.sms_area .btn.success-btn{color:#219653;background-color:#d3eadd}.sms_area .btn.failure-btn{color:#eb5757;background-color:#ffe9e0}.sms_area .btn.reset-btn{color:#6666d1;background-color:#f2f2f2}.sms_area .settings-controls{margin-top:130px}.sms_area .settings-controls__content{display:grid;justify-content:center;gap:18px}.sms_area .settings-controls__input{width:67px;height:33px;border:0;border-radius:6px;font-size:14px;line-height:15px;font-weight:bold;letter-spacing:0.01em;color:#828282;background-color:#f2f2f2;text-align:center}.sms_area .settings-controls__label{font-size:14px;line-height:15px;letter-spacing:0.01em;font-weight:bold;color:#828282}@media (min-width: 768px){.sms_area .settings-controls__content{grid-auto-flow:column}}.sms_area .fieldset{position:relative;display:grid;grid-auto-flow:column;justify-content:center;-moz-column-gap:12px;column-gap:12px;border-radius:6px;overflow:hidden;will-change:transform;padding:6px;margin:-6px}.sms_area .fieldset::before{content:"";position:absolute;top:0;left:0;height:100%;width:100%;transform:translateX(-100%)}.sms_area .box{position:relative;display:flex;align-items:center;justify-content:center;height:42px;width:42px;border-radius:var(--border-radius);box-shadow:0 0 6px 1px var(--shadow-color);overflow:hidden;will-change:transform}.sms_area .box:focus-within{box-shadow:0 0 6px 1px var(--shadow-color),0 0 0 2px var(--focus-color)}.sms_area .box::before,.sms_area .box::after{content:"";position:absolute;height:100%;width:100%;top:0;left:0;border-radius:var(--border-radius);overflow:hidden}.sms_area .box::before{background:var(--bg-color);z-index:var(--z-index-xs);transition:background-color var(--transition-step-1)}.sms_area .box::after{transform:translateY(100%);background-color:var(--success-color-desaturated);opacity:0;z-index:var(--z-index-sm);transition:transform var(--transition-step-1),opacity var(--transition-step-1),background-color var(--transition-step-1)}.sms_area .field{position:relative;border:0;outline:0;font-size:25.21px;line-height:42px;color:var(--text-color);background-color:transparent;text-align:center;z-index:var(--z-index-md)}.sms_area .field::-moz-placeholder{color:var(--placeholder-color)}.sms_area .field:-ms-input-placeholder{color:var(--placeholder-color)}.sms_area .field::placeholder{color:var(--placeholder-color)}.sms_area .animate-success.fieldset{padding:0;margin:0}.sms_area .animate-success.fieldset::before{background-color:var(--success-color);transform:translateX(0);transition:transform var(--transition-step-2)}.sms_area .animate-success>.box{box-shadow:none;transition:transform var(--transition-step-3)}.sms_area .animate-success>.box:nth-child(1){transform:translateX(24px)}.sms_area .animate-success>.box:nth-child(2){transform:translateX(12px)}.sms_area .animate-success>.box:nth-child(4){transform:translateX(-12px)}.sms_area .animate-success>.box:nth-child(5){transform:translateX(-24px)}.sms_area .animate-success>.box::before{background-color:transparent}.sms_area .animate-success>.box::after{background-color:var(--success-color);transform:translateY(0);opacity:1}.sms_area .animate-success>.box>.field::-moz-placeholder{color:var(--text-color-inversed);-moz-transition:color var(--transition-step-1);transition:color var(--transition-step-1)}.sms_area .animate-success>.box>.field:-ms-input-placeholder{color:var(--text-color-inversed);-ms-transition:color var(--transition-step-1);transition:color var(--transition-step-1)}.sms_area .animate-success>.box>.field,.sms_area .animate-success>.box>.field::placeholder{color:var(--text-color-inversed);transition:color var(--transition-step-1)}.sms_area .animate-failure.fieldset{-webkit-animation-name:shaking;animation-name:shaking;-webkit-animation-duration:var(--transition-duration-step-2);animation-duration:var(--transition-duration-step-2);-webkit-animation-timing-function:var(--easing);animation-timing-function:var(--easing);-webkit-animation-delay:var(--transition-delay-step-2);animation-delay:var(--transition-delay-step-2)}.sms_area .animate-failure>.box::before{background-color:transparent}.sms_area .animate-failure>.box::after{background-color:var(--failure-color);transform:translateY(0);opacity:1}.sms_area .animate-failure>.box>.field::-moz-placeholder{color:var(--text-color-inversed);-moz-transition:color var(--transition-step-1);transition:color var(--transition-step-1)}.sms_area .animate-failure>.box>.field:-ms-input-placeholder{color:var(--text-color-inversed);-ms-transition:color var(--transition-step-1);transition:color var(--transition-step-1)}.sms_area .animate-failure>.box>.field,.sms_area .animate-failure>.box>.field::placeholder{color:var(--text-color-inversed);transition:color var(--transition-step-1)}@-webkit-keyframes shaking{0%,
    100%{transform:translateX(0)}25%,
    75%{transform:translateX(10px)}50%{transform:translateX(-10px)}}@keyframes shaking{0%,
    100%{transform:translateX(0)}25%,
    75%{transform:translateX(10px)}50%{transform:translateX(-10px)}}