.login-page *,.login-page :after,.login-page :before{box-sizing:border-box}.login-page{text-align:center;color:#fff;letter-spacing:.05em;background-color:#212121;min-height:100vh;font-family:monospace,serif}.login-container{justify-content:center;align-self:center;align-items:center;gap:var(--spacing-md);grid-template-columns:1fr;padding:0 1rem 1rem;display:flex}.login-container h1{font-size:var(--font-size-h1);grid-area:login}.login-form{text-align:center;width:min(90vw,300px);padding:clamp(32px, 8vh, 64px) var(--spacing-md) var(--spacing-lg);margin-top:0 auto;justify-content:center;display:grid}.login-form .control{margin:0 0 var(--spacing-lg)}.login-form .control input{width:100%;padding:var(--spacing-sm) var(--spacing-md);color:#fff;letter-spacing:.05em;font-family:monospace,serif;font-size:var(--font-size-sm);background:0 0;border:0}.login-form .control input:hover,.login-form .control input:focus{border:0;outline:none}.login-form .login-btn{width:100%;padding:var(--spacing-sm) var(--spacing-md);color:#fff;letter-spacing:.1em;font-family:monospace;font-weight:700;font-size:var(--font-size-sm);background:0 0;border:0;outline:none;display:block}.block-cube{--cube-depth:clamp(6px, .7vw, 10px);--cube-half-depth:clamp(3px, .35vw, 5px);--cube-border:clamp(1.5px, .15vw, 2.5px);margin-top:var(--spacing-lg);position:relative}.block-cube .bg-top{height:var(--cube-depth);bottom:100%;left:var(--cube-half-depth);right:calc(-1 * var(--cube-half-depth));background:linear-gradient(90deg,#020024 0%,#340979 37%,#00d4ff 94%);margin:0;position:absolute;transform:skew(-45deg)}.block-cube .bg-top .bg-inner{bottom:0}.block-cube .bg{background:linear-gradient(90deg,#020024 0%,#340979 37%,#00d4ff 94%);position:absolute;inset:0}.block-cube .bg-right{top:calc(-1 * var(--cube-half-depth));z-index:0;bottom:var(--cube-half-depth);width:var(--cube-depth);background:#00d4ff;position:absolute;left:100%;transform:skewY(-45deg)}.block-cube .bg-right .bg-inner{left:0}.block-cube .bg .bg-inner{transition:all .2s ease-in-out}.block-cube .bg-inner{left:var(--cube-border);top:var(--cube-border);right:var(--cube-border);bottom:var(--cube-border);background:#212121;position:absolute}.block-cube .text{z-index:2;position:relative}.block-cube.block-input input{z-index:2;position:relative}.block-cube.block-input input:focus~.bg-right .bg-inner,.block-cube.block-input input:focus~.bg-top .bg-inner,.block-cube.block-input input:focus~.bg-inner .bg-inner{background:#ffffff80;top:100%}.block-cube.block-input .bg-top,.block-cube.block-input .bg-right,.block-cube.block-input .bg{background:#ffffff80;transition:background .2s ease-in-out}:is(.block-cube.block-input .bg-right,.block-cube.block-input .bg-top) .bg-inner{transition:all .2s ease-in-out}:is(.block-cube.block-input:focus,.block-cube.block-input:hover) .bg-top,:is(.block-cube.block-input:focus,.block-cube.block-input:hover) .bg-right,:is(.block-cube.block-input:focus,.block-cube.block-input:hover) .bg{background:#fffc}:is(.block-cube.block-cube-hover:focus,.block-cube.block-cube-hover:hover) .bg .bg-inner{top:100%}