.auth{max-width:480px;min-height:100dvh;padding:0 var(--gutter) calc(24px + env(safe-area-inset-bottom));flex-direction:column;margin:0 auto;display:flex;position:relative;overflow:hidden}.auth__canopy{isolation:isolate;pointer-events:none;height:210px;position:absolute;inset:0 0 auto}.auth__band{mix-blend-mode:multiply;animation:silk-in .9s var(--ease-out) both;position:absolute}.auth__band--indigo{background:var(--indigo-silk);opacity:.9;clip-path:polygon(0 0,100% 10%,100% 52%,52% 100%,0 46%);height:46px;top:22px;left:-20%;right:-20%}.auth__band--madder{background:var(--madder-silk);opacity:.85;clip-path:polygon(0 0,100% 0,34% 100%,12% 100%);width:40px;height:230px;animation-delay:80ms;top:-20px;right:26%;transform:rotate(14deg)}.auth__band--saffron{background:var(--saffron-silk);opacity:.88;clip-path:polygon(0 0,100% 0,88% 100%,66% 100%);width:40px;height:230px;animation-delay:.16s;top:-20px;right:14%;transform:rotate(-16deg)}@keyframes silk-in{0%{opacity:0;translate:0 -14px}}.auth__top{z-index:1;padding-top:calc(18px + env(safe-area-inset-top));position:relative}.auth__main{z-index:1;flex:1;padding-top:170px;position:relative}.auth__title{margin-bottom:12px}.auth__lead{max-width:34ch}.auth__form{gap:14px;margin-top:28px;display:grid}.auth__alt{margin-top:18px}.auth__foot{z-index:1;gap:18px;padding-top:24px;display:flex;position:relative}.otp{height:64px;display:block;position:relative}.otp__input{color:#0000;caret-color:#0000;letter-spacing:1em;z-index:1;background:0 0;border:0;outline:none;width:100%;font-size:30px;position:absolute;inset:0}.otp__cells{grid-template-columns:repeat(6,1fr);gap:8px;height:100%;display:grid}.otp__cell{background:var(--paper);box-shadow:inset 0 -1.5px 0 var(--hair-2);font-variant-numeric:tabular-nums;transition:box-shadow .16s var(--ease-out), background-color .16s var(--ease-out), transform .22s var(--ease-settle);justify-content:center;align-items:center;font-size:28px;font-weight:560;display:flex}.otp__cell--on{box-shadow:inset 0 -2px 0 var(--ink);transform:translateY(-1px)}.otp__input:focus+.otp__cells .otp__cell--caret{background:var(--wash-indigo);box-shadow:inset 0 -2.5px 0 var(--indigo)}.demo-box{border-top:1px solid var(--hair-2);margin-top:34px;padding-top:16px}.demo-box__head{margin:0 0 12px}.demo-box__row{grid-template-columns:1fr 1fr;gap:8px;display:grid}.demo-box .btn{background:var(--sky);padding:0 10px;font-size:15px}