body,html{margin:0;padding:0;width:100vw;height:100vh}body{background-color:#ecf0f1}body *{box-sizing:border-box}.container{position:relative;width:1212px;height:876px;margin:auto;display:grid;grid-template-rows:800px 64px;grid-template-columns:300px 900px;grid-template-areas:'control graph' 'input input';gap:12px;color:#fff}.container .wrapper{border-radius:2px;box-shadow:0 0 4px #bdc3c7}.container .control-wrapper{grid-area:control;background-color:#bc8f8f;padding:12px}.container .graph-wrapper{grid-area:graph;background-color:#eee}.container .input-wrapper{grid-area:input}.input-wrapper{display:flex;position:relative}.input-wrapper .input{flex:1;font-size:32px;font-family:Gabriola;outline:0;border:1px solid #e0efd9;padding:0 24px;transition:border-color .3s cubic-bezier(.77,0,.175,1),background-color .3s cubic-bezier(.77,0,.175,1);border-radius:2px;border-top-right-radius:0;border-bottom-right-radius:0;background-color:rgba(238,238,238,.4)}.input-wrapper .input:focus,.input-wrapper .input:hover{border-color:#6ab04c;background-color:#e0efd9}.input-wrapper .confirm{width:160px;font-size:24px;border-radius:2px;border-top-left-radius:0;border-bottom-left-radius:0;background-color:#6ab04c;border:none;outline:0;color:#fff;cursor:pointer;transition:opacity .3s cubic-bezier(.77,0,.175,1)}.input-wrapper .confirm:hover{opacity:.8}.input-wrapper .operator-list{color:#333;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;position:absolute;top:64px}.input-wrapper .operator-list .item{width:64px;height:64px;line-height:64px;text-align:center;font-size:32px;margin-right:12px;margin-top:12px;background-color:rgba(238,238,238,.4);user-select:none;border:1px solid #e0efd9;box-shadow:0 0 4px #bdc3c7;cursor:pointer;transition:border-color .3s cubic-bezier(.77,0,.175,1),background-color .3s cubic-bezier(.77,0,.175,1)}.input-wrapper .operator-list .item:hover{border-color:#6ab04c;background-color:#e0efd9}