*{padding:0;margin:0;box-sizing:border-box}body{width:100%;height:100vh;overflow:hidden;display:flex;justify-content:center;align-items:center}.box-container{height:200px;width:400px;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1;gap:2rem}.controls{display:flex;flex-direction:column;gap:1rem;padding:1.5rem;background:#f5f5f5;border-radius:8px;box-shadow:0 2px 8px #0000001a}.control-group{display:flex;align-items:center;gap:.5rem}.control-group label{font-weight:500;color:#333;min-width:100px}.control-group input{padding:.5rem;border:1px solid #ddd;border-radius:4px;font-size:14px;width:100px}.control-group input:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 2px #007bff40}.control-group input[type=text]{text-align:center}.symbol-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.symbol-container span{font-size:24px;font-weight:bolder;color:#a4a4a4;cursor:default;-webkit-user-select:none;user-select:none;transition:.3s ease all}.symbol-container.active span,.symbol-container span.active{transform:rotate(90deg);color:#222}